/* ==========================================================
   ALUF PSYCHOLOGY — SITE STYLES
   Tokens first: change a colour or font once, it changes
   everywhere.
   ========================================================== */

/* ---------- self-hosted fonts ----------
   Crimson Pro = display (--serif) · Hanken Grotesk = body/labels (--sans) */
@font-face{font-family:'Crimson Pro';font-style:normal;font-weight:300;font-display:swap;
src:url('../assets/fonts/crimson-pro-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Crimson Pro';font-style:normal;font-weight:400;font-display:swap;
src:url('../assets/fonts/crimson-pro-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Crimson Pro';font-style:normal;font-weight:500;font-display:swap;
src:url('../assets/fonts/crimson-pro-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Crimson Pro';font-style:italic;font-weight:300;font-display:swap;
src:url('../assets/fonts/crimson-pro-latin-300-italic.woff2') format('woff2')}
@font-face{font-family:'Crimson Pro';font-style:italic;font-weight:400;font-display:swap;
src:url('../assets/fonts/crimson-pro-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;
src:url('../assets/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;
src:url('../assets/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;
src:url('../assets/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2')}

:root{
  --paper:#F0F0EE;          /* page background. If you change it, also change
                               the nav tint (nav::before, below) and the
                               theme-color tag in each page's <head>. */
  --ink:#1E1D1A;
  --stone:#686866;          /* secondary text: nav, captions, labels, footer, wordmark "Psychology" — 4.89:1 */
  --hairline:#E4E1DA;
  --brass:#686866;         /* accent: eyebrows, dividing lines, underlines, focus rings.
                              Same grey as --stone; was gold #A5824E until 2026-10. */
  --serif:'Crimson Pro',Georgia,serif;
  --sans:'Hanken Grotesk',-apple-system,sans-serif;

  /* ---- text size scale ---- */
  /* Body and the two tiers below it: phone sizes here, one step up from 521px
     (see below). Tablets and computers sit further from the eye than phones,
     so the same px reads smaller there. */
  --fs-body:1rem;           /* 16px */
  --fs-compact:.875rem;     /* 14px */
  --fs-fine:.8rem;          /* 12.8px */
  --fs-label:.75rem;        /* 12px — eyebrows, captions, dates, labels     */

  --max:1280px;

}
/* One size from tablet up, not a fluid one: the fluid sizes were still
   growing when the contact layout stacks at 820px, so the text visibly
   changed size at that point. */
@media(min-width:521px){
  :root{--fs-body:1.0625rem;--fs-compact:.9375rem;--fs-fine:.85rem}  /* 17 / 15 / 13.6px */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
/* scroll-behavior is not a transition or an animation, so the blanket rule
   below does not reach it — smooth scrolling needs turning off by name. */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- accessibility: visible keyboard focus ---------- */
:focus{outline:none}
:focus-visible{outline:1.5px solid var(--brass);outline-offset:3px}
.btn:focus-visible{outline-offset:-4px}

/* Skip link: off-screen until tabbed, then the first thing a keyboard user
   reaches. main gets scroll-margin so the fixed bar cannot cover the target. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;
font-size:var(--fs-label);font-weight:600;letter-spacing:.15em;
text-transform:uppercase;text-decoration:none;color:var(--ink)}
.skip:focus{left:1rem;top:1rem;background:var(--paper);
padding:.8rem 1.2rem;border:1px solid var(--brass)}
main{scroll-margin-top:7rem}
main:focus{outline:none}

/* Honeypot: a real field, off-screen and out of the tab order. Bots fill it,
   people never see it. functions/api/contact.js silently drops anything that
   arrives with it set. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- shared devices ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 2rem}
.eyebrow{font-size:.8125rem; /* 13px — one step above --fs-label, eyebrows only */letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:600}
/* .72rem, not .68rem: at 10.9px this was the smallest type on the site and it
   was carrying the primary action. touch-action removes the 300ms double-tap
   delay on touch devices. */
.btn{display:inline-block;font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
padding:.85rem 1.9rem;border:1px solid var(--ink);border-radius:6px;color:var(--ink);text-decoration:none;
background:transparent;cursor:pointer;font-family:var(--sans);touch-action:manipulation;
transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--paper)}

/* Headings balance their last line rather than leaving a single word stranded.
   The hero h1 is excluded: it already controls its own breaks with nowrap
   spans, and balancing would fight that. */
.intro-txt h2,.connect h2,.contact-head h1,.hero-meta{text-wrap:balance}
/* Each phrase stays whole. Where the full line no longer fits (about 400px),
   drop the "·" and give each phrase its own line instead of letting
   text-wrap:balance split it mid-phrase. */
.hero-meta span{white-space:nowrap}
@media(max-width:400px){.hero-meta .sep{display:none}.hero-meta span{display:block}}

/* ---------- nav ---------- */
/* The tinted blur sits on a ::before layer rather than on nav itself.
   backdrop-filter makes an element the containing block for its own
   position:fixed descendants — with it on nav, the mobile drawer
   (.nav-links, below) resolved top/bottom against the 85px-tall bar
   instead of the viewport and collapsed into a strip across the wordmark. */
nav{position:fixed;top:0;left:0;right:0;z-index:100;
border-bottom:1px solid #E3E3E3}
nav::before{content:'';position:absolute;inset:0;z-index:-1;
background:rgba(240,240,238,.92);backdrop-filter:blur(10px)}
.nav-in{max-width:var(--max);margin:0 auto;padding:1.35rem 2rem;
display:flex;justify-content:space-between;align-items:center}
.wordmark{font-family:var(--serif);font-size:1.265rem;font-weight:500;letter-spacing:.04em;
text-decoration:none;white-space:nowrap}
.wordmark em{font-style:normal;color:var(--stone)}
.nav-links{display:flex;gap:2.1rem;list-style:none;align-items:center}
.nav-links a{font-size:.75rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
color:var(--stone);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}

/* burger: three lines that become a cross when open */
.burger{display:none;background:none;border:none;cursor:pointer;padding:.55rem .4rem;position:relative;z-index:120;
touch-action:manipulation}
/* The bars are 33x41 and must stay that size to sit in the bar, so the touch
   target is widened with a pseudo-element instead — 44x44 of hit area, no
   change to the layout. */
.burger::after{content:'';position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);width:44px;height:44px}
.burger span{display:block;width:20px;height:1px;background:var(--ink);margin:5px 0;
transition:transform .28s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile menu + overlay */
/* Below nav's z-index 100, so the bar — and the close button inside it —
   stay lit and clickable while the scrim dims the page behind the drawer. */
.nav-overlay{position:fixed;inset:0;background:rgba(30,29,26,.25);opacity:0;
pointer-events:none;transition:opacity .3s;z-index:90}
.nav-overlay.on{opacity:1;pointer-events:auto}
/* stops the page scrolling behind an open drawer */
body.menu-open{overflow:hidden}
/* 820px, matching every layout breakpoint below. It used to be 720, so
   between 721 and 820 the desktop nav sat above already-stacked content. */
@media(max-width:820px){
  .nav-links{position:fixed;top:0;right:0;bottom:0;width:min(75vw,300px);
  background:var(--paper);border-left:1px solid var(--hairline);
  flex-direction:column;justify-content:center;gap:2.2rem;
  transform:translateX(100%);transition:transform .3s;z-index:110}
  .nav-links.open{transform:translateX(0)}
  /* taller tap targets in the drawer, where these are the primary control */
  .nav-links a{display:block;padding:.6rem 0}
  .burger{display:block}
}

/* ---------- home: hero (compact full-width text banner) ---------- */
/* Do NOT make this a flex container. .wrap carries margin:0 auto, and an auto
   cross-axis margin suppresses align-items:stretch — the wrap then sizes to
   its own max-content (the nowrap headline) and centres, so the hero's left
   edge stops matching the nav and the portrait below it, and moves whenever
   the headline is reworded. Block layout keeps every section on one axis. */
.hero{padding:9rem 0 2.5rem}
.hero-txt .eyebrow{display:block;margin-bottom:1rem}
/* no width cap: sits on one line on wide screens, wraps naturally below.
   The 2.6rem (41.6px) floor matches the phone size below, so tablets and small
   laptops never get a smaller heading than a phone. */
.hero-txt h1{font-family:var(--serif);font-weight:400;
font-size:clamp(2.6rem,4.62vw,3.96rem);line-height:1.14;letter-spacing:-.005em;
margin-bottom:.5rem}
.hero-txt h1 em{font-style:italic}
/* each sentence is one unbreakable unit, so a wrap moves the whole second
   sentence rather than orphaning a word. Released below 360px, where
   "Perform with purpose." is wider than the column and would overflow. */
.hero-txt h1 span{white-space:nowrap}
@media(max-width:360px){.hero-txt h1 span{white-space:normal}}
/* Phones: where the heading sits on two lines (below 496px) it scales with the
   screen so "Heal with courage." nearly fills the line without wrapping
   (its width is about 7.2x the font size; /7.8 leaves a margin). 35px floor,
   48px cap. */
@media(max-width:495px){.hero-txt h1{font-size:clamp(2.2rem,calc((100vw - 3rem) / 7.8),3rem)}}
/* tracks the H1's 4.2vw rate (×0.347) so the subtitle stays subordinate at
   every width; floors at 1rem so it never drops below body copy */
/* 22px at full width keeps the heading about 2.9x the subline. 24px (2.6x)
   was tried: the regular-weight sans then competed with the light serif
   heading. No width cap, so it stays on one line whenever the heading does. */
.hero-txt p{font-size:clamp(1.1rem,1.7vw,1.375rem);font-weight:400;color:var(--stone);line-height:1.8;margin-bottom:1.8rem}
/* The subline only ever breaks after "the". Below 496px the heading
   splits onto two lines (its one-line width at the 35.2px minimum is
   448px plus 48px of gutter), so the subline splits there too. */
/* When the subline is the hero's last line, its bottom margin would add to the
   hero padding and widen the gap below; drop it so the gap stays ~80px. */
.hero-txt p:last-child{margin-bottom:0}
.hero-txt p span{white-space:nowrap}
@media(max-width:495px){.hero-txt p span{display:block}}
/* practical line and CTA are stacked block-level — never side by side */
.hero-meta{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:var(--stone)}
/* 13px only once the subline above has reached its full 22px (1.7vw = 22px at
   1294px); below that the subline shrinks and 13px reads too large beside it. */
@media(min-width:1294px){.hero-meta{font-size:.8125rem}}
/* Tablets and computers: ~34-36px visible between subline and meta line, about
   the gap between heading and subline, so the meta line reads as part of the
   hero. */
@media(min-width:521px){.hero-txt p{margin-bottom:1.175rem}}
.hero-txt .btn{padding:1rem 2.4rem}
/* Phones and tablets: every section break is 24px of visible space above the
   edge and 24px below it (48px from last word to next element). Each padding
   is 24px minus the room the neighbouring line-height already adds. */
@media(max-width:820px){
  .hero{padding:8rem 0 1.375rem}
}

/* ---------- home: portrait + introduction ---------- */
.intro{padding:2.5rem 0 2.5rem}
.intro-grid{display:grid;grid-template-columns:minmax(280px,400px) 1fr;
gap:clamp(2.6rem,7vw,6.5rem);align-items:start}
.intro-fig{display:flex;flex-direction:column;gap:1.1rem}
.intro-fig .caption{font-size:calc(var(--fs-label) * 1.15 * .93);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:var(--stone);display:flex;align-items:baseline;gap:.8rem}
.intro-txt .eyebrow{display:block;margin-bottom:1.6rem}
/* 5% smaller than the shared section-heading size */
.intro-txt h2{font-family:var(--serif);font-weight:400;font-size:calc(clamp(1.45rem,2.55vw,2.04rem) * .95);
line-height:1.3;margin-bottom:1.4rem}
.intro-txt p{font-size:var(--fs-body);font-weight:400;color:var(--ink);line-height:1.9;
max-width:520px;margin-bottom:1.4rem}
.intro-txt p:last-of-type{margin-bottom:2.2rem}
/* divider at 45% grey, the same tone as the email/WhatsApp link underlines:
   a quiet pause, kept distinct from the solid form lines you type on */
.intro-cred{max-width:520px;padding-top:1.4rem;border-top:1px solid rgba(104,104,102,.45);
display:flex;flex-direction:column;gap:.4rem}
.intro-cred span{font-size:var(--fs-compact);font-weight:400;color:var(--stone);line-height:1.6}
/* keeps "· Division of Neuropsychology" whole, so the dot wraps down with the
   credential it belongs to instead of dangling at the end of the line above */
.intro-cred .nb{white-space:nowrap}

@media(max-width:820px){
  .intro{padding:1.5rem 0 1.35rem}
  /* stacked: the photo caption already opens the section, and a second
     small-caps label 42px below it read as a two-line caption */
  .intro-txt .eyebrow{display:none}
  /* caption → text matches "greater resolve" → credentials rule: 32px each */
  .intro-grid{grid-template-columns:1fr;gap:1.7rem}
  .intro-txt p:last-of-type{margin-bottom:1.825rem}
  /* capped on tablet so the portrait does not become the whole screen */
  .intro-fig{max-width:340px}
}
/* On a phone the cap left the portrait 26px short of the text column beside
   it — the only element on the page not sitting on the margin. Let it fill. */
@media(max-width:520px){
  .intro-fig{max-width:none}
}

/* ---------- portrait block (shared, easy image swap) ---------- */
.portrait{aspect-ratio:4/5;background:linear-gradient(165deg,#E2DED6,#CFCAC0);
display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* ---------- home: contact ---------- */
/* 2rem on top of .intro's 2.5rem bottom, and 5rem below the button, so the
   gaps above and below this section match the hero-to-intro gap (~80px). */
.connect{padding:2rem 0 5rem}
/* Same columns as .intro-grid, so the steps sit under the portrait and the
   form under the introduction. No padding here — the grid also carries .wrap. */
.connect-grid{display:grid;grid-template-columns:minmax(280px,400px) 1fr;
column-gap:clamp(2.6rem,7vw,6.5rem);align-items:start}
/* line-height 1.2: at the inherited 1.6 the heading carried ~10px of empty
   line box above it, which made the gap over the section look larger than
   it measured. 34px at full width (larger competed with the hero), never
   below the tablet's 30px. The reassurance line sits close under it: a
   visible gap of ~65% of the heading size (~22px). */
.connect h2{grid-column:1/-1;font-family:var(--serif);font-size:clamp(1.875rem,2.66vw,2.125rem);
line-height:1.2;margin-bottom:.25rem}
.connect-sub{grid-column:1/-1;font-size:var(--fs-body);color:var(--stone);line-height:1.7;margin-bottom:3rem}
.connect-info .eyebrow{display:block;margin-bottom:1rem}
.connect-info .eyebrow:not(:first-child){margin-top:2.4rem}
.connect-steps{list-style:none;display:flex;flex-direction:column;gap:.45rem;
font-size:var(--fs-compact);line-height:1.6}
/* baseline: the serif numbers are larger than the step text, so top alignment
   left them sitting low beside it; this puts both on one baseline */
.connect-steps li{display:grid;grid-template-columns:1.5rem 1fr;align-items:baseline}
.connect-steps li>span:first-child{font-family:var(--serif);font-size:1.05rem;color:var(--stone)}
/* "below" in step 1 only once the form has moved under the steps */
.when-stacked{display:none}
@media(max-width:820px){.when-stacked{display:inline}}
.connect-info p{font-size:var(--fs-compact);line-height:1.7}
.connect-info p + p{margin-top:.6rem}
/* Email and WhatsApp links: a hairline underline on the text (not the icon)
   says it is a link; it darkens on hover and keyboard focus. */
.ci-link span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;
text-decoration-color:rgba(104,104,102,.45);transition:text-decoration-color .2s}
.ci-link:hover span,.ci-link:focus-visible span{text-decoration-color:var(--ink)}
.connect-info a{text-decoration:none;display:inline-flex;align-items:center;gap:.6rem}
/* Line icons drawn to match the site's thin rules: stroke only, in --stone. */
.ci{width:1.15em;height:1.15em;flex-shrink:0;fill:none;stroke:var(--stone);
stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){
  /* 48px above the footer line: the end of the page gets more room than a
     section break (footer adds 32px below the line, see footer rules) */
  .connect{padding-top:1.45rem;padding-bottom:3rem}
  /* 32px between the stacked groups: clearly less than the 48px section break */
  .connect-grid{grid-template-columns:1fr;row-gap:2rem}
  /* 28px heading (23px read as a label on phones). The reassurance line sits
     ~21px under it, as on larger screens; the negative margin cancels the
     grid row-gap for this one pair. */
  .connect h2{font-size:1.75rem;margin-bottom:calc(.35rem - 2rem)}
  /* one short list, spaced as on computers: steps read as a list, still
     further apart than the two lines of a wrapped step */
  .connect-steps{gap:.45rem}
  .connect-sub{margin-bottom:0}
  .connect-info .eyebrow:not(:first-child){margin-top:2rem}
}

/* ---------- scroll reveal (home only; disable in js/site.js) ---------- */
body[data-reveal] .reveal{opacity:0;transform:translateY(14px);
transition:opacity .7s ease,transform .7s ease}
body[data-reveal] .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  body[data-reveal] .reveal{opacity:1;transform:none}
}

/* ---------- contact ---------- */
/* padding-block, never the `padding` shorthand: this element also carries
   .wrap, and a shorthand declared later in the file wipes .wrap's
   `padding:0 2rem`, dropping the whole page flush against the viewport
   edges at any width up to the 1280px max. */
/* The page heading and intro, then the homepage's contact layout
   (.connect-grid / .connect-info / .cform). */
/* 9rem (8rem on phones) puts the heading where the hero eyebrow starts on
   the other pages, so the first line sits at the same height site-wide. */
.contact-page{padding-block:9rem 6rem}
/* Spaced to look like the homepage's "Let's connect" (.connect h2 / .connect-sub),
   only with a larger heading: the same visible gaps heading -> line -> Next steps,
   and the same grey line. */
/* The gap below matches the homepage's hero-to-portrait gap on computers and
   phones (86 / 52px visible): this block is the contact page's hero. Tablets
   keep ~55px. */
.contact-head{max-width:560px;margin-bottom:4.4375rem}
/* 40px on computers, 38.4px below; the line under it is 1px up from body
   text to hold its own against the larger heading. The heading-to-line gap
   is the same on every device. */
.contact-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4.5vw,2.5rem);
line-height:1.12;margin-bottom:.525rem}
.contact-head p{font-size:calc(var(--fs-body) + .0625rem);font-weight:400;color:var(--stone);line-height:1.7}
@media(max-width:820px){
  .contact-page{padding-top:8rem;padding-bottom:3rem}
  .contact-head{margin-bottom:2.375rem}
}

/* contact form — one style for both copies (homepage and /contact).
   Each label sits close to its own underline (40px) and clearly apart from
   the field above (48px), so it reads as belonging to the field below it.
   Underlines in --brass: 4.9:1 on --paper, where --hairline (1.1:1) barely
   read as a field. */
.cform{display:flex;flex-direction:column}
.cform label{font-size:var(--fs-compact);font-weight:400;color:var(--ink);margin:3rem 0 .35rem}
.cform label:first-of-type{margin-top:0}
/* 16px so iOS does not zoom on focus. The fields are 34px tall; each label is
   tied to its field with for=, so tapping either one focuses it and the touch
   target is label and field together. */
.cform input,.cform textarea{font-family:var(--sans);font-size:16px;font-weight:400;
background:transparent;border:none;border-bottom:1px solid var(--brass);
padding:.3rem 0 .45rem;color:var(--ink);resize:vertical}
/* No box round a field when it's clicked or tabbed into. The field's own
   underline marks it instead: it darkens to ink and thickens to 2px. The
   extra pixel is a box-shadow, so nothing below the field moves. */
.cform input:focus,.cform textarea:focus{outline:none;border-bottom-color:var(--ink);
box-shadow:0 1px 0 var(--ink)}
.cform .btn{align-self:flex-start;margin-top:2.5rem}
/* Optional radio question. Spaced like a field (3rem above); its own labels
   sit in a row and must not inherit the field-label margins above. */
.cform-choice{border:0;margin:3rem 0 0;padding:0;min-width:0}
.cform-choice legend{font-size:var(--fs-compact);color:var(--ink);margin-bottom:.9rem;padding:0}
.cform-opts{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem}
/* One line when all three options fit (they need ~425px), otherwise one per
   line: wrapping two and one left "Not sure yet" looking like an afterthought.
   Measured against the form's own width, which is narrow on small laptops too. */
.cform{container-type:inline-size}
@container (max-width:440px){.cform-opts{flex-direction:column;align-items:flex-start}}
.cform .cform-opts label{margin:0;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer}
/* Drawn radio: a thin 15px ring in the field-line grey, a 7px dark dot when
   chosen. The dot is the ring's own background, a gradient centred on the
   ring, so the browser draws both in one piece and they stay concentric at
   any window size or zoom. (A separate dot element is placed and rounded to
   whole pixels on its own, so it drifts.) .cform in the selector so the text
   fields' padding in the media queries below cannot reach the radio. */
.cform .cform-opts input{appearance:none;-webkit-appearance:none;width:15px;height:15px;min-height:0;margin:0;padding:0;
border:1px solid var(--brass);border-radius:50%;cursor:pointer;flex-shrink:0;
background:radial-gradient(circle,var(--ink) 3.25px,transparent 3.75px) center/0 0 no-repeat;
transition:background-size .15s ease-out}
.cform .cform-opts input:checked{border-color:var(--ink);background-size:100% 100%}
.cform-opts input:focus{box-shadow:none}
.cform-opts input:focus-visible{outline:1.5px solid var(--brass);outline-offset:3px}
.cform .form-note{margin-top:1rem}
/* Lines end where the introduction text above ends (520px, 560px on tablets),
   not across the whole column: name and email are short answers. */
@media(min-width:521px){.connect-grid .cform{max-width:520px}}
@media(min-width:521px) and (max-width:820px){.connect-grid .cform{max-width:560px}}
/* Computers: each label ~39px above its own line against ~55px below the line
   before it, so it reads with the field below rather than between the two. */
@media(min-width:821px){
  .cform > label{margin-bottom:0}
  .cform input,.cform textarea{padding-top:.15rem}
}
/* Phones and tablets: tighter form. Each label sits 32px above its own line and
   38px below the field before it, so it reads with the field below; every gap
   stays under the 48px section break. Label and field together remain a 52px
   tap area (the label focuses its field). */
@media(max-width:820px){
  .cform label{margin:2.25rem 0 .1rem}
  .cform label:first-of-type{margin-top:0}
  .cform input{padding:.1rem 0 .35rem;line-height:1.25}
  .cform textarea{padding:.1rem 0 .35rem;height:5.25rem}
  .cform-choice{margin-top:2.25rem}
  .cform-choice legend{margin-bottom:.7rem}
  .cform .btn{margin-top:2rem}
  /* Stacked under Direct contact, the form needs a little more than the 37px
     line pitch above it to read as its own block, optically matching the gap
     between the supporting line and Next steps. */
  .connect-grid .cform{margin-top:.4rem}
}
.form-note{font-size:var(--fs-fine);color:var(--stone);font-weight:400;margin-top:.4rem}
.form-note a{border-bottom:1px solid var(--brass);text-decoration:none}
/* Outcome notices, one pair used by both submission paths. Without
   JavaScript the Pages Function redirects to /contact#sent or
   /contact#send-failed and :target reveals the matching one; with
   JavaScript site.js adds .on to the same element. Either way the standing
   "Prefer email?" line steps aside so the address is not printed twice.
   They inherit .form-note, so the notice looks identical either way. */
.form-sent{display:none;scroll-margin-top:7rem}
.form-sent:target,.form-sent.on{display:block}
.form-sent:target ~ .form-note,.form-sent.on ~ .form-note{display:none}

/* Off-screen but present in the accessibility tree. #form-status is a live
   region that must stay rendered to be announced, and position:absolute
   keeps it out of .cform's flex flow so it adds no gap while empty. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- privacy notice ----------
   Left-aligned on the site's .wrap edge, with a reading measure. padding-block only: this element also carries .wrap.
   9rem puts the heading at the same height as the other pages' first line. */
.legal{padding-block:9rem 6rem}
.legal > *{max-width:680px}
.legal h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:1.12;margin-bottom:.8rem}
.legal h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.2vw,1.75rem);line-height:1.25;margin:3rem 0 1rem}
.legal p,.legal li{font-size:var(--fs-body);line-height:1.8;color:var(--ink)}
.legal p{margin-bottom:1.1rem}
.legal .legal-date{font-size:var(--fs-fine);color:var(--stone);margin-bottom:2.6rem}
.legal .legal-id{color:var(--stone);font-size:var(--fs-compact)}
.legal ul{padding-left:1.2rem;margin-bottom:1.1rem}
.legal li{margin-bottom:.5rem;padding-left:.2rem}
.legal li::marker{color:var(--stone)}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--brass)}
@media(max-width:820px){.legal{padding-top:8rem}.legal p,.legal li{line-height:1.7}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hairline);padding:3.5rem 0 4rem}
@media(max-width:820px){footer{padding-top:1.7rem}}
.foot-in{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
.foot-l .wordmark{font-size:1.05rem}
.foot-l p{font-size:var(--fs-fine);color:var(--stone);margin-top:.7rem;font-weight:400}
/* Registration details: deliberately the smallest text on the page. */
.foot-l .foot-legal{font-size:.6875rem;margin-top:.5rem;letter-spacing:.01em}
.foot-r{display:flex;gap:2rem;list-style:none;flex-wrap:wrap}
.foot-r a{font-size:var(--fs-label);font-weight:500;letter-spacing:.15em;text-transform:uppercase;
color:var(--stone);text-decoration:none}
.foot-r a:hover{color:var(--ink)}

/* ---------- mobile typography ----------
   1.9 leading over a 40–46 character measure reads as stringy on a phone;
   the lines drift apart faster than the eye can group them. 1.7 holds the
   paragraph together. Desktop keeps 1.9, where the measure is 60–70. */
@media(max-width:820px){
  .intro-txt p,.contact-head p{line-height:1.7}
}
/* Tablets and phones on their side: the stacked phone layout, but at phone
   sizes the text sat in a column with a third of the screen empty beside it
   and read as small. Text takes the computer sizes (17px text, 15px compact,
   set with the tokens at the top) and never more. The column and portrait
   widen to keep the proportions. */
@media(min-width:521px) and (max-width:820px){
  .intro-txt p,.intro-cred{max-width:560px}
  .intro-fig{max-width:370px}
  .connect h2{font-size:1.875rem}

  /* Spacing halfway between phone and computer, every gap scaled alike so the
     phone's proportions hold. Visible gaps: section breaks ~64-68px (phone 48,
     computer 80+), supporting line -> Next steps 54 (46 / 62), heading -> its
     line 29 (22 / 34-38), between form fields 48 (42 / 55). The contact
     headings and the Next steps list keep the computer spacing instead. */
  /* hero text sizes and the headline's height on the page match computers,
     so nothing in the hero moves or resizes as the layout stacks at 820px */
  .hero{padding-top:9rem;padding-bottom:1.875rem}
  .intro{padding:2rem 0 1.85rem}
  .connect{padding-top:1.95rem;padding-bottom:4rem}
  .contact-page{padding-bottom:4rem}
  .intro-grid{gap:2.2rem}
  .intro-txt p:last-of-type{margin-bottom:2.2rem}
  .connect-grid{row-gap:2.5rem}
  .connect-info .eyebrow:not(:first-child){margin-top:2.3rem}
  .contact-head{margin-bottom:2.5rem}
  .connect-grid .cform{margin-top:.5rem}
  .hero-txt h1{margin-bottom:.5rem}
  /* the same heading-to-line gap as computers, so it holds as the layout stacks */
  .connect h2{margin-bottom:calc(.25rem - 2.5rem)}
  .cform label{margin-top:2.6rem}
  .cform label:first-of-type{margin-top:0}
  .cform-choice{margin-top:2.6rem}
  .cform-choice legend{margin-bottom:.8rem}
  .cform .btn{margin-top:2.25rem}
}
/* 32px of side margin is a tenth of a small phone's width. 24px gives the
   measure back without crowding the edge. */
@media(max-width:520px){
  .wrap{padding-left:1.5rem;padding-right:1.5rem}
}

/* ---------- display weight ----------
   Crimson Pro at 300 for every display setting. Kept as one rule so the
   display weight is changed in a single place. */
.hero-txt h1,.intro-txt h2,.connect h2,.contact-head h1{font-weight:300}

/* Wordmark follows var(--serif) with the headings; weight 300 keeps it thin
   and airy rather than the base rule's 500. */
.wordmark{font-weight:300}