/* =========================================================
   BNC Physics Tuition, Calicut
   Theme: dark, locked. Taken from the BNC logo.
   Brand: indigo #2E3094 (depth), cyan #00ADEF (the only accent).
   Radius: pill for pressable, 18px for panels, 10px for inputs.
   Motion: custom curves only. Nothing over 300ms in the UI.
   ========================================================= */

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  --bg:        #060814;
  --bg-2:      #090C1D;
  --surface:   #0D1128;
  --surface-2: #131836;

  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.14);

  --indigo:    #2E3094;
  --cyan:      #00ADEF;
  --cyan-hi:   #4FC8FF;
  --on-cyan:   #041224;

  --text:      #F1F4FF;
  --text-2:    #A2ACCB;
  --text-3:    #8791B0;

  --r-panel: 18px;
  --r-chip:  14px;   /* badges sitting on media */
  --r-input: 10px;
  --r-pill:  999px;

  --shell: 1200px;
  --gutter: 24px;

  /* Stronger than the CSS built-ins. The built-ins are too weak to feel intentional. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --font-d: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-b: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--font-d); font-weight: 600; line-height: 1.06; letter-spacing: -.03em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.ico { width: 1.05em; height: 1.05em; flex: none; }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--cyan); color: var(--on-cyan); font-weight: 600;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out);
}
.skip:focus { transform: none; }

/* Needs a real box. A 0x0 target never reports an intersection, so the
   observer watching it would never fire at all. */
#top-sentinel {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Entrance motion, in two registers on purpose.

   The hero is the one authored moment: copy rises in sequence
   and the portrait lifts in beside it. Everything below the
   fold simply resolves, no movement, so the page does not
   repeat the same gesture at every section.

   All of it is additive, scoped to .js. Without the script
   every element is already at its final state, so no failed
   transition can leave content stranded at opacity 0.
   --------------------------------------------------------- */
/* Below the fold: observer driven, opacity only. */
.js [data-reveal] {
  opacity: 0;
  transition: opacity 520ms var(--ease-out) var(--d, 0ms);
}
.js [data-reveal].in { opacity: 1; }

/* The hero runs off one class set on load, not five separate observer
   callbacks. A focal entrance is a load moment; making it depend on
   scroll observation is both wrong and fragile. */
.js .hero [data-reveal] {
  transform: translateY(14px);
  transition:
    opacity 620ms var(--ease-out) var(--d, 0ms),
    transform 620ms var(--ease-out) var(--d, 0ms);
}

/* Last to arrive, and the only element that sharpens. Blur is bounded to
   this one 432px card and runs once. */
.js .hero [data-reveal-media] {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  filter: blur(9px);
  transition:
    opacity 560ms var(--ease-out) var(--d, 0ms),
    transform 720ms var(--ease-out) var(--d, 0ms),
    filter 720ms var(--ease-out) var(--d, 0ms);
}

/* The graph field settles first, so the copy never rises over an empty
   backdrop. Squared paper coming into register. */
.js .hero [data-reveal-field] {
  opacity: 0;
  transform: scale(1.055);
  transform-origin: 42% 46%;
  transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out);
}

.js .hero.in [data-reveal]       { opacity: 1; transform: none; }
.js .hero.in [data-reveal-media] { opacity: 1; transform: none; filter: blur(0); }
.js .hero.in [data-reveal-field] { opacity: 1; transform: none; }

/* ---------------------------------------------------------
   Context menu guard, visual half.
   iOS long-press on an image offers "Save Image", which is the
   mobile equivalent of right-click. Text stays selectable on
   purpose: people need to copy the phone number.
   --------------------------------------------------------- */
img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  white-space: nowrap;
  font-family: var(--font-d); font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
  padding: .9rem 1.55rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    border-color 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out);
}
.btn--sm { padding: .58rem 1.1rem; font-size: .9rem; }
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--cyan); color: var(--on-cyan);
  box-shadow: 0 8px 24px -8px rgba(0,173,239,.55);
}
.btn--ghost { background: rgba(255,255,255,.035); color: var(--text); border-color: var(--line-2); }

.ico--shift { transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--cyan-hi); box-shadow: 0 12px 30px -8px rgba(0,173,239,.7); }
  .btn--ghost:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.26); }
  .btn:hover .ico--shift { transform: translateX(3px); }
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background-color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.nav.stuck {
  background: rgba(6,8,20,.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.stuck { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav__row { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav__brand img { height: 26px; width: auto; }

.nav__links { position: relative; display: flex; align-items: center; gap: 2.1rem; }
.nav__links a {
  font-size: .94rem; font-weight: 500; color: var(--text-2);
  padding-block: .35rem;
  transition: color 180ms var(--ease-out);
}
.nav__links a[aria-current="true"] { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--text); } }

/* Slides between links so you always know where you are on the page. */
.nav__marker {
  position: absolute; left: 0; bottom: -2px;
  width: 1px; height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  transform-origin: 0 50%;
  transform: translateX(0) scaleX(0);
  opacity: 0;
  transition: transform 320ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav__marker.on { opacity: 1; }

.nav__end { display: flex; align-items: center; gap: .7rem; }

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.burger:active { transform: scale(.94); }
.burger span {
  display: block; width: 15px; height: 1.5px; background: var(--text); border-radius: 2px;
  transition: transform 240ms var(--ease-out);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.menu {
  display: none;
  background: rgba(6,8,20,.97);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.menu.shown { opacity: 1; transform: none; }
.menu__inner { display: flex; flex-direction: column; padding-bottom: 1.1rem; }
.menu__inner a { padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--text-2); font-weight: 500; }
.menu__call { color: var(--cyan) !important; border-bottom: 0 !important; font-family: var(--font-d); font-weight: 600; }

/* =========================================================
   TYPE
   ========================================================= */
.display {
  font-size: clamp(2.1rem, 5.4vw, 4.3rem);
  font-weight: 600; letter-spacing: -.04em; line-height: 1.02;
  margin-bottom: 1.4rem;
}
.display em {
  font-style: italic; color: var(--cyan);
  line-height: 1.12; display: inline-block; padding-bottom: .05em;
}
.lede { font-size: clamp(1.02rem, 1.4vw, 1.17rem); color: var(--text-2); max-width: 44ch; margin-bottom: 2.1rem; }
.row-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: center; padding-top: 6rem; padding-bottom: 3.5rem; overflow: hidden; }

.hero__field {
  position: absolute; inset: -25% -15% auto -25%; height: 105%;
  background:
    radial-gradient(46% 52% at 24% 26%, rgba(46,48,148,.62), transparent 70%),
    radial-gradient(34% 42% at 76% 12%, rgba(0,173,239,.20), transparent 72%),
    radial-gradient(60% 60% at 60% 100%, rgba(0,173,239,.07), transparent 70%);
  pointer-events: none;
}
/* Graph paper. Kept deliberately against the generic-grid-background
   advisory: squared paper is the working material of school physics,
   not decoration borrowed to look technical. Masked to a soft radial
   so it reads as surface, never as a chart. */
.hero__grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(72% 68% at 42% 46%, #000 10%, transparent 78%);
  mask-image: radial-gradient(72% 68% at 42% 46%, #000 10%, transparent 78%);
  pointer-events: none;
}

.hero__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7.2fr) minmax(0, 4.8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.portrait { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 440px; }

.portrait__plate {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #C9CEDA 0%, #4A5168 46%, #0D1128 82%, #080B1C 100%);
  box-shadow: 0 34px 90px -30px rgba(0,0,0,.85);
}
/* No mix-blend-mode. Safari renders luminosity blends inside a clipped,
   rounded, overflow-hidden parent as flat black. A plain filter does not. */
.portrait__plate img {
  display: block;
  width: 100%; height: auto;
  filter: grayscale(1) contrast(1.05) brightness(1.02);
}
.portrait__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent 38%,
    rgba(8,11,28,.42) 60%,
    rgba(8,11,28,.88) 78%,
    #080B1C 94%);
  pointer-events: none;
}

.portrait__id {
  position: absolute;
  left: clamp(1rem, 3.2vw, 1.5rem);
  right: clamp(1rem, 3.2vw, 1.5rem);
  bottom: clamp(1rem, 3.2vw, 1.5rem);
  display: grid;
  justify-items: start;
  gap: .8rem;
}

.chip {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .75rem 1.1rem;
  border-radius: var(--r-chip);
  background: rgba(247,249,255,.95);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.7);
}
.chip__n {
  font-family: var(--font-d); font-weight: 700;
  font-size: 1.85rem; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: var(--indigo);
}
.chip__n sup { font-size: .5em; font-weight: 600; top: -.62em; margin-left: .04em; }
.chip__l {
  font-family: var(--font-d); font-weight: 500;
  font-size: .78rem; line-height: 1.25;
  color: #2A3050;
}

.portrait__role {
  font-family: var(--font-d); font-weight: 600;
  font-size: .92rem; letter-spacing: -.005em;
  color: var(--cyan);
}

/* =========================================================
   FACT BAND
   ========================================================= */
.band { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.band__row { display: grid; grid-template-columns: 5fr 3.6fr 3.4fr; border-top: 1px solid var(--line); }
.fact { padding: 2.2rem 1.75rem 0 0; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; padding-right: 0; }
.fact:not(:first-child) { padding-left: 1.9rem; }

.fact__n {
  display: block;
  font-family: var(--font-d); font-weight: 500;
  font-size: clamp(2.3rem, 3.9vw, 3.3rem); line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  margin-bottom: .55rem;
}
.fact--lead .fact__n { font-size: clamp(3.4rem, 6.6vw, 5.6rem); color: var(--cyan); }
.fact__to { font-size: .34em; color: var(--text-3); font-weight: 400; letter-spacing: 0; margin-inline: .28em; vertical-align: .38em; }
.fact__t { display: block; color: var(--text-2); font-size: .94rem; max-width: 24ch; }

/* =========================================================
   SECTION
   ========================================================= */
.sec { padding-block: clamp(4rem, 8vw, 7.5rem); }
.sec--tint { background: var(--bg-2); border-block: 1px solid var(--line); }

.sec__head { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.sec__head h2 { font-size: clamp(1.95rem, 3.6vw, 2.9rem); margin-bottom: .9rem; }
.sec__head p { color: var(--text-2); font-size: 1.04rem; max-width: 56ch; }

/* =========================================================
   CLASSES: tabs + panels
   ========================================================= */
.sched {
  border: 1px solid var(--line);
  border-radius: calc(var(--r-panel) + 8px);
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(46,48,148,.34), transparent 60%),
    var(--surface);
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
}

.tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 5px; margin: -5px;           /* keeps the focus ring out of the scroll clip */
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__stage { position: relative; display: inline-block; }
.tabs__track {
  display: flex; gap: .25rem;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.025);
}
.tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--font-d); font-weight: 600; font-size: .93rem;
  letter-spacing: -.01em;
  color: var(--text-2);
  padding: .58rem 1.15rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.tab:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--text); } }

/* The clipped copy. One shape moves; the colour never crossfades, so it never muddies. */
.tabs__track--live {
  position: absolute; inset: 0;
  pointer-events: none;
  border-color: transparent;
  background: none;
  clip-path: inset(0 100% 0 0 round var(--r-pill));
  transition: clip-path 300ms var(--ease-out);
}
.tabs__track--live .tab { background: var(--cyan); color: var(--on-cyan); }

.panels { display: grid; margin-top: clamp(1.25rem, 2.4vw, 1.9rem); }
.panel {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  border-radius: var(--r-panel);
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--surface-2), rgba(13,17,40,.55));
  opacity: 0;
  visibility: hidden;
  /* --slide is written by the tab handler so a panel leaves toward, and
     arrives from, the direction you actually travelled. Grades run 9 to 12;
     the switch should read as movement along that line, not a crossfade. */
  transform: translateX(var(--slide, 0px)) translateY(6px);
  filter: blur(4px);
  pointer-events: none;
  transition:
    opacity 200ms var(--ease-out),
    transform 300ms var(--ease-out),
    filter 200ms var(--ease-out),
    visibility 0s linear 300ms;
}
.panel[data-active="true"] {
  opacity: 1; visibility: visible; transform: none; filter: blur(0);
  pointer-events: auto;
  z-index: 1;
  transition:
    opacity 220ms var(--ease-out),
    transform 280ms var(--ease-out),
    filter 220ms var(--ease-out),
    visibility 0s;
}

.panel__num {
  position: absolute; right: -.04em; bottom: -.3em;
  font-family: var(--font-d); font-weight: 700; line-height: 1;
  font-size: clamp(7rem, 15vw, 11.5rem);
  color: rgba(0,173,239,.07);
  user-select: none; pointer-events: none;
}

.panel__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.panel__times { display: grid; align-content: start; }

.panel__topics { padding-left: clamp(1.5rem, 3.5vw, 3rem); border-left: 1px solid var(--line); }
.topics__h {
  font-size: .82rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 1rem;
}
.topics { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.topics li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--text-2);
  font-size: .97rem;
}
.topics li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px;
  border: 1.5px solid var(--cyan);
  border-radius: 2px;
  transform: rotate(45deg);
}
.topics__foot { margin-top: 1.1rem; color: var(--text-3); font-size: .88rem; }

.slots { position: relative; display: grid; gap: 0; }
.slot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
  padding-block: .95rem;
  border-bottom: 1px solid var(--line);
}
.slot:last-child { border-bottom: 0; }
.slot__k { color: var(--text-2); font-size: .96rem; }
.slot__v { font-family: var(--font-d); font-weight: 600; font-size: 1.06rem; text-align: right; }

.panel__note { position: relative; margin-top: 1.1rem; color: var(--text-3); font-size: .92rem; max-width: 52ch; }

/* =========================================================
   WHY BNC
   ========================================================= */
.reasons { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }

.reason {
  position: relative;
  grid-column: span 4;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .reason:hover { transform: translateY(-3px); border-color: var(--line-2); }
}
.reason h3 { font-size: 1.16rem; margin-bottom: .6rem; }
.reason p { color: var(--text-2); font-size: .97rem; }

.reason--lead {
  grid-column: span 7;
  padding: clamp(1.75rem, 3.2vw, 2.6rem);
  background:
    radial-gradient(95% 130% at 0% 0%, rgba(46,48,148,.55), transparent 62%),
    radial-gradient(70% 100% at 100% 100%, rgba(0,173,239,.12), transparent 60%),
    var(--surface);
}
.reason--lead h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); margin-bottom: .9rem; }
.reason--lead p { font-size: clamp(1rem, 1.35vw, 1.1rem); max-width: 46ch; }
.reason:nth-child(2) { grid-column: span 5; }

/* =========================================================
   TESTIMONIALS (markup is commented out until real quotes exist)
   ========================================================= */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.quote {
  margin: 0;
  display: grid; align-content: space-between; gap: 1.4rem;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
}
.quote blockquote { margin: 0; color: var(--text); font-size: 1.04rem; line-height: 1.55; }
.quote figcaption { display: flex; align-items: center; gap: .8rem; }
.quote__badge {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-pill);
  background: rgba(0,173,239,.14);
  border: 1px solid rgba(0,173,239,.34);
  color: var(--cyan);
  font-family: var(--font-d); font-weight: 600;
}
.quote__who { display: grid; font-size: .88rem; color: var(--text-3); }
.quote__who strong { font-family: var(--font-d); font-size: .98rem; color: var(--text); font-weight: 600; }

/* =========================================================
   ENTRANCE
   ========================================================= */
.entrance { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(2rem, 5vw, 4.5rem); }
.entrance__lede h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: .9rem; }
.entrance__lede p { color: var(--text-2); margin-bottom: 1.9rem; max-width: 32ch; }

.exams { list-style: none; margin: 0; padding: 0; }
.exam {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  align-items: baseline; gap: 1.75rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.exam:first-child { padding-top: 0; }
.exam:last-child { border-bottom: 0; padding-bottom: 0; }
.exam h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--cyan); }
.exam p { color: var(--text-2); font-size: .98rem; }

/* =========================================================
   ABOUT
   ========================================================= */
.tagline {
  font-family: var(--font-d); font-weight: 500;
  font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -.04em;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
  color: var(--text);
}
.about__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); }
.about__prose { display: grid; gap: 1.25rem; }
.about__prose p { color: var(--text-2); font-size: clamp(1.02rem, 1.35vw, 1.13rem); max-width: 58ch; }
.about__prose p:first-child { color: var(--text); font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

.about__facts { margin: 0; display: grid; align-content: start; border-top: 1px solid var(--line); }
.about__facts > div { display: grid; gap: .2rem; padding-block: .95rem; border-bottom: 1px solid var(--line); }
.about__facts dt { color: var(--text-3); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.about__facts dd { margin: 0; font-family: var(--font-d); font-weight: 600; font-size: 1.02rem; }

/* =========================================================
   VISIT + FORM
   ========================================================= */
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.contact {
  display: grid; align-content: start; gap: .5rem;
  padding: clamp(1.25rem, 2.2vw, 1.65rem);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.contact:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .contact:hover { transform: translateY(-3px); border-color: rgba(0,173,239,.42); background: var(--surface-2); }
  .contact:hover .ico--shift { transform: translateX(3px); }
}
.contact__k { color: var(--text-3); font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; }
.contact__v { font-family: var(--font-d); font-weight: 600; font-size: 1.12rem; line-height: 1.35; }
.contact__v--num { font-variant-numeric: tabular-nums; }
.contact__a { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; color: var(--cyan); font-size: .9rem; font-weight: 600; font-family: var(--font-d); }

.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
}
.field { display: grid; gap: .45rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-family: var(--font-d); font-weight: 600; font-size: .88rem; }

.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-b); font-size: 1rem; color: var(--text);
  background: #070A1A;
  border: 1px solid var(--line-2);
  border-radius: var(--r-input);
  padding: .82rem .95rem;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.field textarea { resize: vertical; min-height: 86px; }
.field input::placeholder, .field textarea::placeholder { color: #79839F; }
.field select {
  appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #A2ACCB 50%),
    linear-gradient(135deg, #A2ACCB 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 13px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select option { background: #070A1A; color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,173,239,.22);
}
.field.bad input, .field.bad select { border-color: #FF7E8D; }
.field__err { color: #FF9FAA; font-size: .85rem; }
.field__help { color: var(--text-3); font-size: .85rem; }

.form__end { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: .35rem; }
.form__note { color: var(--text-3); font-size: .87rem; }

/* Blur bridges the two labels so the swap reads as one object changing, not two swapping. */
.btn__label { transition: filter 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.btn__label.swapping { filter: blur(3px); opacity: .35; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot { border-top: 1px solid var(--line); padding-top: clamp(3rem, 5vw, 4.25rem); }
.foot__row { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,4fr) minmax(0,4fr); gap: 2.5rem; padding-bottom: 2.75rem; }
.foot__brand img { height: 30px; width: auto; margin-bottom: 1rem; }
.foot__brand p { font-family: var(--font-d); font-weight: 500; color: var(--text-2); }
.foot__nav { display: grid; gap: .65rem; align-content: start; }
.foot__nav a { color: var(--text-2); font-size: .94rem; transition: color 180ms var(--ease-out); }
.foot__meta { display: grid; gap: .65rem; align-content: start; }
.foot__meta p { color: var(--text-2); font-size: .94rem; line-height: 1.5; }
.foot__meta a { font-family: var(--font-d); font-weight: 600; font-variant-numeric: tabular-nums; transition: color 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .foot__nav a:hover, .foot__meta a:hover { color: var(--cyan); }
}
.foot__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  padding-block: 1.4rem; border-top: 1px solid var(--line);
  color: var(--text-3); font-size: .86rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .burger { display: flex; }
  .nav.open .menu { display: block; }

  .hero { min-height: auto; padding-top: 7.5rem; padding-bottom: 4rem; }
  .hero__row { grid-template-columns: 1fr; gap: 2.75rem; }
  .portrait { justify-self: start; max-width: 380px; }
  .lede { max-width: 52ch; }

  .reason, .reason--lead, .reason:nth-child(2) { grid-column: span 6; }

  .entrance { grid-template-columns: 1fr; }
  .entrance__lede h2 br { display: none; }
  .entrance__lede p { max-width: 52ch; }

  .about__body { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .contacts { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --gutter: 18px; }

  .hero { padding-top: 6.5rem; }
  .hero__grid-lines { background-size: 44px 44px; }
  .row-cta { flex-direction: column; align-items: stretch; }
  .row-cta .btn { width: 100%; }
  .portrait { max-width: 100%; }

  .band__row { grid-template-columns: 1fr; }
  .fact { border-right: 0; border-bottom: 1px solid var(--line); padding: 1.5rem 0; }
  .fact:not(:first-child) { padding-left: 0; }
  .fact:last-child { border-bottom: 0; }
  .fact__t { max-width: none; }

  .tab { padding-inline: .95rem; }

  .panel__body { grid-template-columns: 1fr; gap: 1.6rem; }
  .panel__topics { padding-left: 0; padding-top: 1.5rem; border-left: 0; border-top: 1px solid var(--line); }

  .slot { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .slot__v { text-align: left; }

  .reason, .reason--lead, .reason:nth-child(2) { grid-column: 1 / -1; }
  .quotes { grid-template-columns: 1fr; }

  .exam { grid-template-columns: 1fr; gap: .55rem; padding-block: 1.35rem; }

  .form { grid-template-columns: 1fr; }
  .form__end .btn { width: 100%; }

  .foot__row { grid-template-columns: 1fr; gap: 2rem; }
  .foot__base { flex-direction: column; }
}

/* =========================================================
   REDUCED MOTION
   Fewer and gentler, not zero. Opacity stays, movement goes.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .hero [data-reveal],
  .js .hero [data-reveal-media],
  .js .hero [data-reveal-field] {
    transform: none;
    filter: none;
    transition: opacity 240ms ease;
  }
  .panel { transform: none; filter: none; transition: opacity 160ms ease; }
  .tabs__track--live { transition: none; }
  .nav__marker { transition: opacity 160ms ease; }
  .btn:active, .tab:active, .burger:active, .contact:active { transform: none; }
  .menu { transform: none; transition: opacity 160ms ease; }
  .btn__label.swapping { filter: none; }
  html { scroll-behavior: auto; }
  .btn, .contact, .ico--shift { transition-duration: 1ms; }
}