/* =========================================================
   Kodelite Solutions — three colours only
   ink (faded black) · paper (white) · red (Airtel red)
   ========================================================= */
:root {
  --ink: #1C1C1C;
  --paper: #FFFFFF;
  --red: #D40000;

  --fg: var(--paper);
  --bg: var(--ink);
  --line: rgb(255 255 255 / .12);
  --line-strong: rgb(255 255 255 / .28);

  --pad: clamp(20px, 4.5vw, 64px);
  --bar-h: clamp(64px, 9vh, 88px);
  --foot-h: 64px;
  --radius: 22px;

  --ease: cubic-bezier(.77, 0, .175, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 900ms;

  --font: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;              /* the site is exactly one screen */
  background: var(--ink);
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; color: var(--red); }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }

/* ---------- tones ---------- */
.page--dark  { --bg: var(--ink);   --fg: var(--paper); --line: rgb(255 255 255 / .12); --line-strong: rgb(255 255 255 / .28); }
.page--light { --bg: var(--paper); --fg: var(--ink);   --line: rgb(28 28 28 / .14);    --line-strong: rgb(28 28 28 / .3); }
.page--red   { --bg: var(--red);   --fg: var(--paper); --line: rgb(255 255 255 / .3);  --line-strong: rgb(255 255 255 / .55); }
.page--red em { color: var(--ink); }
.page--red ::selection { background: var(--ink); }

/* =========================================================
   HEADER
   ========================================================= */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--pad) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--paper);
  transition: color 500ms ease;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
body[data-tone="light"] .bar { color: var(--ink); }

.brand { display: flex; align-items: center; }
.brand__logo { display: block; height: clamp(24px, 3.3vh, 30px); width: auto; overflow: visible; }
.brand__dot { fill: var(--red); transition: fill 500ms ease; }
body[data-tone="red"] .brand__dot { fill: var(--ink); }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); font-size: 14px; font-weight: 500; }
.nav a { position: relative; padding: 6px 0; opacity: .72; transition: opacity 250ms ease; }
.nav a:hover, .nav a.is-current { opacity: 1; }
.nav a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 400ms var(--ease-out);
}
.nav a.is-current::after, .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav .nav__cta {
  opacity: 1; padding: 11px 20px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
  transition: background 300ms ease, color 300ms ease;
}
.nav .nav__cta:hover { background: var(--red); color: var(--paper); }
body[data-tone="light"] .nav__cta { background: var(--ink); color: var(--paper); }
body[data-tone="light"] .nav__cta:hover { background: var(--red); }
body[data-tone="red"] .nav__cta:hover { background: var(--ink); }

.menu-btn {
  display: none;
  font: 500 14px var(--font);
  color: inherit; background: none;
  border: 1.5px solid currentColor; border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
}

/* =========================================================
   MOBILE DRAWER
   ========================================================= */
.drawer {
  position: fixed; inset: 0; z-index: 40;
  background: var(--ink); color: var(--paper);
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 24px) var(--pad) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateX(100%);
  transition: transform 700ms var(--ease);
}
.drawer.is-open { transform: none; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(34px, 11vw, 56px); font-weight: 500; letter-spacing: -0.03em;
  padding: 10px 0; border-bottom: 1px solid rgb(255 255 255 / .12);
}
.drawer nav a small { font-size: 12px; font-weight: 500; opacity: .5; letter-spacing: 0; }
.drawer nav a.is-current { color: var(--red); }
.drawer__foot { font-size: 13px; }
.drawer__foot > p:first-child { opacity: .55; }
body.menu-open .bar { color: var(--paper); }

/* =========================================================
   STAGE + SLIDING PAGES
   ========================================================= */
.stage {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  overflow: hidden;
  overflow: clip;    /* hidden still lets the browser scroll it to a #anchor; clip can't be scrolled at all */
}

.page {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  contain: layout paint;               /* each page is an isolated paint island */
}
.page:focus { outline: none; }
/* pages pushed off to the left sit back and dim */
/* (opacity over the ink body = the same dim as before, but composited for free) */
.page.is-left { transform: translate3d(-28%, 0, 0); opacity: .4; }
.page.is-active, .page.is-leaving { will-change: transform, opacity; }
.page.is-active {
  transform: none; visibility: visible;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s;
}
.page.is-leaving { visibility: visible; }
.page.no-anim { transition: none !important; }

.page__inner {
  position: relative; z-index: 1;
  flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 12px) var(--pad) 24px;
  width: 100%; max-width: 1440px; margin: 0 auto;
}

.page__foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  min-height: var(--foot-h);
  padding: 0 var(--pad) env(safe-area-inset-bottom, 0px);
  font-size: 13px; font-weight: 500;
  opacity: .7;
}
.page__foot a { transition: color 250ms ease, opacity 250ms ease; }
.page__foot a:hover { color: var(--red); }
.page--red .page__foot a:hover { color: var(--ink); }
.next span, .prev span { display: inline-block; transition: transform 300ms var(--ease-out); }
.next:hover span { transform: translateX(5px); }
.prev:hover span { transform: translateX(-5px); }

.counter {
  position: fixed; z-index: 30; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  transform: translateX(-50%);
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  color: var(--paper); opacity: .6;
  transition: color 500ms ease;
  font-variant-numeric: tabular-nums;
}
body[data-tone="light"] .counter { color: var(--ink); }

/* =========================================================
   TYPE
   ========================================================= */
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  opacity: .6; margin-bottom: clamp(14px, 2.6vh, 26px);
}
.hero {
  font-size: clamp(40px, 6.4vw, 100px);
  font-weight: 500; line-height: 1; letter-spacing: -0.045em;
  max-width: 14ch;
}
.title {
  font-size: clamp(32px, 4.4vw, 66px);
  font-weight: 500; line-height: 1.03; letter-spacing: -0.035em;
}
.lede {
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6;
  max-width: 46ch; opacity: .78;
  margin-top: clamp(18px, 3.4vh, 32px);
}
.prose { margin-top: clamp(16px, 3vh, 28px); max-width: 52ch; }
.prose p { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; opacity: .78; }
.prose p + p { margin-top: 12px; }
.tagline {
  margin-top: clamp(16px, 2.6vh, 24px);
  font-size: clamp(15px, 1.15vw, 18px); font-weight: 600; letter-spacing: -0.01em;
}
.head { margin-bottom: clamp(24px, 4.5vh, 52px); }

/* ---------- pills ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4.4vh, 44px); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms var(--ease-out);
}
.pill:hover { transform: translateY(-2px); }
.pill--solid { background: var(--fg); color: var(--bg); }
.pill--solid:hover { background: var(--red); color: var(--paper); }
.page--red .pill--solid { color: var(--ink); }
.page--red .pill--solid:hover { background: var(--ink); color: var(--paper); }
.pill--ghost { border: 1.5px solid var(--line-strong); }
.pill--ghost:hover { border-color: var(--fg); }

/* =========================================================
   HOME
   ========================================================= */
/* the arc — a nod to the curved crops in the inspo */
.arc {
  position: absolute; z-index: 0;
  width: min(92vmax, 1300px); aspect-ratio: 1;
  right: max(-46vmax, -650px); bottom: max(-46vmax, -650px);
  border-radius: 50%;
  pointer-events: none;
}
.arc::before, .arc::after { content: ""; position: absolute; border-radius: 50%; }
.arc::before {                       /* soft disc */
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / .07), rgb(255 255 255 / .015) 60%, transparent 70%);
  border: 1px solid rgb(255 255 255 / .09);
}
.arc::after {                        /* red orbit */
  inset: 9%;
  border: 2px solid transparent;
  border-top-color: var(--red);
  border-left-color: var(--red);
  animation: orbit 22s linear infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }

/* =========================================================
   ABOUT
   ========================================================= */
.about {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 110px); align-content: center; align-items: start;
}
.about .prose p:first-child { opacity: 1; font-weight: 500; }
.aside {
  margin-top: clamp(20px, 3.6vh, 36px);
  padding-top: clamp(16px, 2.6vh, 24px);
  border-top: 1px solid var(--line);
  max-width: 52ch;
}
.aside h3 { font-size: clamp(16px, 1.25vw, 19px); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.aside p { font-size: 14px; line-height: 1.6; opacity: .72; }
.aside p + p { margin-top: 8px; }

.about__side { padding-top: 4px; }
.principles { border-top: 1px solid var(--line); }
.principles li {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px;
  padding: clamp(12px, 2.1vh, 20px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding 400ms var(--ease-out);
}
.principles li:hover { padding-left: 10px; }
.principles span { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--red); padding-top: 5px; }
.principles h3 {
  font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.025em;
  transition: color 300ms ease;
}
.principles li:hover h3 { color: var(--red); }
.principles p { margin-top: 4px; font-size: 14px; line-height: 1.55; opacity: .68; }
.signoff {
  margin-top: clamp(18px, 3.4vh, 32px);
  font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.025em;
}

/* =========================================================
   SERVICES — list on the left, detail on the right
   ========================================================= */
.services__head {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 5vw, 96px); align-items: end;
  margin-bottom: clamp(26px, 5vh, 56px);
}
.services__intro { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; opacity: .72; max-width: 50ch; }

.svc {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 5vw, 96px); align-items: stretch;
}
.svc__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.svc__list button {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 24px);
  width: 100%; text-align: left; cursor: pointer;
  padding: clamp(10px, 1.7vh, 17px) clamp(10px, 1vw, 16px);
  background: none; border: 0; border-bottom: 1px solid var(--line);
  color: inherit; font: 500 clamp(20px, 2.1vw, 32px)/1.15 var(--font); letter-spacing: -0.03em;
  opacity: .55;
  transition: opacity 350ms ease, color 350ms ease, padding 450ms var(--ease-out);
}
.svc__list button span {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--red);
  transition: color 350ms ease;
}
.svc__list button::before {           /* red bar wipes in */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 550ms var(--ease);
}
.svc__list button::after {
  content: "→"; margin-left: auto; font-size: .7em;
  opacity: 0; transform: translateX(-10px);
  transition: opacity 350ms ease, transform 450ms var(--ease-out);
}
.svc__list button:hover { opacity: 1; }
.svc__list button[aria-selected="true"] { opacity: 1; padding-left: clamp(18px, 1.8vw, 28px); color: var(--paper); }
.svc__list button[aria-selected="true"]::before { transform: scaleX(1); }
.svc__list button[aria-selected="true"] span { color: var(--paper); }
.svc__list button[aria-selected="true"]::after { opacity: 1; transform: none; }

.svc__panels {
  position: relative; display: grid;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 40px);
  overflow: hidden;
}
.svc__panel {
  grid-area: 1 / 1;                    /* panels stack in one cell */
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateX(28px);
  transition: opacity 450ms ease, transform 650ms var(--ease-out), visibility 0s 450ms;
}
.svc__panel.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 500ms ease 80ms, transform 750ms var(--ease-out) 80ms, visibility 0s;
}
.svc__num {
  font-size: clamp(64px, 8vw, 120px); font-weight: 300; line-height: .9; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px var(--red);
}
.svc__panel h3 {
  margin-top: auto; padding-top: 24px;
  font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -0.025em;
}
.svc__sub { margin-top: 8px; font-size: clamp(15px, 1.15vw, 18px); font-weight: 600; color: var(--red); }
.svc__panel p:last-child { margin-top: 14px; font-size: 15px; line-height: 1.65; opacity: .75; max-width: 48ch; }

/* =========================================================
   APPROACH
   ========================================================= */
.approach__top {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 5vw, 96px); align-items: end;
}
.approach__top .prose { margin-top: 0; }
.approach .hero { max-width: 12ch; }

.flow {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(40px, 8vh, 88px);
  padding-top: 30px;
}
.flow::before {                        /* the line draws itself in */
  content: ""; position: absolute; left: 0; right: 0; top: 6px;
  height: 1.5px; background: var(--fg);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1600ms var(--ease) 500ms;
}
.page.is-active .flow::before, .page.is-leaving .flow::before { transform: scaleX(1); }
.page:not(.is-active):not(.is-leaving) .flow::before { transition: none; }
.flow li {
  position: relative;
  font-size: clamp(18px, 2vw, 30px); font-weight: 500; letter-spacing: -0.03em;
}
.flow li::before {                     /* node on the line */
  content: ""; position: absolute; left: 0; top: -30px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--fg);
  transition: background 300ms ease, border-color 300ms ease, transform 400ms var(--ease-out);
}
.flow li:last-child { color: var(--red); }
.flow li:last-child::before, .flow li:hover::before { background: var(--red); border-color: var(--red); transform: scale(1.35); }
.flow li span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--red); margin-bottom: 8px; }

.cta.cta--wide { max-width: none; margin-top: clamp(40px, 8vh, 88px); }
.cta--wide p { font-size: clamp(15px, 1.2vw, 18px); font-weight: 400; }
.cta--wide strong { font-weight: 600; }

/* =========================================================
   WORK
   ========================================================= */
.work {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 110px); align-content: center; align-items: center;
}
.cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  margin-top: clamp(24px, 4.4vh, 44px);
  padding-top: clamp(18px, 3vh, 28px);
  border-top: 1px solid var(--line);
  max-width: 52ch;
}
.cta p { font-size: 15px; font-weight: 500; flex: 1 1 auto; }

.shelf {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}
.slot {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.slot:nth-child(2) { transform: translateY(clamp(16px, 4vh, 40px)); }
.slot.reveal:nth-child(2) { transform: translateY(calc(clamp(16px, 4vh, 40px) + 26px)); }
.page.is-active .slot.reveal:nth-child(2),
.page.is-leaving .slot.reveal:nth-child(2) { transform: translateY(clamp(16px, 4vh, 40px)); }
.slot__screen {                      /* phone silhouette, waiting for a project */
  width: 100%; max-height: 48vh; aspect-ratio: 9 / 19;
  border-radius: clamp(14px, 2vh, 26px);
  border: 1.5px dashed var(--line-strong);
  position: relative; overflow: hidden;
}
.slot__screen::after {                 /* sheen: transform-only, runs on the GPU */
  content: ""; position: absolute; inset: 0 -60%;
  background: linear-gradient(110deg, transparent 35%, rgb(212 0 0 / .08) 50%, transparent 65%);
  transform: translateX(-60%);
  animation: sheen 3.2s ease-in-out infinite;
}
.slot:nth-child(2) .slot__screen::after { animation-delay: .4s; }
.slot:nth-child(3) .slot__screen::after { animation-delay: .8s; }
@keyframes sheen { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.shelf__tag {
  grid-column: 1 / -1;
  margin-top: clamp(26px, 5vh, 56px);
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .75;
}
.shelf__tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 6vw, 110px); align-content: center; align-items: end;
}
.contact .prose p { opacity: .9; }
.mail {
  display: inline-block;
  margin-top: clamp(22px, 4vh, 40px);
  font-size: clamp(22px, 3vw, 44px); font-weight: 500; letter-spacing: -0.03em;
  border-bottom: 2px solid var(--line-strong);
  padding-bottom: 6px;
  transition: border-color 300ms ease;
  word-break: break-word;
}
.mail:hover { border-color: var(--paper); }
.details { border-top: 1px solid var(--line); }
.details > div { padding: clamp(12px, 2vh, 18px) 0; border-bottom: 1px solid var(--line); }
.details > div:last-child { border-bottom: 0; padding-top: clamp(20px, 3.4vh, 32px); }
.details dt { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
.details dd { font-size: 15px; line-height: 1.5; }
.details dd a { border-bottom: 1px solid transparent; transition: border-color 250ms ease; }
.details dd a:hover { border-color: currentColor; }

/* =========================================================
   REVEAL (stagger when a page becomes active)
   ========================================================= */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: calc(min(var(--i, 0), 8) * 40ms + 120ms);
}
.page.is-active .reveal, .page.is-leaving .reveal { opacity: 1; transform: none; }
.page:not(.is-active) .reveal { transition-delay: 0ms; transition-duration: 0ms; }
/* keep hover transitions after revealing */
.principles li.reveal { transition-property: opacity, transform, padding; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: inline-block; }
  .counter { display: none; }
  .page__inner { justify-content: flex-start; padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 28px); }
  .home { justify-content: center; }
  .about, .work, .contact, .services__head, .approach__top { grid-template-columns: 1fr; align-content: start; }
  .services__head { gap: 16px; }
  /* services: list hidden, every panel shown as a card */
  .svc { grid-template-columns: 1fr; }
  .svc__list { display: none; }
  .svc__panels { border: 0; padding: 0; gap: 12px; overflow: visible; }
  .svc__panel, .svc__panel.is-active {
    grid-area: auto; opacity: 1; visibility: visible; transform: none;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px;
  }
  .svc__num { font-size: 52px; }
  .svc__panel h3 { padding-top: 14px; }
  .flow { grid-template-columns: 1fr; padding-top: 0; padding-left: 34px; gap: 22px; }
  .flow::before { top: 0; bottom: 0; left: 6px; right: auto; width: 1.5px; height: auto; transform: scaleY(0); transform-origin: top; }
  .page.is-active .flow::before, .page.is-leaving .flow::before { transform: scaleY(1); }
  .flow li::before { left: -34px; top: 4px; }
  .about { gap: 40px; }
  .shelf { max-width: 520px; }
  .slot__screen { max-height: 34vh; }
  .contact { align-items: start; }
}

@media (max-width: 560px) {
  .arc { width: 150vw; right: -75vw; bottom: -55vw; }
  .actions .pill { flex: 1 1 auto; }
  .cta .pill { width: 100%; }
  .details > div:last-child .pill { width: 100%; }
  .slot { padding: 10px; border-radius: 16px; }
  .slot__screen { border-radius: 12px; }
}

@media (max-height: 800px) and (min-width: 901px) {
  .services__head { margin-bottom: 22px; }
  .services .title, .approach .hero { font-size: clamp(30px, 3.8vw, 56px); }
  .svc__list button { padding-block: 9px; font-size: clamp(18px, 1.8vw, 26px); }
  .svc__panels { padding: 24px 30px; }
  .svc__num { font-size: 60px; }
  .svc__panel h3 { padding-top: 14px; }
  .flow, .cta.cta--wide { margin-top: 36px; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .page__inner { justify-content: flex-start; align-content: start; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
  .arc::after, .shelf__tag::before, .slot__screen::after { animation: none; }
  .reveal { transition: opacity 200ms linear; transform: none; }
}

/* ---------- social links ---------- */
.social { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.social a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color 250ms ease; }
.social a::after { content: " ↗"; font-size: .85em; opacity: .7; }
.social a:hover { border-color: currentColor; }
.drawer__foot { display: flex; flex-direction: column; gap: 14px; }
.drawer__foot .social { --line-strong: rgb(255 255 255 / .3); opacity: 1; }
.drawer { --line-strong: rgb(255 255 255 / .3); }

/* =========================================================
   HOME — locked to exactly one screen, never scrolls.
   Type and spacing scale with height as well as width,
   so the content always fits.
   ========================================================= */
#home { overflow: hidden; }
#home .page__inner {
  flex: 1 1 auto; min-height: 0;
  justify-content: center;
  padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding-bottom: 0;
}
#home .page__foot { flex: 0 0 auto; }
.home .eyebrow { margin-bottom: clamp(10px, 2.4vh, 26px); }
.home .hero    { font-size: clamp(28px, min(6.4vw, 10.5vh), 100px); }
.home .lede {
  font-size: clamp(14px, min(1.3vw, 2.3vh), 19px);
  margin-top: clamp(12px, 3.2vh, 32px);
}
.home .tagline { margin-top: clamp(10px, 2.4vh, 24px); font-size: clamp(14px, min(1.15vw, 2.1vh), 18px); }
.home .actions { margin-top: clamp(16px, 4.2vh, 44px); }
.home .pill    { padding: clamp(11px, 1.8vh, 15px) clamp(20px, 2vw, 26px); }

@media (max-width: 900px) {
  .home .hero { font-size: clamp(26px, min(10.5vw, 5.6vh), 64px); }
  .home .lede { font-size: clamp(13px, min(4vw, 2.1vh), 17px); line-height: 1.5; }
  .home .eyebrow { font-size: 11px; }
}

/* decorative loops only run on the page you are looking at */
.page:not(.is-active) .arc::after,
.page:not(.is-active) .slot__screen::after,
.page:not(.is-active) .shelf__tag::before { animation-play-state: paused; }