/* Etpaar Creative — shared site styles. See DESIGN.md / tokens.css */
:root{
    --paper:#FBF8F3;--paper-2:#EFEAE0;--warm-gray:#8C8680;--soft-ink:#3A3530;--ink:#14121F;
    --cobalt:#123A9E;--plum:#BC5E86;--vermilion:#EF4E14;--gold:#E6A519;--sage:#77AE63;--aubergine:#451A6B;
    --zone:#123A9E;--zone-rgb:18,58,158;--cursor:#123A9E;
    --ff-display:'Fraunces',Georgia,serif;--ff-body:'EB Garamond',Georgia,serif;--ff-mono:'Spline Sans Mono',ui-monospace,monospace;--ff-heb:'Noto Rashi Hebrew',serif;
    --e-expo:cubic-bezier(0.16,1,0.3,1);--e-quint:cubic-bezier(0.22,1,0.36,1);--e-quart:cubic-bezier(0.25,1,0.5,1);
    --gutter:clamp(24px,5vw,64px);--shell:1340px;--fx-d:'SOFT' 30,'WONK' 1;--fx-i:'SOFT' 60,'WONK' 1;
  }
  /* --dev is the hero plate's developing scalar (see .hero-art). Registered so
     it can transition; its initial value is fully developed, so a browser
     without @property simply shows the finished print. */
  @property --dev{syntax:'<percentage>';inherits:true;initial-value:124%;}
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper);color:var(--ink);font-family:var(--ff-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;}
  body.fine{cursor:none;}
  ::selection{background:rgba(239,78,20,0.18);}
  a{color:inherit;} img{max-width:100%;display:block;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  /* keyboard focus, visible everywhere: vermilion on paper, gold on the
     dark side of the ramp (both clear ≥3:1 against their grounds) */
  :focus-visible{outline:2px solid var(--vermilion);outline-offset:3px;}
  .site-footer :focus-visible,.manifesto :focus-visible,.closing :focus-visible{outline-color:var(--gold);}

  .ambient{position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse 70% 55% at 8% 10%,rgba(18,58,158,0.06),transparent 60%),radial-gradient(ellipse 55% 60% at 92% 88%,rgba(230,165,25,0.06),transparent 60%),radial-gradient(ellipse 80% 70% at 30% 45%,rgba(204,164,110,0.06),transparent 70%),#FAF5EC;}
  .ambient::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(60,38,12,0.05) 0.5px,transparent 1.1px);background-size:5px 5px;mix-blend-mode:multiply;opacity:0.5;}
  .vignette{position:fixed;inset:0;z-index:-2;pointer-events:none;box-shadow:inset 0 0 320px rgba(120,78,28,0.08),inset 0 0 90px rgba(120,78,28,0.04);}
  .veil{position:fixed;inset:0;z-index:400;background:#FBF8F3;pointer-events:none;opacity:0;visibility:hidden;}
  html.js-ready body:not(.calm) .veil{opacity:1;visibility:visible;animation:veil 1.4s var(--e-quart) forwards;}
  @keyframes veil{to{opacity:0;visibility:hidden;}}

  /* bs"d top-right, bolder */
  /* floating corner bs"d retired — it collided with the nav clock; bs"d now lives prominently in the footer */
  .bsd{display:none;}

  /* cursor */
  .dot,.ring,.bloom{position:fixed;top:0;left:0;pointer-events:none;border-radius:50%;z-index:300;will-change:transform;display:none;}
  body.fine .dot,body.fine .ring,body.fine .bloom{display:block;}
  .dot{width:7px;height:7px;background:var(--cursor);box-shadow:0 0 0 1.5px rgba(255,255,255,.92),0 1px 5px rgba(20,18,31,.45);transition:width .3s var(--e-quint),height .3s var(--e-quint),background .45s var(--e-quart),box-shadow .45s var(--e-quart),opacity .4s var(--e-quart);}
  .ring{width:34px;height:34px;border:1.5px solid var(--cursor);box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 6px rgba(20,18,31,.22);transition:width .3s var(--e-quint),height .3s var(--e-quint),border-color .45s var(--e-quart),box-shadow .45s var(--e-quart),opacity .4s var(--e-quart);}
  body.hot .dot{width:10px;height:10px;} body.hot .ring{width:48px;height:48px;}
  /* The pointer wears the first E from the real Etpaar logo over work and
     calls to action. The full logo bitmap is used as a mask and positioned so
     only its first letter occupies the cursor box. */
  body.e-cursor .dot{width:40px;height:40px;border-radius:0;background:var(--cursor);
    -webkit-mask-image:url('../assets/etpaar-logo-v6.png');mask-image:url('../assets/etpaar-logo-v6.png');
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:228px 114px;mask-size:228px 114px;
    -webkit-mask-position:-1px -35px;mask-position:-1px -35px;
    filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 2px rgba(255,255,255,.75)) drop-shadow(0 3px 5px rgba(20,18,31,.38));}
  body.e-cursor .ring{opacity:0;}
  body.cursor-away .dot,body.cursor-away .ring{opacity:0;}
  .bloom{width:700px;height:700px;z-index:-1;filter:blur(60px);opacity:0;transition:opacity .8s var(--e-quart);background:radial-gradient(circle,rgba(var(--zone-rgb),0.22) 0%,rgba(var(--zone-rgb),0.08) 38%,transparent 70%);}
  body.has-bloom .bloom{opacity:1;}

  .mono{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--warm-gray);}
  .display{font-family:var(--ff-display);font-optical-sizing:auto;font-weight:400;font-variation-settings:var(--fx-d);letter-spacing:-0.025em;line-height:1.03;}
  .nl a{position:relative;text-decoration:none;color:var(--ink);}
  .nl a::after{content:'';position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e-expo);}
  .nl a:hover{color:var(--hc,var(--vermilion));} .nl a:hover::after{transform:scaleX(1);}

  /* ===== NAV — one bar, big at top, shrinks on scroll ===== */
  .nav{position:fixed;top:0;left:0;right:0;z-index:120;}
  .navbar{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1240px,calc(100% - 24px));
    display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:20px;
    margin-top:20px;padding:15px 28px;border-radius:22px;
    background:rgba(251,248,243,0.44);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);border:1px solid rgba(20,18,31,0.05);
    box-shadow:0 10px 30px -20px rgba(60,30,10,0.14);
    transition:margin-top .55s var(--e-expo),padding .55s var(--e-expo),width .55s var(--e-expo),border-radius .55s var(--e-expo),background .55s var(--e-quart),box-shadow .55s var(--e-expo);}
  body.nav-shrink .navbar{margin-top:9px;padding:8px 20px;width:min(1080px,calc(100% - 22px));border-radius:14px;background:rgba(251,248,243,0.8);box-shadow:0 13px 32px -18px rgba(60,30,10,0.26);}
  .navbar.glow{box-shadow:0 14px 34px -18px rgba(60,30,10,0.2), 0 3px 30px 1px rgba(var(--glow,18,58,158),0.2);}
  .navlogo-link{display:block;line-height:0;}
  .navlogo{height:52px;width:auto;display:block;transition:height .55s var(--e-expo);}
  body.nav-shrink .navlogo{height:27px;}
  .navbar .nl{display:flex;justify-self:center;gap:clamp(16px,2.4vw,32px);}
  .navbar .nl a{font-size:15px;letter-spacing:0.16em;text-transform:uppercase;padding:2px 0;transition:font-size .55s var(--e-expo);}
  body.nav-shrink .navbar .nl a{font-size:12px;}
  .navbar .b-meta{justify-self:end;white-space:nowrap;font-size:0.78rem;transition:font-size .55s var(--e-expo);}
  body.nav-shrink .navbar .b-meta{font-size:0.6875rem;}
  .bar-prog{position:absolute;inset:0;pointer-events:none;overflow:visible;}
  .bar-prog rect{fill:none;stroke:var(--zone);stroke-width:1.25;stroke-linecap:round;opacity:0.3;transition:stroke .5s var(--e-quart);}
  /* mobile hamburger */
  .navtoggle{display:none;width:40px;height:40px;border:none;background:transparent;cursor:pointer;position:relative;padding:0;}
  .navtoggle span{position:absolute;left:9px;right:9px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .45s var(--e-expo),opacity .3s var(--e-quart);}
  .navtoggle span:nth-child(1){top:14px;} .navtoggle span:nth-child(2){top:19.5px;} .navtoggle span:nth-child(3){top:25px;}
  body.nav-open .navtoggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
  body.nav-open .navtoggle span:nth-child(2){opacity:0;}
  body.nav-open .navtoggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
  @media(max-width:760px){.navbar .b-meta{display:none;}}
  /* below 800px the five uppercase links no longer fit beside the logo and
     the chizuk pill without wrapping — the hamburger takes over there */
  @media(max-width:800px){
    .navbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;}
    body.nav-shrink .navbar{padding:9px 16px;}
    .navtoggle{display:block;}
    /* justify-self:auto — the desktop bar's justify-self:center also aligns
       abspos boxes and shrink-wrapped this dropdown to ~140px */
    .navbar .nl{position:absolute;top:calc(100% + 10px);left:0;right:0;justify-self:auto;flex-direction:column;align-items:stretch;gap:0;
      background:rgba(251,248,243,0.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(20,18,31,0.06);border-radius:16px;padding:8px;
      box-shadow:0 22px 44px -18px rgba(60,30,10,0.32);
      opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
      transition:opacity .4s var(--e-expo),transform .4s var(--e-expo),visibility .4s linear;}
    body.nav-open .navbar .nl{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
    .navbar .nl a{font-size:15px !important;letter-spacing:0.14em;padding:14px 16px;border-radius:10px;text-align:center;}
    .navbar .nl a::after{display:none;}
    .navbar .nl a:not(:last-child){border-bottom:1px solid rgba(20,18,31,0.06);}
  }

  /* ===== the index: mega menu under the navbar ===== */
  .mega{position:absolute;top:calc(100% + 10px);left:0;right:0;
    background:rgba(251,248,243,0.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(20,18,31,0.07);border-radius:16px;
    box-shadow:0 30px 60px -24px rgba(60,30,10,0.35);
    padding:26px 28px 22px;
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
    transition:opacity .35s var(--e-quart),transform .45s var(--e-expo),visibility .35s linear;}
  body.mega-open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
  .mega-in{display:flex;gap:clamp(18px,2.5vw,36px);}
  .mcol{flex:1;min-width:0;transition:flex .6s var(--e-expo),opacity .4s var(--e-quart);}
  .mcol[data-col="work"]{flex:1.45;}
  .mega[data-focus] .mcol{opacity:0.38;}
  .mega[data-focus="work"] .mcol[data-col="work"]{flex:2.3;opacity:1;}
  .mega[data-focus="services"] .mcol[data-col="services"]{flex:1.9;opacity:1;}
  .mega[data-focus="studio"] .mcol[data-col="studio"]{flex:1.9;opacity:1;}
  .mega[data-focus="journal"] .mcol[data-col="journal"]{flex:1.9;opacity:1;}
  .mega[data-focus="contact"] .mcol[data-col="contact"]{flex:1.9;opacity:1;}
  .mcol h5{font-family:var(--ff-mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--mc,var(--ink));margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid rgba(20,18,31,0.1);
    transition:border-color .4s var(--e-quart);}
  .mega[data-focus="work"] .mcol[data-col="work"] h5,
  .mega[data-focus="services"] .mcol[data-col="services"] h5,
  .mega[data-focus="studio"] .mcol[data-col="studio"] h5,
  .mega[data-focus="journal"] .mcol[data-col="journal"] h5,
  .mega[data-focus="contact"] .mcol[data-col="contact"] h5{border-color:var(--mc);}
  .mcol a{display:block;text-decoration:none;color:var(--soft-ink);font-size:0.95rem;margin-bottom:8px;
    width:fit-content;transition:color .3s var(--e-quart),transform .3s var(--e-expo);}
  .mcol a:hover{color:var(--mc,var(--vermilion));transform:translateX(3px);}
  .mcol .msmall{font-size:0.88rem;color:var(--warm-gray);line-height:1.5;margin-bottom:10px;}
  .mthumbs{display:flex;gap:8px;margin-bottom:12px;}
  .mthumbs a{flex:1;overflow:hidden;border-radius:3px;margin:0;}
  .mthumbs img{width:100%;height:auto;object-fit:contain;filter:sepia(0.22) saturate(0.92) contrast(1.05);
    transition:transform .6s var(--e-expo);}
  .mthumbs a:hover img{transform:none;}
  @media(max-width:899px){.mega{display:none !important;}}

  /* ===== chizuk, prominent in the navbar (the clock stepped aside for it) ===== */
  .navbar .b-meta{display:none;}
  .czbtn{display:flex;align-items:center;gap:9px;justify-self:end;cursor:pointer;
    border:1px solid rgba(230,165,25,0.45);background:rgba(230,165,25,0.08);border-radius:999px;
    padding:9px 16px;transition:background .35s var(--e-quart),border-color .35s var(--e-quart),padding .55s var(--e-expo);}
  .czbtn:hover{border-color:var(--gold);background:rgba(230,165,25,0.16);}
  body.nav-shrink .czbtn{padding:6px 13px;}
  .czbtn .cz-s{color:var(--gold);font-size:14px;line-height:1;transition:transform .6s var(--e-expo);}
  .czbtn:hover .cz-s{transform:rotate(135deg);}
  .czbtn .czlabel{font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--soft-ink);white-space:nowrap;}
  @media(max-width:760px){.czbtn{border:none;background:transparent;padding:0 4px;} .czbtn .czlabel{display:none;}}
  /* ===== the chizuk hangs =====
     The card is suspended from the ✦ on a gold thread and swings about a pivot
     just above its top edge. site.js measures where the star actually is and
     writes --pin-x (the thread's x) and --sw (the live swing angle) — so this is
     a real damped pendulum, not a keyframe. Opening drops it, "Another" knocks
     it, and scrolling sets it moving. With motion off it simply hangs still. */
  .czcard{position:absolute;top:calc(100% + 18px);right:0;width:min(430px,90vw);
    background:rgba(251,248,243,0.98);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(20,18,31,0.08);border-radius:16px;
    box-shadow:0 30px 60px -24px rgba(60,30,10,0.35);
    padding:24px 26px;text-align:center;
    transform-origin:var(--pin-x,calc(100% - 40px)) -18px;
    transform:rotate(var(--sw,0deg));
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--e-quart),visibility .3s linear;}
  body.cz-open .czcard{opacity:1;visibility:visible;pointer-events:auto;}
  /* the thread, and the bead where it knots into the card */
  .czcard::before{content:'';position:absolute;left:var(--pin-x,calc(100% - 40px));top:-18px;
    width:1px;height:18px;background:linear-gradient(180deg,rgba(230,165,25,0.15),var(--gold));}
  .czcard::after{content:'';position:absolute;left:var(--pin-x,calc(100% - 40px));top:-3px;
    width:6px;height:6px;margin-left:-2.5px;border-radius:50%;background:var(--gold);
    box-shadow:0 0 0 3px rgba(230,165,25,0.16);}
  body.mega-open .czcard{opacity:0;visibility:hidden;pointer-events:none;}
    .czcard .chizuk-he{font-family:'Noto Rashi Hebrew',serif;font-weight:500;font-size:1.25rem;line-height:1.75;color:var(--ink);margin-bottom:10px;}
  .czcard .chizuk-en{font-family:var(--ff-display);font-style:italic;font-variation-settings:var(--fx-i);font-size:1.02rem;line-height:1.42;color:var(--soft-ink);margin-bottom:9px;text-wrap:balance;}
  .czcard .chizuk-ref{font-family:var(--ff-mono);font-size:0.58rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);}
  .czcard .cz-more{margin-top:14px;font-family:var(--ff-mono);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--warm-gray);background:transparent;border:1px solid rgba(20,18,31,0.16);border-radius:999px;padding:7px 16px;cursor:pointer;
    transition:color .3s,border-color .3s;}
  .czcard .cz-more:hover{color:var(--ink);border-color:var(--ink);}

  /* ===== UX wayfinding rail ===== */
  .rail{position:fixed;top:50%;right:clamp(14px,2vw,26px);transform:translateY(-50%);z-index:110;display:flex;flex-direction:column;gap:16px;}
  .rail a{display:flex;align-items:center;gap:10px;justify-content:flex-end;text-decoration:none;}
  .rail i{width:7px;height:7px;border-radius:50%;background:rgba(20,18,31,0.22);transition:all .5s var(--e-expo);display:block;}
  .rail em{font-family:var(--ff-mono);font-size:0.625rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--warm-gray);opacity:0;transform:translateX(6px);transition:all .4s var(--e-expo);font-style:normal;}
  .rail a:hover em{opacity:1;transform:none;} .rail a:hover i{background:var(--warm-gray);}
  .rail a.active i{height:22px;border-radius:4px;background:var(--zone);}
  .rail a.active em{color:var(--soft-ink);}  /* label only on hover, so it never overlaps the footer logo */
  @media(max-width:860px){.rail{display:none;}}

  section{position:relative;z-index:1;}
  .sec-index{display:flex;align-items:center;gap:12px;margin-bottom:26px;}
  .sec-index .num{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.16em;color:var(--zone);}
  .sec-index .rule{height:1px;background:rgba(20,18,31,0.2);flex:1;max-width:120px;transform:scaleX(0);transform-origin:left;}
  .sec-index .lab{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--warm-gray);}
  .lede{font-size:1.25rem;line-height:1.6;color:var(--soft-ink);max-width:54ch;}
  .cta{font-size:clamp(15px,1.5vw,18px);text-decoration:none;display:inline-flex;align-items:center;gap:10px;padding-bottom:6px;border-bottom:2px solid var(--ink);color:var(--ink);transition:color .4s var(--e-quart),border-color .4s var(--e-quart),gap .4s var(--e-expo);}
  .cta .arw{transition:transform .45s var(--e-expo);} .cta:hover{color:var(--zone);border-color:var(--zone);gap:16px;} .cta:hover .arw{transform:translateX(4px);}

  .hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:clamp(130px,18vh,190px) var(--gutter) clamp(58px,7vh,76px);max-width:none;margin:0;overflow:hidden;}
  .hero-mid,.hero-foot{width:100%;max-width:var(--shell);margin-inline:auto;}
  /* The artwork is the hero's anchor. Its luminous core was measured at
     (55.19%, 48.07%) of the plate; left/top place an anchor at the exact
     centre of the middle band, and the translate pulls the measured core
     onto that anchor — so the point of light, not the picture frame, is
     what sits centred. Absolute, so the plate never stretches the row:
     the type sets the page, the plate hangs behind it. */
  .hero-mid{align-self:center;position:relative;display:grid;grid-template-columns:1fr;align-items:center;}
  .hero-say{grid-column:1;grid-row:1;position:relative;z-index:2;min-width:0;max-width:min(62%,760px);}
  /* the wash thins where the type sits — a feathered pool of paper under the
     promise keeps it legible over the plate's teal left without a visible box */
  .hero-say::before{content:'';position:absolute;z-index:-1;inset:-16% -20% -20% -34%;pointer-events:none;
    background:radial-gradient(ellipse 58% 56% at 34% 52%,rgba(251,248,243,.85),rgba(251,248,243,.42) 55%,rgba(251,248,243,0) 78%);}
  /* left:50% of the centred .hero-mid puts the anchor at the viewport's
     midline; the +14.5vw carries the core to ~64.5% of the viewport at every
     width, so the left field breathes and the headline owns the left. */
  .hero-index{position:absolute;z-index:0;left:calc(50% + 14.5vw);top:50%;width:min(66vw,760px);min-width:0;
    pointer-events:none;transform:translate(-55.19%,-48.07%);}
  /* the gold thread: on load it drops from the page's top edge down to the
     plate's luminous core, and the bloom ignites where it lands. It is drawn
     only by the JS entrance (:has + .is-in) and is purely decorative — any
     browser or state without it still gets the developing plate. */
  .hero-index::before{content:'';position:absolute;z-index:2;left:55.19%;top:-48vh;
    width:1px;height:calc(48vh + 48.07%);pointer-events:none;
    background:linear-gradient(180deg,rgba(230,165,25,0) 0%,rgba(230,165,25,.5) 55%,var(--gold) 100%);
    box-shadow:0 0 14px rgba(230,165,25,.4);
    opacity:0;transform:scaleY(0);transform-origin:top;}
  html.js-ready body:not(.calm) .hero-index:has(.hero-art.is-in)::before{animation:heroart-thread 2.2s var(--e-expo) both;}
  @keyframes heroart-thread{
    0%{opacity:0;transform:scaleY(0);}
    8%{opacity:1;}
    52%{opacity:1;transform:scaleY(1);}
    100%{opacity:0;transform:scaleY(1);}
  }
  /* The abstract hero piece sits on the paper, its edges dissolving into the
     cream. On load it arrives like a print being pulled: the gold thread
     drops to the core, the point of light blooms where it lands, then the
     halftone field develops radially outward while a whisper of rotation
     (0.45deg) settles into register. --dev drives the developing mask; its
     resting value is fully developed, so anything that fails — the script,
     the image, the custom-property registry — fails open to a visible plate.
     Afterwards it answers the pointer with a gentle parallax and a soft
     light that follows the cursor; while the pointer rests on it, hero-art.js
     breathes the figure through --breathe (scale) and --lp (light pulse). */
  .hero-art{--core-x:55.19%;--core-y:48.07%;--dev:124%;
    position:relative;margin:0;width:100%;perspective:1200px;pointer-events:auto;
    transform:scale(var(--breathe,1));transform-origin:var(--core-x) var(--core-y);
    transition:--dev 1.85s var(--e-expo) 1.15s;}
  .hero-art picture{display:block;transform-origin:var(--core-x) var(--core-y);
    transition:transform 2.05s var(--e-expo) 1.05s;}
  .hero-art img{display:block;width:100%;height:auto;
    -webkit-mask-image:radial-gradient(circle at var(--core-x) var(--core-y),#000 calc(var(--dev) - 24%),transparent calc(var(--dev) + 16%)),radial-gradient(closest-side,#000 82%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:radial-gradient(circle at var(--core-x) var(--core-y),#000 calc(var(--dev) - 24%),transparent calc(var(--dev) + 16%)),radial-gradient(closest-side,#000 82%,transparent 100%);
            mask-composite:intersect;
    transform:translate3d(var(--px,0),var(--py,0),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .7s var(--e-quart);will-change:transform;}
  /* the nekudah tovah blooms before the field develops around it */
  .hero-art::before{content:'';position:absolute;z-index:1;left:var(--core-x);top:var(--core-y);
    width:30%;aspect-ratio:1;border-radius:50%;pointer-events:none;
    transform:translate(-50%,-50%) scale(.22);opacity:0;
    background:radial-gradient(circle,rgba(255,248,231,.95),rgba(255,219,145,.6) 30%,rgba(232,166,60,.22) 55%,rgba(232,166,60,0) 72%);}
  .hero-art::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
    background:radial-gradient(28% 28% at var(--mx,50%) var(--my,44%),rgba(255,236,200,.30),transparent 60%);
    mix-blend-mode:soft-light;opacity:0;transition:opacity .6s var(--e-quart);}
  .hero-art.lit::after{opacity:var(--lp,1);}
  /* the undeveloped state exists only while the script is alive and motion is
     on; delayed keyframes develop the plate (and settle its rotation) anyway
     if the reveal never comes */
  html.js-ready body:not(.calm) .hero-art:not(.is-in){--dev:-16%;transition:none;
    animation:heroart-catch 1.5s var(--e-expo) 3.3s forwards;}
  html.js-ready body:not(.calm) .hero-art:not(.is-in) picture{transform:rotate(.45deg) scale(1.045);transition:none;
    animation:heroart-catch-pic 1.6s var(--e-expo) 3.3s forwards;}
  html.js-ready body:not(.calm) .hero-art.is-in::before{animation:heroart-bloom 2.1s var(--e-quart) .8s both;}
  @keyframes heroart-catch{to{--dev:124%;}}
  @keyframes heroart-catch-pic{to{transform:none;}}
  @keyframes heroart-bloom{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.22);}
    14%{opacity:1;}
    40%{opacity:.95;transform:translate(-50%,-50%) scale(.8);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.5);}
  }
  @media(max-width:900px){
    .hero-mid{grid-template-rows:auto auto;}
    .hero-say{grid-row:1;max-width:100%;}
    .hero-say::before{display:none;}
    .hero-index{position:relative;left:auto;top:auto;grid-row:2;grid-column:1;justify-self:center;
      width:min(82vw,460px);margin-top:clamp(8px,3vw,20px);transform:translateX(-5.19%);}
    /* stacked under the headline, a thread from the page top would cross the
       type — the mobile entrance stays bloom + develop */
    .hero-index::before{display:none;}
  }
  @media(prefers-reduced-motion:reduce){
    .hero-art{--dev:124% !important;transform:none !important;transition:none !important;animation:none !important;}
    .hero-art picture{transform:none !important;transition:none !important;animation:none !important;}
    .hero-art::before{display:none !important;}
    .hero-index::before{display:none !important;}
    .hero-art img{transform:none;}
  }
  .hero .kick{display:flex;align-items:center;gap:16px;margin-bottom:clamp(20px,3vw,32px);opacity:1;flex-wrap:wrap;}
  html.js-ready body:not(.calm) .hero .kick{opacity:0;}
  .hero .kick .coord{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.16em;color:var(--warm-gray);}
  .hero .kick .k-rule{width:40px;height:1px;background:var(--warm-gray);transform:scaleX(1);transform-origin:left;}
  html.js-ready body:not(.calm) .hero .kick .k-rule{transform:scaleX(0);}
  .hero .kick .k-txt{font-size:12px;letter-spacing:0.26em;text-transform:uppercase;color:var(--warm-gray);}
  .headline{font-size:clamp(3rem,9.1vw,7.55rem);line-height:0.97;}
  .headline .line{display:block;overflow:hidden;padding-bottom:0.05em;}
  .headline .word{display:inline-block;transform:none;transform-origin:left bottom;will-change:transform;}
  html.js-ready body:not(.calm) .headline .word{transform:translateY(112%);}
  .headline em{font-style:italic;color:var(--cobalt);font-variation-settings:var(--fx-i);}
  .hero-sub{margin-top:clamp(16px,2.2vw,24px);font-size:1.2rem;color:var(--soft-ink);max-width:44ch;opacity:1;}
  .hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;opacity:1;}
  html.js-ready body:not(.calm) .hero-sub,html.js-ready body:not(.calm) .hero-foot{opacity:0;}
  .hero-foot .alt{font-size:15px;color:var(--warm-gray);} .hero-foot .alt a{color:var(--soft-ink);border-bottom:1px solid var(--warm-gray);text-decoration:none;}
  .scrollcue{position:absolute;left:50%;bottom:clamp(14px,2.4vh,24px);transform:translateX(-50%);font-family:var(--ff-mono);font-size:0.625rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--warm-gray);display:flex;flex-direction:column;align-items:center;gap:10px;}
  @media(max-width:600px){.scrollcue{display:none;}}
  .scrollcue .ln{width:1px;height:26px;background:rgba(20,18,31,0.2);position:relative;overflow:hidden;}
  .scrollcue .ln::after{content:'';position:absolute;inset:0;background:var(--zone);transform:translateY(-100%);animation:drip 2.4s var(--e-quart) infinite;}
  @keyframes drip{0%{transform:translateY(-100%);}60%,100%{transform:translateY(100%);}}

  /* The canvas is the front page's full-sheet halftone screen. */
  .hero .hero-mid,.hero .hero-foot{position:relative;z-index:1;}
  .swarm{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1;}

  /* Client proof now sits directly under the front-page promise. */
  .hero-proofs{display:flex;align-items:center;gap:clamp(14px,2vw,26px);width:min(100%,520px);margin-top:clamp(16px,2vw,24px);padding:10px 0;border-top:1px solid rgba(18,58,158,.22);border-bottom:1px solid rgba(18,58,158,.12);}
  .proof-label{flex:none;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-gray);}
  .hero-logo-stage{position:relative;flex:1;min-width:0;height:42px;overflow:hidden;}
  .hero-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;opacity:0;transform:translate3d(0,7px,0);visibility:hidden;transition:opacity .7s var(--e-quart),transform .7s var(--e-expo),visibility 0s linear .7s;}
  .hero-logo.active{opacity:1;transform:none;visibility:visible;transition-delay:0s;}
  .hero-logo .mlogo{height:clamp(24px,2.6vw,34px);max-width:min(230px,100%);margin:0;background-color:var(--cobalt);opacity:.72;}

  /* The front-page fold is one continuous scalar set by scroll. */
  .hero-fold{--fold-strength:1;position:absolute;z-index:3;left:0;right:0;bottom:0;height:24px;pointer-events:none;}
  .hero-fold::before,.hero-fold::after{content:'';position:absolute;left:0;right:0;pointer-events:none;opacity:var(--fold-strength);}
  .hero-fold::before{top:10px;height:3px;background:linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,255,255,0) 45%,rgba(58,53,48,.22) 48%,rgba(58,53,48,.08) 72%,transparent);transform:scaleY(calc(.4 + var(--fold-strength) * .6));transform-origin:center;}
  .hero-fold::after{top:12px;height:12px;background:linear-gradient(180deg,rgba(58,42,26,.15),rgba(58,42,26,.055) 34%,transparent 100%);filter:blur(calc(1px + var(--fold-strength) * 1.5px));transform:scaleY(var(--fold-strength));transform-origin:top;}
  @media(max-height:720px) and (min-width:601px){.hero{padding-top:112px;padding-bottom:48px}.hero .kick{margin-bottom:14px}.hero-proofs{margin-top:12px;padding-block:7px}.hero-sub{margin-top:12px}.hero-foot{margin-top:18px}}

  /* ===== motion toggle (floats bottom-left) ===== */
  .motionbtn{position:fixed;left:clamp(18px,3vw,30px);bottom:clamp(18px,3vw,28px);z-index:200;
    width:46px;height:46px;border-radius:50%;background:var(--paper);border:1px solid rgba(20,18,31,0.12);
    display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -12px rgba(60,30,10,0.35);
    transition:transform .5s var(--e-expo),background .4s var(--e-quart);}
  .motionbtn:hover{transform:translateY(-3px);}
  .motionbtn .ic{font-size:17px;color:var(--vermilion);display:block;animation:mspin 16s linear infinite;}
  body.calm .motionbtn .ic{animation:none;opacity:0.35;color:var(--warm-gray);}
  @keyframes mspin{to{transform:rotate(360deg);}}
  .motionbtn .mtip{position:absolute;left:56px;top:50%;transform:translateY(-50%) translateX(-4px);opacity:0;
    pointer-events:none;background:var(--ink);color:var(--paper);font-size:0.6rem;letter-spacing:0.1em;
    padding:7px 11px;border-radius:8px;white-space:nowrap;transition:opacity .35s var(--e-quart),transform .35s var(--e-expo);}
  .motionbtn:hover .mtip{opacity:1;transform:translateY(-50%);}
  @media(max-width:860px){.motionbtn .mtip{display:none;}}

  .featured{padding:clamp(90px,14vh,190px) var(--gutter);max-width:var(--shell);margin:0 auto;}
  body.home{overflow-x:clip;}
  .feature-copy{max-width:800px;}
  .feature-copy .lede{max-width:58ch;}
  .feature-spread{display:block;min-width:0;margin-top:clamp(52px,7vw,92px);color:inherit;text-decoration:none;outline-offset:8px;}
  .feature-pictures{--picture-rule:rgba(69,26,107,.15);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
    gap:clamp(24px,3vw,42px) clamp(14px,2vw,28px);align-items:start;border-top:1px solid var(--picture-rule);padding-top:clamp(18px,2.5vw,30px);}
  .feature-plate{position:relative;min-width:0;margin:0;align-self:start;}
  .feature-plate.q1{grid-column:1/7;grid-row:1/span 2;}
  .feature-plate.q2{grid-column:7/10;grid-row:1;}
  .feature-plate.q3{grid-column:10/13;grid-row:1;}
  .feature-plate.q4{grid-column:8/12;grid-row:2;}
  .feature-plate:not(.q1){border-left:1px solid var(--picture-rule);padding-left:clamp(14px,2vw,28px);}
  .feature-image{position:relative;min-width:0;transform-origin:20% 16%;}
  .feature-image picture,.feature-image img{display:block;width:100%;}
  .feature-image img{height:auto;object-fit:contain;filter:sepia(.22) saturate(.92) contrast(1.05);}
  .feature-plate figcaption{margin-top:9px;font-family:var(--ff-mono);font-size:clamp(.54rem,.7vw,.62rem);line-height:1.45;
    letter-spacing:.1em;text-transform:uppercase;color:var(--soft-ink);}
  .focap{display:block;margin-top:18px;padding-top:10px;border-top:1px solid rgba(69,26,107,.15);
    font-size:0.6rem;letter-spacing:0.16em;text-align:right;text-transform:uppercase;}
  @media(max-width:880px){
    .feature-pictures{grid-template-columns:repeat(8,minmax(0,1fr));}
    .feature-plate.q1{grid-column:1/5;grid-row:1/span 2;}
    .feature-plate.q2{grid-column:5/9;grid-row:1;}
    .feature-plate.q3{grid-column:5/9;grid-row:2;}
    .feature-plate.q4{grid-column:5/8;grid-row:3;}
  }
  @media(max-width:600px){
    .feature-pictures{grid-template-columns:1fr;row-gap:24px;}
    .feature-plate.q1,.feature-plate.q2,.feature-plate.q3,.feature-plate.q4{grid-column:1;grid-row:auto;}
    .feature-plate:not(.q1){width:78%;border-left:0;border-top:1px solid var(--picture-rule);padding:18px 0 0;}
    .feature-plate.q2,.feature-plate.q4{justify-self:end;}
    .feature-plate.q4{width:68%;}
  }
  .feat-h{font-size:clamp(2rem,4.4vw,3.5rem);margin-bottom:20px;}
  .feat-h em{font-style:italic;color:var(--aubergine);font-variation-settings:var(--fx-i);}
  .chips{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 28px;}
  .chip{font-family:var(--ff-mono);font-size:0.625rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--soft-ink);border:1px solid rgba(20,18,31,0.22);border-radius:999px;padding:6px 12px;}

  .work{max-width:var(--shell);margin:0 auto;padding:clamp(50px,7vh,90px) var(--gutter) clamp(70px,10vh,130px);}
  .work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px;}
  .work-head h2{font-size:clamp(1.9rem,4vw,3rem);}
  .wnav{display:flex;align-items:center;gap:18px;}

  /* ===== recent work: a calm newspaper picture page ===== */
  .picture-page{--picture-gap:clamp(20px,2.6vw,34px);--picture-rule:rgba(119,174,99,.16);display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--picture-gap);row-gap:clamp(30px,4vw,52px);
    align-items:start;border-top:1px solid var(--picture-rule);padding-top:clamp(18px,2.5vw,30px);}
  .stile{position:relative;display:flex;min-width:0;flex-direction:column;text-decoration:none;color:inherit;}
  .picture-page .stile::after{content:'';position:absolute;left:calc(var(--picture-gap) / -2);top:0;bottom:0;width:1px;background:var(--picture-rule);pointer-events:none;}
  .picture-page .stile:nth-child(4n+1)::after{display:none;}
  .simg{position:relative;min-width:0;border-radius:1px;transform-origin:20% 16%;}
  .simg picture,.simg img{display:block;width:100%;}
  .simg img{height:auto;object-fit:contain;filter:sepia(.22) saturate(.92) contrast(1.05);}
  .picture-page .wtag{position:static;display:block;width:fit-content;margin-top:9px;padding:0;background:none;color:var(--card-ink,var(--soft-ink));
    border:0;border-radius:0;box-shadow:none;backdrop-filter:none;font-size:.54rem;letter-spacing:.13em;}
  @media(max-width:980px){
    .picture-page{grid-template-columns:repeat(2,minmax(0,1fr));}
    .picture-page .stile:nth-child(odd)::after{display:none;}
    .picture-page .stile:nth-child(even)::after{display:block;}
  }
  @media(max-width:540px){
    .picture-page{grid-template-columns:1fr;row-gap:26px;}
    .picture-page .stile:nth-child(n)::after{display:none;}
    .picture-page .stile+.stile{border-top:1px solid var(--picture-rule);padding-top:26px;}
  }
  .wtag{position:absolute;left:12px;top:12px;background:rgba(20,18,31,0.72);color:var(--paper);border-radius:999px;padding:5px 11px;backdrop-filter:blur(4px);z-index:1;}
  .scap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:11px;}
  .scap{flex-direction:column;align-items:flex-start;gap:3px;}
  .scap h3{font-size:clamp(1rem,1.12vw,1.16rem);line-height:1.16;}
  .scap .cmeta{font-size:0.55rem;}
  .scap h3{font-family:var(--ff-display);font-weight:500;font-variation-settings:var(--fx-d);font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-0.02em;transition:color .35s var(--e-quart);}
  .stile:hover .scap h3,.stile:focus-visible .scap h3{color:var(--card-ink,var(--zone));}
  .cmeta{font-family:var(--ff-mono);font-size:0.625rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--warm-gray);white-space:nowrap;}

  /* A press begins a hair out and lands exactly in register. The stagger is
     carried by the impressions, while the page geometry never moves. */
  .register-impression{transform:none;}
  html.js-ready body:not(.calm) .register-zone.reg-armed:not(.in-register) .register-impression{
    transform:translate3d(var(--reg-x,0),var(--reg-y,0),0);transition:none;will-change:transform;}
  html.js-ready body:not(.calm) .register-zone.in-register .register-impression{
    transition:transform .58s var(--e-expo) var(--reg-delay,0ms);}

  /* One proof surface for all three homepage picture systems. Its shadow
     opens continuously from the same scalar used by the service proofs. */
  .proof-surface{position:relative;z-index:0;isolation:isolate;
    border-radius:clamp(20px,2vw,28px);
    transform:translate3d(0,var(--pull-y,0),0) scale(var(--pull-scale,1));will-change:transform;
    opacity:1;}
  .proof-surface::before{content:'';position:absolute;z-index:-1;inset:-2px -6px -4px;
    background:linear-gradient(180deg,#FFFDF9,var(--paper));border-radius:clamp(20px,2vw,28px);
    box-shadow:0 calc(17px + var(--pull-depth,0) * 13px) calc(34px + var(--pull-depth,0) * 18px) -20px rgba(58,34,16,.30),
               0 calc(5px + var(--pull-depth,0) * 5px) calc(12px + var(--pull-depth,0) * 6px) -10px rgba(58,34,16,.22),
               0 1px 0 rgba(255,255,255,.7) inset;
    opacity:var(--pull-depth,0);pointer-events:none;}
  /* One added response: the upper paper edge catches light as the proof rises. */
  .proof-surface::after{content:'';position:absolute;z-index:2;left:clamp(16px,1.8vw,24px);right:clamp(16px,1.8vw,24px);top:1px;height:1px;
    border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.96) 18%,rgba(255,255,255,.96) 82%,transparent);
    opacity:calc(var(--pull-depth,0) * .9);pointer-events:none;}

  /* ===== THE FEATURE: one brand, one photograph =====
     The image does the work. The type sits ON it — an index, the name, the
     services, one line of promise. No captions, no rules, no folio, no panel.
     Everything that used to sit UNDER the pictures is gone; that clutter was
     the "white thingy", and it ate the page. */
  .feature{max-width:var(--shell);margin:0 auto;padding:clamp(40px,5vh,64px) var(--gutter) clamp(48px,6vh,80px);}
  .feat-stage{position:relative;border-radius:clamp(14px,1.4vw,20px);overflow:hidden;
    height:clamp(460px,72vh,740px);background:var(--ink);
    box-shadow:0 30px 60px -34px rgba(20,18,31,.42),0 2px 0 rgba(255,255,255,.5) inset;
    cursor:grab;touch-action:pan-y;}
  .feat-stage.dragging{cursor:grabbing;}
  .feat-slides{position:absolute;inset:0;}

  /* slides cross-fade. No sliding, no snapping — nothing to read as a glitch. */
  .feat-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
    transition:opacity 1.05s var(--e-quart),visibility 0s linear 1.05s;}
  .feat-slide.on{opacity:1;visibility:visible;transition:opacity 1.05s var(--e-quart),visibility 0s;}
  .feat-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transform:scale(1.045);transition:transform 8s linear;}
  .feat-slide.on img{transform:scale(1);}

  /* the scrim carries the brand's own ink, so each project reads as itself */
  .feat-scrim{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(20,18,31,0) 26%,rgba(20,18,31,.38) 56%,rgba(20,18,31,.90) 100%),
               linear-gradient(90deg,rgba(var(--ink-rgb),.42) 0%,rgba(var(--ink-rgb),0) 62%);}

  .feat-copy{position:absolute;left:clamp(22px,3.2vw,52px);right:clamp(22px,3.2vw,52px);
    bottom:clamp(26px,3.4vw,46px);display:flex;align-items:flex-end;justify-content:space-between;
    gap:clamp(18px,3vw,48px);color:#fff;pointer-events:none;flex-wrap:wrap;}
  .feat-left{min-width:0;}
  .feat-idx{display:block;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;
    color:rgba(255,255,255,.72);margin-bottom:clamp(8px,1vw,14px);}
  .feat-name{font-family:var(--ff-display);font-optical-sizing:auto;font-weight:500;
    font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:.94;letter-spacing:-.028em;
    color:#fff;margin:0 0 clamp(12px,1.4vw,20px);text-wrap:balance;}
  .feat-chips{display:flex;flex-wrap:wrap;gap:8px;}
  .feat-chips span{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.13em;
    text-transform:uppercase;color:rgba(255,255,255,.92);padding:7px 13px;border-radius:999px;
    border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(3px);white-space:nowrap;}
  .feat-tag{font-family:var(--ff-body);font-style:italic;
    font-size:clamp(1.02rem,1.5vw,1.42rem);line-height:1.36;color:rgba(255,255,255,.94);
    max-width:30ch;text-align:right;margin:0 0 6px;}

  .feat-hit{position:absolute;inset:0;z-index:2;}
  .feat-hit:focus-visible{outline:2px solid #fff;outline-offset:-6px;}

  /* arrows sit quietly in the corner; the drag and the auto-turn do most of the work */
  .feat-nav{position:absolute;top:clamp(22px,3vw,40px);z-index:3;width:44px;height:44px;
    border-radius:50%;border:1px solid rgba(255,255,255,.38);background:rgba(20,18,31,.24);
    backdrop-filter:blur(5px);color:#fff;font-size:1rem;line-height:1;cursor:pointer;
    display:none;align-items:center;justify-content:center;
    transition:background .4s var(--e-expo),transform .5s var(--e-expo),border-color .4s;}
  .feat-nav:hover{background:rgba(20,18,31,.5);border-color:rgba(255,255,255,.8);transform:scale(1.07);}
  .feat-prev{right:calc(clamp(22px,3.2vw,52px) + 54px);}
  .feat-next{right:clamp(22px,3.2vw,52px);}
  @media(min-width:900px){.feat-nav{display:flex;}}

  /* one hairline showing how far through the work you are */
  .feat-rail{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
    background:rgba(255,255,255,.16);}
  .feat-rail i{display:block;height:100%;width:0;background:#fff;
    transform-origin:left;transition:width .6s var(--e-quart);}

  .feat-foot{display:flex;justify-content:center;margin-top:clamp(24px,3vw,40px);}
  .feat-noscript{display:flex;gap:18px;justify-content:center;list-style:none;padding:0;margin-top:20px;}

  @media(max-width:760px){
    .feat-stage{height:clamp(420px,62vh,560px);}
    .feat-copy{flex-direction:column;align-items:flex-start;gap:14px;}
    .feat-tag{text-align:left;max-width:34ch;}
  }
  @media (prefers-reduced-motion: reduce){
    .feat-slide,.feat-slide img{transition:none;}
    .feat-slide.on img{transform:scale(1);}
  }

  .kinetic{padding:clamp(80px,16vh,210px) 0;overflow:hidden;}
  .kinetic .k-annot{max-width:var(--shell);margin:0 auto 30px;padding:0 var(--gutter);display:flex;justify-content:space-between;gap:16px;}
  .kinetic .k-annot .mono b{color:var(--aubergine);font-weight:500;} .kinetic .k-annot .star{color:var(--gold);}
  .kline{font-family:var(--ff-display);font-weight:300;font-variation-settings:'SOFT' 20,'WONK' 1;font-size:clamp(3rem,12.5vw,11rem);line-height:0.93;letter-spacing:-0.03em;white-space:nowrap;padding:0 var(--gutter);will-change:transform;}
  .kline.a{color:var(--ink);} .kline.b{color:var(--aubergine);font-style:italic;text-align:right;}

  .services{max-width:var(--shell);margin:0 auto;padding:clamp(70px,10vh,140px) var(--gutter);}
  .pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:26px;
    border-top:1px solid rgba(20,18,31,.3);border-bottom:1px solid rgba(20,18,31,.22);}
  /* One continuous setting with column rules. The sheets still lift like
     damp proofs, but at rest they read as columns rather than cards. */
  .pillar{position:relative;min-width:0;}
  .pillar+.pillar{border-left:1px solid rgba(20,18,31,.22);}
  .pillar-sheet{min-height:100%;padding:24px clamp(18px,2vw,28px) 34px;border-radius:clamp(20px,2vw,28px);transform-origin:26px 28px;}
  .pillar-sheet.proof-surface{background:var(--paper);}
  .pillar-sheet.proof-surface.is-pulled{z-index:2;}
  /* a ghost of where the proof was lying, left on the bed as it lifts */
  .pillar::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
    background:var(--pc);opacity:calc(var(--pull-depth,0) * .22);pointer-events:none;}
  .pillar .pnum{font-family:var(--ff-mono);font-size:.72rem;font-weight:500;color:var(--pc);letter-spacing:.16em;display:block;
    padding-bottom:11px;border-bottom:2px solid var(--pc);
    transform:translate3d(0,var(--tab-y,0),0);will-change:transform;}
  .pillar h3{font-family:var(--ff-display);font-weight:500;font-variation-settings:var(--fx-d);font-size:clamp(1.38rem,2.05vw,1.75rem);line-height:1.06;margin:16px 0 13px;letter-spacing:-0.02em;}
  .pillar p{font-size:1rem;line-height:1.58;color:var(--soft-ink);margin-bottom:20px;max-width:28ch;}
  .pillar .plink{font-size:13px;letter-spacing:0.04em;color:var(--pc);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;}
  @media(max-width:980px){
    .pgrid{grid-template-columns:1fr 1fr;}
    .pillar:nth-child(odd){border-left:0;}
    .pillar:nth-child(n+3){border-top:1px solid rgba(20,18,31,.22);}
  }
  @media(max-width:560px){
    .pgrid{grid-template-columns:1fr;}
    .pillar+.pillar{border-left:0;border-top:1px solid rgba(20,18,31,.22);}
  }

  .clients{padding:clamp(56px,9vh,100px) 0;border-top:1px solid rgba(20,18,31,0.1);border-bottom:1px solid rgba(20,18,31,0.1);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
  .clients .clab{text-align:center;margin-bottom:34px;color:var(--warm-gray);}
  .mrow{display:flex;width:max-content;} .mrow+.mrow{margin-top:clamp(4px,1vh,10px);}
  .mrow.r1{animation:scrollL 68s linear infinite;} .mrow.r2{animation:scrollR 82s linear infinite;}
  .clients:hover .mrow, body.calm .mrow{animation-play-state:paused;}
  /* client logos, recolored to a single flat ink via CSS mask: the alpha
     channel of each PNG becomes the shape, background-color supplies the
     tone, so every mark reads as one consistent monochrome mark regardless
     of its real brand color (a plain <img> can't be recolored this way —
     mask needs an empty element painted through a mask, not visible
     content underneath it) */
  .mlogo{display:inline-flex;align-items:center;height:clamp(30px,3.6vw,46px);aspect-ratio:var(--ar);
    margin:0 clamp(24px,2.6vw,42px);vertical-align:middle;flex:none;
    -webkit-mask-image:var(--limg);mask-image:var(--limg);
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    background-color:var(--soft-ink);opacity:0.62;
    transition:opacity .4s var(--e-quart);}
  .clients:hover .mlogo{opacity:0.85;}
  /* .mlogo's own margin is the sole gap unit — it holds even at the
     seam where the marquee's duplicated content repeats and no .mdiv
     sits between two logos */
  .mdiv{display:inline-block;font-size:0.5em;vertical-align:middle;
    color:var(--warm-gray);opacity:0.5;position:relative;top:-0.15em;}
  @keyframes scrollL{to{transform:translateX(-50%);}} @keyframes scrollR{from{transform:translateX(-50%);}to{transform:translateX(0);}}

  .quote{max-width:840px;margin:0 auto;padding:clamp(90px,15vh,190px) var(--gutter);text-align:center;}
  .quote .qm{font-family:var(--ff-display);font-size:5rem;line-height:0.6;color:var(--plum);font-style:italic;}
  .quote blockquote{font-family:var(--ff-display);font-weight:400;font-style:italic;font-variation-settings:var(--fx-i);font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.3;letter-spacing:-0.015em;margin:10px 0 30px;color:var(--ink);}
  .quote .qby{font-size:1rem;color:var(--warm-gray);} .quote .qby b{color:var(--soft-ink);font-weight:600;}

  /* manifesto + closing sit deep in the dark ramp: light type on the warm dark */
  .manifesto{max-width:1040px;margin:0 auto;padding:clamp(80px,12vh,160px) var(--gutter);
    display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);gap:clamp(24px,4vw,56px) clamp(34px,6vw,82px);align-items:start;}
  .manifesto .sec-index{grid-column:1/-1;margin-bottom:clamp(10px,2vh,22px);}
  .manifesto p{font-size:clamp(1.38rem,2.1vw,1.65rem);line-height:1.48;color:#D8CFD5;margin:0;max-width:34ch;}
  .manifesto p:first-of-type{grid-row:2/span 2;font-family:var(--ff-display);font-optical-sizing:auto;font-weight:400;
    font-variation-settings:var(--fx-d);font-size:clamp(2rem,3.8vw,3.15rem);line-height:1.12;letter-spacing:-.025em;max-width:23ch;}
  .manifesto p b{color:#F4EEF1;font-weight:600;}
  .manifesto .sec-index .lab{display:flex;flex-direction:column;gap:1px;font-family:var(--ff-display);font-optical-sizing:auto;
    font-size:clamp(1.25rem,2vw,1.65rem);font-style:italic;font-variation-settings:var(--fx-i);letter-spacing:-.012em;text-transform:none;color:#F4EEF1;line-height:1;}
  .manifesto .sec-index .lab small{font-family:var(--ff-mono);font-size:.56rem;font-style:normal;font-weight:500;
    letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
  .manifesto .sec-index .rule{background:rgba(244,238,241,0.25);}
  .manifesto .sec-index .num{color:var(--gold);}
  @media(max-width:720px){
    .manifesto{grid-template-columns:1fr;gap:24px;}
    .manifesto .sec-index{grid-column:1;}
    .manifesto p:first-of-type{grid-row:auto;}
    .manifesto p{max-width:31ch;}
  }

  .closing{text-align:center;padding:clamp(100px,18vh,230px) var(--gutter);max-width:960px;margin:0 auto;overflow-x:clip;}
  .closing h2{font-size:clamp(2.4rem,6.4vw,5.4rem);margin-bottom:34px;color:#F4EEF1;}
  .closing h2 em{font-style:italic;color:var(--vermilion);font-variation-settings:var(--fx-i);}
  .closing h2 .cline{display:block;white-space:nowrap;}
  @media(max-width:700px){.closing h2 .cline{white-space:normal;}}
  .closing .sec-index .lab{color:rgba(244,238,241,0.55);}
  .closing .sec-index .num{color:var(--vermilion);}
  .bigcta{display:inline-block;font-size:1.15rem;background:var(--paper);color:var(--ink);text-decoration:none;padding:16px 34px;border-radius:999px;transition:transform .5s var(--e-expo),background .4s var(--e-quart),color .4s var(--e-quart);}
  .bigcta:hover{transform:translateY(-3px);background:var(--vermilion);color:var(--paper);}
  .closing .also{margin-top:22px;color:rgba(244,238,241,0.6);}

  /* The back-page invitation enters sideways, as if the last line is being
     pulled into register. Inner-page CTAs inherit it without page scripts. */
  @supports (animation-timeline:view()){
    /* journal.html is deliberately untouched. Its unsplit one-line heading
       receives the same viewport-long travel here; split headings use the
       existing data-kx engine, exactly like the homepage closing. */
    .page-cta h2:not(:has([data-kx])){animation:closing-slide linear both;animation-timeline:view();animation-range:entry 0% exit 100%;}
    @keyframes closing-slide{from{transform:translate3d(6.3vw,0,0);}to{transform:translate3d(-6.3vw,0,0);}}
  }
  .page-cta .cta-line{display:block;}

  /* Signature picture entrance. Only cached canvas opacity changes while it
     runs; all canvases and temporary image styles are deleted on resolve. */
  .halftone-target{position:relative;isolation:isolate;}
  .halftone-target.halftone-pending img,.halftone-target.halftone-running img{opacity:0;}
  .halftone-plates{position:absolute;z-index:2;inset:0;display:block;overflow:hidden;pointer-events:none;}
  .halftone-plates canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;}
  .halftone-target.halftone-resolved img{opacity:1;filter:none;}

  .foot{border-top:1px solid rgba(20,18,31,0.1);padding:34px var(--gutter);max-width:var(--shell);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}

  .rv{opacity:1;transform:none;transition:opacity .98s var(--e-quart),transform .98s var(--e-quart);}
  html.js-ready body:not(.calm) .rv:not(.in){opacity:0;transform:translateY(34px);}
  .rv.in{opacity:1;transform:none;}
  .gr{opacity:1;transform:none;
    transition:opacity .92s var(--e-quart) var(--gd,0ms),transform .92s var(--e-quart) var(--gd,0ms);}
  html.js-ready body:not(.calm) .gr:not(.in){opacity:0;transform:translateY(26px);}
  .gr.in{opacity:1;transform:none;}
  .rv.d1{transition-delay:.11s;}.rv.d2{transition-delay:.22s;}.rv.d3{transition-delay:.33s;}.rv.d4{transition-delay:.44s;}
  .wipe{clip-path:none;transition:clip-path 1.15s var(--e-expo);} html.js-ready body:not(.calm) .wipe:not(.in){clip-path:inset(0 0 100% 0);} .wipe.in{clip-path:inset(0 0 0 0);}

  /* ===== entrance engine: the settle =====
     .irx — plates fade up and come to rest. A colored bar used to sweep each
     frame like a press roller; across a 15-plate gallery that read as a wall
     of swiping, so the reveal is now quiet: the plate rises a few pixels out
     of a slight enlargement and lands. Stagger via --gd. site.js stamps .done
     after the settle so hover transforms stop inheriting entrance delays.
     .mrx — mask-rise heading: content (wrapped in .mri by site.js) rises
     out of an overflow clip with a slight letterpress rotation. */
  .irx{position:relative;overflow:hidden;}
  .irx img{opacity:1;transform:none;
    transition:opacity .8s var(--e-quart) var(--gd,0s),
               transform 1s var(--e-expo) var(--gd,0s);}
  html.js-ready body:not(.calm) .irx:not(.go) img{opacity:0;transform:translateY(18px) scale(1.03);}
  .irx.go img{opacity:1;transform:none;}
  .irx.done img{transition:transform .7s var(--e-quart);}
  .mrx{overflow:hidden;}
  .mrx .mri{display:inline-block;transform:none;
    transform-origin:left bottom;transition:transform 1.15s var(--e-expo) var(--gd,0s);will-change:transform;}
  html.js-ready body:not(.calm) .mrx:not(.go) .mri{transform:translateY(118%) rotate(1.6deg);}
  .mrx.go .mri{transform:none;}

  /* ===== printed type entrances =====
     site.js gives each key line one treatment per page and lets an
     IntersectionObserver press it into place once. These are ink and masking
     effects only: the words never dangle or travel in from off the sheet. */
  .type-entry{--te-delay:0ms;position:relative;opacity:1;clip-path:inset(-8% -4% -12% -4%);transform:none;filter:none;
    transition:opacity .88s var(--e-quart) var(--te-delay),
               clip-path 1s var(--e-quart) var(--te-delay),
               transform 1s var(--e-quart) var(--te-delay),
               filter .92s var(--e-quart) var(--te-delay),
               letter-spacing 1s var(--e-quart) var(--te-delay);}
  html.js-ready body:not(.calm) .type-entry:not(.type-in)[data-type-entry="ink-settle"]{opacity:.08;filter:blur(4px);letter-spacing:.012em;transform:translate3d(0,.1em,0) scale(.996);}
  html.js-ready body:not(.calm) .type-entry:not(.type-in)[data-type-entry="rule-left"]{opacity:.12;clip-path:inset(-8% 100% -12% -4%);transform:translate3d(.15em,.03em,0);}
  html.js-ready body:not(.calm) .type-entry:not(.type-in)[data-type-entry="press-down"]{opacity:.2;clip-path:inset(-8% -4% 94% -4%);transform:translate3d(0,.15em,0) scaleY(.98);}
  html.js-ready body:not(.calm) .type-entry:not(.type-in)[data-type-entry="press-center"]{opacity:.08;clip-path:inset(-8% 49% -12% 49%);transform:translate3d(0,.08em,0) scale(.994);filter:blur(2px);}
  html.js-ready body:not(.calm) .type-entry:not(.type-in)[data-type-entry="rule-right"]{opacity:.12;clip-path:inset(-8% -4% -12% 100%);transform:translate3d(-.14em,.03em,0);}
  html.js-ready body:not(.calm) .type-entry:not(.type-in)[data-type-entry="press-up"]{opacity:.16;clip-path:inset(94% -4% -12% -4%);transform:translate3d(0,-.11em,0) scaleY(.99);}
  html.js-ready body:not(.calm) .type-entry:not(.type-in)[data-type-entry="ink-tight"]{opacity:.06;filter:blur(3px) contrast(1.35);letter-spacing:-.04em;transform:translate3d(0,.08em,0) scale(.997);}
  html.js-ready body:not(.calm) .type-entry:not(.type-in)[data-type-entry="press-shear"]{opacity:.14;clip-path:inset(-8% 72% -12% -4%);transform:translate3d(.1em,.06em,0) skewX(-.6deg);}
  .type-entry:is([data-type-entry="rule-left"],[data-type-entry="rule-right"])::before{content:'';position:absolute;left:0;right:0;bottom:-.1em;height:1px;
    background:currentColor;opacity:0;transform:scaleX(0);transform-origin:left;pointer-events:none;}
  .type-entry.type-in[data-type-entry="rule-left"]::before{animation:type-rule-left 1s var(--e-quart) var(--te-delay) both;}
  .type-entry.type-in[data-type-entry="rule-right"]::before{transform-origin:right;animation:type-rule-right 1s var(--e-quart) var(--te-delay) both;}
  @keyframes type-rule-left{0%{opacity:.24;transform:scaleX(0);}72%{opacity:.24;transform:scaleX(1);}100%{opacity:0;transform:scaleX(1);}}
  @keyframes type-rule-right{0%{opacity:.2;transform:scaleX(0);}68%{opacity:.2;transform:scaleX(1);}100%{opacity:0;transform:scaleX(1);}}
  .headline em{position:relative;}
  .headline em::after{content:'';position:absolute;left:-0.02em;right:-0.02em;bottom:0.03em;height:0.08em;
    background:var(--vermilion);transform:scaleX(1);transform-origin:left;}
  html.js-ready body:not(.calm) .headline em::after{transform:scaleX(0);animation:emink .8s cubic-bezier(0.77,0,0.18,1) 2s forwards;}
  @keyframes emink{to{transform:scaleX(1);}}

  /* no-JS fallback: every state that waits on a script resolves to its final,
     fully visible form (mirrors the reduced-motion final states below).
     site.js never reaches ready, so every base style above stays visible. */
  html:not(.js-ready) .rv,html:not(.js-ready) .wipe,html:not(.js-ready) .gr{opacity:1;transform:none;clip-path:none;}
  html:not(.js-ready) .sec-index .rule{transform:scaleX(1);}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .veil{display:none;}
    .headline .word{transform:none !important;}
    .hero .kick,.hero-sub,.hero-foot,.bsd{opacity:1 !important;}
    .k-rule,.sec-index .rule{transform:scaleX(1) !important;}
    .rv,.wipe,.gr{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;}
    .irx img{opacity:1 !important;transform:none !important;transition:none !important;}
    .irx::after{display:none !important;}
    .halftone-plates{display:none !important;}
    .halftone-target img{opacity:1 !important;filter:none !important;}
    .page-cta h2{animation:none !important;transform:none !important;}
    .mrx .mri{transform:none !important;transition:none !important;}
    .headline em::after{animation:none !important;transform:scaleX(1) !important;}
    .mrow{animation:none;} .scrollcue .ln::after{animation:none;}
    .register-impression,.proof-surface,.pillar .pnum{will-change:auto;transform:none !important;transition:none !important;}
    .proof-surface::before,.proof-surface::after{opacity:0 !important;}
    .type-entry{opacity:1 !important;clip-path:none !important;transform:none !important;filter:none !important;transition:none !important;animation:none !important;}
    .type-entry::before{display:none !important;}
    *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  }
  body.calm .veil{display:none !important;}
  body.calm .hero-art{--dev:124% !important;transform:none !important;transition:none !important;animation:none !important;}
  body.calm .hero-art picture{transform:none !important;transition:none !important;animation:none !important;}
  body.calm .hero-art::before{display:none !important;}
  body.calm .hero-index::before{display:none !important;}
  body.calm .headline .word{transform:none !important;}
  body.calm .hero .kick,body.calm .hero-sub,body.calm .hero-foot,body.calm .bsd{opacity:1 !important;}
  body.calm .k-rule,body.calm .sec-index .rule{transform:scaleX(1) !important;}
  body.calm .rv,body.calm .wipe,body.calm .gr{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;}
  body.calm .irx img{opacity:1 !important;transform:none !important;transition:none !important;}
  body.calm .halftone-plates{display:none !important;}
  body.calm .halftone-target img{opacity:1 !important;filter:none !important;}
  body.calm .page-cta h2{animation:none !important;transform:none !important;}
  body.calm .mrx .mri{transform:none !important;transition:none !important;}
  body.calm .headline em::after{animation:none !important;transform:scaleX(1) !important;}
  body.calm .mrow,body.calm .scrollcue .ln::after{animation:none !important;transform:none !important;}
  body.calm .register-impression,body.calm .proof-surface,body.calm .pillar .pnum{will-change:auto;transform:none !important;transition:none !important;}
  body.calm .proof-surface::before,body.calm .proof-surface::after{opacity:0 !important;}
  body.calm .type-entry{opacity:1 !important;clip-path:none !important;transform:none !important;filter:none !important;transition:none !important;animation:none !important;}
  body.calm .type-entry::before{display:none !important;}
  body.calm :is(.peyebrow,.phero h1,.phero .pintro,.proj-hero .peyebrow,.proj-hero h1,.proj-hero .ptag,.proj-hero .chips,.wx-deskline,.st-ledger .stl-in,.jmast,.pxtint,.proj-hero .pxedition){animation:none !important;opacity:1 !important;clip-path:none !important;transform:none !important;}
  body.calm :is(.peyebrow .prule,.jmast .jm-top,.jmast .jm-bot,.ct-krule){animation:none !important;transform:none !important;transition:none !important;}

  /* ===== dark footer (C2 · plum-rose, smooth blend) ===== */
  /* z-index 0: the fblend strip rises 56vh above the footer box; at z1 the
     footer's stacking context painted OVER the page's final section (the
     project-page CTA sat "behind the gradient"). At 0 content wins. */
  .site-footer{--fdark:#55414B;--fglow:230,165,25;--ftext:#f4eef1;--fdim:#d6ccd2;position:relative;z-index:0;color:var(--ftext);background:var(--fdark);}
  /* The blend lives ABOVE the footer: by default (inner pages) a 52vh strip
     over the section above. On the homepage (body.home, set by site.js) it
     spans from the clients marquee all the way down: a long dusk ramp whose
     steep crossing sits in the empty band between the quote's bottom padding
     and the manifesto's text, so ink copy never sits on a mid-tone.
     Manifesto + closing are styled for the dark side of the ramp. */
  /* inner pages: same smootherstep discipline as the homepage dusk — the
     alpha follows an eased S (zero slope at both ends) with grain dither,
     so the approach into the dark footer never bands */
  .site-footer .fblend{position:absolute;left:0;right:0;bottom:100%;height:56vh;z-index:0;pointer-events:none;
    background:
      radial-gradient(circle,rgba(60,38,12,0.05) 0.5px,transparent 1.1px) 0 0/5px 5px,
      radial-gradient(circle,rgba(40,25,10,0.03) 0.5px,transparent 1px) 1.5px 1px/3px 3px,
      linear-gradient(180deg,
        rgba(85,65,75,0) 0%, rgba(85,65,75,0.009) 10%, rgba(85,65,75,0.058) 20%,
        rgba(85,65,75,0.163) 30%, rgba(85,65,75,0.317) 40%, rgba(85,65,75,0.5) 50%,
        rgba(85,65,75,0.683) 60%, rgba(85,65,75,0.837) 70%, rgba(85,65,75,0.942) 80%,
        rgba(85,65,75,0.991) 90%, var(--fdark) 100%);
    background-blend-mode:multiply,multiply,normal;}
  /* homepage: the ramp is a .dusk layer BEHIND the sections (z 0, sections
     are z 1) — an overlay child of the footer would paint over their text.
     site.js positions it from the clients marquee to the footer top; the
     steep crossing lands in the empty band between the quote's attribution
     (~36%) and the manifesto's first line (~47%). */
  body.home .site-footer .fblend{display:none;}
  /* Not a purple overlay: the background COLOR itself morphs from the paper
     beige through sand, clay, rosy taupe, and mauve into the plum dark —
     interpolated in OKLCH so the passage moves through real hues with no
     muddy band. A grain layer (multiply) continues the paper texture that
     the ambient provides above this element. #55414B literal: --fdark is
     scoped to .site-footer. */
  /* One continuous smootherstep descent (20%→52%): the slope eases in from
     zero, peaks mid-crossing, and eases back to zero — no derivative breaks,
     so no Mach bands. Stops are dense samples of that curve along the
     beige→sand→clay→rose→mauve→plum path. Two grain layers dither away
     8-bit steps. #55414B literal: --fdark is scoped to .site-footer. */
  .dusk{position:absolute;left:0;right:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(circle,rgba(60,38,12,0.05) 0.5px,transparent 1.1px) 0 0/5px 5px,
      radial-gradient(circle,rgba(40,25,10,0.03) 0.5px,transparent 1px) 1.5px 1px/3px 3px,
      linear-gradient(180deg,
        rgba(250,245,236,0) 0%, #FAF5EC 12%, #FAF5EC 20%,
        #FAF4EB 23.2%, #F7EFE3 26.4%, #F1E4D4 29.6%, #ECDBC9 31.2%,
        #E6D0BE 32.8%, #DEC3B1 34.4%, #CEAEA3 36%, #BE9994 37.6%,
        #A88185 39.2%, #936B76 40.8%, #805C69 42.4%, #70525E 44%,
        #644B56 45.6%, #5F4751 47.2%, #5B4450 49%, #58434E 51%,
        #56424C 53.5%, #55414B 58%, #55414B 100%);
    background-blend-mode:multiply,multiply,normal;}
  @supports (background:linear-gradient(180deg in oklch,#000,#fff)){
    .dusk{background:
      radial-gradient(circle,rgba(60,38,12,0.05) 0.5px,transparent 1.1px) 0 0/5px 5px,
      radial-gradient(circle,rgba(40,25,10,0.03) 0.5px,transparent 1px) 1.5px 1px/3px 3px,
      linear-gradient(180deg in oklch,
        rgba(250,245,236,0) 0%, #FAF5EC 12%, #FAF5EC 20%,
        #FAF4EB 23.2%, #F7EFE3 26.4%, #F1E4D4 29.6%, #ECDBC9 31.2%,
        #E6D0BE 32.8%, #DEC3B1 34.4%, #CEAEA3 36%, #BE9994 37.6%,
        #A88185 39.2%, #936B76 40.8%, #805C69 42.4%, #70525E 44%,
        #644B56 45.6%, #5F4751 47.2%, #5B4450 49%, #58434E 51%,
        #56424C 53.5%, #55414B 58%, #55414B 100%);}
  }
  .site-footer::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 60% 80% at 80% 118%,rgba(var(--fglow),0.13),transparent 62%);}
  .foot-top{max-width:var(--shell);margin:0 auto;padding:clamp(80px,11vh,130px) var(--gutter) 34px;display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(30px,5vw,56px);align-items:center;position:relative;z-index:1;}
  @media(max-width:760px){.foot-top{grid-template-columns:1fr;}}
  .foot-logo{width:min(600px,100%);height:auto;display:block;order:2;justify-self:end;}
  @media(max-width:760px){.foot-logo{order:0;justify-self:start;}}
  .foot-hd{order:1;text-align:left;}
  .foot-bsd{display:none;}  /* the logo already contains bs"d */
  .foot-tag{font-family:var(--ff-display);font-style:italic;font-variation-settings:var(--fx-i);font-size:clamp(1.35rem,2.9vw,2.1rem);margin:0 0 22px;opacity:0.92;}
  .foot-cta{display:inline-block;font-size:1.25rem;background:var(--paper);color:var(--ink);text-decoration:none;padding:16px 36px;border-radius:999px;transition:transform .5s var(--e-expo),background .4s var(--e-quart);}
  .foot-cta:hover{transform:translateY(-3px);background:var(--gold);}
  .foot-cols{max-width:var(--shell);margin:0 auto;padding:clamp(30px,4.5vh,54px) var(--gutter);display:flex;gap:clamp(32px,5vw,56px);flex-wrap:wrap;border-top:1px solid rgba(251,248,243,0.16);position:relative;z-index:1;}
  .foot-col h4{font-family:var(--ff-mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--fdim);opacity:0.8;margin-bottom:14px;}
  .foot-col a{display:block;text-decoration:none;color:var(--ftext);font-size:1.02rem;margin-bottom:10px;width:fit-content;transition:color .35s var(--e-quart),transform .35s var(--e-expo);}
  .foot-col a:hover{color:var(--gold);transform:translateX(3px);}
  .foot-col .fmono{display:block;margin-top:10px;font-family:var(--ff-mono);font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--fdim);}
  .foot-bottom{border-top:1px solid rgba(251,248,243,0.14);position:relative;z-index:1;}
  .foot-bottom .fb-in{max-width:var(--shell);margin:0 auto;padding:20px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
  .foot-bottom .mono{color:var(--fdim);}

  /* ===== floating whatsapp bubble ===== */
  .wa{position:fixed;right:clamp(18px,3vw,30px);bottom:clamp(18px,3vw,28px);z-index:200;width:58px;height:58px;border-radius:50%;background:var(--paper);border:1px solid rgba(20,18,31,0.12);display:grid;place-items:center;box-shadow:0 16px 34px -14px rgba(60,30,10,0.4);text-decoration:none;transition:transform .5s var(--e-expo),background .4s var(--e-quart),border-color .4s var(--e-quart);}
  .wa:hover{transform:translateY(-4px) scale(1.06);background:var(--sage);border-color:var(--sage);}
  .wa svg{width:29px;height:29px;fill:var(--ink);transition:fill .4s var(--e-quart);}
  .wa:hover svg{fill:var(--paper);}
  .wa .watip{position:absolute;right:66px;top:50%;transform:translateY(-50%) translateX(6px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);font-family:var(--ff-mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;padding:8px 12px;border-radius:8px;white-space:nowrap;transition:opacity .4s var(--e-quart),transform .4s var(--e-expo);}
  .wa:hover .watip{opacity:1;transform:translateY(-50%);}
  @media(max-width:860px){.wa{width:52px;height:52px;} .wa .watip{display:none;}}