@import url("brand-tokens.css");

/* Site-level additions, derived from the brand tokens.
   The guide's audit covered text and buttons; these three cases only appear
   once there are real form controls and a reversed footer.
     --ddd-control-line       control boundaries, 3.29:1 on paper (WCAG 1.4.11 needs 3:1)
     --ddd-control-line-hover the same, darker, for hover
     --ddd-mint               small text on --ddd-green-deep; --ddd-green-soft is
                              only 4.31:1 there, so it stays a large-text/graphic accent */
:root {
  /* Width scale. The handoff specified a single 900px column; that's a good
     reading measure but a poor page width, so the shell widens and prose stays
     pinned to a ch-based measure instead. Widened again to 1360px as the one
     shell width sitewide — the old 1120/1360 two-tier split is gone. */
  --w-prose:    65ch;
  --w-content:  1360px;
  --w-wide:     1360px;
  --gutter:     24px;

  --ddd-control-line:       rgba(42, 46, 41, 0.55);
  --ddd-control-line-hover: rgba(42, 46, 41, 0.72);
  --ddd-mint:               #9CC0A7;
}

/* ==========================================================================
   Dan Duyser Digital — site stylesheet
   All colour and type values come from brand-tokens.css. Never hard-code a
   hex that exists in the tokens.
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- base ----------------------------------------------------------------- */
body {
  background: var(--ddd-paper);
  color: var(--ddd-charcoal);
  font-family: var(--ddd-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, li, dd, blockquote { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--ddd-font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.18;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.35rem); max-width: 20ch; }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.6vw, 2.35rem); line-height: 1.22; max-width: 26ch; }
h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.4rem); line-height: 1.3; max-width: 36ch; }
h4 { font-size: 1.0625rem; }

em.accent { font-style: italic; font-weight: 400; color: var(--ddd-green); }

a { color: var(--ddd-green); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ddd-green-deep); }

:focus-visible {
  outline: 2px solid var(--ddd-green);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ddd-green); color: var(--ddd-paper);
  padding: 10px 16px; border-radius: 5px;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top 160ms ease-out;
}
.skip-link:focus { top: 8px; color: var(--ddd-paper); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--w-content); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--prose { max-width: var(--w-prose); }
.wrap--wide  { max-width: var(--w-wide); }
@media (min-width: 700px)  { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

.band { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 700px) { .band { padding-top: 72px; padding-bottom: 72px; } }
.band + .band { border-top: 1px solid var(--ddd-border); }

/* the only non-paper page background, per the two-background rule */
.band--deep { background: var(--ddd-green-deep); color: var(--ddd-paper); }
.band + .band.band--deep { border-top: 0; }
.band--deep h2 { color: var(--ddd-paper); }
.band--deep p { color: #CFD9D2; }

.eyebrow {
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ddd-gold-ink);
  margin-bottom: 14px;
}
.band--deep .eyebrow { color: var(--ddd-gold); }

.lede {
  font-family: var(--ddd-font-display);
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--ddd-charcoal-muted);
  max-width: 38ch;
}
.band--deep .lede { color: #CFD9D2; }

.prose > * + * { margin-top: 14px; }
.prose { max-width: 66ch; }
.prose p { font-size: 1rem; }
.prose h2 { margin-top: 34px; }
.prose ul { padding-left: 1.25em; }
.prose ul > * + * { margin-top: 4px; }
.prose li { font-size: 1rem; }

.rule-gold { width: 44px; height: 1px; background: var(--ddd-gold); border: 0; margin: 24px 0; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ddd-font-ui); font-size: .9375rem; font-weight: 500;
  line-height: 1; text-decoration: none;
  padding: 14px 22px; border-radius: 5px; border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
.btn--primary { background: var(--ddd-green); color: var(--ddd-paper); }
.btn--primary:hover { background: var(--ddd-green-deep); color: var(--ddd-paper); }
.btn--ghost { background: transparent; color: var(--ddd-green); border-color: var(--ddd-control-line); }
.btn--ghost:hover { background: var(--ddd-surface-3); color: var(--ddd-green-deep); border-color: var(--ddd-green); }
.btn--onDeep { background: var(--ddd-paper); color: var(--ddd-green-deep); }
.btn--onDeep:hover { background: #FFFFFF; color: var(--ddd-green-deep); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }

.textlink {
  display: inline-block; font-size: .9375rem; font-weight: 500;
  color: var(--ddd-green); text-decoration: underline; text-underline-offset: 3px;
}
.textlink--arrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 6px; text-decoration: none;
}
.textlink--arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.textlink--arrow span { transition: transform 160ms ease-out; }
.textlink--arrow:hover span { transform: translateX(3px); }

/* --- header --------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,244,236,.94);
  border-bottom: 1px solid var(--ddd-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.head-inner {
  max-width: var(--w-content); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 20px;
}
@media (min-width: 700px) { .head-inner { padding: 16px var(--gutter); } }

/* The logo anchors the left edge; margin-right:auto pushes everything else
   (nav links + CTA) into one group hard against the right edge, instead of
   space-between scattering three items with the nav stranded in the
   middle of a wide header. */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ddd-green); margin-right: auto; }
.brand:hover { color: var(--ddd-green-deep); }
.brand svg { width: 37px; height: auto; flex: none; }
/* "Dan Duyser" and "Digital" are one space apart, not a hard <br> — full
   width lets the whole mark sit on one line; when space is tight it wraps
   at that one space, onto a second line, never a third. The nested
   nowrap span is what stops "Dan Duyser" itself from splitting mid-pair. */
.brand-name {
  font-family: var(--ddd-font-ui); font-size: .8125rem; font-weight: 500;
  letter-spacing: var(--ddd-logotype-track); text-transform: uppercase;
  line-height: 1.35; color: inherit;
}
.brand-name-nowrap { white-space: nowrap; }
.brand-desc {
  display: block; font-size: .5625rem; font-weight: 400;
  letter-spacing: var(--ddd-descriptor-track); text-transform: uppercase;
  color: var(--ddd-charcoal-soft); margin-top: 3px;
}
@media (max-width: 420px) { .brand-desc { display: none; } }

/* No mobile menu button or drawer anymore: .site-nav-links (Services,
   About) is desktop-only, and .nav-cta is a plain sibling of .brand and
   .site-nav in .head-inner so it stays visible and reachable at every
   width — compact on mobile, full-size from 820px up. */
.site-nav { display: none; }
.site-nav-links { list-style: none; display: flex; align-items: center; gap: 26px; }
.site-nav-links a {
  font-size: .875rem; font-weight: 400; color: var(--ddd-charcoal-muted);
  text-decoration: none;
}
.site-nav-links a:hover { color: var(--ddd-green); }

.nav-cta { flex: none; padding: 9px 14px; font-size: .8125rem; }
/* Two labels, one button: the short one saves space in the compact mobile
   header (and keeps "Dan Duyser Digital" from being squeezed into a third
   line), the full one comes back once there's room at the desktop
   breakpoint. Every other CTA on the page keeps the full "Let's talk about
   your website" text — this swap is header-only. */
.nav-cta-full { display: none; }
.nav-cta-short { display: inline; }

@media (min-width: 820px) {
  .nav-cta-full { display: inline; }
  .nav-cta-short { display: none; }
  .site-nav { display: block; }
  .nav-cta { padding: 11px 18px; font-size: .875rem; }
}

/* --- hero (text-only page opener) -----------------------------------------
   Structurally this is a Statement: one idea, alone, no image. It shares the
   Statement rhythm and type scale rather than keeping its own values. */
.hero h1 { margin-bottom: 20px; }
.hero .lede { max-width: 44ch; }

/* --- feature rows: text beside a visual ---------------------------------- */
.feature { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 64px; }
  .feature--flip > *:first-child { order: 2; }
}
.feature-media { width: 100%; border-radius: 8px; overflow: hidden; }
.feature-media img, .feature-media svg { width: 100%; height: auto; display: block; }

.bleed { width: 100%; }
.bleed img, .bleed svg { width: 100%; height: auto; display: block; }

/* --- cards & panels ------------------------------------------------------- */
.panel {
  background: var(--ddd-surface-2);
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  padding: 24px;
}
.card {
  background: var(--ddd-surface-3);
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  padding: 24px;
}

.definition {
  border-left: 2px solid var(--ddd-gold);
  padding: 4px 0 4px 20px;
  margin-top: 28px;
  max-width: 62ch;
}
.definition p { font-size: .9375rem; color: var(--ddd-charcoal-muted); }

/* --- generic stacks ------------------------------------------------------- */
.stack-lg > * + * { margin-top: 40px; }
.stack-md > * + * { margin-top: 24px; }
.stack-sm > * + * { margin-top: 12px; }

.grid-2 { display: grid; gap: 20px; }
.grid-3 { display: grid; gap: 16px; }
@media (min-width: 620px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* --- service list --------------------------------------------------------- */
.svc-list { list-style: none; }
.svc-list > li { border-top: 1px solid var(--ddd-border); padding-top: 22px; padding-bottom: 22px; }
.svc-list > li:last-child { border-bottom: 1px solid var(--ddd-border); }
.svc-list h3 { margin-bottom: 4px; }
.svc-list p { font-size: .9375rem; color: var(--ddd-charcoal-muted); max-width: 60ch; }

.svc-detail-list { display: grid; gap: 20px; }
.svc-detail.card { padding: 32px; }
.svc-num {
  font-family: var(--ddd-font-mono); font-size: .6875rem; letter-spacing: .1em;
  color: var(--ddd-gold-ink); display: block; margin-bottom: 8px;
}
.svc-detail h2 { margin-bottom: 8px; }
.svc-detail .lede { margin-bottom: 20px; max-width: 46ch; }
.svc-what { list-style: none; display: grid; gap: 8px; margin-bottom: 20px; }
@media (min-width: 620px) { .svc-what { grid-template-columns: 1fr 1fr; gap: 8px 24px; } }
.svc-what li {
  font-size: .9375rem; color: var(--ddd-charcoal-muted);
  padding-left: 18px; position: relative;
}
.svc-what li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 1px; background: var(--ddd-gold);
}
.svc-when {
  font-size: .9375rem; padding-top: 16px; border-top: 1px solid var(--ddd-border);
  max-width: 62ch;
}
.svc-when strong { font-weight: 600; }

/* --- the three homepage offers: restrained cards, not SaaS-white boxes ---- */
.offer-list { display: grid; gap: 20px; margin-top: 8px; }
@media (min-width: 860px) { .offer-list { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.offer-row {
  border: 1px solid var(--ddd-border);
  border-radius: 8px;
  background: var(--ddd-surface-2);
  padding: 28px;
}
.offer-num {
  font-family: var(--ddd-font-mono); font-size: .6875rem; letter-spacing: .1em;
  color: var(--ddd-gold-ink); display: block; margin-bottom: 10px;
}
.offer-row h3 { margin-bottom: 8px; }
.offer-row .lede { margin-bottom: 14px; max-width: none; }
.offer-for { font-size: .875rem; line-height: 1.55; color: var(--ddd-charcoal-muted); margin-bottom: 20px; }
.offer-for strong { font-weight: 600; color: var(--ddd-charcoal); }
.offer-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ddd-charcoal-soft); margin-bottom: 10px;
  padding-top: 18px; border-top: 1px solid var(--ddd-border);
}
.offer-what { list-style: none; display: grid; gap: 8px; }
.offer-what li {
  font-size: .9375rem; line-height: 1.5; color: var(--ddd-charcoal-muted);
  padding-left: 18px; position: relative;
}
.offer-what li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 1px; background: var(--ddd-gold);
}

/* --- post-services CTA: stays visually part of the services section (a
   thin top border, no background change, no full-width band of its own)
   so it reads as a footnote to the three cards rather than a second
   standalone promo. --------------------------------------------------- */
.services-cta {
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--ddd-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
}
.services-cta h3 { margin-bottom: 6px; }
.services-cta p { font-size: .9375rem; color: var(--ddd-charcoal-muted); max-width: 46ch; }
.services-cta .btn { flex: none; }

/* --- the cube / approach signature --------------------------------------- */
.cube-figure { display: grid; gap: 28px; align-items: start; }
@media (min-width: 860px) {
  .cube-figure { grid-template-columns: 300px 1fr; gap: 48px; }
  .cube-sticky { position: sticky; top: 104px; }
}
.cube { width: 100%; max-width: 260px; margin-inline: auto; height: auto; }
.cube .face { fill: var(--ddd-green); opacity: 0; transition: opacity 200ms ease-out; }
.cube .face--define { fill: var(--ddd-gold); }
.cube.is-discover .face--discover,
.cube.is-define   .face--define,
.cube.is-deliver  .face--deliver { opacity: .13; }

.phase { border-top: 1px solid var(--ddd-border); padding-top: 32px; padding-bottom: 32px; }
.phase:last-child { border-bottom: 1px solid var(--ddd-border); }
.phase-face {
  font-family: var(--ddd-font-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ddd-charcoal-soft); margin-bottom: 6px;
}
.phase h2 { margin-bottom: 10px; }
.phase-meta { list-style: none; margin-top: 20px; display: grid; gap: 14px; }
.phase-meta > li { display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 620px) { .phase-meta > li { grid-template-columns: 150px 1fr; gap: 20px; } }
.phase-meta dt, .phase-meta .k {
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ddd-charcoal-soft); padding-top: 4px;
}
.phase-meta .v { font-size: .9375rem; color: var(--ddd-charcoal-muted); }

/* --- homepage process section --------------------------------------------
   The cube-field texture that used to sit behind this section is gone —
   plain cream now, so the icons and copy carry the section on their own.
   .process-band is unused (kept in case the texture comes back for a
   different section); nothing in the process markup wears that class
   anymore, so the background image it points to is never fetched. */
.process-band {
  position: relative;
  background-image: url("/assets/cube-field-band.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.process-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--ddd-paper) 0%, rgba(246,244,236,.55) 18%, rgba(246,244,236,.55) 82%, var(--ddd-paper) 100%),
    rgba(246,244,236,.55);
}
.process-band .wrap { position: relative; }
.process-row { display: grid; gap: 40px; margin-top: 40px; text-align: center; }
@media (min-width: 760px) { .process-row { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
/* .process-cube is unused now the process steps use the supplied finished
   icons instead — kept in case the scroll-linked cube comes back. */
.process-cube { width: 100%; max-width: 96px; margin: 0 auto; height: auto; }
/* The three supplied per-stage icons (scattered lines / partial structure /
   complete structure), used exactly as delivered — transparent WebP,
   recoloured to the brand green with a crisper alpha edge, cropped tight
   to each icon's own ink so none carries more built-in padding than
   another. Sized ~13% larger now that they're not sharing the page with a
   background texture. Same displayed size and spacing across all three. */
.process-icon { width: 100%; max-width: 150px; margin: 0 auto 18px; height: auto; display: block; }
.process-num {
  font-family: var(--ddd-font-mono); font-size: .8125rem; letter-spacing: .12em;
  color: var(--ddd-gold-ink);
}
.process-step h3 { margin-top: 4px; margin-bottom: 8px; }
.process-step p:not(.process-num) { font-size: 1rem; line-height: 1.55; color: var(--ddd-charcoal-muted); max-width: 32ch; margin: 0 auto; }

/* --- restrained proof points, credibility section -------------------------- */
.proof-list { list-style: none; display: grid; gap: 10px; max-width: 52ch; }
.proof-list li {
  font-size: .9375rem; line-height: 1.5; color: var(--ddd-charcoal-muted);
  padding-left: 16px; position: relative;
}
.proof-list li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 6px; height: 1px; background: var(--ddd-gold);
}

/* --- boundaries ----------------------------------------------------------- */
.boundaries { border-top: 1px solid var(--ddd-border); padding-top: 24px; max-width: 62ch; }
.boundaries p { font-size: .9375rem; color: var(--ddd-charcoal-muted); }

/* --- about ---------------------------------------------------------------- */
.about-head { display: grid; gap: 28px; align-items: start; }
@media (min-width: 720px) { .about-head { grid-template-columns: 220px 1fr; gap: 40px; } }
.portrait {
  width: 100%; min-height: 250px; aspect-ratio: 1 / 1; border-radius: 8px;
  background: var(--ddd-surface-2); border: 1px solid var(--ddd-border);
  object-fit: cover; object-position: center center;
  display: flex; align-items: center; justify-content: center;
  color: var(--ddd-charcoal-soft); font-size: .75rem; text-align: center; padding: 16px;
}

.quote-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
.quote { background: var(--ddd-surface-3); border: 1px solid var(--ddd-border); border-radius: 8px; padding: 22px; }
.quote blockquote { font-family: var(--ddd-font-display); font-size: 1.0625rem; line-height: 1.5; }
.quote figcaption { margin-top: 12px; font-size: .8125rem; color: var(--ddd-charcoal-soft); }

/* --- forms ---------------------------------------------------------------- */
.form { max-width: 560px; margin-top: 32px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: .9375rem; font-weight: 500; margin-bottom: 6px; }
.field .hint { display: block; font-size: .875rem; color: var(--ddd-charcoal-soft); margin-bottom: 8px; font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ddd-charcoal);
  background: var(--ddd-surface-3);
  border: 1px solid var(--ddd-control-line); border-radius: 5px;
  padding: 12px 14px;
  transition: border-color 160ms ease-out;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6F6A5D; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ddd-control-line-hover); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ddd-green); outline-offset: 1px; }
.field .error { display: none; font-size: .8125rem; color: #8C2F1F; margin-top: 6px; }
.field.has-error input, .field.has-error textarea { border-color: #8C2F1F; }
.field.has-error .error { display: block; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-note { font-size: .9375rem; line-height: 1.55; color: var(--ddd-charcoal-soft); margin-top: 18px; max-width: 52ch; }
.form-status { margin-top: 16px; font-size: .9375rem; }

/* the always-on contact section that replaced the dedicated /contact/ page,
   plus the other in-page anchors &mdash; all need room under the sticky header */
#contact, #services, #about, #process { scroll-margin-top: 88px; }
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 64px; } }
.contact-grid .form { margin-top: 0; max-width: none; }
.form-success h3 { margin-bottom: 8px; }
.form-success p { color: var(--ddd-charcoal-muted); max-width: 52ch; }

/* Secondary, direct-contact fallback beneath the form's intro copy. Clearly
   subordinate to the form: smaller type, muted colour, a quiet divider
   above it &mdash; nothing here should compete with the h2 or the submit
   button for attention. Lives on .band--deep, so it needs the same
   light-safe colours as the form fields above. */
.contact-direct {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(246,244,236,.18);
  max-width: 44ch;
}
.contact-direct-label {
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ddd-mint); margin-bottom: 8px;
}
.contact-direct p { font-size: .9375rem; line-height: 1.7; color: #CFD9D2; }
.contact-direct a {
  color: var(--ddd-mint); text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.contact-direct a:hover { color: var(--ddd-paper); }
.contact-direct span { color: var(--ddd-mint); }

/* dark-background form: the homepage's contact section sits on .band--deep,
   so every form element needs an explicit light-safe colour &mdash; the
   generic p/h2/eyebrow/lede overrides above don't reach into <label> or
   the input chrome. */
.band--deep .field label { color: var(--ddd-paper); }
.band--deep .field .hint { color: var(--ddd-mint); }
.band--deep .field input,
.band--deep .field textarea,
.band--deep .field select {
  background: rgba(246,244,236,.08);
  border-color: rgba(246,244,236,.32);
  color: var(--ddd-paper);
}
.band--deep .field input::placeholder,
.band--deep .field textarea::placeholder { color: rgba(246,244,236,.5); }
.band--deep .field input:hover,
.band--deep .field textarea:hover,
.band--deep .field select:hover { border-color: rgba(246,244,236,.55); }
.band--deep .field input:focus,
.band--deep .field textarea:focus,
.band--deep .field select:focus { border-color: var(--ddd-gold); }
.band--deep .field .error { color: #FFB4A1; }
.band--deep .hp label { color: var(--ddd-paper); }
.band--deep .form-note { color: var(--ddd-mint); }
.band--deep .form-status { color: var(--ddd-paper); }
.band--deep .form-success h3 { color: var(--ddd-paper); }
.band--deep .form-success p { color: #CFD9D2; }

/* --- footer --------------------------------------------------------------- */
/* Contact section is the last band before the footer picks up the same
   dark colour &mdash; on desktop the base .band bottom padding plus the
   footer's own top padding read as one large unused green field, so the
   contact section's bottom padding (only, not top) is trimmed here. Scoped
   to #contact.band--deep specifically so About's own dark bands, which
   share .band--deep but not this id, are unaffected. */
#contact.band--deep { padding-bottom: 40px; }
@media (min-width: 700px) { #contact.band--deep { padding-bottom: 48px; } }

.site-foot { background: var(--ddd-green-deep); color: var(--ddd-paper); padding-top: 36px; padding-bottom: 28px; }
.foot-inner { max-width: var(--w-content); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.foot-top { display: grid; gap: 24px; }
@media (min-width: 700px) { .foot-top { grid-template-columns: 1fr auto; gap: 40px; align-items: center; } }
/* Horizontal lockup, matching the header: cube left, wordmark right,
   descriptor beneath it at a restrained size &mdash; not stacked cube-above-
   text like the old footer mark. */
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand svg { width: 38px; height: auto; flex: none; }
.foot-name {
  font-size: .8125rem; font-weight: 500; letter-spacing: var(--ddd-logotype-track);
  text-transform: uppercase; line-height: 1.3; color: var(--ddd-paper);
}
.foot-desc {
  display: block; font-size: .5625rem; letter-spacing: var(--ddd-descriptor-track);
  text-transform: uppercase; color: var(--ddd-mint); margin-top: 4px;
}
.foot-nav ul { list-style: none; display: grid; gap: 8px; max-width: 100%; }
@media (min-width: 700px) { .foot-nav ul { justify-items: end; } }
/* The email address is one unbroken string with no natural wrap point, so
   without this it can overflow the column on the narrowest phones instead
   of wrapping onto a second line. */
.foot-nav a { font-size: .9375rem; color: #CFD9D2; text-decoration: none; overflow-wrap: anywhere; }
.foot-nav a:hover { color: var(--ddd-paper); text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(246,244,236,.14);
  display: grid; gap: 8px; font-size: .875rem; color: var(--ddd-mint);
}
@media (min-width: 700px) { .foot-bottom { grid-template-columns: 1fr auto; align-items: center; } }
.foot-bottom a { color: #CFD9D2; }
.foot-bottom a:hover { color: var(--ddd-paper); }

/* --- misc ----------------------------------------------------------------- */
.center-narrow { max-width: 620px; }
.mt-lg { margin-top: 40px; }
.mt-md { margin-top: 24px; }

/* ==========================================================================
   Homepage v2 — visual hierarchy
   Fewer ideas per screen, more contrast between them. The rhythm is:
   art / statement / art+text / art / list / breath / person / offer.
   ========================================================================== */

/* --- hero: full-bleed background photograph -------------------------------
   Deliberate responsive art direction, not a missing asset: the workspace
   photo only appears at the desktop breakpoint, behind the copy, with a
   paper-to-transparent gradient over it so the headline stays readable.
   On mobile it's hidden outright &mdash; showing it there just duplicated
   the notebook photo two sections later and slowed the scroll to the
   point that matters. Mobile hero is text-only: eyebrow, headline, copy,
   primary CTA, secondary link, done. */
.hero-full { position: relative; overflow: hidden; padding-top: 40px; padding-bottom: 40px; }
.hero-full .wrap { position: relative; z-index: 2; padding-top: 0; padding-bottom: 0; }
.hero-full-text { max-width: 560px; }
.hero-full-text > * + * { margin-top: 18px; }
.hero-full-text .lede { max-width: 42ch; }
.hero-full-img { display: none; }
@media (min-width: 900px) {
  .hero-full {
    min-height: 720px; display: flex; align-items: center;
    padding-top: 0; padding-bottom: 0;
  }
  .hero-full::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(246,244,236,.92) 0%, rgba(246,244,236,.65) 38%, rgba(246,244,236,0) 65%);
  }
  .hero-full .wrap { width: 100%; padding-top: 64px; padding-bottom: 64px; }
  .hero-full-text { max-width: 600px; }
  /* Background-image, not <img src>, and only inside this media query:
     browsers skip fetching an image whose only rule lives in a
     non-matching media query, so mobile never downloads this photo. */
  .hero-full-img {
    display: block;
    position: absolute; inset: 0; z-index: 0;
    background-image: url("/assets/hero-workspace.webp");
    background-size: cover;
    background-position: 68% center;
  }
}
@media (min-width: 1240px) {
  .hero-full { min-height: 780px; }
}

/* --- old Split-layout hero: superseded by .hero-full above, left in place
   in case a text-beside-image hero comes back for a different page. ------ */
.hero-grid { display: grid; gap: 36px; align-items: center; }
.hero-copy > * + * { margin-top: 18px; }
.hero-copy h1 { max-width: none; }
.hero-copy .lede { max-width: 40ch; }
.hero-media img {
  width: 100%; height: auto; display: block;
  border-radius: 8px; border: 1px solid var(--ddd-border);
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 64px; }
  .hero-media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; }
}

/* --- the single-idea statement band ----------------------------------------
   One idea, large, alone on screen. Double the base band padding is the only
   permitted rhythm variation. Page-opening heroes (.hero, text-only, no
   image) are structurally the same pattern and share it — h1 already carries
   the matching display size via the base h1 rule, so only padding is shared
   here. */
.statement, .hero {
  padding-top: 112px; padding-bottom: 112px;
}
@media (min-width: 700px) {
  .statement, .hero { padding-top: 144px; padding-bottom: 144px; }
}
.statement h2 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.35rem);
  line-height: 1.14; max-width: 17ch; margin-bottom: 28px;
}
.statement .prose { max-width: 52ch; }
.statement .prose p { font-size: 1.0625rem; }

/* --- full-bleed figures and breathing strips ----------------------------- */
.figure-wide { margin: 0; }
.figure-wide img { width: 100%; height: auto; display: block; }
.figure-wide figcaption {
  margin-top: 16px; font-size: .8125rem; color: var(--ddd-charcoal-soft);
  letter-spacing: .01em;
}

.strip { width: 100%; display: block; }
.strip img {
  width: 100%; height: 280px; object-fit: cover; object-position: center 58%;
  display: block;
}
@media (min-width: 900px) { .strip img { height: 380px; } }

/* --- feature row media -----------------------------------------------------
   Same Split treatment as the hero: 4:3 crop, 8px radius, 1px border. */
.feature-media img {
  border-radius: 8px; border: 1px solid var(--ddd-border);
}
@media (min-width: 900px) {
  .feature-media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
}
.feature .eyebrow { margin-bottom: 12px; }

/* small inline definition — a footnote, not a headline */
.note-inline {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--ddd-border);
  font-size: .875rem; color: var(--ddd-charcoal-soft); max-width: 54ch;
}

/* --- compact services cards (homepage) ------------------------------------ */
.svc-cards { display: grid; gap: 14px; margin-top: 8px; }
@media (min-width: 620px) { .svc-cards { grid-template-columns: 1fr 1fr; gap: 16px; } }
.svc-cards .svc-num {
  font-family: var(--ddd-font-mono); font-size: .6875rem; letter-spacing: .1em;
  color: var(--ddd-gold-ink); display: block; margin-bottom: 8px;
}
.svc-cards h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.svc-cards p { font-size: .9375rem; color: var(--ddd-charcoal-muted); margin: 0; max-width: 42ch; }

/* --- person block ----------------------------------------------------------
   Unused now that the homepage credibility section uses .about-grid below
   (a true fixed-square photo column fixed this pattern's aspect-ratio bug),
   kept in case a text-only layout without the fixed square comes back. --- */
.person { display: grid; gap: 32px; align-items: start; }
@media (min-width: 780px) { .person { grid-template-columns: 260px 1fr; gap: 56px; } }
.person h2 { margin-bottom: 16px; }

/* --- homepage credibility photo: a true fixed square, set at the wrapper
   level rather than through aspect-ratio/object-fit tricks on the <img>
   alone, since that's what let the headshot distort into a tall portrait
   in earlier rounds. Mobile stacks the same square above the copy. ------- */
.about-grid { display: grid; gap: 28px; align-items: start; }
.about-grid h2 { margin-bottom: 16px; }
.about-photo {
  width: min(100%, 320px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--ddd-border);
}
.about-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
@media (min-width: 720px) {
  .about-grid { grid-template-columns: 236px minmax(0, 1fr); gap: 48px; }
  .about-photo { width: 236px; height: 236px; align-self: start; justify-self: start; }
}