/* =========================================================
   KEROVA — design system
   Tokens → reset → layout primitives → nav → hero
   ========================================================= */

:root{
  /* ---- brand ---- */
  --ink:            #191919;
  --ink-soft:       #3a3a3a;
  --sand:           #ece6d8;
  --paper:          #ffffff;
  --forest:         #1c2b26;
  --forest-tint:    #3d5148;
  --accent:         #e0705a;
  --accent-soft:    #f2ddd7;
  --khaki:          #b0ab93;
  --grey:           #666;
  --grey-light:     #ccc;

  /* ---- surfaces ---- */
  --bg-dark:   var(--ink);
  --bg-light:  var(--sand);
  --bg-paper:  var(--paper);
  --bg-forest: var(--forest);

  /* ---- type ---- */
  --font-main:    "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700;

  --fs-display: clamp(3rem, 2.30rem + 3.00vw, 5rem);
  --fs-h1:      clamp(2.19rem, 1.66rem + 2.25vw, 3.69rem);
  --fs-h2:      clamp(1.63rem, 1.23rem + 1.69vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 0.94rem + 1.31vw, 2.13rem);
  --fs-h4:      clamp(1.06rem, 0.82rem + 1.03vw, 1.69rem);
  --fs-h5:      clamp(0.94rem, 0.78rem + 0.70vw, 1.38rem);
  --fs-h6:      clamp(0.88rem, 0.77rem + 0.47vw, 1.19rem);
  --fs-body:    clamp(0.84rem, 0.73rem + 0.42vw, 1.00rem);
  --fs-small:   clamp(0.66rem, 0.60rem + 0.22vw, 0.78rem);
  --fs-eyebrow: 0.625rem;

  --lh-1:1; --lh-11:1.1; --lh-12:1.2; --lh-13:1.3; --lh-14:1.4; --lh-15:1.5; --lh-16:1.6;

  /* ---- space ---- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;   --s-5:1.25rem;
  --s-6:1.5rem; --s-7:2rem;   --s-8:2.5rem; --s-9:3rem;   --s-10:4rem;

  --sec-small:  clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --sec-medium: clamp(3rem, 2rem + 2.5vw, 5rem);
  --sec-large:  clamp(4rem, 2.5rem + 3.5vw, 7rem);
  --sec-xlarge: clamp(5rem, 3rem + 5vw, 9rem);
  --sec-hero:   clamp(6rem, 3.5rem + 6.5vw, 12rem);

  /* ---- shell ---- */
  --global-pad:  clamp(1.25rem, 0.6rem + 2.4vw, 3rem);
  --global-max:  100rem;
  --container:   100%;

  --r-small:.3em; --r-main:1.25rem; --r-large:2em; --r-full:100em;
  --hairline: rgba(255,255,255,.14);
  --hairline-dark: rgba(25,25,25,.14);

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-io:  cubic-bezier(.65,.05,.36,1);
}

/* ========== reset ========== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{
  margin:0;
  background:var(--bg-dark);
  color:var(--ink);
  font-family:var(--font-main);
  font-size:var(--fs-body);
  line-height:var(--lh-15);
  font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
::selection{background:var(--accent);color:var(--paper)}

/* ========== type primitives ========== */
.display-size{font-size:var(--fs-display);line-height:var(--lh-1);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:-.015em}
.heading-h2{font-size:var(--fs-h2);line-height:var(--lh-11);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:-.01em}
.heading-h3{font-size:var(--fs-h3);line-height:var(--lh-12);font-weight:var(--fw-medium)}
.heading-h4{font-size:var(--fs-h4);line-height:var(--lh-12);font-weight:var(--fw-medium);text-transform:uppercase}
.heading-h5{font-size:var(--fs-h5);line-height:var(--lh-13);font-weight:var(--fw-medium)}
.text-size-medium{font-size:var(--fs-body);line-height:var(--lh-16)}
.text-size-eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);line-height:var(--lh-13);
  text-transform:uppercase;letter-spacing:.12em;font-weight:var(--fw-medium);opacity:.7;
}
.mono{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.idx{opacity:.45}

/* ========== layout primitives ========== */
.padding-global{padding-inline:var(--global-pad);width:100%}
.container-large{width:var(--container);max-width:var(--global-max);margin-inline:auto}
.element-wrap{position:relative;z-index:2}
.spacer-top{height:var(--sec-large)}
.spacer-bottom{height:var(--sec-large)}
.spacer-top.is--hero{height:var(--sec-medium)}
.spacer-top.is--small,.spacer-bottom.is--small{height:var(--sec-small)}
.spacer-bottom.is--tiny{height:var(--sec-small)}

.page-wrapper{position:relative}
.main-wrapper{position:relative}

/* ========== page transition overlay ========== */
.page-transitions{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:var(--ink);color:var(--sand);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.4em;
}
.pt-mark{opacity:.65}

/* ========== nav ========== */
.navigation_container{position:relative;z-index:100}
.nav_fixed{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:transform .55s var(--ease-out);
  will-change:transform;
}
/* The scrolled bar's tint + blur ride on a pseudo-element rather than on
   .nav_fixed itself: `backdrop-filter` makes its element a containing block
   for `position:fixed` descendants (same trap as `transform` / `will-change`
   below), which collapsed the mobile menu's full-screen overlay into the
   ~80px nav bar the moment the page was scrolled. */
.nav_fixed::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(25,25,25,.72);opacity:0;
  transition:opacity .4s ease, background-color .4s ease;
}
.nav_fixed.is-hidden{transform:translateY(-102%)}
.nav_fixed.is-scrolled::before{opacity:1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav_fixed.on-light.is-scrolled::before{background:rgba(236,230,216,.78)}
.nav{padding-block:var(--s-6);color:var(--sand);transition:color .45s ease}
.nav_fixed.on-light .nav{color:var(--ink)}
.nav_menu-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6)}

.brand{display:flex;align-items:center;gap:.6rem}
.brand-mark{width:22px;height:22px;color:var(--accent)}
.brand-word{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.26em;font-weight:var(--fw-medium)}

.nav-navigation_item{display:flex;align-items:center;gap:var(--s-8)}
.navigation-item{display:flex;align-items:center;gap:var(--s-6)}
.nav-item{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  text-transform:uppercase;letter-spacing:.12em;
  display:block;overflow:hidden;height:1.1em;
}
.nav-item_inner{display:flex;flex-direction:column;transition:transform .42s var(--ease-out)}
.nav-item_inner>span{height:1.1em;line-height:1.1em;display:block}
.nav-item:hover .nav-item_inner{transform:translateY(-1.1em)}
.nav-item:hover{color:var(--accent)}
.navigation_bottom-wrap{display:flex;gap:var(--s-4);opacity:.6}
.nav .navigation_bottom-wrap .text-size-eyebrow{opacity:1}

.menu{display:none;width:34px;height:34px;align-items:center;justify-content:center}
.hamburger-3_wrap{display:flex;flex-direction:column;gap:5px;width:20px}
.hamburger-3_wrap i{display:block;height:1px;background:currentColor;transition:transform .4s var(--ease-out),opacity .3s ease}
.menu[aria-expanded="true"] .hamburger-3_wrap i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded="true"] .hamburger-3_wrap i:nth-child(2){opacity:0}
.menu[aria-expanded="true"] .hamburger-3_wrap i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ========== hero / rings ========== */
.phobos-rings-section{
  position:relative;background:var(--bg-dark);color:var(--sand);
  min-height:100svh;display:flex;align-items:center;
  padding-block:var(--sec-hero) var(--sec-medium);
  overflow:hidden;isolation:isolate;
}
.atmosphere-wrap{
  position:absolute;top:50%;left:50%;
  width:min(180vw,2100px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(1.5);
  z-index:0;pointer-events:none;
}
.galaxy-canvas{width:100%;height:100%;opacity:.85}
.phobos-rings-section::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 50%, transparent 0%, rgba(25,25,25,.55) 62%, var(--ink) 96%);
}
.hero-content{position:relative;z-index:3;width:100%}
.hero-wrap{position:relative}
.hero_header-wrap{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(1rem,3vw,3.5rem);
}
.hero-heading_left{justify-self:end;text-align:right}
.hero-heading_right{justify-self:start;text-align:left}
.hero-heading_left .display-size,.hero-heading_right .display-size{color:var(--sand)}

.hero-visual{position:relative;width:clamp(200px,26vw,380px);aspect-ratio:1;display:grid;place-items:center}
.ring-wrapper{position:absolute;inset:0;display:grid;place-items:center}
.hero-visual-rings{width:100%;height:100%}
.orbital{width:100%;height:100%}
.phobos-moon-rotating{position:absolute;inset:-14%;pointer-events:none}
.svg-visual_text{width:100%;height:100%;overflow:visible}
.svg-visual_text text{
  font-family:var(--font-mono);font-size:8.2px;letter-spacing:.22em;
  fill:rgba(236,230,216,.5);text-transform:uppercase;
}

/* ========== hero statement grid ========== */
.section-home_hero{background:var(--bg-dark);color:var(--sand);position:relative;z-index:2}
.hero-grid_3{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  border-top:1px solid var(--hairline);padding-top:var(--s-8);
}
.hero-grid_item{display:flex;flex-direction:column;gap:var(--s-5)}
.hero-grid_item.grid-center{gap:var(--s-7)}
.hero-grid_item .text-size-medium{color:rgba(236,230,216,.75);max-width:42ch}
.meta-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding-block:var(--s-3);border-bottom:1px solid var(--hairline);
}
.meta-row .mono{color:var(--accent)}

/* =========================================================
   Components
   ========================================================= */

/* ---- icon button: a viewfinder reticle that opens up on hover ----
   Four corner brackets stand in for the old circle-and-dots ring; the
   frame is implied by the brackets rather than drawn, and they pull
   apart on hover instead of orbiting. Pure CSS — no offset measuring. */
.icon-btn_wrap{
  position:relative;width:2.1em;height:2.1em;flex:none;
  display:inline-grid;place-items:center;
}
.icon-btn_wrap .absolute-icon{
  position:absolute;width:7px;height:7px;border:0 solid currentColor;
  opacity:.6;transition:transform .32s var(--ease-out),opacity .32s ease;
}
.icon-btn_wrap .absolute-icon:nth-child(1){top:1px;left:1px;border-width:1.4px 0 0 1.4px}
.icon-btn_wrap .absolute-icon:nth-child(2){top:1px;right:1px;border-width:1.4px 1.4px 0 0}
.icon-btn_wrap .absolute-icon:nth-child(3){bottom:1px;right:1px;border-width:0 1.4px 1.4px 0}
.icon-btn_wrap .absolute-icon:nth-child(4){bottom:1px;left:1px;border-width:0 0 1.4px 1.4px}

.read-more-link:hover .absolute-icon,
.button:hover .absolute-icon{opacity:1}
.read-more-link:hover .absolute-icon:nth-child(1),
.button:hover .absolute-icon:nth-child(1){transform:translate(-3px,-3px)}
.read-more-link:hover .absolute-icon:nth-child(2),
.button:hover .absolute-icon:nth-child(2){transform:translate(3px,-3px)}
.read-more-link:hover .absolute-icon:nth-child(3),
.button:hover .absolute-icon:nth-child(3){transform:translate(3px,3px)}
.read-more-link:hover .absolute-icon:nth-child(4),
.button:hover .absolute-icon:nth-child(4){transform:translate(-3px,3px)}

.icon-btn_wrap .arrow{width:.78em;height:.78em;transition:transform .32s var(--ease-out)}

.read-more-link{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  text-transform:uppercase;letter-spacing:.12em;
  align-self:flex-start;
}
.read-more-link:hover .arrow{transform:translate(2px,-2px)}
.read-more-link:hover{color:var(--accent)}
.read-more-text{position:relative}
.read-more-text::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.read-more-link:hover .read-more-text::after{transform:scaleX(1);transform-origin:left}

.button{
  display:inline-flex;align-items:center;gap:var(--s-3);
  padding:.7rem 1.1rem .7rem .7rem;border-radius:var(--r-full);
  background:var(--ink);color:var(--sand);
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  text-transform:uppercase;letter-spacing:.12em;
  transition:background-color .35s ease,color .35s ease,transform .35s var(--ease-out);
}
.button:hover{background:var(--accent);color:var(--paper);transform:translateY(-2px)}
.button:hover .arrow{transform:translate(2px,-2px)}
.button.is--light{background:var(--sand);color:var(--ink)}
.button.is--light:hover{background:var(--accent);color:var(--paper)}

/* ---- copy-to-clipboard button + playful "copied" toast ---- */
.section-cta .button-wrap{display:flex;align-items:center;gap:var(--s-4)}
.copy-btn{
  position:relative;width:2.6rem;height:2.6rem;flex:none;
  display:inline-grid;place-items:center;border-radius:50%;
  border:1px solid currentColor;color:inherit;background:transparent;
  transition:background-color .3s ease,color .3s ease;
}
.copy-btn:hover{background:var(--accent);color:var(--paper)}
.copy-icon{width:1rem;height:1rem}

.copy-tooltip{
  position:absolute;left:50%;bottom:calc(100% + 11px);
  display:flex;align-items:center;gap:.35em;
  padding:.4em .7em;border-radius:var(--r-full);white-space:nowrap;
  background:var(--accent);color:var(--paper);
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.1em;
  pointer-events:none;
}
.copy-tooltip svg{width:10px;height:10px}
.copy-tooltip::after{
  content:"";position:absolute;top:100%;left:50%;
  width:7px;height:7px;background:var(--accent);
  transform:translate(-50%,-50%) rotate(45deg);
}

/* ---- shared section headers ---- */
.flex-horizontal{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-8);flex-wrap:wrap;
}
.header-wrap{display:flex;flex-direction:column;gap:var(--s-5)}
.header-wrap.header-center{align-items:center;text-align:center}
.text-width-384{max-width:34rem}

/* =========================================================
   Expertise
   ========================================================= */
.section-home_expertise{position:relative;background:var(--bg-light);color:var(--ink)}
.absolute-dark_bg{
  position:absolute;top:0;left:0;right:0;height:2rem;
  background:var(--bg-dark);z-index:0;
}
.section-home_expertise .element-wrap{position:relative;z-index:2}

.expertise-accordion{margin-top:var(--sec-medium);border-top:1px solid var(--hairline-dark)}
.expertise-row{border-bottom:1px solid var(--hairline-dark)}
.expertise-head{
  display:grid;grid-template-columns:3.5rem 1fr 2rem;align-items:center;
  gap:var(--s-4);width:100%;text-align:left;
  padding-block:clamp(1rem,2.2vw,1.7rem);
  transition:color .35s ease,padding-left .4s var(--ease-out);
}
.expertise-row:hover .expertise-head{color:var(--accent);padding-left:var(--s-3)}
.expertise-title{
  font-size:var(--fs-h5);font-weight:var(--fw-medium);
  text-transform:uppercase;letter-spacing:.01em;
}
.expertise-plus{position:relative;width:14px;height:14px;justify-self:end}
.expertise-plus i{position:absolute;background:currentColor;transition:transform .4s var(--ease-out),opacity .3s ease}
.expertise-plus i:nth-child(1){top:50%;left:0;width:100%;height:1px;transform:translateY(-50%)}
.expertise-plus i:nth-child(2){left:50%;top:0;height:100%;width:1px;transform:translateX(-50%)}
.expertise-row.is-open .expertise-plus i:nth-child(2){transform:translateX(-50%) rotate(90deg);opacity:0}
.expertise-body{height:0;overflow:hidden}
.expertise-body_inner{
  display:grid;grid-template-columns:3.5rem minmax(0,52ch) 1fr;gap:var(--s-4);
  padding-bottom:clamp(1rem,2.2vw,1.7rem);
}
.expertise-body_inner p{grid-column:2;color:var(--ink-soft);line-height:var(--lh-16)}
.tag-list{grid-column:3;display:flex;flex-wrap:wrap;gap:var(--s-2);align-content:start;justify-content:flex-end}
.tag-list li{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);text-transform:uppercase;
  letter-spacing:.1em;padding:.3rem .6rem;border:1px solid var(--hairline-dark);
  border-radius:var(--r-full);
}

/* =========================================================
   Approach
   ========================================================= */
.section--home_approach{background:var(--bg-light);color:var(--ink)}
.approach-container{margin-top:var(--sec-medium)}
.grid-approach{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.grid-approach_item{
  background:var(--paper);border-radius:var(--r-main);
  padding:clamp(1.25rem,2.4vw,2rem);
  display:flex;flex-direction:column;gap:var(--s-7);
  border:1px solid rgba(25,25,25,.06);
}
.grid-approach_item.is--secondary{background:rgba(255,255,255,.55)}
.approach-visual{
  aspect-ratio:16/11;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(25,25,25,.045),rgba(25,25,25,0));
  border-radius:calc(var(--r-main) - .35rem);color:var(--ink);
}
.approach-visual .svg-icon{width:min(58%,150px);height:auto;overflow:visible}
.approach-copy{display:flex;flex-direction:column;gap:var(--s-3)}
.approach-copy p{color:var(--ink-soft);font-size:var(--fs-small);line-height:var(--lh-16)}

/* =========================================================
   CTA blocks
   ========================================================= */
.section--home_cta{background:var(--bg-light);color:var(--ink)}
.section-cta{background:var(--bg-forest);color:var(--sand)}

.cta-wrap{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-radius:var(--r-main);overflow:hidden;min-height:clamp(360px,42vw,560px);
}
.phobos_content_wrap{
  position:relative;display:flex;align-items:flex-end;
  padding:clamp(1.5rem,3.2vw,3rem);background:var(--ink);color:var(--sand);
  isolation:isolate;overflow:hidden;
}
.cta-content_wrap{position:relative;z-index:3;display:flex;flex-direction:column;gap:var(--s-8);width:100%}
.cta-content{display:flex;flex-direction:column;gap:var(--s-5);max-width:30ch}
.cta-content_wrap.is--accent .cta-content .heading-h2{color:var(--accent-soft)}

/* the mid CTA's column has more room than the shared h3 scale assumes,
   which left a wide gap between the text block and the visual on the
   other side. `ch` resolves against the element's OWN font-size — on
   `.cta-content` that's the small body font, not the heading's — so the
   wrap width is set in rem instead, and widened (not the font blown up)
   so the block reaches further toward the visual. */
.section--home_cta .cta-content{max-width:none}
.section--home_cta .cta-content .text-size-eyebrow{font-size:.8rem}
.section--home_cta .cta-content .heading-h3{
  max-width:34rem;
  font-size:clamp(1.4rem, 1rem + 1.6vw, 2.5rem);
}

.bg-wash{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(90% 70% at 15% 100%, rgba(224,112,90,.28), transparent 60%);
}
.bg-wash.is--forest{background:radial-gradient(90% 70% at 15% 100%, rgba(61,81,72,.75), transparent 62%)}

.icon-cta_wrap{position:absolute;inset:clamp(1rem,2vw,1.6rem);z-index:2;pointer-events:none}
.cta-icon{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--khaki);opacity:.6}
.icon-cta_wrap.is--accent .cta-icon{background:var(--accent)}
.cta-icon.top-left{top:0;left:0}
.cta-icon.top-right{top:0;right:0}
.cta-icon.btm-right{bottom:0;right:0}
.cta-icon.btm-left{bottom:0;left:0}

.cta-img-wrap{position:relative;overflow:hidden;background:var(--forest-tint)}
.img-width-full{width:100%;height:100%;min-height:260px}

/* live canvas visuals — js/viz.js paints these; the background colour
   here is only what shows for the frame before the canvas mounts */
[data-viz]{position:relative;overflow:hidden;background:var(--ink)}
[data-viz="wave"]{background:var(--forest)}
[data-viz]>canvas{position:absolute;inset:0}

/* =========================================================
   Case studies
   ========================================================= */
.section--home_studies{background:var(--bg-paper);color:var(--ink)}
/* featured card sits above the list, both full width, so the two columns
   of the card stay the same height instead of one running far past the other */
.studies-container{
  margin-top:var(--sec-medium);
  display:flex;flex-direction:column;gap:clamp(2rem,4vw,3.5rem);
}
.study-card{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:center;
}
.study-media{border-radius:var(--r-main);overflow:hidden;aspect-ratio:4/3}
.study-figure{width:100%;height:100%;transition:transform .9s var(--ease-out)}
.study-card:hover .study-figure{transform:scale(1.05)}
.study-tags{display:flex;gap:var(--s-2)}
.study-tags span{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.1em;
  padding:.25rem .55rem;border:1px solid var(--hairline-dark);border-radius:var(--r-full);
}
.study-meta{display:flex;flex-direction:column;gap:var(--s-4)}
.study-meta p{color:var(--ink-soft);max-width:46ch;font-size:var(--fs-small);line-height:var(--lh-16)}
.study-stats{display:flex;gap:var(--s-9);margin-top:var(--s-2)}
.study-stats div{display:flex;flex-direction:column;gap:2px}
.study-stats .mono{font-size:var(--fs-h4);color:var(--accent);font-weight:var(--fw-medium)}
.study-stats em{
  font-style:normal;font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  text-transform:uppercase;letter-spacing:.1em;opacity:.55;
}

.studies-list{display:flex;flex-direction:column;border-top:1px solid var(--hairline-dark)}
.study-row{
  display:grid;grid-template-columns:2.5rem 1fr auto 1.6rem;align-items:center;gap:var(--s-4);
  padding-block:clamp(.9rem,2vw,1.5rem);border-bottom:1px solid var(--hairline-dark);
  transition:padding-left .45s var(--ease-out),color .35s ease;
}
.study-row:hover{padding-left:var(--s-3);color:var(--accent)}
.study-row_title{font-size:var(--fs-h6);font-weight:var(--fw-medium)}
.study-row_tag{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.1em;opacity:.5}
.study-row_arrow svg{width:14px;height:14px;transition:transform .35s var(--ease-out)}
.study-row:hover .study-row_arrow svg{transform:translate(2px,-2px)}

/* =========================================================
   Insights
   ========================================================= */
.section--home_insight{background:var(--bg-paper);color:var(--ink)}
.insight-strip{
  display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap;
  border-top:1px solid var(--hairline-dark);padding-top:var(--s-7);
}
.insight-link{
  flex:1;display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-6);flex-wrap:wrap;
}
.insight-title{font-size:var(--fs-h4);font-weight:var(--fw-medium);max-width:26ch}
.insight-link:hover .insight-title{color:var(--accent)}
.insight-date{opacity:.5}

/* =========================================================
   Careers
   ========================================================= */
.section--home_careers{background:var(--bg-paper);color:var(--ink)}
.careers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,3rem)}
.grid-item{display:flex;flex-direction:column;gap:var(--s-8)}
.careers-grid_item{display:flex;flex-direction:column;gap:var(--s-5)}
.careers-header_wrap{display:flex;flex-direction:column;gap:var(--s-5);align-items:flex-start}
.careers-header_wrap p{color:var(--ink-soft);max-width:40ch;font-size:var(--fs-small);line-height:var(--lh-16)}
.careers-image_wrap{border-radius:var(--r-main);overflow:hidden;aspect-ratio:16/9}

.carreers-process_wrap{background:var(--sand);border-radius:var(--r-main);padding:clamp(1.25rem,2.4vw,2rem);display:flex}
.process-list{display:flex;flex-direction:column;gap:var(--s-6);flex:1;justify-content:space-between}
.donut-dot-card{
  display:flex;align-items:flex-start;gap:var(--s-5);
  padding-bottom:var(--s-6);border-bottom:1px solid var(--hairline-dark);
}
.donut-dot-card:last-child{border-bottom:0;padding-bottom:0}
.donut{
  --p:0;width:42px;height:42px;flex:none;border-radius:50%;
  background:conic-gradient(var(--donut-color,var(--accent)) calc(var(--p)*1%), rgba(25,25,25,.10) 0);
  position:relative;
}
.donut::after{
  content:"";position:absolute;inset:7px;border-radius:50%;background:var(--sand);
}
.donut-copy{display:flex;flex-direction:column;gap:var(--s-1);color:var(--ink)}
.donut-copy .mono{opacity:.45}
.donut-copy h6{font-size:var(--fs-h6);font-weight:var(--fw-medium)}
.donut-copy p{font-size:var(--fs-small);color:var(--ink-soft);line-height:var(--lh-15)}

/* =========================================================
   Clients marquee
   ========================================================= */
.section--clients{background:var(--bg-forest);color:var(--sand);overflow:hidden}
.g-hero_wrap{display:flex;flex-direction:column;gap:var(--s-4);align-items:center;text-align:center}
.marquee-wrap{
  margin-top:var(--sec-medium);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;gap:clamp(2rem,6vw,5rem);width:max-content;will-change:transform}
.logo-item{
  font-family:var(--font-mono);font-size:clamp(1rem,2.2vw,1.6rem);
  letter-spacing:.14em;text-transform:uppercase;opacity:.42;white-space:nowrap;
  transition:opacity .35s ease,color .35s ease;
}
.logo-item:hover{opacity:1;color:var(--accent)}

/* =========================================================
   Footer
   ========================================================= */
.footer_container{background:var(--bg-forest);color:var(--sand);position:relative;z-index:2}
.section-footer{background:var(--bg-forest);color:var(--sand)}
.footer-item_wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-8);
  padding-bottom:var(--sec-medium);border-bottom:1px solid var(--hairline);
}
.footer-item_grid{display:flex;flex-direction:column;gap:var(--s-7)}
.f-item{display:flex;flex-direction:column;gap:var(--s-2);font-size:var(--fs-small)}
.f-item a:hover{color:var(--accent)}
.f-links{display:flex;flex-direction:column;gap:var(--s-2)}
.f-logo_wrap{display:flex;align-items:flex-end;justify-content:flex-end}
.f-wordmark{
  font-family:var(--font-mono);font-weight:var(--fw-medium);
  font-size:clamp(2rem,6vw,4.5rem);letter-spacing:.06em;
  color:var(--forest-tint);line-height:1;
}
.g-link-box{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-6);flex-wrap:wrap;padding-top:var(--s-6);
}
.legal-link-wrap{display:flex;gap:var(--s-6)}
.g-link-box a:hover{color:var(--accent)}

/* =========================================================
   Animation utility states
   ========================================================= */
.gsap_split_word-mask{overflow:clip;position:relative;display:inline-block;vertical-align:top}
.gsap_split_word{position:relative;display:inline-block;will-change:transform}
.gsap_split_line-mask{overflow:clip;display:block}
.gsap_split_line{display:block;will-change:transform}
[data-fade],[data-reveal]{will-change:transform,opacity}
.js-ready [data-fade],.js-ready [data-reveal]{opacity:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .js-ready [data-fade],.js-ready [data-reveal]{opacity:1 !important}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1100px){
  .hero-grid_3{grid-template-columns:1fr 1fr;row-gap:var(--s-8)}
  .hero-grid_item.grid-right{grid-column:1/-1}
  .hero-grid_item.grid-right{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s-8)}
  .study-card{grid-template-columns:1fr}
  .careers-grid{grid-template-columns:1fr}
  .footer-item_wrap{grid-template-columns:repeat(2,1fr)}
  .f-logo_wrap{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:900px){
  .cta-wrap{grid-template-columns:1fr}
  .cta-img-wrap{min-height:240px;order:-1}
  .grid-approach{grid-template-columns:1fr}
  .expertise-body_inner{grid-template-columns:1fr;gap:var(--s-4)}
  .expertise-body_inner p,.tag-list{grid-column:1}
  .tag-list{justify-content:flex-start}
  .expertise-head{grid-template-columns:2.5rem 1fr 1.5rem}
}
@media (max-width:820px){
  .menu{display:flex}
  /* The panel is absolutely positioned inside .nav_fixed (itself fixed at the
     viewport top) rather than `position:fixed; inset:0`. Absolute positioning
     resolves against .nav_fixed either way, so `transform` / `will-change` /
     `backdrop-filter` on the nav can no longer hijack the containing block and
     squash the overlay into the ~80px bar — and the nav gets to keep its
     compositing layer while the menu opens instead of having it torn down on
     the animation's first frame. */
  .nav-navigation_item{
    position:absolute;top:0;left:0;right:0;
    height:100vh;height:100dvh;
    display:block;overflow:hidden;
    background:var(--ink);color:var(--sand);
    /* the reveal is two counter-sliding transforms rather than an animated
       clip-path: same wipe, but it runs on the compositor instead of
       repainting a full-screen panel on every frame */
    transform:translateY(-100%);
    pointer-events:none;overscroll-behavior:contain;
    /* visibility keeps the closed menu out of the tab order — an off-screen
       transform alone still leaves the links focusable behind the page */
    visibility:hidden;
    will-change:transform;
    transition:transform .65s var(--ease-io), visibility 0s linear .65s;
  }
  .nav_fixed.menu-open .nav-navigation_item{
    transform:translateY(0);pointer-events:auto;
    visibility:visible;transition:transform .65s var(--ease-io), visibility 0s linear 0s;
  }
  /* the panel now hangs off .nav_fixed, so any transform on the nav — the
     scroll-hide slide, or the hero intro's lingering inline tween — would drag
     it along. `will-change` stays put so the nav keeps its compositing layer. */
  .nav_fixed.menu-open{transform:none !important}
  /* no blurred bar over the open overlay — it would only tint a flat colour */
  .nav_fixed.menu-open::before{opacity:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  /* height:100% + translateY(100%) exactly cancels the panel's -100%, so the
     links hold still while the panel's edge sweeps down over them */
  .navigation-item{
    height:100%;padding:var(--global-pad);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s-5);
    transform:translateY(100%);
    will-change:transform;
    transition:transform .65s var(--ease-io);
  }
  .nav_fixed.menu-open .navigation-item{transform:translateY(0)}
  .nav-item{height:auto;font-size:1.4rem;letter-spacing:.06em}
  .nav-item_inner{flex-direction:row}
  .nav-item_inner>span:last-child{display:none}
  /* 34px was under the 44px touch-target floor; the negative inline margin
     keeps the glyph optically on the container edge while the box grows */
  .menu{position:relative;z-index:2;width:44px;height:44px;margin-inline-end:-10px}
  .brand{position:relative;z-index:2}
  .nav_fixed.menu-open .nav{color:var(--sand)}

  .hero_header-wrap{grid-template-columns:1fr;justify-items:center;gap:var(--s-6)}
  .hero-heading_left,.hero-heading_right{justify-self:center;text-align:center}
  .hero-visual{width:min(62vw,300px)}
  .hero-grid_3{grid-template-columns:1fr}
  .hero-grid_item.grid-right{grid-template-columns:1fr}
  .flex-horizontal{align-items:flex-start}
  .studies-container{margin-top:var(--sec-small)}
  .study-stats{gap:var(--s-7)}
}
@media (max-width:560px){
  .footer-item_wrap{grid-template-columns:1fr}
  .g-link-box{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .mobile-hide{display:none}
  .insight-link{flex-direction:column;align-items:flex-start}
}