/* =========================================================================
   SITE 98 — the frame every page shares (v3.53, Sep 2026)
   From the Sep 10 call with the designer: a page may look however it needs
   to, but the frame that holds it must not change from page to page — one
   header, one menu, one footer and one ground — so the visitor always has
   the same anchor, whichever room they are in. This file is that frame and
   nothing else; each page's own look stays in its own <style>.

     .s98-head   the header, on every page: Menu and the Carbon / White
                 switch on the left, the mark in the middle, and Marketing,
                 Personal Branding, Journal, Case studies and Contact as
                 buttons on the right (v3.56; the last two names v3.61).
                 Delhi time left it in v3.54 (the footer keeps it) and Home
                 in v3.55: the mark is the way home.
                 Fixed; clear at the very top, and a light frosted layer
                 (the designer's "layer blur") once the page moves under it.
     .nav035     the curtain menu — effect 035 with 093's word — moved here
                 from the landing so the dots open it everywhere.
     .s98-foot   the footer: the same four columns on every page.
     soft pictures  content photographs get soft corners, a hairline in the
                 ground's own tone and a small lift (see the end of the file).

   The ground is CARBON by default and WHITE on request, remembered across
   the whole site ("98-ground" in localStorage) and set on <html> before
   first paint by the one-line script in every page's <head>.
   ========================================================================= */
:root{
  --s98-bg:#0B0B0C; --s98-ink:#F4F4F2; --s98-faint:.32;
  --s98-line:rgba(244,244,242,.2); --s98-rule:rgba(244,244,242,.3);
  --s98-glass:rgba(11,11,12,.62);
  --s98-stroke:rgba(244,244,242,.14); --s98-lift:0 16px 34px -20px rgba(0,0,0,.8);
  --s98-red:#EE352E;
  --s98-h:40px; --s98-m:10px; --s98-pad:clamp(1.25rem,4vw,4rem);
  --s98-ease:cubic-bezier(.16,1,.3,1);
}
html[data-ground="white"]{
  --s98-bg:#FFFFFF; --s98-ink:#000000; --s98-faint:.2;
  --s98-line:rgba(0,0,0,.2); --s98-rule:rgba(0,0,0,.3);
  --s98-glass:rgba(255,255,255,.68);
  --s98-stroke:rgba(0,0,0,.08); --s98-lift:0 16px 30px -20px rgba(0,0,0,.4);
}
html{background:var(--s98-bg)}

/* ---------- the header ---------- */
.s98-head{position:fixed;top:0;left:0;right:0;z-index:120;height:var(--s98-h);margin:0;padding:0 var(--s98-m);box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:10px;
  font:400 13px/20px 'Archivo',Helvetica,Arial,sans-serif;font-stretch:100%;letter-spacing:-.01em;text-transform:none;text-align:left;
  color:var(--s98-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  border-bottom:1px solid transparent;
  transition:background-color .35s,border-color .35s,color .35s,-webkit-backdrop-filter .35s,backdrop-filter .35s}
.s98-head.s98-glass{background:var(--s98-glass);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);border-bottom-color:var(--s98-line)}
.s98-head *{box-sizing:border-box}
.s98-head a,.s98-head button{color:inherit;text-decoration:none;font:inherit;letter-spacing:inherit;text-transform:none;background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;opacity:1;transition:opacity .25s}
.s98-l{display:flex;align-items:center;gap:22px;min-width:0;white-space:nowrap;justify-self:start}

.s98-ground button{position:relative;padding-bottom:1px}
.s98-ground button.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.s98-ground button:not(.on):hover{opacity:.5}
.s98-ground{display:block;white-space:nowrap}
.s98-sep{margin:0 .28em}

/* the pages and Contact: buttons, together on the right (v3.56). A hairline
   pill in the header's own ink, filled for the section you are in. Ring and
   fill are drawn by ::before in currentColor, so they follow the ink wherever
   the header changes it (the landing's dark top on White, the open curtain);
   ::after stretches each button's tap area to the header's full height. */
.s98-nav{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;justify-self:end}
.s98-head .s98-nav a{position:relative;z-index:0;display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:13px}
.s98-nav a::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid currentColor;border-radius:inherit;opacity:.3;transition:opacity .25s}
.s98-nav a::after{content:"";position:absolute;inset:-7px -3px}
.s98-nav a:hover::before,.s98-nav a:focus-visible::before{opacity:.85}
.s98-head .s98-nav a[aria-current="page"]{color:var(--s98-bg)}
.s98-nav a[aria-current="page"]::before{background:var(--s98-ink);border-color:var(--s98-ink);opacity:1}
.s98-c{display:block;justify-self:center;line-height:0}
.s98-c img{display:block;height:26px;width:auto;max-width:none;border-radius:0;box-shadow:none;filter:none;transition:opacity .35s,filter .35s}
html[data-ground="white"] .s98-c img{filter:invert(1)}
.s98-head.s98-nomark .s98-c{pointer-events:none}
.s98-head.s98-nomark .s98-c img{opacity:0}             /* the landing, while its own big mark is on screen */
.s98-spacer{height:var(--s98-h)}                        /* pages whose content flows from the top start below the header */

/* the dots: three points that read as a menu; while the curtain is down the
   middle one drops out, the outer two meet, and the word reads Close */
.s98-menu{display:inline-flex;align-items:center;gap:.55rem}
.md-dots{display:inline-flex;gap:4px;align-items:center}
.md-dots i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;transition:transform .4s var(--s98-ease),opacity .4s var(--s98-ease)}
.s98-menu:hover .md-dots i:nth-child(1){transform:translateX(-2px)}
.s98-menu:hover .md-dots i:nth-child(3){transform:translateX(2px)}
.s98-menu[aria-expanded="true"] .md-dots i:nth-child(2){opacity:0;transform:scale(0)}
.s98-menu[aria-expanded="true"] .md-dots i:nth-child(1){transform:translateX(4.5px)}
.s98-menu[aria-expanded="true"] .md-dots i:nth-child(3){transform:translateX(-4.5px)}
.s98-head .s98-menu:hover{opacity:1}

/* over the open curtain the header is clear again: the curtain is the ground */
/* a page whose first screen is dark whatever the ground (the landing's film):
   on white, the clear header at the very top takes light ink over it */
html[data-ground="white"]:not(.s98-menu-open) .s98-head[data-s98-top="dark"]:not(.s98-glass){color:#F4F4F2}
html[data-ground="white"]:not(.s98-menu-open) .s98-head[data-s98-top="dark"]:not(.s98-glass) .s98-c img{filter:none}
html.s98-menu-open .s98-head{z-index:500;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}

/* where a side would run into the mark, it gives way (measured with Archivo, v3.61):
   at 1100px and below Marketing, Personal Branding and Journal step out (the menu
   lists them) and Case studies and Contact stay; at 480px and below the mark steps
   out too; at 380px and below Case studies steps out, and Contact is alone */
@media(max-width:1100px){
  .s98-head .s98-nav .s98-pg{display:none}
  .s98-l{gap:16px}
}
@media(max-width:480px){
  .s98-head{grid-template-columns:auto 1fr auto}
  .s98-c{display:none}
  .s98-r{grid-column:3}
}
@media(max-width:380px){
  .s98-head .s98-nav .s98-cs{display:none}
}
/* v3.67: phone hit areas — the same glyphs, a thumb-sized target under each
   (padding pulled back by margin, so nothing moves): Menu was 63×20, the ground
   buttons 44×21, the footer links 20px tall */
@media(max-width:768px){
  .s98-head .s98-menu{padding:12px 8px;margin:-12px -8px}
  .s98-head .s98-ground button{padding:12px 5px;margin:-12px -5px}
  .s98-foot a{padding:6px 0;margin:-6px 0}
}
@media print{ .s98-head,.nav035{display:none} }

/* ---------- the menu: effect 035, hung as a curtain ----------
   Moved from index.html (v3.26–v3.32) unchanged in its numbers: 45px rows
   blooming to 122px, 92px media rising from y:100% behind the row's clip,
   15px gaps, rules at 30%. Two changes: it takes the ground (carbon, or
   white when the site is white), and the word's pictures now sit OVER the
   rows' rules — the designer's note, "the white line should go to the back". */
.nav035{position:fixed;inset:0;z-index:400;background:var(--s98-bg);color:var(--s98-ink);
  font-family:'Archivo',Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55;letter-spacing:normal;text-align:left;
  visibility:hidden;transform:translate3d(0,-100%,0);will-change:transform,opacity;-webkit-font-smoothing:antialiased}
.nav035 *{box-sizing:border-box}
.nav035.open{visibility:visible}
/* motion is script-owned (one eased number on the GSAP ticker); these
   transitions only serve the no-GSAP / reduced-motion fallback */
.nav035.nofx{transition:transform .6s cubic-bezier(.76,0,.24,1),opacity .6s ease,visibility 0s .6s}
.nav035.nofx.open{transform:none;opacity:1;transition:transform .6s cubic-bezier(.76,0,.24,1),opacity .6s ease}
.n35-inner{height:100vh;display:flex;flex-direction:column;justify-content:center}
.n35-top,.n35-bottom{flex:1 1 0;min-height:0;display:flex;align-items:center;padding:0 var(--s98-pad)}
.n35-top{padding-top:3.2rem;position:relative;z-index:3}  /* the word's pictures above the rules */
.n35-bottom{align-items:flex-end;justify-content:center;padding-bottom:1.6rem}
.n35-hint{margin:0;color:var(--s98-ink);font:400 13px/20px 'Archivo',Helvetica,Arial,sans-serif;letter-spacing:-.01em;opacity:.5;animation:s98pulse 2.8s ease-in-out infinite}
@keyframes s98pulse{0%,100%{opacity:.25}50%{opacity:.6}}
/* effect 093: the word */
.n35-word{display:flex;font-weight:800;font-stretch:118%;text-transform:uppercase;line-height:.9;letter-spacing:-.02em;
  font-size:clamp(3.4rem,10vw,11rem);color:var(--s98-ink);margin:0;user-select:none}
.n35-word .letter{position:relative;display:inline-block;cursor:default}
.n35-word .letter:has(.n35-cm){color:transparent}
.n35-wmedias{position:absolute;top:0;left:0;pointer-events:none}
.n35-wmedia{width:1px;height:1px;visibility:hidden;position:absolute}
.n35-cm{position:absolute;width:9vw;min-width:64px;height:auto;max-width:none;aspect-ratio:1;object-fit:cover;top:50%;left:50%;border-radius:1vw;pointer-events:none;
  box-shadow:0 0 0 1px var(--s98-stroke),var(--s98-lift)}
.nav035 ul{width:100%;border-bottom:1px solid var(--s98-rule);display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.nav035 ul li{flex:1 1 45px;align-items:center;border-top:1px solid var(--s98-rule);width:100%;padding:0 var(--s98-pad);display:flex;justify-content:space-between;position:relative;overflow:hidden;margin:0}
.nav035 ul li:first-child{flex:1 1 122px}
.nav035 ul li a{display:flex;align-items:center;align-self:stretch;flex:1;color:var(--s98-ink);text-decoration:none}
.n35-name{font-weight:800;font-stretch:118%;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;transition:color .3s}
.nav035 ul li:hover .n35-name,.nav035 ul li a:focus-visible .n35-name{color:var(--s98-red)}
.n35-name .beta{font-size:.55em;font-weight:600;color:var(--s98-red);letter-spacing:.1em;vertical-align:super;margin-left:.5em}
.n35-medias{display:flex;gap:15px;position:absolute;right:var(--s98-pad);top:50%;transform:translate(0,-50%);overflow:hidden}
.n35-media{width:92px;height:92px;max-width:none;object-fit:cover;transform:translate(0,100%);border-radius:4%}
.nav035.nofx .n35-media{transform:none}
.nav035.nofx li:not(:first-child) .n35-media{display:none}   /* no motion, no bloom: only the open first row shows its pictures */
@media (max-width:768px){
  .nav035 ul li{padding:0 15px}
  .nav035 ul li:first-child{flex:1 1 90px}
  .n35-medias{gap:5px;right:15px}
  .n35-media{width:60px;height:60px}
  .n35-media:nth-child(n+4){display:none}
  .n35-name{font-size:.8rem}
  .nav035 ul li:first-child .n35-name{padding-right:150px}   /* v3.67: the first row's name ran under its three pictures at 360px */
}
@media (max-width:400px){
  .n35-media:nth-child(n+3){display:none}
  .nav035 ul li:first-child .n35-name{padding-right:110px}
}

/* ---------- the footer ---------- */
.s98-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:10px;row-gap:20px;align-items:start;
  position:relative;z-index:2;margin:0;padding:clamp(80px,14vh,160px) var(--s98-m) var(--s98-m);box-sizing:border-box;
  background:var(--s98-bg);color:var(--s98-ink);border-top:1px solid var(--s98-line);
  font:400 13px/20px 'Archivo',Helvetica,Arial,sans-serif;font-stretch:100%;letter-spacing:-.01em;text-transform:none;text-align:left;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.s98-foot *{box-sizing:border-box}
.s98-foot a{color:inherit;text-decoration:none;opacity:1;transition:opacity .25s}
.s98-foot a:hover{opacity:.5}
.s98-foot a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.s98-fc{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.s98-f1{grid-column:1/3}.s98-f2{grid-column:4/7}.s98-f3{grid-column:7/10}.s98-f4{grid-column:10/13}
.s98-faint{opacity:var(--s98-faint)}
.s98-rights{grid-column:1/13;margin-top:40px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media(max-width:900px){
  .s98-f1{grid-column:1/7}.s98-f2{grid-column:7/13}.s98-f3{grid-column:1/7}.s98-f4{grid-column:7/13}
  .s98-rights{flex-direction:column;gap:2px}
}

/* ---------- soft pictures ----------
   The designer's note on the Sep 10 call: a photograph set straight onto
   the ground with square corners "looks like it's been stuck on something
   that is not related to it". Content pictures get soft corners, a
   hairline in the ground's own tone, and a small lift — the "touch of
   neumorphic depth, small, not much" from the Sep 8 notes. Zero
   specificity (:where), so any page that styles a picture its own way
   wins; logos, marks and cut-outs are PNGs and are left alone, and
   anything else can opt out with .s98-flat. */
:where(main img:not([src$=".png"]):not([src$=".svg"]):not(.s98-flat)){
  border-radius:clamp(4px,.45vw,8px);
  box-shadow:0 0 0 1px var(--s98-stroke),var(--s98-lift);
}
/* full-bleed pictures are the ground, not objects on it: the landing's
   montage frames and its hover preview stay square and flat */
:where(.mont, .preview) img{border-radius:0;box-shadow:none}

/* ---------- the nudges: only for a page that has gone still (v3.63) ----------
   A room's Scroll or Drag cue comes up after six seconds without a scroll, a
   press or a key (assets/site.js sets html[data-cues]), and the first move
   takes it away again. The rooms keep their own say over whether a cue is due
   — each fades its own out once its scene has started. Without JS the
   attribute is never set and every cue shows as it always did. */
.w104-cue,.w-cue,.scroll-cue{transition:opacity .5s cubic-bezier(.16,1,.3,1)}
html[data-cues="wait"] .w104-cue,
html[data-cues="wait"] .w-cue,
html[data-cues="wait"] .scroll-cue{opacity:0!important}
