/* ═══════════════════════════════════════════════════════════════════════════
   We Can Build That — shared stylesheet ("House Blue")
   ───────────────────────────────────────────────────────────────────────────
   Single source of truth for tokens and shared chrome (nav, footer, buttons,
   forms, reveals). Page-specific section styles live in a <style> block on
   the page itself.

   Tokens and their contrast ratios are documented in DESIGN.md. The one rule
   that matters most: --azure is for the logo and thick non-text fills only.
   Anything text-sized or clickable uses --blue.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --cream:#F4F1E9;
  --white:#FFFFFF;
  --ink:#1B1A17;
  --body:#4F4B42;
  --muted:#6B6558;
  --azure:#227ADF;      /* logo + non-text fills >=24px ONLY */
  --blue:#1560B8;       /* all accent text + interactive fills */
  --blue-deep:#0F4A91;
  --blue-pale:#8FC2FF;  /* only on --blue-deep */
  --line:#E0DACB;
  --line-soft:#EFEADC;

  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  /* Page-opening h1 only. Outfit at 900 is heavier than Bricolage's 800
     ceiling and geometric like the logo, so the wordmark and headline read as
     related. Section headings stay on --font-display so the contrast between
     "page title" and "section title" stays meaningful. */
  --font-hero:'Outfit',system-ui,sans-serif;
  --font-body:'Inter Tight',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --r-sm:4px; --r-btn:7px; --r-card:14px;
  --shadow-card:0 1px 2px rgba(27,26,23,.05);
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-fast:180ms; --dur-slow:420ms;

  --z-nav:100;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--body);
  font-family:var(--font-body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;text-wrap:balance}
h1{font-family:var(--font-hero);font-size:clamp(36px,5.4vw,60px);font-weight:900;
  letter-spacing:-.04em;line-height:.97}
/* The emphasised phrase stays on the display face — the weight and family
   contrast together is what makes the split read as deliberate. */
h1 em{font-family:var(--font-display);font-style:normal;font-weight:400}
h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1.04}
h3{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.28}
p{margin:0;text-wrap:pretty}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--azure);color:var(--white)}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.mono{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);
  padding:12px 18px;z-index:999;border-radius:0 0 var(--r-btn) 0}
.skip:focus{left:0}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:14.5px;font-weight:600;
  padding:14px 26px;border-radius:var(--r-btn);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);transform:translateY(-1px)}
.btn-onblue{background:var(--white);color:var(--blue-deep)}
.btn-onblue:hover{background:var(--cream);transform:translateY(-1px)}
.btn-sm{font-size:13px;padding:11px 17px}
.btn-block{width:100%}
/* padding-block keeps the hit area at 44px even though the text is ~23px */
.link-arrow{color:var(--blue);font-weight:600;font-size:14px;display:inline-flex;
  gap:6px;align-items:center;padding-block:11px;
  transition:gap var(--dur-fast) var(--ease)}
.link-arrow:hover{gap:10px}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:rgba(244,241,233,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease)}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;
  padding-block:13px;gap:24px}
/* The wordmark is two-line artwork — below ~40px the second line stops being
   readable, so it needs more height than a single-line logo would. */
.nav-logo img{height:44px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a:not(.btn){font-size:14.5px;font-weight:500;color:var(--body);
  padding-block:10px;border-bottom:1.5px solid transparent;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.nav-links a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--azure)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--azure)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);
  border-radius:var(--r-btn);padding:12px 13px;cursor:pointer}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--ink);margin:3.5px 0}
.menu{display:none}

/* ── page header (interior pages) ────────────────────────────────────────── */
.phead{padding-block:clamp(36px,5vw,60px) clamp(24px,3vw,36px)}
.phead h1{margin:14px 0 16px;max-width:16ch}
.phead h1 em{font-style:normal;font-weight:400;color:var(--blue)}
.phead p{font-size:16.5px;max-width:54ch}

/* ── forms ───────────────────────────────────────────────────────────────── */
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field .req{color:var(--blue)}
.input,.select,.textarea{width:100%;font-family:var(--font-body);font-size:15.5px;
  color:var(--ink);background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-btn);padding:13px 15px;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.input::placeholder,.textarea::placeholder{color:var(--muted);opacity:.8}
.input:hover,.select:hover,.textarea:hover{border-color:var(--muted)}
.input:focus,.select:focus,.textarea:focus{background:var(--white);border-color:var(--blue)}
.textarea{min-height:140px;resize:vertical;line-height:1.6}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B6558' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:12px}

/* ── contrast band ───────────────────────────────────────────────────────── */
.band{background:var(--blue-deep);color:var(--white);padding-block:clamp(44px,5vw,72px)}
.band .mono{color:var(--blue-pale);display:block;margin-bottom:16px}
.band h2{color:var(--white);margin-bottom:14px;max-width:20ch}
.band h2 em{font-style:normal;font-weight:400;color:var(--blue-pale)}
.band p{font-size:15.5px;color:#D7E4F5;max-width:54ch}
.band-list li{padding-block:12px;border-top:1px solid rgba(255,255,255,.16);
  font-size:14px;color:#D7E4F5;display:flex;gap:12px;align-items:flex-start}
.band-list li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.band-list b{color:var(--white);font-weight:600}
.band-list .tick{color:var(--blue-pale);flex:none;font-weight:600}

/* ── cards ───────────────────────────────────────────────────────────────── */
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card)}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,56px) 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.foot-brand img{height:42px;margin-bottom:16px}
.foot-brand p{font-size:13.5px;color:var(--muted);max-width:30ch;margin-bottom:16px}
.foot-social{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--line);border-radius:999px;color:var(--body);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.foot-social:hover{color:var(--blue);border-color:var(--blue)}
.foot-social svg{width:16px;height:16px}
.foot h4{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.foot li{padding-block:2px}
/* 28px tall clears the WCAG 2.5.8 24px minimum on desktop; the <=960px rule
   below takes it to a full 44px where the pointer is a finger. */
.foot li a{display:inline-block;font-size:13.5px;padding-block:6px;color:var(--body);
  transition:color var(--dur-fast) var(--ease)}
.foot li a:hover{color:var(--blue)}
.foot-base{border-top:1px solid var(--line);padding-top:20px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.foot-base .fine{max-width:64ch}

/* ── reveal ──────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-2{transition-delay:70ms}
.rv-3{transition-delay:140ms}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr}
  /* Tablets are touch devices too — footer links need the full 44px row
     from here down, not just at phone widths. */
  .foot li{padding-block:0}
  .foot li a{display:inline-block;padding-block:14px}
  .foot-social{width:44px;height:44px}
  .foot-social svg{width:18px;height:18px}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .menu.open{display:flex;flex-direction:column;gap:4px;padding:8px 0 20px;
    border-top:1px solid var(--line)}
  .menu.open a{font-size:16px;font-weight:500;padding:11px 0;color:var(--ink)}
  .menu.open .btn{margin-top:10px;width:100%}
  .field-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .foot-base{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}