/* ==========================================================================
   Boss Collaborative
   Implements BC Brand Guide, 2026-10-11.
   Plain CSS, no build step, no framework. Deploys anywhere.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Dark, the primary theme */
  --ground:      #14142A;
  --text:        #FAFAF8;
  --muted:       #A5A5BA;
  --accent:      #7281DC;
  --warm:        #E0B15C;
  --panel:       #1E1E34;
  --hairline:    rgba(250, 250, 248, 0.2);
  --hairline-soft: rgba(250, 250, 248, 0.14);
  --grid-line:   rgba(250, 250, 248, 0.05);
  --btn-label:   #14142A;

  /* Type */
  --display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --serif:   "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Layout. 7.2% of width, per the guide, clamped so it stays sane. */
  --margin: clamp(20px, 7.2vw, 92px);
  --measure: 62ch;
}

/* Light theme. Every value re-derived, never a recolour.
   Dark is the brand, so dark is the default regardless of the system setting.
   Light is one click away and the choice is remembered. */
:root[data-theme="light"] {
  --ground:    #FAFAF8;
  --text:      #1A1A2E;
  --muted:     #55555F;
  --accent:    #4453B0;
  --warm:      #8A5E18;
  --panel:     #EDEDF2;
  --hairline:  rgba(26, 26, 46, 0.22);
  --hairline-soft: rgba(26, 26, 46, 0.14);
  --grid-line: rgba(26, 26, 46, 0.05);
  --btn-label: #FAFAF8;
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

/* --- Links. Colour is never the only signal. ---------------------------- */

a { color: var(--accent); }

.prose a,
a.inline {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.prose a:hover,
a.inline:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--margin);
  top: 12px;
  z-index: 100;
  background: var(--accent);
  color: var(--btn-label);
  padding: 10px 16px;
  font-weight: 600;
  text-decoration: none;
}

/* --- Layout ------------------------------------------------------------- */

.wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--margin);
}

section { padding-block: clamp(48px, 7vw, 88px); }
section.tight { padding-block: clamp(32px, 4vw, 52px); }

.rule { border: 0; border-top: 1px solid var(--hairline-soft); margin: 0; }

/* --- Type --------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
}

h1 {
  font-size: clamp(34px, 5.1vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

h3 {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* The one italic serif word. Never two in a composition. */
.accent-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  color: var(--warm);
}

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 0 0 14px;
}

.lede {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--muted);
  margin: 26px 0 0;
  max-width: 34em;
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }

.muted { color: var(--muted); }

/* --- Header ------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 26px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.012em;
}

.brand svg { width: 30px; height: 30px; flex: none; }

.site-nav {
  display: flex;
  gap: clamp(16px, 2.2vw, 30px);
  font-size: 14px;
  font-weight: 500;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

/* --- Theme toggle ------------------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--text);
}

.theme-toggle svg { width: 14px; height: 14px; flex: none; }

/* The icon is the mark's own geometry, half lit. */
.theme-toggle .lit  { fill: var(--warm); }
.theme-toggle .dark { fill: var(--accent); }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 104px) clamp(64px, 10vw, 120px);
}

/* Anchored right at its own aspect, never stretched. The hero clips it. */
.hero-art {
  position: absolute;
  top: 0;
  right: max(-6vw, -90px);
  bottom: 0;
  width: min(62%, 820px);
  height: 100%;
  pointer-events: none;
}

/* Below the two-column threshold the art sits behind the words, so it steps
   back. Text contrast on the ground is 17.3:1, and at this opacity the dots
   cannot pull any of it near the 4.5:1 floor. */
@media (max-width: 900px) {
  .hero-art {
    width: 118%;
    right: -30%;
    opacity: 0.3;
  }
}

.hero .wrap { position: relative; }

.hero-copy { max-width: 42rem; }

/* --- Buttons ------------------------------------------------------------ */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

.btn {
  display: inline-block;
  padding: 15px 26px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--accent);
  color: var(--btn-label);
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-secondary {
  border-color: var(--hairline);
  color: var(--text);
}
.btn-secondary:hover { border-color: var(--text); }

/* --- Proof -------------------------------------------------------------- */

/* A continuous band. Names are set in type, not logo images, so nothing
   implies endorsement by a federal agency. Logo files can drop straight in
   as <img> inside each li if permission is ever obtained. */

.marquee {
  position: relative;
  overflow: hidden;
  margin-top: 4px;
  padding-block: 10px;
  /* soften both edges so names enter and leave rather than being cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 48s linear infinite;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee-row {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4.5vw, 64px);
  list-style: none;
  margin: 0;
  padding: 0 clamp(16px, 2.25vw, 32px);
  flex: none;
}

.marquee-row li {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--muted);
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Motion is decoration here, so it goes away entirely when asked. The band
   becomes a normal scrollable row and the duplicate set is dropped. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee-track { animation: none; width: auto; }
  .marquee-row[aria-hidden="true"] { display: none; }
}

/* --- Offer grid --------------------------------------------------------- */

/* Four buckets, as the offer architecture organises them. The bucket name
   sits in its own column so the categories stay visible while the cards
   still read as a scannable grid. */

.buckets {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 36px;
}

.bucket {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline-soft);
}

.bucket-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--warm);
}

.bucket-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 680px) {
  .bucket-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .bucket { grid-template-columns: 230px 1fr; gap: 32px; }
  .bucket-label { padding-top: 2px; }
}

.offer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  padding: 26px 24px 28px;
  text-decoration: none;
  color: inherit;
}

.offer:hover { border-color: var(--accent); }

.offer .tick {
  width: 26px;
  height: 5px;
  background: var(--accent);
  margin-bottom: 20px;
}

.offer h3 { margin-bottom: 10px; }

.offer p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

/* Custom Consulting is not a fifth bucket. It gets real distance from the
   four, a muted label rather than a gold one so it does not read as a peer
   category, and a gold tick so the card itself is visibly a different kind
   of thing from the eight offers above it. */

.bucket-aside {
  margin-top: 26px;
  border-top: 0;
  padding-top: 0;
}

.bucket-cards-single { grid-template-columns: 1fr !important; }

/* Full width and a dashed edge, but built exactly like the other cards:
   tick, then heading, then text, stacked. */
.offer-wide {
  grid-column: 1 / -1;
  border-style: dashed;
}

.offer-wide p { max-width: 54ch; }

/* --- Case studies -------------------------------------------------------
   Scroll-snap, driven by the reader. Deliberately not auto-advancing: a
   carousel that moves on its own takes the text away mid-sentence, and
   these cards are meant to be read rather than glimpsed.
   ------------------------------------------------------------------------ */

.cases-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cases-nav { display: flex; gap: 8px; }

.case-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}

.case-btn:hover { border-color: var(--accent); color: var(--accent); }
.case-btn svg { width: 18px; height: 18px; }

/* --- Contact form -------------------------------------------------------
   Labels sit above their field, never as placeholders: a placeholder
   disappears the moment someone starts typing, which is exactly when they
   need to know what the box is for. */
.cform { margin: 30px 0 0; max-width: var(--measure); }

.cform-field { margin: 0 0 20px; display: flex; flex-direction: column; gap: 7px; }

.cform-field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
}

.cform input,
.cform textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  /* Without this the padding pushes the field past the column on small screens. */
  box-sizing: border-box;
}

.cform textarea { resize: vertical; min-height: 150px; line-height: 1.55; }

.cform input::placeholder,
.cform textarea::placeholder { color: var(--muted); opacity: 1; }

.cform input:focus-visible,
.cform textarea:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 1px;
  border-color: transparent;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. */
.cform-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cform-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.cform-foot button[disabled] { opacity: 0.5; cursor: default; }

.cform-status {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}

.cform-status.is-bad { color: var(--warm); }
.cform-status.is-good { color: var(--text); }
.cform-status:focus-visible { outline: 2px solid var(--warm); outline-offset: 4px; }

.cases {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 36px 0 0;
  /* full-bleed on the right so the next card peeks past the margin */
  padding: 4px var(--margin) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--margin);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
  overscroll-behavior-x: contain;
}

.cases::-webkit-scrollbar { height: 8px; }
.cases::-webkit-scrollbar-thumb { background: var(--hairline); }

.case {
  flex: 0 0 min(88vw, 420px);
  scroll-snap-align: start;
  border: 1px solid var(--hairline);
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
}

.case-tag {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
}

.case h3 {
  font-size: 19px;
  line-height: 1.25;
  margin-bottom: 14px;
}

.case p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.case-out {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  color: var(--text) !important;
}

.case-out span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

/* Partner credit lives at the foot of the card. In the tag it ran to four
   lines of letterspaced uppercase and pushed the headline out of sight. */
.case-partner {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}


/* --- Contact ------------------------------------------------------------ */

.contact-email {
  margin: 36px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(21px, 3.2vw, 34px);
  letter-spacing: -0.025em;
  word-break: break-word;
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

.steps li {
  counter-increment: step;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
}

.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--warm);
  margin-bottom: 10px;
}

.steps h3 { margin-bottom: 8px; }

.steps p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

/* --- Next step ---------------------------------------------------------- */

.next-step {
  border: 1px solid var(--hairline-soft);
  background: var(--panel);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  align-items: center;
  justify-content: space-between;
}

.next-step p { margin: 14px 0 0; max-width: 42ch; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--hairline-soft);
  padding-block: 40px 56px;
  font-size: 14px;
  color: var(--muted);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--text); }

/* --- Preview only. Removed once every page exists. ---------------------- */

.preview-note {
  background: var(--warm);
  color: #14142A;
  font-size: 14px;
  text-align: center;
  padding: 9px 16px;
}

.unbuilt {
  opacity: 0.45;
  cursor: not-allowed;
}

.site-nav .unbuilt,
.footer-nav .unbuilt { text-decoration: line-through; }

.offer.unbuilt:hover { border-color: var(--hairline); }

.btn.unbuilt { filter: saturate(0.5); }

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .hero-art, .site-nav, .actions { display: none; }
  body { background: #fff; color: #000; }
}

.case-btn[disabled] {
  opacity: 0.3;
  cursor: default;
  border-color: var(--hairline-soft);
}
.case-btn[disabled]:hover { border-color: var(--hairline-soft); color: var(--text); }

/* The rail is focusable so it can be scrolled by keyboard. Make that visible. */
.cases:focus-visible { outline: 2px solid var(--warm); outline-offset: 4px; }

/* The gold tick marks Custom Consulting as the exception, matching the
   brand rule that gold means a beginning rather than a category. */
.offer-wide .tick { background: var(--warm); }
.offer-wide { border-color: color-mix(in srgb, var(--warm) 45%, transparent); }
.offer-wide:hover { border-color: var(--warm); }

/* --- About --------------------------------------------------------------
   The epigraph is the one place the serif gets more than a single word,
   because it is a quotation rather than the brand's own voice.
   ------------------------------------------------------------------------ */

.epigraph {
  margin: 30px 0 0;
  padding-left: clamp(16px, 2.2vw, 28px);
  border-left: 2px solid var(--warm);
  /* wide enough that each line of the couplet sits on its own line */
  max-width: min(100%, 580px);
}

.epigraph blockquote { margin: 0; }

.epigraph blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(23px, 3.2vw, 34px);
  line-height: 1.3;
  color: var(--text);
}

.epigraph figcaption {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}

.epigraph cite { font-style: italic; }

.bio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-top: 28px;
}

@media (min-width: 900px) {
  .bio-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; }
}

.credentials {
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}

.credentials h3 {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 0 0 12px;
}

.credentials h3 + ul { margin-bottom: 28px; }
.credentials ul:last-child { margin-bottom: 0; }

.credentials ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.credentials li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.credentials li:last-child { border-bottom: 0; }

/* --- Photography --------------------------------------------------------
   Monochrome throughout, so a phone snap from a session sits beside a
   studio portrait without the two fighting, and so no photograph competes
   with the gold and periwinkle. A warm-grey border keeps a light image
   from floating on the dark ground.
   ------------------------------------------------------------------------ */

.portrait {
  margin: 0;
  align-self: start;
}

.portrait img {
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
}

/* photo first on narrow screens, beside the text on wide ones */
@media (min-width: 900px) {
  .bio-grid-photo {
    grid-template-columns: 320px minmax(0, 1.4fr) minmax(0, 0.9fr);
    gap: 44px;
    align-items: start;
  }
}

.band {
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
}

.band img {
  width: 100%;
  height: auto;
  display: block;
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}

.band figcaption {
  padding: 14px var(--margin) 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 1280px;
  margin-inline: auto;
}

/* An inset band, for a photograph whose resolution will not carry full
   bleed. Contained at its native width rather than stretched, so it stays
   sharp instead of being magnified into softness. */
.band-inset {
  margin-top: clamp(32px, 4.5vw, 56px);
  max-width: 1000px;
}

.band-inset img {
  border: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* Held to the same column as the body text rather than the headline. Both
   the figure and .prose compute 62ch against the same 17px body font, so
   the two edges line up exactly. */
.band-measure { max-width: var(--measure); }

/* Three photographs read as one strip: close, mid, wide. Held to the text
   column so the row sits under the paragraphs rather than under the
   headline. A fixed 4:5 on every cell keeps the tops and bottoms aligned
   whatever the source frame was. */
.gallery {
  margin: clamp(32px, 4.5vw, 56px) 0 0;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--hairline);
}

/* Three across stops being legible somewhere under 200px a cell, so below
   that the strip becomes a stack rather than three thumbnails. */
@media (max-width: 620px) {
  .gallery { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Work page: expandable offer rows -----------------------------------
   <details> rather than scripted accordions, so the page works with
   JavaScript off, each row is keyboard-operable for free, and the browser's
   own find-in-page can open a closed row. Rows share borders so a bucket
   reads as one block rather than ten floating cards.
   ------------------------------------------------------------------------ */

.ox-list { display: block; }
.ox-list .ox + .ox { margin-top: -1px; }

.ox {
  border: 1px solid var(--hairline);
  position: relative;
}
.ox[open] {
  border-color: var(--accent);
  z-index: 1;
}

.ox > summary {
  display: grid;
  grid-template-columns: 1fr 22px;
  grid-template-areas: "tick chev" "title chev" "sum chev";
  column-gap: 22px;
  padding: 24px 24px 26px;
  cursor: pointer;
  list-style: none;
}
.ox > summary::-webkit-details-marker { display: none; }
.ox > summary::marker { content: ""; }
.ox > summary:hover { background: var(--panel); }

.ox .tick {
  grid-area: tick;
  width: 26px;
  height: 5px;
  background: var(--accent);
  margin-bottom: 20px;
}
.ox-title {
  grid-area: title;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.ox-sum {
  grid-area: sum;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}
.ox-chev {
  grid-area: chev;
  align-self: center;
  width: 22px;
  height: 22px;
  color: var(--muted);
  transition: transform 160ms ease;
}
.ox[open] > summary .ox-chev { transform: rotate(180deg); }
.ox[open] > summary .ox-sum { color: var(--text); }

.ox-body {
  padding: 4px 24px 30px;
  max-width: 74ch;
}
.ox-block + .ox-block { margin-top: 24px; }

.ox-block h4 {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 0 0 9px;
}
.ox-block p {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
}

/* Custom Consulting keeps the gold exception it has on the home page. */
.ox-custom { border-color: color-mix(in srgb, var(--warm) 45%, transparent); }
.ox-custom[open] { border-color: var(--warm); }
.ox-custom .tick { background: var(--warm); }

.work-note {
  font-size: 15px;
  color: var(--muted);
  margin: 18px 0 0;
  max-width: 60ch;
}

@media (min-width: 1000px) {
  .ox > summary { padding-inline: 30px; }
  .ox-body { padding-inline: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .ox-chev { transition: none; }
}

/* The Work page opens with a short intro and then goes straight into the
   buckets, so the two sections share one gap rather than stacking theirs. */
section.work-intro { padding-bottom: 0; }
section.work-offers { padding-top: clamp(30px, 3.4vw, 46px); }
.work-offers .buckets { margin-top: 0; }

/* The one outbound link on the site, so it gets the footer's quiet treatment
   rather than the underlined inline-link style used inside prose. */
.footer-social {
  margin: 10px 0 0;
  font-size: 15px;
}
.footer-social a { color: var(--muted); text-decoration: none; }
.footer-social a:hover { color: var(--text); }