/* ============================================================
PATAGONIA SHIPPING AND TRADING
Palette: deep Atlantic blue / glacier blue / stone grey /
snow white / muted steppe green / sand-copper accent
============================================================ */
:root{
--atlantic:#0a2540;
--atlantic-900:#061a2e;
--atlantic-700:#123a5c;
--glacier:#7fa8c9;
--glacier-light:#d6e4ef;
--stone:#6b7580;
--stone-light:#aeb6bd;
--snow:#f6f8f9;
--white:#ffffff;
--steppe:#6d7a63;
--sand:#c98a4b;
--sand-soft:#e3c39c;
/* Photo for the #company visual; replaces the placeholder gradient
declared as the fallback in .visual-img */
--img-steppe:url('../assets/img/steppe-patagonia.webp');
--brand-navy:#12244d;
/* Small copper text needs a darker tone to clear 4.5:1 on white */
--sand-ink:#8a5620;
--brand-silver:#a7abb0;
--ink:#0f1c28;
--ink-soft:#42505d;
--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--font-cond:'Barlow Condensed','Inter',sans-serif;
--maxw:1240px;
--pad:clamp(20px,5vw,48px);
--sec-y:clamp(72px,10vw,140px);
--ease:cubic-bezier(.22,.61,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--shadow-sm:0 2px 10px rgba(10,37,64,.06);
--shadow-md:0 10px 40px rgba(10,37,64,.10);
--shadow-lg:0 24px 70px rgba(10,37,64,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--white);
font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:600}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
/* ---------- Scroll progress ---------- */
.scroll-progress{
position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
background:linear-gradient(90deg,var(--glacier),var(--sand));
transition:width .1s linear;
}
/* ---------- Header ---------- */
.site-header{
position:fixed;inset:0 0 auto 0;z-index:100;
padding-block:14px;
background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid rgba(10,37,64,.08);
transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
border-bottom:1px solid transparent;
}
.site-header.is-stuck{
background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
padding-block:10px;border-bottom-color:rgba(10,37,64,.08);box-shadow:var(--shadow-sm);
}
.header-inner{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:clamp(24px,4vw,56px);
/* Full-bleed: the brand hugs the viewport edge rather than the content column */
max-width:none;
padding-inline:clamp(16px,2.2vw,32px);
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-icon{display:block;width:56px;height:56px;object-fit:contain;flex-shrink:0}
.brand-divider{display:block;width:1px;height:46px;background:#a7abb0;flex-shrink:0}
.brand-copy{display:flex;flex-direction:column;align-items:stretch;width:230px;gap:2px}
.brand-wordmark{display:block;width:100%;height:auto}
.brand-tag{display:flex;align-items:center;justify-content:center;gap:7px;color:#7b8288;font-size:9px;font-weight:600;letter-spacing:1.35px;line-height:1;white-space:nowrap}
.brand-tag::before,.brand-tag::after{content:'';height:1px;flex:1;background:currentColor}
.nav{display:flex;gap:clamp(18px,2.2vw,32px);justify-content:flex-start}
.nav-link{
position:relative;font-size:14px;font-weight:500;letter-spacing:.02em;
color:var(--ink-soft);padding-block:4px;transition:color .3s var(--ease);
}
.nav-link::after{
content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
background:var(--sand);transform:scaleX(0);transform-origin:right;
transition:transform .35s var(--ease-out);
}
.nav-link:hover::after,.nav-link.is-current::after{transform:scaleX(1);transform-origin:left}
.nav-link:hover,.nav-link.is-current{color:var(--atlantic)}
.header-actions{display:flex;align-items:center;gap:12px;justify-self:end}
.lang-switch{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;letter-spacing:.08em}
.lang-btn{background:none;border:0;padding:4px 2px;color:var(--stone);transition:color .25s var(--ease)}
.lang-btn.is-active{color:var(--atlantic)}
.lang-sep{color:var(--stone-light)}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:14px 26px;border:1px solid transparent;border-radius:2px;
font-size:14px;font-weight:600;letter-spacing:.03em;
transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
position:relative;overflow:hidden;
}
.btn-sm{padding:9px 16px;font-size:12.5px}
.btn-primary{background:var(--atlantic);color:#fff}
.btn-primary:hover{background:var(--atlantic-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn-ghost{border-color:rgba(10,37,64,.22);color:var(--atlantic);background:transparent}
.btn-ghost:hover{border-color:var(--atlantic);background:rgba(10,37,64,.04)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;margin-left:4px}
.burger span{display:block;width:22px;height:2px;background:var(--atlantic);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- HERO ---------- */
.hero{
position:relative;min-height:100svh;display:flex;align-items:center;
overflow:hidden;background:var(--atlantic-900);isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-img{
position:absolute;inset:-8% 0 -8% 0;
background-image:var(--hero-image,none);
background-size:cover;background-position:center 55%;
will-change:transform;
}
/* Fallback gradient scene (steppe + coast + sky) if no photo present */
.hero-img::before{
content:'';position:absolute;inset:0;
background:
radial-gradient(120% 80% at 78% 18%,rgba(227,195,156,.30) 0%,transparent 55%),
linear-gradient(180deg,#0d2b47 0%,#123a5c 34%,#2c5372 55%,#4c6b74 72%,#6d7a63 100%);
}
.hero-overlay{
position:absolute;inset:0;
background:
linear-gradient(100deg,rgba(6,26,46,.94) 0%,rgba(6,26,46,.78) 34%,rgba(6,26,46,.30) 66%,rgba(6,26,46,.55) 100%),
linear-gradient(180deg,rgba(6,26,46,.55) 0%,transparent 30%,rgba(6,26,46,.65) 100%);
}
.hero-routes{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.route{
fill:none;stroke:rgba(214,228,239,.5);stroke-width:1.4;stroke-dasharray:6 9;
stroke-linecap:round;animation:routeDash 22s linear infinite;
}
.route-2{stroke:rgba(201,138,75,.45);animation-duration:30s}
.route-3{stroke:rgba(214,228,239,.28);animation-duration:38s}
.route-node{fill:var(--sand);opacity:.85}
@keyframes routeDash{to{stroke-dashoffset:-300}}
.hero-inner{position:relative;z-index:2;padding-top:80px}
.hero-copy{max-width:640px}
.eyebrow{
font-family:var(--font-cond);font-size:13px;font-weight:600;
letter-spacing:.28em;text-transform:uppercase;color:var(--sand);margin-bottom:18px;
}
.hero-title{
font-size:clamp(36px,5.6vw,68px);font-weight:600;color:#fff;letter-spacing:-.03em;
margin-bottom:22px;text-wrap:balance;
}
.hero-title .line{display:block}
.hero-title .accent{
background:linear-gradient(92deg,var(--glacier) 0%,var(--sand-soft) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
font-size:clamp(16px,1.9vw,20px);color:rgba(246,248,249,.82);max-width:520px;margin-bottom:34px;font-weight:300;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-cta .btn-primary{background:var(--sand);color:#10202f}
.hero-cta .btn-primary:hover{background:var(--sand-soft)}
.hero-scroll{
position:absolute;left:var(--pad);bottom:32px;z-index:2;display:flex;align-items:center;gap:12px;
font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.hero-scroll-line{display:block;width:52px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero-scroll-line::after{
content:'';position:absolute;inset:0;width:40%;background:var(--sand);
animation:scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint{0%{transform:translateX(-100%)}60%,100%{transform:translateX(260%)}}
/* ---------- Capabilities ---------- */
.capabilities{background:var(--snow);padding-block:clamp(56px,7vw,88px);border-bottom:1px solid rgba(10,37,64,.06)}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(10,37,64,.09)}
.cap{
background:var(--snow);padding:34px 28px;position:relative;
transition:background .4s var(--ease),transform .4s var(--ease);
}
.cap:hover{background:#fff;transform:translateY(-4px);z-index:2;box-shadow:var(--shadow-md)}
.cap-num{
font-family:var(--font-cond);font-size:12px;letter-spacing:.2em;color:var(--stone-light);
display:block;margin-bottom:16px;
}
.cap-icon{width:34px;height:34px;stroke:var(--atlantic);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px;transition:stroke .35s var(--ease)}
.cap:hover .cap-icon{stroke:var(--sand)}
.cap h3{font-size:17px;margin-bottom:10px;color:var(--atlantic)}
.cap p{font-size:14px;color:var(--ink-soft);margin:0;line-height:1.6}
/* ---------- Generic section ---------- */
.section{padding-block:var(--sec-y);position:relative}
.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-title{font-size:clamp(28px,4.2vw,46px);color:var(--atlantic);margin-bottom:18px;font-weight:600}
.section-intro{font-size:clamp(15px,1.7vw,18px);color:var(--ink-soft);font-weight:300}
.lead{font-size:clamp(16px,1.8vw,19px);color:var(--ink);font-weight:400}
.disclaimer{font-size:13px;color:var(--stone);font-style:italic;margin-top:28px}
.link-arrow{
display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;
color:var(--atlantic);border-bottom:1px solid rgba(10,37,64,.25);padding-bottom:4px;
transition:gap .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.link-arrow::after{content:'→';transition:transform .3s var(--ease)}
.link-arrow:hover{gap:16px;color:var(--sand);border-color:var(--sand)}
/* ---------- Company ---------- */
.section-company{background:#fff}
.grid-2{display:grid;grid-template-columns:0.95fr 1fr;gap:clamp(36px,6vw,84px);align-items:center}
.visual-frame{position:relative;border-radius:2px;overflow:hidden;box-shadow:var(--shadow-lg)}
.visual-img{
aspect-ratio:4/5;background-size:cover;background-position:center;
background-image:var(--img-steppe,linear-gradient(180deg,#123a5c 0%,#4c6b74 45%,#6d7a63 75%,#8a8f78 100%));
transform:scale(1.06);transition:transform 1.2s var(--ease-out);
}
.visual-frame:hover .visual-img{transform:scale(1.12)}
.visual-frame::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 45%,rgba(6,26,46,.72) 100%);pointer-events:none;
}
.visual-badge{
position:absolute;left:24px;bottom:24px;z-index:2;display:flex;flex-direction:column;gap:2px;
}
.vb-label{font-family:var(--font-cond);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand-soft)}
.vb-value{font-size:17px;font-weight:600;color:#fff;letter-spacing:-.01em}
.values{
display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;margin:30px 0 34px;
}
.values li{
display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-soft);
padding-block:6px;border-bottom:1px solid rgba(10,37,64,.07);
}
.values li::before{
content:'';width:6px;height:6px;background:var(--sand);flex-shrink:0;
transform:rotate(45deg);
}
/* ---------- Logistics ---------- */
.section-logistics{background:var(--atlantic-900);color:var(--glacier-light);overflow:hidden}
.section-logistics .section-title{color:#fff}
.section-logistics .section-intro{color:rgba(214,228,239,.72)}
.section-logistics .disclaimer{color:rgba(214,228,239,.5)}
.parallax-band{
position:absolute;inset:0;z-index:0;opacity:.20;
background-image:var(--img-terminal,none);background-size:cover;background-position:center;
will-change:transform;
}
.parallax-band::before{
content:'';position:absolute;inset:0;
background:
radial-gradient(90% 60% at 20% 0%,rgba(127,168,201,.28),transparent 60%),
linear-gradient(180deg,#061a2e,#123a5c 60%,#061a2e);
}
.section-logistics .container{position:relative;z-index:1}
.serv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;background:rgba(127,168,201,.16)}
.serv{
background:var(--atlantic-900);padding:28px 26px;
transition:background .4s var(--ease),transform .4s var(--ease);
position:relative;
}
.serv::before{
content:'';position:absolute;left:0;top:0;width:2px;height:100%;background:var(--sand);
transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease-out);
}
.serv:hover{background:#0b2946;transform:translateY(-3px)}
.serv:hover::before{transform:scaleY(1);transform-origin:top}
.serv h3{font-size:16px;color:#fff;margin-bottom:9px;letter-spacing:-.01em}
.serv p{font-size:13.5px;color:rgba(214,228,239,.66);margin:0;line-height:1.6}
/* ---------- Commodities ---------- */
/* The seam below carries two full --sec-y paddings (this one plus
.showcase-inner's). With the surface change on .showcase doing the
separating, the second one is double-counting — trimmed to ~0.6x. */
.section-commodities{background:var(--snow);padding-bottom:clamp(44px,6vw,84px)}
.com-cats{display:grid;gap:0}
.com-cat{background:none;border:0;padding:0}
/* Category header: a full-width accordion toggle */
.com-cat-h{margin:0;font-size:inherit;font-weight:inherit}
.com-cat-head{
display:flex;align-items:center;gap:clamp(16px,2vw,28px);
width:100%;padding:clamp(22px,2.6vw,30px) 0;
background:none;border:0;border-top:1px solid rgba(10,37,64,.14);
font:inherit;text-align:left;cursor:pointer;
}
.com-cat:last-child .com-cat-head{border-bottom:1px solid rgba(10,37,64,.14)}
.com-cat.is-open:last-child .com-cat-head{border-bottom:0}
.com-cat-head:hover .com-cat-txt{transform:translateX(8px)}
.com-cat-txt{transition:transform .3s var(--ease)}
.com-cat-head:focus-visible{outline:0;box-shadow:inset 2px 0 0 var(--sand)}
.com-cat-txt{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
/* The category name is now the section's primary type — it reads as the thing you act on */
.com-cat-name{
font-size:clamp(20px,2.4vw,27px);font-weight:600;color:var(--atlantic);
letter-spacing:-.02em;line-height:1.15;
transition:color .28s var(--ease);
}
.com-cat-sub{
font-size:14px;color:var(--stone);line-height:1.4;
}
.com-cat-head:hover .com-cat-name{color:var(--sand-ink)}
.com-cat.is-open .com-cat-name{color:var(--sand-ink)}
.com-cat-count{
font-family:var(--font-cond);font-size:12px;letter-spacing:.14em;
color:var(--stone-light);font-variant-numeric:tabular-nums;flex-shrink:0;
}
/* +/- inside a bordered circle — a recognisable button target */
.com-cat-ico{
position:relative;flex-shrink:0;
width:clamp(36px,4vw,44px);aspect-ratio:1;border-radius:50%;
border:1px solid rgba(10,37,64,.18);
transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.com-cat-ico::before,.com-cat-ico::after{
content:'';position:absolute;top:50%;left:50%;
width:13px;height:1.5px;margin:-.75px 0 0 -6.5px;
background:var(--atlantic);
transition:transform .34s var(--ease),background-color .28s var(--ease);
}
.com-cat-ico::after{transform:rotate(90deg)}
.com-cat.is-open .com-cat-ico::after{transform:rotate(0deg)}
.com-cat-head:hover .com-cat-ico{
background:var(--sand);border-color:var(--sand);transform:scale(1.06);
}
.com-cat-head:hover .com-cat-ico::before,
.com-cat-head:hover .com-cat-ico::after{background:#fff}
.com-cat.is-open .com-cat-ico{background:var(--sand);border-color:var(--sand)}
.com-cat.is-open .com-cat-ico::before,
.com-cat.is-open .com-cat-ico::after{background:#fff}
/* Collapsible panel */
.com-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease-out)}
.com-panel>.com-items{overflow:hidden;min-height:0}
.com-cat.is-open .com-panel{grid-template-rows:1fr}
.com-panel[hidden]{display:none}
/* Product rows */
.com-items{list-style:none;margin:0;padding:0 0 18px}
.com-item:last-child{border-bottom:0}
.com-item{
display:grid;
grid-template-columns:2.5rem minmax(0,26rem) 1fr auto 1.5rem;
align-items:baseline;gap:16px;
width:100%;padding:15px 0;
background:none;border:0;border-bottom:1px solid rgba(10,37,64,.07);
font:inherit;text-align:left;cursor:pointer;
transition:background-color .28s var(--ease),padding .28s var(--ease);
}
.com-item:hover,.com-item:focus-visible{
background:rgba(255,255,255,.75);
padding-inline:14px;
outline:0;
}
.com-item:focus-visible{box-shadow:inset 2px 0 0 var(--sand)}
.ci-idx{
font-family:var(--font-cond);font-size:12px;letter-spacing:.1em;
color:var(--stone-light);font-variant-numeric:tabular-nums;
transition:color .28s var(--ease);
}
.com-item:hover .ci-idx{color:var(--sand)}
.ci-name{
font-size:clamp(15px,1.5vw,17px);font-weight:600;color:var(--atlantic);
letter-spacing:-.01em;min-width:0;
}
.ci-form{
grid-column:3;justify-self:start;
font-family:var(--font-cond);font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:var(--stone);white-space:nowrap;
}
.ci-arrow{
justify-self:end;color:transparent;
transition:transform .28s var(--ease),color .28s var(--ease);
}
.com-item:hover .ci-arrow,.com-item:focus-visible .ci-arrow{
color:var(--sand);transform:translateX(3px);
}
/* Capability strip */
.com-info{
margin-top:clamp(28px,3.5vw,44px);padding:0;
background:none;border:0;
}
.com-info h4{
font-family:var(--font-cond);font-size:12px;letter-spacing:.22em;
/* Copper at text size needs the darker tone to clear 4.5:1 (see --sand-ink);
--sand stays for rules, dots and fills where contrast is not a text concern. */
text-transform:uppercase;color:var(--sand-ink);font-weight:500;margin-bottom:14px;
}
.com-info-list{
list-style:none;margin:0;padding:0;
font-size:14px;color:var(--ink-soft);line-height:1.7;
}
/* Inline run: each item carries its own trailing separator, so a wrap
never leaves a '·' orphaned at the start or end of a line. */
.com-info-list li{display:inline}
.com-info-list li:not(:last-child)::after{
content:' · ';white-space:pre;color:var(--stone-light);
}
.com-info .disclaimer{margin-top:16px}
@media (max-width:600px){
.com-cat-head{padding:20px 0;gap:14px}
.com-cat-sub{display:none}
.com-cat-count{display:none}
/* inline run collapses into a clean stack — no orphan separators */
.com-info-list{display:block}
.com-info-list li{display:block;padding:7px 0;border-bottom:1px solid rgba(10,37,64,.07)}
.com-info-list li:last-child{border-bottom:0}
.com-info-list li:not(:last-child)::after{content:none}
.com-item{grid-template-columns:2.75rem minmax(0,1fr) auto;gap:12px;padding:14px 0}
.ci-form{grid-column:3;justify-self:end}
.ci-arrow{display:none}
.ci-form{font-size:11px}
}
/* ---------- Commercial reach (inside #showcase) ---------- */
.reach-label{
text-align:center;margin-top:52px;font-family:var(--font-cond);
font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--sand-ink);
}
.market-legend{
display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:18px;
}
.market-legend li{
display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft);
border:1px solid rgba(10,37,64,.12);padding:8px 14px;border-radius:2px;
transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
cursor:default;
}
.market-legend li:hover{border-color:var(--sand);color:var(--atlantic);background:rgba(201,138,75,.06)}
.market-legend li span:first-child{width:7px;height:7px;background:var(--glacier);transform:rotate(45deg);flex-shrink:0}
.market-legend li[data-region="pa"] span:first-child,
.market-legend li[data-region="ar"] span:first-child{background:var(--sand)}
.markets-note{
text-align:center;max-width:680px;margin:26px auto 0;font-size:14.5px;color:var(--stone);font-style:italic;
}
/* ---------- Contact ---------- */
/* White, where #seq above it is --snow: the surface change is what turns
the tail of the sticky track into a chapter break instead of one long
undifferentiated blank. The form shell inverts to --snow to keep its
contrast against the new ground. */
.section-contact{background:var(--white);border-top:1px solid rgba(10,37,64,.07)}
.section-contact .form-shell{background:var(--snow);box-shadow:var(--shadow-sm)}
.section-contact .field input[type=text],
.section-contact .field input[type=email],
.section-contact .field input[type=date],
.section-contact .field select,
.section-contact .field textarea{background:var(--white)}
/* The generic focus rule paints #fff, which is now the resting colour
here — the ring and border carry the state instead. */
.section-contact .field input:focus,
.section-contact .field select:focus,
.section-contact .field textarea:focus{background:var(--white)}
.form-tabs{display:flex;gap:0;margin-bottom:0;border-bottom:1px solid rgba(10,37,64,.12)}
.ftab{
background:none;border:0;padding:14px 24px;font-size:14.5px;font-weight:600;color:var(--stone);
position:relative;transition:color .3s var(--ease);
}
.ftab::after{
content:'';position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--atlantic);
transform:scaleX(0);transition:transform .35s var(--ease-out);
}
.ftab.is-active{color:var(--atlantic)}
.ftab.is-active::after{transform:scaleX(1)}
.form-shell{background:#fff;padding:clamp(24px,3.5vw,44px);box-shadow:var(--shadow-md)}
.cform{display:none;animation:fadeUp .5s var(--ease-out)}
.cform.is-active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 20px}
.field{display:flex;flex-direction:column;gap:7px}
.field-full{grid-column:1/-1}
.field>span{
font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);
}
.field input[type=text],.field input[type=email],.field input[type=date],
.field select,.field textarea{
font:inherit;font-size:15px;color:var(--ink);background:var(--snow);
border:1px solid rgba(10,37,64,.14);border-radius:2px;padding:12px 14px;width:100%;
transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
outline:0;border-color:var(--atlantic);background:#fff;box-shadow:0 0 0 3px rgba(10,37,64,.08);
}
.field textarea{resize:vertical;min-height:96px}
.field.has-error input,.field.has-error select{border-color:#b4453c;box-shadow:0 0 0 3px rgba(180,69,60,.1)}
.file-field input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file-ui{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.file-btn{
display:inline-flex;padding:11px 20px;border:1px dashed rgba(10,37,64,.28);border-radius:2px;
font-size:13.5px;font-weight:600;color:var(--atlantic);
transition:border-color .3s var(--ease),background .3s var(--ease);
}
.file-field:hover .file-btn{border-color:var(--sand);background:rgba(201,138,75,.06)}
.file-name{font-size:13px;color:var(--stone)}
.form-foot{
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
margin-top:28px;padding-top:22px;border-top:1px solid rgba(10,37,64,.08);
}
.form-note{font-size:12.5px;color:var(--stone);margin:0;max-width:420px}
/* Spam honeypot: off-screen for bots, never shown or focusable for people. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:14px;margin:16px 0 0;min-height:1.4em}
.form-status.sending{color:#5a6b7d}
.form-status.ok{color:#2c6e49}
.form-status.err{color:#b4453c}
.contact-details{
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;
margin-top:clamp(32px,4vw,48px);padding-top:clamp(28px,3.5vw,40px);border-top:1px solid rgba(10,37,64,.1);
}
.cd-item{display:flex;flex-direction:column;gap:4px}
.cd-label{font-family:var(--font-cond);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand)}
.cd-value{font-size:15px;color:var(--atlantic);font-weight:500;transition:color .3s var(--ease)}
a.cd-value:hover{color:var(--sand)}
.cd-ph{font-size:11px;color:var(--stone-light);letter-spacing:.04em}
/* ---------- Footer ---------- */
.site-footer{background:var(--atlantic-900);color:rgba(214,228,239,.7);padding-block:clamp(48px,6vw,72px) 32px}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr auto;gap:40px;align-items:start}
.foot-tag{font-size:14px;max-width:420px;line-height:1.65;font-weight:300;margin:0}
.foot-nav{display:flex;flex-direction:column;gap:9px}
.foot-nav a{font-size:14px;transition:color .3s var(--ease),padding-left .3s var(--ease)}
.foot-nav a:hover{color:#fff;padding-left:5px}
.foot-legal{text-align:right;font-size:13px}
.foot-legal p{margin:0 0 4px}
.foot-small{color:rgba(214,228,239,.45);font-size:12px}
.to-top{
position:fixed;right:24px;bottom:24px;z-index:90;
width:44px;height:44px;display:flex;align-items:center;justify-content:center;
background:var(--atlantic);color:#fff;border-radius:2px;font-size:18px;
opacity:0;pointer-events:none;transform:translateY(12px);
transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s var(--ease);
box-shadow:var(--shadow-md);
}
.to-top.is-visible{opacity:1;pointer-events:auto;transform:none}
/* On a narrow screen the button overlaps the form's last field, so a tap aimed
at the input lands on the button. Step aside while the form is in view. */
@media (max-width:620px){
.to-top.is-over-form{opacity:0;pointer-events:none}
}
.to-top:hover{background:var(--sand);color:#10202f}
/* ============================================================
SCROLL REVEAL
============================================================ */
.reveal,.reveal-left,.reveal-right{
opacity:0;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
will-change:opacity,transform;
}
.reveal{transform:translateY(34px)}
.reveal-left{transform:translateX(-42px)}
.reveal-right{transform:translateX(42px)}
.reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible{opacity:1;transform:none}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1080px){
.cap-grid{grid-template-columns:repeat(2,1fr)}
.grid-2{grid-template-columns:1fr}
.company-visual{max-width:480px}
.footer-inner{grid-template-columns:1fr 1fr}
.foot-legal{grid-column:1/-1;text-align:left;padding-top:20px;border-top:1px solid rgba(127,168,201,.16)}
}
@media (max-width:900px){
.burger{display:flex}
.nav{
position:fixed;inset:0 0 auto 0;top:0;padding:104px var(--pad) 32px;z-index:1;
flex-direction:column;gap:0;background:rgba(255,255,255,.98);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
box-shadow:var(--shadow-lg);
transform:translateY(-102%);transition:transform .45s var(--ease-out);
margin-left:0;
}
.nav.is-open{transform:none}
.nav-link{
color:var(--ink) !important;font-size:19px;padding:16px 0;
border-bottom:1px solid rgba(10,37,64,.08);
}
.nav-link::after{display:none}
.header-actions{margin-left:auto;position:relative;z-index:3}
.header-actions .btn{display:none}
.brand{position:relative;z-index:3}
.site-header.is-nav-open{background:rgba(255,255,255,.98);box-shadow:none}
.site-header.is-nav-open .burger span{background:var(--atlantic)}
.site-header.is-nav-open .lang-btn{color:var(--stone)}
.site-header.is-nav-open .lang-btn.is-active{color:var(--atlantic)}
.hero-overlay{background:linear-gradient(180deg,rgba(6,26,46,.86) 0%,rgba(6,26,46,.62) 50%,rgba(6,26,46,.88) 100%)}
}
@media (max-width:620px){
.cap-grid{grid-template-columns:1fr}
.values{grid-template-columns:1fr}
.form-tabs{flex-direction:column;border-bottom:0;gap:2px}
.ftab{border:1px solid rgba(10,37,64,.12);text-align:left}
.ftab.is-active{border-color:var(--atlantic);background:#fff}
.ftab::after{display:none}
.form-foot{flex-direction:column;align-items:stretch}
.form-foot .btn{width:100%}
.footer-inner{grid-template-columns:1fr}
.foot-lockup{width:100%;gap:10px}
.site-footer .brand-icon{width:60px;height:60px}
.site-footer .brand-divider{height:50px}
.site-footer .brand-copy{width:min(240px,65vw)}
.site-footer .brand-tag{font-size:7px;letter-spacing:.9px;gap:5px}
.foot-lockup-tag{font-size:13.5px}
.hero-scroll{display:none}
/* Finger-sized hit areas. The glyphs keep their size; only the padding
grows, so nothing about the design changes visually. */
.lang-btn{padding:12px 8px}
.burger{padding:12px 10px;margin-left:0}
.brand{gap:7px}
.brand-icon{width:44px;height:44px}
.brand-divider{height:38px}
.brand-copy{width:150px;gap:1px}
.brand-tag{gap:4px;font-size:6.3px;letter-spacing:.92px}
}
/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
.reveal,.reveal-left,.reveal-right{opacity:1;transform:none}
.hero-img,.parallax-band{transform:none !important}
}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
/* ---------- Footer brand lockup (closing signature) ---------- */
.foot-lockup-wrap{
display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;
padding-bottom:clamp(40px,5vw,60px);margin-bottom:clamp(40px,5vw,60px);
border-bottom:1px solid rgba(127,168,201,.16);
}
.foot-lockup{width:min(560px,90%);height:auto;display:flex;align-items:center;justify-content:center;gap:18px}
.site-footer .brand-icon,.site-footer .brand-wordmark{filter:none;mix-blend-mode:normal}
.site-footer .brand-divider{height:62px;background:rgba(214,228,239,.4)}
.site-footer .brand-copy{width:300px;gap:4px}
.site-footer .brand-tag{color:rgba(214,228,239,.75);font-size:11px;letter-spacing:1.7px;gap:10px}
.foot-lockup-tag{
font-size:14.5px;letter-spacing:.03em;color:rgba(214,228,239,.7);
max-width:560px;margin:0;font-weight:300;
}
/* Contact details: multi-line address */
.cd-value br{line-height:1.6}
/* ---------- Refinements ---------- */
/* File input labels must not inherit the uppercase field label style */
.file-field>span{margin-bottom:2px}
.file-btn,.file-name{text-transform:none;letter-spacing:normal}
/* Slightly larger capability icons for better presence */
.cap-icon{width:38px;height:38px}
/* ---------- Mobile nav open state: keep the brand visible ---------- */
@media (max-width:900px){
.site-header.is-nav-open{
background:#fff;
backdrop-filter:none;-webkit-backdrop-filter:none;
border-bottom-color:rgba(10,37,64,.08);
}
.site-header.is-nav-open .lang-sep{color:var(--stone-light)}
.site-header.is-nav-open .burger span{background:var(--brand-navy)}
}
/* ============================================================
CARGO JOURNEY — sticky scroll narrative (6 stages)
Photography slots: --img-origin, --img-inland, --img-port,
--img-loading, --img-ocean, --img-discharge
============================================================ */
/* ============================================================
CARGO ROUTE — ruta con curvas vista desde arriba, en 3D
============================================================ */
.cargoroute{
background:var(--atlantic-900);
color:#fff;position:relative;overflow:hidden;
/* algo mas compacta que el resto: asi la seccion entra completa */
padding-block:clamp(38px,4.6vw,72px);
}
.cargoroute-head{max-width:820px;margin-bottom:clamp(12px,1.6vw,22px)}
.cargoroute-head .section-title{color:#fff}
.cargoroute-head .section-intro{color:rgba(214,228,239,.72)}
/* Dos columnas reales: la ruta nunca puede pasar por detras del texto */
.cargoroute-body{
display:grid;
grid-template-columns:minmax(0,1fr) clamp(280px,24%,340px);
gap:clamp(16px,2vw,32px);
/* start (no center): si el panel cambia de alto, el mapa no se corre */
align-items:start;
}
/* ---- las tres escenas, lado a lado ---- */
.scenes{
position:relative;
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(10px,1.4vw,22px);
}
.scene{position:relative;perspective:760px;perspective-origin:50% 42%}
.sc-stage{
position:relative;width:100%;aspect-ratio:1/1.28;
border:1px solid rgba(127,168,201,.14);
border-radius:4px;
background:
radial-gradient(90% 55% at 50% 8%,rgba(127,168,201,.10),transparent 62%),
linear-gradient(180deg,rgba(11,36,62,.6),rgba(6,22,40,.25));
overflow:hidden;
transition:border-color .5s var(--ease),background .5s var(--ease),
box-shadow .5s var(--ease);
}
.scene.is-active .sc-stage{box-shadow:0 8px 26px rgba(3,14,26,.5)}
/* piso/terreno en las escenas de tierra */
.sc-road .sc-stage::after,
.sc-silo .sc-stage::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:34%;
background:linear-gradient(180deg,transparent,rgba(38,52,44,.32));
pointer-events:none;
}
.scene.is-active .sc-stage{
border-color:rgba(201,138,75,.42);
background:linear-gradient(180deg,rgba(14,44,74,.7),rgba(6,26,46,.3));
}
/* ============ ESCENA 1 · carretera vertical ============ */
.road-v{
position:absolute;left:50%;top:6%;bottom:6%;width:78px;
transform:translateX(-50%) rotateX(24deg);
transform-style:preserve-3d;
background:linear-gradient(90deg,#0a2846 0 6%,#20364d 6% 94%,#0a2846 94%);
border-radius:2px;
}
.rv-edge{
position:absolute;top:0;bottom:0;width:2px;
background:rgba(232,240,246,.4);
}
.rv-edge.l{left:9px}
.rv-edge.r{right:9px}
/* eje central discontinuo, QUIETO */
.rv-dash{
position:absolute;left:50%;top:0;bottom:0;width:2.4px;
transform:translateX(-50%);
background:repeating-linear-gradient(180deg,
rgba(226,236,245,.5) 0 14px,transparent 14px 30px);
}
/* ============ ESCENA 2 · mar y puerto ============ */
.sea{
position:absolute;inset:0;
background:
/* reflejo de luz sobre el agua */
radial-gradient(120% 46% at 50% 34%,rgba(150,200,235,.16),transparent 62%),
/* textura de oleaje: bandas suaves, no lineas rectas */
repeating-linear-gradient(178deg,
rgba(160,205,235,.055) 0 2px,transparent 2px 13px),
repeating-linear-gradient(183deg,
rgba(120,170,205,.04) 0 3px,transparent 3px 19px),
linear-gradient(180deg,#12406a 0%,#0d3055 34%,#08223a 68%,#05172a 100%);
}
.sea-wave{
position:absolute;left:-12%;right:-12%;height:10px;
background:radial-gradient(60% 100% at 50% 50%,rgba(178,216,242,.20),transparent 72%);
filter:blur(.4px);
}
.sea-wave.w1{top:36%}
.sea-wave.w2{top:55%;opacity:.7;transform:scaleX(1.1)}
.sea-wave.w3{top:73%;opacity:.5}
/* muelle arriba */
.port{position:absolute;left:0;right:0;top:0;height:30%}
.port-deck{
position:absolute;left:6%;right:6%;top:52%;height:13px;
background:
repeating-linear-gradient(90deg,rgba(18,28,38,.45) 0 1px,transparent 1px 11px),
linear-gradient(180deg,#69798a 0%,#4a5a6a 46%,#26323f 100%);
border-radius:2px;
box-shadow:0 3px 7px rgba(3,12,22,.6);
}
.port-pile{
position:absolute;top:calc(52% + 13px);width:6px;height:30px;
background:linear-gradient(90deg,#33424f,#1b2733 60%,#141d27);
border-radius:0 0 2px 2px;
}
.port-pile.p1{left:20%}
.port-pile.p2{right:20%}
/* grua portuaria */
.port-crane{
position:absolute;left:50%;top:5%;width:9px;height:47%;
transform:translateX(-50%);
background:linear-gradient(90deg,#7e8e9d,#54636f 55%,#39454f);
border-radius:1px;
}
/* pluma de la grua + cable colgante */
.port-crane i{
position:absolute;left:-26px;top:1px;width:56px;height:5px;
background:linear-gradient(180deg,#e6a862,#b3773a);
border-radius:2px;
box-shadow:0 2px 5px rgba(3,12,22,.55);
}
.port-crane i::after{
content:'';position:absolute;left:8px;top:5px;width:1.5px;height:26px;
background:rgba(200,215,228,.5);
}
/* ============ ESCENA 3 · silo y maiz ============ */
.silo-body{
position:absolute;inset:0;
/* degradado tipo cilindro: sombra, luz especular y sombra opuesta */
background:linear-gradient(90deg,
#2f3c47 0%,#4e5e6b 12%,#8b9ba8 34%,#a8b7c3 44%,
#7d8d9a 58%,#4a5964 82%,#333f4a 100%);
border-radius:3px;overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(190,208,222,.16),
0 4px 12px rgba(3,12,22,.5);
}
/* chapa acanalada + aros, dibujados SOBRE el maiz */
.silo-body::after{
content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
background:
/* corrugado vertical */
repeating-linear-gradient(90deg,
rgba(16,26,36,.20) 0 1px,rgba(255,255,255,.05) 1px 2px,transparent 2px 8px),
/* aros estructurales, con luz arriba y sombra abajo */
repeating-linear-gradient(180deg,
rgba(226,238,248,.14) 0 1px,rgba(14,24,34,.34) 1px 2.5px,transparent 2.5px 24px);
}
/* nivel de maiz dentro del silo */
.silo-fill{
position:absolute;left:0;right:0;bottom:0;height:0;z-index:1;
background:
radial-gradient(circle at 22% 18%,rgba(255,236,180,.5) 0 1px,transparent 2px),
radial-gradient(circle at 62% 44%,rgba(255,236,180,.4) 0 1px,transparent 2px),
radial-gradient(circle at 40% 72%,rgba(255,236,180,.35) 0 1px,transparent 2px),
linear-gradient(90deg,rgba(120,80,20,.35) 0 8%,transparent 24% 74%,rgba(120,80,20,.4) 92%),
linear-gradient(180deg,#f4cd6d,#d9a441 55%,#b8842c);
background-size:9px 9px,13px 13px,11px 11px,100% 100%,100% 100%;
transition:height 1.1s var(--ease-out);
}
.silo-roof{
position:absolute;left:50%;top:0;width:0;height:0;
transform:translate(-50%,-100%);
border-left:calc(var(--sw,60px) / 2) solid transparent;
border-right:calc(var(--sw,60px) / 2) solid transparent;
border-bottom:22px solid #64757f;
filter:drop-shadow(0 2px 3px rgba(3,12,22,.5));
}
.silo-roof::after{
content:'';position:absolute;left:-4px;top:-26px;width:8px;height:8px;
background:#41505c;border-radius:1px;
}
.silo-leg{
position:absolute;bottom:-14px;width:6px;height:16px;background:#3a4753;
}
.silo-leg.l{left:14%}
.silo-leg.r{right:14%}
/* cinta cargadora hacia el silo */
.loader{position:absolute;right:12%;bottom:24%;width:32%;height:30%}
.ld-belt{
position:absolute;left:0;right:0;bottom:22%;height:9px;
background:
repeating-linear-gradient(90deg,rgba(14,24,34,.4) 0 1px,transparent 1px 7px),
linear-gradient(180deg,#7c8c9c 0%,#4c5b69 55%,#2c3844 100%);
transform-origin:right center;transform:rotate(-26deg);
border-radius:3px;
box-shadow:0 2px 5px rgba(3,12,22,.55);
}
.ld-base{
position:absolute;right:0;bottom:0;width:26px;height:24%;
background:linear-gradient(180deg,#5a6a79,#33404c);border-radius:2px;
}
/* chorro de maiz */
.grain{position:absolute;left:34%;top:26%;width:12px;height:26%;opacity:0;z-index:3}
.grain.is-on{opacity:1}
.grain span{
position:absolute;left:50%;width:4px;height:5px;
border-radius:52% 48% 46% 54%;
background:linear-gradient(160deg,#ffe08a,#d9a441);
box-shadow:0 0 2px rgba(240,198,94,.5);
transform:translateX(-50%);
animation:grainFall 1.1s linear infinite;
}
.grain span:nth-child(1){animation-delay:0s}
.grain span:nth-child(2){animation-delay:.18s;left:38%}
.grain span:nth-child(3){animation-delay:.36s;left:62%}
.grain span:nth-child(4){animation-delay:.54s}
.grain span:nth-child(5){animation-delay:.72s;left:42%}
.grain span:nth-child(6){animation-delay:.9s;left:58%}
@keyframes grainFall{
from{top:0;opacity:0}
12%{opacity:1}
85%{opacity:1}
to{top:100%;opacity:0}
}
/* pila de maiz que crece al descargar */
.pile{
position:absolute;left:26%;bottom:14%;width:0;height:0;
border-left:0 solid transparent;border-right:0 solid transparent;
border-bottom:0 solid #dfb04c;
filter:drop-shadow(0 2px 4px rgba(3,12,22,.5));
transition:border-width .9s var(--ease-out);
}
/* ============ marcadores de etapa ============ */
.sc-stops{position:absolute;inset:0;pointer-events:none;z-index:6}
.sc-stop{
position:absolute;transform:translate(-50%,-50%);
display:grid;place-items:center;
width:30px;height:30px;padding:0;
background:transparent;border:0;cursor:pointer;pointer-events:auto;
}
.sc-stop::before{
content:'';width:13px;height:13px;border-radius:50%;
background:#0b2946;border:2px solid rgba(127,168,201,.6);
transition:transform .38s var(--ease-out),background .38s var(--ease),
border-color .38s var(--ease),box-shadow .38s var(--ease);
}
.sc-stop:hover::before{transform:scale(1.2);border-color:var(--glacier-light)}
.sc-stop.is-done::before{background:var(--glacier);border-color:var(--glacier)}
.sc-stop.is-active::before{
background:var(--sand);border-color:var(--sand-soft);transform:scale(1.45);
box-shadow:0 0 0 6px rgba(201,138,75,.2);
}
.sc-stop:focus-visible{outline:2px solid var(--sand-soft);outline-offset:3px;border-radius:50%}
.sc-label{
position:absolute;left:calc(50% + 18px);top:50%;
transform:translateY(-50%);white-space:nowrap;pointer-events:none;
font-size:11px;font-weight:500;letter-spacing:-.01em;color:#fff;
background:rgba(9,32,56,.96);border:1px solid rgba(127,168,201,.34);
padding:4px 8px;border-radius:3px;
transition:background .4s var(--ease),border-color .4s var(--ease);
}
.sc-stop.is-active .sc-label{
background:rgba(201,138,75,.97);border-color:var(--sand-soft);
}
.sc-stop.to-left .sc-label{left:auto;right:calc(50% + 18px)}
/* tercera opcion: centrada bajo el punto, para etiquetas largas */
.sc-stop.to-under .sc-label{
left:50%;right:auto;top:calc(50% + 20px);
transform:translate(-50%,0);
}
.sc-num{
font-family:var(--font-cond);font-size:9.5px;letter-spacing:.12em;
color:rgba(214,228,239,.62);margin-right:5px;
}
.sc-stop.is-active .sc-num{color:#fff}
@media (max-width:720px){
.scenes{grid-template-columns:1fr;gap:14px}
.sc-stage{aspect-ratio:1/.62}
.sc-label{font-size:10px;padding:3px 7px}
}
/* ============ vehiculos: SVG de perfil ============ */
.veh{display:block;overflow:visible}
.veh-shadow{fill:rgba(3,12,22,.34)}
/* contacto: mas oscura y chica, justo donde la rueda toca el piso */
.veh-contact{fill:rgba(2,8,16,.6)}
/* --- camion --- */
.sc-truck{
position:absolute;left:50%;top:0;
z-index:4;pointer-events:none;
width:clamp(68px,7vw,90px);
/* el SVG ya esta dibujado en vista trasera y vertical */
transform:translate(-50%,-50%);
}
.sc-truck .veh{width:100%;height:auto}
.tk-roof{stroke:rgba(120,142,164,.55);stroke-width:.9}
.tk-sideL,.tk-sideR{fill:#6b7f93;stroke:rgba(40,56,72,.5);stroke-width:.6}
.tk-cabroof{stroke:#8a5a28;stroke-width:.9}
.tk-defl{fill:#e0a45f;stroke:#8a5a28;stroke-width:.7}
.tk-ribs path{stroke:rgba(120,142,164,.42);stroke-width:1.1;fill:none;stroke-linecap:round}
.tk-band{fill:var(--sand);opacity:.95}
.tk-door{stroke:rgba(110,132,154,.7);stroke-width:.9}
.tk-doorline{stroke:rgba(80,100,122,.75);stroke-width:1.4}
.tk-handle{stroke:rgba(70,90,110,.85);stroke-width:1.6;stroke-linecap:round}
.tk-tail{fill:#e8654a;stroke:rgba(120,40,26,.6);stroke-width:.6}
.tk-bumper{stroke:rgba(20,30,40,.6);stroke-width:.6}
.tk-chassis{fill:#26313c}
.tk-mirrorp{fill:#57666f}
.tk-stackp{fill:#93a4b4}
.tk-band{fill:var(--sand);opacity:.92}
.tk-chassis{fill:#26313c}
.tk-cab{stroke:#9a6631;stroke-width:.9}
.tk-glass{opacity:.95}
.tk-bump{fill:#8c9aa8}
.tk-light{fill:#ffe6b8}
.tk-stackp{fill:#8e9dab}
.tk-wheels .tyre{
/* goma con un poco de luz arriba: sin esto se leen como huecos negros */
fill:#2b3742;stroke:rgba(96,116,136,.8);stroke-width:.8;
}
/* banda de rodadura: le da textura de goma, no un bloque liso */
.tk-wheels .tread{
stroke:rgba(150,172,192,.42);stroke-width:.85;
fill:none;stroke-linecap:round;
}
.tk-wheels .rim{fill:#8ea0b1}
/* --- barco --- */
.sc-ship{
position:absolute;left:50%;top:0;
z-index:4;pointer-events:none;
width:clamp(68px,7vw,90px);
/* el SVG ya esta dibujado en vista de popa y vertical */
transform:translate(-50%,-50%);
}
.sc-ship .veh{width:100%;height:auto}
.sh-deck{stroke:#16222f;stroke-width:.9}
.sh-sideL,.sh-sideR{stroke:rgba(12,20,28,.5);stroke-width:.6}
.sh-bowtip{fill:#2c4056}
.sh-stern{fill:#2a3d51;stroke:#16222f;stroke-width:.8}
.sh-lampR{fill:#e8654a}
.sh-lampG{fill:#5fd08a}
.sh-boot{fill:#a4402c}
.sh-house{stroke:#93a3b2;stroke-width:.8}
.sh-win path{stroke:#1d3550;stroke-width:2.4;fill:none;stroke-linecap:round}
.sh-mastp{fill:#a9b8c6}
.sh-cargo rect:nth-child(1){fill:#c0703f}
.sh-cargo rect:nth-child(2){fill:#2f6f7d}
.sh-cargo rect:nth-child(3){fill:#41686f}
.sh-cargo rect:nth-child(4){fill:#a8562f}
.sh-cargo rect:nth-child(5){fill:#3d6b76}
.sh-cargo rect:nth-child(6){fill:#b06537}
.sh-cargo rect:nth-child(7){fill:#356470}
.sh-cargo rect:nth-child(8){fill:#b5693a}
.sh-cargo rect{stroke:rgba(10,20,30,.5);stroke-width:.7}
.sh-foam{fill:rgba(206,232,248,.34)}
/* --- silo --- */
.silo-svg{
/* mas grande y centrado: es la unica escena sin ruta ni muelle,
asi que el silo tiene que ocupar el cuadro por si solo */
position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);
width:66%;height:auto;
filter:drop-shadow(0 10px 22px rgba(3,12,22,.55));
}
.si-body{stroke:rgba(196,214,228,.22);stroke-width:1}
.si-rings path{stroke:rgba(10,20,30,.5);stroke-width:2.6;fill:none}
.si-corr path{stroke:rgba(12,22,32,.26);stroke-width:1.2;fill:none}
.si-roof{stroke:rgba(200,216,230,.2);stroke-width:1}
.si-hatch{fill:#41505c}
.si-leg{fill:#3a4753}
.si-grain{transition:y 1.1s var(--ease-out),height 1.1s var(--ease-out)}
/* la elipse superior del maiz sube con el nivel: hace ver el hueco */
.si-grain-top{transition:cy 1.1s var(--ease-out),opacity .5s var(--ease)}
/* alero del techo y sombra en el piso: refuerzan el volumen */
.si-eave{fill:#3f4d59;opacity:.9}
.si-ground{fill:rgba(3,12,22,.34)}
.si-contact{fill:rgba(2,8,16,.6)}
.si-hatch-top{fill:#55646f}
.ld-arm{fill:#5b6b7a;stroke:rgba(20,32,44,.5);stroke-width:1}
.ld-hopper{fill:#4a5a68}
.ld-foot{fill:#3a4753}
/* chorro de maiz: cae desde la boca hacia el silo */
.grain{opacity:0;transition:opacity .35s var(--ease)}
.grain.is-on{opacity:1}
.grain circle{fill:#f0c65e;animation:grainDrop 1.05s linear infinite}
.grain circle:nth-child(2){animation-delay:.17s}
.grain circle:nth-child(3){animation-delay:.34s}
.grain circle:nth-child(4){animation-delay:.51s}
.grain circle:nth-child(5){animation-delay:.68s}
.grain circle:nth-child(6){animation-delay:.85s}
@keyframes grainDrop{
from{transform:translateY(0);opacity:0}
14%{opacity:1}
86%{opacity:1}
to{transform:translateY(42px);opacity:0}
}
/* ---- panel de informacion ---- */
.cargoroute-info{
position:relative;z-index:10;
padding:clamp(12px,1.4vw,18px) 0 clamp(12px,1.4vw,18px) clamp(18px,2vw,26px);
border-left:1px solid rgba(127,168,201,.22);
/* alto reservado: el texto de cada etapa mide distinto y, sin esto, el
grid se reajusta en cada avance y arrastra el mapa unos px */
min-height:405px;
}
/* el bloque de texto se ancla arriba para que no "salte" al cambiar */
.cargoroute-info h3{margin-bottom:12px}
.cargoroute-info h3{font-size:clamp(22px,2.6vw,34px)}
.cargoroute-info p{font-size:clamp(13.5px,1.3vw,15px)}
.ri-count{
font-family:var(--font-cond);font-size:12px;letter-spacing:.24em;
color:var(--sand);display:block;margin-bottom:14px;
}
.cargoroute-info h3{
font-size:clamp(26px,3.4vw,42px);color:#fff;margin-bottom:14px;
letter-spacing:-.025em;line-height:1.08;
}
.cargoroute-info p{
font-size:clamp(14.5px,1.5vw,16.5px);color:rgba(246,248,249,.82);
font-weight:300;margin:0;line-height:1.62;
}
.cargoroute-info.is-swapping h3,
.cargoroute-info.is-swapping p,
.cargoroute-info.is-swapping .ri-servs{opacity:0;transform:translateY(8px)}
.route-info h3,.route-info p,.cargoroute-info .ri-servs{
transition:opacity .32s var(--ease),transform .32s var(--ease-out);
}
.ri-servs{
display:flex;flex-wrap:wrap;gap:8px;
margin-top:22px;padding-top:20px;
border-top:1px solid rgba(127,168,201,.18);
}
.ri-servs li{
font-size:12.5px;line-height:1.3;color:rgba(214,228,239,.82);
background:rgba(11,41,70,.55);
border:1px solid rgba(127,168,201,.26);
padding:7px 13px;
}
@media (max-width:960px){
/* una sola columna: el mapa recupera todo el ancho */
.cargoroute-body{grid-template-columns:minmax(0,1fr)}
.cargoroute-map{margin-inline:calc(var(--pad) * -1)}
/* el panel deja de superponerse y vuelve a fluir bajo el mapa */
.cargoroute-info{
position:static;width:100%;transform:none;
border-left:0;padding:0;margin-top:clamp(8px,2vw,20px);
}
.cargoroute-map{margin-block:clamp(-40px,-3vw,-10px) 0}
.cargoroute-plane{transform:rotateX(48deg) rotateZ(-9deg) scale(.98)}
.cargoroute-truck{transform:translate(-50%,-50%) translateZ(16px) scaleY(1.49)}
.rt-label{font-size:11px;padding:5px 10px}
.cargoroute-info{min-height:250px}
}
@media (max-width:620px){
.cargoroute-plane{transform:rotateX(40deg) rotateZ(-6deg) scale(1.04)}
.cargoroute-truck{transform:translate(-50%,-50%) translateZ(16px) scaleY(1.31)}
/* en pantallas angostas 6 nombres no entran sobre la diagonal:
en el mapa queda solo el numero, y el nombre se lee en el panel */
.rt-label{font-size:11px;padding:4px 7px;min-width:26px;text-align:center}
.rt-name{display:none}
.rt-num{margin-right:0;font-size:11px;color:rgba(214,228,239,.9)}
.rt-station.is-active .rt-num{color:#fff}
}
@media (prefers-reduced-motion:reduce){
.cargoroute-truck,.cargoroute-truck svg,.rt-done{transition:none}
}
/* ============================================================
SHOWCASE — interactive cargo globe (js/globe.js)
============================================================ */
/* White, between #commodities and #seq which are both --snow: same reasoning
as .section-contact. Three sections shared one ground here, so the two
stacked paddings at each seam read as a hole where content is missing
rather than as deliberate air. The surface change is what separates them. */
.showcase{background:var(--white);overflow:hidden;position:relative}
/* Top side is trimmed: the ground change above already marks the break, so a
full --sec-y on top of it just reopens the hole. Bottom keeps full height. */
.showcase-inner{padding-block:clamp(52px,6.5vw,92px) var(--sec-y)}
/* Short centred hairline over the eyebrow: gives the eye something to land on
in the long run of air above the section, so the gap reads as a chapter
break rather than dead space. Decorative only — hidden from AT. */
.showcase-head::before{
content:'';display:block;width:56px;height:2px;margin:0 auto clamp(22px,2.4vw,32px);
background:var(--sand);opacity:.85;
}
.showcase-head{text-align:center;max-width:760px;margin-inline:auto}
.showcase-lead{
margin:14px auto 0;max-width:560px;color:var(--stone);font-size:15.5px;
}
.globe-wrap{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
gap:clamp(24px,4vw,56px);align-items:center;
margin-top:clamp(28px,5vw,56px);
}
/* ---- Globe stage ---- */
.globe-stage{
position:relative;width:100%;aspect-ratio:1;
max-width:min(70vh,620px);max-height:min(70vh,620px);
margin-inline:auto;
display:grid;place-items:center;
cursor:grab;touch-action:pan-y;
outline:none;
}
.globe-stage:focus-visible{box-shadow:0 0 0 3px rgba(127,168,201,.55)}
.globe-stage.is-dragging{cursor:grabbing}
.globe-stage canvas{
display:block;border-radius:50%;
box-shadow:0 30px 90px rgba(10,37,64,.28);
}
.globe-hint{
position:absolute;bottom:2%;left:50%;transform:translateX(-50%);
margin:0;font-family:var(--font-cond);font-size:11.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--stone);
pointer-events:none;opacity:.85;
}
/* ---- Panel ---- */
.globe-panel{min-width:0}
.glb-legend{margin-bottom:22px}
.glb-layer{
font-family:var(--font-cond);font-size:11px;letter-spacing:.2em;
/* Structural label, not decoration: --stone-light sits at 1.9:1 on snow. */
text-transform:uppercase;color:var(--stone);
margin:0 0 8px;
}
.glb-layer + .glb-row{margin-bottom:16px}
.glb-row{display:flex;flex-wrap:wrap;gap:8px}
.glb-chip{
--c:var(--glacier);
display:inline-flex;align-items:center;gap:7px;
font-family:var(--font-cond);font-size:12.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--stone);
/* Inverted to --snow now that .showcase is white, so the chips stay a
raised surface against their ground instead of white-on-white. Same
swap .section-contact makes with its form shell. */
background:var(--snow);border:1px solid rgba(10,37,64,.12);border-radius:2px;
padding:7px 12px;transition:color .25s var(--ease),border-color .25s var(--ease),
box-shadow .25s var(--ease);
}
.glb-chip::before{
content:'';width:8px;height:8px;border-radius:50%;background:var(--c);
opacity:.45;transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.glb-chip:hover{color:var(--atlantic);border-color:rgba(10,37,64,.28)}
.glb-chip.is-active{
color:var(--atlantic);border-color:var(--c);box-shadow:var(--shadow-sm);
}
.glb-chip.is-active::before{opacity:1;transform:scale(1.25)}
.glb-readout{border-top:1px solid rgba(10,37,64,.10);padding-top:20px}
.glb-flow{
--c:var(--stone);
display:inline-block;font-family:var(--font-cond);
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--c);margin:0 0 8px;
}
.glb-flow.is-domestic,.glb-flow.is-regional{color:var(--stone)}
.glb-flow::before{content:'';display:inline-block;width:14px;height:1px;
background:currentColor;vertical-align:middle;margin-right:8px;opacity:.7}
.glb-name{
font-family:var(--font-cond);font-size:clamp(26px,3.4vw,38px);
letter-spacing:.02em;text-transform:uppercase;margin:0 0 8px;
transition:color .3s var(--ease);
}
.glb-desc{color:var(--ink-soft);font-size:15px;margin:0 0 20px;min-height:3em}
.glb-mk-label{
font-family:var(--font-cond);font-size:11.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--stone);margin:0 0 10px;
}
.glb-markets{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14.5px}
.glb-markets li{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.glb-markets i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.showcase-caption{
text-align:center;max-width:560px;margin:clamp(32px,5vw,56px) auto 0;
font-size:14.5px;color:var(--stone);padding-inline:var(--pad);
}
.showcase .disclaimer{text-align:center;margin-top:12px}
/* ============================================================
CLOSING STATEMENT — oversized type reveal
============================================================ */
.closer{
background:var(--atlantic-900);color:#fff;
padding-block:clamp(88px,14vw,180px);position:relative;overflow:hidden;
}
.closer::before{
content:'';position:absolute;inset:0;
background:radial-gradient(80% 60% at 50% 0%,rgba(127,168,201,.16),transparent 62%);
}
.closer-inner{position:relative;z-index:1;text-align:center;max-width:1000px}
.closer-eyebrow{
font-family:var(--font-cond);font-size:12px;letter-spacing:.3em;text-transform:uppercase;
color:var(--sand);margin-bottom:26px;
}
.closer-line{
font-size:clamp(40px,9vw,116px);font-weight:600;letter-spacing:-.035em;line-height:1.02;
margin:0 0 28px;display:flex;flex-wrap:wrap;gap:0 .28em;justify-content:center;
}
.cl-word{
display:inline-block;opacity:0;transform:translateY(46px) rotate(2deg);
transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.closer-line.is-visible .cl-word{opacity:1;transform:none}
.closer-line.is-visible .cl-word:nth-child(1){transition-delay:0s}
.closer-line.is-visible .cl-word:nth-child(2){transition-delay:.1s}
.closer-line.is-visible .cl-word:nth-child(3){transition-delay:.2s}
.closer-line.is-visible .cl-word:nth-child(4){transition-delay:.3s}
.cl-word.accent{
background:linear-gradient(92deg,var(--glacier) 0%,var(--sand-soft) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.closer-sub{
font-size:clamp(15px,1.8vw,19px);color:rgba(246,248,249,.74);font-weight:300;
max-width:620px;margin:0 auto 34px;
}
.closer-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.closer .btn-primary{background:var(--sand);color:#10202f}
.closer .btn-primary:hover{background:var(--sand-soft)}
/* ---------- Responsive: journey / showcase / closer ---------- */
@media (max-width:900px){
.journey-ui{grid-template-columns:1fr;gap:22px;align-items:start}
.journey-steps{
flex-direction:row;overflow-x:auto;gap:0;
scrollbar-width:none;-ms-overflow-style:none;
}
.journey-steps::-webkit-scrollbar{display:none}
.jstep{
flex-direction:column;align-items:flex-start;gap:3px;padding:8px 16px 8px 0;
border-bottom:0;flex-shrink:0;
}
.jstep.is-active{padding-left:0}
.jstep-l{font-size:12px;white-space:nowrap}
.journey-copy{min-height:265px}
.jstage-scrim{background:linear-gradient(180deg,rgba(6,26,46,.72) 0%,rgba(6,26,46,.55) 40%,rgba(6,26,46,.94) 100%)}
.globe-wrap{grid-template-columns:1fr;gap:28px}
.globe-stage{max-width:min(88vw,460px);margin-inline:auto;max-height:none}
.glb-desc{min-height:0}
.glb-chip{font-size:11.5px;padding:6px 10px;letter-spacing:.12em}
}
@media (max-width:620px){
.closer-line{font-size:clamp(34px,13vw,60px)}
.globe-stage{max-width:86vw}
}
/* Reduced motion: no scroll-driven transforms */
@media (prefers-reduced-motion:reduce){
.journey-sticky{position:relative;height:auto;min-height:auto}
.jpanel{display:none}
.jstage-img{position:relative;opacity:1;transform:none;height:220px}
.jstage-img:not(.is-active){display:none}
.jcopy{position:relative;opacity:1;transform:none;pointer-events:auto}
.jcopy:not(.is-active){display:none}
.cl-word{opacity:1;transform:none}
.globe-stage canvas{transform:none !important}
.globe-hint{display:none}
}
/* ============================================================
GANTRY SCENE (#seq)
Interactive SVG. Scroll drives four acts (travel / open / hold /
park); the HOLD act parks the scene so the three markers can be
explored without the scroll pulling the artwork away.
Engine: js/gantry.js
============================================================ */
.seq{position:relative;background:var(--snow)}
/* Track length budgets the four acts. The HOLD act eats ~22% of this,
which is what makes the middle feel like a stop rather than a pause. */
.seq-track{height:280vh;position:relative}
.seq-stage{
position:sticky;top:0;height:100vh;overflow:hidden;
display:grid;align-items:center;
grid-template-columns:minmax(290px,32%) 1fr;
/* Row 2 is the ledger. It is auto-sized and empty until the container
lands, so the scene stays vertically centred for the whole travel. */
grid-template-rows:1fr auto;
gap:clamp(20px,3vw,52px);
padding-inline:var(--pad);
padding-bottom:clamp(24px,4vh,52px);
}
/* ---------- the artwork ---------- */
.gantry-wrap{
position:relative;grid-column:2;grid-row:1;justify-self:center;
/* Height budget: viewport minus the ledger row. The markers hang inside
the scene now, so they need no gutter of their own. */
width:100%;max-width:min(940px,calc((100vh - 250px) * 1.428));
}
.gantry{display:block;width:100%;height:auto}
/* Doors swing on their outer hinge. transform-box:fill-box makes the
percentage origin resolve against the door's own bbox, not the
whole SVG — without it the leaves rotate around the canvas centre. */
.door{
transform-box:fill-box;
transition:transform .1s linear;
will-change:transform;
}
.door-left{transform-origin:0% 50%}
.door-right{transform-origin:100% 50%}
/* A little perspective so the swing reads as depth, not a flat squash. */
.hoist-box{perspective:900px}
/* Interior is hidden behind the doors until they part. */
.box-interior{opacity:0;transition:opacity .45s var(--ease-out)}
.gantry.is-open .box-interior{opacity:1}
/* ---------- markers over the open container ---------- */
.gantry-markers{
position:absolute;left:0;right:0;top:33%;
display:flex;justify-content:center;gap:clamp(14px,3vw,42px);
pointer-events:none;
}
.gmark{
display:flex;align-items:center;gap:9px;
padding:0;border:0;background:none;cursor:pointer;
opacity:0;transform:translateY(8px) scale(.9);
transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
pointer-events:none;font-family:var(--font-cond);
}
.seq.doors-open .gmark{opacity:1;transform:none;pointer-events:auto}
.seq.doors-open .gmark:nth-child(1){transition-delay:.05s}
.seq.doors-open .gmark:nth-child(2){transition-delay:.13s}
.seq.doors-open .gmark:nth-child(3){transition-delay:.21s}
.gmark-dot{
position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:50%;
display:grid;place-items:center;
background:var(--sand);color:var(--white);
font-size:15px;font-weight:700;line-height:1;
box-shadow:0 3px 12px rgba(10,37,64,.34);
transition:background .25s var(--ease-out),transform .25s var(--ease-out);
}
/* Pulse ring: draws the eye to what is clickable. */
.gmark-dot::after{
content:"";position:absolute;inset:-6px;border-radius:50%;
border:2px solid var(--sand);opacity:0;
}
.seq.doors-open .gmark-dot::after{animation:gpulse 2.4s var(--ease-out) infinite}
.seq.doors-open .gmark:nth-child(2) .gmark-dot::after{animation-delay:.5s}
.seq.doors-open .gmark:nth-child(3) .gmark-dot::after{animation-delay:1s}
@keyframes gpulse{
0%{opacity:.75;transform:scale(.82)}
70%{opacity:0;transform:scale(1.5)}
100%{opacity:0;transform:scale(1.5)}
}
.gmark-label{
font-size:13px;letter-spacing:.14em;text-transform:uppercase;
color:var(--atlantic);white-space:nowrap;
padding-bottom:3px;border-bottom:1px solid transparent;
transition:border-color .25s var(--ease-out);
}
.gmark:hover .gmark-label,.gmark.is-active .gmark-label{border-bottom-color:var(--sand)}
.gmark:hover .gmark-dot,.gmark:focus-visible .gmark-dot{transform:scale(1.14)}
.gmark.is-active .gmark-dot{background:var(--atlantic)}
.gmark.is-active .gmark-dot::after{animation:none;opacity:0}
.gmark:focus-visible{outline:2px solid var(--atlantic);outline-offset:6px;border-radius:4px}
/* ---------- copy rail ---------- */
.seq-rail{grid-column:1;grid-row:1;position:relative;max-width:420px;align-self:center}
.seq-kicker{
font-family:var(--font-cond);font-size:13px;letter-spacing:.2em;
text-transform:uppercase;color:var(--sand-ink);margin:0 0 10px;
}
.seq-head{
font-family:var(--font-cond);font-weight:700;
font-size:clamp(30px,3.6vw,50px);line-height:1.02;
letter-spacing:-.01em;color:var(--atlantic);margin:0 0 12px;
}
.seq-lede{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0 0 26px}
/* Panels share one box so switching markers doesn't shift the layout.
Before the doors open there is nothing to show, so the box collapses
rather than holding 206px of blank rail — that reserved-but-empty
space was the other half of the mid-section void. */
.ginfo-set{position:relative;min-height:0;transition:min-height .5s var(--ease-out)}
/* Stays open through the park act too: the doors shut on the way down,
and collapsing the box there would snap the rail upward exactly as
the ledger is resolving in. */
/* Reserved only while the markers are live. .has-opened keeps the box
from collapsing the instant the doors shut mid-park (which would snap
the rail as the ledger resolves), but once the container has landed
the panels are unreachable, so the rail gives the height back instead
of holding 206px of blank column above the ledger. */
.seq.has-opened .ginfo-set{min-height:206px}
.seq.is-landed .ginfo-set{min-height:0}
.ginfo{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.ginfo.is-in{opacity:1;transform:none}
.ginfo-kick{
font-family:var(--font-cond);font-size:12px;letter-spacing:.2em;
text-transform:uppercase;color:var(--sand-ink);margin:0 0 6px;
}
.ginfo-fig{
font-family:var(--font-cond);font-weight:700;
font-size:clamp(48px,6vw,86px);line-height:.86;letter-spacing:-.02em;
color:var(--atlantic);margin:0 0 6px;font-variant-numeric:tabular-nums;
}
.ginfo-title{
font-family:var(--font-cond);font-weight:700;
font-size:clamp(18px,1.9vw,24px);line-height:1.15;color:var(--atlantic);
margin:0 0 10px;padding-top:12px;border-top:1px solid var(--glacier-light);
}
.ginfo-text{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0}
.ginfo-hint{
position:absolute;inset:0;
font-family:var(--font-cond);font-size:13px;letter-spacing:.14em;
text-transform:uppercase;color:var(--stone);margin:0;
opacity:0;transition:opacity .4s var(--ease-out);
}
.seq.doors-open .ginfo-hint{opacity:1}
.seq-anchor{
margin:26px 0 0;
font-family:var(--font-cond);font-size:13px;letter-spacing:.18em;
text-transform:uppercase;color:var(--sand-ink);
}
/* ---------- ledger: the scene's closing statement ----------
Spans the full stage width under both columns. Held at zero height
until .seq.is-landed so it can't push the artwork around mid-scroll;
the row only opens once the box is on the stack. */
.seq-ledger{
grid-column:1 / -1;grid-row:2;
display:grid;grid-template-rows:0fr;
opacity:0;
transition:grid-template-rows .7s var(--ease-out),opacity .5s var(--ease-out);
}
.seq.is-landed .seq-ledger{grid-template-rows:1fr;opacity:1}
/* The inner wrapper is what actually collapses; overflow:hidden is
required for the 0fr -> 1fr row transition to clip its content. */
.seq-ledger > *{min-height:0}
.sl-kicker{
overflow:hidden;
margin:0 0 14px;padding-top:clamp(18px,2.4vh,26px);
border-top:1px solid var(--glacier-light);
font-family:var(--font-cond);font-size:12px;letter-spacing:.24em;
text-transform:uppercase;color:var(--sand-ink);
}
.sl-figs{
overflow:hidden;
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(16px,3vw,48px);
}
.sl-fig{display:flex;align-items:baseline;gap:12px;min-width:0}
.sl-num{
font-family:var(--font-cond);font-weight:700;
font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-.02em;
color:var(--atlantic);font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.sl-lab{
font-family:var(--font-cond);font-size:13px;letter-spacing:.1em;
text-transform:uppercase;line-height:1.25;color:var(--stone);
}
/* Figures resolve left-to-right so the row reads as a sentence. */
.sl-fig{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.seq.is-landed .sl-fig{opacity:1;transform:none}
.seq.is-landed .sl-fig:nth-child(1){transition-delay:.12s}
.seq.is-landed .sl-fig:nth-child(2){transition-delay:.22s}
.seq.is-landed .sl-fig:nth-child(3){transition-delay:.32s}
/* ---------- narrow screens ----------
No room for two columns: artwork on top, copy underneath. */
@media (max-width:900px){
.seq-track{height:300vh}
.seq-stage{
grid-template-columns:1fr;grid-template-rows:auto auto auto;
/* Anchor under the header with the artwork whole: centring the overflow
clipped the diagram's top and made the copy the protagonist. */
align-content:start;
gap:10px;padding-block:calc(76px + 2svh) 4svh;
}
.gantry-wrap{grid-column:1;grid-row:1;max-width:none}
.seq-rail{
grid-column:1;grid-row:2;max-width:none;
/* The copy waits for the animation: it fades in once the box has opened,
so the pinned phase belongs to the diagram. */
opacity:0;transform:translateY(10px);
transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.seq.has-opened .seq-rail{opacity:1;transform:none}
.seq-ledger{grid-column:1;grid-row:3}
.seq-head{font-size:clamp(19px,5.2vw,24px);margin-bottom:6px}
.seq-lede{margin-bottom:10px;font-size:13px;line-height:1.45}
.ginfo-set{min-height:132px}
.ginfo-fig{font-size:clamp(30px,9vw,42px)}
.ginfo-title{font-size:clamp(14px,4vw,17px)}
.ginfo-text{font-size:12.5px;line-height:1.4}
.gantry-markers{gap:10px;top:34%}
.gmark{flex-direction:column;gap:5px}
.gmark-label{font-size:11px;letter-spacing:.1em}
.gmark-dot{width:26px;height:26px;font-size:13px}
.seq-anchor{margin-top:18px}
/* One column has no room for three figures side by side; the ledger
folds to a single stacked line so it stays readable. */
.sl-figs{grid-template-columns:1fr;gap:10px}
.sl-fig{gap:10px}
.sl-num{font-size:clamp(24px,7vw,32px)}
.sl-lab{font-size:11.5px;letter-spacing:.08em}
.sl-kicker{margin-bottom:10px;padding-top:14px}
}
/* ---------- reduced motion ----------
No scroll choreography: the scene is served already open with the
markers live, so every fact stays reachable by click alone. */
@media (prefers-reduced-motion:reduce){
.seq-track{height:auto}
.seq-stage{position:relative;height:auto;padding-block:var(--sec-y)}
.door,.ginfo,.gmark,.box-interior{transition:none}
.seq.doors-open .gmark-dot::after{animation:none}
/* The box never lands here (the scene is served mid-timeline), so the
ledger is shown outright rather than gated on .is-landed. */
.seq-ledger{grid-template-rows:1fr;opacity:1;transition:none}
.sl-fig{opacity:1;transform:none;transition:none}
.gantry-wrap{max-width:940px}
/* Here the scene is served open AND flagged landed, so the collapse
rule above would win and clip the panels that are still clickable. */
.seq.is-landed .ginfo-set{min-height:206px}
}
/* ============================================================
HERO — scroll-driven cargo journey (#home)
Five acts: terminal -> road -> quay -> ocean -> air.
Engine: js/sequence.js (data-seq-* on the section).
============================================================ */
.hero{
min-height:0;display:block;align-items:initial; /* track owns the height now */
background:var(--atlantic-900);
/* overflow:hidden on an ancestor disables position:sticky in the subtree,
so the original .hero rule must be cleared here. */
overflow:visible;isolation:auto;
}
.hero-track{height:1100vh} /* matches United Carriers' pacing */ /* scroll budget for 5 acts */
.hero-stage{
position:sticky;top:0;height:100svh;overflow:hidden;
display:block;
}
/* Layered-photo rig — each piece is one ![]()
, transformed by js/heroparts.js.
The realism comes from the photographs, the motion from transforms. */
/* Left-side scrim: guarantees copy contrast over any act */
.hero-scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(90deg,rgba(6,26,46,.90) 0%,rgba(6,26,46,.66) 32%,rgba(6,26,46,.10) 58%,rgba(6,26,46,0) 74%),
linear-gradient(180deg,rgba(6,26,46,.60) 0%,rgba(6,26,46,0) 24%,rgba(6,26,46,0) 60%,rgba(6,26,46,.58) 100%);
}
.hero-inner{
position:absolute;inset:0;z-index:3;
display:flex;align-items:center;padding-top:80px;
}
/* --- act captions share one slot; only one is visible at a time --- */
.hero-acts{position:relative;min-height:112px;margin:8px 0 30px}
.hero-acts .hero-sub{
position:absolute;top:0;left:0;right:0;margin:0;
opacity:0; /* js/sequence.js drives opacity + transform */
transition:opacity .35s linear,transform .35s var(--ease-out);
}
/* --- journey rail --- */
.hero-rail{
position:absolute;z-index:3;right:var(--pad);top:50%;transform:translateY(-50%);
list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;
text-align:right;
}
.hero-rail li{
position:relative;padding-right:26px;
font-family:var(--font-cond);font-size:13px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;color:var(--glacier);
opacity:.28;transition:opacity .35s linear,color .35s linear;
}
.hero-rail li::after{
content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
width:8px;height:8px;border-radius:50%;background:currentColor;
}
.hero-rail li.is-on{opacity:1;color:var(--sand)}
.hero-scroll{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:28px}
@media (max-width:900px){
.hero-track{height:900vh}
.hero-inner{align-items:flex-end;padding-bottom:22vh}
.hero-scrim{
background:
linear-gradient(180deg,rgba(6,26,46,.86) 0%,rgba(6,26,46,.25) 30%,
rgba(6,26,46,.72) 62%,rgba(6,26,46,.96) 100%);
}
/* On narrow screens the rail collided with the logo. The caption
already names the leg, so drop the rail rather than fight for space. */
.hero-rail{display:none}
.hero-acts{min-height:132px}
.hero-scroll{display:none}
}
/* Reduced motion: one static frame, all copy stacked, no scroll hijack */
@media (prefers-reduced-motion:reduce){
.hero-track{height:auto}
.hero-stage{position:relative;height:auto;min-height:100svh}
.hero-inner{position:relative;inset:auto;min-height:100svh}
.hero-acts{min-height:0}
.hero-acts .hero-sub{position:relative;opacity:1 !important;transform:none !important;margin-bottom:10px}
.hero-rail{display:none}
}
/* ============================================================
CINEMATIC OPENING (#home.cine)
One tall section whose sticky stage carries the whole scene.
The site proper begins only after the aircraft clears frame.
============================================================ */
.cine{position:relative;background:#fff;overflow:visible;isolation:auto}
/* Scroll budget for four phases. */
.cine-track{height:1400vh;position:relative}
.cine-stage{
position:sticky;top:0;height:100svh;
overflow:hidden;
background:#fff;
will-change:background-color;
}
/* The journey sequence is drawn straight to this canvas. */
.cine-seq{
position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;
}
.cine-part{
position:absolute;left:0;top:0;height:auto;
transform-origin:50% 50%;
will-change:transform,opacity;
pointer-events:none;
}
/* Articulated reach stacker: transform-origin puts each part's pivot where
the real machine's joint is, so rotation looks mechanical. */
.cp-rs-body{width:30vw}
.cp-rs-boom{width:30vw;transform-origin:6% 62%}
.cp-rs-grab{width:7vw}
.cp-yard {width:26vw}
.cp-box {width:17vw}
.cp-truck-s{width:46vw}
.cp-truck-t{width:12vw}
.cp-ship {width:30vw;border-radius:2px}
.cp-plane {width:40vw}
/* Full-bleed asphalt with streaming lane markings. */
.cine-road{
position:absolute;inset:0;opacity:0;
background-color:#101012;
background-image:
repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 64px,rgba(255,255,255,0) 64px 200px),
repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 64px,rgba(255,255,255,0) 64px 200px),
repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 44px,rgba(255,255,255,0) 44px 220px);
background-size:7px 264px, 7px 264px, 5px 264px;
background-repeat:repeat-y;
background-position:30% 0, 70% 0, 50% 0;
}
/* Cloud veil that opens onto the air phase. */
.cine-sky{
position:absolute;inset:0;opacity:0;pointer-events:none;
background:
radial-gradient(60% 42% at 22% 30%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 70%),
radial-gradient(52% 40% at 74% 22%,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 72%),
radial-gradient(66% 46% at 54% 76%,rgba(255,255,255,.90) 0%,rgba(255,255,255,0) 74%),
radial-gradient(48% 34% at 88% 66%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 70%);
}
/* --- phase captions --- */
.cine-caps{
/* Pinned over the stage rather than sitting in flow. A zero-height sticky
layer gave the absolutely-positioned copy blocks nothing to anchor to,
but a full-height one in normal flow would add another viewport to the
track and push the outro down — so it is taken out of flow entirely. */
position:fixed;inset:0;z-index:4;
pointer-events:none;
}
/* Only paint the copy while the cinematic section owns the viewport. */
.cine-caps{opacity:0;transition:opacity .2s linear}
.has-cine-active .cine-caps{opacity:1}
.cine-cap{
/* Reference layout: the copy sits directly on the footage — no panel, no
rule. Type carries its own contrast via shadow (see .cine-h) so nothing
is drawn over the picture. */
position:absolute;top:15svh;left:0;
padding:0;
background:none;
border:0;
width:min(560px,calc(100vw - 2*var(--pad)));
margin:0 0 0 max(var(--pad),calc((100vw - var(--maxw))/2));
opacity:0;
}
.cine-num{
display:block;
font-family:var(--font-sans);
font-size:12px;font-weight:500;letter-spacing:.34em;
/* At .72 the number washed out over the bright sea and sky frames; full
white plus the wider halo holds it on every background the film passes
through, while the small size keeps it subordinate to the headline. */
color:#fff;
text-shadow:0 1px 10px rgba(8,16,28,.95),0 0 26px rgba(8,16,28,.8);
margin-bottom:14px;
}
.cine-h{
margin:0 0 18px;
/* Archivo Black: the heavy geometric grotesque from the reference. It has a
single weight, so no font-weight is declared. */
font-family:'Archivo Black','Inter',sans-serif;
font-size:clamp(30px,4.6vw,62px);
line-height:.98;letter-spacing:-.005em;
text-transform:uppercase;
color:#fff;
/* Two layers: a tight shadow for edge definition against light frames, a
wide halo to hold the letterforms over bright sky and white studio. */
text-shadow:0 2px 14px rgba(8,16,28,.92),0 0 44px rgba(8,16,28,.68);
}
.cine-p{
margin:0;
max-width:34ch;
font-size:clamp(15px,1.35vw,18px);
line-height:1.5;
font-weight:400;
color:rgba(255,255,255,.94);
text-shadow:0 1px 12px rgba(8,16,28,.96),0 0 30px rgba(8,16,28,.8);
}
@media (max-width:900px){
/* At 16:9 full-width the picture covered only 26% of the screen and the
motion was too small to read — it looked frozen even though the frames
were advancing. A near-square canvas fills most of the screen instead;
the player crops the frame's sides to fill it, and the subject (measured
at 0.38-0.56 of the frame width in every stage) stays in shot. */
.cine-stage{
background:#0b1420;
display:flex;align-items:flex-start;justify-content:center;
}
.cine-seq{
/* Full-bleed: the player paints an ambient backdrop (the frame itself,
cover-scaled and darkened) behind the sharp window, so every pixel of
the stage belongs to the film and no flat colour shows. */
position:absolute;inset:0;
width:100%;height:100%;
}
/* Copy sits over the lower part of the picture, small, on its own scrim. */
.cine-cap{
top:auto;bottom:0;left:0;
width:100%;margin:0;
padding:14vh var(--pad) 5svh;
background:linear-gradient(to top,
rgba(7,14,24,.94) 0%, rgba(7,14,24,.82) 46%,
rgba(7,14,24,.42) 74%, rgba(7,14,24,0) 100%);
}
.cine-num{font-size:10px;letter-spacing:.28em;margin-bottom:8px}
.cine-h{font-size:clamp(22px,6.4vw,30px);margin-bottom:10px}
.cine-p{font-size:13.5px;line-height:1.45;max-width:34ch}
.cine-track{height:820vh}
}
@media (max-width:620px){
.cine-track{height:700vh}
.cine-cap{bottom:7svh}
.cine-h{font-size:clamp(26px,8.4vw,40px)}
.cine-p{font-size:15px;line-height:1.45;max-width:26ch}
}
/* --- the headline, on its own ground below the journey --- */
.hero-statement{
background:var(--atlantic);
padding:clamp(64px,9vw,120px) 0;
text-align:center;
}
.hero-statement .eyebrow{margin-bottom:14px}
.cine-title{
margin:0 0 26px;
font-family:var(--font-cond);
font-size:clamp(34px,6vw,74px);
line-height:1.02;letter-spacing:.01em;
text-transform:uppercase;color:#fff;
}
.cine-title .line{display:block}
.cine-title .accent{color:var(--stone)}
.hero-statement .hero-cta{justify-content:center}
.hero-statement .btn-outline{
border-color:rgba(255,255,255,.55);color:#fff;
}
.hero-statement .btn-outline:hover{background:#fff;color:var(--atlantic)}
/* ============================================================
HERO SHOWCASE — sticky headline + scroll-driven media panel
Media slots (photo or video poster):
--hs-forwarding --hs-ocean --hs-trading --hs-integrated
Video: drop a