/* Stoneford Alliance website. Tokens and type follow Brand Guidelines v1.1 (03_Source/brand.css, sections 17, 18 and 26). */
@font-face { font-family: "Libre Caslon Text"; src: url("/fonts/LibreCaslonText-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #17212B; --teal: #1E5A57; --teal-lift: #2E8C86; --stone: #8A8F93; --charcoal: #3A4149;
  --soft-stone: #D9D6CF; --light-gray: #ECEDEE; --off-white: #F6F4EF; --white: #FFFFFF; --slate: #B9BEC3;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px; --gut: clamp(20px, 5vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 17px/1.6 var(--sans); color: var(--charcoal); background: var(--white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--white); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* Type */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; }
h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.1; letter-spacing: -0.005em; }
h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; }
h3 { font-size: clamp(21px, 2.2vw, 25px); line-height: 1.25; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.6; color: var(--charcoal); max-width: 640px; }
.eyebrow { font: 500 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.26em; color: var(--teal); margin: 0 0 18px; }
.prose { max-width: 680px; }
.prose h2 { margin: 56px 0 16px; }
.prose h3 { margin: 32px 0 10px; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin: 0 0 .5em; }
.muted { color: var(--charcoal); font-size: 15px; }

/* Buttons: Ink Navy fill or 1 px outline, Inter Medium caps 12 px, tracked */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; font: 500 12.5px/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer; }
.btn:hover { background: #0F171F; color: var(--white); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--soft-stone); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn.light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn.light:hover { background: var(--off-white); }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.more { font: 500 12.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; }

/* Header: horizontal logo at 230 px desktop, white, 1 px Soft Stone border */
.site-header { background: var(--white); border-bottom: 1px solid var(--soft-stone); position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: 32px; min-height: 88px; }
.logo { display: block; flex: none; }
.logo img { width: 230px; }
.nav { display: flex; gap: clamp(20px, 3vw, 44px); margin: 0 auto; }
.nav a { font: 500 13px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 10px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--teal); }
.access { min-height: 44px; padding: 0 20px; background: transparent; color: var(--ink); }
.access:hover { background: var(--ink); color: var(--white); }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--soft-stone); min-height: 44px; padding: 0 14px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
@media (max-width: 960px) {
  .site-header .wrap { min-height: 72px; flex-wrap: wrap; gap: 0 16px; }
  .logo img { width: 200px; }
  .menu-btn { display: inline-flex; align-items: center; }
  .nav, .access { display: none; }
  .site-header.open .nav { display: flex; flex-direction: column; gap: 0; width: 100%; order: 3; margin: 6px 0 0; border-top: 1px solid var(--soft-stone); }
  .site-header.open .nav a { padding: 16px 0; border-bottom: 1px solid var(--light-gray); }
  .site-header.open .access { display: inline-flex; order: 4; margin: 16px 0 20px; width: 100%; }
}

/* Sections */
.hero { padding: clamp(56px, 9vw, 120px) 0; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hero-art { background: var(--off-white); aspect-ratio: 9 / 8; display: flex; align-items: center; justify-content: center; }
.hero-art img { width: 54%; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero-art { aspect-ratio: 16 / 9; } .hero-art img { width: 36%; } }
.page-head { padding: clamp(56px, 8vw, 104px) 0 clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--light-gray); }
.page-head h1 { max-width: 880px; }
.page-head .lead { margin-top: 24px; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section.alt { background: var(--off-white); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.band { background: var(--ink); color: #C9CED3; padding: clamp(56px, 8vw, 104px) 0; }
.band h2, .band h3 { color: #F3F1EC; }
.band .eyebrow { color: var(--teal-lift); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }
.pillar .num { font: 500 12px/1 var(--sans); letter-spacing: .26em; color: var(--teal-lift); display: block; margin-bottom: 18px; }
.band .pillar .num { color: var(--teal-lift); }
.pillar h3 { margin-bottom: 14px; }
.pillar p { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--soft-stone); border: 1px solid var(--soft-stone); }
.cards > div { background: var(--white); padding: clamp(24px, 3vw, 36px); }
.cards h3 { margin-bottom: 10px; }
.cards p { margin: 0; }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: 0; border-top: 1px solid var(--soft-stone); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--soft-stone); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 12px/2.1 var(--sans); letter-spacing: .26em; color: var(--teal); }
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; }
.cta { background: var(--ink); color: #C9CED3; padding: clamp(56px, 8vw, 96px) 0; }
.cta h2 { color: #F3F1EC; }
.cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta p { max-width: 620px; margin: 14px 0 0; }
.rule-teal { width: 56px; height: 1px; background: var(--teal); margin: 0 0 24px; border: 0; }

/* Forms */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; max-width: 760px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.field label { display: block; font: 500 13px/1.4 var(--sans); color: var(--ink); margin-bottom: 8px; }
.field .opt { color: var(--charcoal); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; font: 400 16px/1.5 var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--slate); border-radius: 0; padding: 12px 14px; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 14px; color: var(--charcoal); }
.form-msg { padding: 16px 18px; border-left: 3px solid var(--teal); background: var(--off-white); color: var(--ink); }
.form-msg.err { border-left-color: #9B2C2C; }
.form-msg[hidden] { display: none; }

/* Footer */
.site-footer { border-top: 1px solid var(--soft-stone); padding: 40px 0 48px; font-size: 14px; color: var(--charcoal); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.site-footer .sym { width: 44px; }
.site-footer .copy { font: 500 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--charcoal); }
.site-footer nav { margin-left: auto; display: flex; gap: 22px; }
.site-footer nav a { font: 500 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--charcoal); text-decoration: none; }
.site-footer nav a:hover { color: var(--teal); }
@media (max-width: 640px) { .site-footer nav { margin-left: 0; width: 100%; flex-wrap: wrap; } }
.draft-banner { background: #FFF6DE; color: #5C3A00; border-bottom: 1px solid #EFD3A6; font: 500 13px/1.45 var(--sans); text-align: center; padding: 8px 16px; }
@media print { .site-header, .site-footer, .draft-banner, .menu-btn { display: none; } }

/* Tier table */
.tblwrap { overflow-x: auto; border: 1px solid var(--soft-stone); background: var(--white); }
.tiers { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 640px; }
.tiers th, .tiers td { text-align: left; vertical-align: top; padding: 18px 22px; border-bottom: 1px solid var(--soft-stone); }
.tiers thead th { font: 500 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--teal); background: var(--white); }
.tiers tbody th { font: 400 20px/1.3 var(--serif); color: var(--ink); width: 18%; }
.tiers tbody tr:last-child th, .tiers tbody tr:last-child td { border-bottom: 0; }
.band .split h2 { color: #F3F1EC; }
.band .prose p { color: #C9CED3; }

/* ---------------------------------------------------------------- Motion
   Hero: on a dark stone panel, the four voussoirs rise into place, the keystone hovers down from above and locks,
   then light runs through the arch: each stone brightens from the keystone outward and a sheen crosses the face.
   Below the hero, sections rise in once as they enter view (site.js). Everything here is transform, opacity, fill
   or filter, and all of it is skipped for visitors who ask for reduced motion: they see the finished, lit arch. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --stone-dim: #8C939A; --stone-lit: #ECE8E0; --stone-rest: #D9D6CF;
  --key-rest: #2E8C86; --key-flare: #6FD6CC; }

.arch-stage { position: relative; overflow: hidden; isolation: isolate; background: #121A22;
  background-image:
    radial-gradient(120% 90% at 50% 115%, rgba(46, 140, 134, .22), transparent 62%),
    radial-gradient(90% 70% at 50% -10%, rgba(243, 241, 236, .06), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.arch-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 52%, rgba(6, 10, 14, .55) 100%); }
.arch-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .5; mix-blend-mode: screen; }
.arch-light { position: absolute; inset: -20%; z-index: 1; pointer-events: none; opacity: .9;
  background: linear-gradient(105deg, transparent 38%, rgba(243, 241, 236, .07) 47%, rgba(243, 241, 236, .02) 53%, transparent 60%);
  background-size: 260% 100%; background-position: 100% 0; }
.has-film .arch-light { display: none; }
.arch-glow { position: absolute; left: 50%; top: 56%; width: 78%; aspect-ratio: 2 / 1; z-index: 1; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(111, 214, 204, .20), rgba(46, 140, 134, .08) 55%, transparent 100%); opacity: .75; }
.arch { position: relative; z-index: 2; width: 58%; height: auto; overflow: visible; }
.arch .st { fill: var(--stone-rest); }
.arch .key { fill: var(--key-rest); }
.arch .key-wrap { filter: drop-shadow(0 0 3px rgba(111, 214, 204, .35)); }
.arch .stones { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.arch .sheen { opacity: 0; }
.arch .flare { opacity: .3; transform-box: fill-box; transform-origin: center; }
@media (max-width: 860px) { .arch { width: 40%; } }
/* Wordmark under the arch (reversed colors, as on the dark logo). */
.arch-stage { flex-direction: column; gap: 7%; }
.wordmark { position: relative; z-index: 2; width: 64%; height: auto; overflow: visible; }
.wordmark .wl { fill: #F3F1EC; }
.wordmark .wm-al, .wordmark .wm-rule { fill: #B9BEC3; }
@media (max-width: 860px) { .wordmark { width: 46%; } }

.hero h1 .ln { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  /* Assembly: springers, then the inner stones, from below. */
  .arch .st-1, .arch .st-4, .arch .st-2, .arch .st-3 { transform-box: fill-box; transform-origin: 50% 100%;
    animation: stone-rise 1s var(--ease-out) both, stone-light 1.25s ease-out both; }
  .arch .st-1 { --tilt: 7deg; animation-delay: .2s, 2.74s; }
  .arch .st-4 { --tilt: -7deg; animation-delay: .2s, 2.74s; }
  .arch .st-2 { --tilt: 4deg; animation-delay: .46s, 2.56s; }
  .arch .st-3 { --tilt: -4deg; animation-delay: .46s, 2.56s; }
  /* Keystone: appears high, hovers, descends and locks with a small settle, then flares and settles to teal. */
  .arch .key-wrap { animation: key-descend 2.4s linear .4s both, key-glow 1.6s ease-out 2.42s both; }
  .arch .key { animation: key-light 1.4s ease-out 2.42s both; }
  .arch .flare { animation: flare 2.6s ease-out 2.4s both, flare-breathe 7s ease-in-out 5s infinite; }
  .arch .sheen:not(.sheen-idle) { animation: sheen 1.7s cubic-bezier(.45, 0, .2, 1) 2.3s both; }
  .arch .sheen-idle { animation: sheen-idle 11s ease-in-out 6s infinite; }
  .arch-glow { animation: glow-bloom 2.2s ease-out 2.4s both, glow-breathe 7s ease-in-out 4.6s infinite; }
  .arch-light { animation: stage-in 1.6s ease-out both, rake 14s ease-in-out 1.6s infinite alternate; }
  /* Wordmark, once the keystone has locked: STONEFORD letter by letter from left to right, each gliding in from the
     left; then ALLIANCE rises slowly from below, centered, and a line draws outward on each side. */
  .wordmark .wl { transform-box: fill-box; animation: letter-in 1.15s var(--ease-out) both; animation-delay: calc(2.85s + var(--i) * .13s); }
  .wordmark .wm-al { transform-box: fill-box; animation: alliance-rise 1.9s var(--ease-out) 4.25s both; }
  .wordmark .wm-rule { transform-box: fill-box; animation: rule-draw 1.6s var(--ease-out) 5.1s both; }
  .wordmark .wm-rule-l { transform-origin: 100% 50%; }
  .wordmark .wm-rule-r { transform-origin: 0 50%; }
  /* Headline and supporting copy. */
  .hero .eyebrow, .hero h1 .ln, .hero .lead, .hero .btns { animation: copy-rise .95s var(--ease-out) both; }
  .hero .eyebrow { animation-delay: .1s; }
  .hero h1 .ln:nth-child(1) { animation-delay: .22s; }
  .hero h1 .ln:nth-child(2) { animation-delay: .4s; }
  .hero .lead { animation-delay: .62s; }
  .hero .btns { animation-delay: .8s; }

  /* Scroll reveals (site.js adds .reveal to content below the fold, then .in as it enters view). */
  .reveal { opacity: 0; transform: translateY(18px);
    transition: opacity .8s ease-out, transform .95s var(--ease-out); transition-delay: var(--d, 0ms); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.rule-teal { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out); }
  .reveal.rule-teal.in { transform: none; }

  /* Buttons: a quiet light pass on hover. */
  .btn { position: relative; overflow: hidden; }
  .btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); }
  .btn:hover::after { transition: transform .8s var(--ease-out); transform: translateX(120%); }
}

@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes stone-rise { from { opacity: 0; transform: translateY(46%) rotate(var(--tilt)); } to { opacity: 1; transform: none; } }
@keyframes stone-light { 0% { fill: var(--stone-dim); } 35% { fill: var(--stone-lit); } 100% { fill: var(--stone-rest); } }
@keyframes key-descend {
  0%   { opacity: 0; transform: translateY(-240px); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  12%  { opacity: 1; }
  38%  { transform: translateY(-70px); animation-timing-function: ease-in-out; }
  50%  { transform: translateY(-60px); animation-timing-function: ease-in-out; }
  62%  { transform: translateY(-70px); animation-timing-function: cubic-bezier(.55, 0, .8, .35); }
  86%  { transform: translateY(1.6px); animation-timing-function: ease-out; }
  93%  { transform: translateY(-.6px); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: none; } }
@keyframes key-light { 0% { fill: #1E5A57; } 22% { fill: var(--key-flare); } 100% { fill: var(--key-rest); } }
@keyframes key-glow { 0% { filter: drop-shadow(0 0 0 rgba(111, 214, 204, 0)); } 25% { filter: drop-shadow(0 0 9px rgba(111, 214, 204, .9)); }
  100% { filter: drop-shadow(0 0 3px rgba(111, 214, 204, .35)); } }
@keyframes sheen { 0% { opacity: .9; transform: translateX(0); } 100% { opacity: .9; transform: translateX(560px); } }
@keyframes flare { 0% { opacity: 0; transform: scale(.3); } 9% { opacity: 1; transform: scale(1.15); } 100% { opacity: .3; transform: scale(1); } }
@keyframes flare-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .18; } }
@keyframes sheen-idle { 0%, 70% { opacity: 0; transform: translateX(0); } 72% { opacity: .6; } 100% { opacity: .6; transform: translateX(560px); } }
@keyframes glow-bloom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } }
@keyframes glow-breathe { 0%, 100% { opacity: .75; } 50% { opacity: .55; } }
@keyframes rake { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes letter-in { from { opacity: 0; transform: translateX(-26px); filter: blur(2.5px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
@keyframes alliance-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes copy-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media print { .reveal { opacity: 1 !important; transform: none !important; } }