/* ==========================================================================
   NiajeDoc homepage
   Visual tokens are taken directly from NiajeDoc Atlas (niajedoc-atlas):
     font          Sora (Atlas: next/font Sora, variable 100-800)
     burgundy      #7C0F2E   deep #300310   bright #A81640
     ink           #221016   muted #8A7580  paper-dim #F6EDEF
     nav           h-16 (64px), px-6, shadow 0 2px 12px rgba(0,0,0,.25),
                   13px / 600 / uppercase / .08em, white at 90%
     search bar    rounded-full, glass fill, blur(22px) saturate(180%)
     paper         texture-paper.jpg under a .35 white wash, 760px tile
     focus ring    2px #2A8F8A
   ========================================================================== */

@font-face{
  font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("/assets/fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("/assets/fonts/sora-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --burgundy:#7C0F2E;
  --burgundy-deep:#300310;
  --burgundy-bright:#A81640;
  --ink:#221016;
  --muted:#76636C;
  --paper-dim:#F6EDEF;
  --line:rgba(34,16,22,.12);
  --black:#0B0B0C;
  --focus:#2A8F8A;
  --font:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --header-h:64px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--header-h);}
html,body{max-width:100%;overflow-x:hidden;}
@supports (overflow-x:clip){html,body{overflow-x:clip;}}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
h1,h2,h3,p,ul{margin:0;}
ul{padding:0;list-style:none;}
button{font:inherit;color:inherit;}
* {-webkit-tap-highlight-color:transparent;}

/* White textured paper: the same recipe Atlas puts on <body> */
.paper{
  background-color:#fff;
  background-image:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)),url("/assets/texture-paper.jpg");
  background-size:760px auto;
  background-repeat:repeat;
  background-attachment:scroll;
}
body{background-color:#fff;background-image:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)),url("/assets/texture-paper.jpg");background-size:760px auto;}

.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 32px;}

.micro{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;
}
.micro.muted{color:var(--muted);font-size:10px;}
.on-dark{color:rgba(255,255,255,.85);}

.sr-only{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;
  background:#fff;color:var(--burgundy);font-size:13px;font-weight:600;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:top .15s;
}
.skip-link:focus{top:10px;}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.nd-header :focus-visible,.gateway :focus-visible,.marquee :focus-visible,
.s2-head :focus-visible{outline-color:#fff;}
[tabindex="-1"]:focus{outline:none;}

/* ---------------------------------------------------------------- header */
.nd-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);width:100%;padding:0 24px;
  background:var(--burgundy);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.nd-logo{display:flex;align-items:center;flex:none;opacity:1;transition:opacity .2s;}
.nd-logo:hover{opacity:.75;}
.nd-logo img{height:22px;width:auto;}
@media (min-width:640px){.nd-logo img{height:24px;}}

.nd-nav{display:none;align-items:center;justify-content:center;gap:32px;margin-left:auto;}
/* Desktop: logo | links | (empty), so the links sit on the true centre line of the bar, as in the Atlas header */
@media (min-width:1024px){
  .nd-header{display:grid;grid-template-columns:1fr auto 1fr;}
  .nd-logo{justify-self:start;}
  .nd-nav{display:flex;margin-left:0;justify-self:center;}
}

/* Atlas .atlas-bar-link: underline sweeps in from the left */
.bar-link{
  position:relative;padding-bottom:4px;
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;text-decoration:none;opacity:.9;line-height:1.5;
  background-image:linear-gradient(to right,rgba(255,255,255,.85),rgba(255,255,255,.85));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;
  transition:color .16s ease-out,background-size .22s ease-out,opacity .09s ease-out;
}
.bar-link:hover,.bar-link:focus-visible{opacity:1;background-size:100% 1.5px;}
.bar-link:active{opacity:.7;}

.nd-youtube{
  display:none;justify-self:end;align-items:center;padding:9px 20px;border:1px solid rgba(255,255,255,.7);border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-decoration:none;line-height:1;
  transition:background-color .2s,color .2s,border-color .2s;
}
@media (min-width:1024px){.nd-youtube{display:inline-flex;}}
.nd-youtube:hover,.nd-youtube:focus-visible{background:#fff;color:var(--burgundy);border-color:#fff;}
.nd-youtube:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.nd-burger{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-left:auto;padding:0;border:0;border-radius:999px;
  background:transparent;color:#fff;cursor:pointer;
  transition:background-color .15s,transform .15s;
}
.nd-burger:hover{background:rgba(255,255,255,.15);}
.nd-burger:active{transform:scale(.9);}
@media (min-width:1024px){.nd-burger{display:none;}}

/* Phone menu: Atlas MobileMenu panel (glass card under the bar) */
.nd-menu{position:fixed;inset:0;z-index:60;}
.nd-menu[hidden]{display:none;}
.nd-menu-scrim{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;}
.nd-menu-panel{
  position:absolute;left:12px;right:12px;top:calc(var(--header-h) + 8px);
  overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.72);
  background-color:rgba(245,245,245,.54);
  background-image:linear-gradient(145deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 48%,rgba(80,65,70,.025) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(116%);backdrop-filter:blur(22px) saturate(116%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 16px 40px rgba(30,20,24,.12),0 0 0 1px rgba(60,50,55,.05);
  color:var(--ink);
  animation:menu-in .1s ease-out;
}
@keyframes menu-in{from{transform:translate3d(0,-3px,0);opacity:.85;}to{transform:none;opacity:1;}}
.nd-menu-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(80,65,70,.09);}
.nd-menu-top .micro{color:rgba(124,15,46,.8);font-size:10px;letter-spacing:.18em;}
.nd-menu-close{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
  border:1px solid rgba(255,255,255,.62);border-radius:999px;background:rgba(255,255,255,.2);
  font-size:19px;line-height:1;color:rgba(34,16,22,.65);cursor:pointer;transition:transform .15s;
}
.nd-menu-close:active{transform:scale(.9);}
.nd-menu ul{padding:8px;}
.nd-menu li+li a{border-top:1px solid rgba(80,65,70,.09);}
.nd-menu li a{
  display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 16px;
  border-radius:16px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;
  transition:background-color .15s,color .15s,transform .15s;
}
.nd-menu li a:hover{background:rgba(255,255,255,.4);color:var(--burgundy);}
.nd-menu li a:active{transform:scale(.985);}
.nd-menu li a i{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.3);color:var(--burgundy);font-style:normal;
}
@media (min-width:1024px){.nd-menu{display:none!important;}}

/* ------------------------------------------------------------- SCREEN ONE */
.screen-one{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
}
.hero{
  position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:clamp(32px,6vh,76px) 24px;
  text-align:center;
}
.hero-inner{position:relative;width:100%;max-width:1040px;}
/* Desktop only: the faint chest drawing on the left edge, done as the Atlas hero does it: a window hugging the screen edge carries
   the fade, so it is strongest at the very edge and steps down to nothing toward the middle, where the words are. It arrives
   with the page (invisible until loaded, then fades in while drifting a little in from the edge). Decorative; never clickable. */
.hero-plate{display:none;}
@media (min-width:1024px){
  .hero-plate{
    display:block;position:absolute;left:0;top:0;bottom:0;width:38vw;overflow:hidden;pointer-events:none;user-select:none;
    -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.88) 14%,rgba(0,0,0,.6) 32%,rgba(0,0,0,.3) 56%,rgba(0,0,0,.1) 80%,transparent 100%);
    mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.88) 14%,rgba(0,0,0,.6) 32%,rgba(0,0,0,.3) 56%,rgba(0,0,0,.1) 80%,transparent 100%);
  }
  .hero-plate img{
    position:absolute;left:0;top:50%;width:auto;height:112%;max-width:none;translate:-6% -50%;
    opacity:0;transform:translateX(-6%);
    transition:opacity 1000ms ease-out 120ms,transform 1300ms cubic-bezier(.22,1,.36,1) 120ms;
  }
  .hero-plate.is-ready img{opacity:.7;transform:none;}
  .no-js .hero-plate img{opacity:.7;transform:none;}
  /* the sound waveform: the mirror image on the right edge, the same fade; it is a wide picture, so it sits flush right and only its end shows */
  .hero-plate--right{
    left:auto;right:0;
    -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.88) 14%,rgba(0,0,0,.6) 32%,rgba(0,0,0,.3) 56%,rgba(0,0,0,.1) 80%,transparent 100%);
    mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.88) 14%,rgba(0,0,0,.6) 32%,rgba(0,0,0,.3) 56%,rgba(0,0,0,.1) 80%,transparent 100%);
  }
  .hero-plate--right img{left:auto;right:0;translate:0 -50%;transform:translateX(6%);}
  .hero-plate--right.is-ready img{opacity:.7;transform:none;}
  .no-js .hero-plate--right img{opacity:.7;transform:none;}
}
@media (prefers-reduced-motion:reduce){.hero-plate img{transition:none;}}

/* Phones only (up to 639px): the waveform comes in from both edges along the foot of the hero, strongest at the screen edges and
   fading inwards until the two halves melt together in the middle. A little quieter than the desktop pieces: a detail, not a feature. */
.hero-wave{display:none;}
@media (max-width:639px){
  .hero-wave{
    display:block;position:absolute;left:0;right:0;bottom:0;height:var(--wave-h,0px);overflow:hidden;pointer-events:none;user-select:none;   /* --wave-h is measured: the free space under the headline, up to 130px */
    animation:wave-in 1100ms ease-out 150ms both;
  }
  .hero-wave i{position:absolute;top:0;bottom:0;width:58%;overflow:hidden;}
  .hero-wave .hw-r{right:0;-webkit-mask-image:linear-gradient(to left,#000 0%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);mask-image:linear-gradient(to left,#000 0%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);}
  .hero-wave .hw-l{left:0;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);}
  .hero-wave img{position:absolute;bottom:0;height:150%;width:auto;max-width:none;opacity:.55;transform:translateY(8%);}
  .hero-wave .hw-r img{right:-6%;}
  .hero-wave .hw-l img{left:-6%;transform:translateY(8%) scaleX(-1);}
}
@keyframes wave-in{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.hero-wave{animation:none;}}
.hero h1{
  font-weight:800;line-height:1.03;letter-spacing:-.04em;color:var(--ink);
  font-size:clamp(34px,min(6.4vw,10vh),84px);
  text-wrap:balance;
}
.h1-hi{color:var(--burgundy);}
/* short laptop screens: keep the whole of Screen One inside the first view */
@media (max-height:780px) and (min-width:720px){
  .hero{padding-top:20px;padding-bottom:20px;}
  .hero h1{font-size:clamp(34px,min(6.4vw,10.4vh),84px);}
}
@media (min-width:720px){.h1-brand,.h1-hi,.h1-tail{display:block;}}
@media (max-width:719px){.hero h1{font-size:clamp(34px,11vw,52px);}}
/* Burgundy band: the Atlas "Explore" layer.
   Atlas measures pt + 36px pill + 20px + card + pb (28/36 on 2xl). NiajeDoc has no pill, so the same
   depth is kept by centring the cards: 56px (phone), 54px (tablet / desktop), 64px (2xl) either side.
   Cards use Atlas's widths (62vw phone scroller aside): 36vw / 22vw / 18vw, 3:2, gap 16px (24px on 2xl). */
.gateway{
  position:relative;flex:none;background:var(--burgundy);
  padding:24px 16px 28px;                     /* Atlas explore-block: pt-6 pb-7 */
  box-shadow:0 -6px 20px rgba(34,16,22,.18);
}
/* the Atlas card scroller adds pb-2 (8px) under the cards */
@media (min-width:640px){.gateway{padding:20px 24px 32px;}}        /* sm:pt-5 sm:pb-6 + 8 */
@media (min-width:1536px){.gateway{padding:28px 24px 44px;}}       /* 2xl:pt-7 2xl:pb-9 + 8 */
/* The Atlas EXPLORE pill: ink fill, 12px uppercase 600, .15em tracking, chevron, 20px above the cards */
.gate-pill{
  display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;margin:0 auto 20px;
  padding:8px 28px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;line-height:1.5;
  transition:transform .15s ease-out,opacity .15s ease-out;
}
@media (min-width:640px){.gate-pill{padding:10px 32px;font-size:12px;line-height:16px;}}
.gate-pill:hover{opacity:.85;}
.gate-pill:active{transform:scale(.95);}
.gate-pill svg{flex:none;}
.gateway-inner{display:flex;justify-content:center;gap:12px;}
@media (min-width:640px){.gateway-inner{gap:16px;}}
@media (min-width:1536px){.gateway-inner{gap:24px;}}
.gate{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  flex:1 1 0;min-width:0;max-width:calc((100% - 12px) / 2);aspect-ratio:3/2;
  border-radius:16px;                         /* Atlas: rounded-2xl */
  color:#fff;text-decoration:none;background:var(--burgundy-deep);
  box-shadow:0 0 0 1px rgba(255,255,255,.15); /* Atlas: ring-1 ring-white/15 */
  transition:transform .3s;
}
.gate:active{transform:scale(.99);}
@media (min-width:640px){.gate{flex:none;width:36vw;max-width:none;}}
/* Desktop (1024px and up) only: the two cards are wider, about 420 to 460px, to use the empty space either side. The height is
   exactly what it was (the old 22vw / 18vw wide card at 3:2), so the section keeps its depth; the pictures fill the wider card with
   object-fit: cover and are framed per card below. Tablet and phone are untouched. */
@media (min-width:1024px){
  .gate{width:clamp(420px,32vw,460px);aspect-ratio:auto;height:calc(22vw * 2 / 3);}
  .gateway-inner .gate:nth-child(1) .gate-img{object-position:50% 34%;}
  .gateway-inner .gate:nth-child(2) .gate-img{object-position:50% 28%;}
}
@media (min-width:1536px){.gate{height:calc(18vw * 2 / 3);}}
/* short landscape tablets: Atlas narrows its cards too */
@media (max-height:720px) and (orientation:landscape) and (min-width:640px) and (max-width:1023px){.gate{width:30vw;}}
.gate-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out);}
/* Atlas overlay logic: deep-wine wash that eases off on hover, plus a bottom black gradient for the label */
.gate::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(48,3,16,.35);transition:opacity .3s;pointer-events:none;}
.gate::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.25) 50%,transparent);pointer-events:none;}
.gate-text{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:16px;}  /* Atlas: p-4 */
.gate-title{display:block;font-size:16px;font-weight:700;line-height:24px;}   /* Atlas: text-base / sm:text-lg */
@media (min-width:640px){.gate-title{font-size:18px;line-height:28px;}}
.gate-line{display:block;margin-top:8px;height:2px;width:0;background:#fff;transition:width .3s;}
@media (hover:hover){
  .gate:hover{transform:translateY(-4px);}
  .gate:hover .gate-img{transform:scale(1.05);}
  .gate:hover::before{opacity:.15;}
  .gate:hover .gate-line{width:40px;}
}
.gate:focus-visible .gate-line{width:40px;}

/* Phones: the two cards become a swipe rail. Cards stay large (80vw, 3:2) so the next one peeks in. */
@media (max-width:639px){
  .gateway{padding:24px 0 28px;}
  .gateway-rail{
    padding:2px 0;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-left:16px;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .gateway-rail::-webkit-scrollbar{display:none;}
  .gateway-inner{justify-content:flex-start;gap:12px;width:max-content;padding:0 16px;will-change:transform;}
  .gate{flex:0 0 80vw;width:80vw;max-width:none;scroll-snap-align:start;}
  .gate-text{padding:16px;}
  .gate-title{font-size:16px;}
}

/* ------------------------------------------------------------- SCREEN TWO */
.screen-two{
  --pillar-img:330px;   /* image area */
  --pillar-h:445px;     /* resting card: image + title + one line */
  --pillar-cross:50px;  /* how far each card reaches up into the burgundy */
  --s2-h:760px;
  --pillar-top:calc(var(--s2-h) * .3 - var(--pillar-cross));   /* where the panels begin */
  position:relative;z-index:2;height:var(--s2-h);
  /* a raised sheet: soft shadow down only (over the photograph); none along its top edge */
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4),0 34px 72px -16px rgba(0,0,0,.62);
  /* The wide shadow also bleeds a little upward. Cut everything above the top edge so the burgundy Explore band flows
     straight into the burgundy of this screen with no darkening and no line; sides and bottom stay open for the shadow. */
  clip-path:inset(0 -160px -200px -160px);
}
/* exactly the top 30% is burgundy; the remaining 70% is the textured paper */
.s2-burgundy{position:absolute;top:0;left:0;right:0;height:30%;background:var(--burgundy);}
.s2-wrap{position:relative;height:100%;}
/* WHAT WE DO stands alone. It is centred between the top of the burgundy band and the top of the panels (which reach up into
   the band), so the space above the letters equals the space below them: the letters begin 0.054em below the text box and
   end 0.109em above its bottom (measured from Sora ExtraBold). */
.s2-head{
  text-align:center;font-size:clamp(34px,4.6vw,66px);
  padding-top:calc((var(--pillar-top) - .945em) / 2);
}
.s2-head h2{
  margin:0 auto;color:#fff;
  font-size:1em;font-weight:800;letter-spacing:-.05em;line-height:1;text-transform:uppercase;
}

.pillars{
  position:absolute;left:32px;right:32px;
  /* the 30% boundary falls about an eighth of the way down each panel */
  top:var(--pillar-top);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start;
}
/* Sharp, architectural rectangles. At rest: image, title, one short line. */
.pillar{
  position:relative;
  background:#fcfaf8;border:1px solid rgba(34,16,22,.1);
  box-shadow:0 10px 28px rgba(34,16,22,.1);
}
.pillar-media{position:relative;overflow:hidden;height:var(--pillar-img);background:var(--burgundy-deep);}
.pillar-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out);}
.pillar:nth-child(1) .pillar-media img{object-position:50% 40%;}
.pillar:nth-child(3) .pillar-media img{object-position:50% 50%;}
.pillar-media::after{content:"";position:absolute;inset:0;background:rgba(48,3,16,0);pointer-events:none;transition:background-color .5s;}
.pillar-body{padding:18px 22px 22px;}
.pillar h3{font-size:19px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1.2;color:var(--ink);transition:transform .3s var(--ease-out);}
.pillar p{margin-top:8px;font-size:14px;line-height:1.5;color:rgba(34,16,22,.7);}
/* The bottom edge of the panel extends downward to reveal the action (hover, focus or tap) */
.pillar-more{display:grid;grid-template-rows:1fr;}
.pillar-more > div{min-height:0;overflow:hidden;}
.js .pillar-more{grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease-out);}
.js .pillar:focus-within .pillar-more,
.js .pillar.is-open .pillar-more{grid-template-rows:1fr;}
@media (hover:hover){.js .pillar:hover .pillar-more{grid-template-rows:1fr;}}
.pillar-cta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;padding:0 22px;
  background:var(--burgundy);color:#fff;text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.cta-arrow{font-size:16px;letter-spacing:0;line-height:1;transition:transform .3s var(--ease-out);}
.stretch::after{content:"";position:absolute;inset:0;z-index:2;}
.pillar:has(.stretch:focus-visible){outline:2px solid var(--focus);outline-offset:3px;}
.pillar .stretch:focus-visible{outline:2px solid #fff;outline-offset:-5px;}
@media (hover:hover){
  .pillar:hover .pillar-media img{transform:scale(1.03);}
  .pillar:hover .pillar-media::after{background:rgba(48,3,16,.14);}
  .pillar:hover h3{transform:translateX(3px);}
  .pillar:hover .cta-arrow{transform:translateX(4px);}
}

@media (max-width:959px){
  .screen-two{height:auto;padding-bottom:72px;}
  .s2-burgundy{height:var(--s2-burg,290px);}
  .s2-wrap{height:auto;}
  .s2-head{padding:calc(32px + .055em) 8px 0;font-size:clamp(34px,10.5vw,52px);}
  .pillars{
    position:relative;left:auto;right:auto;top:auto;margin:32px auto 0;max-width:640px;
    grid-template-columns:1fr;gap:20px;
  }
  .pillar-media{height:auto;aspect-ratio:16/10;}
  .pillar-body{height:auto;padding:18px 22px 20px;}
}
@media (max-width:639px){
  .s2-wrap.wrap{padding:0 16px;}
  .pillar-media{aspect-ratio:4/3;}
  .pillar h3{font-size:18px;}
}

/* ------------------------------------------------------------- PARALLAX */
.parallax{
  position:relative;z-index:1;overflow:hidden;
  height:clamp(300px,36vh,360px);
  background:#1b1b1b;color:#fff;
  isolation:isolate;
}
.px-frame{position:absolute;inset:0;overflow:hidden;}
.px-img{
  position:absolute;left:0;width:100%;
  top:calc(var(--px-extra,0px) * -1);
  height:calc(100% + var(--px-extra,0px));
  object-fit:cover;object-position:50% 50%;
  will-change:transform;backface-visibility:hidden;
}
.px-scrim{
  position:absolute;inset:0;
  background:radial-gradient(60% 80% at 50% 50%,rgba(8,2,5,.5),rgba(8,2,5,0) 100%),rgba(12,4,7,.34);
}
.stats{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:center;
  max-width:1160px;margin:0 auto;padding:0 32px;
}
.stats li{padding:6px clamp(14px,3vw,44px);text-align:center;}
.stats li+li{border-left:1px solid rgba(255,255,255,.34);}
.stats strong{display:block;font-size:clamp(34px,4.6vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.35);}
.stats span{
  display:block;margin:12px auto 0;max-width:22ch;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55);
}
@media (max-width:759px){
  .parallax{height:344px;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 16px;}
  .stats li{padding:14px 10px;}
  .stats li+li{border-left:0;}
  .stats li:nth-child(even){border-left:1px solid rgba(255,255,255,.3);}
  .stats li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.3);}
  .stats strong{font-size:32px;}
  .stats span{margin-top:6px;font-size:10.5px;max-width:none;}
}

/* ------------------------------------------------------------ SCREEN THREE */
/* One spacing unit drives the vertical rhythm: space above the heading and below the strip are equal,
   and the heading sits a little closer to its strip than to the parallax photograph. */
.screen-three{
  --s3-gap:clamp(72px,8vw,120px);
  --s3-above:clamp(72px,7.5vw,112px);      /* visible gap: parallax photo -> top of the letters, and bottom of the letters -> white strip */
  position:relative;z-index:2;
  padding:0;
  box-shadow:0 -8px 20px -6px rgba(0,0,0,.4),0 -34px 72px -16px rgba(0,0,0,.62);
}
/* The heading's own font size is set on the header so its padding can be expressed in em: the letters start 0.054em
   below the top of the text box and end 0.109em above its bottom (measured from Sora ExtraBold), so these offsets make
   the visible space above and below the heading identical. */
.s3-head{
  text-align:center;font-size:clamp(42px,8.4vw,112px);
  padding:calc(var(--s3-above) - .054em) 0 calc(var(--s3-above) - .109em);
}
.s3-head h2{
  font-size:1em;font-weight:800;letter-spacing:-.05em;line-height:.96;color:var(--ink);
  white-space:nowrap;
}
.s3-head h2 .hi{color:var(--burgundy);}

/* PROJECTS | VIDEOS: typography only. The active tab is burgundy with a thin underline that glides between the two. */
.s3-tabs{
  position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(18px,2.4vw,32px);
  width:max-content;max-width:100%;margin:0 auto clamp(30px,3vw,44px);
}
.s3-tab{
  padding:10px 4px 13px;border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:clamp(13px,1.15vw,15px);font-weight:700;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;line-height:1;
  color:rgba(255,255,255,.62);transition:color .25s;
}
.s3-tab:hover{color:#fff;}
.s3-tab.is-active{color:#fff;}
.s3-tab:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.s3-bar{width:1px;height:16px;background:rgba(255,255,255,.4);}
.s3-ink{
  position:absolute;left:0;bottom:0;height:2px;width:var(--w,0);background:#fff;
  transform:translateX(var(--x,0));transition:transform .3s var(--ease-out),width .3s var(--ease-out);
}
.no-js .s3-tabs{display:none;}

/* The showcase sits in its own plain white strip that runs from the left edge to the right edge;
   the three items inside keep content width, with generous margins either side. */
.vshow{
  margin-top:0;
  padding:clamp(32px,3.4vw,52px) 0 clamp(56px,5vw,80px);
  background:#fff;
  /* raised layer: a tight contact shadow plus a wide soft one, cast downward onto the paper below */
  box-shadow:0 6px 14px -6px rgba(0,0,0,.28),0 34px 70px -22px rgba(0,0,0,.5);
}
.vshow-inner{max-width:1100px;margin:0 auto;padding:0 clamp(24px,3vw,36px);}
/* The strip is split: burgundy across the top (carrying the tabs), white below. The cards straddle the line, which sits 40% of
   the way down the pictures (--split is measured by the script, so it follows whichever tab is showing). */
.vshow{position:relative;}
.vshow::before{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--split,0px);background:var(--burgundy);
  pointer-events:none;
}
.vshow-inner{position:relative;z-index:1;}
.vmedia{box-shadow:0 14px 34px rgba(0,0,0,.28);}

/* Both panels share one cell, so they crossfade in place; the stage takes the height of the one showing */
.show-stage{position:relative;display:grid;}
.js .show-stage.is-sized{height:var(--sh);}
.js .show-stage.is-switching{transition:height .3s var(--ease-out);}
.show-panel{grid-area:1 / 1;align-self:start;min-width:0;}
.js .show-panel{
  opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(10px,0,0);
  transition:opacity .11s ease,transform .11s ease,visibility 0s .11s;
}
.js .show-panel.is-active{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .2s ease,transform .2s ease,visibility 0s;
}
.show-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);
  margin:0;padding:0;list-style:none;align-items:start;
}
.show-row > li{min-width:0;}
.no-js .vitem:nth-child(n+4){display:none;}
.no-js .show-panel + .show-panel{margin-top:48px;}

/* VIDEOS: custom 9:16 covers, natural colour, sharp edges. No YouTube player is on the page until one is chosen. */
.vmedia{position:relative;aspect-ratio:9/16;overflow:hidden;background:#1b1214;}   /* 1080 x 1920 portrait */
.vcover{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;text-align:left;}
.vcover[hidden]{display:none;}
.vcover-frame{position:absolute;inset:0;display:block;overflow:hidden;}
/* YouTube keeps a portrait video's thumbnail as a 16:9 picture with dark side bars; cover-fitting it into the 9:16 frame
   centres on exactly the portrait part, so the bars fall away. No player chrome is shown. */
.vcover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1;transition:scale .6s var(--ease-out);}
.vcover-frame.no-thumb{background:linear-gradient(135deg,var(--burgundy-deep),var(--burgundy));}
.vcover-frame.no-thumb .vcover-img{display:none;}
.vcover-shade{position:absolute;inset:0;background:rgba(18,4,9,.1);transition:background-color .4s;pointer-events:none;}
/* one small NiajeDoc play control: white disc, burgundy triangle */
.vcover-play{
  position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:#fff;color:var(--burgundy);padding-left:3px;box-shadow:0 3px 12px rgba(0,0,0,.22);
  transition:transform .3s var(--ease-out);
}
@media (hover:hover){
  .vcover:hover .vcover-img{scale:1.03;}
  .vcover:hover .vcover-shade{background:rgba(18,4,9,.2);}
  .vcover:hover .vcover-play{transform:scale(1.08);}
}
.vcover:focus-visible{outline:2px solid var(--focus);outline-offset:-4px;}
/* the single title, directly under the image */
.vcover-title{margin:14px 0 0;font-size:14px;font-weight:700;letter-spacing:-.005em;line-height:1.3;color:var(--ink);}

/* Playing: the player takes the cover's exact slot; nothing pops up and the page does not move */
.vplayer{position:absolute;inset:0;background:#000;}
.vplayer iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;}
.vplayer-stop{
  position:absolute;left:50%;top:8px;margin-left:-17px;z-index:2;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(18,4,9,.62);color:#fff;cursor:pointer;
  transition:background-color .2s,transform .15s;
}
.vplayer-stop:hover{background:rgba(18,4,9,.85);}
.vplayer-stop:active{transform:scale(.92);}
.vplayer-stop:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* VIDEOS: the six videos sit in one row of which three show; the burgundy arrows reveal the rest */
.show-panel{position:relative;}
@media (min-width:900px){
  .vrow{display:flex;overflow-anchor:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;}
  .vrow::-webkit-scrollbar{display:none;}
  .vrow > li{flex:0 0 calc((100% - 2 * clamp(20px,2.4vw,32px)) / 3);scroll-snap-align:start;}
}
.va{
  position:absolute;top:var(--vmid,40%);z-index:4;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px;padding:0;
  border:0;border-radius:50%;background:rgba(124,15,46,.94);color:#fff;cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.22);transition:opacity .25s,background-color .15s,transform .15s;
}
.va-prev{left:-20px;}
.va-next{right:-20px;}
.va:hover{background:var(--burgundy-bright);}
.va:active{transform:scale(.92);}
.va.is-off{opacity:.3;pointer-events:none;}
.va:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.no-js .va{display:none;}
@media (max-width:899px){.va-prev{left:8px;}.va-next{right:8px;}}

/* PROJECTS: sharp, image-led cards. At rest: a large colour photograph and the title. The bottom edge extends to reveal
   the action on hover or focus, exactly as the What we do panels do. */
.pcard{position:relative;background:#fcfaf8;border:1px solid rgba(34,16,22,.1);box-shadow:0 10px 28px rgba(34,16,22,.1);}
.pcard-media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--burgundy-deep);}
.pcard-media img{display:block;width:100%;height:100%;object-fit:cover;}
.pcard-media::after{content:"";position:absolute;inset:0;background:rgba(48,3,16,0);pointer-events:none;transition:background-color .5s;}

/* Photograph swipe: the photograph already showing stays put until the visitor swipes (or taps an arrow). Nothing advances by itself. */
.pg-track{
  position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pg-track::-webkit-scrollbar{display:none;}
@media (hover:hover){.pg-track{cursor:grab;}}
.pg-slide img{-webkit-user-drag:none;user-select:none;pointer-events:none;}
.pg-slide{position:relative;flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#1b1214;}
/* landscape photographs are shown whole, over a soft blur of themselves, rather than cropped to a sliver */
.pg-slide.is-wide{background:var(--bg) center/cover;}
.pg-slide.is-wide::before{content:"";position:absolute;inset:0;backdrop-filter:blur(18px) brightness(.7);-webkit-backdrop-filter:blur(18px) brightness(.7);}
.pg-slide.is-wide img{position:relative;object-fit:contain;}
.pg-slide video{display:block;width:100%;height:100%;object-fit:cover;background:#000;}
.pg-play{
  position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;margin:-24px 0 0 -24px;padding:0 0 0 3px;
  border:0;border-radius:50%;background:#fff;color:var(--burgundy);cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.22);
  transition:transform .3s var(--ease-out);
}
.pg-play:hover{transform:scale(1.08);}
.pg-arrow{
  position:absolute;top:50%;z-index:4;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-top:-18px;padding:0;
  border:0;border-radius:50%;background:rgba(124,15,46,.94);color:#fff;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.25);opacity:0;transition:opacity .25s,background-color .15s,transform .15s;
}
.pg-arrow.prev{left:10px;}
.pg-arrow.next{right:10px;}
.pg-arrow:hover{background:var(--burgundy-bright);}
.pg-arrow:active{transform:scale(.92);}
.pg-arrow:focus-visible{opacity:1;outline:2px solid var(--focus);outline-offset:2px;}
@media (hover:hover){.pcard:hover .pg-arrow{opacity:1;}}
@media (hover:none){.pg-arrow{opacity:1;}}
.pg-count{
  position:absolute;top:10px;right:10px;z-index:4;padding:4px 9px;background:rgba(20,4,9,.58);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums;pointer-events:none;
}
.pg-dots{position:absolute;left:0;right:0;bottom:12px;z-index:4;display:flex;justify-content:center;gap:6px;pointer-events:none;}
.pg-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 4px rgba(0,0,0,.35);transition:background-color .2s,transform .2s;}
.pg-dots i.on{background:#fff;transform:scale(1.15);}
.pcard-body{padding:18px 22px 22px;}
.pcard h3{font-size:19px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1.2;color:var(--ink);transition:transform .3s var(--ease-out);}
/* The revealed details (the description, then the action) hang from the card's bottom edge, so revealing them never changes
   the height of the row. */
.pcard .pillar-more{position:absolute;left:-1px;right:-1px;top:100%;z-index:3;}
.pcard .pillar-more > div{background:var(--burgundy);color:#fff;border:0;box-shadow:0 14px 28px rgba(34,16,22,.3);}   /* the dropped-down details: burgundy with white writing */
.pcard-desc{margin:0;padding:18px 22px 20px;font-size:14px;line-height:1.55;font-weight:500;color:#fff;}
.js .pcard.is-open .pillar-more{grid-template-rows:1fr;}
.js .pcard:focus-within .pillar-more{grid-template-rows:1fr;}
@media (hover:hover){
  .js .pcard:hover .pillar-more{grid-template-rows:1fr;}
  .pcard:hover .pcard-media::after{background:rgba(48,3,16,.14);}
  .pcard:hover h3{transform:translateX(3px);}
}
.pcard:has(.stretch:focus-visible){outline:2px solid var(--focus);outline-offset:3px;}

/* Tablet and phone: one large item at a time on a swipe rail, the next one peeking in from the right */
@media (max-width:899px){
  .vshow{padding:36px 0 40px;}
  .vshow-inner{padding:0;}
  .show-row{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 24px 26px;scroll-padding-left:24px;
  }
  .show-row::-webkit-scrollbar{display:none;}
  .show-row > li{flex:0 0 min(80%,440px);scroll-snap-align:start;}
  .pcard .pillar-more{position:static;}        /* touch: the first tap opens the details in the card, the next follows the link */
  .pcard .pillar-more > div{border:0;box-shadow:none;}
}
@media (max-width:639px){
  .screen-three{--s3-above:64px;}
  .screen-three .wrap{padding:0 16px;}
  .s3-head{font-size:clamp(44px,15vw,72px);}
  .s3-head h2{white-space:normal;}
  .s3-head h2 span{display:block;}
  .show-row > li{flex-basis:84%;}
}

/* ---------------------------------------------------------- COLLABORATIONS */
/* Sits on the textured paper (the .paper surface), under the shadows of the two layers around it. */
.partners{position:relative;z-index:1;padding:clamp(56px,5.6vw,80px) 0;}
.partners h2{margin:0 0 clamp(28px,3vw,40px);text-align:center;color:var(--muted);font-size:11px;letter-spacing:.28em;text-indent:.28em;}
.partners-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);max-width:1096px;margin:0 auto;}
.partner{display:flex;flex-direction:column;align-items:center;gap:18px;padding:clamp(26px,2.6vw,38px) 20px 24px;background:#fcfaf8;border:1px solid rgba(34,16,22,.08);border-radius:4px;text-align:center;}
.partners{--logo-h:clamp(84px,7.4vw,104px);}
.partner-logo{display:flex;align-items:center;justify-content:center;width:100%;height:var(--logo-h);}
.partner-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--logo-h);object-fit:contain;}
.partner-name{font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.4;color:rgba(34,16,22,.72);}
/* Phones: a swipe rail with a peek of the next tile, snapping tile by tile */
@media (max-width:759px){
  .partners{padding:52px 0;}
  .partners > .wrap{padding:0;}
  .partners h2{padding:0 16px;}
  .partners-row{
    display:flex;gap:14px;max-width:none;margin:0;padding:6px 16px 10px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:16px;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .partners-row::-webkit-scrollbar{display:none;}
  .partner{flex:0 0 62vw;max-width:260px;scroll-snap-align:start;}
  .partners{--logo-h:100px;}
}

/* --------------------------------------------------------- WORK WITH */
.workwith{
  position:relative;z-index:2;background:var(--black);color:#fff;
}
.workwith > .wrap{padding-top:clamp(48px,6vw,76px);padding-bottom:clamp(48px,6vw,76px);text-align:center;}
.workwith h2{text-indent:.18em;}   /* offsets the trailing letter-spacing so the label is truly centred */
.ww-line{margin:14px auto 0;max-width:30ch;text-wrap:balance;font-size:clamp(22px,2.9vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.16;color:#fff;}
@media (max-width:759px){.workwith .wrap{padding-left:24px;padding-right:24px;padding-top:58px;padding-bottom:58px;}}   /* phones: a little taller */

/* Full-width white bar attached to the black section. The whole bar is the control. */
.closing{position:relative;z-index:2;}
.cc-bar{
  display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:56px;padding:0 24px;
  border:0;border-radius:0;background:#fff;color:var(--ink);cursor:pointer;
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  transition:background-color .2s,color .2s;
}
/* the hover tint is for mice only: on a touch screen a tap would leave it stuck on, turning the white strip pink */
@media (hover:hover){.cc-bar:hover{background:var(--paper-dim);color:var(--burgundy);}}
.cc-bar:focus-visible{outline:3px solid var(--burgundy);outline-offset:-6px;}
/* plus becomes minus while the panel is open */
.ww-ind{position:relative;display:inline-block;width:12px;height:12px;transition:transform .25s var(--ease-out);}
.ww-ind::before,.ww-ind::after{content:"";position:absolute;left:0;top:50%;width:12px;height:2px;margin-top:-1px;background:currentColor;transition:transform .3s var(--ease-out);}
.ww-ind::after{transform:rotate(90deg);}
@media (hover:hover){.cc-bar:hover .ww-ind{transform:scale(1.18);}}
.cc-bar[aria-expanded="true"] .ww-ind::after{transform:rotate(0);}

/* The pale contact section: collapsed until asked for, then it becomes part of the page flow */
.contact{display:grid;grid-template-rows:1fr;background:var(--paper-dim);color:var(--ink);}
.js .contact{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s;}
.js .contact.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .22s cubic-bezier(.2,.8,.2,1),visibility 0s;}
.contact-clip{min-height:0;overflow:hidden;}
/* Arranged as the Atlas footer is: one product lockup, the social links as a flowing row with the email, then the notice.
   Phone: stacked, no small headings. From 640px: three columns (4 / 3 / 5), the headings appear, the links form two columns. */
.nd-footer-inner{
  max-width:1152px;margin:0 auto;padding:24px 24px 24px;
  display:flex;flex-direction:column;min-height:var(--fill,0px);
}
.nd-footer-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;margin:auto 0;}
.nd-footer-product{border-left:2px solid var(--burgundy);padding-left:14px;}
.nd-footer-name{font-size:18px;font-weight:800;line-height:1;letter-spacing:-.01em;}
.nd-footer-sub{margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted);}
.nd-footer-atlas{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy);text-decoration:none;
  transition:color .15s;
}
.nd-footer-atlas:hover{color:var(--ink);}
.nd-footer-label{display:none;}
.nd-footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;}
.nd-footer-links a{font-size:12px;color:var(--ink);text-decoration:none;text-underline-offset:4px;}
.nd-footer-links a:hover,.nd-footer-mail:hover{color:var(--burgundy);text-decoration:underline;}
.nd-footer-links .nd-footer-mail{color:var(--muted);}
.nd-footer-important p:last-child{font-size:11px;line-height:1.625;color:rgba(34,16,22,.7);}
.nd-footer-important strong{color:var(--burgundy);font-weight:600;}
.nd-footer-bottom{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font-size:10px;color:var(--muted);}
.nd-footer-bottom a{color:inherit;text-decoration:none;transition:color .15s;}
.nd-footer-bottom a:hover{color:var(--burgundy);}
@media (min-width:640px){
  .nd-footer-inner{padding:32px 40px 24px;}
  .nd-footer-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;}
  .nd-footer-product{grid-column:span 4;}
  .nd-footer-follow{grid-column:span 3;}
  .nd-footer-important{grid-column:span 5;}
  .nd-footer-label{display:block;}
  .nd-footer-follow .nd-footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin-top:10px;}
  .nd-footer-links .nd-footer-mail{grid-column:1 / -1;margin-top:6px;}
  .nd-footer-important p:last-child{margin-top:10px;font-size:12px;}
}

/* ------------------------------------------------------------- MARQUEE */
/* Last element on the page. In normal flow, never fixed. */
.marquee{
  position:relative;overflow:hidden;background:var(--burgundy);color:#fff;
  padding:16px 0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(255,255,255,.1);
  max-height:140px;
}
/* While the contact section is open the language strip drops away below it, so nothing but the contact view is on screen */
.js .marquee{transition:max-height .2s cubic-bezier(.2,.8,.2,1),padding .2s cubic-bezier(.2,.8,.2,1),opacity .14s linear,border-width .2s;}
html.contact-open .marquee{max-height:0;padding-top:0;padding-bottom:0;opacity:0;border-top-width:0;}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee var(--marquee-dur,80s) linear infinite;
  will-change:transform;
}
.marquee-set{display:flex;flex:none;}
.marquee-set li{display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap;font-size:15px;font-weight:700;line-height:1.5;letter-spacing:-.01em;}
.marquee-set li::after{
  content:"";align-self:center;width:4px;height:4px;margin:0 22px;border-radius:50%;background:rgba(255,255,255,.55);
}
.marquee-set small{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);}
@keyframes marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@media (hover:hover) and (pointer:fine){.marquee:hover .marquee-track{animation-play-state:paused;}}
.marquee.is-offscreen .marquee-track{animation-play-state:paused;}

/* --------------------------------------------------- FIXED CONTROLS (as in Atlas) */
.to-top{
  position:fixed;z-index:40;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--burgundy);color:#fff;cursor:pointer;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s,transform .3s,background-color .3s;
}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{background:var(--burgundy-bright);}
.to-top:focus-visible{outline-color:#fff;box-shadow:0 0 0 2px var(--burgundy),0 0 0 4px #fff;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .marquee-track{animation:none!important;will-change:auto;}
  .to-top{transition:none!important;}
  .marquee{overflow-x:auto;scrollbar-width:none;}
  .marquee::-webkit-scrollbar{display:none;}
  .px-img{will-change:auto;}
}