/* COET — design pass (2026-11-12). Loaded last; each block overrides an earlier rule on purpose.
   1 hero hierarchy · 2 footer wordmark as an outline · 3 spacing rhythm and a quiet numbers line · 4 the client band joins the dark palette */

/* ── 1. Hero: the globe sits up and to the left (see orb.js); the headline and the paragraph each get calm ground ── */
@media (min-width: 901px) {
  .ws-catch { text-shadow: none; }
  .ws-catch::before { content: ""; position: absolute; z-index: -1; left: 26%; right: -4%; top: -34%; bottom: -46%; pointer-events: none;
    background: radial-gradient(60% 62% at 52% 50%, rgb(0 0 0 / .86), rgb(0 0 0 / .6) 55%, transparent 100%); filter: blur(24px); }
  .ws-intro { left: 63%; top: 19%; max-width: 21.5em; font: 400 clamp(17px, 1.3vw, 19px)/1.45 var(--apple); letter-spacing: -.005em; color: #d2d2d7; text-shadow: none; }
}

/* ── 2. Footer: the giant wordmark is solid white; under the cursor its letters turn to amber outline (mark.js) ──
   Two stacked copies of the letters, masked by the same soft circle the other way round, so the solid drops
   out exactly where the outline comes in. With --r at 0 the outline is fully masked away. */
.foot__mark .mark { position: relative; --mx: -9999px; --my: -9999px; --r: 0px; }
.foot__mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.mark__solid path { fill: #fff; }
.mark__line { position: absolute; inset: 0; }
.mark__line path { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mark__line { -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 calc(var(--r) * .86), transparent var(--r)); mask-image: radial-gradient(circle at var(--mx) var(--my), #000 calc(var(--r) * .86), transparent var(--r)); }
.mark__solid { -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), transparent calc(var(--r) * .86), #000 var(--r)); mask-image: radial-gradient(circle at var(--mx) var(--my), transparent calc(var(--r) * .86), #000 var(--r)); }

/* ── 3. Rhythm: sections breathe a little less; the four numbers become one quiet line ── */
:root { --section: clamp(var(--s8), 8.5vw, var(--s10)); }
.specs { padding-block: clamp(var(--s6), 4vw, var(--s7)); }
.specs__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4) var(--s6); }
.specs__row li, .specs__row li:first-child, .specs__row li:nth-child(3) { display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; }
.specs__n { font: 600 clamp(22px, 2vw, 28px)/1 var(--apple); letter-spacing: -.02em; }
.specs__l { max-width: none; font: 400 clamp(14px, 1.1vw, 16px)/1.3 var(--apple); letter-spacing: 0; text-transform: none; color: var(--apple-grey, #86868b); }
.statement { padding-block: clamp(var(--s8), 8vw, var(--s10)); }
@media (min-width: 901px) { .svc__stage .stage { aspect-ratio: 5 / 4; } }   /* the stage ends where the list ends */
@media (max-width: 900px) { .specs__row { display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--s4); } }

/* ── 4. Client band: dark like the rest, set apart by a hairline and a slightly raised surface ── */
.client, html.has-gsap main > .client { background: #0a0a0b; color: #f5f5f7; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); min-height: 64vh; }
.client__kicker { color: var(--signal); }
.quote__text { font-size: clamp(26px, 2.9vw, 44px); line-height: 1.14; max-width: 22ch; }
.quote__role { color: var(--apple-grey, #86868b); }
.client__photo { filter: grayscale(1) contrast(1.05) brightness(.92); }
@media (min-width: 901px) {   /* the portrait becomes an inset card, so the band reads as one dark surface */
  .client { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding: clamp(var(--s7), 6vw, var(--s9)) var(--gutter); gap: clamp(var(--s6), 5vw, var(--s9)); }
  .client__photo { height: auto; aspect-ratio: 4 / 5; max-height: 70vh; border-radius: 14px; }
  .client__body { padding: 0; }
}

/* ── 5. UI review pass: a real call to action in the hero, disciplined amber, a little surface depth ── */
.ws-cta { display: flex; align-items: center; gap: 22px; margin-top: 24px; }
.ws-cta__main { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; background: #fff; color: #000; font: 600 15px/1 var(--apple); letter-spacing: -.01em; will-change: transform; transition: background .2s, box-shadow .3s; }
.ws-cta__main:hover { background: #fff; box-shadow: 0 0 0 5px rgb(255 255 255 / .12), 0 10px 30px rgb(245 158 11 / .25); }
.ws-cta__main:active { background: #e8e8ed; }
.ws-cta__more { display: inline-flex; gap: 6px; color: #f5f5f7; font: 500 15px/1 var(--apple); letter-spacing: -.01em; }
.ws-cta__more span { transition: transform .25s var(--ease); }
.ws-cta__more:hover span { transform: translateX(4px); }
.ws-cta a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
/* split titles are revealed by motion.js; they must not also wait for the plain rise-in */
html.has-gsap .is-split[data-rise] { opacity: 1; transform: none; }
.is-split { padding-bottom: .08em; }                    /* room for descenders inside the line masks */
/* the "accepting projects" flag: an outline chip, not a solid amber block */
.flag { padding: 7px 12px; border-radius: 999px; background: rgb(245 158 11 / .08); color: var(--signal); box-shadow: inset 0 0 0 1px rgb(245 158 11 / .55); }
.flag::before { background: var(--signal); }
/* cards catch a little light on their top edge */
.plan { box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); }

/* ── 6. No menu page: the bar carries the section links itself ── */
.mnav__links { justify-self: start; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); }
.mnav__links a { display: inline-flex; align-items: center; min-height: 44px; color: #f5f5f7; opacity: .78; font: 500 13px/1 var(--apple); letter-spacing: -.005em; transition: opacity .2s; }
.mnav__links a:hover, .mnav__links a:focus-visible { opacity: 1; }
@media (max-width: 760px) { .mnav__links a:nth-child(n+3) { display: none; } }   /* phones: Work and Services; the rest is one scroll away */

/* ── 7. The COET mark in the bar: plain solid fill, no stroke and no hover change. `currentColor` rather than
   #fff, so the menu's dark-on-light state still works. */
.mnav__logo svg path, .nav__logo svg path { fill: currentColor; stroke: none; }

/* ── 8. The hero's call to action sits at the bottom of the screen ──
   It used to hang off the end of the paragraph, which put the one thing a visitor is meant to press halfway up
   the right-hand side with nothing under it. On its own at the foot of the stage it closes the screen: the
   headline reads, then the eye falls to the button. Aligned with the headline's own left edge rather than the
   paragraph's, because that is the line the composition is built on. */
@media (min-width: 901px) {
  .ws-cta { position: absolute; left: 33.5%; right: var(--gutter); bottom: clamp(28px, 4.5vh, 56px); margin-top: 0; z-index: 2; }
}
@media (max-width: 900px) {
  /* The phone home is a pill column that scrolls behind everything (metalab.css), and the paragraph the button
     used to hang off is hidden there — so it goes to the very bottom edge, inside the band where the column's
     own mask has already faded the pills out. */
  .ws-cta { position: absolute; left: 16px; right: 16px; bottom: 20px; margin-top: 0; z-index: 3; gap: 18px; }
  .ws-cta__main { height: 44px; padding: 0 20px; }
}

/* ── 9. Home is one screen ──
   The stage is the whole home page now: the numbers, the statement, services, pricing, the client, the team and
   the contact form all moved to /services/. So the home page does not scroll at all — the stage fills the
   viewport, and the footer (the only thing left under it) is dropped rather than left hanging below the fold. */
html:has(body.is-home), body.is-home { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.is-home .foot { display: none; }
body.is-home main { height: 100svh; }
body.is-home .ws { height: 100svh; min-height: 0; }

/* ── 10. Case studies run the full width ──
   The 1440px cap made the plates float in the middle of a wide screen while the panels behind them went
   edge to edge. Dropping it lets the screenshots fill the plate they sit on; the gutter still holds the sides,
   and the long text blocks keep their own ch-based measures, so nothing becomes a 200-character line. */
main.cs .cs-wrap { max-width: none; }

/* ── 11. Medium is the heaviest weight on a case study ──
   § "Flat Apple typography" in metalab.css set every case-study display line to semibold. At 100px+ that reads
   heavy and dated; medium (500) holds the same hierarchy by size alone. Nothing here goes above 500. */
.cs-title, .cs-next__name, .cs-help__title, .cs-num, .cs-live__url, .wi-name,
.cs-plate--type span, .ws-shot--type span { font-weight: 500; }
.cs-statement, .cs-lede { font-weight: 500; }
.cs-rows h3, .cs-feat h3, .dg-t { font-weight: 500; }

/* ── 12. The case-study hero is shorter ──
   It opened with ~194px of air above the title and another ~96px under the meta row, which made the header
   read as a tall empty bar before the work appeared. The title now sits just clear of the floating nav. */
.cs-hero, .is-sub .cs-hero { padding-top: calc(66px + clamp(12px, 2vw, 32px)); }
.cs-back { margin-bottom: var(--s4); }
.cs-meta { margin: clamp(var(--s5), 3vw, var(--s7)) 0 clamp(var(--s5), 2.6vw, var(--s6)); }
.cs-panel--hero { padding-block: clamp(var(--s6), 5vw, var(--s9)); }

/* ── 13. Who we are, the roles opening soon, and the studios (services page) ── */
.roles__list, .studios__list { border-top: 1px solid var(--hair); }
.roles__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--s4) clamp(var(--s5), 3vw, var(--s8));
  padding: clamp(var(--s4), 2.2vw, var(--s5)) 0; border-bottom: 1px solid var(--hair); }
.roles__k { color: var(--apple-grey); font-variant-numeric: tabular-nums; }
.roles__body h3 { font: 500 clamp(19px, 1.7vw, 26px)/1.2 var(--apple); letter-spacing: -.015em; color: #f5f5f7; }
.roles__body p { margin-top: 6px; font: 400 clamp(14px, 1.1vw, 16px)/1.45 var(--apple); color: var(--apple-grey); max-width: 52ch; }
.roles__when { color: var(--signal); white-space: nowrap; }
.studios__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: clamp(var(--s5), 3vw, var(--s7)); }
.studios__list li { padding-top: var(--s5); border-top: 1px solid var(--hair-2); }
.studios__k { color: var(--signal); }
.studios__name { margin-top: 10px; font: 500 clamp(22px, 2vw, 30px)/1.15 var(--apple); letter-spacing: -.02em; color: #f5f5f7; }
.studios__meta { margin-top: 8px; font: 400 clamp(14px, 1.1vw, 16px)/1.45 var(--apple); color: var(--apple-grey); }
@media (max-width: 900px) {
  .roles__list li { grid-template-columns: auto minmax(0, 1fr); }
  .roles__when { grid-column: 2; }
  .studios__list { grid-template-columns: 1fr; }
}

/* ── 14. Legal pages (privacy): one measured column, the Apple face the services page uses, numbered sections ── */
.lg__in { max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; font-family: var(--apple); }
.lg__stamp { color: var(--apple-grey); }
.lg__lede { margin-top: var(--s5); font: 400 clamp(21px, 2vw, 28px)/1.34 var(--apple); letter-spacing: -.015em; color: #f5f5f7; text-wrap: pretty; }
.lg__h { display: flex; gap: var(--s4); align-items: baseline; margin-top: clamp(var(--s7), 5vw, var(--s9));
  padding-top: var(--s5); border-top: 1px solid var(--hair); font: 500 clamp(22px, 2vw, 30px)/1.2 var(--apple); letter-spacing: -.02em; color: #f5f5f7; }
/* Scoped past `.lg__in .mono`, which the span also carries. */
.lg__in .lg__n { flex: none; font-size: 12px; color: var(--signal); }
.lg__h3 { margin-top: var(--s6); font: 500 clamp(17px, 1.4vw, 20px)/1.3 var(--apple); color: #f5f5f7; }
.lg .lg__in p:not(.lg__stamp):not(.lg__lede) { margin-top: var(--s4); font: 400 clamp(15px, 1.2vw, 17px)/1.6 var(--apple); color: var(--apple-grey); text-wrap: pretty; }
.lg__in strong { color: var(--ink); font-weight: 500; }
/* Only the literal values quoted in a sentence; the section numbers carry .mono too and stay amber. */
.lg__in p .mono { font-size: .9em; color: var(--ink-2); }
.lg__in a { color: var(--ink); border-bottom: 1px solid var(--hair-2); }
.lg__in a:hover { color: var(--signal); border-bottom-color: var(--signal); }
.lg__list { margin-top: var(--s4); display: grid; gap: var(--s4); }
.lg__list li { font: 400 clamp(15px, 1.2vw, 17px)/1.6 var(--apple); color: var(--apple-grey); padding-left: var(--s4); border-left: 1px solid var(--hair-2); }
.lg__rows { margin-top: var(--s5); border-top: 1px solid var(--hair); }
.lg__rows li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--s2) clamp(var(--s5), 3vw, var(--s7));
  padding: var(--s5) 0; border-bottom: 1px solid var(--hair); }
.lg__rows h4 { font: 500 17px/1.3 var(--apple); color: #f5f5f7; }
.lg .lg__rows p { margin-top: 0; }
@media (max-width: 760px) {
  .lg__rows li { grid-template-columns: 1fr; }
  .lg__h { gap: var(--s3); }
}