/* ===============================================================
   FARLEIGH POINT
   Art Deco inspired. Deep navy ground, brass metalwork, Didone
   display type. The logo gradient is the only live colour.

   1. Tokens
   2. Reset and base
   3. Layout helpers
   4. Deco ornament
   5. Masthead, nav, ticker
   6. Typography
   7. Buttons
   8. Hero
   9. Cards and panels
  10. Process diagram
  11. Work gallery
  12. SEO tips
  13. Forms
  14. Bands and footer
  15. 404
  16. Motion and responsive
   =============================================================== */

/* ---------------------------------------------------------------
   0. FONTS
   Self hosted. Nothing is requested from Google, which keeps the
   privacy policy honest and removes a third party round trip.

   Prata      a Didone display face, matching the high contrast
              letterforms of the Farleigh Point logo. One weight
              only, by design, so hierarchy comes from size and
              colour rather than from bold.
   Urbanist   a geometric sans in the Futura lineage, which is the
              correct genre for Art Deco, in four weights.
   --------------------------------------------------------------- */
@font-face {
  font-family: "Prata";
  src: url("/assets/fonts/prata-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
/* Tokens are named for the job they do, not the colour they hold, so
   the light theme below is the same set with different values. Only
   the palette changes between themes; every rule in this file reads
   from these names and nothing else. */
:root {
  /* surfaces, darkest to lightest */
  --bg:             #05090f;   /* the page ground                    */
  --bg-2:           #0a1322;   /* alternating section band           */
  --bg-3:           #0f1b2e;   /* the far end of that band's gradient*/
  --bg-foot:        #030609;   /* footer, a shade below the ground   */
  --surface:        #13203a;   /* panels and plates                  */
  --line:           #21324f;   /* hairlines and borders              */
  --bar:            rgba(5, 9, 15, 0.88);           /* sticky header */
  --glass:          linear-gradient(160deg, rgba(19, 32, 58, 0.78), rgba(10, 19, 34, 0.86));
  --field:          rgba(5, 9, 15, 0.6);            /* form inputs   */
  --wash:           radial-gradient(120% 70% at 50% -10%, rgba(59,126,240,0.10), transparent 60%),
                    radial-gradient(90% 60% at 90% 0%, rgba(123,63,228,0.08), transparent 55%);
  --hover:          rgba(198, 165, 104, 0.035);     /* row hover     */
  --ticker-ink:     rgba(232, 211, 160, 0.62);      /* nav ticker    */
  --shot:           linear-gradient(150deg, var(--surface), var(--bg)); /* image wells */

  /* the metal */
  --accent:         #c6a568;
  --accent-strong:  #e8d3a0;   /* brighter than --accent             */
  --accent-soft:    #8a7038;   /* quieter than --accent              */
  --accent-veil:    rgba(198, 165, 104, 0.18);
  --med-ink:        1;         /* medallion stroke multiplier        */

  /* type */
  --text:           #f2eee3;
  --text-soft:      rgba(242, 238, 227, 0.72);
  --text-faint:     rgba(242, 238, 227, 0.45);

  /* the logo gradient, the only live colour, unchanged in both themes */
  --spark-a:        #3b7ef0;
  --spark-b:        #7b3fe4;
  --spark:          linear-gradient(100deg, var(--spark-a), var(--spark-b));

  --font-display: "Prata", Georgia, "Times New Roman", serif;
  --font-ui: "Urbanist", "Avenir Next", "Century Gothic", system-ui, sans-serif;

  --shell: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --block: clamp(4rem, 9vw, 7.5rem);

  --step: 12px;               /* size of the Deco stepped corner */
  --hair: 1px solid var(--line);

  color-scheme: dark;
}

/* ---------------------------------------------------------------
   1b. LIGHT THEME: PARCHMENT AND BRONZE

   Not a white theme. White would throw away the Deco reference,
   which is printed and letterpressed rather than screen lit. The
   ground is warm oyster, the ink is the site's own navy inverted
   into type, and the brass darkens to a bronze that can carry small
   text at proper contrast on a pale ground. The blue to violet from
   the logo is untouched, so the one live colour stays constant
   across both themes.
   --------------------------------------------------------------- */
[data-theme="light"] {
  --bg:             #f5f1e6;
  --bg-2:           #efe9da;
  --bg-3:           #e8e0cd;
  --bg-foot:        #e4dcc8;
  --surface:        #fbf8f0;
  --line:           #dbd2bc;
  --bar:            rgba(245, 241, 230, 0.9);
  --glass:          linear-gradient(160deg, rgba(251, 248, 240, 0.86), rgba(240, 234, 220, 0.9));
  --field:          rgba(255, 253, 247, 0.75);
  --wash:           radial-gradient(120% 70% at 50% -10%, rgba(59,126,240,0.07), transparent 60%),
                    radial-gradient(90% 60% at 90% 0%, rgba(123,63,228,0.06), transparent 55%);
  --hover:          rgba(140, 109, 40, 0.05);
  --ticker-ink:     rgba(97, 73, 22, 0.82);
  --shot:           linear-gradient(150deg, #e9e1ce, #f1ecdf);

  --accent:         #7a5c1b;   /* dark enough to carry small text    */
  --accent-strong:  #614916;   /* on parchment, emphasis is darker   */
  --accent-soft:    #c8b68c;   /* and a quiet line is lighter        */
  --accent-veil:    rgba(122, 92, 27, 0.2);
  --med-ink:        1.5;       /* hairlines need more ink on paper   */

  --text:           #0c1526;
  --text-soft:      rgba(12, 21, 38, 0.74);
  --text-faint:     rgba(12, 21, 38, 0.62);

  color-scheme: light;
}

/* ---------------------------------------------------------------
   2. RESET AND BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-synthesis: none;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--wash);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(0.99rem, 0.95rem + 0.2vw, 1.05rem);
  line-height: 1.7;
  letter-spacing: 0.012em;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }

::selection { background: var(--accent); color: var(--bg); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--accent); color: var(--bg);
  padding: 0.7rem 1.4rem;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }

/* ---------------------------------------------------------------
   3. LAYOUT HELPERS
   --------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--block); position: relative; }
.section--tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--plate { background: linear-gradient(180deg, var(--bg-2), var(--bg-3)); }
.section--edge { border-top: 1px solid var(--line); }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.split--lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }

@media (min-width: 901px) {
  .split--sticky > *:first-child {
    position: sticky;
    top: calc(76px + 2.5rem);
  }
}

.stack > * + * { margin-top: 1rem; }
.measure { max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }

/* ---------------------------------------------------------------
   4. DECO ORNAMENT
   --------------------------------------------------------------- */

/* Eyebrow label with a leading brass hairline. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: clamp(1.75rem, 5vw, 3rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  flex: none;
}
.center .eyebrow, .eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: clamp(1.75rem, 5vw, 3rem);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  flex: none;
}

/* Double rule with a centred diamond. */
.deco-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.deco-rule > span:not(.deco-rule__gem) {
  flex: 1;
  height: 3px;
  border-top: 1px solid var(--accent-soft);
  border-bottom: 1px solid var(--accent-soft);
  opacity: 0.7;
}
.deco-rule__gem {
  width: 10px; height: 10px;
  flex: none;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--accent-soft);
}
.deco-rule--top { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

/* Sunburst fan, sits behind hero and band headings. */
.fan, .band__fan {
  position: absolute;
  inset-inline-start: 50%;
  top: -12%;
  width: min(900px, 120%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--accent-veil) 0deg 1.6deg,
    transparent 1.6deg 9deg
  );
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,0.85), transparent 72%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,0.85), transparent 72%);
  opacity: 0.55;
}

/* Chevron strip used as a section separator. */
.chevrons {
  height: 14px;
  width: 100%;
  background-image:
    linear-gradient(135deg, var(--accent-soft) 25%, transparent 25%),
    linear-gradient(225deg, var(--accent-soft) 25%, transparent 25%);
  background-size: 14px 14px;
  background-position: 0 0;
  opacity: 0.35;
}

/* Stepped corner frame. The Deco signature on every panel. */
.frame {
  position: relative;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  clip-path: polygon(
    var(--step) 0, 100% 0, 100% calc(100% - var(--step)),
    calc(100% - var(--step)) 100%, 0 100%, 0 var(--step)
  );
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid transparent;
  border-top-color: var(--accent-veil);
  border-left-color: var(--accent-veil);
  pointer-events: none;
  transition: border-color 0.25s ease;
}
.frame:hover { border-color: var(--accent-soft); transform: translateY(-3px); }
.frame:hover::after { border-top-color: var(--accent); border-left-color: var(--accent); }

/* ---------------------------------------------------------------
   5. MASTHEAD, NAV, TICKER
   --------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead__bar { border-bottom: 1px solid rgba(198,165,104,0.14); }
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  flex: none;
}
.brand__mark {
  width: 38px; height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(198,165,104,0.28));
  transition: filter 0.3s ease;
}
.brand:hover .brand__mark { filter: drop-shadow(0 0 16px rgba(232,211,160,0.45)); }
[data-theme="light"] .brand__mark,
[data-theme="light"] .foot__col--brand img { filter: brightness(0.68) saturate(1.2); }
[data-theme="light"] .brand:hover .brand__mark { filter: brightness(0.6) saturate(1.25); }
.brand__words { display: grid; gap: 2px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}
.brand__rule {
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 85%);
}
.brand__tag {
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: 0.75rem; }
.nav__list { display: flex; align-items: center; gap: 0.2rem; list-style: none; }

/* Nav hover: hairline box draws in, brass underline wipes from the
   left, label letterspacing opens slightly. */
.nav__list a {
  position: relative;
  display: block;
  padding: 0.62rem 0.95rem;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.nav__list a .nav__label {
  display: inline-block;
  transition: letter-spacing 0.22s ease;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.42rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__list a:hover,
.nav__list a:focus-visible {
  color: var(--text);
  border-color: rgba(198,165,104,0.35);
}
.nav__list a:hover .nav__label { letter-spacing: 0.26em; }
.nav__list a:hover::after,
.nav__list a:focus-visible::after { transform: scaleX(1); }

.nav__list a[aria-current="page"] {
  color: var(--accent-strong);
  border-color: var(--accent-soft);
  background: rgba(198,165,104,0.08);
}
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta {
  position: relative;
  overflow: hidden;
  flex: none;
  padding: 0.62rem 1.15rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-strong);
  border: 1px solid var(--accent-soft);
  background: transparent;
  transition: color 0.28s ease, border-color 0.28s ease;
}
.nav__cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--spark);
  transform: translateY(101%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.nav__cta:hover, .nav__cta:focus-visible { color: #fff; border-color: transparent; }
.nav__cta:hover::before, .nav__cta:focus-visible::before { transform: translateY(0); }

.nav__mobile-cta { display: none; }

.nav__toggle {
  display: none;
  width: 44px; height: 40px;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  position: absolute;
  left: 50%; width: 18px; height: 1px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav__toggle-bars { top: 50%; transform: translate(-50%, -50%); }
.nav__toggle-bars::before { content: ""; top: -6px; }
.nav__toggle-bars::after { content: ""; top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* Slim passively scrolling bar.

   It folds away once the reader is past the top of the page, so the
   masthead is just the nav from then on. The fold is a grid row
   going from 1fr to 0fr, which animates the real height without
   anyone having to hardcode what that height is. The progress
   hairline is not inside this, it is pinned to the bottom edge of
   the masthead, so it stays put and simply rides up as the bar
   closes. */
.ticker {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(198,165,104,0.10), rgba(123,63,228,0.10), rgba(59,126,240,0.10));
  border-top: 1px solid rgba(198,165,104,0.16);
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease,
              border-top-color 0.34s ease;
}
.ticker > * { min-height: 0; }

.masthead.is-tight .ticker {
  grid-template-rows: 0fr;
  opacity: 0;
  border-top-color: transparent;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-slide 58s linear infinite;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0;
  margin-right: 2.75rem;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ticker-ink);
  white-space: nowrap;
}
.ticker__item::before {
  content: "";
  width: 5px; height: 5px;
  margin-right: 1.1rem;
  background: var(--accent);
  transform: rotate(45deg);
  opacity: 0.8;
}
@keyframes ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.masthead:hover .ticker__track { animation-play-state: paused; }

/* ---------------------------------------------------------------
   6. TYPOGRAPHY
   --------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.5rem + 4.1vw, 4.25rem); }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.3vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-soft);
  font-weight: 300;
}

.dim { color: var(--text-soft); }
.small { font-size: 0.9rem; }

.gilt {
  background: linear-gradient(100deg, var(--accent-strong), var(--accent), var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.spark-text {
  background: var(--spark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head { max-width: 66ch; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-head.center { text-align: center; }

a.inline {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
a.inline:hover { color: #fff; border-bottom-color: var(--accent-strong); }

/* ---------------------------------------------------------------
   7. BUTTONS
   --------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.center .btn-row, .btn-row--center { justify-content: center; }

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.8rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent-soft);
  color: var(--accent-strong);
  background: transparent;
  cursor: pointer;
  transition: color 0.28s ease, border-color 0.28s ease, letter-spacing 0.28s ease;
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--spark);
  transform: translateY(101%);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn::after {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover, .btn:focus-visible {
  color: #fff;
  border-color: transparent;
  letter-spacing: 0.26em;
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover::after, .btn:focus-visible::after { transform: rotate(225deg); }

.btn--solid {
  color: var(--bg);
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  border-color: var(--accent-strong);
}
.btn--ghost { color: var(--text-soft); border-color: var(--line); }
.btn--ghost:hover { color: #fff; }
.btn--wide { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------
   8. HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6.5vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}
.hero__inner { position: relative; z-index: 1; }
.hero--split .hero__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
}
.hero h1 { margin-bottom: 1.25rem; }
.hero .lede { max-width: 54ch; }
/* Keeps the copy clear of the medallion's outer ring. */
.hero--signature .lede { max-width: 43ch; }

/* --- under development band ---------------------------------------
   Sits over the hero of a page that is still being worked on. The
   hero already clips its overflow, so the band only has to be wider
   than the box and tilted to read as corner to corner. The angle is
   steeper on a narrow screen because a portrait box has a much
   steeper diagonal. Colours come from the tokens, so it holds up in
   both themes. */
.hero--wip { border-bottom-width: 0; }
.hero--wip::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(
    135deg,
    var(--accent-soft) 0 10px,
    transparent 10px 20px
  );
  opacity: 0.75;
  z-index: 4;
}

.wip {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.wip__band {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170%;
  margin: 0;
  padding-block: clamp(0.55rem, 1.3vw, 1rem);
  transform: translate(-50%, -50%) rotate(-18deg);
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  background:
    repeating-linear-gradient(
      135deg,
      var(--accent-veil) 0 16px,
      transparent 16px 32px
    ),
    var(--bar);
  border-block: 1px solid var(--accent-soft);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.wip__text {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.65rem + 1.5vw, 2rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-strong);
  white-space: nowrap;
}

/* Stepped ziggurat plate used as the hero visual. */
.plate {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--glass);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid var(--line);
  clip-path: polygon(
    24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px),
    calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px
  );
}
.plate::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--accent-veil);
  clip-path: polygon(
    18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px),
    calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px
  );
  pointer-events: none;
}
.plate__list { list-style: none; display: grid; gap: 0.9rem; position: relative; }
.plate__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(33,50,79,0.7);
}
.plate__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.plate__num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.plate__label { font-size: 0.95rem; }
.plate__label strong { font-weight: 500; display: block; }
.plate__label span { color: var(--text-faint); font-size: 0.85rem; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.stat__figure {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1;
  color: var(--accent-strong);
}
.stat__label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------------------------------------------------------------
   9. CARDS AND PANELS
   --------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.card__index {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--accent);
}
.card h3 { margin: 0; }
.card p { color: var(--text-soft); font-size: 0.97rem; }
.card__more {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.card__more::after {
  content: "";
  width: 5px; height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.card:hover .card__more::after { transform: rotate(45deg) translate(3px, -3px); }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  color: var(--text-faint);
}

.tick-list { list-style: none; display: grid; gap: 0.75rem; }
.tick-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  font-size: 0.97rem;
  color: var(--text-soft);
}
.tick-list li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 0.62em;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}

.note {
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border-left: 2px solid var(--accent-soft);
  background: rgba(198,165,104,0.05);
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* ---------------------------------------------------------------
   10. PROCESS DIAGRAM
   --------------------------------------------------------------- */
.process {
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: step;
  position: relative;
}
.process__item {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.4rem, 3vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
}
.process__item:first-child { border-top: 1px solid var(--line); }
.process__marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border: 1px solid var(--accent-soft);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--accent-strong);
  background: var(--bg-2);
  transform: rotate(45deg);
}
.process__marker span { transform: rotate(-45deg); }
.process__item::after {
  content: "";
  position: absolute;
  left: 23px;
  top: calc(clamp(1.4rem, 3vw, 1.9rem) + 46px);
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  opacity: 0.5;
}
.process__item:last-child::after { display: none; }
.process__body h3 { margin-bottom: 0.4rem; }
.process__body p { color: var(--text-soft); font-size: 0.97rem; margin: 0; }
.process__meta {
  display: inline-block;
  margin-top: 0.65rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------------------------------------------------------------
   11. WORK GALLERY
   --------------------------------------------------------------- */
.work { display: grid; gap: clamp(1.5rem, 3vw, 2rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work__card { display: flex; flex-direction: column; overflow: hidden; }
.work__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--shot);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.work__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work__placeholder {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  background-image: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--accent-veil) 0deg 1.2deg,
    transparent 1.2deg 10deg
  );
}
.work__initial {
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  width: 88px; height: 88px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  transform: rotate(45deg);
}
.work__initial span { transform: rotate(-45deg); }
.work__body { padding: clamp(1.25rem, 2.5vw, 1.7rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.work__sector {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.work__body h3 { margin: 0; font-size: 1.25rem; }
.work__body p { font-size: 0.93rem; color: var(--text-soft); }
.work__foot {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.work__status { color: var(--text-faint); }
.work__link { color: var(--accent-strong); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.work__link:hover { color: #fff; }

/* ---------------------------------------------------------------
   12. SEO TIPS
   --------------------------------------------------------------- */
.tips { display: grid; gap: 0; border-top: 1px solid var(--line); }
.tip { border-bottom: 1px solid var(--line); }
.tip > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  align-items: center;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.tip > summary::-webkit-details-marker { display: none; }
.tip > summary:hover { color: var(--accent-strong); }
.tip__num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  min-width: 2.2ch;
}
.tip__title { font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); }
.tip__sign {
  position: relative;
  width: 16px; height: 16px;
  flex: none;
}
.tip__sign::before, .tip__sign::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.tip__sign::before { top: 50%; left: 0; width: 16px; height: 1px; transform: translateY(-50%); }
.tip__sign::after { left: 50%; top: 0; width: 1px; height: 16px; transform: translateX(-50%); }
.tip[open] .tip__sign::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.tip__panel {
  padding: 0 0 1.5rem clamp(0, 2vw, 3.8rem);
  max-width: 78ch;
}
.tip__panel p { color: var(--text-soft); font-size: 0.97rem; }
/* ---------------------------------------------------------------
   13. FORMS
   --------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color 0.22s ease, background 0.22s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(242,238,227,0.28); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(198,165,104,0.05);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form__consent { font-size: 0.82rem; color: var(--text-faint); }
.honeypot { position: absolute; left: -9999px; opacity: 0; }

/* ---------------------------------------------------------------
   14. BANDS AND FOOTER
   --------------------------------------------------------------- */
.band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  text-align: center;
}
.band__inner { position: relative; z-index: 1; }
.band__inner > .eyebrow { justify-content: center; }
.band__head { margin-bottom: 0.9rem; }
.band__body { max-width: 58ch; margin-inline: auto; color: var(--text-soft); }
.band .btn-row { justify-content: center; }

.foot {
  padding-top: clamp(3rem, 7vw, 4.5rem);
  background: linear-gradient(180deg, var(--bg), var(--bg-foot));
  border-top: 1px solid var(--line);
}
.foot__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
}
.foot__col--brand img { margin-bottom: 1.1rem; }
.foot__blurb { font-size: 0.9rem; color: var(--text-faint); max-width: 34ch; }
.foot__area { font-size: 0.9rem; color: var(--text-soft); max-width: 34ch; }
.foot__head {
  font-family: var(--font-ui);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.foot__links { list-style: none; display: grid; gap: 0.6rem; }
.foot__links a {
  font-size: 0.9rem;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.foot__links a:hover { color: var(--accent-strong); padding-left: 5px; }
.foot__reply { margin-top: 1rem; font-size: 0.8rem; color: var(--text-faint); }

.foot__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--text-faint);
}
.foot__base p { margin: 0; }

/* ---------------------------------------------------------------
   15. 404
   --------------------------------------------------------------- */
.lost {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--block);
  position: relative;
  overflow: hidden;
}
.lost__inner { position: relative; z-index: 1; }
.lost__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 14vw, 12rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------
   16. MOTION AND RESPONSIVE
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  .ticker { transition: none; }
  .wip__band { backdrop-filter: none; -webkit-backdrop-filter: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 1000px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .brand__tag { display: none; }
  .nav > .nav__cta { display: none; }
  .nav__mobile-cta { display: block; margin-top: 1.1rem; }
  .nav__list .nav__mobile-cta a.nav__cta {
    display: flex;
    justify-content: center;
    border: 1px solid var(--accent-soft);
    padding: 0.9rem 1.15rem;
    color: var(--accent-strong);
  }
  .nav__list .nav__mobile-cta a.nav__cta::after { display: none; }
  .nav__list .nav__mobile-cta a.nav__cta:hover { letter-spacing: 0.2em; }
  .nav__toggle { display: block; }
  .nav__list {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--accent-soft);
    box-shadow: 0 24px 40px rgba(0,0,0,0.55);
    padding: 0.5rem var(--gutter) 1.25rem;
    display: none;
  }
  .nav__list.is-open { display: flex; }
  .nav__list a { padding: 0.95rem 0.25rem; border-color: transparent transparent rgba(33,50,79,0.8); }
  .nav__list a::after { left: 0.25rem; right: auto; width: 30px; }
  .hero--split .hero__inner { grid-template-columns: minmax(0, 1fr); }
  /* A portrait hero has a far steeper diagonal, so the band follows. */
  .wip__band { transform: translate(-50%, -50%) rotate(-38deg); width: 210%; }
  .split, .split--lead { grid-template-columns: minmax(0, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .work { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .process__item { grid-template-columns: 40px minmax(0, 1fr); }
  .process__marker { width: 34px; height: 34px; font-size: 0.75rem; }
  .process__item::after { left: 17px; top: calc(clamp(1.4rem, 3vw, 1.9rem) + 34px); }
  .tip > summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; }
  .tip__panel { padding-left: 0; }
  .btn { width: 100%; justify-content: center; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
}

/* ---------------------------------------------------------------
   17. LEGAL PAGES
   --------------------------------------------------------------- */
.legal { max-width: 74ch; }
.legal h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h3 { margin-top: 1.75rem; font-size: 1.1rem; }
.legal p, .legal li { color: var(--text-soft); }
.legal ul { list-style: none; display: grid; gap: 0.6rem; margin: 1rem 0; }
.legal ul li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.legal ul li::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 0.65em;
  background: var(--accent-soft);
  transform: rotate(45deg);
}
.legal__updated {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}

/* ---------------------------------------------------------------
   18. MOTION
   Elements that Motion drives. Everything here is written so the
   page is correct and complete before any script runs: the .js
   class is only added by main.js once it knows it can animate,
   and every hidden starting state is scoped behind it.
   --------------------------------------------------------------- */

/* --- reveal on scroll ---------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

/* --- scroll progress hairline under the masthead -------------- */
.progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-strong) 60%, var(--spark-b));
  pointer-events: none;
  z-index: 2;
}

/* --- nav underline, now a real element so JS can drive it ----- */
.nav__rule {
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.42rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.js .nav__list a::after { display: none; }
.nav__list a[aria-current="page"] .nav__rule { transform: scaleX(1); }

/* --- button fill, injected by JS so the CSS wipe stays the
       fallback for anyone without scripts ---------------------- */
.btn__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--spark);
  transform: translateY(101%);
  pointer-events: none;
}
.btn.has-fill::before, .nav__cta.has-fill::before { display: none; }
.btn--solid .btn__fill { background: linear-gradient(100deg, #2a6ad8, var(--spark-b)); }

/* --- process timeline, drawn in step with the scroll ---------- */
.process { position: relative; }
.js .process__item::after { display: none; }
.process__track {
  position: absolute;
  list-style: none;
  left: 23px;
  top: 46px;
  bottom: 46px;
  width: 1px;
  background: rgba(198, 165, 104, 0.16);
  pointer-events: none;
}
.process__track span {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent), var(--accent-soft));
  transform: scaleY(0);
  transform-origin: top center;
}
.process__marker { transition: box-shadow 0.4s ease, border-color 0.4s ease; }
.process__item.is-reached .process__marker {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(198,165,104,0.25), 0 0 22px rgba(198,165,104,0.22);
}

/* --- the medallion ------------------------------------------- */

/* The stage is the positioning context. The medallion centres on it
   and the plate sits inside it, so the two share a centre point at
   every screen size with nothing to keep in sync by hand. */
.hero__stage { position: relative; }
.hero__stage .plate {
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin-inline: auto;
}

.med {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(700px, 100vw);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Strokes are measured in screen pixels rather than user units, so
   they stay crisp instead of thinning out as the SVG scales up. */
.med line, .med circle, .med path {
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.med__ray {
  stroke: var(--accent);
  stroke-width: 0.8;
  opacity: calc(0.34 * var(--med-ink));
}
.med__ray--major { stroke-width: 1.25; opacity: calc(0.52 * var(--med-ink)); }
.med__ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: calc(0.3 * var(--med-ink));
}
.med__ring--faint { opacity: calc(0.18 * var(--med-ink)); }
.med__ring--inner { stroke-width: 1.25; opacity: calc(0.46 * var(--med-ink)); }
.med__frame {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: calc(0.38 * var(--med-ink));
}
.med__frame--big { opacity: calc(0.24 * var(--med-ink)); }
.med__core-square {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  opacity: calc(0.5 * var(--med-ink));
}
.med__core-diamond {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 1.5;
  opacity: calc(0.66 * var(--med-ink));
}
.med__core-dot { fill: var(--accent-strong); opacity: 0.8; }
.med__core { transform-box: view-box; transform-origin: 300px 300px; }
.med__spin { transform-box: view-box; transform-origin: 300px 300px; }

/* The two long rules that frame the hero.

   They sit at a fixed inset from the hero's own top and bottom edges,
   which is inside its padding band, so they cannot run through text at
   any width no matter how the copy wraps. They also clear the medallion
   above and below rather than crossing it.

   --focus is where the rule is brightest and where it spreads from.
   main.js sets it to the medallion's centre; the default here is close
   enough for a page with no scripting. */
.hero__rules { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__rule {
  --focus: 70%;
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: var(--focus) center;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(198, 165, 104, 0.16) calc(var(--focus) * 0.42),
    rgba(198, 165, 104, 0.58) var(--focus),
    rgba(198, 165, 104, 0.16) calc(var(--focus) + (100% - var(--focus)) * 0.58),
    transparent 100%
  );
}
.hero__rule--top { top: 2.5rem; }
.hero__rule--bottom { bottom: 2.5rem; }

/* The plate arrives once the medallion has finished assembling. */
.js [data-hero-plate] { opacity: 0; }

@media (max-width: 900px) {
  /* A circle cannot enclose a tall card on a narrow screen, so on
     phones the medallion stops being centred on the plate and sits
     behind the headline instead, where it has room to read. */
  .hero__stage { position: static; }
  .hero--signature .hero__inner { position: relative; }
  .hero__stage .plate { max-width: none; }
  .med {
    top: 25%;
    width: min(560px, 132vw);
    opacity: 0.34;
  }
  .hero__rule { --focus: 50%; }
  .hero__rule--top { top: 1.5rem; }
  .hero__rule--bottom { bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-hero-plate] { opacity: 1; }
  .hero__rule { transform: scaleX(1); }
  .progress { transform: scaleX(0); }
  .nav__rule { transition: none; }
  .process__track span { transform: scaleY(1); }
}

/* ===============================================================
   19. EDITORIAL COMPONENTS

   These replace the card grids that used to carry most of the
   content. A page made of identical bordered boxes, each with a
   number, a heading and a paragraph of roughly the same length,
   is the house style of every generated website on the internet,
   and it also wastes space: uniform card heights leave a hole
   under every item shorter than the longest one.

   Boxes are now reserved for things that genuinely are objects on
   the page: the hero plate, the audit panel, the forms. Content
   sections are set as ruled typography instead, which is how a
   printed schedule or a contents page would do it.
   =============================================================== */

/* --- ruled schedule, for a list of what is included ----------- */
.schedule {
  list-style: none;
  border-top: 1px solid var(--line);
}
.schedule__row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(0.9rem, 2.5vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.4rem, 3vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease;
}
.schedule__row:hover { background: var(--hover); }
.schedule__num {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  transition: color 0.3s ease;
}
.schedule__row:hover .schedule__num { color: var(--accent-strong); }
.schedule__title {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
}
.schedule__body {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* --- ruled columns, for two or three parallel points ---------- */
.cols {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols__item {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.75rem, 3vw, 2.4rem) clamp(1.25rem, 3vw, 2.4rem);
  border-left: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease;
}
.cols__item:first-child { border-left: 0; padding-left: 0; }
.cols__item:last-child { padding-right: 0; }
.cols__item:hover { background: var(--hover); }
.cols__num {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.cols__item h3 { margin: 0; }
.cols__item p { color: var(--text-soft); font-size: 0.96rem; margin: 0; }
.cols__meta {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.cols__item .card__more { margin-top: 0.9rem; }

/* --- the same columns, but as real boxes ---------------------------
   Used on the home page services pair. The ruled version above is
   still what the three column blocks use, so this is a variant
   rather than a change to the base.

   The hover is driven from main.js with Motion rather than from a
   CSS transition, so a pointer that leaves halfway through turns the
   card round from wherever it had got to instead of restarting. The
   brass edge is its own element so it can be faded independently of
   the resting border, and so the colour comes from a token and stays
   right in both themes. */
.cols--cards {
  border-top: 0;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.cols--cards .cols__item {
  position: relative;
  isolation: isolate;
  padding: clamp(1.9rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--glass);
  clip-path: polygon(
    var(--step) 0, 100% 0, 100% calc(100% - var(--step)),
    calc(100% - var(--step)) 100%, 0 100%, 0 var(--step)
  );
  transition: none;
  will-change: transform;
}
.cols--cards .cols__item:first-child,
.cols--cards .cols__item:last-child {
  padding-inline: clamp(1.5rem, 3vw, 2.4rem);
}
.cols--cards .cols__item:hover { background: var(--glass); }

.cols__edge {
  position: absolute;
  /* minus one, so the lit edge lands exactly on the resting border
     rather than a pixel inside it and doubling the line */
  inset: -1px;
  z-index: -1;
  border: 1px solid var(--accent-soft);
  background: var(--hover);
  opacity: 0;
  pointer-events: none;
  clip-path: inherit;
}

/* The centred head, asked for on the services pair only. */
.cols--cards .cols__item h3 { text-align: center; }

/* No scripting means no Motion, so the plain css hover stands in. */
:root:not(.js) .cols--cards .cols__item {
  transition: border-color 0.3s ease, background 0.3s ease;
}
:root:not(.js) .cols--cards .cols__item:hover {
  border-color: var(--accent-soft);
  background: var(--hover);
}

/* --- one tip set large, the rest as an index ------------------ */
.tips-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
}
.tips-lead__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem);
  line-height: 0.9;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.tips-lead__main h3 {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  margin-bottom: 0.9rem;
}
.tips-lead__main p { color: var(--text-soft); }

.tips-index { list-style: none; display: grid; gap: 0; align-content: start; }
.tips-index li { border-bottom: 1px solid var(--line); }
.tips-index li:first-child { border-top: 1px solid var(--line); }
.tips-index a {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.8rem 0;
  text-decoration: none;
  color: var(--text-soft);
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.tips-index a:hover { color: var(--accent-strong); padding-left: 6px; }
.tips-index__num {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.tips-index__title { font-size: 0.95rem; }
.tips-index__go {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tips-index a:hover .tips-index__go,
.tips-index a:focus-visible .tips-index__go { opacity: 1; }

/* --- work: one lead entry, then ruled rows -------------------- */
.work-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.work-lead__shot {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--shot);
  border: 1px solid var(--line);
  clip-path: polygon(
    var(--step) 0, 100% 0, 100% calc(100% - var(--step)),
    calc(100% - var(--step)) 100%, 0 100%, 0 var(--step)
  );
}
.work-lead__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work-lead__body h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); margin-bottom: 0.6rem; }
.work-lead__body p { color: var(--text-soft); }

.work-index { list-style: none; border-top: 1px solid var(--line); }
.work-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 13rem) minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease;
}
.work-row:hover { background: var(--hover); }
.work-row__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--shot);
  border: 1px solid var(--line);
}
.work-row__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work-row__name { margin: 0; font-size: 1.1rem; }
.work-row__sector {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.work-row p { margin: 0; font-size: 0.9rem; color: var(--text-soft); }
.work-row__end {
  display: grid;
  gap: 0.35rem;
  justify-items: end;
  text-align: right;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.work-row__end span { color: var(--text-faint); }
.work-row__end a { color: var(--accent-strong); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.work-row__end a:hover { color: #fff; }

/* Deco plate fallback, shared by the lead and the rows. */
.plate-fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-image: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--accent-veil) 0deg 1.2deg,
    transparent 1.2deg 10deg
  );
}
.plate-fill span {
  font-family: var(--font-display);
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  background: var(--bg-2);
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  width: 2.2em; height: 2.2em;
  font-size: clamp(1rem, 0.5rem + 1.6vw, 2.6rem);
}
.plate-fill span i { font-style: normal; transform: rotate(-45deg); }
.work-row__shot .plate-fill span { font-size: 0.95rem; }

/* Inline capability list, replacing the pill row. */
.inline-list {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (max-width: 900px) {
  .schedule__row { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .schedule__body { grid-column: 2; }
  .cols--2, .cols--3 { grid-template-columns: minmax(0, 1fr); }
  .cols__item { border-left: 0; border-top: 1px solid var(--line); padding-inline: 0; }
  .cols__item:first-child { border-top: 0; }
  .cols--cards .cols__item { border: 1px solid var(--line); padding-inline: clamp(1.25rem, 5vw, 2rem); }
  .tips-lead { grid-template-columns: minmax(0, 1fr); }
  .work-lead { grid-template-columns: minmax(0, 1fr); }
  .work-row { grid-template-columns: 72px minmax(0, 1fr); }
  .work-row p { grid-column: 2; }
  .work-row__end { grid-column: 2; justify-items: start; text-align: left; }
}

/* ===============================================================
   20. EDGE GLOW

   A rebuild of the React Bits BorderGlow effect in plain CSS and
   Motion, because this site has no React and is not getting any.

   What was kept is the idea worth keeping: the light is not a
   uniform border that switches on, it is a patch of edge nearest
   the cursor, with its strength set by how close to the edge the
   cursor is. Move along one side and the light travels with you;
   cut across the middle and it fades out.

   The original positions that patch with a conic gradient keyed to
   the angle from the panel's centre. That is wrong near a corner,
   because a fixed angular span covers far more perimeter there than
   it does at the middle of a side, so aiming at one corner lights
   both adjoining edges end to end. Here the mask is a radial spot
   at the cursor's actual position instead, so the lit length is the
   same wherever it sits, and --spot sets it in pixels.

   What was changed: the original ships a purple, pink and cyan
   mesh gradient on a rounded rectangle, which is the look this
   site spent a redesign getting away from. Here it is brass on the
   Deco stepped silhouette, at roughly a third of the intensity,
   with the logo's violet only as a hint at the far end of the
   hairline.

   The glow has to sit on a wrapper rather than on the panel
   itself: .frame carries a clip-path, and a clip-path also clips
   its own pseudo elements, so nothing drawn on .frame can extend
   past its edge.
   =============================================================== */
.eglow {
  --edge: 0;              /* 0 at the centre, 100 at the boundary   */
  --mx: 50%;              /* cursor position within the panel       */
  --my: 50%;
  --sens: 24;             /* proximity below this shows nothing     */
  --spot: 150px;          /* how much of the edge is lit at once    */
  --bloom: 22px;          /* how far the soft glow reaches out      */
  position: relative;
  isolation: isolate;
}

.eglow::before,
.eglow::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: polygon(
    var(--step) 0, 100% 0, 100% calc(100% - var(--step)),
    calc(100% - var(--step)) 100%, 0 100%, 0 var(--step)
  );
  /* A spot centred on the cursor, not an angular wedge from the
     middle of the panel. A wedge is wrong near a corner: the same
     angular span covers a much greater length of the perimeter
     there, so pointing at one corner lit both adjoining sides end
     to end. A spot lights the same amount of edge wherever it is. */
  -webkit-mask-image: radial-gradient(
    circle var(--spot) at var(--mx) var(--my),
    #000 0%, #000 22%, transparent 100%
  );
  mask-image: radial-gradient(
    circle var(--spot) at var(--mx) var(--my),
    #000 0%, #000 22%, transparent 100%
  );
}

/* the hairline itself */
.eglow::before {
  inset: -1px;
  z-index: -1;
  background: linear-gradient(115deg, var(--accent-strong), var(--accent) 48%, var(--spark-b));
  opacity: calc(0.92 * (var(--edge) - var(--sens)) / (100 - var(--sens)));
}

/* The soft bloom behind it. This layer sits almost exactly on the
   panel and is blurred outward, so what you see is the bleed past
   the edge rather than a band of colour sitting around it. The
   inner half of the blur is hidden behind the panel. */
.eglow::after {
  inset: -2px;
  z-index: -2;
  background: var(--accent);
  filter: blur(var(--bloom));
  opacity: calc(0.6 * (var(--edge) - var(--sens)) / (100 - var(--sens)));
  -webkit-mask-image: radial-gradient(
    circle calc(var(--spot) * 1.1) at var(--mx) var(--my),
    #000 0%, #000 22%, transparent 100%
  );
  mask-image: radial-gradient(
    circle calc(var(--spot) * 1.1) at var(--mx) var(--my),
    #000 0%, #000 22%, transparent 100%
  );
}

/* No transition while the pointer is over it, or the light would
   lag behind the cursor. The fade only applies on the way out. */
.eglow:not(:hover)::before,
.eglow:not(:hover)::after {
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* The hero plate cuts all four corners rather than two. */
.eglow--plate::before,
.eglow--plate::after {
  clip-path: polygon(
    24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px),
    calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px
  );
}

@media (prefers-reduced-motion: reduce) {
  .eglow::before, .eglow::after { display: none; }
}

/* ===============================================================
   21. THEME TOGGLE

   A permanent circle, bottom right. The glyph is a disc with one
   half filled, which is about as literal as an icon gets, and it
   turns over when the theme changes so the switch is legible as an
   action rather than a flicker.
   =============================================================== */
.theme-toggle {
  position: fixed;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  z-index: 120;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  /* A control that only works with scripting should not be offered
     without it. main.js reveals it once the theme is wired. */
  visibility: hidden;
  color: var(--accent);
  background: var(--bar);
  border: 1px solid var(--accent-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* inner ring, for the Deco double line */
  box-shadow:
    inset 0 0 0 1px var(--accent-veil),
    0 6px 22px rgba(0, 0, 0, 0.3);
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--accent-strong);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 10px 26px rgba(0, 0, 0, 0.38);
}
.theme-toggle:active { transform: translateY(0); }
.theme-toggle.is-ready { visibility: visible; }

.theme-toggle svg {
  width: 21px;
  height: 21px;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="light"] .theme-toggle svg { transform: rotate(180deg); }

/* Colour changes are eased for a moment while the theme swaps, then
   the transition is taken off again so it cannot interfere with
   hover states or the edge glow. */
.theme-shift,
.theme-shift *,
.theme-shift *::before,
.theme-shift *::after {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    fill 0.35s ease,
    stroke 0.35s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: none; }
  .theme-shift, .theme-shift *, .theme-shift *::before, .theme-shift *::after { transition: none !important; }
}

/* ===============================================================
   22. WORK CAROUSEL

   Embla drives it. Slides sit at 72% of the viewport so the next
   and previous ones stay visible at the edges, which is what makes
   it read as a carousel without needing a label saying so.

   Two behaviours survive with scripting off. The viewport falls
   back to a scroll snap strip, so it can still be swiped or
   scrolled. And every caption is in the HTML: main.js hides all but
   the active one once it runs, so without it the visitor gets the
   lot, stacked and readable.
   =============================================================== */
.carousel { position: relative; }

.carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.js .carousel__viewport { overflow: hidden; scroll-snap-type: none; }

.carousel__track {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  touch-action: pan-y pinch-zoom;
}
.carousel__slide {
  --near: 1;                        /* 1 centred, 0 furthest out */
  flex: 0 0 clamp(260px, 54vw, 780px);
  min-width: 0;
  scroll-snap-align: center;
  opacity: calc(0.42 + 0.58 * var(--near));
  transform: scale(calc(0.94 + 0.06 * var(--near)));
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Once Embla is driving, --near changes every frame, so the
   transition has to come off or the slides lag the drag. */
.js .carousel--live .carousel__slide { transition: none; }

/* --- the shot itself ----------------------------------------- */
.shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--shot);
  border: 1px solid var(--line);
  clip-path: polygon(
    var(--step) 0, 100% 0, 100% calc(100% - var(--step)),
    calc(100% - var(--step)) 100%, 0 100%, 0 var(--step)
  );
  transition: border-color 0.3s ease;
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
a.shot { cursor: zoom-in; }
a.shot:hover { border-color: var(--accent-soft); }

.shot__cue {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--accent-strong);
  background: var(--bar);
  border: 1px solid var(--accent-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.shot__cue svg { width: 17px; height: 17px; }
a.shot:hover .shot__cue,
a.shot:focus-visible .shot__cue { opacity: 1; transform: translateY(0); }

/* --- arrows and markers -------------------------------------- */
.carousel__bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.carousel__nav { display: flex; gap: 0.5rem; flex: none; }
.js .carousel__bar { display: flex; }

.carousel__arrow {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line);
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.carousel__arrow svg { width: 18px; height: 18px; }
.carousel__arrow:hover,
.carousel__arrow:focus-visible {
  color: var(--accent-strong);
  border-color: var(--accent-soft);
  background: var(--hover);
}

.carousel__markers {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.carousel__markers button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.carousel__markers span {
  width: 7px;
  height: 7px;
  background: transparent;
  border: 1px solid var(--accent-soft);
  transform: rotate(45deg);
  transition: background 0.3s ease, border-color 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.carousel__markers button:hover span { border-color: var(--accent); }
.carousel__markers .is-active span {
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-color: var(--accent);
}

/* --- caption -------------------------------------------------- */
.carousel__captions {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.caption + .caption { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.js .carousel__captions .caption + .caption { margin-top: 0; }
.caption__sector {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.caption__name { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.9rem); margin-bottom: 0.65rem; }
.caption__body { color: var(--text-soft); max-width: 62ch; }
.caption .inline-list { margin-top: 0.9rem; }
.caption__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.4rem;
}
.caption__status {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.btn--sm { padding: 0.7rem 1.25rem; font-size: 0.68rem; }

/* --- lightbox -------------------------------------------------- */
.lightbox {
  width: min(1400px, 94vw);
  max-width: none;
  padding: 0;
  border: 1px solid var(--accent-soft);
  background: var(--bg-2);
  color: var(--text);
  clip-path: polygon(
    18px 0, 100% 0, 100% calc(100% - 18px),
    calc(100% - 18px) 100%, 0 100%, 0 18px
  );
}
.lightbox::backdrop { background: rgba(3, 6, 12, 0.82); backdrop-filter: blur(3px); }
[data-theme="light"] .lightbox::backdrop { background: rgba(60, 52, 32, 0.55); }
.lightbox img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  background: var(--shot);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.lightbox__title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.lightbox__close {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line);
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.lightbox__close:hover { color: var(--accent-strong); border-color: var(--accent-soft); }

@media (max-width: 900px) {
  .carousel__slide { flex-basis: min(84%, 520px); }
  .carousel__markers { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel__slide { transition: none; }
}

/* --- the canvas strip -------------------------------------------
   carousel.js paints the cards to a canvas and runs the fbm pass
   over it. While that is live the real markup underneath stays in
   the page for a screen reader and for Google, but comes out of
   view. It is not display:none, because that would take it out of
   the accessibility tree and stop the pictures loading, and the
   canvas is painted from those same pictures.
   ----------------------------------------------------------------- */
.carousel__stage { position: relative; }

/* The strip runs the full width of the window, as the original
   does, so the cards march past rather than stopping at a wall. */
.carousel--gl .carousel__stage {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.carousel__canvas { display: none; }

.carousel--gl .carousel__canvas {
  display: block;
  width: 100%;
  touch-action: pan-y;
  cursor: grab;
}
.carousel--gl .carousel__stage:active .carousel__canvas { cursor: grabbing; }

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

/* Those links are still in the tab order, and focus must never land
   somewhere invisible. So the moment a keyboard reaches the strip,
   the canvas steps aside and the real strip takes its place. The
   important is against the height carousel.js writes on the stage,
   which is sized for the canvas and not for this. */
.carousel--gl .carousel__stage:focus-within { height: auto !important; }
.carousel--gl .carousel__stage:focus-within .carousel__canvas { display: none; }
.carousel--gl .carousel__stage:focus-within .carousel__strip {
  position: static;
  width: auto;
  height: auto;
  overflow-x: auto;
  clip: auto;
  clip-path: none;
  white-space: normal;
}