/* ============================================================
   Setara Transport - shared styles for the transport site.
   Loaded after setara.css on every /t/ page.
   Components: heroes, doors, flows, credentials, moves, coverage,
   power-only split, forms, FAQ, and interior-page furniture.
   ============================================================ */

/* ---- nav active state (multi-page) ---- */
nav .links a.active{color:var(--graphite);font-weight:600}
nav .links a.active:after{content:"";display:block;height:2px;background:var(--brass);border-radius:2px;margin-top:5px}

/* ---- home hero (full image) ---- */
.t-hero{position:relative;min-height:86vh;display:flex;align-items:center;background:var(--iron)}
.t-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5}
.t-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,23,28,1) 0,rgba(20,23,28,.5) 88px,rgba(20,23,28,0) 300px),linear-gradient(100deg,rgba(20,23,28,.95) 0%,rgba(20,23,28,.8) 44%,rgba(20,23,28,.5) 100%)}
.t-hero .inner{position:relative;max-width:700px;padding:40px 0}
.t-hero .eyebrow{font-family:'Archivo Narrow',sans-serif;font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:12.5px;color:var(--brass);margin-bottom:18px}
.t-hero h1{font-family:'Spectral',serif;font-weight:600;font-size:clamp(34px,5vw,53px);line-height:1.07;color:#fff;margin-bottom:18px;text-wrap:balance}
.t-hero p{font-size:18px;line-height:1.6;color:#cfd2d8;max-width:584px;margin-bottom:30px}
.t-hero .cta-row{display:flex;gap:13px;flex-wrap:wrap}

/* ---- interior page hero (compact, no image) ---- */
.p-hero{position:relative;background:var(--iron);padding:66px 0 58px;overflow:hidden}
.p-hero:before{content:"";position:absolute;right:-120px;top:-120px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(31,201,184,.16),transparent 70%);pointer-events:none}
.p-hero .inner{position:relative;max-width:760px}
.p-hero .crumb{font-family:'Archivo',sans-serif;font-size:12.5px;color:#9aa0a8;margin-bottom:16px;letter-spacing:.02em}
.p-hero .crumb a{color:#c7cbd1}
.p-hero .crumb a:hover{color:var(--brass)}
.p-hero .eyebrow{font-family:'Archivo Narrow',sans-serif;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--brass);margin-bottom:14px}
.p-hero h1{font-family:'Spectral',serif;font-weight:600;font-size:clamp(30px,4.4vw,46px);line-height:1.08;color:#fff;margin-bottom:16px;text-wrap:balance}
.p-hero p{font-size:17.5px;line-height:1.6;color:#cfd2d8;max-width:640px}
.p-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.btn-outline-l{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-outline-l:hover{border-color:#fff;background:rgba(255,255,255,.09);color:#fff}

/* ---- trust strip ---- */
.t-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.t-trust span{font-family:'Archivo',sans-serif;font-size:13px;color:#aeb3bb;display:flex;align-items:center;gap:8px}
.t-trust span svg{width:16px;height:16px;stroke:var(--brass);fill:none;stroke-width:2}

/* ---- two doors ---- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.door{border:1px solid var(--line);border-radius:16px;background:#fff;padding:32px 30px;display:flex;flex-direction:column}
.door.dark{background:var(--iron);border-color:#2b2f35}
.door.dark .tag{color:var(--brass)}.door.dark h3{color:#fff}.door.dark p{color:#bfc3ca}.door.dark li{color:#dcdfe4}
.door .tag{font-family:'Archivo Narrow',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;color:var(--brass-deep);margin-bottom:10px}
.door h3{font-family:'Spectral',serif;font-weight:600;font-size:24px;color:var(--graphite);margin-bottom:10px}
.door p{font-size:15px;color:var(--text-dim);line-height:1.65;margin-bottom:18px}
.door ul{list-style:none;margin-bottom:24px}
.door li{position:relative;padding-left:26px;margin-bottom:11px;font-size:14.5px;color:var(--text);line-height:1.5}
.door li svg{position:absolute;left:0;top:3px;width:16px;height:16px;stroke:var(--brass);fill:none;stroke-width:2.5}
.door .btn{margin-top:auto;align-self:flex-start}
@media (max-width:780px){.doors{grid-template-columns:1fr}}

/* ---- how it works steps ---- */
.flows{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-top:42px}
.flow.solo{max-width:560px}
.flow h3{font-family:'Spectral',serif;font-weight:600;font-size:20px;color:var(--graphite);margin-bottom:22px}
.step{position:relative;padding-left:54px;padding-bottom:24px}
.step:not(:last-child):before{content:"";position:absolute;left:17px;top:34px;bottom:0;width:2px;background:var(--line)}
.step .n{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:var(--brass-deep)}
.step h4{font-family:'Archivo',sans-serif;font-weight:600;font-size:15.5px;color:var(--graphite);margin-bottom:3px}
.step p{font-size:14px;color:var(--text-dim);line-height:1.55}
@media (max-width:780px){.flows{grid-template-columns:1fr;gap:30px}}

/* ---- credentials strip ---- */
.creds-t{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.cred-t{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:22px 22px}
.cred-t .b{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.04em;font-size:13px;color:var(--graphite);text-transform:uppercase;margin-bottom:6px}
.cred-t .l{font-size:13.5px;color:var(--text-dim);line-height:1.55}
@media (max-width:820px){.creds-t{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.creds-t{grid-template-columns:1fr}}

/* ---- move types + coverage ---- */
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.move{border:1px solid var(--line);border-radius:12px;padding:22px 22px;background:#fff}
.move h4{font-family:'Spectral',serif;font-weight:600;font-size:18px;color:var(--graphite);margin-bottom:6px}
.move p{font-size:13.5px;color:var(--text-dim);line-height:1.55}
@media (max-width:820px){.moves{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.moves{grid-template-columns:1fr}}
.cov{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.cov .c{background:#fff;border:1px solid var(--line);border-radius:11px;padding:18px 20px}
.cov .c h5{font-family:'Spectral',serif;font-weight:600;font-size:16px;color:var(--graphite);margin-bottom:4px}
.cov .c span{font-size:13px;color:var(--text-dim)}
@media (max-width:760px){.cov{grid-template-columns:1fr}}

/* ---- power-only split ---- */
.provide{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:38px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.provide .half{padding:32px 30px}
.provide .you{background:#fff}
.provide .we{background:var(--iron)}
.provide .lab{font-family:'Archivo Narrow',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;margin-bottom:16px}
.provide .you .lab{color:var(--brass-deep)}.provide .we .lab{color:var(--brass)}
.provide ul{list-style:none}
.provide li{position:relative;padding-left:28px;margin-bottom:13px;font-size:15px;line-height:1.5}
.provide .you li{color:var(--text)}.provide .we li{color:#e3e6ea}
.provide li svg{position:absolute;left:0;top:2px;width:18px;height:18px;fill:none;stroke-width:2.2}
.provide .you li svg{stroke:var(--oxblood)}.provide .we li svg{stroke:var(--brass)}
@media (max-width:680px){.provide{grid-template-columns:1fr}}

/* ---- form card ---- */
.tform{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:0 10px 30px rgba(35,38,43,.05);max-width:640px}
.tform h3{font-family:'Spectral',serif;font-weight:600;font-size:22px;color:var(--graphite);margin-bottom:6px}
.tform .sub{font-size:14px;color:var(--text-dim);margin-bottom:22px}
.form-done{display:none;text-align:center;padding:26px 10px}
.form-done.show{display:block}
.form-done .check{width:58px;height:58px;border-radius:50%;background:rgba(62,122,87,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.form-done .check svg{width:28px;height:28px;stroke:var(--ok);fill:none;stroke-width:2.5}
.form-done h3{margin-bottom:6px}
.portal-note{display:flex;align-items:flex-start;gap:11px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:15px 17px;margin-top:18px;font-size:13.5px;color:var(--text-dim);line-height:1.55}
.portal-note svg{width:19px;height:19px;stroke:var(--brass-deep);fill:none;flex:none;margin-top:1px}

/* ---- FAQ ---- */
.faq{margin-top:34px;max-width:880px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;position:relative;font-family:'Spectral',serif;font-weight:600;font-size:17.5px;color:var(--graphite)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:15px;font-size:24px;font-weight:400;color:var(--brass-deep);transition:transform .2s}
.faq details[open] summary:after{content:"\2013"}
.faq .a{padding:0 36px 20px 0;font-size:15px;color:var(--text-dim);line-height:1.65}
.faq .a a{color:var(--brass-ink);font-weight:600}

/* ---- interior furniture ---- */
/* lead paragraph + two-column prose */
.t-lede{font-size:18px;line-height:1.7;color:var(--text);max-width:760px}
.t-lede + .t-lede{margin-top:18px}
/* feature rows: icon + heading + text */
.frows{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 36px;margin-top:38px}
.frow .ic{width:42px;height:42px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.frow .ic svg{width:21px;height:21px;stroke:var(--brass-deep);fill:none;stroke-width:1.9}
.frow h4{font-family:'Spectral',serif;font-weight:600;font-size:18px;color:var(--graphite);margin-bottom:7px}
.frow p{font-size:14.5px;color:var(--text-dim);line-height:1.6}
@media (max-width:820px){.frows{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:520px){.frows{grid-template-columns:1fr}}
/* split: content + aside card */
.t-split{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start;margin-top:14px}
.t-split .aside{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:28px 28px}
.t-split .aside h4{font-family:'Spectral',serif;font-weight:600;font-size:19px;color:var(--graphite);margin-bottom:14px}
.t-split .aside ul{list-style:none}
.t-split .aside li{position:relative;padding-left:26px;margin-bottom:12px;font-size:14.5px;color:var(--text);line-height:1.5}
.t-split .aside li svg{position:absolute;left:0;top:3px;width:16px;height:16px;stroke:var(--brass);fill:none;stroke-width:2.5}
@media (max-width:860px){.t-split{grid-template-columns:1fr;gap:30px}}
/* callout band */
.callout{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:12px;padding:24px 26px;margin-top:30px;max-width:820px}
.callout p{font-size:15.5px;color:var(--text);line-height:1.7;margin:0}
/* mini stat / fact list */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.fact{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 22px}
.fact .k{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}
.fact .v{font-family:'Spectral',serif;font-weight:600;font-size:19px;color:var(--graphite);line-height:1.3}
@media (max-width:760px){.facts{grid-template-columns:1fr}}
/* two contact paths */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.path{border:1px solid var(--line);border-radius:14px;padding:26px 26px;background:#fff;display:flex;flex-direction:column}
.path .tag{font-family:'Archivo Narrow',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;color:var(--brass-deep);margin-bottom:9px}
.path h3{font-family:'Spectral',serif;font-weight:600;font-size:21px;color:var(--graphite);margin-bottom:8px}
.path p{font-size:14.5px;color:var(--text-dim);line-height:1.6;margin-bottom:18px}
.path .btn{margin-top:auto;align-self:flex-start}
@media (max-width:680px){.paths{grid-template-columns:1fr}}

/* ---- contact (mirrors the logistics send-message layout) ---- */
.contact-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;margin-top:8px}
.info-block{margin-bottom:26px}
.info-block:last-child{margin-bottom:0}
.info-block .lab{font-family:'Archivo Narrow',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--brass-deep);margin-bottom:12px}
.info-block .row{display:flex;align-items:flex-start;gap:13px;margin-bottom:13px}
.info-block .row .ic{width:34px;height:34px;border-radius:8px;background:rgba(31,201,184,.07);display:flex;align-items:center;justify-content:center;flex:none}
.info-block .row .ic svg{width:17px;height:17px;stroke:var(--oxblood);fill:none;stroke-width:1.9}
.info-block .row .v{font-size:15px;color:var(--text)}
.info-block .row .v b{display:block;font-family:'Spectral',serif;color:var(--graphite);font-size:15px;font-weight:600;margin-bottom:1px}
.info-block .row .v b a{color:var(--graphite)}
.info-block .row .v span{color:var(--text-dim);font-size:14px;line-height:1.5}
.resp-note{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:14px 16px;margin-top:20px;font-size:13.5px;color:var(--text-dim)}
.resp-note svg{width:20px;height:20px;stroke:var(--brass-deep);fill:none;flex:none}
@media (max-width:880px){.contact-layout{grid-template-columns:1fr;gap:30px}}

/* ---- mobile polish ----
   These live here (not in the shared setara.css) so the fixes apply to the
   transport pages without altering the already-live logistics site. */
@media (max-width:980px){
  /* The hamburger is the SOLE mobile nav control, so give it a real 44x44 tap
     target. The 24px bars stay visually unchanged, just centered in the box. */
  .menu-btn{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-right:-10px}
  /* Open-menu links: full-width rows at least ~44px tall for thumbs. */
  nav .links.open a{display:block;padding:12px 0}
}
@media (max-width:560px){
  /* On phones the two long transport labels (Carrier portal + Get capacity) crowd
     the logo. Drop the secondary outline button; "Get capacity" stays as the CTA,
     and the carrier portal is reachable from the menu / For shippers. */
  .nav-cta .btn.btn-outline{display:none}
  /* Header CTAs: comfortable thumb height. */
  .nav-cta .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* Tighten the generous desktop whitespace so phones scroll less. */
  section{padding:54px 0}
  .t-hero{min-height:auto;padding:0}
  .t-hero .inner{padding:46px 0}
  .p-hero{padding:44px 0 40px}
}