/* ═══════════════════════════════════════════════════════════
   EduBrahma - compiled from "EduBrahma Website (Paper).dc.html"
   Palette and metrics are carried over verbatim from the design.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#f7f5f0;
  --paper-2:#f2efe8;
  --white:#ffffff;
  --ink:#17161c;
  --ink-2:#3a3830;
  --body:#55524c;
  --body-2:#4a4740;
  --muted:#8d8471;
  --muted-2:#a89e89;
  --rule:#e8e3d8;
  --gold:#c99a34;
  --gold-deep:#a8801f;
  --blue:#1f5fe0;
  --gutter:72px;
  --maxw:1340px;
  /* Measured height of the nav once it goes solid: padding 15*2 + the 32px
     brand mark, minus its optical -3px nudge, plus the 2px progress rail.
     Frames whose top edge is real content subtract it so they land below the
     bar rather than beneath it. */
  --nav-h:60px;
  --spectrum:linear-gradient(90deg,#e5323e,#f5a623,#f5d301,#39a935,#1f5fe0,#e5323e);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:var(--gold-deep); text-decoration:none; }
a:hover{ color:var(--gold); }
::selection{ background:rgba(201,154,52,.22); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px;
  font-size:12px; font-weight:700; letter-spacing:.16em;
}
.skip-link:focus{ left:12px; top:12px; color:var(--paper); }

/* ── keyframes ─────────────────────────────────────────── */
@keyframes pgPulse{ 0%{transform:scale(1);opacity:.6;} 100%{transform:scale(2.6);opacity:0;} }
@keyframes pgSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes pgSpinRev{ from{transform:rotate(360deg);} to{transform:rotate(0deg);} }
@keyframes pgDrift{ 0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(3%,-4%,0) scale(1.14);} }
@keyframes pgRise{ from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:none;} }
@keyframes pgWord{ from{opacity:0;transform:translateY(46px) rotate(2deg);} to{opacity:1;transform:none;} }
@keyframes pgLineX{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
@keyframes pgSpectrum{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
@keyframes pgBob{ 0%,100%{transform:translateY(0);opacity:.85;} 50%{transform:translateY(9px);opacity:.28;} }
@keyframes pgSweep{ 0%{transform:translateX(-140%);} 100%{transform:translateX(340%);} }
@keyframes pgDotA{ from{transform:rotate(0deg) scaleY(2.632);} to{transform:rotate(-360deg) scaleY(2.632);} }
@keyframes pgDotB{ from{transform:rotate(0deg) scaleY(2);} to{transform:rotate(360deg) scaleY(2);} }
@keyframes pgDotC{ from{transform:rotate(0deg) scaleY(3.571);} to{transform:rotate(-360deg) scaleY(3.571);} }
@keyframes pgShimmer{ 0%{background-position:120% 50%;} 55%,100%{background-position:-60% 50%;} }
/* Sphere self-rotation, ported verbatim from the Claude Design source
   "EduBrahma OG Image.dc.html" (ogRotate / ogGlint / ogTerminator /
   ogBounceLight). The scaleX squash is the whole trick: the lit band
   compresses to .35 as it nears the limb and opens to 1 at centre, which is
   foreshortening. A band translated at constant width reads as a moving
   grid; a static highlight reads as a dent. Only the squash reads as a
   sphere turning. All four layers share one 18s clock - they are one
   lighting model, and desyncing them breaks the illusion. */
@keyframes pgSphRotate{
  0%  { transform:translateX(-58%) scaleX(.35); opacity:0; }
  18% { transform:translateX(-30%) scaleX(.8);  opacity:1; }
  50% { transform:translateX(0%)   scaleX(1);   opacity:1; }
  82% { transform:translateX(30%)  scaleX(.8);  opacity:1; }
  100%{ transform:translateX(58%)  scaleX(.35); opacity:0; }
}
@keyframes pgSphGlint{
  0%  { transform:translate(-40%,0) scale(.3); opacity:0; }
  22% { transform:translate(-22%,0) scale(.8); opacity:.95; }
  50% { transform:translate(0,0)    scale(1);  opacity:1; }
  78% { transform:translate(22%,0)  scale(.8); opacity:.8; }
  100%{ transform:translate(40%,0)  scale(.3); opacity:0; }
}
@keyframes pgSphTerm{ 0%{ opacity:.85; } 50%{ opacity:.3; } 100%{ opacity:.85; } }
@keyframes pgSphBounce{ 0%,100%{ opacity:.75; } 50%{ opacity:.35; } }

/* ── ambient field ─────────────────────────────────────── */
.pg-field-wrap{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; perspective:1400px; }
.pg-field-tint{
  position:absolute; inset:-12%;
  background:radial-gradient(ellipse 46% 40% at 78% 30%, rgba(201,154,52,.11), transparent 64%),
             radial-gradient(ellipse 50% 44% at 14% 78%, rgba(31,95,224,.06), transparent 64%);
  animation:pgDrift 64s ease-in-out infinite;
}
#pgField{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#pgGlow{
  position:absolute; top:0; left:0; width:620px; height:620px; margin:-310px 0 0 -310px;
  border-radius:50%; background:radial-gradient(circle, rgba(201,154,52,.14), rgba(201,154,52,0) 66%);
  opacity:0; transition:opacity .8s ease;
}
.pg-shell{ position:relative; z-index:1; }

/* ── shared ────────────────────────────────────────────── */
.label{ margin:0; font-size:10px; font-weight:700; letter-spacing:.26em; color:var(--muted-2); }
.spectrum-line{
  background:var(--spectrum); background-size:200% 100%;
  animation:pgSpectrum 8s linear infinite;
}

/* ── nav ───────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:26px var(--gutter); background:rgba(247,245,240,0);
  border-bottom:1px solid rgba(201,154,52,0);
  transition:background .5s ease, border-color .5s ease, padding .5s ease;
}
/* Opaque, not 90% + blur. At .9 the hero bled through the bar, so landing on
   #innovations still showed a smear of the previous section above the band
   even though the band's top edge was exactly flush under the nav. The blur
   is kept for browsers that composite it, but with a solid backdrop it no
   longer has anything to reveal. */
.nav.is-solid{
  background:var(--paper); border-bottom-color:var(--rule);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:15px var(--gutter);
}
/* Full-bleed deliberately: the nav is fixed chrome over the hero, and the hero
   is NOT on the --maxw rail (it pads straight to --gutter). Constraining the
   nav to 1340px put the brand 538px inboard of the headline beneath it at a
   2560px viewport. Edge-to-edge puts brand and headline on the same 72px line.
   Below ~1484px the gutter governs and this changes nothing. */
.nav__inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.nav__brand{ display:flex; align-items:center; gap:9px; }
.nav__brand img{ width:auto; display:block; }
/* nav__word bakes in the "Innovations Private Limited" subtitle beneath the
   EduBrahma wordmark, so its own bounding-box center sits below the bold
   title line. align-items:center centers the boxes, which visually reads as
   the mark sitting low against the title - nudge it up to optically match. */
.nav__mark{ height:32px; margin-top:-3px; }
.nav__word{ height:28px; }
.nav__links{ display:flex; align-items:center; gap:36px; font-size:11px; font-weight:700; letter-spacing:.2em; }
.nav__links a{ color:var(--muted); transition:color .3s ease; }
.nav__links a:hover, .nav__links a:focus-visible{ color:var(--ink); }
/* Namaste - jumps to the closing note. Sized to a 40px box so the tap target
   is close to the 44px guideline while the drawn glyph stays nav-sized. */
.nav__links a.nav__namaste{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin:-8px -10px -8px -4px; border-radius:10px;
  color:var(--muted-2); transition:color .3s ease, background .3s ease;
}
.nav__links a.nav__namaste:hover, .nav__links a.nav__namaste:focus-visible{
  color:var(--gold-deep); background:rgba(201,154,52,.1);
}
/* The PNG ships pre-coloured in --muted, so a browser without mask support
   still shows the glyph correctly at rest; where masks work, currentColor takes
   over and the hover/focus gold applies. The art is dilated at build time -
   its native strokes are sub-pixel at this size and would render as a wisp. */
.nav__namaste-mark{
  width:21px; height:21px; display:block;
  background:url('../assets/namaste-mask.png') center/contain no-repeat;
}
@supports (mask-image:url(#m)) or (-webkit-mask-image:url(#m)){
  .nav__namaste-mark{
    background:currentColor;
    -webkit-mask:url('../assets/namaste-mask.png') center/contain no-repeat;
    mask:url('../assets/namaste-mask.png') center/contain no-repeat;
  }
}
.nav__rail{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:rgba(201,154,52,.08); }
.nav__progress{ height:100%; width:0%; background:linear-gradient(90deg,#e5323e,#f5a623,#f5d301,#39a935,#1f5fe0); background-size:200% 100%; animation:pgSpectrum 8s linear infinite; }

/* ── hero ──────────────────────────────────────────────── */
.hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; padding:130px var(--gutter) 72px; overflow:hidden; }
.hero__blob{ position:absolute; border-radius:50%; pointer-events:none; }
.hero__blob--gold{ top:-220px; right:-170px; width:660px; height:660px; background:radial-gradient(circle,rgba(201,154,52,.26),transparent 66%); animation:pgDrift 36s ease-in-out infinite; }
.hero__blob--blue{ bottom:-260px; left:-200px; width:620px; height:620px; background:radial-gradient(circle,rgba(31,95,224,.10),transparent 66%); animation:pgDrift 46s ease-in-out infinite reverse; }

.hero__body{ position:relative; flex:1; display:flex; align-items:center; }
.hero__copy{ max-width:860px; }

.eyebrow{ display:flex; align-items:center; gap:15px; margin:0; animation:pgRise 1s ease .15s both; }
.eyebrow__dot{ position:relative; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 34% 30%, #f0cf85, #c99a34); flex:none; }
.eyebrow__dot span{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(201,154,52,.6); animation:pgPulse 4.4s ease-out infinite; }
.eyebrow__dot span:last-child{ border-color:rgba(201,154,52,.45); animation-delay:2.2s; }
.eyebrow__text{ font-size:10.5px; font-weight:700; letter-spacing:.3em; color:var(--muted); }

.hero__title{
  margin:36px 0 0; font-family:'Playfair Display',Georgia,serif; font-weight:400;
  font-size:clamp(46px,6.2vw,82px); line-height:1.12; letter-spacing:-.035em;
  color:var(--ink); text-wrap:pretty;
}
.hero__title .w{ display:inline-block; animation:pgWord 1.1s cubic-bezier(.16,.84,.24,1) var(--d) both; }
.hero__title .w--em{ margin-right:.3em; font-style:italic; }
.shimmer{
  display:inline-block;
  background:linear-gradient(100deg,#a8801f 0%,#a8801f 34%,#f4dda2 46%,#fff6df 50%,#f4dda2 54%,#c99a34 66%,#a8801f 100%);
  background-size:280% 100%;
  padding:.1em .12em .18em; margin:-.1em -.12em -.18em;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:pgShimmer 5.5s ease-in-out 1.6s infinite;
}
.hero__lede{
  margin:32px 0 0; max-width:640px;
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:400;
  font-size:26px; line-height:1.5; color:var(--ink-2);
  animation:pgRise 1.1s ease .8s both;
}
.hero__sub{ margin:20px 0 0; max-width:520px; font-size:15px; line-height:1.85; color:var(--body); animation:pgRise 1.1s ease .95s both; }
.hero__rule{
  position:relative; width:100%; max-width:540px; height:2px; margin-top:58px; overflow:hidden;
  transform-origin:left;
  animation:pgLineX 1.7s cubic-bezier(.16,.84,.24,1) .9s both, pgSpectrum 8s linear infinite;
}
.spectrum-line__sweep{ position:absolute; top:0; bottom:0; width:22%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); animation:pgSweep 5s ease-in-out 2.6s infinite; }

/* Anchor to #belief. `align-self:flex-start` + `width:max-content` matter: as a
   flex child of .hero it would otherwise stretch the full row, making a
   full-width invisible click target. Hit area stays on the tick and the words. */
.hero__cue{
  position:relative; margin:0; display:flex; align-items:center; gap:13px;
  align-self:flex-start; width:max-content;
  font-size:10px; font-weight:700; letter-spacing:.26em; color:var(--muted-2);
  transition:color .3s ease;
}
.hero__cue:hover, .hero__cue:focus-visible{ color:var(--ink); }
.hero__cue-tick{ display:inline-block; width:1px; height:32px; background:linear-gradient(180deg,transparent,var(--gold)); animation:pgBob 2.6s ease-in-out infinite; }
/* Tick settles from its idle bob on hover, so the cue reads as "click me"
   rather than as ambient decoration. */
.hero__cue:hover .hero__cue-tick{ animation-play-state:paused; background:linear-gradient(180deg,transparent,var(--gold-deep)); }

/* ── orbit ─────────────────────────────────────────────── */
.orbit{ position:absolute; top:50%; right:5vw; width:560px; height:560px; margin-top:-280px; pointer-events:none; }
.orbit__inner{ position:absolute; left:50%; top:50%; width:560px; height:560px; margin:-280px 0 0 -280px; transform-origin:center center; }
.orbit__plane{ position:absolute; }
.orbit__plane--a{ inset:0; transform:rotate(-12deg) scaleY(.38); }
.orbit__plane--b{ inset:74px; transform:rotate(22deg) scaleY(.5); }
.orbit__plane--c{ inset:150px; transform:rotate(38deg) scaleY(.28); }
.orbit__ring{ position:absolute; inset:0; border-radius:50%; }
.orbit__ring--a{ border:1px solid rgba(201,154,52,.32); animation:pgSpin 150s linear infinite; }
.orbit__ring--b{ border:1px dashed rgba(31,95,224,.3); animation:pgSpinRev 108s linear infinite; }
.orbit__ring--c{ border:1px solid rgba(23,22,28,.11); animation:pgSpin 82s linear infinite; }
.orbit__ring-inset{ position:absolute; inset:7px; border-radius:50%; border:1px solid rgba(201,154,52,.12); }
.orbit__dot{ position:absolute; border-radius:50%; }
.orbit__dot--a{ top:-7px; left:50%; width:14px; height:14px; margin-left:-7px; background:radial-gradient(circle at 33% 28%, #fdf0cf, #d8ab48 52%, #a8801f); box-shadow:0 0 18px 5px rgba(201,154,52,.4); animation:pgDotA 150s linear infinite; }
.orbit__dot--b{ top:-6px; left:50%; width:11px; height:11px; margin-left:-5.5px; background:radial-gradient(circle at 33% 28%, #9dbcf5, #1f5fe0); box-shadow:0 0 14px 4px rgba(31,95,224,.3); animation:pgDotB 108s linear infinite; }
.orbit__dot--c{ top:-4px; left:50%; width:8px; height:8px; margin-left:-4px; background:radial-gradient(circle at 33% 28%, #c9c0ac, #6f6659); animation:pgDotC 82s linear infinite; }
.orbit__sun{
  position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%;
  background:radial-gradient(circle at 33% 28%, #fdf0cf, #e0b45a 46%, #a8801f 92%);
  box-shadow:inset -14px -18px 34px rgba(120,86,16,.55), inset 10px 12px 26px rgba(255,247,224,.6), 0 26px 60px -22px rgba(168,128,31,.6);
}
/* ── golden sphere ─────────────────────────────────────────
   Body gradient, drop shadow and the four lit layers are the OG image's.
   overflow:hidden clips the travelling layers to the disc. */
.orbit__sun, .closing__core{
  overflow:hidden;
  background:radial-gradient(circle at 36% 30%, #f5dc9f, #d9ab4c 44%, #9c7419 84%, #7d5c12 100%);
  box-shadow:0 30px 66px -24px rgba(140,102,20,.7), 0 6px 18px -6px rgba(120,86,16,.35);
}
.orbit__sun > span, .closing__core > span{ position:absolute; inset:0; transform-origin:center; }
.sph__lit{
  background:radial-gradient(ellipse 52% 66% at 50% 32%, rgba(255,253,243,.9), rgba(255,246,220,.28) 44%, transparent 70%);
  animation:pgSphRotate 18s ease-in-out infinite;
}
.sph__glint{
  background:radial-gradient(ellipse 16% 12% at 50% 24%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%);
  animation:pgSphGlint 18s ease-in-out infinite;
}
.sph__term{
  border-radius:50%;
  box-shadow:inset -18px -20px 38px rgba(110,79,14,.62), inset -6px -7px 14px rgba(90,64,10,.4);
  animation:pgSphTerm 18s ease-in-out infinite;
}
.sph__bounce{
  border-radius:50%;
  box-shadow:inset -3px -8px 12px rgba(255,226,150,.45);
  animation:pgSphBounce 18s ease-in-out infinite;
}
.sph__rim{ border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,246,220,.28); }
.orbit__sun-pulse{ position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%; border:1px solid rgba(201,154,52,.4); animation:pgPulse 5.4s ease-out infinite; }

/* ── products ──────────────────────────────────────────── */
/* Landing target for both BELIEF affordances (nav link and hero cue).
   56px is the SOLID nav's height. The nav is 78px at the top of the page and
   shrinks to 56px once `is-solid` applies past 50px of scroll (padding 26px ->
   15px) - and you are always scrolled by the time you land here. Offsetting by
   the 78px resting height left a 22px band of hero showing above this section.
   Measure the scrolled height, never the resting one.
   The reading sections keep 90px: they want air above a heading, whereas this
   band should arrive flush under the bar. */
/* The BELIEF nav link targets this band, and it is the top of the Section 2
   frame - so the offset here is what lands the whole frame below the bar. */
.products{ position:relative; padding:34px var(--gutter); background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden; scroll-margin-top:var(--nav-h); }
/* Full-bleed with the nav and footer. This is a band, not prose: one line,
   label left, logos right, space-between - the same shape as the chrome, and
   its background already spans edge to edge. The rail stays on the reading
   sections (belief, vision/mission), which need a measure limit. */
.products__inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:56px; flex-wrap:wrap; }
.products__logos{ display:flex; align-items:center; gap:52px; }
.products__logo{ display:block; opacity:.86; transition:opacity .4s ease, transform .4s ease; }
.products__logo:hover, .products__logo:focus-visible{ opacity:1; transform:translateY(-2px); }
.products__logo img{ width:auto; display:block; }
.products__logos a:nth-of-type(1) img{ height:30px; }
.products__logos a:nth-of-type(2) img{ height:23px; }
.products__sep{ width:1px; height:26px; background:linear-gradient(180deg,transparent,var(--gold),transparent); }

/* ── belief ────────────────────────────────────────────── */
.belief{ position:relative; padding:150px var(--gutter); background:var(--white); border-top:1px solid var(--rule); scroll-margin-top:90px; }
.belief__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:160px 1fr; gap:64px; align-items:start; }
.label--col{ padding-top:18px; }
.belief__body{ max-width:840px; }
.belief__quote{
  margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:400;
  font-size:52px; line-height:1.28; color:var(--ink); text-wrap:pretty;
}
.belief__rule{ width:90px; height:1px; margin:44px 0 0; background:var(--gold); transform-origin:left; }
.belief__text{ margin:34px 0 0; max-width:600px; font-size:14.5px; line-height:1.9; color:var(--body); }

/* ── vision / mission ──────────────────────────────────── */
/* Section 3, framed like the others. Lands flush at 0: the columns begin well
   below the padding, so the bar only ever covers white space. */
.vm{
  position:relative; padding:96px var(--gutter);
  background:var(--white); overflow:hidden;
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center;
  scroll-margin-top:0;
}
.vm__orb{ position:absolute; top:10%; right:-140px; width:460px; height:460px; border-radius:50%; border:1px solid rgba(201,154,52,.18); pointer-events:none; }
/* width:100% because the frame centres it as a flex item. */
.vm__inner{ width:100%; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
/* MISSION targets the second column. Side by side it is already in the frame
   VISION lands on, so the offset just keeps it clear of the bar; stacked on a
   phone it is a genuine jump further down the section. */
.vm__col{ position:relative; padding-top:30px; border-top:1px solid var(--rule); scroll-margin-top:var(--nav-h); }
.vm__line{ position:absolute; top:-1px; left:0; width:72px; height:2px; transform-origin:left; }
.vm__line--gold{ background:var(--gold); }
.vm__line--blue{ background:var(--blue); }
.vm__eyebrow{ margin:0; display:flex; align-items:baseline; gap:16px; }
.vm__num{ font-family:'Playfair Display',Georgia,serif; font-size:16px; }
.vm__num--gold{ color:var(--gold); }
.vm__num--blue{ color:var(--blue); }
.vm__kicker{ font-weight:700; font-size:11px; letter-spacing:.24em; color:var(--muted); }
/* Sized for the frame this section now owns. At 27px in an 882px viewport the
   pillars read as a footnote next to an 82px hero and a 52px pull quote. */
.vm__head{ margin:28px 0 0; font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:clamp(26px,2.5vw,36px); line-height:1.32; color:var(--ink); letter-spacing:-.01em; text-wrap:pretty; }
/* The measure cap matters more than the size bump: across a 630px column this
   text was running ~93 characters a line, well past a readable 65-75. */
.vm__text{ margin:26px 0 0; max-width:62ch; font-size:15px; line-height:1.85; color:var(--body-2); }

/* Closing cadence - the pillar's own paragraph distilled to three words, set in
   the italic serif this site reserves for its most human lines (hero lede,
   belief quote, sign-off). A fourth typographic register, not a new component. */
.vm__cadence{ margin-top:36px; }
.vm__cadence-rule{ display:block; width:44px; height:1px; background:var(--gold); }
.vm__cadence-rule--blue{ background:var(--blue); }
.vm__cadence-line{
  margin:18px 0 0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:21px; line-height:1.5; color:var(--ink-2);
}

/* ── founder members ───────────────────────────────────── */
/* Section 4 is its own frame: clicking TEAM should land on the founders and
   nothing else. scroll-margin-top:0 is what makes that true - the usual 90px
   nav offset would pull the previous section back into shot by exactly that
   much. The nav overlays the top edge instead, which costs nothing because the
   content is centred. min-height (not height) so a short screen grows the
   section rather than clipping the roster. */
.team{
  position:relative; padding:96px var(--gutter);
  background:var(--paper-2); border-top:1px solid var(--rule); overflow:hidden;
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center;
  scroll-margin-top:0;
}
/* Clay-pottery watermark - hands shaping a vessel, behind the people who shape
   the work. Held low and mostly desaturated so it stays a texture rather than a
   photograph competing with the founders; a little of the clay tone is kept
   because full greyscale fights the warm paper ground. The veil above it keeps
   the text side clean so the bios hold their contrast. */
/* The desaturation is baked into the file, NOT applied here. A `filter` on a
   full-section pseudo-element pulls the section into one raster layer, so every
   accordion repaint re-rasterises a 1920px image - which is what made the
   watermark and the portraits visibly jump on repeat hovers. */
.team::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url('../assets/pottery-watermark.jpg') center/cover no-repeat;
  opacity:.14;
}
.team::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(242,239,232,.35) 0%, rgba(242,239,232,.72) 42%, rgba(242,239,232,.88) 100%);
}
/* z-index needed, not just position: both watermark layers are generated
   content and would otherwise paint after the content in DOM order. */
/* width:100% because it is now a flex item; without it the rail collapses to
   content width and the section stops being centred on the page. */
.team__inner{ position:relative; z-index:1; width:100%; max-width:var(--maxw); margin:0 auto; }
.team__head{ margin:22px 0 0; max-width:640px; font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:32px; line-height:1.35; color:var(--ink); letter-spacing:-.01em; }
/* Centred as a block on the section rail, but the text inside stays
   left-aligned - centring the bios would wreck the measure. width:fit-content
   centres what is actually painted: a stretched roster box would leave slack
   to the right of the text and the block would read as left-heavy despite
   being mathematically centred. */
.team__showcase{ margin:72px auto 0; width:100%; max-width:1100px; display:flex; align-items:flex-start; gap:56px; }

.team__photos{ display:flex; gap:16px; flex:none; }
.team__photo-col{ display:flex; flex-direction:column; gap:16px; }
/* The second column drops by roughly half a card, so the pair reads as a
   composition rather than two tiles on one baseline. */
.team__photo-col--offset{ margin-top:58px; }

.team__photo-card{
  position:relative; width:150px; height:190px; border-radius:12px; overflow:hidden;
  flex:none; transition:opacity .35s ease;
}
.team__photo-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:filter .5s ease; }
.team__photo-card.is-dimmed{ opacity:.55; }

/* Names stay stacked; the profile they open lives in its own column (below).
   That is what removes the hover jump - when the profile sat under each name,
   activating one collapsed it above the other and the row being pointed at
   teleported upward by its full height (measured: 249px). Nothing in this
   column moves any more, so there is nothing to chase. */
.team__roster{ flex:0 0 auto; display:flex; flex-direction:column; gap:26px; padding-top:2px; }
/* No opacity dimming on the member: the un-hovered founder is de-emphasised by
   their PHOTOGRAPH dropping back, never by fading their text. Dimming the text
   to .5 took the name from 10.23:1 to 2.65:1 and the role to 1.68:1 - under
   even the 3:1 large-text floor, so hovering one founder made the other's name
   unreadable to anyone with low vision. Selection is still carried three ways:
   the gold mark widens, the name darkens to --ink, and the portrait colours. */

.team__member-row{ display:flex; align-items:center; gap:13px; }
.team__mark{ width:16px; height:11px; border-radius:5px; background:rgba(23,22,28,.2); flex:none; transition:width .3s ease, background .3s ease; }
.team__member.is-active .team__mark{ width:23px; background:var(--gold-deep); }
.team__name{ margin:0; font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:21px; color:var(--ink-2); transition:color .3s ease; }
.team__member.is-active .team__name{ color:var(--ink); }
.team__role{ margin:6px 0 0 29px; font-size:10.5px; font-weight:700; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }

.team__social{ display:flex; align-items:center; gap:6px; }
.team__social a{
  display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:6px; color:var(--muted); transition:color .15s ease, background .15s ease;
}
.team__social a:hover, .team__social a:focus-visible{ color:var(--gold-deep); background:rgba(201,154,52,.12); }
.team__social svg{ width:12px; height:12px; }

/* ── third column: the profile panel ──
   Resting state (no JS, touch, or narrow) is a plain labelled list of both
   profiles, so the credentials are never locked behind an interaction. The
   .is-enhanced rules below lift them into one cross-fading box. */
.team__profiles{ position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:26px; }
.team__profile::before{
  content:attr(data-name); display:block; margin-bottom:7px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

.team__cred{ margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:16px; line-height:1.4; color:var(--ink-2); }
.team__bio{ margin:10px 0 0; font-size:13.5px; line-height:1.9; color:var(--body-2); }

/* ── the accordion, enabled only where hover exists ──────────
   Everything above is the no-JS / touch resting state: photos in colour,
   profiles open. `.is-enhanced` (added by js/main.js behind a hover query) is
   what turns it into the hover accordion, so a device that cannot hover never
   ends up with the text locked away. */
.team__showcase.is-enhanced .team__photo-card{ cursor:pointer; }
/* will-change gives each portrait its own compositor layer, so its filter
   transition does not drag the section's paint along with it. */
.team__showcase.is-enhanced .team__photo-card img{ filter:grayscale(1) brightness(.8); will-change:filter; }
.team__showcase.is-enhanced .team__photo-card.is-active img{ filter:grayscale(0) brightness(1); }
.team__showcase.is-enhanced .team__member{ cursor:pointer; }

.team__showcase.is-enhanced .team__social{ opacity:0; transform:translateX(-6px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.team__showcase.is-enhanced .team__member.is-active .team__social{ opacity:1; transform:none; pointer-events:auto; }

/* Both profiles now occupy the SAME box, stacked and cross-fading. The panel's
   size therefore never depends on which one is showing, and the roster beside
   it can never be displaced - which is the whole point. Absolutely positioned
   children still lay out at their natural height, so main.js measures them
   directly and holds the taller of the two. */
.team__showcase.is-enhanced .team__profiles{ display:block; }
.team__showcase.is-enhanced .team__profile{
  position:absolute; top:0; left:0; right:0;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .26s ease, transform .36s cubic-bezier(.16,.84,.24,1);
}
.team__showcase.is-enhanced .team__profile.is-shown{
  opacity:1; transform:none; pointer-events:auto;
  transition:opacity .34s ease .06s, transform .44s cubic-bezier(.16,.84,.24,1) .04s;
}
/* The name is already beside it in the roster once enhanced. */
.team__showcase.is-enhanced .team__profile::before{ display:none; }

/* ── tap model (no hover: phones, tablets) ──
   One profile at a time, switched by tapping a photo or a name, rather than
   both bios stacked at once. The shown profile stays in normal flow - a tap is
   user-initiated, so it may change the page height; nothing is chasing a
   cursor here. */
.team__showcase.is-tap .team__profile{ display:none; }
.team__showcase.is-tap .team__profile.is-shown{ display:block; }
.team__showcase.is-tap .team__member,
.team__showcase.is-tap .team__photo-card{ cursor:pointer; }
/* The un-chosen founder recedes, so which one you are reading is obvious.
   Photograph only - never the text, which has to stay readable. */
.team__showcase.is-tap .team__photo-card.is-dimmed{ opacity:.5; }
.team__showcase.is-tap .team__photo-card.is-active{ box-shadow:0 0 0 2px var(--gold); }

/* ── closing ───────────────────────────────────────────── */
/* ── viewport frames ──
   A frame holds exactly one viewport and stacks its sections inside. min-height
   (never height) so a short screen grows the frame rather than clipping it. */
.frame{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  scroll-margin-top:0;
}

/* Section 2. The one frame whose TOP edge is content people must read - the
   logo band - so it lands below the nav instead of under it, and gives back
   exactly that height so its bottom still meets the viewport edge. The team and
   closing frames land flush at 0 because their content is centred and the bar
   only ever covers empty space. */
.frame--belief{
  min-height:calc(100vh - var(--nav-h)); min-height:calc(100dvh - var(--nav-h));
}
.frame--belief .belief{ flex:1 1 auto; display:flex; align-items:center; padding:96px var(--gutter); }
.frame--belief .belief__inner{ width:100%; }

/* Section 5: closing + footer as one frame. The closing takes what the footer
   leaves, so the footer is always in shot whatever height it happens to be -
   it stacks and roughly doubles on phones. Landing flush at 0 is deliberate:
   offsetting by the nav would push the footer out of frame by that offset. */
.finale{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  scroll-margin-top:0;
}
.closing{
  position:relative; flex:1 1 auto;
  padding:120px var(--gutter); background:var(--white); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.closing__inner{ position:relative; width:100%; max-width:900px; margin:0 auto; text-align:center; }
.closing__mark{ position:relative; width:88px; height:88px; margin:0 auto 56px; }
/* Geometry only - body gradient, shadow and lit layers come from the shared
   .orbit__sun/.closing__core rule above. Redeclaring background here would
   win on source order and undo it. */
.closing__core{ position:absolute; inset:0; border-radius:50%; }
.closing__pulse{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(201,154,52,.55); animation:pgPulse 5s ease-out infinite; }
.closing__pulse--late{ border-color:rgba(201,154,52,.4); animation-delay:2.5s; }
.closing__orbit{ position:absolute; inset:-64px; border-radius:50%; border:1px solid rgba(23,22,28,.07); animation:pgSpin 70s linear infinite; }
.closing__orbit-dot{ position:absolute; top:-3px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--gold); }
.closing__line{ margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:400; font-size:44px; line-height:1.3; color:var(--ink); text-wrap:pretty; }
.closing__rule{ width:150px; height:2px; margin:44px auto 0; }

/* ── footer ────────────────────────────────────────────── */
/* Three zones on one row - brand left, contact centred, legal right - so the
   band stays as short as its tallest item (the brand mark) instead of as tall
   as a five-line stack. */
.footer{ padding:22px var(--gutter) 24px; background:var(--paper); border-top:1px solid var(--rule); }
/* Full-bleed to match the nav - both are page chrome, so they frame the
   content rail rather than sitting inside it. Also puts the contact block on
   the true viewport centre instead of the centre of a 1340px box. */
.footer__inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
/* Equal flex on the outer two columns so the contact block sits on the true
   centre line - space-between alone would place it by its neighbours' widths. */
.footer__brand{ flex:1 1 0; display:flex; align-items:center; gap:14px; }
.footer__brand img{ height:30px; width:auto; display:block; }
.footer__name{ margin:0; font-size:12.5px; font-weight:700; color:var(--ink-2); }
.footer__tag{ margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:15px; color:var(--muted); }
.footer__contact{ flex:0 0 auto; text-align:center; font-size:10.5px; line-height:1.8; color:var(--muted); letter-spacing:.04em; }
.footer__contact p{ margin:0; }
.footer__meta{ flex:1 1 0; text-align:right; font-size:10.5px; line-height:1.8; color:var(--muted); letter-spacing:.04em; }
.footer__meta p{ margin:0; }
.footer__contact a, .footer__meta a{ color:var(--muted); }
.footer__contact a:hover, .footer__meta a:hover{ color:var(--gold-deep); }

/* ═══════════ RESPONSIVE ═══════════
   The design is authored desktop-first at 72px gutters. Below,
   the gutter tightens, the two-column grids stack, and the
   decorative orbit is retired (the design's own script already
   hides it once the text column needs the width). */

@media (max-width:1180px){
  :root{ --gutter:48px; }
  .belief__quote{ font-size:44px; }
  .vm__inner{ gap:56px; }
  .team{ padding:120px var(--gutter); }
  .team__showcase{ gap:48px; }
  .closing{ padding:140px var(--gutter) 120px; }
}

/* Below this the two founder columns no longer fit beside the photos, so the
   roster stacks - and stacked, an accordion would reintroduce the jump it was
   restructured to remove. So the accordion simply does not exist here: both
   profiles are shown, and hover is left to do emphasis only. Same reason touch
   shows both. Must sit after the .is-enhanced rules to win the cascade. */
@media (max-width:1080px){
  /* No room for a third column beside the photos, so the profiles drop below.
     On a hover device that means showing both (an accordion here would
     reintroduce the jump this layout removed); on a tap device the .is-tap
     rules still show one at a time, which is the point of tapping. */
  .team__showcase{ flex-wrap:wrap; }
  .team__profiles,
  .team__showcase.is-enhanced .team__profiles,
  .team__showcase.is-tap .team__profiles{ flex:1 1 100%; display:flex; flex-direction:column; gap:26px; }
  .team__showcase.is-enhanced .team__profile{ position:static; opacity:1; transform:none; pointer-events:auto; }
  .team__showcase.is-enhanced .team__profile::before{ display:block; }
}

@media (max-width:900px){
  :root{ --gutter:36px; }
  .hero{ padding:120px var(--gutter) 56px; }
  .belief{ padding:110px var(--gutter); }
  .belief__inner{ grid-template-columns:1fr; gap:28px; }
  .label--col{ padding-top:0; }
  .belief__quote{ font-size:38px; }
  .vm{ padding:80px var(--gutter); }
  .vm__inner{ grid-template-columns:1fr; gap:64px; }
  .vm__orb{ display:none; }
  .team{ padding:110px var(--gutter); }
  /* Photos stop being a side column and become a row above the roster. The
     roster gives up its fixed width here so it cannot overflow a narrow phone. */
  .team__showcase{ flex-direction:column; align-items:center; gap:40px; margin-top:56px; width:auto; }
  .team__roster{ flex:1 1 auto; width:100%; max-width:420px; }
  .team__bio{ max-width:none; }
  .closing__line{ font-size:36px; }
  .products__inner{ gap:28px; }
}

@media (max-width:680px){
  /* The solid nav is shorter here (padding 12*2 + 26 mark). */
  :root{ --gutter:24px; --nav-h:50px; }
  .nav{ padding:18px var(--gutter); }
  .nav.is-solid{ padding:12px var(--gutter); }
  .nav__inner{ gap:20px; }
  .nav__mark{ height:26px; margin-top:-2px; }
  .nav__word{ height:23px; }
  /* The namaste mark costs the row ~40px, which overflowed the gutter at this
     width. Tighter gaps and a smaller mark keep all five items on one line
     rather than dropping the icon on phones. */
  .nav__links{ gap:13px; font-size:9.5px; letter-spacing:.14em; }
  .nav__links a.nav__namaste{ width:30px; height:30px; margin:-6px -7px -6px -2px; border-radius:8px; }
  .nav__namaste-mark{ width:17px; height:17px; }

  .hero{ padding:108px var(--gutter) 44px; min-height:auto; }
  .hero__body{ padding:48px 0 56px; }
  .hero__title{ font-size:clamp(34px,9vw,46px); }
  /* .3em + the trailing nbsp reads as a double space when the line
     wraps straight after the italic word */
  .hero__title .w--em{ margin-right:.02em; }
  .hero__lede{ font-size:21px; }
  .hero__sub{ font-size:14px; }
  .hero__rule{ margin-top:40px; }
  .eyebrow__text{ font-size:9px; letter-spacing:.22em; }

  .products{ padding:26px var(--gutter); }
  .products__logos{ gap:28px; }
  .products__logos a:nth-of-type(1) img{ height:26px; }
  .products__logos a:nth-of-type(2) img{ height:19px; }

  .belief{ padding:84px var(--gutter); }
  .belief__quote{ font-size:29px; }
  .belief__text{ font-size:14px; }

  .vm{ padding:64px var(--gutter); }
  .vm__inner{ gap:52px; }
  .vm__head{ font-size:23px; }

  .team{ padding:84px var(--gutter); }
  .team__head{ font-size:26px; }
  .team__photo-card{ width:124px; height:156px; }
  .team__photo-col--offset{ margin-top:40px; }
  .team__name{ font-size:19px; }

  .closing{ padding:104px var(--gutter) 96px; }
  .closing__mark{ width:70px; height:70px; margin-bottom:40px; }
  .closing__orbit{ inset:-44px; }
  .closing__line{ font-size:28px; }

  /* Stacked, and centred throughout - a left-aligned contact block under a
     centred one reads as a mistake at this width. */
  .footer{ padding:26px var(--gutter) 28px; }
  .footer__inner{ align-items:center; flex-direction:column; gap:18px; }
  .footer__brand, .footer__meta, .footer__contact{ flex:0 0 auto; }
  .footer__brand{ gap:12px; }
  .footer__meta{ text-align:center; }
}

/* The brand wordmark plus five nav items measure 398px of content, so they need
   446px of viewport once the 24px gutters are paid. The old 430px threshold
   left 431-445px overflowing - which is exactly where a Pro Max phone sits
   (440pt), and the nav visibly ran together there. Hiding the wordmark at 520px
   keeps a real margin: without it the row needs only 326px. The circular mark
   still identifies the site, so the wordmark is what gives way rather than the
   nav wrapping or the namaste mark being dropped. */
@media (max-width:520px){
  /* Scoped to .nav__brand deliberately. `.nav__brand img{ display:block }`
     above is (0,1,1); a bare `.nav__word` is only (0,1,0), and media queries
     add no specificity - so the plain selector lost the cascade and the
     wordmark never hid, which is precisely the bug this block exists to fix. */
  .nav__brand .nav__word{ display:none; }
}

@media (max-width:400px){
  .nav__links{ gap:9px; font-size:9px; }
  .nav__links a.nav__namaste{ width:28px; height:28px; margin:-6px -6px -6px -1px; }
  .nav__namaste-mark{ width:16px; height:16px; }
  .hero__title{ font-size:32px; }
}

/* Respect the reader's motion preference - the page carries a lot
   of ambient animation, all of it decorative. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__title .w, .eyebrow, .hero__lede, .hero__sub{ opacity:1 !important; transform:none !important; }
  #pgField, .pg-field-tint, .hero__blob{ display:none; }
}