/* KnoxHowell Architects · design system
   Spec: docs/superpowers/specs/2026-07-30-knoxhowell-website-design.md
   To adopt licensed Clarkson later: change --font-display and the @font-face
   block below. The fonts are self-hosted, so there is no Google Fonts link. */

/* Archivo and Inter Tight, self-hosted from Google Fonts, both SIL Open Font
   License 1.1 (see fonts/README.md). Both are VARIABLE fonts, so one file per
   subset covers the whole weight range and there is no separate file per weight.
   The latin-ext faces only download if an accented character actually appears,
   which unicode-range handles, so they cost nothing on an all-English page. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('../fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('../fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --ink-950:#0A0A0A; --ink-800:#1F1F1F; --ink-600:#3C3C3C; --ink-400:#767676;
  --ink-300:#A8A8A8; --ink-200:#D4D4D4; --ink-100:#E8E8E8; --ink-50:#F5F5F5;
  --brand-red:#97464b;
  --gutter:clamp(24px,5vw,96px);
  --nav-h:75px;
  --font-display:'Archivo',sans-serif;
  --font-body:'Inter Tight',sans-serif;
  /* type scale — every heading picks from these six tokens */
  --text-display:clamp(48px,8vw,120px);   /* giant page titles: pagehead, cs-head */
  --text-title:clamp(30px,4.4vw,68px);    /* page-header h1s: about, contact */
  --text-section:clamp(30px,3.5vw,52px);  /* section h2s: show-split, meta-row */
  --text-heading:clamp(24px,2.6vw,40px);  /* mid headings over long copy: statement, studio */
  --text-card:clamp(20px,2.2vw,30px);     /* card titles: duo */
  --text-label:12px;                      /* uppercase labels: details, addr */
  --shadow-float:0 2px 6px rgba(10,10,10,.05),0 12px 32px rgba(10,10,10,.07);
  --ease-img:cubic-bezier(.2,.6,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0;}
html{scroll-behavior:smooth;}
body{background:#fff;color:var(--ink-600);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;max-width:1750px;margin:0 auto;}
img{max-width:100%;display:block;}
a{color:var(--ink-950);}
a:active{opacity:.7;}
:focus-visible{outline:1px solid var(--ink-950);outline-offset:4px;}

/* custom cursor: plus by default, circle over interactive elements; white variants on dark surfaces */
html,body{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M20 8v24'/%3E%3Cpath d='M8 20h24'/%3E%3C/g%3E%3C/svg%3E") 20 20,auto;}
a:hover,button:hover{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='12' stroke='%23000' stroke-width='3' fill='none'/%3E%3C/svg%3E") 20 20,pointer;}
input:hover,textarea:hover{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='12' stroke='%23000' stroke-width='3' fill='none'/%3E%3C/svg%3E") 20 20,text;}
.film{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M20 8v24'/%3E%3Cpath d='M8 20h24'/%3E%3C/g%3E%3C/svg%3E") 20 20,auto;}
.film a:hover,.film button:hover,.menu-close:hover{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='12' stroke='%23fff' stroke-width='3' fill='none'/%3E%3C/svg%3E") 20 20,pointer;}

/* font-weight is stated so the kicker looks identical whether it is a div or,
   where it labels a whole section, an h2 (browsers default headings to bold). */
.kicker{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);}

.frame{overflow:hidden;background:var(--ink-50);position:relative;}
.frame img{width:100%;object-fit:cover;transition:transform 1.2s var(--ease-img);}
.frame:hover img{transform:scale(1.03);}
.frame.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in-view{opacity:1;transform:none;}

/* navigation */
.site-nav{position:sticky;top:0;z-index:40;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:26px var(--gutter);border-bottom:1px solid transparent;transition:box-shadow .3s ease,border-color .3s ease;}
.site-nav.scrolled{border-color:var(--ink-100);box-shadow:var(--shadow-float);}
.site-nav .logo img{height:31px;width:auto;}
.site-nav .links{display:flex;align-items:center;gap:34px;}
.site-nav .links a{font-size:14px;font-weight:500;color:var(--ink-950);text-decoration:none;position:relative;}
.site-nav .links a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--ink-950);transition:width .3s ease;}
.site-nav .links a:hover::after,.site-nav .links a:focus-visible::after,.site-nav .links a.active::after{width:100%;}
.site-nav .icon svg{width:17px;height:17px;stroke:var(--ink-950);fill:none;stroke-width:1.5;display:block;}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:8px;}
.burger span{display:block;width:26px;height:2px;background:var(--ink-950);}
.menu-overlay{position:fixed;inset:0;background:#fff;z-index:60;display:none;flex-direction:column;justify-content:center;padding:var(--gutter);gap:8px;}
.menu-overlay.open{display:flex;}
.menu-overlay a{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,10vw,64px);color:var(--ink-950);text-decoration:none;letter-spacing:-.02em;line-height:1.15;}
.menu-overlay a:hover,.menu-overlay a:focus-visible{color:var(--ink-400);}
.menu-overlay .socials{margin-top:32px;display:flex;gap:24px;}
.menu-overlay .socials a{font-family:var(--font-body);font-size:14px;font-weight:500;}
.menu-close{position:absolute;top:26px;right:var(--gutter);background:none;border:1px solid var(--ink-950);color:var(--ink-950);width:44px;height:44px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.menu-close:hover{background:var(--ink-950);color:#fff;}

/* home */
.hero{padding:8px var(--gutter) 0;display:flex;flex-direction:column;justify-content:flex-start;min-height:calc(100svh - var(--nav-h));}
.hero::before{content:"";flex:4;}
.hero::after{content:"";flex:6;}
.hero .frame{width:88%;margin:0 auto;}
.hero .frame img{aspect-ratio:2.15/1;height:min(calc((min(100vw,1750px) - var(--gutter)*2)/2.15),calc(100svh - var(--nav-h) - 180px));object-position:50% 100%;transform-origin:50% 100%;transition:transform 1.2s var(--ease-img),filter 1.2s var(--ease-img);}
.hero .frame:hover img{filter:grayscale(1);}
.hero .wordmark{position:relative;margin:-3.2vw auto 0;width:calc(88% - 140px);z-index:3;}
.statement{display:grid;grid-template-columns:1.2fr .9fr .5fr;gap:40px;align-items:end;padding:64px var(--gutter) 96px;}
.statement h1{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:var(--text-heading);line-height:1.12;letter-spacing:-.01em;}
.statement p{font-size:15px;max-width:44ch;}
.cta{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink-950);text-decoration:none;white-space:nowrap;transition:color .2s ease;}
.cta:hover,.cta:focus-visible{color:var(--brand-red);}
.cta .arr{display:inline-block;transition:transform .3s ease;}
.cta:hover .arr,.cta:focus-visible .arr{transform:translateX(6px);}
.statement .cta{justify-self:end;}

/* showcase cards (home + projects index) */
.show{padding:0 var(--gutter);margin-bottom:96px;}
.show>a{display:block;text-decoration:none;color:inherit;}
.show .frame img{aspect-ratio:2.3/1;}
.show-split{display:grid;grid-template-columns:1fr 1.85fr;gap:clamp(24px,3vw,56px);padding:0 var(--gutter);margin-bottom:96px;}
.show-split .txt{align-self:end;width:fit-content;text-decoration:none;color:inherit;}
.show-split .pic{display:block;}
.show-split .txt .kicker{margin-bottom:16px;}
.show-split h2{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:var(--text-section);letter-spacing:-.015em;line-height:1.05;}
.show-split .desc{font-size:21px;color:var(--ink-400);max-width:34ch;line-height:1.7;margin-top:16px;}
.show-split .frame img{aspect-ratio:1.6/1;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:0 var(--gutter);margin-bottom:96px;}
.duo .cell{display:block;text-decoration:none;color:inherit;}
.duo .frame img{aspect-ratio:4/3;}
.duo h2{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:var(--text-card);letter-spacing:-.01em;margin-top:16px;}
.duo .meta,.duo .desc{font-size:13px;color:var(--ink-400);margin-top:6px;}
.meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:32px;margin-top:22px;flex-wrap:wrap;}
.meta-row h2{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:var(--text-section);letter-spacing:-.015em;line-height:1;}
.meta-row .desc{font-size:14px;color:var(--ink-400);max-width:36ch;text-align:right;}
.meta{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--ink-400);flex-wrap:wrap;}
.chip{display:inline-block;border:1px solid var(--ink-200);color:var(--ink-600);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;}
.chip.dark{border-color:var(--ink-950);color:var(--ink-950);}
.soon .frame img{opacity:.55;}
.soon .frame::after{content:"Case study soon";position:absolute;right:14px;bottom:14px;background:rgba(255,255,255,.92);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:6px 10px;}

/* quote */
.quote{padding:110px var(--gutter);border-top:1px solid var(--ink-100);display:grid;}
.quote blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,3vw,42px);line-height:1.25;color:var(--ink-400);max-width:26ch;letter-spacing:-.01em;}
.quote b{color:var(--ink-950);font-weight:500;}
.quote cite{display:block;margin-top:28px;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);}
.quote .q{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s;}
.quote .q.on{opacity:1;visibility:visible;transition:opacity .9s ease;}

/* projects index head */
.pagehead{position:relative;padding:64px var(--gutter) 56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;}
.pagehead h1{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:var(--text-display);line-height:.95;letter-spacing:-.02em;}
/* absolutely anchored to the header's bottom padding edge so a larger size grows upward, never down */
.pagehead p{font-size:21px;max-width:44ch;position:absolute;right:var(--gutter);bottom:56px;}

/* 404 */
.nf-cta{padding:0 var(--gutter);margin:-48px 0 96px;}

/* case study */
.cs-head{padding:64px var(--gutter) 40px;}
.cs-head h1{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:var(--text-display);line-height:.95;letter-spacing:-.02em;margin-top:18px;}
.cs-head .sub{font-family:var(--font-display);font-weight:500;color:var(--ink-400);font-size:clamp(18px,2.2vw,30px);margin-top:14px;letter-spacing:-.01em;}
.cs-hero{padding:24px var(--gutter) 0;}
.cs-hero .frame img{aspect-ratio:2.1/1;}
.cs-body{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(40px,6vw,120px);padding:72px var(--gutter);}
.cs-body .narrative p{margin-bottom:20px;max-width:58ch;}
.cs-body .narrative p:first-child{font-family:var(--font-display);font-weight:500;font-size:clamp(19px,2vw,26px);line-height:1.4;color:var(--ink-950);letter-spacing:-.01em;max-width:32ch;}
.details{border-left:1px solid var(--ink-100);padding-left:clamp(24px,3vw,48px);}
.details h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-950);margin:28px 0 10px;}
.details h2:first-child{margin-top:0;}
.details p{font-size:14px;line-height:1.9;}
.cs-gal{padding:0 var(--gutter);display:grid;gap:40px;margin-bottom:88px;}
.cs-gal .full img{aspect-ratio:2.3/1;}
.cs-gal .pair{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.cs-gal .pair .frame img{aspect-ratio:4/3;}
.next{display:block;border-top:1px solid var(--ink-100);padding:72px var(--gutter);text-decoration:none;transition:background .3s ease;}
.next:hover{background:var(--ink-50);}
.next .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);}
.next .name{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:clamp(36px,5vw,72px);letter-spacing:-.02em;line-height:1.05;margin-top:10px;}
.next .name .arr{display:inline-block;transition:transform .3s ease;}
.next:hover .name .arr{transform:translateX(10px);}

/* about */
.ab-head{padding:64px var(--gutter) 56px;}
.ab-head h1{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:var(--text-title);line-height:1.06;letter-spacing:-.015em;max-width:20ch;margin-top:18px;}
/* min-height freezes the section at its pre-21px height (6 lines at 16px/1.6 + 88px padding) so the pinned paragraph grows upward, not the section downward */
.ab-intro{padding:0 var(--gutter) 88px;display:grid;grid-template-columns:1fr 1fr;gap:40px;position:relative;min-height:242px;}
.ab-intro p{font-size:21px;max-width:52ch;position:absolute;right:var(--gutter);bottom:88px;}
.film{background:var(--ink-950);padding:120px var(--gutter);position:relative;}
.film::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");}
.film .kicker{margin-bottom:48px;text-align:center;position:relative;z-index:1;}
.filmbox{aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center;position:relative;border:1px solid var(--ink-800);max-width:950px;margin:0 auto;z-index:1;}
.filmbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.filmbox .wm{width:44%;filter:invert(1);opacity:.95;}
.playbtn{position:absolute;width:78px;height:78px;border:1px solid #fff;background:rgba(0,0,0,.35);cursor:pointer;transition:background .3s ease;display:flex;align-items:center;justify-content:center;z-index:2;}
.playbtn::after{content:"";border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff;margin-left:4px;}
.playbtn:hover,.playbtn:focus-visible{background:rgba(255,255,255,.14);}
.filmbox.playing .wm,.filmbox.playing .playbtn{display:none;}
.studio{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,120px);padding:0 var(--gutter) 96px;align-items:center;}
.studio h2{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:var(--text-heading);letter-spacing:-.015em;line-height:1.1;margin:16px 0 20px;}
.studio p{font-size:21px;max-width:48ch;}
.studio .frame img{aspect-ratio:4/3;}
.how{border-top:1px solid var(--ink-100);padding:88px var(--gutter);text-align:center;}
.how .kicker{margin-bottom:56px;}
/* rules sit between columns, so each row's first column keeps a transparent border rather than
   none — it still occupies 1px and keeps all three columns exactly equal in width */
.stages{display:grid;grid-template-columns:repeat(3,1fr);row-gap:56px;}
.stage{padding:0 clamp(16px,2vw,28px);border-left:1px solid var(--ink-100);perspective:1400px;
  /* re-states .reveal's transition: a bare border-color transition here would replace it */
  transition:opacity .7s ease,transform .7s ease,border-color .22s ease;}
.stage:nth-child(3n+1){border-left-color:transparent;}
/* hover accents both rules bounding the hovered column; row-opening columns never take the accent */
.stage:not(:nth-child(3n+1)):hover,.stage:hover + .stage:not(:nth-child(3n+1)){border-left-color:var(--brand-red);}
/* hover (or tap, via .flip) turns the card over: numbering and title give way to the full text */
.stage .card{height:100%;display:grid;transform-style:preserve-3d;transition:transform .8s var(--ease-img);}
.stage.flip .card,.stage:focus-visible .card{transform:rotateY(180deg);}
/* hover-gated so iOS sticky tap-hover can't pin a card flipped after Read less unflips it */
@media (hover:hover){.stage:hover .card{transform:rotateY(180deg);}}
.stage .face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;}
.stage .back{transform:rotateY(180deg);text-align:left;}
.stage .back p{color:var(--ink-600);}
/* mobile-only control: the carousel flips by button rather than hover */
.stage .more{display:none;background:none;border:1px solid var(--ink-200);color:var(--ink-600);font-family:var(--font-body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;cursor:pointer;transition:border-color .2s ease,color .2s ease;}
.stage .more:hover,.stage .more:focus-visible{border-color:var(--ink-950);color:var(--ink-950);}
.stage .more:active{opacity:.7;}
/* clones exist only for the mobile carousel's endless loop */
.stage.sclone{display:none;}
.stage b{display:block;font-family:var(--font-display);font-weight:700;color:var(--brand-red);font-size:clamp(34px,4.4vw,64px);line-height:.9;letter-spacing:-.02em;margin-bottom:20px;}
.stage h3{font-family:var(--font-display);font-weight:600;color:var(--ink-950);font-size:clamp(17px,1.6vw,20px);line-height:1.2;letter-spacing:-.01em;margin-bottom:10px;}
.stage p{font-size:14px;color:var(--ink-400);text-wrap:pretty;}
/* sitting under the black film band the top hairline has nothing to divide */
.film + .how{border-top:0;}
.practice{border-top:1px solid var(--ink-100);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,120px);align-items:center;padding:96px var(--gutter);}
.practice .frame{width:75%;margin:0 auto;}
.practice .frame img{aspect-ratio:2/3;}
/* type mirrors .studio exactly: kicker, heading, 21px body */
.practice h2{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:var(--text-heading);letter-spacing:-.015em;line-height:1.1;margin:16px 0 20px;}
.practice p{font-size:21px;max-width:48ch;}
/* after the intro paragraph the copy runs at the home statement's body size;
   67ch at 15px spans the same physical width as the intro's 48ch at 21px */
.practice p + p{font-size:15px;max-width:67ch;margin-top:20px;}

/* contact */
.con{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,120px);padding:64px var(--gutter) 96px;}
.con .frame{align-self:start;}
.con .frame img{aspect-ratio:3/4;}
.con h1{font-family:var(--font-display);font-weight:700;color:var(--ink-950);font-size:var(--text-title);letter-spacing:-.015em;line-height:1.06;margin:16px 0 24px;}
.con .lede{max-width:48ch;margin-bottom:48px;}
.field{margin-bottom:26px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-950);margin-bottom:8px;font-weight:500;}
input,textarea{width:100%;border:1px solid var(--ink-200);background:#fff;padding:14px 16px;font-family:var(--font-body);font-size:15px;color:var(--ink-950);transition:border-color .2s ease;}
input:hover,textarea:hover{border-color:var(--ink-400);}
input:focus,textarea:focus{outline:none;border-color:var(--ink-950);}
textarea{min-height:140px;resize:vertical;}
.submit{background:var(--ink-950);color:#fff;font-family:var(--font-display);font-weight:600;font-size:15px;padding:16px 48px;border:1px solid var(--ink-950);cursor:pointer;transition:background .25s ease,color .25s ease;}
.submit:hover,.submit:focus-visible{background:#fff;color:var(--ink-950);}
.submit:active{background:var(--ink-600);border-color:var(--ink-600);color:#fff;}
.form-note{display:none;margin-top:18px;font-size:14px;color:var(--ink-950);border:1px solid var(--ink-200);padding:14px 16px;}
.form-note.show{display:block;}

/* footer */
.site-foot{border-top:1px solid var(--ink-100);padding:64px var(--gutter) 40px;}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;align-items:start;}
.fgrid .logo img{height:16px;width:auto;}
.fcred{display:flex;align-items:center;gap:24px;margin-top:28px;}
.fgrid .logo .fcred img{height:22px;width:auto;}
.fgrid p,.fgrid a{font-size:14px;color:var(--ink-600);text-decoration:none;display:block;line-height:1.9;transition:color .2s ease;}
.fgrid a:hover{color:var(--ink-950);}
.fgrid a[href^="mailto:"]:hover,.fgrid a[href^="tel:"]:hover,
.fgrid a[href^="mailto:"]:focus-visible,.fgrid a[href^="tel:"]:focus-visible{color:var(--brand-red);}
.fbottom{display:flex;justify-content:space-between;gap:24px;margin-top:64px;padding-top:24px;border-top:1px solid var(--ink-100);font-size:12px;color:var(--ink-400);flex-wrap:wrap;}

/* responsive */
@media (max-width:1050px){
  .site-nav .links{display:none;}
  .burger{display:flex;}
  .hero .frame img{height:min(calc((100vw - var(--gutter)*2)*1.4),calc(100svh - var(--nav-h) - 120px));}
  .hero .wordmark{width:90%;margin-top:14px;}
  .statement{grid-template-columns:1fr;gap:24px;}
  .statement .cta{justify-self:start;}
  .show-split{grid-template-columns:1fr;gap:20px;}
  .show-split .frame img{aspect-ratio:4/3;}
  .show .frame img{aspect-ratio:4/3;}
  .duo{grid-template-columns:1fr;gap:96px;}
  .pagehead{grid-template-columns:1fr;}
  .pagehead p{position:static;justify-self:start;}
  .meta-row{flex-direction:column;align-items:flex-start;}
  .meta-row .desc{text-align:left;}
  .cs-body{grid-template-columns:1fr;}
  .details{border-left:none;padding-left:0;border-top:1px solid var(--ink-100);padding-top:32px;}
  .cs-gal .pair{grid-template-columns:1fr;}
  .ab-intro{grid-template-columns:1fr;min-height:0;}
  .ab-intro p{position:static;justify-self:start;}
  .studio{grid-template-columns:1fr;}
  .practice{grid-template-columns:1fr;padding:72px var(--gutter);}
  .practice .frame{order:2;}
  /* the process becomes an endless one-card scroll-snap carousel, bled to the viewport edge
     so the centred card runs wide with a sliver of its neighbours peeking both sides */
  .stages{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gutter));padding:0;scrollbar-width:none;}
  .stages::-webkit-scrollbar{display:none;}
  .stage{flex:0 0 84%;scroll-snap-align:center;border-left:0;padding:0;display:flex;flex-direction:column;}
  .stage.sclone{display:flex;}
  /* inside a horizontal scroller the reveal lift would extend the scroll area: cards fade only */
  .stages .reveal{transform:none;}
  .stage .card{flex:1;height:auto;border:1px solid var(--ink-100);}
  .stage .face{padding:28px 22px;}
  .stage .more{display:inline-block;align-self:center;margin-top:18px;}
  .con{grid-template-columns:1fr;}
  .con .frame{order:2;}
  .fgrid{grid-template-columns:1fr;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;}
  .reveal{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* Crop classes, chosen per image in the CMS. They sit last so they also override the
   home hero's bottom pin (.hero .frame img). None of them resize anything: they only
   choose which part of the source stays in view when the frame is a different shape. */
.frame img.crop-top{object-position:50% 0%;}      /* pin the top edge, lose ground instead of sky */
.frame img.crop-high{object-position:50% 28%;}    /* subject sits high in the source */
.frame img.crop-centre{object-position:50% 50%;}  /* the default everywhere except the home hero */
.frame img.crop-low{object-position:50% 72%;}     /* subject sits low in the source */
.frame img.crop-bottom{object-position:50% 100%;} /* pin the bottom edge, lose sky instead of ground */
.frame img.crop-left{object-position:35% 50%;}    /* subject sits left of centre */
.frame img.crop-right{object-position:65% 50%;}   /* subject sits right of centre */