/* ============================================================
   /digital-architect/ — campaign landing page (Vyne brief v2, Sep 2026)
   Page-scoped styles layered over main.css. Restrained by design:
   single column, ~1100px, 65–75ch body, headings centred, body left,
   no icons, no gradients, no card stripes, no animated counters.
   ============================================================ */

.da { --da-max: 1100px; --da-measure: 68ch; }

.da .container { max-width: var(--da-max); }
.da .da-narrow { max-width: calc(var(--da-max) - 6rem); }
.da .site-nav.is-hidden { transform: none; }        /* header stays sticky: it holds the only nav CTA */
.da .nav-cta { display: inline-flex !important; }   /* main.css hides it on mobile in favour of the burger; there is no burger here */

/* ---------- Type ---------- */
.da-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 18em;
  margin: 0 auto;
  text-align: center;
}
.da-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-align: center;
  max-width: 24em;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.da-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.8rem;
}
.da-lead {
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 34em;
  margin: 1.8rem auto 0;
  text-align: center;
}
.da-body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-dim);
  max-width: var(--da-measure);
  margin: 0 auto 1.3rem;
}
.da-body strong { color: var(--ink); }
.da-micro { font-size: 0.85rem; line-height: 1.55; color: var(--ink-dim); margin: 0; max-width: 40em; }
.da-proofline { font-size: 0.8rem; line-height: 1.5; color: var(--ink-dim); margin: 0; }
.da-center { text-align: center; }

/* ---------- Section rhythm: generous vertical space, no dividing lines ---------- */
.da-section { padding: clamp(5rem, 11vh, 9rem) 0; }
.da .section--alt { border-top: none; border-bottom: none; }

/* ---------- 1 · Hero ---------- */
.da-hero { position: relative; overflow: hidden; padding: clamp(9rem, 22vh, 13rem) 0 clamp(4rem, 9vh, 7rem); }
.da-hero .container { position: relative; }   /* sits above .page-hero-bg, the site's orange/blue hero glow */
.da-hero .container { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.da-hero-copy { max-width: 46rem; margin: 0 auto; }
.da-cta-block { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.6rem; text-align: center; }
.da-cta-block .da-micro, .da-cta-block .da-proofline { text-align: center; }
.da-hero-media img { width: 100%; height: auto; border-radius: 12px; display: block; }
/* Two-column variant for when [ASSET: hero-architect-spread] arrives: copy 55% / image 45%, copy first on mobile. */
.da-hero--split .container { grid-template-columns: 55fr 45fr; }
.da-hero--split .da-hero-copy { margin: 0; }
.da-hero--split .da-h1, .da-hero--split .da-lead { text-align: left; margin-left: 0; }
.da-hero--split .da-cta-block { align-items: flex-start; text-align: left; }
.da-hero--split .da-cta-block .da-micro, .da-hero--split .da-cta-block .da-proofline { text-align: left; }
@media (max-width: 900px) { .da-hero--split .container { grid-template-columns: 1fr; } }

/* ---------- 2 · Problem: three plain text columns ---------- */
.da-plainlist { list-style: none; padding: 0; margin: 0; }
.da-plainlist li { font-size: 1.05rem; line-height: 1.65; color: var(--ink); }
.da-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.da-three li { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.5; }   /* bare on purpose: bigger type, not graphics */
@media (max-width: 760px) { .da-three { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- 3 · Growth System: three numbered columns ---------- */
.da-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: none; }
.da-steps li { display: flex; flex-direction: column; }
.da-steps .da-body { margin: 0; max-width: none; }
.da-step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--orange);
  margin-bottom: 1rem;
}
@media (max-width: 760px) { .da-steps { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- 4 · Architect gallery: full-bleed horizontal scroll, no lightbox ---------- */
.da-gallery {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Snap aligns an item's start edge to the SCROLLPORT's start edge, which ignores the
     track's padding — so the first card snapped flush and ate its left gutter (Vyne,
     21 Sep). scroll-padding moves the snapport edge in by the same amount. */
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--da-max)) / 2 + 3rem));
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding-bottom: 0.5rem;
}
.da-gallery:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.da-gallery-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding-inline: max(var(--gutter), calc((100% - var(--da-max)) / 2 + 3rem));
  width: max-content;
  min-width: 100%;
}
.da-page { flex: 0 0 auto; width: clamp(280px, 48vw, 560px); scroll-snap-align: start; margin: 0; }
.da-page picture { display: block; }
.da-page img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;          /* never crop a report page — the headings are the point */
  background: var(--navy-900);  /* letterbox colour if a page is ever not 16:9 */
  border-radius: 6px;
  border: 1px solid var(--line);
}
.da-page figcaption { font-size: 0.82rem; line-height: 1.5; color: var(--ink-dim); margin-top: 0.7rem; }

/* ---------- 5 · Cost: prose, team grid, price set apart ---------- */
/* Ten faces with names and titles, not a group photo — it makes the "senior people, every
   month" claim literally. Deliberately compact: this is a credibility beat inside the costs
   section, not a team directory, and it must not push the price block off a laptop screen. */
.da-team-head { text-align: center; margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.6rem; color: var(--ink-dim); font-weight: 500; }
.da-team-grid {
  list-style: none; padding: 0;
  margin: 0 auto;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
}
.da-person { display: flex; flex-direction: column; text-align: center; }
.da-person img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;   /* crop favours faces over chests */
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--navy-900);
}
.da-person b {
  font-family: var(--font-display);
  font-size: 0.875rem; font-weight: 600; line-height: 1.25;
  color: var(--ink);
  margin-top: 0.6rem;
}
.da-person span {
  font-size: 0.72rem; line-height: 1.35;
  color: var(--ink-dim);
  margin-top: 0.2rem;
  min-height: 2.7em;             /* reserve two lines so tiles share a baseline */
}
.da-person[hidden] { display: none; }
@media (max-width: 1000px) { .da-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 680px; } }
@media (max-width: 620px)  { .da-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; } }
.da-price {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  max-width: var(--da-measure);
}
.da-price p { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--ink-dim); margin: 0; }
.da-price p strong { color: var(--ink); font-family: var(--font-display); font-weight: 700; }
.da-price .da-price-note { font-size: 0.95rem; color: var(--ink-dim); margin-top: 1rem; }

/* ---------- 6 · Proof ---------- */
/* auto-fit with a floor gives six across on desktop and wraps down on its own, with no
   hand-written breakpoint per size. max-width: 100% is load-bearing: without it a logo's
   intrinsic width forces its grid track wider than the cell, which is what pushed this
   strip 57px past the viewport on a phone. */
.da-logos {
  list-style: none; padding: 0;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 40px 32px;
  align-items: center;
  justify-items: center;
}
/* Six logos divide cleanly by 6, 3 and 2 only. Left to itself auto-fit picks 5 at tablet
   width and orphans one, which is the fault this strip was pulled up on before — so the
   counts that would orphan are pinned out. */
@media (max-width: 820px) { .da-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .da-logos { gap: 28px 20px; } }
@media (max-width: 400px) { .da-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.da-logos li { display: flex; align-items: center; justify-content: center; min-width: 0; }
.da-logos img {
  max-width: 100%; height: auto; max-height: 32px;
  opacity: 0.6;
  filter: brightness(0) invert(1);
}
.da-testimonials { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; margin-bottom: 0; }
.da-testimonials > :only-child { grid-column: 1 / -1; }    /* one testimonial → full width, never an empty card */
/* The quotes are 30 and 55 words. Let the cards be different heights — forcing them equal and
   pinning the attribution to the bottom left a void in the middle of the shorter one, which
   looks worse than an uneven row ever does. */
.da-testimonial {
  margin: 0; display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.3rem, 2.5vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.da-testimonial-logo {
  width: auto; height: auto;
  max-height: 24px; max-width: 7rem;
  opacity: 0.55;
  /* Flattened to white, NOT greyscale — these cards are near-black and grey on black vanishes. */
  filter: brightness(0) invert(1);
  align-self: flex-start;
}
.da-quote { font-size: 1.05rem; line-height: 1.6; color: var(--ink); margin: 0; quotes: none; }
.da-cite { font-size: 0.9rem; color: var(--ink-dim); }
.da-cite b { color: var(--ink); font-weight: 600; }
.da-stat { font-size: 0.82rem; line-height: 1.5; color: var(--ink-dim); margin: -0.5rem 0 0; }
@media (max-width: 760px) { .da-testimonials { grid-template-columns: 1fr; } }

/* ---------- 7 · Fit: two columns, equal weight, never collapsed ---------- */
.da-fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
.da-fit-col .da-h3 { margin-bottom: 1.2rem; }
.da-fit-col li + li { margin-top: 0.9rem; }
.da-fit-col li { color: var(--ink-dim); }
@media (max-width: 760px) { .da-fit { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- 8 · Application form ---------- */
.da-form { max-width: 40rem; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; gap: 1.3rem; }
.da-form .form-field label { color: var(--ink-dim); }
.da-form select { background-image: none; }
.da-form input:invalid:not(:placeholder-shown):not(:focus), .da-form textarea:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--line-strong); }
.da-form input:focus-visible, .da-form select:focus-visible, .da-form textarea:focus-visible,
.da .btn:focus-visible, .da .faq-q:focus-visible, .da a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.da-field-warn { font-size: 0.85rem; line-height: 1.5; color: #FFC58A; margin: 0.6rem 0 0; }
.da-submit { align-self: flex-start; }
.da-form .da-micro { margin-top: 0.2rem; }
.da .cf-turnstile { min-height: 65px; }

/* ---------- 9 · FAQ ---------- */
.da-faq { max-width: var(--da-measure); margin: 0 auto; }
.da-faq .faq-a p { font-size: 1.02rem; line-height: 1.65; }
.da-final { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Footer: minimal, no onward journeys ---------- */
.da-footer { padding: 2.5rem 0 3rem; font-size: 0.82rem; color: var(--ink-dim); }
.da-footer .container { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: center; text-align: center; }
.da-footer a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 0.15em; }
.da-footer a:hover { color: var(--ink); }


/* ---------- Motion: keep it still. This page earns trust by being plain. ---------- */
/* Grain stays at main.css's 4.5% — an earlier 35% override read as static and greyed the navy. */
@media (prefers-reduced-motion: reduce) { .da * { transition: none !important; animation: none !important; } }