/* ===========================================================
   Agenz - sections. Editorial system, not a component library.
   No cards. No radius. No glows. Structure comes from rules
   and from whitespace.
   =========================================================== */

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--small);
  line-height: 1.6;
  transition: background 400ms var(--ease), color 400ms var(--ease);
}

/* Nothing in this system is round - but scoped to chrome only, so the
   morph section's device corners (a real phone radius) survive. */
input, textarea, select, button, fieldset { border-radius: 0; }

.wrap { padding-inline: var(--gutter); }

/* ---- micro label: body face, not mono ---- */
.label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---- the one motion idiom: clip-reveal from below ---- */
[data-reveal] > * {
  clip-path: inset(0 0 105% 0);
  transform: translateY(0.32em);
  transition:
    clip-path var(--dur-wipe) var(--ease-out),
    transform var(--dur-wipe) var(--ease-out);
  transition-delay: calc(var(--r, 0) * 90ms);
}
[data-reveal].is-in > * { clip-path: inset(0 0 -20% 0); transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] > * { clip-path: none; transform: none; transition: none; }
}


/* ===========================================================
   IMPACT - a headline and one quiet centred line. Deliberately
   restrained: an earlier version (big gradient numerals, asymmetric
   grid) read as a victory lap for a modest, honest track record.
   =========================================================== */

.impact {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--rule);
  /* left-aligned, matching the Services and Connect headlines -
     Statement is the one deliberate exception to that, not this */
}
/* .label is 11px/500 (the site-wide default); .panel__eyebrow
   ("Expertise") is a slightly different hardcoded 10px/400 that was
   never unified with it. Matched here exactly rather than leaving the
   two "the same treatment" eyebrows a pixel and a weight apart. */
.impact .label { font-size: 10px; font-weight: 400; }

/* "Impact" is now the small eyebrow label (.label, shared with
   "Expertise" on the Services panel) - the stat numbers below take
   over the headline-scale role that used to belong to this title,
   matching the Services section's own eyebrow-then-headline rhythm. */

/* Fixed 4-column grid, not flex-wrap + space-between: at headline
   scale the numbers are wide enough that four no longer fit one flex
   line, and space-between treats each wrapped line independently - a
   3+1 split left one stat stranded alone at the left edge instead of
   spread. A grid can't wrap unevenly; each stat just owns an equal
   column, edge to edge, at any width. */
.impact__row {
  margin-top: 2.4rem;   /* matches .panel__eyebrow's own margin-bottom */
  /* starts at the same left edge as every other headline on the page -
     .impact.wrap already carries the standard --gutter padding, same
     as .services and .connect, so no extra inset here matches them */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--sp-2);
  row-gap: var(--sp-4);
}
@media (max-width: 560px) {
  /* single column, not 2: with 5 stats, 2 columns leaves the 5th
     stranded alone in column 1 with empty space beside it - the same
     class of orphaned-remainder problem fixed elsewhere on this page.
     One column has no remainder to strand, at any item count. */
  .impact__row { grid-template-columns: 1fr; }
}

.stat {
  display: flex;
  align-items: baseline;   /* number and label side by side, not stacked */
  gap: 0.4em;
}

.stat__num {
  font-family: var(--font-poster);   /* Bebas stays: numerals are always POSTER, per the type system */
  font-weight: var(--poster-weight);
  font-size: var(--headline);        /* same token/scale as the Services headline */
  line-height: 1;
  letter-spacing: var(--tracking-numeral);
  font-variant-numeric: tabular-nums;
}
.stat__num sup { font-size: 0.6em; }

.stat__label {
  color: var(--fg-mute);
}


/* ===========================================================
   CONNECT - full-bleed flat colour. The loudest thing on the page.
   =========================================================== */

.connect {
  /* Scoped local tokens: this section is always dark regardless of the
     site's active theme, so it doesn't reuse --bg/--fg (which are the
     white "bone" theme's values) or --on-flat (near-black, meant for
     sitting on a light flat colour - the opposite of what's needed here). */
  --dark-fg:     #F2EFE9;
  --dark-mute:   rgba(242, 239, 233, 0.64);
  --dark-faint:  rgba(242, 239, 233, 0.46);
  --dark-rule:   rgba(242, 239, 233, 0.28);

  background: #07060D;
  color: var(--dark-fg);
  padding-block: var(--sp-5);
}
.connect .label { color: var(--dark-faint); }

.connect__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
/* asymmetric: 7/5, not half and half */
@media (min-width: 900px) {
  .connect__grid { grid-template-columns: 7fr 5fr; gap: var(--sp-6); }
}

.connect__headline {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--big);   /* flat 84px, as requested */
  line-height: 0.88;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-top: var(--sp-2);
}
/* --big is a flat 84px, not fluid - fine at desktop widths, but it
   caused real horizontal page overflow on mobile (measured: 468px
   viewport, headline 448px wide, page overflowing by 93px). This is
   the only place that gets smaller; 84px still holds everywhere above. */
@media (max-width: 640px) {
  .connect__headline { font-size: clamp(2.2rem, 10vw, 84px); }
}
.connect__sub {
  margin-top: var(--sp-3);
  max-width: 32ch;
  color: var(--dark-mute);
}

/* form - square, underline only, light text on black */
.field { position: relative; margin-bottom: var(--sp-3); }
.field input,
.field textarea {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--dark-rule);
  color: var(--dark-fg);
  font: inherit;
  padding: 11px 0;
  outline: none;
}
.field textarea { resize: vertical; min-height: 78px; }
.field label {
  position: absolute; left: 0; top: 11px;
  color: var(--dark-faint);
  pointer-events: none;
  transition: all 220ms var(--ease);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
  top: -12px;
  font-size: var(--micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
}
/* the gradient reads as well on black as it does on white, so the
   focus sweep keeps using it rather than switching to a flat light line */
.field::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--gradient);
  transition: width 420ms var(--ease);
}
.field:focus-within::after { width: 100%; }

/* service selector - underlined text, not chips */
.seg { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }

/* "Branding & Design" is the widest label - at ~335px the three options
   don't all fit on one row with anything to spare, so it wraps alone
   onto its own line. A shorter form below ~520px keeps all three on one
   row instead. */
.seg__short { display: none; }
@media (max-width: 520px) {
  .seg__full { display: none; }
  .seg__short { display: inline; }
  .seg { gap: var(--sp-2); }
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  color: var(--dark-faint);
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.seg input:checked + label { color: var(--dark-fg); border-bottom-color: var(--dark-fg); }
.seg input:focus-visible + label { outline: 2px solid var(--dark-fg); outline-offset: 3px; }

/* THE one gradient on the page */
.submit {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 17px 34px;
  border: 0;
  background: var(--gradient);
  color: #F2EFE9;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: filter var(--dur-ui) var(--ease);
}
.submit:hover { filter: brightness(1.1); }   /* colour only - no lift, no scale */
/* was --on-flat (near-black), invisible now that .connect sits on black */
.submit:focus-visible { outline: 2px solid #F2EFE9; outline-offset: 3px; }

/* ===========================================================
   FOOTER
   =========================================================== */

.foot {
  padding-block: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.foot a {
  color: var(--fg-mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.foot a:hover { color: var(--fg); border-bottom-color: var(--fg); }
.foot__links { display: flex; gap: var(--sp-3); flex-wrap: wrap; }


/* ===========================================================
   HERO PRE-LINE + STATEMENT
   =========================================================== */

.hero__pre {
  font-family: var(--font-poster);
  font-weight: var(--poster-weight);
  font-size: var(--lead);
  letter-spacing: var(--tracking-poster);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: -0.1em;
}

.statement {
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.statement__lead {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--headline);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0;
}

/* Two stacked background layers, both clipped to the glyphs: the brand
   gradient on top, solid ink underneath. Scroll widens the gradient
   layer from 0 to 100%, so the line fills as you read it. No loop. */
.statement__key {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--headline);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  max-width: none;
  background-image: var(--gradient), linear-gradient(var(--fg), var(--fg));
  background-size: var(--fill, 0%) 100%, 100% 100%;
  background-position: left center, left center;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ===========================================================
   NAV - fixed, thin, three items. Rule appears on scroll.
   =========================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease);
}
.nav.is-stuck {
  background: var(--bg);
  border-bottom-color: var(--rule);
}

.nav__mark {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}

.nav__links { display: flex; gap: var(--sp-3); align-items: center; }
.nav__links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-mute);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease);
}
.nav__links a:hover { color: var(--fg); border-bottom-color: var(--fg); }
/* the only nav item that is an action, so it is the only one marked */
.nav__links a.is-cta {
  color: var(--fg);
  border-bottom-color: transparent;
  background-image: var(--gradient);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}
@media (max-width: 640px) { .nav__links a:not(.is-cta) { display: none; } }


/* ===========================================================
   FOOTER - expanded. Proof there is a studio behind this.
   =========================================================== */

.foot {
  padding-block: var(--sp-5) var(--sp-3);
  border-top: 1px solid var(--rule);
  display: block;
}

.foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}
@media (min-width: 760px) {
  .foot__grid { grid-template-columns: 1.4fr 1fr; gap: var(--sp-3); }
}

.foot__col h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--sp-2);
}
.foot__col a,
.foot__col p {
  display: block;
  font-size: var(--small);
  color: var(--fg-mute);
  text-decoration: none;
  margin-bottom: 6px;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease);
}
.foot__col a:hover { color: var(--fg); border-bottom-color: var(--fg); }

.foot__base {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  justify-content: space-between;
  font-size: var(--micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ===========================================================
   BRAND MARKS
   =========================================================== */


.foot__logo {
  height: clamp(38px, 5vw, 58px);
  width: auto;
  margin-bottom: var(--sp-4);
}



/* ===========================================================
   HERO - scroll-scrubbed "out of the box" frame sequence, vertical
   set on narrow viewports, horizontal set from tablet up. The logo
   lockup resolves on the last, empty white frame as the reader
   scrolls through, same pattern as the original hero.
   =========================================================== */

.hero { position: relative; height: 320vh; background: var(--bg); }

.hero__sticky {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
}

/* contain, never cover: the letterbox is white on a white page, so
   nothing is cropped and no bars are visible */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hero__lockup {
  position: relative; z-index: 2;
  opacity: 0; transform: translateY(14px);
  will-change: opacity, transform; text-align: center;
}

.hero__logo { width: clamp(200px, 30vw, 480px); height: auto; margin: 0 auto; display: block; }

/* Rotating word above the logo - a fast continuous loop, always on. */
.hero__rot {
  height: 1em;
  overflow: hidden;
  margin-bottom: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(11px, 1.3vw, 14px);
  line-height: 1em;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-faint);           /* grey */
}
.hero__rot-track {
  display: block;
  transition: transform 320ms var(--ease);
}
.hero__rot-track span { display: block; height: 1em; line-height: 1em; }

.hero__cue {
  position: absolute; bottom: var(--sp-3); left: 50%;
  transform: translateX(-50%); z-index: 2;
  transition: opacity var(--dur-ui) var(--ease);
}

@media (max-width: 700px) { .hero { height: 260vh; } }

/* ---- hero: the two routes in ---- */

/* Dead centre of the frame, plain faint grey text - no pulse, no
   button chrome, just a quiet click target. */
.hero__open {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: none;
  border: 0;
  padding: 10px 16px;
  cursor: pointer;
  transition: opacity var(--dur-ui) var(--ease);
}
.hero__open .label {
  color: var(--fg-faint);
  transition: color var(--dur-micro) var(--ease);
}
.hero__open:hover .label { color: var(--fg-mute); }

.hero__open:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.hero__open.is-gone { opacity: 0; pointer-events: none; }