/* ===========================================================================
   GROWWIS HOMEPAGE — 2026 rebuild
   ---------------------------------------------------------------------------
   Every class here is prefixed nh- so nothing collides with the styles the
   legacy homepage at /old/ still depends on. Shared theme pieces (.band,
   .wrap, .btn, .eyebrow, .rv) are reused rather than redefined.
   =========================================================================== */

/* ---------- chapter rule ---------- */
.nh-ch {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--hairline);
}
.nh-ch__n { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.nh-ch__n b { color: var(--ink); font-weight: 700; }
.nh-ch__r { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted); }

.nh-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: .99; letter-spacing: -.045em;
  margin: 0;
}
.nh-h2 span { color: var(--ink-muted); }
.nh-lede {
  margin-top: 16px; max-width: 48ch;
  font-size: clamp(.96rem, 1.2vw, 1.06rem); line-height: 1.6; color: var(--ink-2);
}

/* The shared band padding is 152px top and bottom at this width — 304px per
   section, and the page carries five of them. Trimmed to 104 here only; this
   sheet loads on the front page alone, so /old/ keeps its original rhythm. */
:root { --band: clamp(66px, 7vw, 104px); }

/* ===========================================================================
   1 — HERO
   =========================================================================== */
.nh-hero { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(28px, 4.4vw, 60px); align-items: center; }
.nh-hero > * { min-width: 0; }
.nh-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: .96; letter-spacing: -.05em;
  margin: 0;
}
.nh-hero__p { margin-top: 20px; max-width: 40ch; font-size: clamp(.96rem, 1.2vw, 1.08rem); line-height: 1.6; color: var(--ink-2); }
.nh-hero__cta { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }

.nh-led { position: relative; }
.nh-led__img { aspect-ratio: 16 / 11; border-radius: var(--r-md); overflow: hidden; background: var(--canvas-deep); }
/* the campaign slides are social posts with a caption band underneath the
   photograph, so every cover is anchored to the top of the frame */
.nh-led__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.nh-led__card {
  position: relative; margin: -64px 0 0 auto; width: min(100%, 430px);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 18px 20px 20px;
  box-shadow: 0 22px 50px -30px rgba(20, 18, 28, .5);
}
.nh-led__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 11px; border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}
.nh-led__top b { color: var(--ink); font-weight: 700; }
.nh-led__r {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--hairline-2);
  text-decoration: none; color: inherit;
  transition: padding-left .3s var(--ease);
}
.nh-led__r:last-of-type { border-bottom: 0; }
.nh-led__r:hover { padding-left: 6px; }
.nh-led__w { font-size: .83rem; line-height: 1.35; color: var(--ink-2); }
.nh-led__w b { display: block; font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: -.02em; color: var(--ink); }
.nh-led__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.28rem); letter-spacing: -.04em; color: var(--lime-ink); white-space: nowrap; }
.nh-led__f {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}

/* ===========================================================================
   2 — CLIENT LOGO ROW
   =========================================================================== */
.nh-logos { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); flex-wrap: wrap; }
.nh-logos__k { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; margin-right: clamp(8px, 1.6vw, 26px); }
/* Supplied logos mix transparent, white-on-black and full-colour artwork.
   A common white tile is the only way they read as one row. */
.nh-logos a {
  display: grid; place-items: center;
  width: clamp(112px, 12vw, 160px); height: clamp(54px, 5.6vw, 70px);
  padding: clamp(9px, 1vw, 13px) clamp(12px, 1.3vw, 18px);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.nh-logos a:hover { border-color: var(--lime-deep); transform: translateY(-2px); }
/* Identical boxes, contained artwork. The source files run from a 340x88
   wordmark to a 734x1024 crest, so only a shared box makes them a row. */
.nh-logos img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

/* ===========================================================================
   3 — THE WORK
   =========================================================================== */
.nh-filt { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 24px; }
.nh-filt button {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase;
  padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--hairline);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.nh-filt button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.nh-filt span { opacity: .55; margin-left: 5px; }

/* On a desktop the filter row sat at 9px type and 37px tall in a 1280px
   column, which read as a footnote rather than a control. Scoped to the
   desktop breakpoint so the phone, where the row already wraps to two lines,
   is left alone. */
@media (min-width: 1041px) {
  .nh-filt { gap: 10px; }
  .nh-filt button { font-size: .74rem; padding: 14px 24px; }
  .nh-filt span { margin-left: 7px; }
}

/* Three up above 1200px. Two 627px-wide cards per row made each cover 469px
   tall and pushed this band to 2.8 screens; three narrower cards show the same
   six campaigns in two rows instead of three. */
.nh-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); align-items: stretch; }

/* Card chrome, the way the approved deck lays it out: a white card with a
   hairline, artwork flush to the top, the words padded inside it. */
.nh-wk {
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline);
  text-decoration: none; color: inherit;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* Any author display rule outranks the browser's [hidden] { display: none },
   so the filter needs this or it marks cards hidden and paints them anyway. */
.nh-wk[hidden] { display: none; }
.nh-wk:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -28px rgba(20, 18, 28, .45); }
/* the shared .rv fade runs .8s, which is long for a card this big — it is
   still arriving while the reader has scrolled past it */
.nh-wk.rv { transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .45s var(--ease); }

/* Campaign artwork is square social work of mixed backgrounds, so each one is
   framed and contained rather than cropped. Nothing gets cut in half. */
/* Every campaign cover is square. A 4/3 frame was clipping a quarter of each
   one — object-fit: contain never took effect, because a percentage height on
   an image does not resolve inside a centred grid parent. A square frame needs
   no fitting at all: the artwork lands exactly, uncropped, with no letterbox. */
.nh-wk__img {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: #15171A; border-bottom: 1px solid var(--hairline);
  display: block;
}
.nh-wk__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  transition: transform .8s var(--ease);
}
.nh-wk:hover .nh-wk__img img { transform: scale(1.04); }

.nh-wk__pill {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: .74rem; font-weight: 500; letter-spacing: -.005em;
  padding: 7px 14px 7px 12px; border-radius: var(--r-pill);
  /* the pill sits on an opaque frame, so a backdrop blur would cost a GPU
     snapshot every scrolled frame and show nothing for it */
  background: rgba(255, 255, 255, .94); color: var(--ink);
}
.nh-wk__pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep); }
.nh-wk__pill--ongoing::before { background: #6FBF8F; }
.nh-wk__pill--upcoming::before { background: #14121C; }

.nh-wk__go {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); display: grid; place-items: center;
  transition: background .35s var(--ease), transform .45s var(--ease);
}
.nh-wk:hover .nh-wk__go { background: var(--lime); transform: translate(3px, -3px); }
.nh-wk__go svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the words */
.nh-wk__b {
  padding: clamp(15px, 1.5vw, 19px) clamp(16px, 1.6vw, 21px) clamp(16px, 1.6vw, 21px);
  display: flex; flex-direction: column; gap: 7px; flex: 1;
}
.nh-wk__c {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}
/* the client name carries the accent; the category stays quiet */
.nh-wk__c span:first-child { color: var(--lime-ink); font-weight: 700; }
.nh-wk__h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.55vw, 1.32rem); letter-spacing: -.03em; line-height: 1.14;
  margin: 0; transition: color .3s;
}
.nh-wk:hover .nh-wk__h { color: var(--lime-ink); }
.nh-wk__p { margin: 0; font-size: clamp(.85rem, .95vw, .92rem); line-height: 1.5; color: var(--ink-2); }
/* margin-top:auto plus the stretched card keeps every hairline on one line
   across a row, however long the copy above it runs */
.nh-wk__m {
  margin: auto 0 0; padding-top: 13px; border-top: 1px solid var(--hairline-2);
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
}
.nh-wk__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -.045em; color: var(--lime-ink); }
/* the label takes the rest of the row, and reserves two lines of space so the
   hairline above it lands on the same line in every card of a row */
.nh-wk__l {
  flex: 1 1 130px; min-width: 0; max-width: 34ch;
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); line-height: 1.45; min-height: calc(2 * 1.45em);
}

/* the upcoming card: the lime block stands in for the artwork and the whole
   card follows it lime */
.nh-wk__next {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--lime); border-bottom: 1px solid rgba(20, 18, 28, .16);
  padding: clamp(18px, 2.2vw, 28px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.nh-wk__next .nh-wk__pill { position: static; background: rgba(20, 18, 28, .1); backdrop-filter: none; align-self: flex-start; }
.nh-wk__next h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem); letter-spacing: -.045em; line-height: 1.04;
  margin: clamp(12px, 1.8vw, 20px) 0 0; max-width: 11ch;
}
.nh-wk__next .nh-wk__nc {
  margin-top: auto; padding-top: clamp(12px, 1.6vw, 20px); border-top: 1px solid rgba(20, 18, 28, .22);
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(20, 18, 28, .72);
}
.nh-wk:has(.nh-wk__next) { background: var(--lime); border-color: var(--lime); }
.nh-wk:has(.nh-wk__next) .nh-wk__c { color: rgba(20, 18, 28, .66); }
.nh-wk:has(.nh-wk__next) .nh-wk__c span:first-child { color: var(--ink); }
.nh-wk:has(.nh-wk__next) .nh-wk__p { color: rgba(20, 18, 28, .72); }
.nh-wk:has(.nh-wk__next) .nh-wk__m { border-top-color: rgba(20, 18, 28, .2); }
.nh-wk:has(.nh-wk__next) .nh-wk__v,
.nh-wk:has(.nh-wk__next) .nh-wk__l { color: var(--ink); }
.nh-wk:has(.nh-wk__next):hover .nh-wk__h { color: var(--ink); }

.nh-wk__more { margin-top: clamp(26px, 2.4vw, 34px); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ===========================================================================
   1 — HERO
   The hero markup is the previous design's, so it is styled by main.css. Only
   the differences live here.
   =========================================================================== */
/* The client marquee is a quiet closing line, not a full band of its own, so
   the hero's foot and the work band's head are both pulled in. Left at their
   defaults they stacked into roughly 320px of empty page between the last
   client name and 01 / The work. */
/* 178px cleared the fixed header nearly twice over */
.hero { padding-top: clamp(104px, 8.6vw, 134px); padding-bottom: clamp(30px, 3.4vw, 46px); }
#work { padding-top: clamp(56px, 6vw, 92px); }


/* The trust strip runs client logos on the page ground — no tiles. A white
   lozenge behind each one reads as a stack of cards rather than a row of
   brands, and it was only ever there to hide two logo files that carry a baked
   black rectangle. Those are corrected individually below instead.

   Logos are sized by HEIGHT so a wordmark and a crest carry the same optical
   weight, which is how a clean logo wall is built. Width follows, capped so one
   very wide mark cannot dominate the row.

   The track is two identical sets, each carrying its own trailing gap, so the
   -50% shift lands exactly on the seam. Putting the gap on the flex track
   instead loses half a gap every cycle and the join visibly drifts. */
.nh-tm__track { display: flex; width: max-content; animation: nhTm 40s linear infinite; }
.nh-tm:hover .nh-tm__track,
.nh-tm:focus-within .nh-tm__track { animation-play-state: paused; }
@keyframes nhTm { to { transform: translateX(-50%); } }

.nh-tm__set {
  display: flex; align-items: center;
  gap: clamp(40px, 5vw, 86px); padding-right: clamp(40px, 5vw, 86px);
}
.nh-tm__i {
  flex: none; display: flex; align-items: center;
  transition: opacity .3s, transform .3s var(--ease);
}
/* Both bounds live on the image itself, in absolute units. A percentage
   max-height does not resolve against a flex or grid parent here, so the tall
   marks rendered four times their slot before this. With width and height on
   auto the ratio is preserved and whichever bound it meets first wins. */
.nh-tm__i img {
  max-height: clamp(40px, 4.2vw, 58px);
  max-width: clamp(130px, 14vw, 200px);
  width: auto; height: auto; object-fit: contain; display: block;
}
a.nh-tm__i:hover { transform: translateY(-2px); }

/* ---- the row sits on the page, nothing behind it ----
   The logos are dark ink on transparency, so they sit straight on the canvas
   and the row reads as free-standing marks. No plate, no blend modes, no
   filters — the earlier dark band was only ever propping up artwork that had
   been drawn for a dark background. */
.nh-tm__i img { transition: opacity .3s, transform .3s var(--ease); opacity: .78; }
a.nh-tm__i:hover img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nh-tm__track { animation: none; }
  /* with the scroll stopped the row must not run off the edge */
  .nh-tm { overflow-x: auto; scrollbar-width: none; }
  .nh-tm::-webkit-scrollbar { display: none; }
}

/* On a phone the fixed header's lower edge sits around 79px down, so the
   inherited 120px top pad left a dead band above the headline. The eyebrow
   goes with it: on a small screen the headline should be the first thing read,
   and this matches how the page already behaved. */
@media (max-width: 700px) {
  .hero { padding-top: 96px; padding-bottom: 30px; }
  .hero .nh-eyebrow { display: none; }
  .hero .hero__title { margin-top: 0; }
  .hero__trust { margin-top: 30px; padding-top: 20px; }
  .nh-tm__i img { max-height: 34px; max-width: 118px; }
}

/* ===========================================================================
   4 — THE RELATIONSHIPS
   =========================================================================== */
/* this band opens straight into a tall two-column body, so it does not need
   the full chapter gap the lighter bands use */
#clients .nh-ch { margin-bottom: clamp(24px, 2.4vw, 32px); }
.nh-oc__head { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 3.4vw, 60px); align-items: start; }
.nh-oc__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 1.02; letter-spacing: -.045em; margin: 0; }
.nh-oc__h span { display: block; color: #8A8A7C; }
.nh-oc__note { text-align: right; font-size: clamp(.93rem, 1.15vw, 1.06rem); line-height: 1.5; color: var(--ink-muted); padding-top: .5em; }
.nh-oc__rule { height: 1px; background: var(--hairline); margin-top: clamp(22px, 2.2vw, 30px); }

.nh-oc__body { display: grid; grid-template-columns: minmax(0, .46fr) minmax(0, 1fr); }
.nh-oc__list { padding: clamp(16px, 1.6vw, 22px) clamp(16px, 2vw, 28px) clamp(16px, 1.6vw, 22px) 0; border-right: 1px solid var(--hairline); }
.nh-oc__b {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  /* Seven of these stacked are what set the height of the entire band, and the
     panel beside them only ever needs about 455px. Trimming the button pad is
     worth roughly 90px across the section. */
  text-align: left; padding: clamp(11px, 1.05vw, 13px) clamp(13px, 1.6vw, 21px);
  border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: clamp(.93rem, 1.15vw, 1.06rem); letter-spacing: -.012em; color: var(--ink);
  transition: background .3s, color .3s;
}
.nh-oc__b:hover { background: rgba(20, 18, 28, .05); }
.nh-oc__b[aria-pressed="true"] { background: var(--ink); color: #F6F5F0; font-weight: 600; }
.nh-ar { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .45; transition: opacity .3s, color .3s; }
.nh-oc__b[aria-pressed="true"] .nh-ar { color: var(--lime); opacity: 1; }

.nh-oc__panel { padding: clamp(16px, 1.6vw, 22px) 0 clamp(16px, 1.6vw, 22px) clamp(22px, 3.4vw, 54px); min-width: 0; }
.nh-oc__k { display: block; font-family: var(--font-body); font-weight: 600; font-size: clamp(.71rem, .9vw, .81rem); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: clamp(13px, 1.8vw, 21px); }
/* The panel is what sets this row's height — the seven buttons beside it only
   need 415px. Every pixel taken off here closes dead space in both columns. */
.nh-oc__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.9vw, 2.2rem); line-height: 1.08; letter-spacing: -.042em; max-width: 19ch; margin: 0; }
.nh-oc__s { margin-top: clamp(10px, 1.1vw, 13px); font-size: clamp(.95rem, 1.15vw, 1.08rem); line-height: 1.5; color: var(--ink-muted); max-width: 44ch; }
.nh-oc__rows { margin-top: clamp(16px, 1.5vw, 20px); border-top: 1px solid var(--hairline); }
.nh-oc__row { display: grid; grid-template-columns: clamp(94px, 11vw, 152px) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 22px); padding: clamp(13px, 1.2vw, 15px) 0; border-bottom: 1px solid var(--hairline); }
.nh-oc__rk { font-family: var(--font-body); font-weight: 500; font-size: clamp(.68rem, .85vw, .78rem); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted); padding-top: .25em; }
.nh-oc__rt { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.18rem); letter-spacing: -.025em; line-height: 1.25; }
.nh-oc__rd { margin-top: 5px; font-size: clamp(.89rem, 1.05vw, 1rem); line-height: 1.45; color: var(--ink-muted); }
.nh-oc__go {
  margin-top: clamp(16px, 1.5vw, 20px); display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-body); font-weight: 600; font-size: clamp(.94rem, 1.1vw, 1.04rem); letter-spacing: -.015em;
  color: var(--ink); text-decoration: none; padding-bottom: 7px; border-bottom: 1.5px solid var(--ink);
}
.nh-oc__go .nh-ar { width: 13px; height: 13px; stroke-width: 1.7; opacity: 1; }

/* ===========================================================================
   5 — HOW WE GROW
   =========================================================================== */
.nh-grow { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 3.6vw, 56px); align-items: start; }
.nh-rows { border-top: 1px solid var(--hairline); }
.nh-row { padding: 18px 0 20px; border-bottom: 1px solid var(--hairline); }
.nh-row h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.02rem, 1.5vw, 1.3rem); letter-spacing: -.03em; margin: 0 0 8px; }
.nh-row p { font-size: .95rem; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.nh-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.nh-chips a {
  font-family: var(--font-mono); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--hairline);
  color: var(--ink-2); text-decoration: none; transition: background .25s, border-color .25s, color .25s;
}
.nh-chips a:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }

/* ===========================================================================
   6 — WAYS IN
   =========================================================================== */
.nh-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.5vw, 18px); align-items: stretch; margin-top: clamp(24px, 3.2vw, 38px); }
.nh-wy {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-md); padding: 24px 22px 26px;
  background: var(--surface); border: 1px solid var(--hairline);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.nh-wy:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -26px rgba(20, 18, 28, .42); }
.nh-wy--big { background: var(--night); border-color: var(--night); color: #F1EFEA; }
.nh-wy--big:hover { box-shadow: 0 18px 44px -24px rgba(20, 18, 28, .65); }
.nh-wy__n { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 9px; }
.nh-wy--big .nh-wy__n { color: rgba(255, 255, 255, .52); }
.nh-wy h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 1.9vw, 1.55rem); letter-spacing: -.04em; margin: 0 0 8px; }
.nh-wy--big h3 { color: var(--lime); }
.nh-wy__s { font-size: clamp(.9rem, 1.1vw, 1rem); line-height: 1.45; color: var(--ink-2); }
.nh-wy--big .nh-wy__s { color: rgba(255, 255, 255, .74); }
.nh-wy__l { margin: 14px 0 0; padding: 13px 0 0; list-style: none; border-top: 1px solid var(--hairline-2); display: grid; gap: 7px; }
.nh-wy--big .nh-wy__l { border-top-color: rgba(255, 255, 255, .15); }
.nh-wy__l li { position: relative; padding-left: 16px; font-size: .88rem; line-height: 1.4; }
.nh-wy__l li::before { content: ''; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: var(--lime-deep); }
.nh-wy--big .nh-wy__l li::before { background: var(--lime); }
.nh-wy__m { margin-top: auto; padding-top: 16px; display: grid; gap: 6px; }
.nh-wy__r { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.nh-wy__r b { color: var(--ink); font-weight: 700; text-align: right; }
.nh-wy--big .nh-wy__r { color: rgba(255, 255, 255, .5); }
.nh-wy--big .nh-wy__r b { color: #F1EFEA; }
.nh-wy__badge { position: absolute; top: -10px; right: 18px; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; background: var(--lime); color: var(--ink); padding: 6px 13px; border-radius: var(--r-pill); }
.nh-ways__f { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.nh-ways__f p { font-size: .95rem; color: var(--ink-2); }

/* ===========================================================================
   7 — TESTIMONIALS
   =========================================================================== */
.nh-tw { background: #1F221B; color: #F2F3EE; }
.nh-tw .wrap { display: flex; flex-direction: column; }
.nh-tw__eye { font-family: var(--font-body); font-weight: 700; font-size: clamp(.71rem, .9vw, .81rem); letter-spacing: .11em; text-transform: uppercase; color: var(--lime); margin-bottom: clamp(16px, 2vw, 24px); }
.nh-tw__head { display: grid; grid-template-columns: 1fr auto; gap: clamp(16px, 3.4vw, 50px); align-items: end; margin-bottom: clamp(22px, 2.8vw, 38px); }
.nh-tw__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.95rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: -.045em; margin: 0; }
.nh-tw__h span { display: block; color: #A9AD9D; }
.nh-tw__note { text-align: right; font-size: clamp(.92rem, 1.1vw, 1.05rem); line-height: 1.5; color: #A9AD9D; }

.nh-tw__card { order: 2; display: grid; grid-template-columns: clamp(290px, 28vw, 392px) minmax(0, 1fr); border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); }
.nh-tw__id { background: var(--lime); color: #14160F; padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; }
.nh-tw__cat { font-family: var(--font-body); font-weight: 700; font-size: clamp(.69rem, .85vw, .79rem); letter-spacing: .12em; text-transform: uppercase; color: rgba(20, 22, 15, .76); }
.nh-tw__ph { width: clamp(128px, 14vw, 190px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; flex: none; margin: clamp(16px, 2.2vw, 32px) 0 clamp(14px, 1.8vw, 22px); border: 2px solid rgba(20, 22, 15, .32); background: rgba(20, 22, 15, .06); }
.nh-tw__ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.nh-tw__who b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.18rem, 1.9vw, 1.5rem); letter-spacing: -.035em; line-height: 1.15; }
.nh-tw__who span { display: block; margin-top: 5px; font-size: clamp(.89rem, 1.05vw, .99rem); line-height: 1.35; color: rgba(20, 22, 15, .74); }
.nh-tw__logo { margin-top: auto; padding-top: clamp(18px, 2.4vw, 32px); }
.nh-tw__logo span {
  display: grid; place-items: center; min-height: clamp(52px, 5.4vw, 70px); padding: 12px 20px;
  background: #14160F; border-radius: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.92rem, 1.1vw, 1.08rem); letter-spacing: -.02em; color: #F2F3EE; text-align: center;
}
.nh-tw__logo img { max-height: clamp(28px, 3vw, 40px); width: auto; max-width: 100%; object-fit: contain; display: block; }

.nh-tw__q { background: #262A20; padding: clamp(22px, 2.8vw, 42px); display: flex; flex-direction: column; }
.nh-tw__qtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 2vw, 26px); }
.nh-tw__kick { font-family: var(--font-body); font-weight: 500; font-size: clamp(.68rem, .82vw, .78rem); letter-spacing: .13em; text-transform: uppercase; color: #9DA394; padding-top: .2em; }
.nh-tw__mark { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: .72; color: var(--lime); flex: none; }
.nh-tw__q blockquote { margin: 0; font-family: var(--font-body); font-size: clamp(1.04rem, 1.9vw, 1.48rem); line-height: 1.46; letter-spacing: -.022em; color: #A9AD9D; max-width: 44ch; }
.nh-tw__q blockquote b { color: #F2F3EE; font-weight: 600; }
.nh-tw__foot { margin-top: auto; padding-top: clamp(20px, 2.6vw, 34px); border-top: 1px solid rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nh-tw__count { font-family: var(--font-body); font-size: clamp(.88rem, 1vw, 1rem); color: #9DA394; letter-spacing: .03em; }
.nh-tw__count b { color: #F2F3EE; font-weight: 700; }
.nh-tw__nav { display: flex; gap: 10px; }
.nh-tw__nav button {
  width: clamp(40px, 4vw, 52px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28); background: transparent; cursor: pointer;
  display: grid; place-items: center; color: #F2F3EE;
  transition: background .3s, border-color .3s, transform .3s;
}
.nh-tw__nav button:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); }
.nh-tw__nav button:active { transform: scale(.94); }
.nh-tw__nav svg { width: clamp(17px, 1.7vw, 21px); height: clamp(17px, 1.7vw, 21px); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.nh-tw__rail { order: 3; margin-top: clamp(20px, 2.6vw, 32px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 20px); }
.nh-tw__t {
  display: flex; align-items: center; gap: 11px; text-align: left; min-width: 0;
  padding: 0 0 clamp(11px, 1.4vw, 15px); border: 0; border-bottom: 1px solid rgba(255, 255, 255, .16);
  background: transparent; cursor: pointer; transition: border-color .3s;
}
.nh-tw__t[aria-pressed="true"] { border-bottom-color: var(--lime); }
.nh-tw__tph { width: clamp(34px, 3.4vw, 44px); aspect-ratio: 1; border-radius: 50%; flex: none; overflow: hidden; border: 2px solid transparent; box-sizing: border-box; background: rgba(255, 255, 255, .08); transition: border-color .3s; }
.nh-tw__tph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.nh-tw__t[aria-pressed="true"] .nh-tw__tph { border-color: var(--lime); }
.nh-tw__tt { min-width: 0; }
.nh-tw__t b { display: block; font-size: clamp(.82rem, 1vw, .93rem); font-weight: 600; color: #9DA394; transition: color .3s; overflow: hidden; text-overflow: ellipsis; }
.nh-tw__t[aria-pressed="true"] b { color: #F2F3EE; }
.nh-tw__t em { display: block; font-style: normal; font-size: clamp(.74rem, .9vw, .84rem); color: #7E8476; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1040px) {
  .nh-hero { grid-template-columns: 1fr; gap: 26px; }
  .nh-led__card { margin: -48px auto 0; width: min(100%, 460px); }
  .nh-work { grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 20px); }
  .nh-oc__head { grid-template-columns: 1fr; gap: 13px; }
  .nh-oc__note { text-align: left; padding-top: 0; }
  .nh-oc__body { grid-template-columns: 1fr; }
  .nh-oc__list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--hairline); padding: 16px 0; }
  .nh-oc__list::-webkit-scrollbar { display: none; }
  .nh-oc__b { width: auto; flex: none; white-space: nowrap; padding: 12px 18px; }
  .nh-oc__b .nh-ar { display: none; }
  .nh-oc__panel { padding: 22px 0 0; }
  .nh-oc__t { max-width: none; }
  .nh-grow { grid-template-columns: 1fr; gap: 22px; }
  .nh-ways { grid-template-columns: 1fr; gap: 10px; }
  .nh-tw__head { grid-template-columns: 1fr; gap: 11px; }
  .nh-tw__note { text-align: left; }
  .nh-tw__card { grid-template-columns: 1fr; order: 3; }
  .nh-tw__rail { order: 2; margin: 0 0 22px; }
  .nh-tw__id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
  .nh-tw__cat { grid-column: 2; align-self: end; }
  .nh-tw__ph { grid-row: 1 / 3; grid-column: 1; margin: 0; width: clamp(96px, 20vw, 128px); }
  .nh-tw__who { grid-column: 2; align-self: start; }
  .nh-tw__logo { grid-column: 1 / -1; margin-top: 0; padding-top: 16px; }
  .nh-tw__logo span { justify-self: start; min-width: min(100%, 220px); }
}
@media (max-width: 700px) {
  /* A rail rather than a stack. Six full-width cards made this band almost
     4,000px tall on a phone — most of the page's scroll for one section. The
     cards run to the screen edge so the next one peeks, which is the only
     affordance a swipeable row needs. */
  .nh-work {
    display: flex; grid-template-columns: none; align-items: stretch;
    gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .nh-work::-webkit-scrollbar { display: none; }
  .nh-wk { flex: 0 0 86%; scroll-snap-align: start; }
}
@media (max-width: 700px) {
  /* ---- the voices, tightened for a phone ----
     The headline block goes: on a small screen the eyebrow already names the
     section, and "Good work. Better relationships." plus its note cost 119px
     before a single quote is reached. It stays on desktop, where there is room
     for it to do its job. */
  .nh-tw__head { display: none; }
  .nh-tw { padding-block: 32px !important; }
  .nh-tw__eye { margin-bottom: 14px; }

  /* the rail carries five faces; without the names under them it needs far
     less room, and the face is what the visitor is picking anyway */
  .nh-tw__rail { margin: 0 0 16px; gap: 6px; }
  .nh-tw__t { padding: 8px 4px; }
  .nh-tw__tph { width: 38px; }

  .nh-tw__id { padding: 18px; gap: 14px; }
  .nh-tw__ph { width: 76px; }
  .nh-tw__logo { padding-top: 12px; }
  .nh-tw__q { padding: 18px; }
}
@media (max-width: 620px) {
  .nh-wk__next h3 { max-width: none; }
  .nh-oc__row { grid-template-columns: clamp(86px, 24vw, 102px) minmax(0, 1fr); gap: 12px; }
  /* Faces only. The names wrapped to two lines here and made the rail taller
     than the portrait it selects — and the card directly below already shows
     the name, role and company of whoever is picked. */
  .nh-tw__rail { gap: 8px; justify-content: flex-start; }
  .nh-tw__t { flex-direction: column; align-items: center; gap: 0; padding: 4px; }
  .nh-tw__t em, .nh-tw__t b { display: none; }
  .nh-tw__tph { width: 44px; }
  .nh-ways__f, .nh-wk__more { flex-direction: column; align-items: flex-start; }
  .nh-led__f { flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .nh-wk, .nh-wy, .nh-wk__img img, .nh-wk__go { transition-duration: .01ms !important; }
}

/* ===========================================================================
   CASE OVERLAY
   Opens from a hero tile or a work card. The full case-study page at
   /work/<slug>/ is unchanged and stays the destination without JavaScript.
   =========================================================================== */
.ov { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(10px, 2.6vw, 40px); }
/* an author display rule outranks the browser's [hidden] { display: none } */
.ov[hidden] { display: none; }

.ov__scrim { position: absolute; inset: 0; background: rgba(20, 18, 28, .58); animation: ovFade .22s var(--ease); }

.ov__sheet {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(100%, 1120px); max-height: min(93vh, 1040px);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--canvas); border-radius: clamp(14px, 1.6vw, 22px);
  padding: clamp(22px, 3.2vw, 50px);
  box-shadow: 0 40px 110px -46px rgba(20, 18, 28, .66);
  animation: ovRise .3s var(--ease);
}
.ov__sheet:focus { outline: none; }
.ov__sheet::-webkit-scrollbar { width: 10px; }
.ov__sheet::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 100px; }

/* the close button rides along as the sheet scrolls, and the block below is
   pulled up under it so it reads as sitting in the corner of the panel */
.ov__x {
  position: sticky; top: 0; z-index: 3; flex: none; align-self: flex-end;
  width: clamp(38px, 3.4vw, 46px); height: clamp(38px, 3.4vw, 46px);
  margin-bottom: clamp(-46px, -3.4vw, -38px);
  border: 0; border-radius: 50%; background: var(--night); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .3s var(--ease), background .3s;
}
.ov__x:hover { transform: rotate(90deg); background: var(--ink-2); }
.ov__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

.ov__inner { min-width: 0; }
.ov__k {
  margin: 0 0 12px; padding-right: clamp(48px, 5vw, 64px);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.ov__k i { font-style: normal; opacity: .5; }
.ov__k .ov__st { color: var(--ink-2); font-weight: 700; }

.ov__h {
  margin: 0 0 clamp(14px, 1.6vw, 20px); padding-right: clamp(48px, 5vw, 64px);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.02; letter-spacing: -.045em; color: var(--ink);
}
.ov__d { margin: 0; max-width: 72ch; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.62; color: var(--ink-2); }

.ov__chips { list-style: none; margin: clamp(18px, 2.2vw, 28px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ov__chips li {
  padding: 9px 18px; border-radius: var(--r-pill); background: var(--canvas-deep);
  font-size: clamp(.86rem, 1vw, .95rem); color: var(--ink-2);
}

.ov__m {
  margin: clamp(20px, 2.4vw, 32px) 0 0; padding: clamp(16px, 1.9vw, 26px) clamp(18px, 2.1vw, 30px);
  background: var(--lime); border-radius: var(--r-md);
  font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.5; color: var(--ink);
}
.ov__m b { font-weight: 800; }
.ov__m span { color: rgba(20, 18, 28, .78); }

/* the artwork is square, so a square frame crops none of it */
.ov__g {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(22px, 2.6vw, 36px);
}
.ov__gi {
  display: block; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden;
  background: var(--canvas-deep); border: 1px solid var(--hairline);
}
.ov__gi img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.ov__gi:hover img { transform: scale(1.03); }

.ov__note {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-size: clamp(.84rem, .95vw, .92rem); color: var(--ink-muted);
}

.ov__full { margin: clamp(22px, 2.6vw, 34px) 0 0; padding-top: clamp(16px, 1.8vw, 24px); border-top: 1px solid var(--hairline); }
.ov__full a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.98rem, 1.15vw, 1.1rem);
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
}
.ov__full a:hover { color: var(--lime-ink); }

@keyframes ovFade { from { opacity: 0; } }
@keyframes ovRise { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 1040px) {
  .ov__g { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* one artwork per row on a phone: these are social posts with small type
     baked in, and at half a phone's width none of it can be read */
  .ov__g { grid-template-columns: 1fr; }
  /* the supplied design keeps a centred card on a phone rather than a sheet
     pinned to the bottom edge, so the scrim reads all the way round it */
  .ov { padding: 14px; }
  .ov__sheet { max-height: 88vh; padding: 20px 18px 24px; border-radius: 16px; }
  .ov__h { font-size: clamp(1.7rem, 8vw, 2.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ov__scrim, .ov__sheet { animation: none !important; }
  .ov__x, .ov__gi img { transition: none !important; }
}


/* ===========================================================================
   THE CREATOR TEAM
   Its own dark palette rather than the page's night tokens, so the band reads
   as a separate thing from the testimonials wall further down.
   =========================================================================== */
.ct-band {
  --ct-bg: #14180F;
  --ct-line: rgba(235, 240, 222, .13);
  --ct-dim: #9AA38E;
  --ct-card: #F4F4EF;
  --ct-card-line: rgba(20, 24, 15, .1);
  --ct-card-ft: #E2EBCB;
  --ct-tile: #1C2116;
  background: var(--ct-bg); color: #F2F4EC;
  padding-block: clamp(42px, 3.9vw, 62px);
  /* the header is fixed, so an #creators jump must stop clear of it */
  scroll-margin-top: 96px;
}

/* ---- top bar ---- */
.ct-top {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-bottom: clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--ct-line);
  font-family: var(--font-body); font-size: clamp(.72rem, .82vw, .8rem);
  font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.ct-top__k { color: var(--lime); }
.ct-top__r { color: var(--ct-dim); font-weight: 500; }

.ct-lead {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.2vw, 68px);
  align-items: start; padding-top: clamp(26px, 2.7vw, 40px);
}
.ct-lead > * { min-width: 0; }

/* ---- the figure ---- */
.ct-n {
  margin: 0; font-family: var(--font-display); font-weight: 800; color: var(--lime);
  font-size: clamp(3.6rem, 9.4vw, 7.6rem); line-height: .88; letter-spacing: -.055em;
  /* the digits change all the way up, so the box must not jump while counting */
  font-variant-numeric: tabular-nums;
}
.ct-n__u {
  margin: clamp(9px, 1vw, 13px) 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.32rem, 2.3vw, 2rem); letter-spacing: -.035em; color: #F2F4EC;
}
.ct-h {
  margin: clamp(22px, 2.1vw, 30px) 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.7vw, 3.15rem); line-height: 1.06; letter-spacing: -.04em; color: #F2F4EC;
}
.ct-p { margin: clamp(13px, 1.2vw, 17px) 0 0; font-size: clamp(.96rem, 1.15vw, 1.08rem); line-height: 1.62; color: var(--ct-dim); }

/* ---- see it in action ---- */
.ct-see {
  margin-top: clamp(22px, 2.1vw, 30px); display: inline-flex; align-items: center;
  gap: clamp(14px, 1.5vw, 20px); text-decoration: none; color: inherit;
}
.ct-see__i {
  flex: none; width: clamp(88px, 7vw, 104px); aspect-ratio: 4 / 3; border-radius: 8px;
  overflow: hidden; background: var(--ct-tile); display: block;
}
/* the cover is a social post with a caption band across its foot; anchoring
   above centre keeps the photograph in the thumbnail and the band out of it */
.ct-see__i img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .6s var(--ease); }
.ct-see:hover .ct-see__i img { transform: scale(1.06); }
.ct-see__t b {
  display: block; font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ct-dim);
}
.ct-see__t strong {
  display: flex; align-items: center; gap: 10px; margin-top: 7px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(1rem, 1.25vw, 1.15rem); color: #F2F4EC;
}
.ct-see__t strong i { display: block; line-height: 0; }
.ct-see__t strong svg { width: 13px; height: 13px; fill: none; stroke: var(--lime); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.ct-see:hover .ct-see__t strong svg { transform: translate(3px, -3px); }
.ct-see__t > span { display: block; margin-top: 5px; font-size: clamp(.9rem, 1.05vw, .99rem); color: var(--ct-dim); }

/* ---- the method card ---- */
.ct-card { background: var(--ct-card); color: #14180F; border-radius: 14px; overflow: hidden; box-shadow: 10px 12px 0 rgba(0, 0, 0, .22); }
.ct-card__h {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: clamp(14px, 1.2vw, 16px) clamp(18px, 1.8vw, 26px); border-bottom: 1px solid var(--ct-card-line);
}
.ct-card__h > span:first-child {
  font-family: var(--font-body); font-size: clamp(.72rem, .82vw, .8rem); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: #5C6650;
}
.ct-pill { flex: none; padding: 7px 13px; border-radius: 7px; background: #FFF; border: 1px solid var(--ct-card-line); font-size: .84rem; color: #14180F; text-transform: none; letter-spacing: 0; }
.ct-card__b { padding: clamp(18px, 1.7vw, 23px) clamp(18px, 1.8vw, 26px); }
.ct-card__b h3 {
  margin: 0 0 clamp(13px, 1.2vw, 17px); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.28rem, 1.85vw, 1.62rem); line-height: 1.12; letter-spacing: -.035em; color: #14180F;
}
.ct-steps { list-style: none; margin: 0; padding: 0; }
.ct-steps li { display: grid; grid-template-columns: clamp(26px, 2.2vw, 31px) 1fr; padding: clamp(11px, .95vw, 13px) 0; }
.ct-steps li + li { border-top: 1px solid var(--ct-card-line); }
.ct-steps b { font-family: var(--font-body); font-size: .8rem; font-weight: 500; color: #8A9280; padding-top: 2px; }
.ct-steps h4 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.2vw, 1.1rem); letter-spacing: -.025em; color: #14180F; }
.ct-steps p { margin: 5px 0 0; font-size: clamp(.92rem, 1.08vw, 1.01rem); line-height: 1.5; color: #6B7362; }
.ct-card__f {
  background: var(--ct-card-ft); padding: clamp(16px, 1.4vw, 19px) clamp(18px, 1.8vw, 26px);
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
}
.ct-card__ic { line-height: 0; margin-top: 2px; }
.ct-card__ic svg { width: 18px; height: 18px; fill: none; stroke: #3F4A31; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ct-card__f b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(.99rem, 1.18vw, 1.08rem); letter-spacing: -.025em; color: #14180F; }
.ct-card__f p { margin: 5px 0 0; font-size: clamp(.92rem, 1.08vw, 1.01rem); line-height: 1.5; color: #4E5943; }

/* ---- the sizes ---- */
.ct-rule { height: 1px; background: var(--ct-line); margin-top: clamp(28px, 2.5vw, 36px); }
.ct-size { display: grid; grid-template-columns: 1fr 1.42fr; gap: clamp(26px, 3.8vw, 58px); align-items: start; padding-top: clamp(24px, 2.1vw, 30px); }
.ct-size > * { min-width: 0; }
.ct-size__k { display: block; font-family: var(--font-body); font-size: clamp(.72rem, .82vw, .8rem); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--lime); }
.ct-size__l h3 { margin: clamp(11px, 1.3vw, 16px) 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.32rem, 2.1vw, 1.78rem); line-height: 1.14; letter-spacing: -.035em; color: #F2F4EC; }
.ct-size__l p { margin: clamp(11px, 1.3vw, 16px) 0 0; font-size: clamp(.94rem, 1.1vw, 1.03rem); line-height: 1.6; color: var(--ct-dim); }

.ct-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.1vw, 15px); }
.ct-tile {
  position: relative; text-align: left; cursor: pointer;
  padding: clamp(15px, 1.4vw, 19px) clamp(14px, 1.4vw, 19px);
  border-radius: 10px; background: var(--ct-tile); border: 1px solid var(--ct-line); color: #F2F4EC;
  transition: background .25s, border-color .25s, color .25s, transform .3s var(--ease);
}
.ct-tile:hover { transform: translateY(-2px); border-color: rgba(235, 240, 222, .28); }
.ct-tile b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.65rem); letter-spacing: -.04em; line-height: 1; }
.ct-tile > span { display: block; margin-top: 7px; font-size: clamp(.86rem, 1vw, .95rem); color: var(--ct-dim); }
.ct-tile i { position: absolute; top: 9px; right: 12px; font-style: normal; font-size: .82rem; color: #14180F; opacity: 0; transition: opacity .2s; }
.ct-tile[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #14180F; }
.ct-tile[aria-pressed="true"] > span { color: rgba(20, 24, 15, .68); }
.ct-tile[aria-pressed="true"] i { opacity: 1; }

.ct-size__f { margin-top: clamp(15px, 1.4vw, 19px); display: grid; grid-template-columns: 1fr auto; gap: clamp(16px, 2vw, 28px); align-items: center; }
.ct-note { margin: 0; font-size: clamp(.94rem, 1.1vw, 1.03rem); line-height: 1.5; }
.ct-note b { font-weight: 700; color: #F2F4EC; }
.ct-note span { color: var(--ct-dim); }
.ct-cta { border-radius: 8px; justify-self: end; }
.ct-help { grid-column: 1 / -1; margin: 0; font-size: clamp(.9rem, 1.05vw, .99rem); color: var(--ct-dim); }
/* The creator line. Deliberately quiet: the brief above it is what this band is
   selling, so this sits below the rule in muted text and never as a button. */
.ct-join {
  grid-column: 1 / -1; margin: 0; padding-top: clamp(13px, 1.3vw, 17px);
  border-top: 1px solid var(--ct-line);
  font-size: clamp(.88rem, 1.02vw, .96rem); color: var(--ct-dim);
}
.ct-join a { color: #F2F4EC; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ct-line); transition: text-decoration-color .2s ease; }
.ct-join a:hover, .ct-join a:focus-visible { text-decoration-color: currentColor; }

@media (max-width: 1040px) {
  .ct-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  /* both rows hold their two columns until the content genuinely stops fitting.
     Stacking them at 1040 left half the row empty and doubled the band's height
     on a landscape tablet for no gain. */
  .ct-lead { grid-template-columns: 1fr; gap: 30px; }
  .ct-size { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 700px) {
  /* the method card is what a phone can do without: it pushes the sizes, which
     are the part a visitor acts on, a whole screen further down */
  .ct-card { display: none; }
  .ct-top__r { display: none; }

  /* The promise line goes too. "20,000 creators with us." and the two grey
     lines under it already say the same thing, and on a phone this heading
     costs 86px before the reader reaches the Athiradi proof. */
  .ct-h { display: none; }

  .ct-band { padding-block: 34px; }
  .ct-p { margin-top: 12px; }
  .ct-see { margin-top: 20px; }
  .ct-see__i { width: 96px; }
  .ct-rule { margin-top: 22px; }

  /* the sizes block is over half the band on a phone, so its own rhythm is
     pulled in as well */
  .ct-size { padding-top: 20px; }
  .ct-size__l h3 { margin-top: 9px; }
  .ct-size__l p { margin-top: 9px; }
  .ct-tile { padding: 13px 14px; }
  /* stacked, the grid's own row gap already separates these three — the hint's
     extra top margin was stacking on top of it */
  .ct-size__f { margin-top: 14px; grid-template-columns: 1fr; gap: 12px; }
  .ct-cta { justify-self: stretch; justify-content: center; }
  .ct-help { text-align: center; margin-top: 0; }
  .ct-join { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-see__i img, .ct-see__t strong svg, .ct-tile, .ct-cta { transition: none !important; }
}


/* ===========================================================================
   OUR SERVICES — a picture, a name, and the detail written over the picture
   =========================================================================== */
.sv__head { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 3vw, 60px); align-items: end; }
.sv__head > * { min-width: 0; }
.sv__h {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: .96; letter-spacing: -.05em; color: var(--ink);
}
.sv__h i { font-style: normal; color: var(--lime-deep); }
.sv__note { margin: 0; text-align: right; font-size: clamp(.94rem, 1.1vw, 1.05rem); line-height: 1.55; color: var(--ink-muted); }

.sv__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.1vw, 16px); margin-top: clamp(22px, 2.8vw, 38px);
}
.sv__c {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 10px; background: #EAECE2; border: 1px solid rgba(20, 18, 28, .07);
  transition: background .35s var(--ease);
}
.sv__c.is-open { background: var(--lime); border-color: var(--lime); }

/* ---- the picture, and the panel written over it ---- */
.sv__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #1B2119; }
.sv__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv__panel {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(19, 28, 20, .93);
  padding: clamp(18px, 2vw, 28px);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.sv__c.is-open .sv__panel { opacity: 1; visibility: visible; }
.sv__say { margin: 0; font-size: clamp(.96rem, 1.1vw, 1.06rem); line-height: 1.55; color: #EDF0E8; }
.sv__panel .sv__cta {
  margin-top: clamp(16px, 1.9vw, 24px); padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid rgba(237, 240, 232, .28); color: var(--lime);
}
.sv__panel .sv__cta svg { stroke: var(--lime); }

.sv__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(.95rem, 1.08vw, 1.04rem); text-decoration: none; color: var(--ink);
}
.sv__cta svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.sv__cta:hover svg { transform: translate(3px, -3px); }

/* ---- the body under the picture ---- */
.sv__body { padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; flex: 1; }
.sv__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sv__n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--ink-muted); }
.sv__c.is-open .sv__n { color: rgba(20, 18, 28, .62); }

.sv__tog {
  display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none;
  cursor: pointer; font-family: var(--font-body); font-size: .9rem; color: var(--ink-2);
}
.sv__c.is-open .sv__tog { color: var(--ink); }
.sv__tog svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .4s var(--ease); }
/* the plus becomes a cross by turning, rather than being swapped out */
.sv__c.is-open .sv__tog svg { transform: rotate(45deg); }
.sv__tog__shut { display: none; }
.sv__c.is-open .sv__tog__open { display: none; }
.sv__c.is-open .sv__tog__shut { display: inline; }

.sv__t {
  margin: clamp(16px, 1.9vw, 24px) 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.28rem, 1.8vw, 1.72rem); line-height: 1.08; letter-spacing: -.04em; color: var(--ink);
}
.sv__list { margin: clamp(14px, 1.7vw, 22px) 0 0; font-size: clamp(.92rem, 1.05vw, 1.01rem); line-height: 1.5; color: var(--ink-2); }
.sv__c.is-open .sv__list { color: rgba(20, 18, 28, .72); }

/* the phone version of the panel stays out of the way everywhere else */
.sv__drop { display: none; }

/* Four across holds down to 900px. Dropping to two at 1040 made each card
   455px wide with a 455px square picture on top, and the band ran to 1,500px —
   taller on a tablet than on a desktop. */
@media (max-width: 900px) {
  .sv__grid { grid-template-columns: repeat(2, 1fr); }
  /* two-up, the square picture is the whole problem, so it is shallower here */
  .sv__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
  /* A row rather than a card: the picture becomes a thumbnail beside the name,
     and the detail opens underneath instead of over it — over a 110px thumb
     there is nowhere to write it. */
  .sv__head { grid-template-columns: 1fr; gap: 12px; }
  .sv__note { text-align: left; }
  .sv__grid { grid-template-columns: 1fr; gap: 12px; }
  /* a grid, not a row, so the panel below can span both columns */
  .sv__c { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: start; padding: 16px; gap: 0 16px; }
  .sv__media { width: 110px; aspect-ratio: 1 / 1; border-radius: 8px; }
  .sv__drop { grid-column: 1 / -1; }
  .sv__panel { display: none; }
  .sv__body { padding: 0; }
  .sv__t { margin-top: 10px; font-size: 1.32rem; }
  .sv__list { margin-top: 8px; }

  .sv__drop {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows .45s var(--ease), opacity .3s;
  }
  .sv__c.is-open .sv__drop { grid-template-rows: 1fr; opacity: 1; }
  .sv__drop > div { overflow: hidden; min-height: 0; }
  .sv__drop .sv__say { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(20, 18, 28, .2); color: var(--ink); }
  .sv__drop .sv__cta { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(20, 18, 28, .2); }
}
@media (prefers-reduced-motion: reduce) {
  .sv__c, .sv__panel, .sv__drop, .sv__tog svg, .sv__cta svg { transition: none !important; }
}