/* Crow Studios — public site
   One stylesheet for every public page. The homepage's 3D scene is the <crow-scene> web component (js/crow-scene.min.js);
   the other pages use still renders of the same crow. Fonts are self-hosted (SIL Open Font License, see /fonts). */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/cormorant-garamond-latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/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(/fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2')}

:root{
  --bg:#0B0B0E;          /* Obsidian: page ground */
  --surface:#101117;     /* Night: placeholders, panels */
  --line:#1E2029;        /* Plume: hairlines */
  --line-strong:#2A2C38;
  --ghost:#3A3D4C;       /* ghost button border */
  --text:#EDECE8;        /* Bone */
  --muted:#B9B8C2;       /* Pewter: body copy, navigation */
  --faint:#8A8B97;       /* Ash: captions, footer */
  --sheen:#8E96FF;       /* focus rings only */
  --serif:'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --text-shadow:0 1px 28px rgba(11,11,14,.9);
  --glass:rgba(11,11,14,.72);
  --sky:linear-gradient(to top, #141623 0%, #0e0f16 42%, #0B0B0E 78%);
  --dawn:radial-gradient(90% 55% at 72% 108%, rgba(232,150,104,.34), rgba(176,104,112,.20) 34%, rgba(92,76,132,.10) 62%, transparent 82%),
         linear-gradient(to top, #2b2132 0%, #1b1b2d 32%, #11131e 64%, #0B0B0E 100%);
  --gutter:40px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--sheen); outline-offset:3px; border-radius:2px}
.visually-hidden{position:absolute !important; 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:16px; top:-60px; z-index:10; padding:10px 16px; border-radius:2px; background:var(--text); color:var(--bg); font-size:15px; font-weight:500; text-decoration:none}
.skip-link:focus{top:12px}
.wrap{max-width:1280px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter)}

/* ---------- Header ---------- */
.site-header{position:relative; z-index:3; max-width:1280px; margin:0 auto; padding:18px var(--gutter); display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 32px}
.site-header--overlay{position:absolute; top:0; left:0; right:0}
.brand{display:inline-flex; align-items:center; min-height:44px; color:var(--text); text-decoration:none}
/* Outlined lettering, identical to Cormorant Garamond 500 at 22px with .16em tracking. The box ends exactly on the
   text baseline (an <svg>'s baseline is its bottom edge), so the menu lines up on it; talon tips overshoot slightly. */
.brand .lockup{display:block; flex:none; align-self:flex-start; width:234px; height:29px; overflow:visible}
.site-nav{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 28px}
.site-nav a{display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; font-size:15px}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text)}
.site-nav .signin span{font-size:13px; font-weight:500; line-height:1.4; color:var(--bg); background:var(--text); border:1px solid var(--text); border-radius:999px; padding:4px 14px; transition:background-color .2s, border-color .2s}
.site-nav .signin:hover span{background:#fff; border-color:#fff}
/* The menu's last place holds "Sign in" or, once js/site.js knows the visitor is signed in, a round link to the roost
   and "Sign out". Both sit in one grid cell, the one not shown hidden but keeping its room, so the place is as wide as
   the wider and the links before it never move. "Sign in" keeps to its right-hand end. */
.site-nav .account{display:inline-grid; align-items:baseline; justify-items:end}
.site-nav .account > *{grid-area:1/1}
.site-nav .signed-in{display:inline-flex; align-items:baseline; gap:10px; visibility:hidden}
.site-nav .account.in > .signin{visibility:hidden}
.site-nav .account.in > .signed-in{visibility:inherit}
/* When the menu wraps under the lockup it starts at the left, so "Sign in" follows Contact there. The lockup, the
   gap and the menu add up to 641px wide, so a change to the menu changes this too. */
.site-header{container-type:inline-size}
@container (width < 641px){.site-nav .account{justify-items:start}}
/* Signed in, the pill is a sign-out form whose button is dressed as the link */
.site-nav form.signin{display:inline-flex; margin:0}
.site-nav .signin button{display:inline-flex; align-items:center; min-height:44px; margin:0; padding:0; border:0; background:none; color:var(--muted); font:inherit; font-size:15px; cursor:pointer}
/* Signed in: a round link to the roost beside "Sign out", showing the logo's crow close on its head */
.site-nav .roost{display:inline-flex; align-items:center; align-self:center; min-height:44px}
.site-nav .roost img{display:block; width:28px; height:28px; border:2px solid var(--text); border-radius:50%; background:var(--bg); transition:border-color .2s}
.site-nav .roost:hover img{border-color:#fff}
.site-nav .roost:focus-visible{outline:none}
.site-nav .roost:focus-visible img{outline:2px solid var(--sheen); outline-offset:3px}
/* Signed in a moment ago (the hint the head script reads): the place stays empty until site.js has the answer and the
   crow, so "Sign in" doesn't show before "Sign out"; two seconds at most */
.signed-in-hint .site-nav .account{visibility:hidden; animation:account-wait 0s 2s forwards}
@keyframes account-wait{to{visibility:visible}}
/* Whichever is shown comes in a tenth of a second after it's shown, or after the hint is gone, fading in as it slides
   8px from the right */
@media (prefers-reduced-motion:no-preference){
  :root:not(.signed-in-hint) .site-nav .account:not(.in) > .signin,
  :root:not(.signed-in-hint) .site-nav .account.in > .signed-in{animation:account-in .8s ease-in-out .1s both}
}
@keyframes account-in{from{opacity:0; transform:translateX(8px)}}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:300; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(52px,6.4vw,96px); line-height:.98; text-wrap:balance}
h2{font-size:clamp(40px,4.8vw,72px); line-height:1.02; text-wrap:balance}
h3{font-size:32px; line-height:1.1; font-weight:400}
p{margin:0}
.lede{margin-top:28px; color:var(--muted); font-size:19px; max-width:34em; text-wrap:pretty}
.muted{color:var(--muted)}
.faint{color:var(--faint); font-size:14px}

/* ---------- Buttons and links ---------- */
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.actions--center{justify-content:center}
/* One size for all: the width of "See what we do". .btn--auto grows for longer labels. */
.btn{display:inline-flex; align-items:center; justify-content:center; width:10.68em; min-height:52px; padding:0 20px; white-space:nowrap; border-radius:2px; border:0; font:500 15px/1 var(--sans); text-decoration:none; cursor:pointer; text-shadow:none; transition:background-color .2s, border-color .2s}
.btn--auto{width:auto; min-width:10.68em}
.btn-primary{background:var(--text); color:var(--bg)}
.btn-primary:hover{background:#fff}
.btn-ghost{background:transparent; border:1px solid var(--ghost); color:var(--text)}
.btn-ghost:hover{border-color:var(--text)}
.text-link{display:inline-flex; align-items:center; min-height:44px; color:var(--text); font-size:15px; text-decoration:underline; text-decoration-color:var(--ghost); text-underline-offset:6px; transition:text-decoration-color .2s}
.text-link:hover{text-decoration-color:var(--text)}

/* ---------- Entrance ---------- */
.rise{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.15s}.d2{animation-delay:.35s}.d3{animation-delay:.55s}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

/* ---------- Page hero with a still of the crow (every page but the homepage) ---------- */
.hero{position:relative; min-height:780px; display:flex; overflow:hidden; background:var(--bg)}
.hero--compact{min-height:720px}
.hero--legal{min-height:680px}
.hero-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 40%}
.hero-media--services{object-position:70% 20%}
.hero-media--work{object-position:72% 40%}
.hero-media--contact{object-position:75% 35%}
.hero-media--legal{object-position:70% 50%}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:26%; background:linear-gradient(to bottom, rgba(11,11,14,0), var(--bg)); pointer-events:none}
.hero-body{position:relative; z-index:1; width:100%; max-width:1280px; margin:0 auto; padding:80px var(--gutter) 0; display:flex; align-items:center}
.hero-copy{max-width:540px; text-shadow:var(--text-shadow)}

/* ---------- Sections ---------- */
.section{padding-top:120px; padding-bottom:120px}
.section--tight-top{padding-top:40px}
.band-sky{background:linear-gradient(to bottom, #0B0B0E 0%, #0e0f16 50%, #0B0B0E 100%)}
.split{display:flex; flex-wrap:wrap; align-items:flex-start; gap:48px 80px}
.split > .intro{flex:1 1 340px; display:flex; flex-direction:column; gap:20px}
.split > .intro p{max-width:30em; font-size:17px; color:var(--muted); text-wrap:pretty}
.split > .detail{flex:2 1 560px; min-width:0}
.statement{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 64px}
.statement > h2{flex:1 1 420px}
.statement > p{flex:1 1 420px; max-width:30em; font-size:17px; color:var(--muted); text-wrap:pretty}

.rule-list{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line)}
.rule-list li{padding:30px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.rule-list p{font-size:16px; color:var(--muted)}

.options{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr)); gap:40px; margin-top:56px}
.option{border-top:1px solid var(--line-strong); padding-top:28px; display:flex; flex-direction:column; gap:14px}
.option > p:first-of-type{flex:1; font-size:16px; color:var(--muted)}

/* Every page ends at dawn */
.cta-dawn{background:var(--dawn); text-align:center}
.cta-dawn .wrap{padding-top:160px; padding-bottom:120px; display:flex; justify-content:center}
.cta-dawn .cta-copy{max-width:640px}
.cta-dawn .lede{margin-left:auto; margin-right:auto}

/* ---------- Work ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; text-shadow:none}
.chip{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--ghost); background:rgba(11,11,14,.5); color:var(--muted); font:400 15px/1 var(--sans); cursor:pointer; transition:background-color .2s, color .2s, border-color .2s}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--text); border-color:var(--text); color:var(--bg)}
.featured{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(540px,100%),1fr)); gap:48px; align-items:center}
.featured-copy{display:flex; flex-direction:column; gap:18px}
.featured-copy h2{font-size:clamp(40px,4.8vw,64px)}
.featured-copy .actions{margin-top:18px}
.placeholder{display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:4px; background:var(--sky); color:var(--faint); font-size:14px; text-align:center; padding:16px; transition:border-color .25s}
.placeholder--wide{aspect-ratio:16/10}
.placeholder--tile{aspect-ratio:4/3}
.projects{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(520px,100%),1fr)); gap:64px 40px}
.tile{display:flex; flex-direction:column; gap:16px}
.tile:hover .placeholder{border-color:var(--ghost)}
.tile-meta{margin-top:4px; display:flex; justify-content:space-between; gap:16px; font-size:14px; color:var(--faint)}
.tile p:last-child{font-size:16px; color:var(--muted)}
.tile[hidden]{display:none}
.quote{margin:0 auto; max-width:820px; display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center}
.quote blockquote{margin:0; font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(28px,3vw,40px); line-height:1.3; text-wrap:balance}
.quote figcaption{font-size:14px; color:var(--faint)}

/* ---------- Contact ---------- */
.contact-body{background:radial-gradient(90% 40% at 72% 104%, rgba(232,150,104,.30), rgba(176,104,112,.18) 34%, rgba(92,76,132,.09) 62%, transparent 82%),
                         linear-gradient(to top, #2b2132 0%, #1b1b2d 22%, #11131e 48%, #0B0B0E 78%)}
.contact-body .wrap{padding-top:40px; padding-bottom:140px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:48px 64px}
.details{flex:1 1 320px; margin:0; border-top:1px solid var(--line)}
.details > div{display:grid; grid-template-columns:110px minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline}
.details dt{font-size:14px; color:var(--faint)}
.details dd{margin:0; font-size:16px; color:var(--muted)}
.details a{color:var(--text)}
.form-panel{flex:2 1 520px; min-width:0; padding:48px; background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:4px}
.form-panel h2{font-size:44px}
.form{display:flex; flex-direction:column; gap:26px}
.form-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%),1fr)); gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field label,.field legend{font-size:14px; color:var(--muted)}
.field .optional{color:var(--faint)}
.input,.select,.textarea{width:100%; min-height:52px; padding:14px 16px; background:var(--bg); border:1px solid var(--line-strong); border-radius:2px; color:var(--text); font:400 16px/1.4 var(--sans)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ghost)}
.textarea{line-height:1.6; resize:vertical; min-height:168px}
.input::placeholder,.textarea::placeholder{color:#6E6F7A}
.select-wrap{position:relative}
.select{appearance:none; -webkit-appearance:none; padding-right:44px}
.select-wrap svg{position:absolute; right:18px; top:50%; margin-top:-7px; pointer-events:none}
fieldset.field{margin:0; padding:0; border:0}
fieldset.field legend{padding:0; margin-bottom:10px}
.choice{display:flex; flex-wrap:wrap; gap:8px}
.choice input{position:absolute; opacity:0; width:1px; height:1px}
.choice label{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--ghost); color:var(--muted); font-size:15px; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s}
.choice label:hover{border-color:var(--muted)}
.choice input:checked + label{background:var(--text); border-color:var(--text); color:var(--bg)}
.choice input:focus-visible + label{outline:2px solid var(--sheen); outline-offset:3px}
.field-error{font-size:14px; color:#F2A7A0}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:#B8665E}
.form-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px 24px}
.form-foot p{max-width:320px; font-size:14px; line-height:1.55; color:var(--faint)}
.form-foot a{color:var(--muted)}
.form-alert{padding:14px 16px; border:1px solid #6B3D3A; border-radius:2px; background:rgba(107,61,58,.18); font-size:15px; color:#F2D6D2}
.form-alert a{color:var(--text)}
.trap{position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden}
/* Captcha: the ALTCHA widget ("I'm not a robot", /js/altcha.min.js) in the form's own colors. Hidden without JavaScript, where the note shows instead. */
.field--captcha{font-size:15px; --altcha-color-base:var(--bg); --altcha-color-base-content:var(--muted); --altcha-border-color:var(--line-strong); --altcha-border-radius:2px; --altcha-padding:14px; --altcha-max-width:320px;
  --altcha-checkbox-border-color:var(--ghost); --altcha-checkbox-border-radius:2px; --altcha-color-neutral:var(--ghost); --altcha-color-success:var(--text); --altcha-color-success-content:var(--bg);
  --altcha-color-error:#6B3D3A; --altcha-color-error-content:#F2D6D2; --altcha-spinner-color:var(--muted); --altcha-color-primary:var(--sheen); --altcha-checkbox-outline-color:var(--sheen)}
.field--captcha altcha-widget{display:none}
.js .field--captcha altcha-widget{display:block; min-height:52px}
.field--captcha .altcha-main{min-height:52px; justify-content:center}
.field--captcha .altcha-checkbox-wrap label{font-size:15px; color:var(--muted); cursor:pointer}
.field--captcha .altcha-checkbox input:focus-visible{outline:2px solid var(--sheen); outline-offset:3px}
.field--captcha .altcha-checkbox svg{pointer-events:none}   /* the tick sits over the box; let taps reach the box */
.field--captcha .altcha-error{font-size:14px; color:#F2A7A0}
.captcha-note{max-width:34em; font-size:14px; line-height:1.55; color:var(--faint)}
.captcha-note a{color:var(--muted)}
.sent{min-height:560px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:24px}
.sent img{width:49px; height:56px}
.sent h2{font-size:52px}
.sent p{max-width:420px; font-size:17px; color:var(--muted)}
.sent[hidden],.form[hidden]{display:none}

/* ---------- Terms & Privacy ---------- */
.tabs{align-self:flex-start; display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(11,11,14,.55); text-shadow:none}
.tabs a{display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:999px; color:var(--muted); font-size:15px; text-decoration:none; transition:background-color .2s, color .2s}
.tabs a[aria-selected="true"]{background:var(--text); color:var(--bg)}
.legal-hero .hero-body{flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:28px; padding-top:170px; padding-bottom:64px; text-shadow:var(--text-shadow)}
.legal-hero .doc-head{display:flex; flex-direction:column; gap:16px; max-width:640px}
.legal-hero .doc-head p:not(.faint){font-size:19px; color:var(--muted)}
/* Without JavaScript both documents show, one after the other, under the Terms heading. With it, the tabs pick one. */
.legal-hero .doc-head--privacy,.legal-hero .hero-media--privacy{display:none}
.js [data-doc="privacy"] .legal-hero .doc-head--privacy{display:flex}
.js [data-doc="privacy"] .legal-hero .hero-media--privacy{display:block}
.js [data-doc="privacy"] .legal-hero .doc-head--terms,.js [data-doc="privacy"] .legal-hero .hero-media--terms{display:none}
.js [data-doc="terms"] .doc--privacy,.js [data-doc="privacy"] .doc--terms{display:none}
.doc-title{font-size:clamp(40px,4.8vw,56px); margin-bottom:8px}
.js .doc-title{display:none}
.legal-body .wrap{padding-top:72px; padding-bottom:140px}
.doc{display:flex; flex-wrap:wrap; align-items:flex-start; gap:48px 80px}
.doc + .doc{margin-top:96px}
.toc{flex:1 1 240px; display:flex; flex-direction:column}
.toc > span{padding-bottom:12px; font-size:14px; color:var(--faint)}
.toc a{display:flex; align-items:center; gap:14px; min-height:44px; border-top:1px solid var(--line); color:var(--muted); font-size:15px; text-decoration:none}
.toc a:hover{color:var(--text)}
.toc a span{min-width:1.4em; font-size:13px; color:var(--faint)}
.doc-text{flex:999 1 560px; min-width:0; max-width:760px; display:flex; flex-direction:column; gap:40px}
.doc-summary{font-family:var(--serif); font-style:italic; font-weight:300; font-size:26px; line-height:1.45}
.doc-text section{display:flex; flex-direction:column; gap:12px; padding-top:32px; border-top:1px solid var(--line); scroll-margin-top:24px}
.doc-text h2{display:flex; align-items:baseline; gap:16px; font-size:32px; font-weight:400; line-height:1.1}
.doc-text h2 span{font-family:var(--sans); font-size:14px; color:var(--faint)}
.doc-text section p{font-size:17px; line-height:1.75; color:var(--muted)}

/* ---------- Not found ---------- */
.notfound{position:relative; overflow:hidden; min-height:100vh; min-height:100svh; display:flex; align-items:center; background:var(--sky)}
.notfound::after{content:""; position:absolute; left:0; right:0; bottom:0; height:22%; background:linear-gradient(to bottom, rgba(11,11,14,0), var(--bg)); pointer-events:none}
.notfound .wrap{position:relative; z-index:1; width:100%; padding-top:120px; padding-bottom:120px}
.hero-media--feather{object-position:66% 50%}

/* ---------- Footer ---------- */
.site-footer{position:relative; z-index:2; border-top:1px solid var(--line); background:var(--bg)}
.site-footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 24px; padding-top:18px; padding-bottom:18px; color:var(--faint); font-size:14px}
.site-footer nav{display:flex; flex-wrap:wrap; gap:0 24px}
.site-footer a{display:inline-flex; align-items:center; min-height:44px; color:var(--faint); text-decoration:none}
.site-footer a:hover,.site-footer a[aria-current="page"]{color:var(--text)}

/* ---------- Homepage: copy over the live 3D crow, one sticky panel per scroll stage ---------- */
.home main{position:relative; z-index:2}
.home .panel{position:sticky; top:0; min-height:100vh; min-height:100svh; display:flex; align-items:center}
.home .panel > .wrap{width:100%}
.home .copy{max-width:520px; text-shadow:var(--text-shadow)}
.home #hero{height:115vh}
.home #disciplines{height:170vh}
.home #disciplines .panel{flex-direction:column; justify-content:center; align-items:stretch; gap:40px}
.home #disciplines .head{text-align:center; max-width:none}
.home .stage-split{width:100%; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; padding-top:13vh; padding-bottom:16vh}
.home .pair{display:flex; justify-content:space-between; gap:40px}
.home .pair article{max-width:280px; text-shadow:var(--text-shadow)}
.home .pair article:last-child{text-align:right}
.home .pair p{margin-top:12px; color:var(--muted); font-size:16px}
.home #approach{height:190vh}
.home #approach .panel > .wrap{display:flex; justify-content:flex-end}
.home #approach .copy{max-width:440px}
.home .steps{list-style:none; margin:32px 0 0; padding:0; display:grid; gap:22px}
.home .steps span{color:var(--muted); font-size:16px}
.home .steps strong{display:block; font-family:var(--serif); font-weight:400; font-size:28px; color:var(--text); line-height:1.1}
.home #finale{height:170vh}
.home #finale .panel{align-items:flex-end; justify-content:center; padding-bottom:9vh}
.home #finale .copy{text-align:center; max-width:640px; margin:0 auto}
.home #finale .lede{margin-left:auto; margin-right:auto}
.home .rise.d1{animation-delay:.9s}.home .rise.d2{animation-delay:1.1s}.home .rise.d3{animation-delay:1.3s}
/* Shown only without JavaScript: the faint logo where the crow would stand (the component handles every other failure) */
.crow-fallback{position:fixed; left:71%; top:54%; height:66vh; width:calc(66vh * 100 / 113.7); transform:translate(-50%,-50%); z-index:0; pointer-events:none; opacity:.1}

/* ---------- Phones and narrow windows ---------- */
@media (max-width:760px), (max-aspect-ratio:5/6){
  :root{--gutter:22px}
  h1{font-size:clamp(44px,12vw,64px)}
  h2{font-size:clamp(32px,9vw,44px)}
  h3{font-size:26px}
  .section{padding-top:80px; padding-bottom:80px}
  .section--tight-top{padding-top:24px}
  .cta-dawn .wrap{padding-top:112px; padding-bottom:88px}
  .hero,.hero--compact,.hero--legal{min-height:100vh; min-height:100svh}
  .hero-body{align-items:flex-end; padding-top:140px; padding-bottom:7vh}
  .hero-copy{max-width:none; padding:20px; border-radius:4px; background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  .legal-hero .hero-body{justify-content:flex-end; padding-top:140px; padding-bottom:7vh}
  .notfound{align-items:flex-end}
  .notfound .wrap{padding-top:140px; padding-bottom:7vh}
  .hero-media--feather{object-position:50% 35%}
  .legal-hero .doc-head{padding:20px; border-radius:4px; background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  .form-panel{padding:24px}
  .form-panel h2,.sent h2{font-size:36px}
  .details > div{grid-template-columns:90px minmax(0,1fr)}
  .crow-fallback{left:50%; top:41%; height:40vh; width:calc(40vh * 100 / 113.7)}

  .home .site-header{position:absolute; top:0; left:0; right:0}   /* so the hero's buttons sit above the fold on phones */
  .home .panel{align-items:flex-end; padding-bottom:7vh}
  .home .copy,.home .pair article{background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:18px; border-radius:4px; max-width:none}
  .home #hero .copy,.home #finale .copy{background:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0}
  .home .pair{flex-direction:column; gap:14px}
  .home .pair article:last-child{text-align:left}
  .home #disciplines .panel{justify-content:flex-end; gap:16px}
  .home .stage-split{justify-content:flex-end; gap:14px; padding-top:0; padding-bottom:7vh}
  .home #approach .panel > .wrap{justify-content:stretch}
  .home .steps{gap:12px; margin-top:18px}
  .home .steps strong{font-size:22px}
  .home .steps span,.home .pair p{font-size:15px}
}
@media (max-width:480px){
  .site-nav{gap:0 20px}
  .site-nav .nav-approach{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none}
  *{scroll-behavior:auto !important}
}