/* ============================================================
   ATOMIC — interior pages.
   ------------------------------------------------------------
   Loaded after home-atomic.css, which supplies the bar, buttons,
   footer, labels, type and the star. This file adds one device
   per page. None of the homepage's compositions are reused:

     WORK       THE RING   — the work inside a dial: an orange
                             ring with a marker carrying the
                             project number. Future projects are
                             more rings in the field.
     SERVICES   THE PLATES — the three practices as three
                             overlapping discs at three sizes;
                             each practice then gets a band with
                             a numbered spec.
     STUDIO     its own sheet: atomic-studio.css
                             them, then the principles on a spine.
     CONTACT    THE TOKENS — the "what are you after" choices as
                             pressable discs.
   ============================================================ */

/* ---------- shared page chrome ------------------------------ */
.at-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s6);
  align-items: end;
  padding: clamp(48px, 6vw, 88px) var(--at-gut) clamp(40px, 4.4vw, 64px);
  border-bottom: 1px solid var(--ink);
}
.at-head__copy { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); }
.at-head__h {
  font-size: clamp(44px, 6.8vw, 100px);
  font-weight: 600; line-height: 0.96; letter-spacing: -0.025em;
}
.at-head__h span { display: block; }
.at-head__lede { font-size: clamp(17px, 1.45vw, 21px); color: var(--ink-80); max-width: 40ch; }
.at-head__side { font-size: 15px; color: var(--ink-55); max-width: 34ch; justify-self: end; }

.at-band { padding: clamp(56px, 6.6vw, 96px) var(--at-gut); }
.at-band--navy { background: var(--navy); color: var(--paper); }
.at-band--navy .at-lbl { color: var(--signal-lift); }
.at-band--tint { background: var(--paper-2); }
.at-band--rule { border-top: 1px solid var(--ink); }

.at-close {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  padding: clamp(56px, 6.6vw, 96px) var(--at-gut);
  border-top: 1px solid var(--ink);
}
.at-close__h { font-size: clamp(32px, 4.2vw, 60px); font-weight: 600; line-height: 0.98; letter-spacing: -0.022em; max-width: 16ch; }
.at-close__acts { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ============================================================
   WORK — THE PLATE
   The work is the design: a landscape plate at the capture's own
   proportions, 7 columns of 12, beside the record. A hairline
   separates it from the paper; nothing else frames it.
   ============================================================ */
.at-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: center; }
.at-lead__plate { margin: 0; width: 100%; aspect-ratio: 1903 / 908; overflow: hidden; background: var(--navy); border: 1px solid rgba(14, 17, 23, 0.18); }
.at-lead__img { display: block; width: 100%; height: 100%; }
.at-lead__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .at-lead__plate:hover img { transform: scale(1.02); } }
.at-rec { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.at-rec__name { font-size: clamp(40px, 5vw, 72px); font-weight: 600; line-height: 0.96; letter-spacing: -0.025em; }
.at-rec__name a { color: var(--ink); text-decoration: none; transition: color 180ms var(--ease-out); }
.at-rec__name a:hover, .at-rec__name a:focus-visible { color: var(--at-blue); }
.at-rec__note { font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-80); max-width: 40ch; }
.at-rec__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--s4); padding-top: var(--s3); border-top: 1px solid var(--ink); }
.at-rec__meta div { display: flex; flex-direction: column; gap: 4px; }
/* the record labels carry the brand navy — every project, every page */
.at-rec__meta dt, .cs-meta dt { color: var(--navy); }
.at-rec__meta dd { font-size: 15px; }
.at-rec__go {
  display: inline-flex; align-items: center; gap: 10px; 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-rec__go i { font-style: normal; transition: transform 240ms var(--ease-out); }
.at-rec__go:hover, .at-rec__go:focus-visible { color: var(--at-blue); }
.at-band--navy .at-rec__go { color: var(--signal-lift); }
.at-band--navy .at-rec__go:hover, .at-band--navy .at-rec__go:focus-visible { color: var(--paper); }
.at-rec__go:hover i { transform: translate(3px, -3px); }

.at-more { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: baseline; }

/* the engagements section rides the at-more grid, top-aligned */
.at-eng { align-items: start; }
.at-eng__h { font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; margin-top: var(--s3); max-width: 14ch; }
.at-eng__body { display: flex; flex-direction: column; gap: var(--s3); max-width: 58ch; }
.at-eng__body p { font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-80); }
.at-more__h { font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.at-more__b { font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-80); max-width: 44ch; }

/* ============================================================
   CONTACT — THE TOKENS
   ============================================================ */
.at-form-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s7); align-items: start; }
.at-form { display: flex; flex-direction: column; gap: clamp(24px, 2.6vw, 36px); }
.at-field { display: flex; flex-direction: column; gap: 8px; }
.at-field input, .at-field textarea {
  font: inherit; font-size: 18px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  padding: 12px 0; min-height: 48px; border-radius: 0;
  transition: border-color 180ms var(--ease-out);
}
.at-field textarea { resize: vertical; min-height: 120px; }
.at-field select {
  font: inherit; font-size: 18px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  padding: 12px 28px 12px 0; min-height: 48px; border-radius: 0;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1117' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 16px;
  transition: border-color 180ms var(--ease-out);
}
.at-field select:focus-visible { outline: none; border-bottom: 2px solid var(--at-blue); }
.at-field input:focus-visible, .at-field textarea:focus-visible { outline: none; border-bottom: 2px solid var(--at-blue); }

.at-form__acts { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
/* the honeypot: invisible to people, present for bots */
.at-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.at-notice {
  margin: 0; padding: 16px 20px;
  border-left: 3px solid var(--signal);
  background: var(--paper-2);
  font-size: 15px; color: var(--ink-80); max-width: 56ch;
}
.at-notice[hidden] { display: none; }
.at-aside { display: flex; flex-direction: column; gap: var(--s4); padding-top: 6px; }
.at-aside__h { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; }
.at-aside p { font-size: 16px; color: var(--ink-80); }

/* ============================================================
   MOTION — the same forward entrance as the homepage
   ============================================================ */
.js-motion .at-rec > *,
.js-motion .at-more > *,
.js-motion .at-close > *,
.js-motion .at-form > *,
.js-motion .at-aside > * {
  opacity: 0; transform: translateX(-14px);
  transition: transform 520ms var(--ease-out), opacity 420ms var(--ease-out);
}
.js-motion .is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .at-lead__plate { opacity: 1 !important; transform: none !important; transition: none !important; }
  .at-lead__img img { transition: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .at-lead { grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr); gap: var(--s6); }
}
@media (max-width: 860px) {
  .at-head { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .at-head__side { justify-self: start; }
  .at-lead { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .at-rec { display: contents; }                    /* the record's lines become grid rows … */
  .at-rec > .at-lbl:first-child { order: -1; }      /* … so the number and classification lead */
  .at-lead__plate { margin-bottom: var(--s2); }
  .at-more { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }

  .at-form-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 560px) {
  .at-rec__meta { grid-template-columns: minmax(0, 1fr); }

  .at-close__acts .at-btn, .at-form__acts .at-btn { flex: 1 1 100%; }
}

/* ---------- the flipped spread — the record leads ------------
   Even projects flip: record on the left, plate on the right, so
   the Work page alternates instead of stacking one composition.
   On mobile the flip undoes itself and every spread reads the
   same way: label, plate, name, record. */
.at-lead--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.at-lead--flip .at-lead__plate { order: 2; }
@media (max-width: 1100px) {
  .at-lead--flip { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); }
}
@media (max-width: 860px) {
  .at-lead--flip { grid-template-columns: minmax(0, 1fr); }
  .at-lead--flip .at-lead__plate { order: 0; }
}

/* No. 03's capture is slightly wider than the house plate; the plate
   takes the capture's own proportions so nothing is cropped away. */
.at-lead__plate--srg { aspect-ratio: 1897 / 874; }

/* ============================================================
   DEEP PAGES — service depth, the arguments, insights
   ============================================================ */
/* the capability glossary: every capability gets its sentence */
.at-capx__head { margin-bottom: clamp(28px, 3.2vw, 48px); }
.at-capx__h { margin-top: var(--s3); font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
.at-capx__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); }
.at-capx__list > div { border-top: 1px solid var(--rule); padding-top: 16px; }
.at-capx__list dt { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); }
.at-capx__list dt .at-star { width: 12px; height: 12px; color: var(--signal); }
.at-capx__list dd { margin-top: 8px; font-size: 15px; color: var(--ink-80); max-width: 52ch; }

/* the FAQ: the homepage accordion, sized for questions */
.at-faq { max-width: 1040px; }
.at-faq__h { margin: var(--s3) 0 clamp(28px, 3.2vw, 44px); color: var(--paper); font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
.at-acc--faq .at-acc__name { font-size: clamp(19px, 1.8vw, 26px); }

/* the carousel, when it leaves the band grid */
.at-carwrap { max-width: 1040px; margin-top: clamp(28px, 3.2vw, 44px); }

/* the insights index */
.in-list { display: flex; flex-direction: column; max-width: 880px; }
.in-list__item { border-top: 1px solid var(--rule); padding: clamp(24px, 2.8vw, 40px) 0; }
.in-list__item:last-child { border-bottom: 1px solid var(--rule); }
.in-list__meta { display: flex; gap: 14px; flex-wrap: wrap; }
.in-list__h { margin-top: 10px; font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -0.018em; }
.in-list__h a { color: var(--ink); text-decoration: none; transition: color 180ms var(--ease-out); }
.in-list__h a:hover, .in-list__h a:focus-visible { color: var(--at-blue); }
.in-list__p { margin-top: 10px; font-size: 15.5px; color: var(--ink-80); max-width: 56ch; }

/* the essay */
.in-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--s3); }
.in-prose { max-width: 64ch; }
.in-prose p { margin: 0 0 1.25em; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.75; color: var(--ink-80); }
.in-prose h2 { margin: 1.9em 0 0.7em; font-size: clamp(21px, 2vw, 29px); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.in-prose a { color: var(--at-blue); text-decoration: underline; text-underline-offset: 3px; }
.in-prose a:hover { color: var(--navy); }
.in-prose > p:first-child { font-size: clamp(17.5px, 1.45vw, 20.5px); color: var(--ink); }

/* the argument pages share the engagement grid; their one big line */
.wy-line { padding: clamp(48px, 5.4vw, 80px) var(--at-gut); background: var(--signal); color: var(--ink); }
.wy-line p { font-size: clamp(24px, 3vw, 44px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; max-width: 26ch; }

@media (max-width: 860px) {
  .at-capx__list { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

/* inline links inside the deep-page prose */
.at-eng__body a, .at-more__b a, .sd-fit__say a {
  color: var(--signal-ink); text-decoration: underline; text-underline-offset: 3px;
  transition: color 180ms var(--ease-out);
}
.at-eng__body a:hover, .at-eng__body a:focus-visible,
.at-more__b a:hover, .at-more__b a:focus-visible,
.sd-fit__say a:hover, .sd-fit__say a:focus-visible { color: var(--at-blue); }
.at-band--navy .at-acc__sub a { color: var(--signal-lift); }

/* A page head with no side note runs the full measure. Lives here, not
   in a page-family sheet, because every services page uses it. */
.at-head--solo { grid-template-columns: minmax(0, 1fr); }