/* ============================================================
   DigiCampo — page layout. Composes brand.css.
   Photographs are structural here: they carry the hero, bleed off
   the page edge beside the text, sit under the fleet table, and
   back the printed guia. There is no gallery.
   ============================================================ */

html{scroll-behavior:smooth;}
body{overflow-x:hidden;}

:root{--gutter:36px;--edge:calc((100vw - min(100vw,1140px)) / 2 + var(--gutter));}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--gutter);}
.sec{padding:96px 0;}
[id]{scroll-margin-top:76px;}
.sec + .sec{border-top:1px solid hsl(var(--border));}
.head{display:flex;flex-direction:column;gap:16px;max-width:660px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

/* ---------- sticky chrome ---------- */
.nav{position:sticky;top:0;z-index:60;background:hsl(var(--header));
  color:hsl(var(--header-foreground));}
.nav .in{max-width:1140px;margin:0 auto;padding:0 36px;height:56px;
  display:flex;align-items:center;gap:28px;}
.nav .brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:700;font-size:16px;letter-spacing:-.02em;color:hsl(var(--header-foreground));}
.nav .brand .pin{width:9px;height:9px;border-radius:50%;background:hsl(142 58% 52%);flex:none;}
.nav menu{margin:0 0 0 auto;padding:0;list-style:none;display:flex;gap:26px;align-items:center;}
.nav a.lnk{font-size:13px;font-weight:500;color:hsl(150 12% 76%);}
.nav a.lnk:hover{color:hsl(var(--header-foreground));}
.nav .btn{padding:9px 17px;font-size:13px;}

/* ---------- HERO : the photograph is the hero ---------- */
.hero{position:relative;isolation:isolate;background:hsl(var(--header));
  min-height:min(88vh,780px);display:flex;align-items:flex-end;overflow:hidden;}
.hero > .shot{position:absolute;inset:0;z-index:0;}
/* parallax needs headroom, or translating the photo exposes the ground behind it */
html.motion-ready .hero > .shot{inset:-12% 0;}
.hero > .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:saturate(.72) contrast(1.06) brightness(.94);}
.hero > .veil{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to right, hsl(152 46% 10% / .90) 0%, hsl(152 46% 11% / .70) 46%, hsl(152 42% 14% / .26) 100%),
    linear-gradient(to top, hsl(152 50% 8% / .72) 0%, hsl(152 45% 14% / 0) 62%);}
.hero .in{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:120px 36px 52px;width:100%;}

.hero .mark{display:flex;align-items:center;gap:20px;}
.hero .locator{width:clamp(30px,4.4vw,58px);flex:none;color:hsl(142 58% 52%);}
.hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(52px,10.5vw,140px);color:hsl(var(--header-foreground));text-transform:uppercase;}
.hero .bead{width:clamp(14px,1.9vw,26px);height:clamp(14px,1.9vw,26px);border-radius:50%;
  background:hsl(142 58% 52%);flex:none;align-self:flex-end;margin-bottom:.14em;}
.hero .lede{margin-top:30px;font-size:clamp(19px,2.3vw,31px);font-weight:300;line-height:1.34;
  color:hsl(150 18% 90%);max-width:26ch;letter-spacing:-.015em;
  text-shadow:0 1px 24px hsl(152 50% 8% / .55);}
.hero .lede b{font-weight:600;color:hsl(var(--header-foreground));}
.hero .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:46px;max-width:820px;}
.hero .strip .stat{background:hsl(152 42% 12% / .74);border-color:hsl(152 24% 27% / .9);
  backdrop-filter:blur(10px) saturate(1.2);}
.hero .sig{margin-top:38px;font-size:12.5px;color:hsl(150 12% 70%);display:flex;
  align-items:center;gap:9px;flex-wrap:wrap;}
.hero .sig b{color:hsl(var(--header-foreground));font-weight:600;}

/* ---------- photo bleeding off the right edge, paired with text ---------- */
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:56px;align-items:center;}
.pair.flip{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);}
.bleed-r{position:relative;margin-right:calc(-1 * var(--edge));
  border-radius:var(--radius) 0 0 var(--radius);overflow:hidden;}
.bleed-l{position:relative;margin-left:calc(-1 * var(--edge));
  border-radius:0 var(--radius) var(--radius) 0;overflow:hidden;}
.bleed-r img,.bleed-l img{display:block;width:100%;height:clamp(360px,52vw,620px);object-fit:cover;}
.bleed-r figcaption,.bleed-l figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:72px 26px 20px;font-size:12.5px;line-height:1.55;color:hsl(150 16% 84%);
  text-wrap:pretty;
  background:linear-gradient(to top,hsl(152 48% 8% / .92),hsl(152 48% 8% / 0));}
.bleed-r figcaption b,.bleed-l figcaption b{color:#fff;font-weight:600;}
.bleed-r figcaption{padding-right:calc(26px + var(--edge));}
.bleed-l figcaption{padding-left:calc(26px + var(--edge));}

/* ---------- dark section standing on its own photograph ---------- */
.onphoto{position:relative;isolation:isolate;background:hsl(var(--header));overflow:hidden;
  padding:96px 0;}
.onphoto > .shot{position:absolute;inset:0;z-index:0;}
.onphoto > .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  filter:saturate(.68) contrast(1.05) brightness(.9);}
.onphoto > .veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to bottom, hsl(152 48% 9% / .58) 0%, hsl(152 47% 10% / .88) 52%, hsl(152 47% 10% / .96) 100%);}
.onphoto > .wrap{position:relative;z-index:2;}

/* ---------- the guia, sitting on the place it is printed ---------- */
.guia-mount{position:relative;padding:28px 22px 24px;}
.guia-mount .backdrop{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;}
.guia-mount .backdrop img{width:100%;height:100%;object-fit:cover;object-position:52% 46%;}
.guia-mount .backdrop::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,hsl(152 48% 10% / .74),hsl(152 40% 16% / .5));}
.guia{position:relative;z-index:2;margin:0 auto;max-width:340px;background:#fff;color:#111;
  border-radius:var(--radius);padding:22px 24px;font-variant-numeric:tabular-nums;
  box-shadow:0 22px 48px -18px hsl(152 48% 6% / .7);}
.guia .gh{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding-bottom:12px;border-bottom:1px dashed #d5ddd8;}
.guia .gh .t{font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;}
.guia .gh .s{font-size:11px;color:#5e6e66;margin-top:4px;}
.guia .qr{width:50px;height:50px;flex:none;border:1px solid #d5ddd8;border-radius:4px;
  background:conic-gradient(from 0deg,#111 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/9px 9px;}
.guia dl{margin:13px 0 0;display:grid;grid-template-columns:1fr auto;gap:9px 12px;}
.guia dt{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5e6e66;}
.guia dd{margin:0;text-align:right;font-size:14px;font-weight:700;letter-spacing:-.01em;}
.guia dd.flag{color:#a35a06;}
.guia dd.flag::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#c26c0a;margin-right:7px;vertical-align:.08em;}
.guia .gf{margin-top:13px;padding-top:11px;border-top:1px dashed #d5ddd8;font-size:10px;
  color:#83958c;display:flex;justify-content:space-between;gap:10px;}
.guia-note{position:relative;z-index:2;text-align:center;margin-top:18px;font-size:11.5px;
  line-height:1.5;color:hsl(150 16% 84%);max-width:34ch;margin-left:auto;margin-right:auto;}

/* ---------- problem / capability cards ---------- */
.tile{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  padding:24px;position:relative;padding-left:26px;}
.tile::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;
  border-radius:0 3px 3px 0;background:hsl(var(--primary));}
.tile .tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:hsl(var(--primary));}
.tile h3{font-size:18px;margin-top:10px;}
.tile p{font-size:13.5px;color:hsl(var(--muted-foreground));line-height:1.6;margin-top:8px;}

/* ---------- feature grid ---------- */
.feats{border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;}
.feats .bar{background:hsl(var(--header));color:hsl(var(--header-foreground));
  padding:14px 20px;font-family:var(--font-display);font-weight:700;font-size:14.5px;
  border-left:3px solid hsl(142 58% 52%);}
.feats .g{display:grid;grid-template-columns:1fr 1fr;}
.feats .f{padding:20px;border-top:1px solid hsl(var(--border));background:hsl(var(--card));}
.feats .f:nth-child(odd){border-right:1px solid hsl(var(--border));}
.feats .f h4{font-size:14.5px;font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em;}
.feats .f p{font-size:12.5px;color:hsl(var(--muted-foreground));line-height:1.6;margin-top:6px;}
.feats .f .hl{color:hsl(142 72% 24%);font-weight:600;}

/* ---------- callouts ---------- */
.note{border:1px solid hsl(142 30% 82%);background:hsl(142 45% 96%);
  border-radius:var(--radius);padding:16px 20px;}
.note p{font-size:13.5px;line-height:1.6;}
.note-dark{background:hsl(var(--header));border-radius:var(--radius);padding:20px 24px;
  color:hsl(150 14% 82%);}
.note-dark .t{font-family:var(--font-display);color:#fff;font-weight:700;font-size:16.5px;
  letter-spacing:-.02em;line-height:1.3;}
.note-dark .s{font-size:13px;margin-top:9px;line-height:1.6;}
.note-dark .s b{color:#fff;font-weight:600;}

/* ---------- THE VOLTA STRIP : signature ---------- */
.volta{border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--card));overflow:hidden;}
.volta .hd{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;padding:16px 22px;
  background:hsl(var(--header));color:hsl(var(--header-foreground));}
.volta .hd .lap{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.02em;}
.volta .hd .m{font-size:12px;color:hsl(150 12% 76%);font-variant-numeric:tabular-nums;}
.volta .hd .m em{font-style:normal;color:hsl(142 58% 52%);font-weight:600;}
.volta .bd{padding:44px 22px 22px;}

.trackwrap{position:relative;}
.track{position:relative;display:flex;height:62px;border-radius:var(--radius);overflow:hidden;
  background:hsl(150 20% 94%);border:1px solid hsl(var(--border));}
.seg{position:relative;display:flex;align-items:flex-end;justify-content:center;
  border-right:1px solid hsl(0 0% 100% / .45);transform-origin:left center;}
.seg:last-child{border-right:none;}
.seg.ok{background:hsl(var(--capacity-ok));}
.seg.ok:nth-child(even){background:hsl(142 62% 35%);}
.seg.over{background:hsl(var(--capacity-full));}
.seg.past{background:hsl(var(--stop-skipped));}
.seg .n{font-size:11.5px;font-weight:700;color:#fff;padding-bottom:7px;
  font-variant-numeric:tabular-nums;}
.cap{position:absolute;top:-13px;bottom:-13px;width:2px;background:hsl(var(--header));z-index:3;}
.cap::after{content:attr(data-label);position:absolute;top:-25px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:hsl(var(--header-foreground));background:hsl(var(--header));padding:4px 9px;
  border-radius:999px;font-variant-numeric:tabular-nums;}

@media(prefers-reduced-motion:no-preference){
  .trackwrap .seg{transform:scaleX(0);transition:transform .65s cubic-bezier(.22,.7,.3,1);}
  .trackwrap.is-in .seg{transform:scaleX(1);}
  .trackwrap .cap{opacity:0;transition:opacity .35s ease .8s;}
  .trackwrap.is-in .cap{opacity:1;}
  .seg:nth-child(1){transition-delay:0s}    .seg:nth-child(2){transition-delay:.07s}
  .seg:nth-child(3){transition-delay:.14s}  .seg:nth-child(4){transition-delay:.21s}
  .seg:nth-child(5){transition-delay:.28s}  .seg:nth-child(6){transition-delay:.35s}
  .seg:nth-child(7){transition-delay:.42s}  .seg:nth-child(8){transition-delay:.49s}
  .seg:nth-child(9){transition-delay:.56s}
}

.stops{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px;}
.stop{display:flex;align-items:baseline;gap:10px;padding:9px 0;
  border-top:1px solid hsl(var(--border));font-size:12.5px;font-variant-numeric:tabular-nums;}
.stop .i{width:18px;font-weight:700;color:hsl(var(--stop-pending));}
.stop .p{font-weight:600;}
.stop .l{margin-left:auto;color:hsl(var(--muted-foreground));font-weight:600;}
.stop.hit .p,.stop.hit .l,.stop.hit .i{color:hsl(var(--capacity-full));}
.stop.after{opacity:.5;}

/* ---------- fleet : one grid, so the columns actually line up ---------- */
.fleet{display:grid;grid-template-columns:auto 1fr auto auto;
  border:1px solid hsl(152 22% 26%);border-radius:var(--radius);overflow:hidden;
  background:hsl(152 30% 13%);box-shadow:0 28px 60px -30px hsl(152 60% 4% / .8);}
.fleet > *{padding:16px 22px;display:flex;align-items:center;
  border-top:1px solid hsl(152 22% 24%);font-variant-numeric:tabular-nums;}
.fleet > .hc{border-top:none;background:hsl(152 40% 10%);padding:13px 22px;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:hsl(150 14% 72%);}
.fleet > .rt{justify-content:flex-end;text-align:right;}
.fleet .plate{font-family:var(--font-mono);font-size:13px;font-weight:600;padding:6px 10px;
  border:1px solid hsl(152 20% 32%);border-radius:5px;background:hsl(152 34% 16%);
  color:hsl(150 20% 92%);}
.fleet .ch{font-size:13.5px;color:hsl(150 12% 74%);}
.fleet .cp{font-family:var(--font-display);font-size:17px;font-weight:700;
  color:hsl(142 58% 52%);letter-spacing:-.02em;}
.fleet .lp{font-size:12.5px;font-weight:500;color:hsl(150 12% 70%);letter-spacing:.03em;}

/* stat tiles on the dark photo section */
.onphoto .stat{background:hsl(152 34% 13% / .82);border-color:hsl(152 22% 26%);
  backdrop-filter:blur(8px);}
.onphoto .stat .k{color:hsl(142 58% 52%);}
.onphoto .stat .v{color:#fff;}
.onphoto .stat .sub{color:hsl(150 12% 72%);}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-size:12.5px;color:hsl(var(--muted-foreground));background:hsl(var(--card));
  border:1px solid hsl(var(--border));border-radius:999px;padding:7px 15px;}
.chip b{color:hsl(var(--foreground));font-weight:600;}

/* ---------- closing ---------- */
.closing{background:hsl(var(--header));border-radius:var(--radius);padding:56px 44px;
  text-align:center;position:relative;overflow:hidden;color:hsl(150 14% 82%);}
.closing::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  bottom:-230px;left:-110px;background:radial-gradient(circle,hsl(142 58% 52% / .2),transparent 62%);}
.closing .q{font-size:17px;line-height:1.6;max-width:56ch;margin:0 auto;position:relative;z-index:1;}
.closing .big{font-family:var(--font-display);font-size:clamp(24px,3.2vw,34px);font-weight:700;
  letter-spacing:-.03em;color:#fff;margin-top:22px;position:relative;z-index:1;}
.closing .big b{color:hsl(142 58% 52%);}
.closing .act{margin-top:30px;position:relative;z-index:1;}

/* ---------- footer ---------- */
.foot{border-top:1px solid hsl(var(--border));padding:38px 0 60px;}
.foot .in{max-width:1140px;margin:0 auto;padding:0 36px;display:flex;flex-wrap:wrap;
  gap:14px 24px;align-items:center;}
.foot .brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:700;font-size:15px;letter-spacing:-.02em;color:hsl(var(--foreground));}
.foot .brand .pin{width:8px;height:8px;border-radius:50%;background:hsl(var(--primary));}
.foot .m{margin-left:auto;font-size:12px;color:hsl(var(--muted-foreground));}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .grid-2,.grid-3,.grid-4,.feats .g,.stops{grid-template-columns:1fr;}
  .feats .f:nth-child(odd){border-right:none;}
  .pair,.pair.flip{grid-template-columns:1fr;gap:32px;}
  .bleed-r,.bleed-l{margin-left:calc(-1 * var(--edge));margin-right:calc(-1 * var(--edge));border-radius:0;}
  .bleed-r img,.bleed-l img{height:clamp(280px,60vw,420px);}
  .hero .strip{grid-template-columns:1fr;}
  .hero .lede{max-width:24ch;}
  .nav menu{display:none;}
  .nav .btn{margin-left:auto;}
  .sec{padding:64px 0;}
  :root{--gutter:20px;}
  .nav .in,.hero .in,.foot .in{padding-left:var(--gutter);padding-right:var(--gutter);}
  .hero .in{padding-top:84px;padding-bottom:40px;}
  .onphoto{padding:64px 0;}
  .closing{padding:38px 24px;}
  .fleet{grid-template-columns:auto 1fr;}
  .fleet > .hc{display:none;}
  .fleet > *{padding:12px 16px;}
  .fleet > .rt{justify-content:flex-start;text-align:left;}
}
@media(max-width:560px){
  .track{height:52px;}
  .seg .n{font-size:9.5px;}
  .cap::after{font-size:9px;padding:3px 7px;}
  .guia{max-width:none;}
}

/* ============================================================
   CAMADA DIGITAL — the digital layer over the physical operation.
   A photograph, graded and darkened, with the data the system
   already holds floated on top of it: chips, a traced route, a
   detection bracket. The effect IS the pitch — this is what the
   software adds to a yard that already works.
   ============================================================ */

.dl{position:relative;isolation:isolate;overflow:hidden;border-radius:calc(var(--radius) * 1.75);
  background:hsl(var(--header));}
.dl > img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.62) contrast(1.08) brightness(.82);}
.dl::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,hsl(152 50% 7% / .86) 0%,hsl(152 48% 9% / .18) 46%,hsl(152 46% 12% / .30) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 40%, hsl(152 50% 7% / .40) 100%);}

/* ---- the data chip ---- */
.dl-chip{position:absolute;z-index:3;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:hsl(152 42% 10% / .82);border:1px solid hsl(152 20% 38% / .55);
  backdrop-filter:blur(12px) saturate(1.35);
  border-radius:999px;padding:9px 16px;
  font-size:clamp(9.5px,.82vw,11.5px);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:hsl(150 24% 94%);font-variant-numeric:tabular-nums;
  box-shadow:0 14px 30px -14px hsl(152 60% 4% / .85);}
.dl-chip::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:hsl(142 58% 52%);box-shadow:0 0 0 3px hsl(142 58% 52% / .22);}
.dl-chip.ok::after{content:"✓";margin-left:2px;color:hsl(142 58% 52%);font-size:1.05em;}

/* ---- detection bracket ---- */
.dl-frame{position:absolute;z-index:3;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  pointer-events:none;--c:hsl(150 30% 96% / .82);--t:2px;--l:clamp(14px,1.5vw,22px);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--l) no-repeat;}

/* ---- traced route ---- */
.dl-trace{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.dl-trace path{fill:none;stroke:hsl(142 58% 52%);stroke-width:2.1px;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px hsl(142 58% 52% / .35));}
.dl-trace circle{fill:hsl(142 58% 52%);stroke:hsl(152 48% 10% / .5);stroke-width:1px;
  vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 7px hsl(142 58% 52% / .6));}

/* ---- footer: what this is, and the layer name ---- */
.dl-foot{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;padding:clamp(16px,2vw,24px);}
.dl-foot .who{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(15px,1.55vw,21px);line-height:1.15;color:#fff;max-width:14ch;}
.dl-foot .layer{font-size:clamp(8.5px,.75vw,10px);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:hsl(150 14% 74%);text-align:right;flex:none;}

/* ---- the reveal ---- */
@media(prefers-reduced-motion:no-preference){
  .dl-chip,.dl-frame{opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.7,.3,1);}
  .dl-chip{transform:translate(-50%,calc(-50% + 12px));}
  .dl-frame{transform:scale(.94);transform-origin:center;}
  .is-live .dl-chip{opacity:1;transform:translate(-50%,-50%);}
  .is-live .dl-frame{opacity:1;transform:scale(1);}
  .dl-chip:nth-of-type(1){transition-delay:.15s}
  .dl-chip:nth-of-type(2){transition-delay:.30s}
  .dl-chip:nth-of-type(3){transition-delay:.45s}
  /* path carries pathLength="100", so the dash maths is geometry-independent */
  .dl-trace path{stroke-dasharray:100;stroke-dashoffset:100;
    transition:stroke-dashoffset 1.6s cubic-bezier(.4,.5,.2,1) .1s;}
  .is-live .dl-trace path{stroke-dashoffset:0;}
  .dl-trace circle{opacity:0;transition:opacity .35s ease 1.3s;}
  .is-live .dl-trace circle{opacity:1;}
}

/* ---- chips floated straight onto the hero photograph ---- */
.hero-layer{position:absolute;inset:0;z-index:2;pointer-events:none;}
@media(max-width:1100px){.hero-layer{display:none;}}

/* parallax inside a photo card — same headroom rule */
html.motion-ready .dl.parallax > img{position:absolute;inset:-8% 0;height:116%;}

/* ---- the three-up row ---- */
.dl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);}
.dl-row .dl{aspect-ratio:3/4;}

/* ---- a wide band variant ---- */
.dl-band{aspect-ratio:16/7;}
.dl-strip{aspect-ratio:auto;}
.dl-strip > img{filter:saturate(.85) contrast(1.06) brightness(.98);}
.dl-strip::after{background:linear-gradient(to right,hsl(152 50% 7% / .55) 0%,hsl(152 48% 9% / .06) 42%,transparent 100%);}

@media(max-width:960px){
  .dl-row{grid-template-columns:1fr;}
  .dl-row .dl{aspect-ratio:4/3;}
  .dl-band{aspect-ratio:4/3;}
  .dl-chip{font-size:10px;padding:7px 12px;gap:7px;
    max-width:calc(100% - 28px);white-space:normal;text-align:left;line-height:1.35;}
}


/* ============================================================
   Motion hand-off. `js` is set by an inline script before paint, so
   animated elements start hidden only when scripting is available.
   If the module fails to boot, a timeout adds `no-motion` and every
   rule below stops applying, so the page is never left blank.
   ============================================================ */
html.js:not(.no-motion) :is(
  .head > *, .tile, .card, .list li, .feats .f, .stat, .chip, .step, .stop,
  .tbl tbody tr, .fleet > *:not(.hc), .guia, .dl-foot,
  .hero .eyebrow, .hero .locator, .hero h1, .hero .bead, .hero .lede, .hero .sig
){opacity:0;}

/* JS owns these once Motion is live — drop the CSS transitions so the two
   never drive the same property at once. */
html.motion-ready :is(
  .dl-chip, .dl-frame, .dl-trace path, .dl-trace circle,
  .trackwrap .seg, .trackwrap .cap
){transition:none !important;}

/* the header earns a shadow once you leave the hero */
.nav{transition:box-shadow .25s ease, background-color .25s ease;}
.nav.is-stuck{box-shadow:0 10px 30px -18px hsl(152 60% 6% / .8);}