/* ===== Design Tokens (matched to Star Depot logo: blue #004AAC + black) ===== */
:root{
  --ink: #0A0A0A;
  --cream: #EAF0FA;
  --brand: #004AAC;
  --steel: #1F5FB8;
  --charcoal: #1B1B1B;
  --paper: #F7F9FC;
  --border: rgba(10,10,10,0.12);
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
a{ color: inherit; }
.wrap{ max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.eyebrow{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgb(232 92 51);
  margin-bottom: 10px;
  text-transform: uppercase;
}
h1,h2,h3{ font-family: var(--font-display); color: var(--ink); margin: 0 0 12px; line-height: 1.15; }
h1{ font-size: clamp(2.1rem, 4.5vw, 3.2rem); font-weight: 600; }
h3{ font-size: 1.15rem; font-weight: 600; }
p{ margin: 0 0 14px; }
.lede{ font-size: 1.08rem; color: #3a3a3a; max-width: 60ch; }

/* ===== Icons ===== */
.icon-wrap{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:10px;
  background: rgba(232,92,51,0.08); color: var(--brand);
  margin-bottom: 14px; flex-shrink:0;
}
.icon-wrap.steel{ background: rgba(59,110,143,0.1); color: var(--steel); }
.icon-wrap.on-dark{ background: rgba(232,92,51,0.16); }
.icon{ width:26px; height:26px; }
.icon-wrap.sm{ width:40px; height:40px; border-radius:8px; }
.icon-wrap.sm .icon{ width:20px; height:20px; }

/* ===== Header ===== */
.site-header{ background: #fff; position: sticky; top:0; z-index: 20; border-bottom: 1px solid var(--border); }
.header-inner{ display:flex; align-items:center; justify-content: space-between; height: 76px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{ font-family: var(--font-mono); background: var(--brand); color:#fff; font-weight:600; font-size:0.85rem; padding:6px 9px; border-radius:3px; letter-spacing:0.05em; }
.brand-mark.small{ display:inline-block; margin-bottom:8px; }
.brand-name{ font-family: var(--font-display); color: var(--ink); font-size:1.15rem; font-weight:600; }
.main-nav{ display:flex; align-items:center; gap:26px; }
.main-nav a{ color: #46505c; text-decoration:none; font-size:0.9rem; transition: color .15s; }
.main-nav a:hover, .main-nav a.active{ color: var(--brand); }
.btn-nav{ background: var(--brand); color:#fff !important; padding:9px 18px; border-radius:4px; font-weight:600; }
.btn-nav:hover{ color:#fff !important; opacity:0.92; }

/* ===== Hero ===== */
.hero{
  color:#fff; padding: 88px 0 96px; position:relative; overflow:hidden;
}
.hero-slider{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transition: opacity 1.2s ease-in-out;
}
.hero-slide.active{ opacity:1; }
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(100deg, rgba(10,31,51,0.94) 0%, rgba(10,31,51,0.86) 45%, rgba(10,31,51,0.65) 100%);
}
.hero .hero-inner{ position:relative; z-index:2; }
.hero-dots{ position:relative; z-index:2; display:flex; justify-content:center; gap:9px; margin-top:56px; }
.hero-dots button{
  width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.6);
  background:transparent; padding:0; cursor:pointer; transition: background .2s, transform .2s;
}
.hero-dots button.active{ background:#fff; transform:scale(1.2); }
.hero-inner{ display:grid; grid-template-columns: 1.4fr 0.8fr; gap: 40px; align-items:center; }
.hero h1{ color:#fff; }
.hero .lede{ color: rgba(255,255,255,0.72); }
.hero-actions{ display:flex; gap:14px; margin-top: 26px; flex-wrap: wrap; }
.btn-primary{ background: var(--brand); color:#fff; text-decoration:none; padding: 13px 24px; border-radius:4px; font-weight:600; font-size:0.95rem; display:inline-block; transition: transform .15s, box-shadow .15s; }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232,92,51,0.35); }
.btn-ghost{ border:1px solid rgba(255,255,255,0.3); color:#fff; text-decoration:none; padding:13px 24px; border-radius:4px; font-size:0.95rem; }

.hero-seal{ display:flex; justify-content:center; }
.seal{
  width: 168px; height:168px; border-radius:50%;
  border: 2px dashed rgba(232,92,51,0.65);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: var(--font-mono); color: rgb(232 92 51); font-size:0.72rem; letter-spacing:0.12em;
  transform: rotate(-8deg);
}
.seal-mid{ font-family: var(--font-display); color:#fff; font-size:1.05rem; letter-spacing:0.04em; margin:6px 0; }

/* ===== Feature strip ===== */
.strip{ background: var(--cream); padding: 46px 0; border-bottom: 1px solid var(--border); }
.strip-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.strip-grid > div{ display:flex; flex-direction:column; align-items:flex-start; }
.strip-grid h3{ font-size:1rem; margin-bottom:6px; }
.strip-grid p{ font-size:0.88rem; color:#4a4a4a; margin:0; }

/* ===== Media (photo) thumbnails — replaces icon badges ===== */
.media-thumb{ width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius:6px; display:block; margin-bottom:14px; background:var(--cream); }
.media-thumb.round{ border-radius:10px; }
.media-sq{ width:100%; aspect-ratio: 1/1; object-fit:cover; border-radius:8px; display:block; margin-bottom:12px; background:var(--cream); }
.media-row-thumb{ width:84px; height:84px; object-fit:cover; border-radius:8px; flex-shrink:0; background:var(--cream); }
.media-tall{ width:100%; height:100%; min-height:260px; object-fit:cover; border-radius:8px; display:block; }
.mission-photo{ margin-bottom:16px; }

/* ===== Mission ===== */
.who-we-are-row{ display:grid; grid-template-columns: 1fr 1.1fr; gap:44px; align-items:center; padding: 40px 0 10px; }
.wwa-image{ width:100%; height:320px; object-fit:cover; border-radius:10px; }
.wwa-content p{ font-size:1.02rem; color:#3a3a3a; margin-top:6px; }
.mission{ padding: 20px 0 72px; }
.mv-image{ width:100%; height:190px; object-fit:cover; border-radius:8px; margin-bottom:14px; }
.mission-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 52px; }
.mission-block{ margin-bottom: 26px; }
.mission-block:last-child{ margin-bottom:0; }

/* ===== Core services ===== */
.core-services{ padding: 20px 0 80px; }
.services-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:18px; margin-top:20px; }
.service-card{ background:#fff; border:1px solid var(--border); border-radius:6px; padding:16px 16px 20px; }
.service-code{ font-family: var(--font-mono); color: var(--brand); font-size:0.78rem; letter-spacing:0.1em; }
.service-card h3{ margin: 4px 0 6px; font-size:1rem; }
.service-card p{ font-size:0.86rem; color:#555; margin:0; }

/* ===== Page header (about/services/nvocc/contact) ===== */
.page-header{ padding: 60px 0 20px; }

/* ===== About ===== */
.about-banner{ width:100%; height:auto; max-height:420px; object-fit:cover; border-radius:10px; display:block; margin: 20px 0 10px; }
.about-story{ display:grid; grid-template-columns: 1fr 1fr; gap:52px; padding: 30px 0 70px; }
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:52px; padding: 20px 0 80px; }
.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ padding: 10px 0 10px 26px; border-bottom: 1px solid var(--border); position:relative; font-size:0.95rem; }
.check-list li::before{ content:"→"; position:absolute; left:0; color: var(--brand); font-weight:700; }

/* ===== Services list page ===== */
.services-list{ padding: 20px 0 80px; display:flex; flex-direction:column; gap:0; }
.service-row{ display:grid; grid-template-columns: 84px 1fr; gap:20px; padding: 26px 0; border-bottom: 1px solid var(--border); align-items:flex-start; }
.service-row a{ color: var(--steel); font-weight:600; text-decoration:none; }

/* ===== Contact ===== */
.contact-grid{ padding: 20px 0 90px; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:44px; align-items:start; }
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:0.88rem; font-weight:500; color: var(--ink); }
.contact-form input, .contact-form textarea{
  font-family: var(--font-body); font-size:0.96rem; padding:11px 13px;
  border:1px solid var(--border); border-radius:4px; background:#fff; color: var(--charcoal);
}
.contact-form input:focus, .contact-form textarea:focus{ outline: 2px solid var(--steel); outline-offset:1px; }
.contact-form button{ align-self:flex-start; border:none; cursor:pointer; }

.contact-info-card{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:26px; }
.contact-info-card h3{ font-size:1.1rem; margin-bottom:18px; }
.contact-info-row{ margin-bottom:16px; }
.contact-info-row:last-of-type{ margin-bottom:20px; }
.ci-label{ display:block; font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--steel); margin-bottom:4px; }
.contact-info-row p{ margin:0; font-size:0.92rem; color: var(--charcoal); }
.contact-info-row a{ color: var(--brand); text-decoration:none; font-weight:600; }
.contact-info-row a:hover{ text-decoration:underline; }
.contact-map{ border-radius:8px; overflow:hidden; border:1px solid var(--border); line-height:0; }

.captcha-row{ background: transparent; border:none; padding:0; }
.captcha-row .g-recaptcha{ transform-origin: 0 0; }

@media (max-width: 780px){ .contact-grid{ grid-template-columns: 1fr; } }
.err{ color: var(--brand); font-size:0.8rem; font-weight:400; }
.alert-success{ background:#e6f4ea; border:1px solid #a9d8b8; color:#1e5c33; padding:14px 16px; border-radius:5px; margin-bottom:20px; font-size:0.92rem; }

/* ===== Footer ===== */
.brand-logo{ height: 75px; width:auto; display:block; }
.brand-logo.small{ height:34px; }
.brand-logo-chip{ display:inline-block; background:#fff; padding:6px 12px; border-radius:8px; margin-bottom:12px; line-height:0; }

.site-footer{ background: var(--ink); color: rgba(255,255,255,0.7); padding: 44px 0 0; margin-top: 40px; }
.footer-inner{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:32px; padding-bottom: 34px; }
.footer-col p{ font-size:0.85rem; margin:0; }
.footer-col h4{ color:#fff; font-family: var(--font-display); font-size:0.95rem; margin:0 0 14px; font-weight:600; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a{ text-decoration:none; color: rgba(255,255,255,0.7); font-size:0.88rem; }
.footer-links a:hover{ color:#fff; }
.footer-contact{ font-size:0.85rem; color: rgba(255,255,255,0.7); }
.footer-contact p{ margin:0 0 8px; }
.footer-contact a{ color: rgba(255,255,255,0.85); text-decoration:none; }
.footer-contact a:hover{ color:#fff; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.1); padding: 16px 0; }
.footer-bottom .copyright{ margin:0; font-size:0.78rem; opacity:0.6; text-align:center; }

@media (max-width: 760px){
  .footer-inner{ grid-template-columns: 1fr; }
}

/* ===== Shipments tracking page (table/grid, replaces ticker) ===== */
.shipments-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.shipments-toolbar .count{ font-family: var(--font-mono); font-size:0.8rem; color:#666; }
.shipments-table-wrap{ background:#fff; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
table.shipments-table{ width:100%; border-collapse:collapse; }
table.shipments-table th{ text-align:left; font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--steel); background: var(--cream); padding: 12px 14px; }
table.shipments-table td{ padding: 13px 14px; border-top:1px solid var(--border); font-size:0.9rem; }
table.shipments-table .cntr{ font-family: var(--font-mono); font-weight:600; color: var(--ink); }
.status-pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.72rem; font-family: var(--font-mono); text-transform:capitalize; }
.status-pill.in-transit{ background:#e6f0fb; color:#1d5fa8; }
.status-pill.docked{ background:#fff4e0; color:#9a6600; }
.status-pill.customs{ background:#f5e9fc; color:#7b32a8; }
.status-pill.delivered{ background:#e6f4ea; color:#1e5c33; }
.pagination-wrap{ margin-top:20px; }
.pagination-wrap nav > div{ font-size:0.85rem; }

/* ==== Shipments: view toggle + grid mode ==== */
.view-toggle{ display:inline-flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:#fff; }
.view-toggle button{ border:none; background:#fff; color:#666; font-family: var(--font-body); font-size:0.82rem; font-weight:600; padding:8px 16px; cursor:pointer; transition: background .15s, color .15s; }
.view-toggle button.active{ background: var(--ink); color:#fff; }
.view-toggle button:not(.active):hover{ background: var(--cream); }

.shipments-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.shipment-card{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:18px; }
.shipment-card .cntr{ font-family: var(--font-mono); font-weight:600; color: var(--ink); font-size:0.92rem; display:block; margin-bottom:8px; }
.shipment-card .route{ font-size:0.88rem; color:#444; margin-bottom:12px; }
.shipment-card .route .arrow{ color: var(--brand); margin: 0 4px; }
.shipment-card .card-foot{ display:flex; justify-content:space-between; align-items:center; }
.shipment-card .eta{ font-family: var(--font-mono); font-size:0.78rem; color:#666; }

/* Generic styling for Laravel's default pagination markup (no Tailwind loaded) */
.pagination-wrap nav[role="navigation"]{ display:flex; justify-content:center; }
.pagination-wrap ul{ list-style:none; display:flex; gap:4px; padding:0; margin:0; flex-wrap:wrap; }
.pagination-wrap li{ display:inline-block; }
.pagination-wrap a, .pagination-wrap span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  border:1px solid var(--border); border-radius:5px;
  font-family: var(--font-mono); font-size:0.82rem; color: var(--ink);
  text-decoration:none; background:#fff;
}
.pagination-wrap a:hover{ background: var(--cream); }
.pagination-wrap span[aria-current="page"] span,
.pagination-wrap .active span{ background: var(--brand); color:#fff; border-color: var(--brand); }
.pagination-wrap span[aria-disabled="true"]{ color:#bbb; }

@media (max-width: 760px){ .shipments-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px){ .shipments-grid{ grid-template-columns: 1fr; } }

/* ===== Quote request form ===== */
.quote-wrap{ padding: 20px 0 90px; max-width: 760px; }
.quote-form{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:30px; display:flex; flex-direction:column; gap:18px; }
.quote-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.quote-form label{ display:flex; flex-direction:column; gap:6px; font-size:0.88rem; font-weight:500; color: var(--ink); }
.quote-form input, .quote-form select, .quote-form textarea{
  font-family: var(--font-body); font-size:0.96rem; padding:11px 13px;
  border:1px solid var(--border); border-radius:4px; background:#fff; color: var(--charcoal);
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{ outline: 2px solid var(--steel); outline-offset:1px; }
.quote-form button{ align-self:flex-start; border:none; cursor:pointer; }
.quote-form fieldset{ border:none; padding:0; margin:0; display:flex; flex-direction:column; gap:18px; }
.quote-form legend{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; color: var(--brand); text-transform:uppercase; margin-bottom:6px; padding:0; }

/* ===== Tariff table ===== */
.tariff-wrap{ padding: 20px 0 90px; }
.tariff-table{ width:100%; border-collapse: collapse; background:#fff; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.tariff-table th{ text-align:left; font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--steel); background: var(--cream); padding: 12px 14px; }
.tariff-table td{ padding: 13px 14px; border-top: 1px solid var(--border); font-size:0.92rem; }
.tariff-table .rate{ font-family: var(--font-mono); font-weight:600; color: var(--ink); }
.tag{ display:inline-block; background: rgba(59,110,143,0.1); color: var(--steel); font-family: var(--font-mono); font-size:0.76rem; padding:3px 9px; border-radius:4px; }
.tariff-note{ margin-top:18px; font-size:0.88rem; color:#555; }
.tariff-note a{ color: var(--brand); font-weight:600; text-decoration:none; }

/* ==== NVOCC: vessels + head-wise tariff ==== */
.nvocc-section{ padding: 44px 0; border-top: 1px solid var(--border); }
.nvocc-section h2{ font-size:1.4rem; margin: 4px 0 6px; }
.route-summary{ font-family: var(--font-mono); font-size:0.85rem; color: var(--steel); margin-bottom:22px; }
.tariff-table-wrap{ overflow-x:auto; }
.tariff-table-wrap .tariff-table{ min-width:560px; }

.vessel-schedule-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; }
.vessel-group-title{ font-size:0.95rem; padding:8px 14px; border-radius:6px; display:inline-block; margin-bottom:12px; }
.vessel-group-title.feeder{ background: rgba(0,74,172,0.10); color: var(--brand); }
.vessel-group-title.mother{ background: rgba(0,0,0,0.06); color: var(--ink); }

.charge-section{ margin-bottom:34px; }
.charge-section:last-child{ margin-bottom:0; }
.charge-section-title{ font-size:1rem; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--brand); display:inline-block; }
.remarks-row td{ font-size:0.78rem; color:#777; font-style:italic; padding-top:0 !important; border-top:none !important; }

@media (max-width: 760px){ .vessel-schedule-grid{ grid-template-columns: 1fr; } }
/* ===== Responsive ===== */
@media (max-width: 880px){
  .main-nav{ display:none; }
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-seal{ display:none; }
  .strip-grid{ grid-template-columns: repeat(2,1fr); }
  .mission-grid, .about-grid, .about-story, .who-we-are-row{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .quote-form .form-row{ grid-template-columns: 1fr; }
  table.shipments-table{ font-size:0.82rem; }
}