/* ============================================================================
   largesses.com
   Built to docs/design/largesses-marketing-site-design-rules.md — ten rules
   derived by measuring the professional sites leadership selected.

   Rule references appear beside the code that implements them, so the next
   person can tell intent from accident.
   ========================================================================= */

:root {
  /* Rule 5: ONE deep anchor, ONE bright accent, white for reading.
     Neutrals lean toward the anchor/accent hue rather than being pure grey. */
  --anchor:        #123240;   /* deep petrol — authority without navy cliché */
  --anchor-deep:   #0B2029;   /* the dark band / footer ground */
  --anchor-soft:   #1B4557;
  --accent:        #D98C1F;   /* amber — "largesse" is abundance; Nebraska warmth */
  --accent-bright: #F0A93B;
  --cool:          #3C7C8C;   /* secondary, used sparingly */

  --ground:        #FBFAF7;   /* warm off-white, biased toward the accent */
  --ground-alt:    #F2EFE9;
  --ink:           #16232B;   /* near-black with petrol bias, never #000 */
  --ink-muted:     #5A6B73;
  --rule:          #DCD6CC;

  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body:    'Source Serif 4', Georgia, 'Times New Roman', serif;

  --measure: 1160px;          /* Rule 1: bands bleed, content does not */
  --band-y:  clamp(4rem, 9vw, 7.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.1875rem;       /* 19px — Rule 4: body 16–19px */
  line-height: 1.7;
  overflow-x: hidden;         /* the page body must never scroll sideways */
}

img { max-width: 100%; height: auto; display: block; }

/* Rule 4: heading weight is a DECISION. 800 here, never the default 400. */
h1, h2, h3, .h-display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 5.6vw, 4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; }
p  { margin: 0 0 1.1em; max-width: 68ch; }   /* keep running text near 65ch */

a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ── Band + container (Rule 1) ───────────────────────────────────────────── */
.band { padding-block: var(--band-y); }
.band--light  { background: var(--ground); }
.band--alt    { background: var(--ground-alt); }
.band--dark   { background: var(--anchor-deep); color: #F4F1EC; }
.band--anchor { background: var(--anchor);      color: #F4F1EC; }
.band--dark h2, .band--anchor h2, .band--dark h3, .band--anchor h3 { color: #fff; }

.wrap { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

/* Rule 4: eyebrow — small, uppercase, letterspaced, in the accent.
   Cheap to add and does a lot of structural work. */
.eyebrow {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
}
.band--light .eyebrow, .band--alt .eyebrow { color: #A8690C; }  /* contrast on pale ground */

/* Rule 4: a thin accent rule under a section heading */
.rule-accent {
  width: 68px; height: 4px; background: var(--accent);
  border: 0; margin: 1.4rem 0 1.8rem;
}

/* ── Header: quiet nav, exactly ONE loud button (Rule 3) ─────────────────── */
.site-header {
  background: var(--anchor-deep);
  border-bottom: 1px solid rgba(255,255,255,.09);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--display); font-weight: 800; font-size: 1.35rem;
  letter-spacing: -.02em; color: #fff; text-decoration: none; margin-right: auto;
}
.brand__mark { width: 32px; height: 32px; flex: 0 0 auto; }
.brand__word span { color: var(--accent); }

.nav { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.nav a {
  font-family: var(--display);
  font-size: .9rem; font-weight: 500;      /* small + light = quiet */
  letter-spacing: .07em; text-transform: uppercase;
  color: #CBD6DB; text-decoration: none;
  padding-block: .4rem;
}
.nav a:hover { color: #fff; }

/* The one loud control on the page. There is only one of it. */
.btn {
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: .95rem; letter-spacing: .02em;
  padding: .85rem 1.6rem;
  text-decoration: none; border: 0; cursor: pointer;
}
.btn--accent  { background: var(--accent); color: #16110A; }
.btn--accent:hover { background: var(--accent-bright); }
.btn--anchor  { background: var(--anchor); color: #fff; }
.btn--anchor:hover { background: var(--anchor-soft); }
.btn--ghost   { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px #fff; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(217,140,31,.20), transparent 62%),
    radial-gradient(760px 420px at 8% 108%, rgba(60,124,140,.26), transparent 60%),
    var(--anchor-deep);
  color: #F4F1EC;
  padding-block: clamp(4.5rem, 11vw, 8.5rem);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lede {
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  color: #C9D5DA; max-width: 56ch; margin-top: 1.5rem;
}
.hero .actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.4rem; }

/* ── Stats (Rule 6): icon, large accent number, small muted label ────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 1.5rem; }
.stat { text-align: center; }
.stat .ico { color: var(--cool); margin: 0 auto .7rem; display: block; }
.stat .value {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.band--light .stat .value, .band--alt .stat .value { color: #A8690C; }
.stat .label {
  font-family: var(--display); font-size: .82rem; font-weight: 500;
  color: var(--ink-muted); margin-top: .6rem; line-height: 1.4;
}
.band--dark .stat .label { color: #A9B8BE; }

/* ── Split panel over a field (Rule 2: the signature move) ───────────────
   A solid colour panel holding the text, overlapping the adjacent field,
   with the side ALTERNATING down the page. */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split__panel {
  background: var(--anchor); color: #F4F1EC;
  /* Stretch to fill the row so no page background can show through, then centre
     the CONTENT inside instead. Centring the panel itself was the bug. */
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.2rem, 4.5vw, 3.6rem);
  z-index: 2;
}
.split__panel h2 { color: #fff; }
.split__panel p  { color: #CFDAE0; }
.split__field {
  min-height: 340px; align-self: stretch; overflow: hidden;
  background: var(--anchor-soft);
}
.split__art { display: block; width: 100%; height: 100%; min-height: inherit; }
/* Overlap: the panel bleeds INTO the field. This is the move that reads as
   "designed" rather than "assembled", so it has to be visible — a 1rem nudge
   just looks like a rounding error. It also gets a shadow so the layering is
   unambiguous rather than looking like two flat blocks that happen to touch. */
.split--left  .split__panel { margin-right: -5rem; box-shadow: 14px 0 40px rgba(4,16,22,.34); }
.split--right .split__panel { margin-left:  -5rem; order: 2; box-shadow: -14px 0 40px rgba(4,16,22,.34); }
.split--right .split__field { order: 1; }
.split--right .split__panel { background: var(--anchor-deep); }

/* Keep the panel's text off the viewport edge and roughly in line with the
   centred column the rest of the page uses. Without this the left-hand panel's
   copy runs to within a few pixels of the window edge and reads as broken. */
/* Align the panel's text with the centred column the rest of the page uses, but
   CAP it: unbounded, this reached 720px of padding at 2560px wide and kept going. */
.split--left  .split__panel { padding-left:  clamp(2rem, calc((100vw - var(--measure)) / 2 + 1.25rem), 26rem); }
.split--right .split__panel { padding-right: clamp(2rem, calc((100vw - var(--measure)) / 2 + 1.25rem), 26rem); }

/* ── Capability cards ────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.card {
  background: #fff; border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  padding: 1.9rem 1.6rem;
}
.card h3 { margin-bottom: .6rem; }
.card p  { margin: 0; font-size: 1.0625rem; color: var(--ink-muted); }

/* ── Footer (Rule 9): the trust signals live here ────────────────────────── */
.site-footer { background: var(--anchor-deep); color: #B9C7CD; padding-block: 4rem 2.5rem; }
.site-footer a { color: #D7E1E5; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.footer-grid h4 {
  font-family: var(--display); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .55rem; }
.legal {
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .9rem; color: #8FA2A9;
}

/* Placeholder — deliberately conspicuous. Real contact details must replace
   these before launch; nothing here may be invented. */
.tbd {
  background: rgba(217,140,31,.16);
  color: var(--accent-bright);
  border-bottom: 1px dashed var(--accent);
  padding: 0 .3em; font-family: var(--display); font-size: .9em;
}

/* ── Accessibility toolbar (Rule 10): visible, not implied ───────────────── */
.a11y-bar { background: var(--ground-alt); border-bottom: 1px solid var(--rule); }
.a11y-bar .wrap { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-block: .45rem; }
.a11y-bar .a11y-label {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
  margin-right: .3rem;
}
.a11y-bar button {
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  background: #fff; color: var(--ink);
  border: 1px solid var(--rule); padding: .3rem .7rem; cursor: pointer;
}
.a11y-bar button:hover { border-color: var(--anchor); }
.a11y-bar button[aria-pressed="true"] { background: var(--anchor); color: #fff; border-color: var(--anchor); }

/* Toolbar effects. Senior-reader requirement: these must genuinely work. */
body.a11y-large      { font-size: 1.375rem; }
body.a11y-larger     { font-size: 1.5625rem; }
body.a11y-underline  :is(main, footer) a { text-decoration: underline; }
body.a11y-readable   { --body: 'Archivo', system-ui, sans-serif; --display: 'Archivo', system-ui, sans-serif; }
body.a11y-contrast {
  --ground: #fff; --ground-alt: #fff; --ink: #000; --ink-muted: #262626;
  --anchor: #05202B; --anchor-deep: #04161E; --accent: #8A5400; --rule: #444;
}
body.a11y-contrast .band--dark, body.a11y-contrast .band--anchor,
body.a11y-contrast .split__panel { color: #fff; }
body.a11y-contrast .card { border-color: #444; }

.skip-link {
  position: absolute; left: -9999px; background: var(--accent); color: #16110A;
  padding: .8rem 1.2rem; font-family: var(--display); font-weight: 700; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .stats  { grid-template-columns: repeat(2, 1fr); }
  .cards  { grid-template-columns: 1fr; }
  .split  { grid-template-columns: 1fr; }
  .split--left  .split__panel,
  .split--right .split__panel { margin: 0; order: 1; }
  .split--right .split__field { order: 2; }
  .split__field { min-height: 190px; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-header .wrap { min-height: 0; padding-block: .9rem; }
  .nav { gap: 1.1rem; width: 100%; }
  .nav a { font-size: .82rem; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; gap: 2rem; }
  .hero .actions .btn { width: 100%; text-align: center; }
}

/* ── Demo request form ───────────────────────────────────────────────────────
   A real form, not a mailto: link. A mailto: hands the visitor a blank email
   client and loses most of them at that moment. */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.demo-form { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); padding: clamp(1.5rem, 3vw, 2.25rem); }
.demo-form .field { margin-bottom: 1.1rem; }
.demo-form label {
  display: block; margin-bottom: .35rem;
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #C3D0D6;
}
.demo-form label span { color: var(--accent); }
.demo-form input, .demo-form select, .demo-form textarea {
  width: 100%; font-family: var(--body); font-size: 1.0625rem;
  padding: .7rem .85rem; color: var(--ink); background: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 0;
}
.demo-form textarea { resize: vertical; }
.demo-form button { width: 100%; margin-top: .4rem; }
.demo-form button[disabled] { opacity: .6; cursor: progress; }
.form-note { font-size: .9rem; color: #93A5AC; margin: .9rem 0 0; }
.form-status { margin: .9rem 0 0; font-family: var(--display); font-size: .95rem; font-weight: 600; }
.form-status.ok   { color: #7BD88F; }
.form-status.bad  { color: #FF9F8F; }

/* Honeypot: off-screen for bots to find, invisible and unreachable for people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

body.a11y-contrast .demo-form { background: #fff; border-color: #444; }
body.a11y-contrast .demo-form label { color: #000; }
body.a11y-contrast .form-note { color: #262626; }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ── Photographic split field ────────────────────────────────────────────────
   When a real photograph is supplied it replaces the drawn SVG field. A scrim
   is NOT optional here: the colour panel overlaps one edge, and without a
   gradient into the panel's colour the join reads as two pictures butted
   together rather than one composition. */
.split__field--photo { position: relative; background: var(--anchor-deep); }
.split__field--photo > svg { display: none; }
.split__field--photo::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: right 32%;      /* subject away from the overlap; 32% keeps
                                          faces in frame when a wide, short slot
                                          crops top and bottom */
}
.split__field--photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,50,64,.92) 0%, rgba(18,50,64,.35) 34%, rgba(18,50,64,0) 62%);
}
.split--right .split__field--photo::before { background-position: left 32%; }
.split--right .split__field--photo::after {
  background: linear-gradient(270deg, rgba(11,32,41,.92) 0%, rgba(11,32,41,.35) 34%, rgba(11,32,41,0) 62%);
}
@media (max-width: 900px) {
  /* Stacked: the panel sits above, not beside, so the side scrim would be wrong. */
  .split__field--photo::after { background: linear-gradient(180deg, rgba(18,50,64,.55) 0%, rgba(18,50,64,0) 55%); }
  .split__field--photo::before { background-position: center; }
}

/* The header is sticky, so an in-page anchor lands its target UNDER the header
   and the section's eyebrow and heading are hidden. Reserve the header's height
   above every anchor target. Cheap, and without it every nav link looks broken. */
:where(#what, #who, #platform, #about, #contact) { scroll-margin-top: 84px; }