/* =========================================================
   A&B LOGISTICS INTERNATIONAL LLC — micro landing page
   Art direction: "Mineral & Route"

   Every colour here was pulled from the company's own material:
   the navy of the wordmark on the warehouse sign, the oxide red of
   the corrugated steel, the cyan of the globe in the logo and the
   Arizona sky above 1620 Halron Court.

   Light source: top-left, the same as in the warehouse photograph.
   Shape signature: the chamfered corner — a cut stone's edge.
   ========================================================= */

:root{
  /* --- night: the deep field the whole page sits in --- */
  --void:      #060A13;
  --deep:      #0A1122;
  --navy:      #0F1B33;
  --navy-lit:  #16264A;
  --ink:       #1E3563;   /* navy of the A&B wordmark */

  /* --- oxide: the corrugated steel of the warehouse --- */
  --oxide:     #93222B;
  --oxide-lit: #C23A44;
  --ember:     #E0575F;

  /* --- light: the globe in the logo, the Arizona sky --- */
  --cyan:      #57C4E3;
  --cyan-lit:  #8FDCF2;
  --sky:       #3B8FD0;
  --sand:      #E6D6BE;   /* concrete + desert light */

  /* --- type --- */
  --white:     #EEF3FA;
  --mute:      #A9B9D1;
  --faint:     #7E92B0;

  /* --- edges and depth --- */
  --line:      rgba(140,175,225,.16);
  --line-soft: rgba(140,175,225,.09);
  --edge-lit:  linear-gradient(150deg, rgba(143,220,242,.42), rgba(140,175,225,.13) 34%, rgba(140,175,225,.06) 70%);
  --surface:   linear-gradient(158deg, #101B32 0%, #0C1426 58%, #0A1020 100%);
  --surface-2: linear-gradient(158deg, #13203C 0%, #0D1729 100%);

  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 10px 26px rgba(3,7,16,.55);
  --sh-3: 0 18px 48px rgba(3,7,16,.66), 0 2px 0 rgba(143,220,242,.06) inset;

  /* --- the facet: one shape, used everywhere --- */
  --facet:    polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px);
  --facet-sm: polygon(13px 0, 100% 0, 100% 100%, 0 100%, 0 13px);
  --hex:      polygon(50% 0, 100% 27%, 100% 73%, 50% 100%, 0 73%, 0 27%);

  /* --- rhythm --- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:34px; --s7:52px; --s8:76px;

  /* --- typography --- */
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --body: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* --- motion: freight moves steadily, never bouncy --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast:.24s;
  --t-slow:.7s;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }

body{
  background:var(--void);
  color:var(--white);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* =========================================================
   PLANE 01 — the inside of a cut stone
   Three fixed layers: facet geometry, coloured aura, film grain.
   They never scroll, so the page reads as if it were lit from
   behind a single piece of mineral.
   ========================================================= */
.facets{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%; opacity:.9;
}
.aura{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(115% 55% at 18% -6%,  rgba(87,196,227,.20) 0%, rgba(87,196,227,0) 62%),
    radial-gradient(90% 45% at 96% 12%,   rgba(59,143,208,.14) 0%, rgba(59,143,208,0) 60%),
    radial-gradient(120% 60% at 50% 108%, rgba(147,34,43,.30) 0%, rgba(147,34,43,0) 60%);
}
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.32; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.page{
  position:relative; z-index:1;
  width:100%;
  max-width:540px;
  margin-inline:auto;
  padding-inline:22px;
  padding-bottom:calc(112px + env(safe-area-inset-bottom));
}

/* shared section furniture ------------------------------- */
.kicker{
  font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:var(--s2);
  display:flex; align-items:center; gap:10px; justify-content:center;
}
.kicker::before,.kicker::after{
  content:''; height:1px; flex:1; max-width:44px;
  background:linear-gradient(90deg, transparent, rgba(87,196,227,.55));
}
.kicker::after{ background:linear-gradient(90deg, rgba(87,196,227,.55), transparent); }

.sec-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(29px,8.4vw,38px); line-height:1.1; letter-spacing:-.01em;
  text-align:center; margin-bottom:var(--s5);
}
.sec-title em{ font-style:italic; color:var(--cyan-lit); }
.sec-lede{
  text-align:center; color:var(--mute); font-size:14.5px;
  margin:-14px auto var(--s5); max-width:38ch;
}

section{ padding-top:var(--s8); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding-top:calc(42px + env(safe-area-inset-top)); text-align:center; }

/* the mark — globe + flight arc, redrawn from the warehouse sign */
.mark{ position:relative; width:104px; height:104px; margin:0 auto var(--s5); }
.mark-glow{
  position:absolute; inset:-30%;
  background:radial-gradient(circle, rgba(87,196,227,.34) 0%, rgba(87,196,227,0) 66%);
  animation:breathe 7s var(--ease) infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.7 } 50%{ transform:scale(1.14); opacity:1 } }
.mark svg{ position:relative; width:100%; height:100%; }
.mark .globe-line{ stroke:var(--cyan); }
.mark .frame{ stroke:rgba(143,220,242,.4); }
.mark .plane{ fill:var(--white); }
.mark .arc{ stroke:var(--ember); stroke-dasharray:3 4; animation:travel 9s linear infinite; }
@keyframes travel{ to{ stroke-dashoffset:-70 } }

.eyebrow{
  font-size:10.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:var(--faint); margin-bottom:var(--s4);
}

.wordmark{
  font-family:var(--display); font-weight:400;
  font-size:clamp(46px,14.5vw,64px); line-height:.94; letter-spacing:-.015em;
  background:linear-gradient(168deg,#FFFFFF 0%, #DCE9F6 38%, #93AECD 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wordmark .amp{
  background:linear-gradient(168deg,var(--cyan-lit),var(--sky));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wordmark small{
  display:block; margin-top:13px;
  font-family:var(--body); font-weight:400;
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--faint); -webkit-text-fill-color:var(--faint);
}

/* the facet rule — a cut stone seen edge-on */
.rule{ display:flex; align-items:center; justify-content:center; gap:12px; margin:var(--s5) 0 var(--s4); }
.rule span{ height:1px; flex:1; max-width:88px; background:linear-gradient(90deg,transparent,rgba(143,220,242,.5)); }
.rule span:last-child{ background:linear-gradient(90deg,rgba(143,220,242,.5),transparent); }
.rule svg{ width:17px; height:17px; color:var(--cyan); flex:none; }

.lede{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(23px,6.6vw,28px); line-height:1.26;
  color:var(--white); margin-bottom:var(--s3);
}
.sub{ color:var(--mute); font-size:14.5px; max-width:38ch; margin:0 auto var(--s6); }

/* --- primary CTA: the only fully-lit object on the first screen --- */
.cta-main{
  position:relative; display:flex; align-items:center; gap:14px;
  width:100%; padding:17px 20px;
  clip-path:var(--facet-sm);
  background:linear-gradient(135deg,var(--oxide-lit) 0%, var(--oxide) 52%, #6E1720 100%);
  box-shadow:var(--sh-3);
  overflow:hidden; text-align:left;
  transition:transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.cta-main:active{ transform:translateY(2px) scale(.99); filter:brightness(1.08); }
.cta-main > *{ position:relative; z-index:2; }
/* refraction: light crossing a facet */
.cta-main .refract{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg,transparent 22%, rgba(255,255,255,.30) 46%, rgba(143,220,242,.22) 54%, transparent 74%);
  transform:translateX(-120%);
  animation:refract 5.6s var(--ease) infinite;
}
@keyframes refract{ 0%{transform:translateX(-120%)} 55%,100%{transform:translateX(120%)} }
.cta-main .ico{ width:26px; height:26px; flex:none; color:#fff; }
.cta-main .txt{ flex:1; }
.cta-main strong{ display:block; font-size:16px; font-weight:600; letter-spacing:.01em; }
.cta-main small{ display:block; font-size:11.5px; font-weight:300; color:rgba(255,236,236,.82); letter-spacing:.06em; }
.cta-main .arrow{ width:19px; height:19px; flex:none; opacity:.85; }

.cta-sub{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:var(--s4);
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:400;
  color:var(--cyan-lit);
  border-bottom:1px solid rgba(143,220,242,.28); padding-bottom:4px;
}
.cta-sub svg{ width:15px; height:15px; }

/* --- the three facts, in a mineral bar --- */
.stats{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:var(--s7); clip-path:var(--facet-sm);
  background:var(--edge-lit); padding:1px; gap:1px;
}
.stats li{ background:linear-gradient(160deg,#0E1930,#0A1120); padding:16px 7px; text-align:center; }
.stats b{ display:block; font-family:var(--display); font-size:23px; font-weight:400; color:var(--cyan-lit); line-height:1.1; }
.stats span{ display:block; margin-top:5px; font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); line-height:1.4; }

/* =========================================================
   THE WAREHOUSE PHOTOGRAPH
   A foto vai como o original: sem filtro, sem duotone, sem
   nenhuma camada por cima. A legenda mora numa faixa abaixo
   dela — a moldura chanfrada e a linha de luz superior é que
   costuram a imagem à paleta, não uma cor jogada em cima.
   ========================================================= */
.shot{
  position:relative; margin-top:var(--s8);
  clip-path:var(--facet); overflow:hidden;
  background:var(--edge-lit); padding:1px;
  box-shadow:var(--sh-3);
}
.shot img{ width:100%; height:232px; object-fit:cover; object-position:62% 46%; }
.shot-cap{
  padding:13px 16px 14px;
  background:linear-gradient(158deg,#101B32,#0A1020);
}
.shot-cap b{ display:block; font-family:var(--display); font-size:19px; font-weight:400; margin-top:2px; }
.shot-cap span{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan-lit); }

/* =========================================================
   THE LOOP — signature section
   Their own sentence, drawn: storage -> pickup -> transport ->
   booth -> next show, with the route closing back on itself.
   ========================================================= */
.loop-track{ position:relative; padding-left:52px; margin-top:var(--s2); }
/* the spine */
.loop-track::before{
  content:''; position:absolute; left:17px; top:16px; bottom:48px; width:1px;
  background:linear-gradient(180deg, rgba(87,196,227,.75), rgba(87,196,227,.25) 55%, rgba(224,87,95,.65));
}
/* light travelling down the spine */
.loop-pulse{
  position:absolute; left:14px; top:14px; width:7px; height:7px; border-radius:50%;
  background:var(--cyan-lit); box-shadow:0 0 12px 3px rgba(143,220,242,.7);
  animation:descend 6.5s var(--ease) infinite;
}
@keyframes descend{
  0%{ top:14px; opacity:0 } 9%{ opacity:1 }
  84%{ opacity:1 } 93%,100%{ top:calc(100% - 54px); opacity:0 }
}
.step{ position:relative; padding-bottom:var(--s6); }
.step:last-of-type{ padding-bottom:var(--s4); }
.step .node{
  position:absolute; left:-52px; top:0;
  width:35px; height:35px; display:grid; place-items:center;
  clip-path:var(--hex); background:var(--edge-lit);
}
.step .node i{ position:absolute; inset:1px; clip-path:var(--hex); background:linear-gradient(160deg,#132140,#0A1120); }
.step .node b{ position:relative; font-family:var(--display); font-size:15px; font-weight:400; color:var(--cyan-lit); }
.step h3{ font-size:16px; font-weight:600; margin-bottom:3px; padding-top:5px; }
.step p{ color:var(--mute); font-size:13.5px; line-height:1.55; }
/* the return: the cycle closing back on itself */
.loop-return{ position:absolute; left:0; top:30px; bottom:18px; width:52px; color:rgba(224,87,95,.6); pointer-events:none; }
.loop-return svg{ width:100%; height:100%; }
.loop-return path{ stroke-dasharray:5 6; animation:travel 11s linear infinite reverse; }
.loop-label{ margin-top:var(--s4); text-align:center; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); }

/* =========================================================
   SERVICES
   ========================================================= */
.grid{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.tile{
  position:relative; padding:18px 15px 17px;
  clip-path:var(--facet-sm); background:var(--edge-lit);
  transition:transform var(--t-fast) var(--ease);
}
.tile::before{ content:''; position:absolute; inset:1px; clip-path:var(--facet-sm); background:var(--surface); z-index:1; }
.tile > *{ position:relative; z-index:2; }
.tile-ico{ display:block; width:27px; height:27px; color:var(--cyan); margin-bottom:11px; }
.tile h3{ font-size:14px; font-weight:600; line-height:1.25; margin-bottom:4px; }
.tile p{ font-size:12px; line-height:1.45; color:var(--faint); }
.tile-wide{ grid-column:1 / -1; display:flex; gap:14px; align-items:flex-start; }
.tile-wide .tile-ico{ margin-bottom:0; flex:none; }

/* =========================================================
   1,500 PALLETS — the oxide block
   The one section that carries the warehouse's own colour.
   ========================================================= */
.vault{ position:relative; margin-top:var(--s8); clip-path:var(--facet); overflow:hidden; box-shadow:var(--sh-3); }
.vault-bg{ position:absolute; inset:0; background:linear-gradient(152deg,#A32831 0%, #7C1C24 46%, #4A1016 100%); }
/* corrugated steel, drawn in CSS — the wall of the building */
.vault-rib{
  position:absolute; inset:0; opacity:.3;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 2px, rgba(255,255,255,.05) 2px 5px, transparent 5px 13px);
}
.vault-lit{ position:absolute; inset:0; background:radial-gradient(88% 62% at 16% 0%, rgba(255,225,205,.32) 0%, rgba(255,225,205,0) 62%); }
.vault-in{ position:relative; z-index:2; padding:30px 22px 26px; text-align:center; }
.vault-in .kicker{ color:#FFD9C9; }
.vault-in .kicker::before{ background:linear-gradient(90deg,transparent,rgba(255,217,201,.6)); }
.vault-in .kicker::after{ background:linear-gradient(90deg,rgba(255,217,201,.6),transparent); }
.vault-num{ font-family:var(--display); font-weight:400; font-size:clamp(56px,17vw,74px); line-height:.9; color:#fff; letter-spacing:-.02em; }
.vault-num sup{ font-size:.36em; vertical-align:super; margin-left:2px; color:#FFC9BC; }
.vault-cap{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:#FFD9C9; margin-top:10px; }
.vault-txt{ color:rgba(255,240,236,.9); font-size:14px; margin:var(--s4) auto var(--s5); max-width:34ch; }
.btn-light{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; clip-path:var(--facet-sm);
  background:#FFF4EF; color:#7C1C24;
  font-size:13.5px; font-weight:600;
  box-shadow:0 8px 22px rgba(40,4,8,.36);
  transition:transform var(--t-fast) var(--ease);
}
.btn-light:active{ transform:translateY(2px); }
.btn-light svg{ width:17px; height:17px; }

/* =========================================================
   INTERNATIONAL — the route across the ocean
   ========================================================= */
.route-art{ margin:0 auto var(--s5); max-width:430px; }
.route-art .ocean{ stroke:rgba(140,175,225,.18); }
.route-art .path{ stroke:var(--cyan-lit); stroke-dasharray:4 5; animation:travel 14s linear infinite; }
.route-art .dot{ fill:var(--ember); }
.route-art .halo{ fill:none; stroke:var(--ember); opacity:.45; }
.route-art text{ font-family:var(--body); font-size:8px; font-weight:500; letter-spacing:.15em; fill:var(--mute); }

.dest{ list-style:none; display:grid; gap:10px; }
.dest li{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:15px 16px; clip-path:var(--facet-sm); background:var(--edge-lit);
}
.dest li::before{ content:''; position:absolute; inset:1px; clip-path:var(--facet-sm); background:var(--surface); z-index:1; }
.dest li > *{ position:relative; z-index:2; }
.flag{ width:34px; height:23px; flex:none; overflow:hidden; box-shadow:0 1px 5px rgba(0,0,0,.55); display:grid; }
.flag.de{ grid-template-rows:repeat(3,1fr); }
.flag.de i:nth-child(1){ background:#141414; } .flag.de i:nth-child(2){ background:#C4232C; } .flag.de i:nth-child(3){ background:#E8C24A; }
.flag.fr{ grid-template-columns:repeat(3,1fr); }
.flag.fr i:nth-child(1){ background:#1B3A8C; } .flag.fr i:nth-child(2){ background:#F2F2F2; } .flag.fr i:nth-child(3){ background:#C4232C; }
.flag.world{ place-items:center; background:linear-gradient(150deg,#16264A,#0C1426); color:var(--cyan); }
.flag.world svg{ width:16px; height:16px; }
.d-txt{ flex:1; }
.dest strong{ display:block; font-size:14.5px; font-weight:600; }
.dest small{ display:block; font-size:10.5px; color:var(--faint); letter-spacing:.16em; text-transform:uppercase; margin-top:3px; }

.note{
  margin-top:var(--s4); padding:14px 16px;
  border-left:2px solid var(--cyan); background:rgba(87,196,227,.06);
  font-size:13px; color:var(--mute); line-height:1.55;
}

/* =========================================================
   TEAM + LINKS
   ========================================================= */
.rows{ display:grid; gap:10px; }
.row{
  position:relative; display:flex; align-items:center; gap:13px;
  padding:14px 15px; clip-path:var(--facet-sm); background:var(--edge-lit);
  transition:transform var(--t-fast) var(--ease);
}
.row::before{ content:''; position:absolute; inset:1px; clip-path:var(--facet-sm); background:var(--surface); z-index:1; }
.row > *{ position:relative; z-index:2; }
.row:active{ transform:translateY(2px); }
.row-ico{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  clip-path:var(--hex); background:linear-gradient(160deg,#16264A,#0C1426); color:var(--cyan);
}
.row-ico svg{ width:19px; height:19px; }
.row-ico.wa{ color:#5CE07E; }
.row-txt{ flex:1; min-width:0; }
.row-txt strong{ display:block; font-size:14.5px; font-weight:600; }
.row-txt small{ display:block; font-size:11.5px; color:var(--faint); margin-top:2px; letter-spacing:.04em; }
.row-tag{
  display:inline-block; margin-left:7px; padding:1px 6px; vertical-align:2px;
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-lit); border:1px solid rgba(143,220,242,.32);
}
.row-arrow{ width:17px; height:17px; flex:none; color:var(--faint); }

/* =========================================================
   LOCATION
   ========================================================= */
.addr{ font-style:normal; text-align:center; color:var(--mute); font-size:14.5px; line-height:1.6; margin-bottom:var(--s4); }
.addr b{ display:block; color:var(--white); font-family:var(--display); font-size:22px; font-weight:400; margin-bottom:3px; }
.map{
  position:relative; clip-path:var(--facet); overflow:hidden;
  background:#0C1426; box-shadow:var(--sh-3); line-height:0;
}
.map iframe{ width:100%; height:250px; border:0; filter:grayscale(.5) invert(.92) hue-rotate(178deg) contrast(.86) brightness(.95); }
.where-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:11px; }
.btn-ghost{
  position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 8px; clip-path:var(--facet-sm); background:var(--edge-lit);
  font-size:12.5px; font-weight:500;
  transition:transform var(--t-fast) var(--ease);
}
.btn-ghost::before{ content:''; position:absolute; inset:1px; clip-path:var(--facet-sm); background:var(--surface-2); z-index:1; }
.btn-ghost > *{ position:relative; z-index:2; }
.btn-ghost svg{ width:16px; height:16px; color:var(--cyan); }
.btn-ghost:active{ transform:translateY(2px); }

/* =========================================================
   CLOSING + FOOTER
   ========================================================= */
.closing{ text-align:center; }
.closing h2{ font-family:var(--display); font-weight:400; font-size:clamp(30px,8.6vw,40px); line-height:1.08; margin-bottom:var(--s3); }
.closing h2 em{ font-style:italic; color:var(--cyan-lit); }
.closing p{ color:var(--mute); font-size:14.5px; max-width:34ch; margin:0 auto var(--s5); }

.foot{ margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--line-soft); text-align:center; }
.foot-mark{ width:46px; height:46px; margin:0 auto 12px; color:var(--faint); opacity:.7; }
.foot-name{ font-family:var(--display); font-size:19px; font-weight:400; }
.foot-meta{ font-size:11.5px; color:var(--faint); margin-top:6px; letter-spacing:.05em; }
.foot-meta a{ color:var(--cyan); }
.foot-tag{ font-family:var(--display); font-style:italic; font-size:14.5px; color:var(--mute); margin-top:13px; }
.foot-legal{ font-size:10px; color:#61748F; margin-top:var(--s4); letter-spacing:.06em; }

/* =========================================================
   STICKY DOCK
   ========================================================= */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(6,10,19,0) 0%, rgba(6,10,19,.86) 32%, rgba(6,10,19,.97) 100%);
  transform:translateY(130%); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
  pointer-events:none;
}
.dock.on{ transform:none; opacity:1; pointer-events:auto; }
.dock-in{ max-width:540px; margin-inline:auto; }
.dock-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px; clip-path:var(--facet-sm);
  background:linear-gradient(135deg,var(--oxide-lit),var(--oxide) 58%,#6E1720);
  font-size:14px; font-weight:600; letter-spacing:.02em;
  box-shadow:0 -2px 30px rgba(147,34,43,.4), var(--sh-2);
}
.dock-btn svg{ width:19px; height:19px; }

/* =========================================================
   ENTRANCE — only when JS is alive
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
}

/* --- a touch more air on wider phones / small tablets --- */
@media (min-width:430px){
  .page{ padding-inline:26px; }
  .shot img{ height:264px; }
  .tile h3{ font-size:14.5px; }
}

/* --- ajustes finos --- */
.vault-txt{ font-weight:300; line-height:1.55; }
.loop-label span{ display:inline-flex; align-items:center; gap:8px; }
.loop-label svg{ width:14px; height:14px; flex:none; }
.closing .cta-main{ text-align:left; }
.wordmark small{ background:none; }