:root {
  /* Layer A — palette (hex only here) */
  --ink-900: #15100F;   /* warm near-black, cinematic base */
  --ink-850: #1a1512;   /* warm graphite — matches the Oferta wireframe backdrop */
  --ink-800: #1e1815;
  --ink-700: #2a2320;
  --white:   #FBFAF2;   /* frost white — warm ivory used as the base "white" everywhere */
  --off:     #FBF6F1;   /* warm pastel cream */
  --sand:    #F3EBE2;   /* soft pastel sand */
  --gray-500:#7a6f68;   /* warm gray (text on light) */
  --gray-400:#b8aca2;   /* warm muted (text on dark) */
  --gray-200:#ece3da;   /* warm border */
  --coral:   #E0785A;   /* softened terracotta accent (from logo) */
  --coral-600:#C75E3F;
  --brown:   #8B5E3C;
  --rust:    #A6552E;
  --umber:   #5A3B29;

  /* Layer B — semantic */
  --bg-dark: var(--ink-900);
  --bg-light: var(--white);
  --bg-muted: var(--off);
  --text-on-dark: var(--white);
  --text-on-light: var(--ink-900);
  --text-muted-dark: var(--gray-400);
  --text-muted-light: var(--gray-500);
  --accent: var(--coral);
  --accent-strong: var(--coral-600);
  --border-light: var(--gray-200);

  /* type scale (fluid) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.33rem, 1.2rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.77rem, 1.5rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.37rem, 1.9rem + 2.2vw, 3.6rem);
  --step-4:  clamp(3.1rem, 2.2rem + 4.2vw, 5.5rem);

  /* spacing + radii */
  --space-s: 0.75rem; --space-m: 1.5rem; --space-l: 3rem; --space-xl: 6rem;
  --radius: 14px; --radius-lg: 22px;
  --container: 1200px;
  /* Manrope (self-hosted, weights 200/300/400) leads; system sans is the fallback.
     Weight roles: 200 = hero/accent, 300 = section headings/secondary, 400 = body/UI. */
  --font-sans: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Self-hosted Manrope — only the three weights the brand system uses (woff2). */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200;font-display:swap;
  src:url("../fonts/Manrope-Thin.woff2?v=3dfd78f8") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/Manrope-Light.woff2?v=72009cf8") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/Manrope-Regular.woff2?v=1f4c2cd5") format("woff2")}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overscroll-behavior:none}
body{font-family:var(--font-sans);font-size:var(--step-0);line-height:1.6;font-weight:400;
  color:var(--text-on-light);background:var(--bg-light);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Section headings — Manrope Light. Hero-level headings are dropped to Thin below. */
h1,h2,h3,h4{line-height:1.08;letter-spacing:-0.02em;font-weight:300}
.container{width:min(var(--container),92vw);margin-inline:auto}
.section{padding-block:var(--space-xl)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.5rem;
  border-radius:100px;font-weight:400;font-size:var(--step-0);cursor:pointer;
  transition:transform .15s ease, background .15s ease;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--accent);color:var(--white)}
.btn--primary:hover{background:var(--coral-600)}
.btn--ghost{background:transparent;border-color:currentColor}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:var(--step--1);
  color:var(--accent);font-weight:400}
[hidden]{display:none!important}
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;background:transparent;color:var(--white);
  transition:background .3s ease, color .3s ease, border-color .3s ease,
    transform .45s cubic-bezier(.22,.8,.24,1), opacity .35s ease}
.site-header.is-solid{background:var(--white);color:var(--text-on-light);
  border-bottom:1px solid var(--border-light);backdrop-filter:saturate(1.15) blur(6px)}
/* slide up out of view while the cinematic's bright final scene wipes in */
.site-header.is-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
.site-header .container{width:100%;max-width:none;padding-inline:6vw}   /* align header edges with the cinematic (right:6vw) */
.site-header__row{display:flex;align-items:center;justify-content:space-between;padding-block:1rem}
.brand{display:flex;align-items:center;gap:.55rem;color:inherit;font-weight:400;letter-spacing:-0.01em}
.brand__mark{width:28px;height:28px;filter:brightness(0) invert(1)}
.site-header.is-solid .brand__mark{filter:none}
.brand__word{font-size:1.05rem}
.site-nav{display:flex;align-items:center;gap:1.6rem}
.site-nav__link{color:inherit;font-weight:400;font-size:var(--step--1);opacity:.85;letter-spacing:.01em;transition:opacity .15s ease}
.site-nav__link:hover{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
/* header CTA: dark + compact (loud coral CTAs stay in hero/sections) */
.site-nav .btn--primary{padding:.5rem 1.1rem;font-size:var(--step--1);background:var(--ink-900);color:var(--white);border:1px solid transparent}
.site-nav .btn--primary:hover{background:var(--ink-700);transform:translateY(-1px)}
@media(min-width:881px){
  .site-header:not(.is-solid) .site-nav .btn--primary{background:transparent;border-color:currentColor;color:inherit}
  .site-header:not(.is-solid) .site-nav .btn--primary:hover{background:rgba(255,255,255,.14)}
}
.site-nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;color:inherit;cursor:pointer;padding:6px}
.site-nav__toggle span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease, opacity .2s ease}
.site-header.is-nav-open .site-nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.is-nav-open .site-nav__toggle span:nth-child(2){opacity:0}
.site-header.is-nav-open .site-nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-header__left{display:flex;align-items:center;gap:1.25rem}
.langswitch{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--step--1);font-weight:400}
.langswitch button{background:none;border:0;color:inherit;cursor:pointer;padding:.15rem .1rem;opacity:.5;font-weight:400;letter-spacing:.02em}
.langswitch button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.langswitch__sep{opacity:.35}
.site-footer{background:transparent;color:var(--white);padding-block:var(--space-l);position:relative;z-index:1}
.site-footer__row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.site-footer__links{display:flex;gap:1.5rem}
.site-footer__legal{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-start;justify-content:space-between}
.site-footer__tagline{color:var(--gray-400);font-size:var(--step--1);line-height:1.7;max-width:46ch}
.site-footer__company{font-style:normal;color:var(--gray-400);font-size:var(--step--1);line-height:1.7;text-align:right}
/* The studio: frost-white backdrop (var(--white)) with a generated schematic
   "skeletons of websites" image behind the copy (assets/img/studio-skeleton.webp).
   A radial mask keeps the area behind the heading clean so it never competes
   with the text. */
.manifesto{background:var(--white);position:relative;overflow:hidden;padding-block:0}
.manifesto__reveal{position:relative;min-height:100svh;display:grid;align-items:center}
/* light wireframe backdrop — self-composed (skeletons framed to the edges,
   clean centre for the copy), so it covers full-bleed with no mask. */
.manifesto__reveal::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/studio-skeleton.webp?v=845d7742") center/cover no-repeat;
  opacity:.75}
.manifesto__inner{position:relative;z-index:1;max-width:62ch;margin-inline:auto;text-align:center;padding-block:var(--space-xl)}
/* The studio "unfolds": it starts collapsed to zero height (the next block sits
   in its place), then on scroll its row grows to full height, pushing the block
   below down — the top & bottom pixel seams reveal as it opens. JS arms it, so
   without JS (or with reduced-motion) it's simply full height. */
@media (prefers-reduced-motion: no-preference){
  /* fade in only the block's content — the skeleton bg + copy. The pixel seams
     (top divider, proof overlap) stay put and never fade. */
  .manifesto.is-armed .manifesto__reveal::before{opacity:0}
  .manifesto.is-armed .manifesto__inner{opacity:0;transform:translateY(20px)}
  .manifesto.is-armed.is-in .manifesto__reveal::before{opacity:.75;transition:opacity .85s ease}
  .manifesto.is-armed.is-in .manifesto__inner{opacity:1;transform:none;
    transition:opacity .85s ease, transform .9s cubic-bezier(.22,.8,.24,1)}
}
.manifesto .eyebrow{margin-bottom:.6rem}
.manifesto h2{font-size:var(--step-3);margin:0 auto 1.4rem;max-width:22ch;font-weight:200}   /* hero → Thin */
.lead{font-size:var(--step-1);color:var(--text-muted-light);max-width:52ch;margin-bottom:2rem}
.manifesto .lead{margin-inline:auto}
.proof{background:var(--sand);position:relative}   /* warmer band so the pixel transitions read */
.proof h2{font-size:var(--step-3);margin-block:.5rem 1rem}
.proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.proof__card{background:var(--white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:2rem;transition:transform .2s ease, box-shadow .2s ease;display:flex;flex-direction:column}
.proof__card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(90,59,41,.10)}
.proof__ico{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:14px;background:var(--sand);color:var(--accent);margin-bottom:1.1rem}
.proof__ico svg{width:24px;height:24px}
/* the big 12+ makes card 1's heading taller; give every card's heading the same
   min-height and bottom-align the text so all three headings line up */
.proof__card h3{font-size:var(--step-1);margin-bottom:.6rem;min-height:1.7em;
  display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 .35rem}
.proof__big{color:var(--accent);font-size:1.7em;font-weight:400;letter-spacing:-.01em;line-height:1}
.proof__card p{color:var(--text-muted-light)}
.proof__note{align-self:flex-start;margin-top:auto;padding:.4rem .85rem;border-radius:100px;
  background:var(--sand);color:var(--accent-strong);font-size:var(--step--1);font-weight:400;letter-spacing:.01em}
.proof__card p{margin-bottom:1.2rem}   /* guaranteed gap above the bottom-pinned badge */
@media(max-width:820px){.proof__grid{grid-template-columns:1fr}}
/* pixel-dither section transitions (dense edge blends into the target colour) */
.px-fade{position:absolute;left:0;right:0;height:40px;z-index:2;pointer-events:none;
  -webkit-mask:url("../img/px-fade.svg?v=725c4013") repeat-x bottom/120px 40px;
          mask:url("../img/px-fade.svg?v=725c4013") repeat-x bottom/120px 40px}
.px-fade--bottom{bottom:-1px}
.px-fade--top{top:-1px;transform:scaleY(-1)}
/* sits ABOVE its block, overlapping the previous one (used on Why-trust-us to
   own the studio→proof seam so it rides with proof, never lagging the animation) */
.px-fade--overlap{bottom:100%;top:auto}
.px-fade--sand{background:var(--sand)}
.px-fade--frost{background:var(--white)}
.px-fade--ink{background:var(--ink-900)}
.process{position:relative}
.process h2{font-size:var(--step-3);margin-block:.5rem 2.5rem}
/* scroll reveal: the block unfolds as it rises out from under the Pricing block —
   heading first, then the four steps spread up in a stagger */
@media (prefers-reduced-motion: no-preference){
  .process.is-reveal .eyebrow,
  .process.is-reveal h2{opacity:0;transform:translateY(30px)}
  .process.is-reveal .process__steps li{opacity:0;transform:translateY(52px) scale(.97)}
  .process.is-reveal.is-in .eyebrow,
  .process.is-reveal.is-in h2,
  .process.is-reveal.is-in .process__steps li{opacity:1;transform:none;
    transition:opacity .6s ease, transform .8s cubic-bezier(.2,.85,.25,1)}
  .process.is-reveal.is-in h2{transition-delay:.08s}
  .process.is-reveal.is-in .process__steps li:nth-child(1){transition-delay:.18s}
  .process.is-reveal.is-in .process__steps li:nth-child(2){transition-delay:.28s}
  .process.is-reveal.is-in .process__steps li:nth-child(3){transition-delay:.38s}
  .process.is-reveal.is-in .process__steps li:nth-child(4){transition-delay:.48s}
  .process.is-reveal.is-in .process__steps li:nth-child(5){transition-delay:.58s}
  .process.is-reveal.is-in .process__steps li:nth-child(6){transition-delay:.68s}
}
/* 5 steps as 3 + 2, left-aligned: a 6-col grid where each card spans 2 cols
   (→ 3 per row); steps 4-5 flow to the left of row 2. */
.process__steps{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem;counter-reset:s}
.process__steps li{border-top:2px solid var(--accent);padding-top:1rem;grid-column:span 2}
.process__n{font-size:var(--step--1);color:var(--accent);font-weight:400;letter-spacing:.1em}
.process__steps h3{font-size:var(--step-1);margin-block:.4rem}
.process__steps p{color:var(--text-muted-light)}
/* 6th cell is a coral CTA card (→ brief form), turning the grid into a clean 3 + 3 */
.process__steps li.process__cta{border-top:0;padding-top:0}
/* Brief CTA — a plain coral card that rocks gently now and then, like a little
   boat, to draw the eye toward the brief. */
.process__cta-link{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:2.2rem;height:100%;
  background:var(--accent);color:var(--white);border-radius:var(--radius-lg);padding:1.6rem 1.5rem;
  transform-origin:50% 100%;transition:background .15s ease, transform .15s ease;
  animation:ctaRock 6s ease-in-out infinite}
.process__cta-link:hover{background:var(--coral-600);transform:translateY(-3px);animation-play-state:paused}
.process__cta-text{font-size:var(--step-1);font-weight:300;line-height:1.18}
.process__cta-go{font-weight:400;display:inline-flex;align-items:center;gap:.45rem}
.process__cta-go::after{content:"→"}
/* a short side-to-side rock, then a long rest, repeating */
@keyframes ctaRock{
  0%,68%,100%{rotate:0deg}
  74%{rotate:-2deg}
  80%{rotate:1.6deg}
  86%{rotate:-1deg}
  92%{rotate:.5deg}
}

/* Rotating conic-gradient border on the Cinematic package card. ::before is a
   full-size spinning gradient; ::after is an inset solid fill punching out the
   centre, leaving a ~2.5px animated gradient edge. Transform animation → runs
   even where @property is unsupported. */
@keyframes ctaBorderSpin{to{rotate:360deg}}
.pkg--flag::before{content:"";position:absolute;z-index:0;top:50%;left:50%;
  width:220%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:conic-gradient(from 0deg,
    var(--accent), var(--off), var(--coral-600), var(--brown), var(--accent));
  animation:ctaBorderSpin 5s linear infinite}
.pkg--flag::after{content:"";position:absolute;z-index:0;inset:2.5px;pointer-events:none;
  border-radius:calc(var(--radius-lg) - 2.5px);background:var(--cta-fill)}
.pkg--flag>*{position:relative;z-index:1}   /* keep copy above the ring */
@media (prefers-reduced-motion: reduce){
  .pkg--flag::before{animation:none}
  .process__cta-link{animation:none}
}
@media(max-width:820px){.process__steps{grid-template-columns:repeat(2,1fr)}
  .process__steps li,.process__steps li:nth-child(4),.process__steps li:nth-child(5){grid-column:auto}}
@media(max-width:480px){.process__steps{grid-template-columns:1fr}}
.price{background:var(--ink-850);color:var(--white);position:relative;overflow:hidden;
  min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.price>*{position:relative;z-index:1}
/* dark wireframe backdrop — twin of the Studio one, framed to the edges */
.price::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/studio-skeleton-dark.webp?v=ca0de655") center/cover no-repeat;opacity:.85}
.price::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at 42% 40%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(55% 75% at 60% 60%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(45% 65% at 52% 50%, rgba(0,0,0,.5), transparent 62%),
    conic-gradient(from 210deg at 50% 50%, rgba(255,255,255,.04), transparent 25%, rgba(0,0,0,.25) 55%, transparent 80%);
  filter:blur(50px);
  /* keep the animated glow in the centre so the top/bottom edges stay clean for the pixel-art seams */
  -webkit-mask:radial-gradient(60% 38% at 50% 50%, rgba(0,0,0,1) 32%, transparent 84%);
          mask:radial-gradient(60% 38% at 50% 50%, rgba(0,0,0,1) 32%, transparent 84%);
  animation:materia 22s ease-in-out infinite alternate}
@keyframes materia{
  0%{transform:translate3d(-3%,-1%,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(3%,2%,0) scale(1.14) rotate(5deg)}
  100%{transform:translate3d(-1%,1%,0) scale(1.06) rotate(-4deg)}}
.price__anchor{text-align:center;max-width:46ch;margin-inline:auto;margin-bottom:4rem}
.price__anchor h2{font-size:var(--step-2)}
.price__big{color:var(--accent);font-weight:200}   /* big price accent → Thin */
.price .lead{color:var(--text-muted-dark);margin-inline:auto}
.price__packages-title{text-align:center;font-size:var(--step-2);margin-bottom:2rem}
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pkg{background:var(--ink-800);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
  padding:2rem;display:flex;flex-direction:column;gap:.8rem}
.pkg--flag{position:relative;overflow:hidden;border:0;--cta-fill:var(--ink-800)}
.pkg h4{font-size:var(--step-1)}
.pkg__price{font-size:var(--step-2);color:var(--accent);font-weight:200}   /* price accent → Thin */
.pkg p:not(.pkg__price){color:var(--text-muted-dark);margin-bottom:1.6rem}
.pkg .btn{margin-top:auto;justify-content:center}   /* pin CTA to the card bottom */
@media(max-width:820px){.packages{grid-template-columns:1fr}}
.projects{position:relative}
.projects h2{font-size:var(--step-3);margin-block:.5rem 2.5rem}
.projects__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
/* Each project sits in a browser-window mockup on a raised panel, so it reads
   as a floating card against the frost-white section (no blending). */
.pcard{border-radius:var(--radius-lg);overflow:hidden;background:var(--white);
  border:1px solid var(--border-light);box-shadow:0 12px 32px rgba(90,59,41,.09);
  transition:transform .2s ease, box-shadow .2s ease}
.pcard:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(90,59,41,.15)}
.pcard__browser{background:var(--sand)}
.pcard__bar{display:flex;align-items:center;gap:6px;height:34px;padding-inline:12px;
  background:var(--sand);border-bottom:1px solid var(--border-light)}
.pcard__bar i{width:9px;height:9px;border-radius:50%;background:var(--gray-400);opacity:.75;flex:none}
/* fake address field with the real domain (plain text, not a link) */
.pcard__url{margin-left:8px;flex:1;min-width:0;height:20px;line-height:20px;padding:0 10px;
  border-radius:10px;background:var(--white);border:1px solid var(--border-light);
  color:var(--gray-500);font-size:11px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard__media{display:block;aspect-ratio:16/10;background:var(--bg-muted);overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:cover;object-position:top}
.pcard__meta{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  padding:.95rem 1.15rem;background:var(--white);border-top:1px solid var(--border-light)}
.pcard__meta strong{font-weight:400}
.pcard__meta em{color:var(--accent);font-style:normal;font-size:var(--step--1)}
@media(max-width:820px){.projects__grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.projects__grid{grid-template-columns:1fr}}
.faq h2{font-size:var(--step-3);margin-bottom:2rem}
.faq details{border-top:1px solid var(--border-light);padding:1.2rem 0}
.faq summary{font-size:var(--step-1);font-weight:400;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--text-muted-light);margin-top:.8rem;max-width:60ch}
/* Finale: CTA + footer over one shared ember loop. The near-black footage is
   screen-blended so only the warm glow shows (and any loop seam disappears). */
.finale{position:relative;background:var(--ink-900);color:var(--white);overflow:hidden}
.finale__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:.6;mix-blend-mode:screen;pointer-events:none}
.cta{background:transparent;color:var(--white);text-align:center;position:relative;z-index:1}
/* soft dark scrim over the brightest centre so the CTA copy stays legible */
.cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 70% at 50% 50%, rgba(21,16,15,.55), transparent 76%)}
.cta__inner{position:relative;z-index:1}
.cta__phone{display:inline-block;margin-top:1.6rem;color:var(--white);font-weight:400;
  font-size:var(--step-1);letter-spacing:.01em;opacity:.92}
.cta__phone:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
.cta h2{font-size:var(--step-4);max-width:18ch;margin:0 auto 2rem;font-weight:200}   /* finale hero → Thin */
.cta__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.legal__back{color:var(--accent);font-weight:400;display:inline-block;margin-bottom:1.5rem}
.legal h1{font-size:var(--step-3);margin-bottom:.5rem}
.legal__updated{color:var(--text-muted-light);margin-bottom:2rem}
.legal__body{max-width:70ch}.legal__body h2{font-size:var(--step-1);margin-block:1.5rem .5rem}
.legal__body p{margin-bottom:1rem;color:var(--text-muted-light)}
.legal__body ul,.legal__body ol{padding-left:1.4em;margin-bottom:1rem}
.legal__body li{margin-bottom:.4rem;color:var(--text-muted-light)}
@media(max-width:640px){
  .site-footer__row{flex-direction:column;justify-content:center;text-align:center}
  .site-footer__links{justify-content:center}
  .site-footer__legal{flex-direction:column;align-items:center;text-align:center}
  .site-footer__company{text-align:center}
  .site-footer__tagline{max-width:none}
}
.section{scroll-margin-top:84px}
@media(max-width:880px){
  .site-nav__toggle{display:flex}
  /* while the menu is open the header bar is opaque, so the panel reads as
     sliding out from underneath it */
  .site-header.is-nav-open{background:var(--white);color:var(--text-on-light);border-bottom:1px solid var(--border-light)}
  .site-header.is-nav-open .brand__mark{filter:none}
  .site-nav{position:fixed;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);color:var(--text-on-light);box-shadow:0 16px 30px rgba(60,40,30,.14);
    padding-inline:6vw;padding-block:0;max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .45s cubic-bezier(.22,.8,.24,1), padding-block .45s cubic-bezier(.22,.8,.24,1), opacity .3s ease}
  .site-header.is-nav-open .site-nav{max-height:380px;padding-block:.4rem 1.5rem;opacity:1;pointer-events:auto}
  .site-nav__link{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding:.85rem 0;font-size:var(--step-0);opacity:1}
  .site-nav__link::after{content:"";flex:none;width:56px;height:1px;background:var(--gray-400)}
  .site-nav .btn--primary{margin-top:1rem;justify-content:center}
}
/* cookie consent bar — slides up from the bottom once the opening film is over */
.cookiebar{position:fixed;left:50%;bottom:14px;transform:translate(-50%,140%);z-index:80;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;
  max-width:min(680px,calc(100vw - 24px));padding:.8rem 1.1rem;border-radius:14px;
  background:rgba(21,16,15,.94);color:var(--white);border:1px solid rgba(224,120,90,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:var(--step--1);
  transition:transform .5s cubic-bezier(.22,.8,.24,1)}
.cookiebar.is-on{transform:translate(-50%,0)}
.cookiebar p{margin:0;color:var(--gray-400)}
.cookiebar a{color:var(--accent)}
.cookiebar__actions{display:flex;gap:.6rem}
.cookiebar__btn{appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;border-radius:999px;
  padding:.5rem 1.1rem;border:1px solid var(--accent);background:var(--accent);color:var(--white)}
.cookiebar__btn:hover{background:var(--coral-600)}
.cookiebar__btn--ghost{background:transparent;color:var(--accent)}
.cookiebar__btn--ghost:hover{background:rgba(224,120,90,.12)}