/* ============================================================
   ATOMIC — the live build of the approved canvas concept.
   ------------------------------------------------------------
   Loaded by / and nothing else. base.css
   supplies the brand tokens and reset; direction-d.css is not
   loaded, so nothing of the production layout language leaks in.

   ── THE IDEA ────────────────────────────────────────────────
   Mid-century Vegas, not neon Vegas. Atomic-age geometry built
   from the brand's own palette, which happens to be an
   atomic-age palette: burnt orange, deep navy, cream.

   ── THE DEVICES ─────────────────────────────────────────────
   THE ROUNDEL   the work inside a circle, overlapped by a solid
                 orange disc. The hero and the proof in one.
   THE STAR      an 8-point star — eight, for 8ward — is the one
                 mark on the site: eyebrow, bullet, index.
   THE CORNER    the navy services field ends in ONE monumental
                 radius. Architecture, not rounded cards.
   THE DISC      the call to action is a navy disc you press.

   ── MOTION ──────────────────────────────────────────────────
   Discs roll in from the left — sideways, forward — and settle.
   The image circle arrives by scale, the star by pop. Nothing
   loops. prefers-reduced-motion gets the finished page.
   ============================================================ */

.at {
  --at-gut: clamp(20px, 5vw, 72px);
  --at-blue: #17439b;
  --at-blue-l: #8fb2f2;

  background: var(--paper);
  color: var(--ink);
  font-family: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
}
.at :focus-visible { outline: 2px solid var(--at-blue); outline-offset: 3px; }
.at-svc :focus-visible, .at-disc-cta:focus-visible { outline-color: var(--at-blue-l); }

/* ---------- atoms ------------------------------------------ */
.at-lbl {
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-55);
}
.at-star { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; }

/* ---------- buttons ---------------------------------------- */
.at-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.at-btn:hover, .at-btn:focus-visible { border-color: var(--at-blue); color: var(--at-blue); }
.at-btn--navy { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.at-btn--navy:hover, .at-btn--navy:focus-visible { background: var(--at-blue); border-color: var(--at-blue); color: var(--paper); }
/* the orange button: ink type, never paper — 4.9:1 (the locked rule) */
.at-btn--signal { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.at-btn--signal:hover, .at-btn--signal:focus-visible { background: var(--at-blue); border-color: var(--at-blue); color: var(--paper); }

/* ============================================================
   BAR
   ============================================================ */
.at-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s5);
  padding: 18px var(--at-gut);
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink);
}
/* The logo — the approved lockup, used as supplied.
   The file (2048x768) carries transparent margins around the artwork:
   9.6% top, 15.4% bottom, 2.7% left. The box is sized so the VISIBLE
   artwork is 44px tall on desktop and 36px on a phone. The 24 Aug
   lockup is cropped tight (no baked-in margins), so no negative-margin
   compensation is needed. Nothing is cropped or scaled
   unevenly: width stays auto. */
.at-logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; }   /* 44px tap target; the image centres inside it */
.at-logo__img { display: block; flex: 0 0 auto; height: 44px; width: auto; max-width: none; }   /* flex: none — a flex item would otherwise be shrunk and the lockup distorted */
@media (max-width: 860px) {
  .at-logo__img { height: 36px; }
}
/* The footer signature: the reversed colourway of the same lockup,
   larger — 300px on desktop, 220px on a phone. Tight artwork, no
   trimming needed. */
.at-logo--foot { min-height: 0; }
.at-logo--foot .at-logo__img { width: min(300px, 100%); height: auto; }
@media (max-width: 860px) {
  .at-logo--foot .at-logo__img { width: min(220px, 100%); }
}
.at-nav { margin-left: auto; }
.at-nav ul { list-style: none; display: flex; gap: var(--s4); }
.at-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-80); text-decoration: none; transition: color 180ms var(--ease-out);
}
.at-nav a:hover, .at-nav a:focus-visible { color: var(--at-blue); }
.at-bar__cta { min-height: 44px; padding: 0 22px; }
.at-burger { display: none; margin-left: auto; padding: 12px 0; background: none; border: 0; }
.at-burger span { font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
/* The menu is an overlay pinned under the sticky bar. In normal flow it
   opened at the top of the document, so a visitor who had scrolled saw
   only the label change while the page jumped. */
.at-menu {
  position: fixed; left: 0; right: 0; top: var(--at-bar-h, 81px); z-index: 39;
  max-height: calc(100vh - var(--at-bar-h, 81px)); overflow-y: auto;
  background: var(--paper); border-bottom: 1px solid var(--ink); padding: var(--s2) var(--at-gut) var(--s5);
}
.at-menu[hidden] { display: none; }
.at-menu ul { list-style: none; }
.at-menu a { display: block; padding: 14px 0; font-size: 22px; color: var(--ink); text-decoration: none; }
.at-menu__cta { margin-top: var(--s3); width: 100%; }

/* ============================================================
   HERO — the statement and the roundel
   ============================================================ */
.at-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* half each: the headline keeps its breaks, the work gets the width */
  gap: var(--s6);
  align-items: end;                                       /* the reel sits on the CTA line */
  padding: clamp(48px, 6vw, 88px) var(--at-gut) clamp(56px, 6.6vw, 96px);
}
.at-hero__copy { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 36px); }
.at-eye { display: flex; align-items: center; gap: 12px; }
.at-eye .at-star { width: 14px; height: 14px; color: var(--signal); }
.at-hero__h {
  font-size: clamp(46px, 7.2vw, 104px);
  font-weight: 600; line-height: 0.96; letter-spacing: -0.025em;
}
.at-hero__h span { display: block; }
.at-hero__sub { font-size: clamp(18px, 1.55vw, 22px); color: var(--ink-80); max-width: 26ch; }
.at-hero__acts { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ============================================================
   SERVICES — the navy field with one monumental corner
   ============================================================ */
.at-svc {
  background: var(--navy);
  color: var(--paper);
  padding: clamp(56px, 6.6vw, 96px) var(--at-gut) clamp(72px, 8.3vw, 120px);
  border-bottom-right-radius: clamp(120px, 15vw, 220px);
}
.at-svc__head { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(32px, 3.9vw, 56px); }
.at-svc__head .at-star { width: 22px; height: 22px; color: var(--signal-lift); }
.at-svc__h { font-size: clamp(40px, 4.4vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
/* ---------- the accordion ---------------------------------
   Three rows, closed on arrival. Each is a button — the whole row —
   that opens its panel with motion: the panel's grid track goes
   0fr -> 1fr (no measuring, no JS heights), the lead line and the
   capabilities follow, and the disc's plus turns into a close.
   A closed row is a dash, the name and the disc; nothing else. */
.at-acc { border-top: 1px solid rgba(250, 248, 245, 0.28); }
.at-acc__item { border-bottom: 1px solid rgba(250, 248, 245, 0.28); }
.at-acc__h { margin: 0; font-size: inherit; }

.at-acc__btn {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 48px;
  grid-template-areas: "mark name disc";
  column-gap: var(--s4);
  align-items: center;
  width: 100%;
  padding: clamp(20px, 2.3vw, 30px) 0;
  background: none; border: 0;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
/* The marker: a short orange dash — editorial, not a numbering system. */
.at-acc__mark { grid-area: mark; width: 28px; height: 2px; background: var(--signal); }
.at-acc__name {
  grid-area: name;
  font-weight: 600; line-height: 0.98; letter-spacing: -0.02em;
  transition: transform 320ms var(--ease-out), color 200ms var(--ease-out);
}
.at-acc__name { font-size: clamp(26px, 2.6vw, 38px); }   /* all three practices at one size */

@media (hover: hover) and (pointer: fine) {
  .at-acc__btn:hover .at-acc__name { transform: translateX(6px); }
  .at-acc__btn:hover .at-acc__disc { transform: scale(1.08); }
  .at-acc__item.is-open .at-acc__btn:hover .at-acc__disc { transform: rotate(45deg) scale(1.08); }
}

/* The disc: an orange circle holding a plus. Open, it rotates
   45 degrees and the plus becomes a close — the atomic language
   doing the interface's job. */
.at-acc__disc {
  grid-area: disc;
  display: block;              /* a span: inline boxes ignore size and transform */
  position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--signal);
  transition: transform 360ms var(--ease-out), background 200ms var(--ease-out);
}
.at-acc__disc i {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px; background: var(--ink);
  transform: translate(-50%, -50%);
}
.at-acc__disc i + i { transform: translate(-50%, -50%) rotate(90deg); }
.at-acc__item.is-open .at-acc__disc { transform: rotate(45deg); }
.at-acc__item.is-open .at-acc__name { color: var(--paper); }

/* The panel. grid-template-rows animates the height honestly. */
.at-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
}
.at-acc__inner {
  min-height: 0; overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 420ms;
}
.at-acc__item.is-open .at-acc__panel { grid-template-rows: 1fr; }
.at-acc__item.is-open .at-acc__inner { visibility: visible; transition-delay: 0s; }

/* The supporting sentence: same voice as the row's description,
   aligned with the capability list beneath it. */
.at-acc__sub {
  margin: 0 0 clamp(16px, 1.6vw, 22px) calc(40px + var(--s4));
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(250, 248, 245, 0.8);
  max-width: 56ch;
}

/* ============================================================
   STUDIO — the orange band
   ============================================================ */
.at-why {
  background: var(--signal);
  color: var(--ink);
  padding: clamp(56px, 6.1vw, 88px) var(--at-gut);
}
.at-why__h {
  font-size: clamp(36px, 3.9vw, 56px);
  font-weight: 600; line-height: 1; letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: clamp(32px, 3.3vw, 48px);
}

/* the integration argument, in prose — same band, no cards */
.at-why__prose { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); max-width: 62ch; }
.at-why__prose p { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6; }
.at-why__prose p:first-child { font-weight: 600; }
.at-why__go a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 4px;
}
.at-why__go a:hover i { transform: translateX(4px); }
.at-why__go i { font-style: normal; transition: transform 240ms var(--ease-out); }

/* ============================================================
   START — the disc
   ============================================================ */
.at-start {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s6);
  align-items: center;
  padding: clamp(64px, 7.8vw, 112px) var(--at-gut);
}
.at-start__copy { display: flex; flex-direction: column; gap: 24px; }
.at-start__h { font-size: clamp(40px, 5vw, 72px); font-weight: 600; line-height: 0.98; letter-spacing: -0.025em; }
.at-start__say { font-size: clamp(19px, 1.8vw, 27px); font-weight: 500; letter-spacing: -0.01em; color: var(--signal-ink); max-width: 30ch; }

.at-press { position: relative; width: min(100%, 360px); aspect-ratio: 6 / 5; justify-self: end; }
.at-press__orb { position: absolute; left: 0; bottom: 0; width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--signal); }
.at-disc-cta {
  position: absolute; right: 0; top: 0;
  width: 72%; aspect-ratio: 1; border-radius: 50%;
  background: var(--navy); color: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; text-decoration: none;
  font-size: 15px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4;
  transition: background 200ms var(--ease-out), transform 320ms var(--ease-out);
}
.at-disc-cta .at-star { width: 18px; height: 18px; color: var(--signal-lift); transition: transform 420ms var(--ease-out); }
.at-disc-cta:hover, .at-disc-cta:focus-visible { background: var(--at-blue); transform: translateX(6px); }
.at-disc-cta:hover .at-star, .at-disc-cta:focus-visible .at-star { transform: rotate(45deg); }

/* ---------- footer — the brand and navigation layer ---------
   Quiet and structured where the page CTAs are loud: the logo
   (the no-tagline colourway) and one line of what we are, three
   columns of destinations, a hairline bottom bar. A very large
   cropped 8 sits behind the right edge at 5% opacity — an
   editorial signature, not decoration. ---------- */
.at-foot {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  padding: clamp(48px, 5.5vw, 80px) var(--at-gut) 0;
}
.at-foot__eight {
  position: absolute; right: -0.05em; bottom: -0.24em; z-index: 0;
  font-size: clamp(300px, 34vw, 600px); font-weight: 600; line-height: 1;
  color: rgba(250, 248, 245, 0.05);
  pointer-events: none; user-select: none;
}
.at-foot__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 2fr) minmax(0, 2.6fr) minmax(0, 2fr);
  gap: var(--s6) var(--s5);
  align-items: start;
  padding-bottom: clamp(40px, 4.4vw, 64px);
}
.at-foot__brand { display: flex; flex-direction: column; gap: 18px; }
.at-foot__line { font-size: 15px; color: rgba(250, 248, 245, 0.72); max-width: 30ch; }
.at-foot__lbl { color: var(--signal-lift); margin-bottom: 12px; }
.at-foot__col ul { list-style: none; }
.at-foot__col a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--paper); text-decoration: none; font-size: 15px; line-height: 1.35;
  transition: color 180ms var(--ease-out);
}
.at-foot__col a:hover, .at-foot__col a:focus-visible { color: var(--signal-lift); }
.at-foot__loc { font-size: 15px; color: rgba(250, 248, 245, 0.72); line-height: 1.8; }
.at-foot__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  border-top: 1px solid rgba(250, 248, 245, 0.18);
  padding: 20px 0 24px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(250, 248, 245, 0.62);
}
.at-foot__bar .at-star { width: 14px; height: 14px; color: var(--signal); }
/* Focus on dark grounds. The default ring is signal orange, which drops
   below 3:1 on navy and ink and disappears on the orange band. */
.at-foot :focus-visible, .at-svc :focus-visible, .at-band--navy :focus-visible { outline-color: var(--signal-lift); }
.at-why :focus-visible { outline-color: var(--ink); }
/* In-page jumps and keyboard focus must not land under the sticky bar. */
html { scroll-padding-top: 96px; }
@media (max-width: 860px) {
  .at-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .at-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .at-foot__bar { flex-wrap: wrap; }
}

/* ============================================================
   MOTION — forward entrances; the closing disc rolls in from the
   left. Named properties only; one pass each.
   ============================================================ */
.js-motion .at-svc__head,
.js-motion .at-acc__item,
.js-motion .at-why__h,
.js-motion .at-why__prose > *,
.js-motion .at-start__copy {
  opacity: 0; transform: translateX(-16px);
  transition: transform 560ms var(--ease-out), opacity 440ms var(--ease-out);
}
.js-motion .at-svc__head.is-in,
.js-motion .at-acc__item.is-in,
.js-motion .at-why__h.is-in,
.js-motion .at-why__prose > *.is-in,
.js-motion .at-start__copy.is-in { opacity: 1; transform: none; }

.js-motion .at-press .at-press__orb {
  opacity: 0; transform: translateX(-48px);
  transition: transform 760ms var(--ease-out), opacity 400ms var(--ease-out);
}
.js-motion .at-press .at-disc-cta {
  opacity: 0; transform: scale(0.88);
  transition: transform 720ms var(--ease-out) 120ms, opacity 420ms var(--ease-out) 120ms;
}
.js-motion .at-press.is-in .at-press__orb { opacity: 1; transform: none; }
.js-motion .at-press.is-in .at-disc-cta { opacity: 1; transform: none; }
/* The press container itself is a reveal target but must not
   fade — its children carry the entrance. */
.js-motion .at-press { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .at-press__orb,
.js-motion .at-disc-cta { opacity: 1 !important; transform: none !important; transition: none !important; }
  .at-acc__panel,
.at-acc__inner,
.at-acc__disc,
.at-acc__name,
.at-disc-cta { transition: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .at-hero { gap: var(--s5); }
}

@media (max-width: 860px) {
  .at-nav, .at-bar__cta { display: none; }
  .at-burger { display: block; }

  /* The reel drops under the statement and holds the full measure:
     eyebrow, headline, copy, CTAs, then the work. */
  .at-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }

  /* The row tightens: a shorter dash, the disc stays on the
     right, the list loses its indent and its second column. */
  .at-acc__btn { grid-template-columns: 22px minmax(0, 1fr) 44px; column-gap: var(--s3); }
  .at-acc__mark { width: 18px; }

  .at-acc__disc { width: 44px; height: 44px; }

  .at-acc__sub { margin-left: 0; }

  .at-start { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .at-press { justify-self: center; width: min(100%, 300px); }
}

@media (max-width: 560px) {
  .at-hero__acts .at-btn { flex: 1 1 100%; }

  .at-press { width: min(100%, 280px); }
  .at-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .at-foot__end { margin-left: 0; }
}

/* ---------- display-word highlights — brand colour as emphasis --
   For statement words inside display headlines, following the
   Studio hero: raw signal only at display scale (AA large-text),
   navy for the word that should recede cooler. */
.at-hl-signal { font-style: normal; color: var(--signal); }
.at-hl-navy { font-style: normal; color: var(--navy); }

/* ============================================================
   THE SIX-SECTION HOMEPAGE (strategic reset, Sept 2026)
   ============================================================ */
/* Hero, text only: one column, the headline at full measure, and no
   hidden start state, so the largest paint is immediate. */
.at-hero--solo { grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: clamp(48px, 5.6vw, 80px); }
.at-hero--solo .at-hero__h { font-size: clamp(46px, 8.2vw, 124px); max-width: 14ch; }
.at-hero--solo .at-hero__sub { max-width: 46ch; }
.at-hero__acts { align-items: center; }
.at-hero__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 4px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; transition: color 180ms var(--ease-out);
}
.at-hero__link i { font-style: normal; transition: transform 240ms var(--ease-out); }
.at-hero__link:hover, .at-hero__link:focus-visible { color: var(--at-blue); }
.at-hero__link:hover i { transform: translateX(4px); }

/* Selected work: a quiet heading row, then the Work page's spreads. */
.at-sel { border-top: 1px solid var(--ink); }
.at-sel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: clamp(40px, 4.4vw, 64px) var(--at-gut) 0;
}
.at-sel__h { font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.at-sel__all {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--signal-ink); text-decoration: none; transition: color 180ms var(--ease-out);
}
.at-sel__all i { font-style: normal; }
.at-sel__all:hover, .at-sel__all:focus-visible { color: var(--at-blue); }
.at-sel__head + .at-band { padding-top: clamp(28px, 3.2vw, 44px); }
/* The golden spread: on the homepage the capture takes five of eight
   columns and the record three, set on the plate's foot like a caption,
   its last line on the plate's bottom edge. The plate keeps the capture's
   own proportions. The section heading steps down so the names lead. */
@media (min-width: 1080px) {
  .at-sel .at-lead { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: var(--s6); align-items: end; }
  .at-sel .at-lead--flip { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
  .at-sel .at-lead__plate { align-self: start; }
  .at-sel .at-rec__name { font-size: clamp(34px, 3.6vw, 72px); }
  .at-sel .at-rec__go { align-items: flex-end; }   /* the text, not just the 44px box, meets the edge */
  .at-sel__h { font-size: clamp(30px, 2.8vw, 40px); }
}
/* Below 1080px the record would outgrow its plate, so the homepage
   stacks the way phones already do: label, plate, name, record. Below
   861px this restates atomic-pages.css exactly; with no lower bound, no
   fractional width (zoom, display scaling) falls between the two. */
@media (max-width: 1079.98px) {
  .at-sel .at-lead, .at-sel .at-lead--flip { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .at-sel .at-rec { display: contents; }
  .at-sel .at-rec > .at-lbl:first-child { order: -1; }
  .at-sel .at-lead__plate { margin-bottom: var(--s2); }
  .at-sel .at-lead--flip .at-lead__plate { order: 0; }
}
/* At 400% zoom (320px wide) the non-breaking "Animal Foundation" would push
   the page sideways; the names scale down only below 400px. */
@media (max-width: 400px) {
  .at-sel .at-rec__name { font-size: min(40px, calc((100vw - 44px) / 8.2)); }
}

/* What we do: web gets the full width and the largest type; the other
   two pillars share a row beneath it. Static — nothing to open. */
.at-do { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); margin-top: clamp(28px, 3.2vw, 44px); }
.at-do__item {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(24px, 2.6vw, 36px) 0;
  border-top: 1px solid rgba(250, 248, 245, 0.24); color: var(--paper);
}
.at-do__item--lead {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px var(--s6); align-items: start;
  padding-bottom: clamp(36px, 4vw, 56px);
}
.at-do__id, .at-do__body { display: flex; flex-direction: column; gap: 12px; }
.at-do__n { font-size: 13px; font-weight: 500; letter-spacing: 0.18em; color: var(--signal-lift); }
.at-do__name { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.at-do__item--lead .at-do__name { font-size: clamp(40px, 5.2vw, 76px); line-height: 0.96; letter-spacing: -0.025em; }
.at-do__name a { color: var(--paper); text-decoration: none; transition: color 180ms var(--ease-out); }
.at-do__name a:hover, .at-do__name a:focus-visible { color: var(--signal-lift); }
.at-do__say { font-size: clamp(18px, 1.6vw, 23px); font-weight: 500; line-height: 1.35; }
.at-do__sub { font-size: clamp(16px, 1.3vw, 18px); color: rgba(250, 248, 245, 0.8); max-width: 52ch; }
.at-do__caps { font-size: 15px; color: rgba(250, 248, 245, 0.74); }
.at-do__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: 8px; }
.at-do__groups div { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(250, 248, 245, 0.24); }
.at-do__groups dt { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal-lift); }
.at-do__groups dd { font-size: 15px; color: rgba(250, 248, 245, 0.86); }

/* How we work: six steps in one row, one line each. The numbers are
   the only numbered list on the homepage, because order is the point. */
.at-how { padding: clamp(56px, 6.6vw, 96px) var(--at-gut); }
.at-how__h { font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin-bottom: clamp(28px, 3.2vw, 44px); }
.at-how__steps { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); counter-reset: step; }
.at-how__steps li { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--ink); counter-increment: step; }
.at-how__steps li::before { content: "0" counter(step); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; color: var(--signal-ink); }
.at-how__steps b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.at-how__steps span { font-size: 15px; color: var(--ink-80); }

@media (max-width: 1100px) {
  .at-how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s5); }
}
@media (max-width: 860px) {
  .at-do, .at-do__item--lead { grid-template-columns: minmax(0, 1fr); }
  .at-do__groups { grid-template-columns: minmax(0, 1fr); }
  .at-sel__head { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .at-how__steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .at-hero__acts .at-hero__link { justify-content: center; flex: 1 1 100%; }
}