/*
Theme Name: Queen & Vine
Theme URI: https://www.queenandvine.com/
Author: Queen & Vine LLC
Author URI: https://www.queenandvine.com/
Description: One-page website for Queen & Vine: brand strategy, public relations, and creative direction for owner-operated businesses.
Version: 1.2.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: queen-and-vine
*/

/* Colors and fonts are set as variables in :root just below. */
:root {
    --navy: #15102A;
    --navy-2: #1D1638;
    --purple: #2A1E47;
    --violet: #7C62BA;
    --teal: #40A299;
    --teal-deep: #106153;
    --green: #2F796C;
    --green-deep: #106254;
    --gold: #9A7726;
    --gold-light: #C9A868;
    --ink: #17122A;
    --body: #3E3951;
    --muted: #6D6780;
    --line: rgba(23, 18, 42, 0.12);
    --line-strong: rgba(23, 18, 42, 0.24);
    --line-dark: rgba(255, 255, 255, 0.14);
    --paper: #F6F5F1;
    --white: #FFFFFF;
    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --script: 'Mrs Saint Delafield', 'Brush Script MT', cursive;
    --max: 1240px;
    --gutter: 40px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 84px; }
  body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; }
  ::selection { background: var(--gold-light); color: var(--ink); }

  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }

  h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.08; letter-spacing: -0.012em; }
  h2 { font-size: clamp(32px, 3.7vw, 50px); }
  h2 em, h1 em { font-style: italic; }

  .kicker { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
  .on-dark .kicker, .kicker.on-dark { color: var(--gold-light); }

  /* Brand assets (defined once, reused) */
  /* The hyper-real lockup, cut out of its wall-sign render. Its own aspect is 1685/724,
     narrower than the flat mark's 700/291, so the box takes the new ratio and the header
     keeps its exact width rather than letterboxing. */
  .brand-logo { display: block; height: 54px; aspect-ratio: 1685 / 724; background: url("assets/logo-hr.png") left center / contain no-repeat; }
  .crown { display: block; aspect-ratio: 576 / 385;
  /* The hyper-real crown is the house crown. Its art is 1.561 wide to 1 tall against this
     box's 1.496, so contain fits it by width with vertical room to spare and nothing clips.
     No saturation filter on it - it is already graded. */
  background: url("assets/crown-hr.png") center / contain no-repeat; }
  /* Below about 48px the modelling and gold rim turn to mush, so the small crowns keep the
     flat shape master, which is what it is reserved for along with one-colour uses.
     88%, not contain: that artwork has barely 2% padding of its own, so at contain
     it reaches the box edge and rounding clips the finials. */
  .u-wob .crown, .chip-wob .crown, .cr-num .crown, .wob-badge .crown, footer .foot-tag .crown {
    background-image: url("assets/crown-v2.png"); background-size: 88% auto; }

  /* Section header rule, numbered, consulting style */
  .sec-top {
    display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    border-top: 1px solid var(--line-strong); padding-top: 18px; margin-bottom: 64px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  }
  .sec-top .num { color: var(--gold); margin-right: 14px; }
  .on-dark .sec-top { border-top-color: var(--line-dark); color: rgba(255,255,255,0.55); }
  .on-dark .sec-top .num { color: var(--gold-light); }

  section { padding: 128px 0; position: relative; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 26px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
    border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  }
  .btn svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
  .btn:hover svg { transform: translateX(4px); }
  .btn-gold { background: var(--gold); color: var(--white); }
  .btn-gold:hover { background: #876721; }
  .btn-light { background: var(--white); color: var(--ink); }
  .btn-light:hover { background: var(--gold-light); }
  .btn-dark { background: var(--teal-deep); color: var(--white); }
  .btn-dark:hover { background: var(--green); }
  .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.86); border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 4px; transition: border-color 0.2s ease, color 0.2s ease; }
  .link-arrow:hover { color: var(--white); border-color: var(--gold-light); }
  .link-arrow svg { width: 14px; height: 14px; }

  /* ---------- Utility bar ---------- */
  .utility { background: var(--navy); color: rgba(255,255,255,0.62); font-size: 12px; letter-spacing: 0.02em; }
  .utility .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; gap: 20px; }
  .utility .u-right { display: flex; gap: 28px; }
  .utility a:hover { color: var(--white); }

  /* ---------- Header ---------- */
  .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow 0.3s ease; }
  .site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(23,18,42,0.35); }
  /* 86px, so the larger logo keeps air above and below it rather than filling the bar */
  .site-header nav { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .nav-menu { display: flex; align-items: center; gap: 34px; }
  .nav-menu a:not(.btn) { position: relative; font-size: 13.5px; font-weight: 500; color: var(--ink); padding: 6px 0; }
  .nav-menu a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
  .nav-menu a:not(.btn):hover::after, .nav-menu a.active::after { transform: scaleX(1); }
  .nav-menu .btn { padding: 12px 20px; font-size: 13px; }
  .nav-toggle { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line); cursor: pointer; align-items: center; justify-content: center; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: transform 0.25s ease, background 0.25s ease; }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
  .nav-toggle span::before { top: -6px; }
  .nav-toggle span::after { top: 6px; }
  .menu-open .nav-toggle span { background: transparent; }
  .menu-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
  .menu-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

  /* ---------- Hero ---------- */
  .hero {
    padding: 104px 0 0;
    color: var(--white);
    background:
      radial-gradient(900px 520px at 82% 30%, rgba(47,121,108,0.30), transparent 62%),
      radial-gradient(700px 500px at 10% 100%, rgba(124,98,186,0.24), transparent 60%),
      linear-gradient(165deg, #2A1D52 0%, var(--navy-2) 30%, var(--navy) 62%, #0D2B20 100%);
    overflow: hidden;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
  }
  .hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
  .hero .kicker { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 30px; }
  .hero .kicker::before { content: ""; width: 34px; height: 1px; background: var(--gold-light); }
  .hero h1 { color: var(--white); font-size: clamp(42px, 5.6vw, 78px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 400; }
  .hero h1 em { display: block; color: var(--gold-light); font-weight: 300; margin-top: 8px; }
  /* The kicker sits inside the H1 so the heading names the service and the area; it keeps its small-caps look. */
  .hero h1 .kicker { display: flex; width: fit-content; line-height: 1.5; text-shadow: none; }
  .hero .lede { margin-top: 34px; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.74); max-width: 52ch; font-weight: 300; }
  .hero-ctas { margin-top: 44px; display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }

  .exhibit-card { border: 1px solid var(--line-dark); background: rgba(255,255,255,0.025); padding: 22px 24px 20px; }
  .exhibit-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding-bottom: 14px; border-bottom: 1px solid var(--line-dark); }
  .exhibit-head b { color: var(--gold-light); font-weight: 600; }
  .exhibit-card svg { display: block; width: 100%; height: auto; margin: 8px 0 6px; }
  .exhibit-legend { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: 12px; color: rgba(255,255,255,0.66); }
  .exhibit-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
  .exhibit-legend .note { margin-left: auto; font-style: italic; font-family: var(--serif); color: rgba(255,255,255,0.45); }

  .figures { margin-top: 96px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); position: relative; z-index: 1; }
  .figure { padding: 34px 28px 44px 0; }
  .figure + .figure { padding-left: 28px; border-left: 1px solid var(--line-dark); }
  .figure .n { font-family: var(--serif); font-size: clamp(38px, 4vw, 54px); font-weight: 300; color: var(--white); line-height: 1; letter-spacing: -0.02em; }
  .figure .n .u { font-size: 0.42em; letter-spacing: 0; color: var(--gold-light); margin-left: 6px; font-style: italic; }
  .figure p { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.62); max-width: 24ch; }

  /* ---------- 01 Perspective ---------- */
  .perspective-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; }
  .perspective-grid .kicker { display: block; margin-bottom: 18px; }
  .perspective-grid h2 { font-size: clamp(28px, 2.6vw, 36px); }
  .big-quote { font-family: var(--serif); font-size: clamp(26px, 2.9vw, 40px); line-height: 1.28; color: var(--ink); font-weight: 300; letter-spacing: -0.01em; }
  .big-quote em { color: var(--teal-deep); font-style: italic; }
  .big-quote + p { margin-top: 30px; font-size: 17px; color: var(--body); max-width: 60ch; }

  .caps { margin-top: 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
  .cap { padding: 34px 36px 8px 0; }
  .cap + .cap { padding-left: 36px; border-left: 1px solid var(--line); }
  .cap .idx { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold); }
  .cap h3 { font-size: 26px; margin: 10px 0 14px; }
  .cap p { font-size: 15px; color: var(--body); }

  /* ---------- Thesis band ---------- */
  .thesis { background: linear-gradient(150deg, #241850 0%, var(--teal-deep) 54%, #10583E 100%); color: var(--white); padding: 112px 0; overflow: hidden; }
  .thesis::after { content: ""; position: absolute; right: -120px; top: 50%; width: 520px; height: 520px; transform: translateY(-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 0 0 70px rgba(255,255,255,0.025), 0 0 0 140px rgba(255,255,255,0.02); pointer-events: none; }
  .thesis-inner { display: grid; grid-template-columns: 90px 1fr; gap: 40px; align-items: start; position: relative; z-index: 1; }
  .thesis .crown { width: 86px; opacity: 0.95; margin-top: 10px; }
  .thesis blockquote { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.14; letter-spacing: -0.015em; max-width: 25ch; }
  .thesis blockquote em { color: var(--gold-light); font-style: italic; }
  .thesis cite { display: block; margin-top: 30px; font-style: normal; font-size: 13px; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); }
  .thesis cite b { color: var(--white); font-weight: 600; }

  /* ---------- 02 Industries ---------- */
  .industries { background: linear-gradient(180deg, #F5F2F9 0%, var(--paper) 50%, #F1F7F2 100%); }
  .ind-head, .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 56px; }
  .ind-head p, .section-head p { font-size: 16.5px; color: var(--body); max-width: 50ch; }
  .ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line); }
  .ind {
    position: relative; min-height: 168px; padding: 26px 26px 28px; background: var(--white);
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: space-between; transition: background 0.3s var(--ease);
  }
  .ind::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
  .ind:hover::before { transform: scaleX(1); }
  .ind:hover { background: #FDFCFA; }
  .ind .i { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); }
  .ind h3 { font-size: 22px; line-height: 1.2; }

  /* ---------- 03 Approach ---------- */
  .approach-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
  .approach-grid .kicker { display: block; margin-bottom: 18px; }
  .approach-grid h2 { margin-bottom: 26px; }
  .approach-grid .intro p { font-size: 17px; max-width: 46ch; }
  .deliverable { margin-top: 44px; border: 1px solid var(--line-strong); }
  .deliverable-head { padding: 16px 22px; background: var(--ink); color: var(--white); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; display: flex; justify-content: space-between; }
  .deliverable-head span:last-child { color: var(--gold-light); }
  .deliverable ol { list-style: none; counter-reset: d; }
  .deliverable li { counter-increment: d; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }
  .deliverable li:first-child { border-top: none; }
  .deliverable li::before { content: counter(d, upper-alpha); font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 17px; line-height: 1.4; }

  .timeline { position: relative; padding-left: 0; }
  .t-step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 28px; padding-bottom: 52px; }
  .t-step:last-child { padding-bottom: 0; }
  .t-step::before { content: ""; position: absolute; left: 31px; top: 64px; bottom: 0; width: 1px; background: linear-gradient(rgba(124, 98, 186, 0.5), rgba(47, 121, 108, 0.42)); }
  .t-step:last-child::before { display: none; }
  .t-node { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 22px; color: var(--ink); background: var(--white); position: relative; z-index: 1; transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease; }
  .t-step:hover .t-node { border-color: var(--gold); background: var(--gold); color: var(--white); }
  .t-meta { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); margin: 6px 0 8px; }
  .t-step h3 { font-size: 28px; margin-bottom: 12px; }
  .t-step p { font-size: 15.5px; max-width: 54ch; }

  /* ---------- 04 Engagement ---------- */
  .engagement { background: linear-gradient(170deg, #281C4E 0%, var(--navy) 58%, #112C22 100%); color: var(--white); overflow: hidden; }
  .eng-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 64px; }
  .eng-head .kicker { display: block; margin-bottom: 18px; }
  .eng-head h2 { color: var(--white); }
  .eng-head p { font-size: 17px; color: rgba(255,255,255,0.72); max-width: 48ch; }

  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .tier { position: relative; border: 1px solid var(--line-dark); background: rgba(255,255,255,0.03); padding: 34px 30px 32px; display: flex; flex-direction: column; transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease); }
  .tier::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--gold-light); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
  .tier:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.24); transform: translateY(-4px); }
  .tier:hover::before { transform: scaleX(1); }
  .tier-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
  .tier .numeral { font-family: var(--serif); font-style: italic; font-size: 40px; font-weight: 300; line-height: 1; color: var(--gold-light); }
  .meter { display: flex; gap: 4px; }
  .meter i { width: 22px; height: 4px; background: rgba(255,255,255,0.14); }
  .meter i.on { background: var(--teal); }
  .tier .lvl { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
  .tier h3 { color: var(--white); font-size: 27px; margin-bottom: 16px; }
  .tier p { font-size: 14.5px; color: rgba(255,255,255,0.72); flex: 1; }
  .tier .who { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: 13px; color: rgba(255,255,255,0.86); display: flex; align-items: center; gap: 10px; }
  .tier .who::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

  .exhibit-table { margin-top: 72px; background: var(--white); color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6); }
  .exhibit-table .exhibit-head { color: var(--muted); border-bottom-color: var(--line); padding: 20px 28px; }
  .exhibit-table .exhibit-head b { color: var(--gold); }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.matrix { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
  .matrix th, .matrix td { padding: 15px 28px; text-align: left; border-bottom: 1px solid var(--line); }
  .matrix thead th { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); padding-top: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
  .matrix thead th .tier-crown { display: block; width: 46px; margin: 0 auto 9px; filter: drop-shadow(0 4px 6px rgba(80,60,10,.28)); }
  .matrix thead th .tier-crown svg { display: block; width: 100%; height: auto; }
  .matrix thead th small { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
  .matrix th:not(:first-child), .matrix td:not(:first-child) { text-align: center; width: 19%; }
  .matrix tbody tr:not(.grp):hover td { background: #FAF9F6; }
  .matrix tr.grp td { background: var(--paper); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-top: 11px; padding-bottom: 11px; }
  .matrix .ck { width: 18px; height: 18px; color: var(--teal-deep); vertical-align: middle; }
  .matrix .no { display: inline-block; width: 12px; height: 1px; background: var(--line-strong); vertical-align: middle; }
  .matrix tbody tr:last-child td { border-bottom: none; }
  .exhibit-foot { padding: 16px 28px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

  /* ---------- Commitment ---------- */
  .commitment { padding: 104px 0; background: linear-gradient(180deg, var(--white) 0%, #FBF9FE 50%, #F4FAF6 100%); }
  .commit-box { display: grid; grid-template-columns: 5fr 7fr; border: 1px solid var(--line-strong); }
  .commit-l { padding: 52px 48px; background: var(--paper); border-right: 1px solid var(--line); }
  .commit-l .kicker { display: block; margin-bottom: 18px; }
  .commit-l h2 { font-size: clamp(28px, 2.8vw, 38px); }
  .commit-r { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
  .commit-r p { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink); font-weight: 300; }
  .chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
  .chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
  .chip svg { width: 14px; height: 14px; color: var(--teal-deep); }

  /* ---------- 05 Leadership ---------- */
  /* .leadership keeps full section padding: it now follows the thesis band (2026-10-08). */
  .letter-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 88px; align-items: start; }
  .letter-aside { position: sticky; top: 120px; }
  .letter-aside .crown { width: 76px; margin-bottom: 30px; }
  .letter-aside .kicker { display: block; margin-bottom: 26px; }
  .stat-block { border-top: 1px solid var(--line-strong); padding-top: 24px; }
  .stat-block .big { font-family: var(--serif); font-size: 72px; font-weight: 300; line-height: 1; color: var(--purple); letter-spacing: -0.03em; }
  .stat-block p { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 32ch; }

  .letter h2 { margin-bottom: 40px; }
  .letter .to { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--muted); margin-bottom: 22px; }
  .letter p { font-size: 17px; line-height: 1.75; color: var(--body); margin-bottom: 22px; max-width: 64ch; }
  .letter p.first { font-family: var(--serif); font-size: 23px; line-height: 1.5; color: var(--ink); font-weight: 300; }
  .letter p.pull {
    font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.42; color: var(--purple);
    border-left: 2px solid var(--gold); padding: 6px 0 6px 30px; margin: 44px 0;
  }
  .signoff { margin-top: 44px; display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
  .signoff .sig { font-family: var(--script); font-size: 52px; color: var(--purple); line-height: 0.9; }
  .signoff .who { border-left: 1px solid var(--line-strong); padding-left: 24px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
  .signoff .who b { display: block; color: var(--ink); font-weight: 600; font-size: 14.5px; }
  /* The firm's mark closing the letter, the way letterhead does. Pushed to the far edge so
     it reads as a signature block rather than a third column of information. */
  .signoff-mark { display: block; width: 132px; height: 55px; margin-left: auto; flex: none;
    background: url("assets/logo-hr.png") right bottom / contain no-repeat; opacity: 0.8; }
  @media (max-width: 640px) { .signoff-mark { margin-left: 0; width: 112px; height: 47px; } }

  .team { margin-top: 112px; }
  .team-head { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line-strong); padding-top: 18px; margin-bottom: 36px; }
  /* One column per person. Set this to the number of people in the grid, or the row
     ends with an empty cell and the cards sit narrower than they need to. */
  .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .person { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 26px 28px; border: 1px solid var(--line); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
  .person:hover { border-color: var(--line-strong); box-shadow: 0 24px 40px -28px rgba(23,18,42,0.35); }
  .mono { flex-shrink: 0; width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 26px; color: var(--white); background: linear-gradient(140deg, var(--purple) 0%, var(--teal-deep) 55%, var(--green-deep) 100%); letter-spacing: 0.02em; }
  .person h3 { font-size: 21px; line-height: 1.22; }
  .person p { font-size: 13.5px; color: var(--muted); margin-top: 5px; }

  /* ---------- Contact ---------- */
  .contact {
    color: var(--white);
    background:
      radial-gradient(800px 480px at 0% 0%, rgba(47,121,108,0.26), transparent 60%),
      linear-gradient(160deg, #271B4C 0%, var(--navy-2) 42%, #0F2A20 100%);
  }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; }
  .contact .kicker { display: block; margin-bottom: 18px; }
  .contact h2 { color: var(--white); max-width: 14ch; }
  .contact-intro > p { margin-top: 24px; font-size: 17px; color: rgba(255,255,255,0.72); max-width: 44ch; }
  .next-steps { list-style: none; margin-top: 44px; border-top: 1px solid var(--line-dark); }
  .next-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line-dark); font-size: 15px; color: rgba(255,255,255,0.86); }
  .next-steps li b { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold-light); font-size: 18px; line-height: 1.3; }
  .next-steps li span small { display: block; font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 2px; }
  .details { margin-top: 40px; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 40px; }
  .details .label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 6px; }
  .details a { font-size: 14.5px; color: var(--white); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
  .details a:hover { border-color: var(--gold-light); }

  .form-card { background: var(--white); color: var(--ink); padding: 44px 44px 40px; box-shadow: 0 50px 90px -40px rgba(0,0,0,0.7); position: relative; }
  .form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
  .form-card h3 { font-size: 28px; margin-bottom: 6px; }
  .form-card .sub { font-size: 14px; color: var(--muted); margin-bottom: 30px; }
  form { display: flex; flex-direction: column; gap: 20px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  input, textarea {
    width: 100%; background: var(--white); border: 1px solid var(--line-strong); border-radius: 0;
    color: var(--ink); font-family: var(--sans); font-size: 15px; padding: 13px 14px; outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  input:focus, textarea:focus { border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(16,97,83,0.12); }
  textarea { resize: vertical; min-height: 110px; }
  ::placeholder { color: #A7A2B3; }
  .form-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
  .form-note { font-size: 13px; color: var(--muted); max-width: 30ch; }
  [hidden] { display: none !important; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-error { font-size: 13.5px; color: #9B2C2C; background: #FBF1F1; border-left: 2px solid #9B2C2C; padding: 12px 14px; }
  .btn:disabled { opacity: 0.6; cursor: progress; }
  .form-success { padding: 24px 0 8px; }
  .form-success .crown { width: 67px; margin-bottom: 22px; }
  .form-success h3 { font-size: 34px; margin-bottom: 10px; }
  .form-success p { font-size: 16px; color: var(--body); max-width: 40ch; }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

  /* ---------- Footer ---------- */
  footer { background: linear-gradient(160deg, #170F30 0%, #0F0B1F 56%, #0B2119 100%); color: rgba(255,255,255,0.6); padding: 88px 0 40px; font-size: 14px; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 48px; padding-bottom: 64px; }
  /* The footer flattens the mark to white. Under that filter the hyper-real cut-out loses
     everything that makes it hyper-real and keeps only its silhouette, which the gold bevel
     thickens and the key leaves ragged - so this one-colour use stays on the flat master,
     and takes its 700/291 ratio back with it. */
  footer .brand-logo { height: 62px; aspect-ratio: 700 / 291; background-image: url("assets/logo.png");
    filter: brightness(0) invert(1); opacity: 0.95; }
  .foot-tag { margin-top: 22px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
  .foot-blurb { margin-top: 16px; max-width: 34ch; line-height: 1.7; }
  footer h5 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 20px; }
  footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  footer ul a:hover { color: var(--white); }
  footer ul b { display: block; color: var(--white); font-weight: 500; }
  footer ul small { font-size: 12.5px; color: rgba(255,255,255,0.5); }
  .foot-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,0.45); }

  /* profile links */
  .in-link { display: inline-flex; align-items: center; gap: 8px; }
  .in-ico { width: 13px; height: 13px; flex: none; opacity: 0.6; transition: opacity 0.2s ease; }
  .in-link:hover .in-ico { opacity: 1; }
  .person h3 .in-link { color: inherit; }
  .person h3 .in-link:hover { color: var(--teal-deep); }
  footer ul .in-link { display: flex; }
  footer ul small { display: block; }
  footer .in-link b { transition: color 0.2s ease; }
  footer .in-link:hover b { color: var(--gold-light); }
  /* ---------- Motion ---------- */
  .js .reveal { transform: translateY(16px); transition: transform 0.9s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: 0.08s; } .js .reveal.d2 { transition-delay: 0.16s; } .js .reveal.d3 { transition-delay: 0.24s; }
  .hero-anim > * { animation: rise 1s var(--ease) both; }
  .hero-anim > *:nth-child(2) { animation-delay: 0.08s; } .hero-anim > *:nth-child(3) { animation-delay: 0.16s; } .hero-anim > *:nth-child(4) { animation-delay: 0.24s; }
  @keyframes rise { from { transform: translateY(20px); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal, .hero-anim > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1100px) {
    .nav-menu { gap: 24px; }
    .hero-grid { grid-template-columns: 1fr 0.9fr; gap: 44px; }
    .letter-grid { gap: 56px; }
    .foot-grid, .team-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 980px) {
    :root { --gutter: 28px; }
    section { padding: 88px 0; }
    .nav-toggle { display: inline-flex; }
    .nav-menu {
      display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
      background: var(--white); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; box-shadow: 0 20px 40px -24px rgba(23,18,42,0.4);
    }
    .menu-open .nav-menu { display: flex; }
    .nav-menu a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
    .nav-menu a:not(.btn)::after { display: none; }
    .nav-menu .btn { margin-top: 18px; justify-content: center; padding: 15px 20px; }
    .hero { padding-top: 72px; }
    .hero-grid, .perspective-grid, .approach-grid, .letter-grid, .contact-grid, .ind-head, .section-head, .eng-head, .commit-box { grid-template-columns: 1fr; }
    .hero-grid { gap: 56px; }
    .exhibit-card { max-width: 520px; }
    .perspective-grid, .approach-grid, .letter-grid, .contact-grid, .ind-head, .section-head, .eng-head { gap: 36px; }
    .figures { grid-template-columns: repeat(2, 1fr); margin-top: 72px; }
    .figure:nth-child(3) { padding-left: 0; border-left: none; }
    .figure:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
    .caps { grid-template-columns: 1fr; margin-top: 64px; }
    .cap, .cap + .cap { padding: 28px 0; border-left: none; }
    .cap + .cap { border-top: 1px solid var(--line); }
    .ind-grid { grid-template-columns: repeat(2, 1fr); }
    .tiers { grid-template-columns: 1fr; }
    .commit-l { border-right: none; border-bottom: 1px solid var(--line); }
    .letter-aside { position: static; display: grid; grid-template-columns: auto 1fr; gap: 0 28px; align-items: end; }
    .letter-aside .crown { grid-row: span 2; margin-bottom: 0; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .thesis-inner { grid-template-columns: 1fr; gap: 24px; }
  }
  @media (max-width: 640px) {
    :root { --gutter: 22px; }
    .utility { display: none; }
    .hero h1 { font-size: 42px; }
    .figure, .figure + .figure { padding: 26px 16px 30px 0; }
    .figure:nth-child(even) { padding-left: 16px; }
    .ind-grid { grid-template-columns: 1fr; }
    .ind { min-height: 0; flex-direction: row; align-items: baseline; gap: 18px; justify-content: flex-start; }
    .form-row, .team-grid { grid-template-columns: 1fr; }
    .form-card, .commit-l, .commit-r { padding: 34px 24px; }
    .details { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; }
    .exhibit-legend .note { margin-left: 0; }
    .exhibit-head span:last-child { display: none; }
    .sec-top > span:last-child { display: none; }
    .letter-aside { grid-template-columns: 1fr; }
    .letter-aside .crown { margin-bottom: 20px; }
  }

/* ---------- WordPress additions ---------- */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Other pages (Privacy Policy, etc.) use index.php */
.page-main { padding: 96px 0 128px; background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%); position: relative; overflow: clip; isolation: isolate; }
.page-main .entry { max-width: 760px; }
.page-main h1 { font-size: clamp(36px, 4vw, 52px); margin-bottom: 28px; }
.page-main .entry-content { font-size: 16.5px; line-height: 1.75; color: var(--body); }
.page-main .entry-content > * + * { margin-top: 1.1em; }
.page-main .entry-content h2 { font-size: 30px; margin-top: 1.6em; }
.page-main .entry-content h3 { font-size: 23px; margin-top: 1.4em; }
.page-main .entry-content a { color: var(--teal-deep); text-decoration: underline; }
.page-main .entry-content ul, .page-main .entry-content ol { padding-left: 1.3em; }

/* ---------- the Weekly Crowning: post header, post body and the index ---------- */
/* A dark band above a light body, so a post keeps the page's light-dark rhythm. */
.post-head, .blog-head {
  color: var(--white); position: relative; overflow: clip; isolation: isolate;
  padding: 84px 0 76px;
  background:
    radial-gradient(720px 460px at 86% 6%, rgba(201, 168, 104, 0.22), transparent 62%),
    radial-gradient(680px 500px at 4% 98%, rgba(124, 98, 186, 0.26), transparent 60%),
    linear-gradient(162deg, #251A4D 0%, var(--navy-2) 40%, var(--navy) 70%, #0E2A20 100%);
}
.post-head-inner { max-width: 760px; }
.post-kicker { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-light); text-decoration: none; padding-block: 4px; }
.post-kicker:hover { color: var(--white); }
.post-head h1, .blog-head h1 { color: var(--white); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08;
  margin-top: 16px; text-shadow: 0.04em 0.045em 0 rgba(0, 0, 0, 0.22); }
.blog-head h1 em { color: var(--gold-light); }
.post-standfirst, .blog-lede { margin-top: 20px; font-size: 18px; line-height: 1.65; font-weight: 300;
  color: rgba(255, 255, 255, 0.76); max-width: 56ch; }
.post-meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px;
  letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.62); }
.post-meta span + span { position: relative; padding-left: 22px; }
.post-meta span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1px;
  background: rgba(255, 255, 255, 0.3); }
.post-body { padding-top: 64px; }
.post-cover { margin: 0 0 40px; }
.post-cover img { width: 100%; height: auto; display: block; border-radius: 18px;
  box-shadow: 0 34px 60px -40px rgba(23, 18, 42, 0.5); }
/* Long-form rhythm: this is read, not scanned, so the measure and spacing open up. */
.post-body .entry-content { font-size: 17.5px; line-height: 1.78; }
.post-body .entry-content > * + * { margin-top: 1.25em; }
.post-body .entry-content h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; margin-top: 2em;
  padding-top: 1em; border-top: 1px solid var(--line); }
.post-body .entry-content li + li { margin-top: 0.6em; }
.post-body .entry-content blockquote { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--gold);
  font-family: var(--serif); font-size: 22px; line-height: 1.45; font-style: italic; color: var(--ink); }
.post-body .entry-content img { max-width: 100%; height: auto; border-radius: 14px; }
/* This is a <footer> inside the article, so it inherits the bare `footer` rule further
   down: dark gradient, white text, 88px padding. All of that has to be put back. */
.post-foot { background: none; color: inherit; font-size: inherit;
  margin-top: 60px; padding: 30px 0 0; border-top: 1px solid var(--line-strong);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.post-foot .btn-gold { flex: none; }
.post-foot .link-arrow { color: var(--teal-deep); }
@media (max-width: 560px) {
  .post-foot { gap: 16px; }
  .post-foot .btn-gold { width: 100%; justify-content: center; }
}

.blog-list { padding-top: 72px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
/* Three columns strand a lone card on the left with two empty cells beside it, which is
   how the page looks the week the first crown goes up. With one or two posts the grid
   drops to their own width and centres them instead of leaving the hole.
   An explicit count per case, not auto-fit: auto-fit keeps a collapsed empty track and
   the row still centres around it, which left the single card off to one side. */
.post-grid:has(> :only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
.post-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
.post-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.post-card:hover { border-color: var(--line-strong); box-shadow: 0 30px 50px -34px rgba(23, 18, 42, 0.4);
  transform: translateY(-3px); }
.post-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.post-card-shot { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--mist); }
.post-card-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.post-card-date { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.post-card-title { font-family: var(--serif); font-size: 22px; line-height: 1.22; color: var(--ink); margin-top: 10px; }
.post-card-excerpt { font-size: 14.5px; line-height: 1.6; color: var(--body); margin-top: 10px; }
.post-card-more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--teal-deep); }
.post-card-more svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.post-card:hover .post-card-more svg { transform: translateX(4px); }
.blog-nav { margin-top: 56px; }
.blog-nav .page-numbers { padding: 8px 14px; font-size: 14px; color: var(--body); text-decoration: none; }
.blog-nav .page-numbers.current { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--gold); }

@media (max-width: 1100px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .post-head, .blog-head { padding: 62px 0 56px; }
  .post-body { padding-top: 46px; }
  .post-grid { grid-template-columns: 1fr; }
  .post-foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- background detail (decorative only, sits behind all content) ---------- */
section, footer, .figures-wrap { position: relative; overflow: clip; isolation: isolate; }
.wrap { z-index: 2; }

.deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deco > * { position: absolute; }

/* soft colour bloom */
.glow { border-radius: 50%; filter: blur(80px); }
.glow.gold { background: rgba(201, 168, 104, 0.30); }
.glow.teal { background: rgba(64, 162, 153, 0.26); }
.glow.violet { background: rgba(124, 98, 186, 0.30); }

/* halftone dot field */
.halftone {
  background-image: radial-gradient(rgba(42, 30, 71, 0.16) 1.2px, transparent 1.7px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000 5%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 5%, transparent 100%);
}
.on-dark .halftone, .hero .halftone, footer .halftone { background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1.2px, transparent 1.7px); }

/* oversized outlined section word, drifting on scroll */

/* botanical art from the brand mark */
.leaf-soft { width: 380px; color: var(--violet); opacity: 0.09; will-change: transform; }
.on-dark .leaf-soft, .hero .leaf-soft { opacity: 0.13; }
.sprig { width: 250px; color: var(--violet); opacity: 0.30; will-change: transform; }
.on-dark .sprig, .hero .sprig, footer .sprig { color: #6B7AB5; opacity: 0.34; }
.leaf-soft svg, .sprig svg { width: 100%; height: auto; display: block; overflow: visible; }

/* contour rings: the county line motif */
.topo { width: 100%; height: 100%; inset: 0; }
/* drifting gold dust */
.sparkles { inset: 0; width: 100%; height: 100%; }

/* a whisper of depth on the biggest headlines */
.hero h1 { text-shadow: 0.045em 0.05em 0 rgba(0, 0, 0, 0.22); }
.thesis blockquote, .contact h2 { text-shadow: 0.04em 0.045em 0 rgba(0, 0, 0, 0.18); }
.section-head h2, .letter h2 { text-shadow: 0.045em 0.05em 0 rgba(124, 98, 186, 0.13); }

@media (max-width: 900px) {
  .leaf-soft { width: 240px; }
  .sprig { width: 170px; opacity: 0.22; }
}
@media (prefers-reduced-motion: reduce) {
  .leaf-soft, .sprig, .crown-mark { transform: none !important; }
}

/* ---------- Woman-owned business marks ---------- */
.u-wob { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-light); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.u-wob .crown { width: 20px; }

.wob-badge {
  margin-top: 34px; display: inline-flex; align-items: center; gap: 14px;
  padding: 11px 20px 11px 14px; border: 1px solid rgba(201, 168, 104, 0.45);
  background: linear-gradient(100deg, rgba(201, 168, 104, 0.14), rgba(201, 168, 104, 0.03));
  box-shadow: 5px 5px 0 -1px rgba(201, 168, 104, 0.16);
}
.wob-badge .crown { width: 45px; flex: none; }
.wob-badge > span:last-child { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.66); }
.wob-badge b { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); }

.chip-wob { border-color: var(--gold); background: rgba(201, 168, 104, 0.10); }
.chip-wob .crown { width: 22px; }

.foot-wob { color: var(--gold-light); }

/* ---------- brand marks (replaces the old outlined word treatment) ---------- */
/* This one stays on the flat shape master on purpose. At 12% opacity it is a ghost in the
   background, which is the one-colour use the flat art is kept for; the hyper-real crown's
   modelling just turns to a smudge at that strength. */
.crown-mark { aspect-ratio: 576 / 385; background: url("assets/crown-v2.png") center / 88% auto no-repeat; opacity: 0.12; will-change: transform; }
.on-dark .crown-mark, .hero .crown-mark { opacity: 0.15; }
.rhythm { height: 190px; background-image: repeating-linear-gradient(90deg, rgba(124, 98, 186, 0.26) 0 1px, transparent 1px 30px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }

/* ---------- 01 What we manage ---------- */
.platforms { background: var(--white); }
.plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plat { background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FD 52%, #F2F8F3 100%); border: 1px solid rgba(124, 98, 186, 0.16); border-radius: 20px;
  padding: 30px 28px 28px; box-shadow: 0 20px 42px -34px rgba(42, 30, 71, 0.5); }
.plat-mark { width: 54px; height: 54px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--violet) 0%, var(--teal) 55%, var(--green) 100%); color: #fff; margin-bottom: 22px; box-shadow: 0 14px 24px -14px rgba(74, 56, 128, 0.65); }
.plat-mark svg { width: 25px; height: 25px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plat h3 { font-family: var(--serif); font-size: 25px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.plat p { font-size: 14.5px; color: var(--body); }
.plat-note { margin-top: 34px; padding: 22px 26px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); font-size: 15.5px; color: var(--ink); }
.plat-note b { color: var(--teal-deep); }

/* ---------- 02 The cadence ---------- */
.cadence { background: linear-gradient(180deg, #F4F1F9 0%, var(--paper) 46%, #F1F7F2 100%); }
.cad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cad { background: var(--white); border: 1px solid rgba(124, 98, 186, 0.16); border-radius: 20px; padding: 26px 24px 24px;
  box-shadow: 0 18px 38px -32px rgba(42, 30, 71, 0.5); }
.cad-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cad-when { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.cad-dots { display: inline-flex; align-items: center; gap: 5px; }
.cad-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); opacity: 0.3; }
.cad-dots i:first-child { opacity: 1; }
.cad h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.cad p { font-size: 14px; color: var(--body); }

/* ---------- icons, centred everywhere ---------- */
.btn { align-items: center; }
.btn svg, .chip svg, .plat-mark svg, .cad-dots i { flex: none; }
.chip { display: inline-flex; align-items: center; gap: 10px; }
.chip svg { display: block; }
.matrix .ck { display: inline-block; vertical-align: middle; }
.in-link { display: inline-flex; align-items: center; gap: 8px; }
.in-ico { display: block; flex: none; }
.mono, .t-node, .crown-badge, .plat-mark { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.exhibit-legend i { display: inline-block; vertical-align: 1px; }

@media (max-width: 1100px) {
  .plat-grid { grid-template-columns: repeat(2, 1fr); }
  .cad-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .plat-grid, .cad-grid { grid-template-columns: 1fr; }
  .crown-mark { width: 200px !important; }
}

/* initials sit dead centre in their circle */
.mono { display: flex; align-items: center; justify-content: center; line-height: 1; text-align: center; padding: 0; }
.tier-top { justify-content: flex-start; }

/* ---------- Exhibit 2 sits on a dark plate inside the light section ---------- */
.plat-figure { margin-top: 34px; }
.platforms .exhibit-card { background: linear-gradient(160deg, #332459 0%, var(--navy) 62%, #16402D 100%);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; padding: 24px 28px 20px;
  box-shadow: 0 40px 80px -46px rgba(34, 24, 57, 0.8); max-width: 760px; margin: 0 auto; }
.platforms .exhibit-card .exhibit-head { color: rgba(255, 255, 255, 0.55); border-bottom-color: rgba(255, 255, 255, 0.14); }
.platforms .exhibit-card .exhibit-legend { color: rgba(255, 255, 255, 0.7); border-top-color: rgba(255, 255, 255, 0.14); }

/* the second half of the punch line, spoken louder and centred on its own line */
.hero h1 .shout { text-transform: uppercase; letter-spacing: 0.012em; font-size: 0.86em;
  display: block; text-align: center; margin-top: 26px; }

/* ---------- the slogan, given its own moment ---------- */
.slogan-band { background: linear-gradient(180deg, var(--paper), #FFFDF8); padding: 92px 0 96px; text-align: center; }
.slogan { display: flex; align-items: center; justify-content: center; gap: 22px; }
.slogan .crown { width: 81px; flex: none; }
.slogan-rule { height: 1px; width: min(220px, 22vw); background: linear-gradient(90deg, transparent, rgba(176, 138, 58, 0.75), transparent); }
.slogan-line { margin-top: 22px; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(30px, 4.4vw, 58px); line-height: 1.12; color: var(--gold); letter-spacing: -0.01em;
  text-shadow: 0.04em 0.045em 0 rgba(42, 30, 71, 0.10); }
.slogan-sub { margin-top: 16px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
footer .foot-tag { display: inline-flex; align-items: center; gap: 10px; }
footer .foot-tag .crown { width: 26px; flex: none; }
@media (max-width: 640px) { .slogan .crown { width: 63px; } }

/* a team photo fills the circle; the initials stay as the fallback */
.mono.has-photo { padding: 0; overflow: hidden; background: var(--mist); }
.mono.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ---------- service area, map and the Google link ---------- */
.details .svc, .details .hrs { grid-column: 1 / -1; margin-top: 6px; }
.details .hours { color: var(--white); font-size: 14.5px; white-space: nowrap; }
.details .area { color: var(--white); font-size: 14.5px; white-space: nowrap; }
.area-note { margin-top: 22px; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.66); max-width: 46ch; }
.map-card { margin-top: 22px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.85); line-height: 0; }
.map-card iframe { width: 100%; height: 260px; border: 0; display: block; filter: saturate(0.85) contrast(0.95); }
.gbp-link { margin-top: 20px; }
.foot-area { margin-top: 14px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); }
@media (max-width: 700px) { .map-card iframe { height: 210px; } }

/* ---------- founder portrait, beside the letter ---------- */
.founder-portrait { border-top: 1px solid var(--line-strong); padding-top: 28px; margin: 0; }
.founder-portrait img { width: 100%; height: auto; display: block; border-radius: 18px;
  box-shadow: 0 34px 60px -38px rgba(23, 18, 42, 0.55); }
.founder-portrait figcaption { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.founder-portrait figcaption span { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--muted); }

@media (max-width: 980px) {
  .founder-portrait { border-top: 0; padding-top: 0; max-width: 300px; }
}

/* founder caption at the 16 px phone minimum */
@media (max-width: 700px) {
  .founder-portrait figcaption { font-size: 16px; }
  .founder-portrait figcaption span { font-size: 16px; line-height: 1.45; }
}

/* ---------- founder spotlight ---------- */
.spotlight { background: linear-gradient(180deg, var(--white) 0%, #FAF8FD 55%, #F2F8F3 100%); }
/* copy leads, photo sits on the right; source order stays photo-first so it leads on mobile */
.spot-grid { display: grid; grid-template-columns: 1fr 400px; gap: 72px; align-items: center; }
.spot-copy { grid-area: 1 / 1; }
.spot-photo { grid-area: 1 / 2; }
.spot-photo .slot { margin: 0; }
/* the crop is 384px of real pixels, so a 400px column renders it essentially 1:1 */
.spot-photo .slot.is-filled { width: 100%; }
.spot-photo .slot.is-filled img { border-radius: 18px; }
.spot-copy h2 { margin: 14px 0 22px; }
.spot-copy > p { font-size: 17px; line-height: 1.7; color: var(--body); max-width: 52ch; }
.spot-points { list-style: none; margin: 28px 0 30px; display: grid; gap: 12px; }
.spot-points li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); }
.spot-points svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--teal-deep); stroke-width: 2; }
/* .link-arrow is white by default, for the dark sections; this one sits on paper */
.spot-copy .link-arrow { color: var(--ink); border-bottom-color: var(--line-strong); }
.spot-copy .link-arrow:hover { color: var(--teal-deep); border-bottom-color: var(--gold); }


/* ---------- photo slots: a real photo, or a frame waiting for one ---------- */
.slot { margin: 0; border-radius: 18px; overflow: hidden; position: relative; }
.slot.is-filled img { width: 100%; height: 100%; object-fit: cover; display: block;
  box-shadow: 0 34px 60px -38px rgba(23, 18, 42, 0.55); }
.slot.is-empty { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 1px dashed rgba(124, 98, 186, 0.42);
  background: linear-gradient(150deg, rgba(124, 98, 186, 0.08), rgba(47, 121, 108, 0.08)); }
.slot.is-empty .slot-mark { width: 44px; height: 34px; border-radius: 6px; border: 1.5px solid rgba(124, 98, 186, 0.5); position: relative; }
.slot.is-empty .slot-mark::before { content: ""; position: absolute; left: 7px; top: 7px; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(201, 168, 104, 0.9); }
.slot.is-empty .slot-mark::after { content: ""; position: absolute; right: 5px; bottom: 0; width: 26px; height: 17px;
  background: rgba(47, 121, 108, 0.55); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.slot.is-empty figcaption { text-align: center; font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.4; padding: 0 16px; }
.slot.is-empty figcaption small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.spot-photo .slot.is-empty { aspect-ratio: 3 / 4; }

@media (max-width: 980px) {
  .spot-grid { grid-template-columns: 1fr; gap: 36px; }
  /* one column: drop the placements so source order applies again */
  .spot-copy, .spot-photo { grid-area: auto; justify-self: start; }
  .spot-photo { max-width: 320px; }
}

/* ---------- reCAPTCHA notice ---------- */
.recaptcha-note { margin-top: 14px; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.recaptcha-note a { color: var(--teal-deep); border-bottom: 1px solid rgba(16, 97, 83, 0.3); }
.recaptcha-note a:hover { border-bottom-color: var(--gold); }
.form-privacy { margin-top: 14px; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.form-privacy a { color: var(--teal-deep); border-bottom: 1px solid rgba(16, 97, 83, 0.3); }
.form-privacy a:hover { border-bottom-color: var(--gold); }
.foot-privacy { color: inherit; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.foot-privacy:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* ---------- FAQ ---------- */
.faq { background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%); }
.faq-list { border-top: 1px solid var(--line-strong); max-width: 940px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 4px; font-family: var(--serif); font-size: 23px; line-height: 1.25; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--teal-deep); }
.faq-item summary:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 4px; border-radius: 4px; }
.faq-icon { flex: none; position: relative; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--white); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--gold); transform: translate(-50%, -50%); transition: transform 0.25s var(--ease); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item p { padding: 0 72px 26px 4px; font-size: 16px; line-height: 1.7; color: var(--body); max-width: 72ch; }
@media (max-width: 640px) {
  .faq-item summary { font-size: 19px; padding: 20px 0; gap: 16px; }
  .faq-item p { padding: 0 0 22px; }
}
@media (prefers-reduced-motion: reduce) { .faq-icon::before, .faq-icon::after { transition: none; } }
.map-link { margin-top: 20px; }
/* the Google profile link and the review link share one row, wrapping on narrow screens */
.map-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 30px; }

/* ---------- Exhibit 2: supplied artwork, full card ---------- */
.exhibit-shot { margin: 42px auto 0; max-width: 820px; }
.exhibit-shot img { width: 100%; height: auto; display: block; border-radius: 20px;
  box-shadow: 0 44px 86px -50px rgba(34, 24, 57, 0.85); }

/* ---------- hero kicker: hold it on one line ----------
   The kicker is an inline-flex row (rule + text), so the text becomes an anonymous
   flex item that shrinks and wraps even when there is room. nowrap stops that; the
   tracking and size step down once the column gets narrow, and below 980px it is
   allowed to wrap again rather than overflow. */
.hero .kicker { white-space: nowrap; letter-spacing: 0.16em; }
@media (max-width: 1240px) {
  .hero .kicker { font-size: 10.5px; letter-spacing: 0.13em; gap: 11px; }
  .hero .kicker::before { width: 26px; }
}
@media (max-width: 980px) {
  .hero .kicker { white-space: normal; font-size: 11.5px; letter-spacing: 0.18em; gap: 14px; }
  .hero .kicker::before { width: 34px; }
}

/* ---------- accessibility: skip link and hit areas ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--teal-deep); color: #fff; padding: 12px 20px; font-size: 14px; font-weight: 600;
  border-bottom-right-radius: 10px; }
.skip-link:focus { left: 0; }
/* WCAG 2.2 wants a 24px pointer target; these inline links sat at 18-23px */
.utility a, .details a, .person h3 .in-link, footer ul a { padding-block: 3px; display: inline-block; }
.person h3 .in-link, footer ul a { display: inline-flex; }

/* ---------- sister company lockup, inside the Contact column ---------- */
.sister { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; }
.sister-label { display: block; font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 12px; }
.sister-mark { display: inline-block; width: 128px; transition: opacity 0.25s ease, transform 0.25s ease; }
.sister-mark img { width: 100%; height: auto; display: block; }
a.sister-mark { opacity: 0.85; }
a.sister-mark:hover { opacity: 1; transform: translateY(-2px); }

/* ---------- social profiles in the footer ---------- */
.socials { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.socials-label { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-right: 2px; }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; color: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.16);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.socials a:hover { color: var(--gold-light); border-color: var(--gold); transform: translateY(-2px); }
.socials svg { width: 15px; height: 15px; display: block; }
.sister-note { margin-top: 12px; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, 0.5); }
.sister-note b { color: rgba(255, 255, 255, 0.78); font-weight: 600; }

/* team photo circles fall back to this tint while loading */
:root { --mist: #EEEAF5; }

/* ---------- The work: one concept per industry ---------- */
.work {
  color: var(--white);
  background:
    radial-gradient(760px 480px at 88% 8%, rgba(124, 98, 186, 0.26), transparent 62%),
    radial-gradient(720px 520px at 4% 96%, rgba(47, 121, 108, 0.26), transparent 60%),
    linear-gradient(162deg, #251A4D 0%, var(--navy-2) 38%, var(--navy) 66%, #0E2A20 100%);
}
/* themed layer: browser frames, profile cards, map pins and review stars, the things we manage */
.wire {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='190' viewBox='0 0 260 190'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='18' width='176' height='118' rx='9'/%3E%3Cpath d='M18 37h176'/%3E%3Ccircle cx='30' cy='27.5' r='2.3'/%3E%3Ccircle cx='39' cy='27.5' r='2.3'/%3E%3Ccircle cx='48' cy='27.5' r='2.3'/%3E%3Cpath d='M66 27.5h90M32 56h72M32 68h96M32 80h58'/%3E%3Crect x='32' y='96' width='46' height='22' rx='4'/%3E%3Crect x='122' y='52' width='58' height='46' rx='5'/%3E%3Cpath d='M130 90l12-14 9 9 8-6 13 11'/%3E%3Cpath d='M226 70c0 11-12 23-12 23s-12-12-12-23a12 12 0 0 1 24 0z'/%3E%3Ccircle cx='214' cy='70' r='4'/%3E%3Cpath d='M222 150l3.2 6.5 7.2 1-5.2 5 1.2 7.1-6.4-3.4-6.4 3.4 1.2-7.1-5.2-5 7.2-1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 190px; opacity: 0.11;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
}
.work-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 60px; }
.work-head .kicker { display: block; margin-bottom: 18px; }
.work-head h2 { color: var(--white); text-shadow: 0.04em 0.045em 0 rgba(0, 0, 0, 0.2); }
.work-head h2 em { color: var(--gold-light); }
.work-head p { font-size: 17px; color: rgba(255, 255, 255, 0.72); max-width: 50ch; }

.work-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }

/* the index: industry, name, and the one-line story of whichever is open */
.work-list { border-top: 1px solid var(--line-dark); }
.work-tab {
  position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: center;
  width: 100%; padding: 15px 16px 15px 22px; background: none; border: 0; border-bottom: 1px solid var(--line-dark);
  color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.3s var(--ease);
}
.work-tab::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--gold-light);
  transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--ease); }
.work-tab:hover { background: rgba(255, 255, 255, 0.035); }
.work-tab:hover::before { transform: scaleY(0.45); }
.work-tab.is-active { background: linear-gradient(90deg, rgba(201, 168, 104, 0.13), rgba(255, 255, 255, 0.02) 70%); }
.work-tab.is-active::before { transform: scaleY(1); }
.work-tab:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
.work-tab > span { grid-column: 1; display: block; }
.wl-ind { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.wl-ind b { color: var(--gold-light); font-weight: 600; margin-right: 12px; }
.wl-name { font-family: var(--serif); font-size: 23px; line-height: 1.15; color: rgba(255, 255, 255, 0.74); margin-top: 3px; transition: color 0.25s ease; }
.work-tab:hover .wl-name, .work-tab.is-active .wl-name { color: var(--white); }
.wl-line { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.66); max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.45s var(--ease), opacity 0.35s ease, margin 0.35s ease; }
.work-tab.is-active .wl-line { max-height: 64px; opacity: 1; margin-top: 6px; }
.wl-arrow { grid-column: 2; grid-row: 1 / span 3; width: 16px; height: 16px; color: rgba(255, 255, 255, 0.4);
  transform: rotate(-45deg); transition: transform 0.3s var(--ease), color 0.3s ease; }
.work-tab:hover .wl-arrow, .work-tab.is-active .wl-arrow { color: var(--gold-light); transform: translateX(3px); }

/* the stage: a browser frame on an offset dashed plate, with a halftone corner */
.work-stage { position: relative; }
.browser-plate { position: relative; }
.browser-plate::before { content: ""; position: absolute; inset: 22px -18px -18px 22px; border: 1px dashed rgba(201, 168, 104, 0.4);
  border-radius: 20px; pointer-events: none; }
.work-stage::after { content: ""; position: absolute; left: -28px; top: -24px; width: 160px; height: 130px; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.24) 1.2px, transparent 1.7px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 75%); mask-image: linear-gradient(135deg, #000, transparent 75%); }
.browser { position: relative; z-index: 1; border-radius: 16px; overflow: hidden; background: #100C22;
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.85), 0 0 0 7px rgba(255, 255, 255, 0.03); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
  background: linear-gradient(180deg, #2A1F4F, #1C1538); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.browser-bar i:nth-child(1) { background: var(--gold-light); }
.browser-bar i:nth-child(2) { background: var(--violet); }
.browser-bar i:nth-child(3) { background: var(--teal); }
.browser-url { flex: 1; max-width: 340px; margin: 0 auto; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.07);
  font-size: 12px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.7); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.concept-tag { flex: none; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy); background: var(--gold-light); padding: 4px 9px; border-radius: 4px; }

/* before/after: the concept underneath, today's site clipped to the left of the divider */
.compare { --pos: 50%; position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: #0D0A1C; transition: opacity 0.22s ease; }
.compare.is-swapping { opacity: 0.2; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cmp-today { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--gold-light);
  box-shadow: 0 0 0 1px rgba(21, 16, 42, 0.25), 0 0 26px rgba(201, 168, 104, 0.55); pointer-events: none; }
.cmp-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.5px solid var(--gold-light); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6); transition: transform 0.2s var(--ease);
  background: rgba(21, 16, 42, 0.84) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A868' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px no-repeat; }
.compare:hover .cmp-handle::after { transform: translate(-50%, -50%) scale(1.07); }
.cmp-range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
.cmp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 1200px; }
.cmp-range::-moz-range-thumb { width: 48px; height: 1200px; border: 0; }
.cmp-range:focus-visible ~ .cmp-handle::after { outline: 2px solid var(--white); outline-offset: 3px; }
.cmp-label { position: absolute; bottom: 14px; z-index: 1; padding: 5px 10px; border-radius: 4px; pointer-events: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.cmp-label-l { left: 14px; background: rgba(21, 16, 42, 0.8); color: rgba(255, 255, 255, 0.86); }
.cmp-label-r { right: 14px; background: var(--gold-light); color: var(--navy); }

.stage-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 26px; }
.sf-count { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.5); }
.sf-count b { color: var(--gold-light); font-weight: 600; }
.sf-name { color: var(--white); font-size: 30px; margin: 6px 0 4px; }
.sf-sub { font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }
.sf-line { display: none; }
.sf-actions { display: flex; align-items: center; gap: 10px; }
.sf-nav { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04);
  color: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease; }
.sf-nav svg { width: 16px; height: 16px; display: block; }
.sf-nav[data-step="-1"] svg { transform: scaleX(-1); }
.sf-nav:hover { border-color: var(--gold-light); background: rgba(201, 168, 104, 0.12); }
.work-play { margin-left: 6px; }
.work-play svg { width: 14px; height: 14px; }
.work-play:hover svg { transform: scale(1.12); }
.work-note { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); max-width: 90ch; }

/* the 60-second preview, in a lightbox */
.work-dialog { padding: 0; border: 0; background: transparent; width: min(1080px, 94vw); max-width: none; max-height: 92vh; margin: auto; overflow: visible; color: var(--white); }
.work-dialog::backdrop { background: rgba(10, 7, 22, 0.84); backdrop-filter: blur(6px); }
.wd-frame { background: #100C22; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; overflow: hidden; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9); }
.wd-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 12px 10px 18px;
  background: linear-gradient(180deg, #2A1F4F, #1C1538); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.wd-title { font-size: 13px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.84); }
.wd-close { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent;
  color: var(--white); font-size: 22px; line-height: 1; cursor: pointer; }
.wd-close:hover { border-color: var(--gold-light); color: var(--gold-light); }
.work-dialog video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

@media (max-width: 980px) {
  .work-head, .work-body { grid-template-columns: 1fr; gap: 36px; }
  .work-stage { order: -1; }
  .browser-plate::before { inset: 14px -10px -12px 14px; }
  .work-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--line-dark); }
  .work-tab { border-right: 1px solid var(--line-dark); padding: 14px 14px 14px 18px; }
  .work-tab .wl-line, .work-tab .wl-arrow { display: none; }
  .wl-name { font-size: 19px; }
  .sf-line { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); max-width: 52ch; }
}
@media (max-width: 640px) {
  .wl-ind { font-size: 9.5px; letter-spacing: 0.13em; }
  .wl-ind b { margin-right: 8px; }
  .wl-name { font-size: 17px; }
  .stage-foot { flex-direction: column; align-items: stretch; }
  .work-play { flex: 1; justify-content: center; margin-left: 0; padding: 14px 16px; }
  .cmp-handle::after { width: 40px; height: 40px; background-size: 20px; }
  .cmp-label { bottom: 10px; font-size: 9.5px; padding: 4px 8px; }
  .concept-tag { display: none; }
  .work-stage::after { display: none; }
  .sm-hide { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .compare, .wl-line, .work-tab::before, .wl-arrow { transition: none; }
}

/* ---------- contact: the map moves under the form so the columns balance ---------- */
.contact-right { display: flex; flex-direction: column; }
.contact-right .map-card { margin-top: 30px; }
.map-card iframe { height: 420px; }
@media (max-width: 1100px) { .map-card iframe { height: 340px; } }
@media (max-width: 700px) { .map-card iframe { height: 280px; } }

/* ---------- ownership disclosure, shown only when switched on ---------- */
.ownership-note { flex-basis: 100%; margin-top: 12px; font-size: 12px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.42); }

/* ---------- form card matches the map card's shape ---------- */
.form-card { border-radius: 16px; overflow: hidden; }

/* ---------- keep decorative crowns inside their section ---------- */
.deco .crown-mark { --deco-max-shift: 18px; }

/* ---------- seven cards on a three-wide grid: centre the last one ---------- */
.plat-grid > .plat:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 1100px) { .plat-grid > .plat:last-child:nth-child(3n + 1) { grid-column: auto; } }

/* ---------- 2026-10-08: story order ---------- */
/* 01 Through a buyer's eyes: the seven places, numbered in the order a buyer meets them */
.buyer-path { list-style: none; padding: 0; margin: 0; }
.plat-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.plat-top .plat-mark { margin-bottom: 0; }
.plat-step { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); text-align: right; line-height: 1.3; }
.plat-step b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--violet); line-height: 1; margin-bottom: 4px; }
.section-head .watch { margin-top: 18px; color: var(--ink); border-bottom-color: var(--line-strong); }
.section-head .watch:hover { color: var(--teal-deep); border-bottom-color: var(--gold); }

/* 02 Leadership: the founder is introduced once, beside her letter */
.letter-aside { top: 104px; }
.letter-aside .spot-points { margin: 26px 0 22px; }
.letter-aside .aside-link { color: var(--ink); border-bottom-color: var(--line-strong); }
.letter-aside .aside-link:hover { color: var(--teal-deep); border-bottom-color: var(--gold); }
@media (max-height: 940px) { .letter-aside { position: static; } }
@media (max-width: 980px) { .letter-aside .spot-points, .letter-aside .aside-link { grid-column: 1 / -1; justify-self: start; } }

/* 04 Engagement: the clear line closes the offer, on the dark plate */
.commit-title { font-size: clamp(28px, 2.8vw, 38px); }
.engagement .commit-box { margin-top: 56px; border-color: var(--line-dark); }
.engagement .commit-l { background: rgba(255, 255, 255, 0.04); border-right-color: var(--line-dark); }
.engagement .commit-title { color: var(--white); }
.engagement .commit-title em { color: var(--gold-light); }
.engagement .commit-r p { color: rgba(255, 255, 255, 0.86); }
.engagement .chip { border-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.9); }
.engagement .chip svg { color: var(--teal); }
.engagement .chip-wob { border-color: var(--gold-light); }
@media (max-width: 980px) { .engagement .commit-l { border-bottom-color: var(--line-dark); } }

/* 05 The cadence: the after frame, every profile pointing back to the site */
.cadence { background: linear-gradient(180deg, var(--white) 0%, #FBFAFD 58%, var(--paper) 100%); }
.cadence .plat-figure { margin-top: 0; }
.cadence .exhibit-shot { margin-top: 0; }
.cadence .plat-note { margin: 30px auto 48px; max-width: 820px; }

/* 02 The cost of doing nothing: the invoice nobody sends, and the owner's own arithmetic */
.cost { background: linear-gradient(180deg, var(--paper) 0%, #FBF9F4 55%, var(--white) 100%); }
.ledger-rule { position: absolute; height: 150px; opacity: 0.12;
  background-image: repeating-linear-gradient(180deg, rgba(42, 30, 71, 0.9) 0 1px, transparent 1px 30px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.cost-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; }
.invoice { margin: 0; background: var(--white); border: 1px solid var(--line-strong); border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 70px -48px rgba(23, 18, 42, 0.55); position: relative; }
.invoice::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--violet), var(--teal), var(--gold-light)); }
.invoice .exhibit-head { color: var(--muted); border-bottom-color: var(--line); padding: 22px 28px 16px; }
.invoice .exhibit-head b { color: var(--gold); }
.ledger { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ledger caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ledger th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--paper); }
.ledger th:last-child, .ledger td.amt { text-align: right; white-space: nowrap; }
.ledger td { padding: 16px 28px; border-bottom: 1px dashed var(--line-strong); vertical-align: top; color: var(--body); }
.ledger td b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--ink); line-height: 1.25; margin-bottom: 3px; }
.ledger td span { display: block; max-width: 52ch; }
.ledger td.amt { font-family: var(--serif); font-size: 20px; color: var(--muted); padding-top: 18px; }
.ledger tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 18px; padding-bottom: 20px; font-family: var(--serif); font-size: 22px; color: var(--ink); font-weight: 500; }
.ledger tfoot td.amt { font-style: italic; color: var(--gold); font-size: 20px; white-space: normal; }
.ledger td.amt { width: 1%; }
@media (max-width: 640px) { .ledger tfoot td.amt { font-size: 17px; min-width: 112px; } }
.cost-calc { background: linear-gradient(160deg, #2C1F52 0%, var(--navy) 60%, #12392C 100%); color: var(--white); border-radius: 20px; padding: 34px 32px 32px;
  box-shadow: 0 40px 70px -44px rgba(23, 18, 42, 0.75); position: sticky; top: 110px; }
.cost-calc .kicker { color: var(--gold-light); display: block; margin-bottom: 12px; }
.cost-calc h3 { color: var(--white); font-size: 30px; margin-bottom: 22px; }
.calc-row { display: grid; grid-template-columns: 1fr 112px; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-dark); font-size: 14px; color: rgba(255, 255, 255, 0.88); line-height: 1.4; }
.calc-row { margin-bottom: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
.calc-row > span { font-size: 14px; color: rgba(255, 255, 255, 0.9); }
.calc-row small { display: block; margin-top: 3px; font-size: 11.5px; color: rgba(255, 255, 255, 0.5); }
.calc-row input { width: 100%; font: 500 16px var(--sans); color: var(--ink); background: var(--white); border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; text-align: right; }
.calc-row input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.calc-formula { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.calc-out div { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-dark); border-radius: 14px; padding: 14px 16px; }
.calc-out span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.calc-out b { display: block; margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); color: var(--gold-light); line-height: 1.1; }
.calc-note { margin-top: 14px; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.cost-calc.edited .calc-note { visibility: hidden; }
.calc-cta { margin-top: 20px; width: 100%; justify-content: center; background: var(--gold-light); color: var(--ink); }
.calc-cta:hover { background: var(--white); color: var(--ink); }
@media (max-width: 980px) {
  .cost-grid { grid-template-columns: 1fr; }
  .cost-calc { position: static; }
}
@media (max-width: 640px) {
  .ledger th, .ledger td { padding-left: 18px; padding-right: 18px; }
  .ledger td b { font-size: 17px; }
  .calc-row { grid-template-columns: 1fr 96px; }
  .cost-calc { padding: 28px 22px 24px; }
}

/* ---------- 1.1.1: section 01 as four, then the destination ----------
   Row one is how a buyer finds you (01-04); row two opens on the website, the place every
   other profile points back to, shown as a wide dark card, then the two record checks. */
@media (min-width: 1101px) {
  .buyer-path { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .buyer-path > .plat { padding: 26px 24px 24px; }
}
.buyer-path > .plat:last-child:nth-child(3n + 1) { grid-column: auto; }
.buyer-path > .plat-feature { grid-column: span 2; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #332459 0%, var(--navy) 62%, #16402D 100%);
  border-color: rgba(201, 168, 104, 0.55); box-shadow: 0 34px 60px -38px rgba(21, 16, 42, 0.85); }
.plat-feature h3 { color: var(--white); font-size: 30px; }
.plat-feature p { color: rgba(255, 255, 255, 0.82); font-size: 16px; max-width: 46ch; }
.plat-feature .plat-step { color: var(--gold-light); }
.plat-feature .plat-step b { color: var(--white); }
.plat-tag { align-self: flex-start; margin-top: auto; padding: 6px 11px; border: 1px solid rgba(201, 168, 104, 0.6);
  border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
.plat-feature p { margin-bottom: 18px; }
@media (max-width: 700px) { .buyer-path > .plat-feature { grid-column: auto; } .plat-feature h3 { font-size: 26px; } }

/* ================================================================
   1.2.0: The Weekly Crowning page (home.php), owner approved October 15, 2026.
   Grounds, top to bottom: dark hero / cream / dark / light / dark / cream / light / dark.
   ================================================================ */

/* ---------- themed background layers for this page ---------- */
/* a row of shopfronts: awnings, doors, a sign board and a street lamp */
.cr-street {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='200' viewBox='0 0 380 200'%3E%3Cg fill='none' stroke='%232A1E47' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M10 200V70h110v130M10 70l10-16h90l10 16'/%3E%3Cpath d='M22 98h86l-5 18H27zM36 98l-2 18M50 98v18M64 98v18M78 98v18M92 98l2 18'/%3E%3Cpath d='M52 200v-56h26v56M24 130h22v40H24zM84 130h22v40H84zM35 130v40M95 130v40'/%3E%3Cpath d='M140 200V40h100v160M156 86h68v20h-68zM176 200v-52h28v52M154 122h18v22h-18zM208 122h18v22h-18zM154 56h18v18h-18zM208 56h18v18h-18zM181 56h18v18h-18z'/%3E%3Cpath d='M252 200v-72M245 128h14M247 128l5-11 5 11'/%3E%3Cpath d='M270 200V92h100v108M280 120q40-26 80 0v10h-80zM306 200v-48h28v48M282 146h18v26h-18zM340 146h18v26h-18z'/%3E%3Cpath d='M0 200h380'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 380px 200px; background-repeat: repeat-x; background-position: left bottom; opacity: 0.15;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}
/* a faint calendar grid behind the weekly rhythm */
.cr-cal {
  background-image: linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 66px 56px;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
}
/* an award seal: scalloped rim, inner rings and ribbon tails */
.cr-laurel {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cg fill='none' stroke='%237C62BA' stroke-width='1.4' stroke-linejoin='round'%3E%3Ccircle cx='150' cy='92' r='70' stroke-dasharray='6 5'/%3E%3Ccircle cx='150' cy='92' r='56'/%3E%3Ccircle cx='150' cy='92' r='44' stroke-dasharray='2 4'/%3E%3Cpath d='M110 150l-18 62 26-14 14 22 14-56M190 150l18 62-26-14-14 22-14-56'/%3E%3Cpath d='M126 100l12-24 12 16 12-16 12 24z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.16;
}
/* map pins, scattered: nominations come in from every town */
.cr-pins {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='180' viewBox='0 0 220 180'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 58c0 13-14 27-14 27S18 71 18 58a14 14 0 0 1 28 0z'/%3E%3Ccircle cx='32' cy='58' r='5'/%3E%3Cpath d='M170 120c0 10-11 21-11 21s-11-11-11-21a11 11 0 0 1 22 0z'/%3E%3Ccircle cx='159' cy='120' r='4'/%3E%3Cpath d='M32 92c30 30 80 40 116 34' stroke-dasharray='3 6'/%3E%3Cpath d='M128 34l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 180px; opacity: 0.11;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
/* thank-you bunting strung across the top of the November section */
.cr-ribbon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'%3E%3Cg fill='none' stroke='%239A7726' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M0 14q120 40 240 0'/%3E%3Cpath d='M20 21l10 30 10-26M62 30l10 30 10-28M104 33l10 30 10-30M146 32l10 30 10-29M188 27l10 30 10-27'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 90px; background-repeat: repeat-x; opacity: 0.3;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent);
}

/* ---------- hero: the latest crown (dark) ---------- */
.cr-hero {
  color: var(--white); padding: 100px 0 112px;
  background:
    radial-gradient(760px 500px at 80% 20%, rgba(201, 168, 104, 0.20), transparent 62%),
    radial-gradient(700px 520px at 6% 100%, rgba(124, 98, 186, 0.26), transparent 60%),
    linear-gradient(164deg, #2A1D52 0%, var(--navy-2) 34%, var(--navy) 64%, #0D2B20 100%);
}
.cr-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
.cr-hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 72px; align-items: center; }
.cr-kicker { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.cr-kicker::before { content: ""; width: 34px; height: 1px; background: var(--gold-light); }
.cr-hero h1 { color: var(--white); font-size: clamp(38px, 4.7vw, 64px); line-height: 1.04; letter-spacing: -0.02em;
  text-shadow: 0.045em 0.05em 0 rgba(0, 0, 0, 0.22); }
.cr-hero h1 em { display: block; margin-top: 8px; color: var(--gold-light); font-weight: 300; }
.cr-hero .blog-lede { margin-top: 26px; }
.cr-hero .hero-ctas { margin-top: 38px; gap: 28px; }
.cr-hero .link-arrow, .cr-feature-more { min-height: 44px; }

.cr-feature { position: relative; margin-top: 36px; }
.cr-feature-plate { position: absolute; inset: 22px -18px -18px 22px; border: 1px dashed rgba(201, 168, 104, 0.45); border-radius: 24px; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.1px, transparent 1.6px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(315deg, #000, transparent 55%); mask-image: linear-gradient(315deg, #000, transparent 55%); }
.cr-feature-card { position: relative; z-index: 1; display: block; color: inherit; text-decoration: none; border-radius: 20px;
  background: linear-gradient(170deg, #2D2155 0%, #1A1434 60%, #132A24 100%); border: 1px solid rgba(201, 168, 104, 0.55);
  box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.85), 0 0 0 7px rgba(255, 255, 255, 0.03);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
a.cr-feature-card:hover { transform: translateY(-4px); box-shadow: 0 70px 110px -50px rgba(0, 0, 0, 0.9), 0 0 0 7px rgba(201, 168, 104, 0.08); }
.cr-feature-crown { position: absolute; z-index: 2; right: 34px; top: 0; width: 132px; transform: translateY(-76%);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45)); }
.cr-feature-shot { display: block; aspect-ratio: 1200 / 630; overflow: hidden; border-radius: 19px 19px 0 0; background: #100C22; }
.cr-feature-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
a.cr-feature-card:hover .cr-feature-shot img { transform: scale(1.03); }
.cr-feature-body { display: block; padding: 22px 28px 20px; }
.cr-feature-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  font-size: 13px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.66); }
.cr-feature-tag { display: inline-block; padding: 5px 10px; border-radius: 4px; background: var(--gold-light); color: var(--navy);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.cr-feature-name { display: block; margin-top: 14px; font-family: var(--serif); font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; color: var(--white); }
.cr-feature-sub { display: block; margin-top: 12px; font-size: 16px; color: rgba(255, 255, 255, 0.74); }
.cr-feature-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--gold-light); }
.cr-feature-more svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
a.cr-feature-card:hover .cr-feature-more svg { transform: translateX(4px); }
.cr-feature-empty .cr-feature-body { padding: 84px 32px 48px; text-align: center; }
.cr-feature-empty .cr-feature-crown { right: auto; left: 50%; transform: translate(-50%, -62%); }

/* ---------- 01 what goes unseen (cream) ---------- */
.cr-unseen { background: linear-gradient(180deg, #F2E9D7 0%, #F6F0E3 58%, #EFE5D1 100%); }
.cr-unseen-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.cr-unseen h2 { text-shadow: 0.045em 0.05em 0 rgba(124, 98, 186, 0.13); }
.cr-unseen h2 em { color: var(--teal-deep); }
.cr-unseen-lede { margin-top: 24px; font-size: 17px; line-height: 1.7; color: var(--body); max-width: 44ch; }
.cr-unseen-list { list-style: none; counter-reset: u; border-top: 1px solid var(--line-strong); }
.cr-unseen-list li { counter-increment: u; display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; padding: 24px 0;
  border-bottom: 1px dashed var(--line-strong); }
.cr-unseen-list li::before { content: counter(u, lower-roman) "."; grid-row: 1 / span 2; font-family: var(--serif); font-style: italic;
  font-size: 28px; line-height: 1.1; color: var(--gold); }
.cr-unseen-list b { grid-column: 2; font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.cr-unseen-list span { grid-column: 2; margin-top: 6px; font-size: 16px; line-height: 1.65; color: var(--body); max-width: 56ch; }
.cr-turn { position: relative; margin-top: 64px; display: flex; align-items: center; gap: 30px; padding: 32px 38px; border-radius: 20px; color: var(--white);
  background: radial-gradient(420px 200px at 12% 50%, rgba(201, 168, 104, 0.22), transparent 70%), linear-gradient(160deg, #2C1F52 0%, var(--navy) 60%, #12392C 100%);
  box-shadow: 0 40px 70px -44px rgba(23, 18, 42, 0.75); }
.cr-turn::after { content: ""; position: absolute; inset: 12px -12px -12px 12px; z-index: -1; border: 1px dashed rgba(154, 119, 38, 0.55); border-radius: 22px; }
.cr-turn .crown { width: 104px; flex: none; filter: drop-shadow(0 8px 18px rgba(201, 168, 104, 0.35)); }
.cr-turn p { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; font-weight: 300; color: rgba(255, 255, 255, 0.84); }
.cr-turn b { display: block; margin-bottom: 4px; font-size: 1.4em; font-style: italic; font-weight: 400; color: var(--gold-light); }

/* ---------- 02 how a crown happens (dark) ---------- */
.cr-how { color: var(--white);
  background: radial-gradient(760px 480px at 90% 10%, rgba(47, 121, 108, 0.24), transparent 62%),
    linear-gradient(170deg, #281C4E 0%, var(--navy) 58%, #112C22 100%); }
.cr-head-dark h2 { color: var(--white); text-shadow: 0.04em 0.045em 0 rgba(0, 0, 0, 0.2); }
.cr-head-dark h2 em { color: var(--gold-light); }
.cr-head-dark p { color: rgba(255, 255, 255, 0.74); }
.cr-steps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.cr-steps::before { content: ""; position: absolute; left: 40px; right: 12%; top: 40px; height: 1px;
  background: linear-gradient(90deg, var(--gold-light), var(--teal) 55%, var(--violet)); opacity: 0.7; }
.cr-step { position: relative; }
.cr-day { position: relative; z-index: 1; display: inline-flex; flex-direction: column; width: 80px; height: 80px; border-radius: 16px; overflow: hidden;
  background: #FFFDF8; border: 1px solid rgba(201, 168, 104, 0.7); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(201, 168, 104, 0.08);
  transition: transform 0.3s var(--ease); }
.cr-step:hover .cr-day { transform: translateY(-3px) rotate(-2deg); }
.cr-day i { display: block; padding: 5px 0 4px; font-style: normal; text-align: center; background: var(--gold-light); color: var(--navy);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.cr-day b { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 28px; color: var(--purple); }
.cr-step-when { display: block; margin-top: 24px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); }
.cr-step h3 { color: var(--white); font-size: 26px; line-height: 1.15; margin: 8px 0 10px; }
.cr-step p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.76); max-width: 30ch; }
.cr-promise { margin-top: 60px; display: flex; flex-wrap: wrap; gap: 12px; }
.cr-promise .chip { border-color: rgba(255, 255, 255, 0.26); color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.04); min-height: 44px; }
.cr-promise .chip svg { color: var(--teal); }

/* ---------- 03 the crowns (light) ---------- */
.cr-crowns { background: linear-gradient(180deg, #FFFFFF 0%, #FCFBFE 55%, #F7F5FB 100%); }
.cr-crowns .section-head h2 em { color: var(--teal-deep); }
.post-card-shot { position: relative; }
/* the crown number sits in the card body, not over the cover art, which carries its own mark */
.cr-num { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 5px 12px 5px 8px; border-radius: 999px;
  background: var(--navy); color: var(--gold-light); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 8px 16px -10px rgba(21, 16, 42, 0.6); }
.cr-num .crown { width: 26px; flex: none; }
.cr-card .post-card-date { display: block; }
.cr-card .post-card-excerpt { font-size: 15.5px; }
.cr-card .post-card-shot img { transition: transform 0.6s var(--ease); }
.cr-card:hover .post-card-shot img { transform: scale(1.03); }
.blog-nav .nav-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.blog-nav .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.cr-empty { max-width: 620px; padding: 40px 36px; border: 1px dashed rgba(124, 98, 186, 0.42); border-radius: 20px; background: rgba(255, 255, 255, 0.7); }
.cr-empty .crown { width: 80px; margin-bottom: 16px; }
.cr-empty h3 { font-size: 30px; margin-bottom: 8px; }
.cr-empty a { color: var(--teal-deep); text-decoration: underline; }

/* ---------- 04 nominate (dark) ---------- */
.cr-nominate { color: var(--white);
  background: radial-gradient(800px 480px at 100% 0%, rgba(201, 168, 104, 0.16), transparent 60%),
    radial-gradient(800px 480px at 0% 100%, rgba(47, 121, 108, 0.24), transparent 60%),
    linear-gradient(160deg, #271B4C 0%, var(--navy-2) 42%, #0F2A20 100%); }
.cr-nominate .kicker { display: block; margin-bottom: 18px; }
.cr-nominate h2 { color: var(--white); max-width: 15ch; text-shadow: 0.04em 0.045em 0 rgba(0, 0, 0, 0.18); }
.cr-nominate h2 em { color: var(--gold-light); }
.cr-fine { margin-top: 30px; padding-left: 16px; border-left: 2px solid var(--gold-light); font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); max-width: 46ch; }
.cr-form input, .cr-form textarea { font-size: 16px; }
.cr-form label .cr-why { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cr-form .btn { min-height: 48px; }

/* ---------- 05 November is for thank-yous (cream) ---------- */
.cr-thanks { background: linear-gradient(180deg, #F0E6D2 0%, #F5EEDF 55%, #EEE3CD 100%); padding-top: 150px; }
.cr-thanks .section-head h2 em { color: var(--gold); white-space: nowrap; }
.cr-series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cr-serie { position: relative; display: flex; flex-direction: column; color: inherit; text-decoration: none; overflow: hidden;
  padding: 32px 28px 26px; border-radius: 20px; background: linear-gradient(180deg, #FFFEFB 0%, #FFFBF2 100%);
  border: 1px solid rgba(154, 119, 38, 0.3); box-shadow: 0 26px 46px -34px rgba(42, 30, 71, 0.55);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); }
.cr-serie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--violet), var(--teal), var(--gold-light)); }
.cr-serie::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%;
  border: 1px dashed rgba(154, 119, 38, 0.35); box-shadow: 0 0 0 14px rgba(154, 119, 38, 0.05); pointer-events: none; }
.cr-serie:hover { transform: translateY(-4px); border-color: rgba(154, 119, 38, 0.6); box-shadow: 0 34px 56px -34px rgba(42, 30, 71, 0.6); }
.cr-serie-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.cr-serie-ico { width: 54px; height: 54px; flex: none; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(140deg, var(--violet) 0%, var(--teal) 55%, var(--green) 100%); box-shadow: 0 14px 24px -14px rgba(74, 56, 128, 0.65); }
.cr-serie-ico svg { width: 26px; height: 26px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cr-serie-when { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); text-align: right; line-height: 1.4; max-width: 16ch; }
.cr-serie h3 { font-size: 25px; font-weight: 500; line-height: 1.16; margin-bottom: 10px; }
.cr-serie p { font-size: 16px; line-height: 1.6; color: var(--body); margin-bottom: 16px; }
/* Each series says when its first one lands. The Monthly Creator Crown begins in
   October 2026, a month ahead of the other two, so the section can no longer say
   "starting November" for all three (owner, Oct. 15, 2026). Teal marks the one
   already under way, gold the two still to come. */
/* margin-top: auto drops the pill to a common line across the three cards, whose
   descriptions run to different lengths; the paragraph's own margin keeps a gap
   when a longer card leaves nothing for auto to take up. */
.cr-serie-start { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto;
  padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gold); background: rgba(154, 119, 38, 0.11);
  border: 1px solid rgba(154, 119, 38, 0.34); }
.cr-serie-start::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cr-serie-start.is-first { color: var(--teal-deep); background: rgba(16, 97, 83, 0.1); border-color: rgba(16, 97, 83, 0.32); }
.cr-serie .post-card-more { padding-top: 24px; }
.cr-serie:hover .post-card-more svg { transform: translateX(4px); }

/* ---------- 06 questions (light) ---------- */
.cr-faq { background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 100%); }
.cr-faq .section-head h2 em { color: var(--teal-deep); }

/* ---------- the ask and the sign-off (dark) ---------- */
.cr-ask { text-align: center; color: var(--white); padding: 124px 0 116px;
  background: radial-gradient(700px 420px at 50% 30%, rgba(201, 168, 104, 0.16), transparent 64%),
    linear-gradient(165deg, #2A1D52 0%, var(--navy-2) 40%, var(--navy) 70%, #0D2B20 100%); }
.cr-ask h2 { color: var(--white); font-size: clamp(34px, 4.4vw, 58px); max-width: 18ch; margin: 0 auto; text-shadow: 0.04em 0.045em 0 rgba(0, 0, 0, 0.22); }
.cr-ask h2 em { color: var(--gold-light); }
.cr-ask-sub { margin-top: 18px; font-size: 18px; color: rgba(255, 255, 255, 0.74); }
.cr-ask .btn { margin-top: 34px; }
.cr-signoff { margin: 76px auto 0; max-width: 860px; padding-top: 52px; border-top: 1px solid rgba(201, 168, 104, 0.32); }
.cr-signoff .crown { width: 116px; margin: 0 auto 10px; filter: drop-shadow(0 10px 22px rgba(201, 168, 104, 0.35)); }
.cr-signoff-line { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(30px, 4vw, 52px); line-height: 1.12; color: var(--gold-light);
  text-shadow: 0.04em 0.045em 0 rgba(0, 0, 0, 0.25); }
.cr-signoff-sub { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }

/* the "back to the Crowning" kicker on series archives */
.cr-back { display: inline-flex; align-items: center; min-height: 44px; }
.cr-back:hover { color: var(--white); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .cr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .cr-steps::before { display: none; }
}
@media (max-width: 980px) {
  .cr-hero { padding: 76px 0 88px; }
  .cr-hero-grid, .cr-unseen-grid { grid-template-columns: 1fr; }
  .cr-hero-grid { gap: 76px; }
  .cr-unseen-grid { gap: 36px; }
  .cr-feature { max-width: 620px; }
  .cr-series { grid-template-columns: 1fr; max-width: 620px; }
  .cr-thanks { padding-top: 120px; }
}
@media (max-width: 700px) {
  .cr-steps { grid-template-columns: 1fr; row-gap: 34px; }
  .cr-steps::before { display: block; left: 39px; right: auto; top: 40px; bottom: 40px; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--gold-light), var(--teal) 55%, var(--violet)); }
  .cr-step { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 20px; }
  .cr-day { grid-row: 1 / span 3; }
  .cr-step-when { margin-top: 2px; }
  .cr-step h3 { font-size: 24px; }
  /* keep the faint crown off the headline on a phone */
  .cr-how .crown-mark { top: auto !important; bottom: 2%; }
}
@media (max-width: 640px) {
  .cr-hero h1 { font-size: 38px; }
  .cr-hero .hero-ctas { gap: 18px; }
  .cr-hero .hero-ctas .btn { width: 100%; justify-content: center; }
  .cr-feature-plate { inset: 14px -8px -10px 14px; }
  .cr-feature-crown { width: 104px; right: 20px; }
  .cr-feature-body { padding: 20px 20px 16px; }
  .cr-unseen-list li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .cr-unseen-list li::before { font-size: 24px; }
  .cr-unseen-list b { font-size: 21px; }
  .cr-turn { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 24px; margin-top: 52px; }
  .cr-turn::after { inset: 8px -8px -8px 8px; }
  .cr-turn .crown { width: 80px; }
  .cr-promise .chip { width: 100%; }
  .cr-fine { font-size: 16px; }
  .cr-form .btn { width: 100%; justify-content: center; }
  .cr-serie-when { max-width: 13ch; }
  .cr-ask { padding: 92px 0 88px; }
  .cr-ask .btn { width: 100%; justify-content: center; }
  .cr-signoff .crown { width: 92px; }
  .cr-num { font-size: 10.5px; }
  .cr-card .post-card-excerpt, .cr-form .sub, .cr-form .form-error { font-size: 16px; }
  .cr-nominate .next-steps li span small { font-size: 16px; }
  .cr-form .form-privacy { font-size: 14px; }
  .cr-form .form-privacy a { display: inline-block; padding-block: 12px; }
  .cr-promise .chip { font-size: 13px; letter-spacing: 0.06em; line-height: 1.4; padding: 12px 16px; }
  .cr-feature-tag { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-feature-card, .cr-feature-shot img, .cr-serie, .cr-day, .cr-card .post-card-shot img { transition: none !important; }
  a.cr-feature-card:hover, .cr-serie:hover, .cr-step:hover .cr-day, a.cr-feature-card:hover .cr-feature-shot img, .cr-card:hover .post-card-shot img { transform: none !important; }
}