/* ---------------------------------------------------------------- fonts -- */
@font-face{font-family:'Playfair';font-style:normal;font-weight:400 800;
  font-display:swap;src:url(/assets/playfair-latin.ef05b30d.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:'Playfair';font-style:normal;font-weight:400 800;
  font-display:swap;src:url(/assets/playfair-latinext.319e6b2a.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:'InterVar';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/assets/inter-latin.260c81a4.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:'InterVar';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/assets/inter-latinext.1ad231aa.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;}

/* --------------------------------------------------------------- tokens -- */
:root{
  --ink:#141414;
  --ink-2:#1E1E1E;
  --ink-3:#2A2A2A;
  --paper:#F5F3EF;
  --surface:#FFFFFF;
  --body:#434343;
  --grey:#5A5854;

  --accent:#5C6B42;        /* olive - takes a WHITE label, 5.8:1 */
  --accent-600:#4A5735;
  --accent-ink:#5C6B42;    /* accent as text on light - 5.3:1 */
  --accent-lit:#9CAE79;    /* accent as text on dark   - 7.7:1 */
  --accent-fg:#fff;        /* the legible label on --accent - 5.8:1 */

  --line:rgba(20,20,20,.13);
  --line-strong:rgba(20,20,20,.22);
  --line-dark:rgba(255,255,255,.14);

  /* The reference sites all sit at radius 0. Paired with photography at
     full width it reads as considered; it is only austere when there are
     no pictures, which was the mistake in the previous pass. */
  --r-sm:0; --r:0; --r-lg:0; --r-xl:0;
  --shadow:none;
  --shadow-lg:none;

  --gut:clamp(20px,5vw,56px);
  --max:1340px;
  --sect:clamp(90px,11vw,176px);

  /* Header height is a token: the drawer padding and the sticky sidebar
     offset both derive from it, so they cannot drift apart. */
  --hdr-h:84px;
  --logo-h:44px;

  --f-display:'Playfair',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --f-body:'InterVar',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;
}

/* ----------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--f-body);font-size:clamp(17px,.55vw + 16px,20px);
  line-height:1.6;letter-spacing:normal;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
svg{max-width:100%}
/* Every icon this site draws is aria-hidden, so this is the icon default,
   sized in em so it tracks its neighbouring text. Container rules further down
   (.btn svg, .cell-ic svg and so on) all out-specify it. */
svg[aria-hidden="true"]{width:1.1em;height:1.1em;display:inline-block;
  vertical-align:-.16em;flex:none}
h1,h2,h3,h4{
  font-family:var(--f-display);color:var(--ink);
  font-weight:400;line-height:1.06;letter-spacing:-.015em;margin:0 0 .45em;
  text-wrap:balance;
}
h1{font-size:clamp(2.9rem,7.6vw,5.4rem);line-height:.98;letter-spacing:-.028em;
  font-weight:400}
h2{font-size:clamp(2.05rem,4.2vw,3.3rem);line-height:1.04;letter-spacing:-.018em}
h3{font-size:clamp(1.22rem,1.3vw + .9rem,1.6rem);font-weight:500}
h4{font-size:1.08rem;font-weight:500;letter-spacing:-.005em}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--accent-ink);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--ink)}
strong{color:var(--ink);font-weight:650}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--accent-fg)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:var(--accent-fg);padding:14px 20px;border-radius:0 0 var(--r) 0;font-weight:700}
.skip:focus{left:0;color:var(--accent-fg)}

/* --------------------------------------------------------------- layout -- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1400px}
.sect{padding-block:var(--sect)}
.sect-tight{padding-block:clamp(64px,7.5vw,116px)}
.lede{font-size:clamp(1.18rem,.75vw + 1.05rem,1.5rem);line-height:1.5;
  color:var(--body);letter-spacing:-.008em}
.measure{max-width:62ch}
.center{text-align:center;margin-inline:auto}

/* -------------------------------------------------------------- eyebrow -- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-body);
  font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 1.4rem;
}
.eyebrow::before{
  content:"";width:22px;height:3px;background:var(--accent);flex:none;
}
.on-dark .eyebrow,.hero .eyebrow,.phead .eyebrow{color:var(--accent-lit)}

/* -------------------------------------------------------------- buttons -- */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-weight:650;font-size:1rem;line-height:1;
  padding:1.05em 1.55em;border:1px solid transparent;border-radius:var(--r);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s,background .16s,color .16s,border-color .16s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(20,20,20,.42);color:var(--fg)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-accent{--bg:var(--accent);--fg:var(--accent-fg)}
.btn-accent:hover{--bg:var(--accent-600)}
.btn-ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(20,20,20,.05)}
.on-dark .btn-ghost,.hero .btn-ghost,.phead .btn-ghost{--fg:#fff;border-color:rgba(255,255,255,.32)}
.on-dark .btn-ghost:hover,.hero .btn-ghost:hover,.phead .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-lg{font-size:1.05rem;padding:1.15em 1.8em}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
/* A form's submit button fills its card, and on a narrow screen every button is
   allowed to wrap. .btn sets white-space:nowrap, which on a long label pushed
   the button wider than a 320px viewport. */
.form-card button.btn{width:100%}
@media (max-width:560px){
  .btn{white-space:normal;text-align:center}
}

.arrow-link{
  display:inline-flex;align-items:center;gap:.45em;font-weight:650;
  text-decoration:none;color:var(--accent-ink);
}
.arrow-link svg{width:1em;height:1em;transition:transform .2s}
.arrow-link:hover svg{transform:translateX(4px)}
.arrow-link:hover{text-decoration:underline;text-underline-offset:4px}
.on-dark .arrow-link{color:var(--accent-lit)}

/* --------------------------------------------------------------- header -- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(20,20,20,.95);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.hdr.is-stuck{border-bottom-color:var(--line-dark);background:rgba(20,20,20,.99)}
.hdr-in{display:flex;align-items:center;gap:1.5rem;min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;
  flex:0 1 auto;min-width:0;margin-right:auto}
/* The client lockup is very wide (about 10:1), so below tablet it is sized by
   width rather than height - otherwise it alone is wider than a 320px screen
   and pushes the burger off the edge. */
/* The mark is tall and narrow, so it is sized by height and the name is
   set in type beside it. */
.brand img{height:calc(var(--logo-h) * .96);width:auto}
@media (max-width:400px){.brand-txt strong{font-size:.98rem}}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt strong{font-family:var(--f-display);font-weight:700;color:#fff;
  font-size:1.06rem;letter-spacing:-.01em}
.brand-txt em{font-style:normal;font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-lit);margin-top:.15rem}
@media (max-width:420px){.brand-txt em{display:none}}
.ftr-cred{font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-lit);margin:-.6rem 0 1rem}
.nav{display:flex;align-items:center;gap:.1rem}
.nav a{
  color:rgba(255,255,255,.88);text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.6em .8em;border-radius:var(--r-sm);transition:background .18s,color .18s;
  white-space:nowrap;
}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav a[aria-current="page"]{color:var(--accent-fg);background:var(--accent)}
.hdr-cta{display:flex;align-items:center;gap:.6rem;flex:none}
.hdr-phone{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  color:#fff;font-weight:700;font-size:.97rem;white-space:nowrap;
}
.hdr-phone svg{width:1.05em;height:1.05em;color:var(--accent-lit)}
.hdr-phone:hover{color:var(--accent-lit)}

.burger{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.28);
  background:transparent;border-radius:var(--r-sm);cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:18px;height:2px;background:#fff;position:relative;
  transition:transform .25s,background .25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;
  height:2px;background:#fff;transition:transform .25s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.drawer{display:none}
@media (max-width:1080px){
  :root{--hdr-h:72px;--logo-h:36px}
  .nav,.hdr-phone{display:none}
  .burger{display:inline-flex}
  .hdr-cta .btn{display:none}
  /* Covers the whole screen and tucks content below the header rather than
     starting at a hard-coded offset. Deliberately a sibling of .hdr, never a
     child: the header uses backdrop-filter, which would make it the containing
     block for a fixed-position descendant and clip the drawer to its height. */
  .drawer{
    display:block;position:fixed;inset:0;z-index:99;
    background:var(--ink);padding:calc(var(--hdr-h) + 1.5rem) var(--gut) 3rem;
    overflow-y:auto;transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .22s,transform .22s;
  }
  .drawer.is-open{opacity:1;transform:none;pointer-events:auto}
  .drawer a{display:block;text-decoration:none;color:#fff;
    font-family:var(--f-display);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;
    padding:.6rem 0;border-bottom:1px solid var(--line-dark)}
  .drawer a:hover{color:var(--accent-lit)}
  .drawer .btns{margin-top:1.8rem;flex-direction:column;align-items:stretch}
  .drawer .btn{width:100%}
  body.nav-open{overflow:hidden}
}

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative;background:var(--ink);color:rgba(255,255,255,.78);
  overflow:hidden;background-image:url(/assets/interior.2f85b1b5.webp);
  background-size:cover;background-position:center 62%;
  min-height:clamp(30rem,74vh,46rem);display:flex;align-items:center}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero-grid{display:grid;gap:clamp(2.2rem,4.5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  padding-block:clamp(64px,8vw,132px)}
@media (max-width:940px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
/* The scrim. It never drops below .72 alpha, because the photograph behind it
   contains pure white pixels (lit windows) and white type has to clear AA on
   the worst pixel the picture can put under it, not the average one. At .72
   over white the background lands at 0.093 luminance - 7.4:1 for white text. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,20,20,.80) 0%,rgba(20,20,20,.72) 42%,
                    rgba(20,20,20,.88) 100%),
    linear-gradient(90deg,rgba(20,20,20,.34) 0%,rgba(20,20,20,0) 62%);
}
.hero>*{position:relative;z-index:1}
.hero-sub{font-size:clamp(1.15rem,.7vw + 1.05rem,1.42rem);line-height:1.5;
  max-width:40ch;margin-bottom:2.4rem;color:rgba(255,255,255,.82)}
/* The highlighted word sits over the photograph, so it takes a paler tint than
   --accent-lit: measured 5.1:1 on the brightest pixel the picture can put
   behind it, against 3.1:1 for the standard lit olive. */
.hero h1 .hl{color:#CEDAB6}
/* Over the photograph the olive eyebrow measured 3.2:1 on the brightest pixels
   the picture can put behind it, and the dimmed note 4.1:1. Both go to white
   here; the olive survives as the eyebrow's rule, which is a graphic and only
   needs 3:1. */
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:var(--accent-lit)}
.hero .hero-note{color:#fff}
.hero .hero-note a{color:#fff;text-decoration:underline}
/* The reference practice sites run their hero photograph at the full width of
   the container - 1195 to 1265px inside a 1280px window. Half a grid row was
   giving it 592px, which is why the first pass still felt small. It now sits
   under the heading block at full width, at 3:2. */
.hero-shot{overflow:hidden;aspect-ratio:3/2;background:var(--ink-2)}
.hero-stack{padding-block:clamp(72px,9vw,132px);width:100%}
/* The measure has to be set on the h1 itself. On the wrapper, `ch` resolves
   against the wrapper's 20px body font rather than the 84px headline, which
   squeezed the whole headline into a 227px column. */
.hero-stack .hero-copy{max-width:none}
.hero-stack h1{max-width:14ch}
.hero-stack .hero-sub{max-width:44ch}
@media (max-width:700px){
  /* the crop tightens on a narrow screen, so the scrim goes flat and heavy */
  .hero{background-position:center;min-height:clamp(26rem,80vh,34rem)}
  .hero::before{background:linear-gradient(180deg,rgba(20,20,20,.84),rgba(20,20,20,.9))}
}
.hero-shot img{width:100%;height:100%;object-fit:cover}
.hero-note{margin-top:1.5rem;font-size:.94rem;color:rgba(255,255,255,.62)}
.hero-note a{color:#fff;font-weight:650}

/* ----------------------------------------------------------- strip/stats -- */
.strip{background:var(--ink-2);border-top:1px solid var(--line-dark);
  color:rgba(255,255,255,.74)}
.strip-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line-dark)}
.strip-in>div{background:var(--ink-2);padding:clamp(1.3rem,2.4vw,2rem) clamp(1rem,2vw,1.5rem)}
.strip .n{font-family:var(--f-display);font-size:clamp(1.5rem,2.2vw,2.05rem);
  font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1;display:block;
  margin-bottom:.4rem}
.strip .t{font-size:.88rem;line-height:1.4;color:rgba(255,255,255,.72)}
@media (max-width:820px){.strip-in{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------------------------------------------------------- cards -- */
.grid{display:grid;gap:clamp(1.1rem,2vw,1.8rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.g-4{grid-template-columns:minmax(0,1fr)}}
.card .role{color:var(--accent-ink);font-weight:650;font-size:.9rem;margin:0}
.on-dark .card .role{color:var(--accent-lit)}
@media (max-width:980px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g-2,.g-3{grid-template-columns:minmax(0,1fr)}}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:clamp(1.7rem,2.6vw,2.4rem);position:relative;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s;
}
a.card{text-decoration:none;display:flex;flex-direction:column}
.card:hover{transform:none;border-color:var(--ink)}
.card h3{margin-bottom:.5rem}
.card p{font-size:1rem}
.card .arrow-link{margin-top:auto;padding-top:1.3rem}
.cell-ic{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--ink);color:var(--accent-lit);margin-bottom:1.2rem}
.cell-ic svg{width:22px;height:22px}
.card.is-accent{background:var(--ink);border-color:var(--ink);color:rgba(255,255,255,.76)}
.card.is-accent h3,.card.is-accent h4{color:#fff}
.card.is-accent .cell-ic{background:var(--accent);color:var(--accent-fg)}
.card.is-accent .arrow-link{color:var(--accent-lit)}
/* A plain card inside a dark section must invert, or it renders white on white. */
.on-dark .card:not(.is-accent){
  background:var(--ink-2);border-color:var(--line-dark);color:rgba(255,255,255,.74)}
.on-dark .card:not(.is-accent) h3,.on-dark .card:not(.is-accent) h4{color:#fff}
.on-dark .card:not(.is-accent):hover{background:var(--ink-3);border-color:rgba(255,255,255,.24);
  box-shadow:none}
.on-dark .cell-ic{background:var(--accent);color:var(--accent-fg)}

.tags{margin:.9rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{font-size:.79rem;color:var(--grey);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.32em .7em}
.on-dark .tags li,.card.is-accent .tags li{background:rgba(255,255,255,.07);
  border-color:var(--line-dark);color:rgba(255,255,255,.68)}

/* ---------------------------------------------------------------- lists -- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.ticks li{position:relative;padding-left:1.85rem;font-size:.98rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;border-radius:3px;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.ticks.is-2col{grid-template-columns:1fr 1fr;gap:.65rem 1.6rem}
@media (max-width:680px){.ticks.is-2col{grid-template-columns:1fr}}

/* --------------------------------------------------------------- process -- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid}
.steps li{counter-increment:s;position:relative;padding:1.5rem 0 1.5rem 4.2rem;
  border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.45rem;
  font-family:var(--f-display);font-size:.95rem;font-weight:800;color:var(--accent-ink);
  background:var(--surface);border:1px solid var(--line);width:42px;height:42px;
  border-radius:var(--r);display:grid;place-items:center;letter-spacing:0;
}
.steps h3{font-size:1.12rem;margin-bottom:.25rem}
.steps p{font-size:.97rem;margin:0}
.on-dark .steps li{border-color:var(--line-dark)}
.on-dark .steps li::before{background:var(--ink-2);border-color:var(--line-dark);
  color:var(--accent-lit)}

/* --------------------------------------------------------- dark section -- */
.on-dark{background:var(--ink);color:rgba(255,255,255,.74)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark strong{color:#fff}
.on-dark .lede{color:rgba(255,255,255,.78)}
.on-surface{background:var(--surface);border-block:1px solid var(--line)}
.on-stone{background:#EFE8DA;border-block:1px solid var(--line)}

/* --------------------------------------------------------------- works -- */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.25rem)}
@media (max-width:980px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.works{grid-template-columns:1fr}}
.work{border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);
  border:1px solid var(--line-dark);display:flex;flex-direction:column}
.work .shot{aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.work .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.work:hover .shot img{transform:scale(1.04)}
.work .txt{padding:1.3rem 1.4rem 1.5rem}
.work h3{font-size:1.02rem;color:#fff;margin-bottom:.45rem}
.work p{font-size:.9rem;color:rgba(255,255,255,.68);margin:0}
.work .where{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-lit);display:block;margin-bottom:.5rem}

/* ------------------------------------------------------------- projects -- */
.projects{display:grid;gap:0;border-top:1px solid var(--line)}
.project{padding:1.6rem 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:1.5rem;
  align-items:start}
@media (max-width:760px){.project{grid-template-columns:1fr;gap:.4rem}}
.project h3{font-size:1.15rem;margin:0}
.project p{font-size:.97rem;margin:0}
.on-dark .projects{border-color:var(--line-dark)}
.on-dark .project{border-color:var(--line-dark)}

/* -------------------------------------------------------------- projects -- */
/* Two across, not three: on the reference sites a project image is 300-570px
   wide, and three across in this container gave 344px with the caption
   competing for the same row. */
.projs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,2.6vw,2.6rem)}
@media (max-width:760px){.projs{grid-template-columns:minmax(0,1fr)}}
.projs .proj{display:block;margin:0}
.projs .proj-shot{aspect-ratio:3/2;overflow:hidden;background:var(--ink-3);width:100%}
.projs .proj-shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.projs .proj:hover .proj-shot img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){
  .projs .proj-shot img,.projs .proj:hover .proj-shot img{transition:none;transform:none}
}
.projs .proj figcaption{padding-top:1rem;display:flex;flex-direction:column;gap:.3rem}
.projs .proj .kind{font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-ink)}
.projs .proj .name{font-family:var(--f-display);font-size:clamp(1.15rem,1.5vw,1.4rem);
  color:var(--ink);line-height:1.25}
.on-dark .projs .proj .name{color:#fff}
.on-dark .projs .proj .kind{color:var(--accent-lit)}

/* the projects with no photograph of their own, listed rather than invented */
.also{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.also li{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:.3rem 1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.also .kind{font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-ink);padding-top:.25rem}
@media (max-width:620px){.also li{grid-template-columns:minmax(0,1fr)}}
.on-dark .also li{border-color:var(--line-dark)}
.on-dark .also .kind{color:var(--accent-lit)}

/* ------------------------------------------------------------------ faq -- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.3rem 3rem 1.3rem 0;position:relative;
  font-family:var(--f-display);font-size:clamp(1.02rem,.9vw + .85rem,1.18rem);
  font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.5rem;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B51A19' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent-ink)}
.faq .ans{padding:0 3rem 1.5rem 0;max-width:70ch}
.faq .ans p{font-size:1rem}

/* ------------------------------------------------------------------ cta -- */
.cta-band{position:relative;overflow:hidden;background:var(--accent);color:#fff;
  border-radius:var(--r-xl)}
.cta-band::before{
  content:"";position:absolute;inset:auto -8% -70% auto;width:52%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(20,20,20,.34),transparent 66%);
}
/* The brand red is dark: ink text on it is only 3.1:1, so this band inverts to
   white throughout rather than reusing the light-ground treatment. */
.cta-band .btn-accent{--bg:#fff;--fg:var(--ink)}
.cta-band .btn-accent:hover{--bg:var(--paper)}
.cta-band-in{position:relative;padding:clamp(2rem,4.5vw,3.6rem);display:grid;gap:1.8rem;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
@media (max-width:820px){.cta-band-in{grid-template-columns:minmax(0,1fr)}}
.cta-band h2,.cta-band h3{color:#fff}
.cta-band p{color:#fff}
.cta-band a{color:#fff}
.cta-band a:not(.btn){color:#fff}
.cta-band .eyebrow{color:#fff}
.cta-band .eyebrow::before{background:#fff}
.cta-band .btn-ghost{--fg:#fff;border-color:rgba(255,255,255,.46)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* ---------------------------------------------------------------- forms -- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.8vw,2.3rem);box-shadow:var(--shadow)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.88rem;font-weight:650;color:var(--ink);margin-bottom:.4rem}
.field .req{color:var(--accent-ink)}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:.82em 1em;transition:border-color .18s,box-shadow .18s,background .18s;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 4px rgba(92,107,66,.34);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:620px){.field-row{grid-template-columns:minmax(0,1fr)}}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.89rem;
  color:var(--body);margin-bottom:1.4rem}
.consent input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--accent-ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.85rem;color:var(--grey);margin-top:.9rem}

/* --------------------------------------------------------- contact info -- */
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:1.3rem}
.info-list li{display:flex;gap:1rem;align-items:flex-start}
.info-list li>div{min-width:0}
.info-list a{overflow-wrap:anywhere}
.info-list li>div{min-width:0}
.info-list a{overflow-wrap:anywhere}
.info-ic{width:42px;height:42px;border-radius:var(--r);flex:none;display:grid;
  place-items:center;background:var(--ink);color:var(--accent-lit)}
.info-ic svg{width:20px;height:20px}
.info-list h4{margin:0 0 .15rem;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--grey);font-family:var(--f-body);font-weight:700}
.info-list a,.info-val{color:var(--ink);text-decoration:none;font-weight:650;font-size:1.04rem}
.info-list a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.info-list address{font-style:normal;color:var(--ink);font-weight:650;font-size:1.04rem;
  line-height:1.45}
.hours{list-style:none;margin:0;padding:0;font-size:.97rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--line)}
.hours li:last-child{border-bottom:0}
.hours .d{color:var(--body)}
.hours .h{color:var(--ink);font-weight:650}

/* ---------------------------------------------------------------- prose -- */
.prose h2{margin-top:2.5rem}
.prose h3{margin-top:1.9rem}
.prose>*:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--accent-ink)}

/* --------------------------------------------------------------- footer -- */
.ftr{background:var(--ink);color:rgba(255,255,255,.62);
  padding-block:clamp(3.2rem,5.5vw,4.6rem) 2rem}
.ftr a{color:rgba(255,255,255,.62);text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem);padding-bottom:2.8rem;border-bottom:1px solid var(--line-dark)}
@media (max-width:900px){.ftr-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr-top{grid-template-columns:1fr}}
.ftr-brand img{height:46px;width:auto;margin-bottom:1.2rem}
.ftr-brand p{font-size:.94rem;max-width:36ch}
.ftr h4{color:#fff;font-family:var(--f-body);font-size:.78rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;font-size:.94rem}
.ftr address{font-style:normal;font-size:.94rem;line-height:1.7;margin-top:1.2rem}
.ftr-bot{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  align-items:center;padding-top:1.8rem;font-size:.85rem}
.ftr-areas{font-size:.85rem;color:rgba(255,255,255,.58);padding-top:1.5rem;line-height:1.7}
.ftr-social{display:flex;gap:.55rem;margin-top:1.3rem}
.ftr-social a{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;
  border:1px solid var(--line-dark);transition:background .2s,border-color .2s}
.ftr-social a:hover{background:rgba(255,255,255,.12);border-color:transparent}
.ftr-social svg{width:18px;height:18px}

/* ------------------------------------------------------------- page head -- */
.phead{background:var(--ink);color:rgba(255,255,255,.74);position:relative;overflow:hidden;
  padding-block:clamp(2.6rem,5vw,4.4rem) clamp(2.2rem,4vw,3.4rem)}
.phead::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(42% 60% at 85% 10%,rgba(92,107,66,.2),transparent 66%);
}
.phead>*{position:relative;z-index:1}
.phead h1{color:#fff}
.phead .lede{color:rgba(255,255,255,.78)}
.crumbs{font-size:.85rem;color:rgba(255,255,255,.68);margin-bottom:1.1rem}
.crumbs a{color:rgba(255,255,255,.68);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{margin-inline:.45rem;opacity:.72}

/* ---------------------------------------------------------------- reveal -- */
[data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.2,.8,.3,1),transform .55s cubic-bezier(.2,.8,.3,1)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.no-js [data-reveal]{opacity:1;transform:none}

/* ----------------------------------------------------------------- misc -- */
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.pill-row li{font-size:.87rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.42em .9em;color:var(--body)}
.on-dark .pill-row li{background:rgba(255,255,255,.07);border-color:var(--line-dark);
  color:rgba(255,255,255,.78)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:minmax(0,1fr)}}
.side-sticky{position:sticky;top:calc(var(--hdr-h) + 26px)}
@media (max-width:900px){.side-sticky{position:static}}
.figure{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.notice{background:rgba(92,107,66,.09);border:1px solid rgba(181,26,25,.30);
  border-radius:var(--r);padding:1.1rem 1.3rem;font-size:.95rem}
.notice strong{color:var(--accent-ink)}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,1.9rem)}
.quote blockquote{margin:0 0 1rem;font-size:1.04rem;color:var(--ink);line-height:1.55}
.quote cite{font-style:normal;font-size:.89rem;color:var(--grey)}

.payoff{margin-top:.9rem;font-weight:650;color:var(--accent-ink)}
.on-dark .payoff,.card.is-accent .payoff{color:var(--accent-lit)}
.portrait{max-width:280px;margin-inline:auto;border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--shadow)}
.portrait img{width:100%;height:auto}

/* ----------------------------------------------------------- space card -- */
.space{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}
.space:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.space .shot{aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.space .shot img{width:100%;height:100%;object-fit:cover}
.space .txt{padding:1.3rem 1.4rem 1.5rem}
.space h3{margin-bottom:.3rem}
.space p{font-size:.96rem;margin:0}
.size{display:inline-block;font-family:var(--f-display);font-weight:700;
  font-size:.82rem;letter-spacing:.02em;color:var(--accent-ink);
  background:rgba(92,107,66,.10);border:1px solid rgba(181,26,25,.30);
  border-radius:999px;padding:.28em .8em;margin-bottom:.7rem}
.on-dark .space{background:var(--ink-2);border-color:var(--line-dark);
  color:rgba(255,255,255,.76)}
.on-dark .space h3{color:#fff}
.on-dark .size{color:var(--accent-lit);background:rgba(255,138,135,.15);
  border-color:rgba(255,138,135,.32)}

.pill-live{display:inline-flex;align-items:center;gap:.5em;font-weight:700;
  font-size:.84rem;color:var(--accent-ink);background:rgba(92,107,66,.10);
  border:1px solid rgba(181,26,25,.30);border-radius:999px;padding:.35em .9em}
.pill-live::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--accent-ink);flex:none}
.on-dark .pill-live,.hero .pill-live,.phead .pill-live{color:var(--accent-lit);
  background:rgba(255,138,135,.15);border-color:rgba(255,138,135,.36)}
.on-dark .pill-live::before,.hero .pill-live::before,.phead .pill-live::before{background:var(--accent-lit)}

/* --------------------------------------------------------------- terms -- */
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem)}
@media (max-width:760px){.terms{grid-template-columns:minmax(0,1fr)}}
.term{border-top:3px solid var(--accent);padding-top:1.1rem}
.term strong{display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--ink);line-height:1}
.term em{display:block;font-style:normal;font-size:.9rem;color:var(--grey);
  margin:.2rem 0 .7rem}
.on-dark .term strong{color:#fff}
.on-dark .term em{color:var(--accent-lit)}

/* ------------------------------------------------------ accreditations -- */
/* Both marks are square lockups with the awarding body's name set inside them,
   so they need height, not the width a wordmark needs. At the 84px a wordmark
   would take, "Architects Registration Board" is unreadable and the credential
   is wasted - and ARB is the one legally meaningful credential on this site. */
.marks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.8rem,4.5vw,3.6rem)}
.marks img{height:clamp(112px,11vw,140px);width:auto;border-radius:0}

/* -------------------------------------------------------- service tile -- */
.tile-ic{width:74px;height:74px;border-radius:var(--r);display:grid;
  place-items:center;background:var(--accent);margin-bottom:1.3rem;flex:none}
.tile-ic img{width:44px;height:auto}
.card.is-accent .tile-ic,.on-dark .tile-ic{background:rgba(255,255,255,.14)}

/* ------------------------------------------------------------ projects -- */
.proj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,1.6vw,1.3rem)}
@media (max-width:900px){.proj{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.proj{grid-template-columns:minmax(0,1fr)}}
.proj-card{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--ink-2);border:1px solid var(--line-dark);
  aspect-ratio:3/2;display:flex;align-items:flex-end;
  transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.proj-card:hover{transform:translateY(-3px)}
.proj-card::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(20,20,20,.78));
  pointer-events:none}
.proj-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj-card .txt{position:relative;padding:1.3rem 1.4rem;z-index:1}
.proj-card h3{color:#fff;font-size:1.15rem;margin:0 0 .2rem}
.proj-card span{color:var(--accent-lit);font-size:.76rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}

/* ---------------------------------------------------------- pull quote -- */
.pull{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.6rem,2.8vw,2.4rem);position:relative}
.pull::before{content:"\201C";position:absolute;top:-.1em;left:.4rem;
  font-family:var(--f-display);font-size:5rem;line-height:1;color:var(--accent);
  opacity:.22;pointer-events:none}
.pull blockquote{position:relative;margin:0 0 1.2rem;font-size:1.06rem;
  line-height:1.6;color:var(--ink)}
.pull .who{display:block;font-weight:700;color:var(--ink);font-size:.94rem}
.pull .co{display:block;font-size:.88rem;color:var(--accent-ink);font-weight:650}
.on-dark .pull{background:var(--ink-2);border-color:var(--line-dark);
  color:rgba(255,255,255,.78)}
.on-dark .pull blockquote,.on-dark .pull .who{color:#fff}
.on-dark .pull .co{color:var(--accent-lit)}
.pull-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.4rem);align-items:start}
@media (max-width:980px){.pull-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.pull-grid{grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------------- client names -- */
.clients{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.9rem,2.4vw,2.2rem);list-style:none;margin:0;padding:0}
.clients li{font-family:var(--f-display);font-weight:700;
  font-size:clamp(.95rem,1.4vw,1.2rem);color:var(--ink);opacity:.72;
  letter-spacing:-.01em}
.on-dark .clients li{color:#fff;opacity:.8}

/* --------------------------------------------------------- outcome bar -- */
.outcomes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(1rem,3vw,2.4rem);list-style:none;margin:0;padding:0}
.outcomes li{display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);
  font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.05rem,1.8vw,1.5rem);color:var(--ink)}
.outcomes li::after{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--accent);flex:none}
.outcomes li:last-child::after{display:none}
.on-dark .outcomes li{color:#fff}

/* --------------------------------------------------------- testimonials -- */
.quote blockquote{font-size:1.02rem;line-height:1.6}
.quote .who{display:block;font-weight:650;color:var(--ink);font-size:.92rem;
  margin-top:.9rem}
.quote .co{display:block;font-size:.86rem;color:var(--grey)}
.on-dark .quote{background:var(--ink-2);border-color:var(--line-dark);
  color:rgba(255,255,255,.76)}
.on-dark .quote blockquote{color:#fff}
.on-dark .quote .who{color:#fff}
.on-dark .quote .co{color:var(--accent-lit)}

/* ---------------------------------------------------------- prose stack -- */
/* Long explanatory pages read better with the heading parked beside the copy
   than stacked above it - it keeps the measure short without a narrow page. */
.stack{display:grid}
.prose-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:clamp(1rem,3vw,3rem);padding:clamp(1.7rem,3vw,2.6rem) 0;
  border-top:1px solid var(--line)}
.stack .prose-block:first-child{padding-top:0;border-top:0}
.prose-block>h2{margin:0;align-self:start;position:sticky;
  top:calc(var(--hdr-h) + 1.4rem)}
.prose-block .prose>*:first-child{margin-top:0}
.prose-block .prose>*:last-child{margin-bottom:0}
.on-dark .prose-block{border-top-color:var(--line-dark)}
@media (max-width:860px){
  .prose-block{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .prose-block>h2{position:static}
}

/* ------------------------------------------------------------ call band -- */
/* The one component this site really needs: on a recovery job the visitor is
   standing at the roadside on a phone, so the number is a target, not a line
   of text. */
.call-band{background:var(--ink);color:rgba(255,255,255,.8);
  border-radius:var(--r-xl);padding:clamp(1.5rem,3.4vw,2.4rem);
  display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr) auto;
  align-items:center}
.call-band h2{color:#fff;font-size:clamp(1.35rem,2.4vw,1.95rem);margin:0}
.call-band .eyebrow{color:var(--accent-lit)}
.call-band .eyebrow::before{background:var(--accent)}
.call-big{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.35rem,3vw,1.85rem);padding:.62em .9em;
  border-radius:var(--r-lg);white-space:nowrap;
  transition:background .18s,transform .18s,box-shadow .18s}
.call-big:hover{background:var(--accent-600);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 26px -14px rgba(92,107,66,.9)}
.call-big svg{width:.92em;height:.92em;flex:none}
@media (max-width:860px){.call-band{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.call-big{width:100%;padding:.62em .4em}}

/* ---------------------------------------------------------- speciality -- */
.spec-list{list-style:none;margin:0;padding:clamp(1.1rem,2.2vw,1.6rem) 0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.75rem clamp(1rem,3vw,2.6rem)}
.spec-list li{display:flex;align-items:center;gap:.65rem;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:clamp(.76rem,1vw,.9rem);color:#fff}
.spec-list li::before{content:"";width:9px;height:9px;background:var(--accent);
  transform:rotate(45deg);flex:none}

/* ------------------------------------------------------------ form lead -- */
.form-lead{margin:0 0 1.4rem;padding:.85rem 1.05rem;border-radius:var(--r);
  background:rgba(92,107,66,.08);border:1px solid rgba(181,26,25,.3);
  font-size:.95rem;line-height:1.5;color:var(--body)}
.form-lead strong{color:var(--accent-ink)}

/* --------------------------------------------------------- detail table -- */
.detail-table{width:100%;border-collapse:collapse;margin:0 0 1.6rem;
  font-size:.96rem;display:block;overflow-x:auto}
.detail-table th,.detail-table td{text-align:left;vertical-align:top;
  padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.detail-table th{font-weight:650;color:var(--ink);white-space:nowrap;
  width:34%;background:var(--paper)}
.detail-table tr:last-child th,.detail-table tr:last-child td{border-bottom:0}

/* An inline link inside a dark section must not use the on-light accent: it is
   only 2.4:1 on ink. Every dark wrapper flips inline links to the lit token. */
.on-dark a:not(.btn):not(.arrow-link),
.hero a:not(.btn):not(.arrow-link):not(.hero-note a),
.phead a:not(.btn):not(.arrow-link):not(.crumbs a),
.call-band a:not(.btn):not(.call-big){color:var(--accent-lit)}
.on-dark a:not(.btn):not(.arrow-link):hover,
.hero a:not(.btn):not(.arrow-link):hover,
.phead a:not(.btn):not(.arrow-link):hover,
.call-band a:not(.btn):not(.call-big):hover{color:#fff}

/* .lede sets its own colour, which beats the dark card it sits inside. */
.card.is-accent .lede,.on-dark .card:not(.is-accent) .lede,
.on-dark .lede,.hero .lede,.phead .lede{color:rgba(255,255,255,.84)}

/* ------------------------------------------------------------ utilities -- */
/* These exist because the site ships a strict Content-Security-Policy with
   style-src 'self'. That blocks every inline style="" attribute, so any layout
   tweak has to live in a class here. check.py fails the build if a style
   attribute ever reappears in the output. */
.m0{margin:0}
.mt-1{margin-top:1.1rem}
.mt-2{margin-top:1.4rem}
.mt-3{margin-top:1.7rem}
.mt-4{margin-top:2rem}
.mt-5{margin-top:2.5rem}
.mb-1{margin-bottom:.3rem}
.mb-2{margin-bottom:.6rem}
.mb-3{margin-bottom:1.2rem}
.mb-4{margin-bottom:1.8rem}
.sect-intro{max-width:58ch;margin-bottom:clamp(2rem,3.6vw,3rem)}
.sect-intro.is-wide{max-width:64ch}
.end{justify-content:flex-end}
.mid{justify-content:center}
.flush{padding-inline:0}
.w-60{max-width:60ch}
.w-64{max-width:64ch}
.w-74{max-width:74ch}
.h-lg{font-size:clamp(2rem,4vw,3rem)}
.h-md{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.centre-page{min-height:54vh;display:grid;align-items:center}
.static-card{cursor:default}
.split-row{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;
  justify-content:space-between}
.hours-h{margin:2.2rem 0 .8rem;font-size:1.1rem}
.note-mid{margin-top:1.4rem;text-align:center}
.sub-lede{font-size:.95rem;margin-bottom:1.5rem}
.big-ic{width:58px;height:58px;border-radius:var(--r-lg);margin:0 auto 1.5rem;
  background:var(--accent);color:#fff}
.big-ic svg{width:28px;height:28px}


/* ======================================================================
   DRAWING BOARD
   The page behaves like a sheet: a warm ground, hairline rules that run
   the full measure, and content sitting in ruled cells rather than on
   cards. Emphasis is carried by weight and by the rules, never by a tint.
   ====================================================================== */

/* --- a heading that shifts weight mid-phrase -------------------------- */
.bd{font-weight:700}
.lt{font-weight:400;color:var(--grey)}
h2{font-weight:400}
h2 .bd{font-weight:700;color:var(--ink)}

/* --- hero: a ruled masthead, no photograph ---------------------------- */
.hero{
  background:var(--paper);background-image:none;min-height:0;
  display:block;border-bottom:1px solid var(--ink);
  padding-block:clamp(52px,7vw,96px) 0;
}
.hero::before{display:none}
.hero .eyebrow,.hero .hero-note,.hero .hero-note a{color:var(--ink)}
.hero .eyebrow{color:var(--accent-ink)}
.hero .eyebrow::before{background:var(--accent)}
.hero h1{color:var(--ink);max-width:none;margin-bottom:0}
.hero h1 .hl{color:var(--accent-ink);font-style:italic;font-weight:400}
.hero-stack{padding-block:0}
.hero-stack .hero-copy{max-width:none}
.hero-stack h1{max-width:16ch}
.hero-sub{color:var(--body)}

/* the sheet: headline left, practice record right, divided by a rule */
.sheet{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);align-items:end;
  padding-block:clamp(2.4rem,4vw,4rem) clamp(40px,5vw,72px);
}
@media (max-width:940px){.sheet{grid-template-columns:minmax(0,1fr);align-items:start}}
.sheet-side{border-left:1px solid var(--line-strong);padding-left:clamp(1.4rem,2.4vw,2.4rem)}
@media (max-width:940px){.sheet-side{border-left:0;padding-left:0;
  border-top:1px solid var(--line-strong);padding-top:1.6rem}}
.sheet-side .hero-sub{max-width:none;font-size:1.02rem;margin-bottom:1.6rem}
.sheet-side .btns{flex-direction:column;align-items:stretch;gap:.6rem}

/* --- the record: hairline quadrants with very large numerals ---------- */
.strip{background:var(--paper);border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);padding:0}
.strip-in{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:none}
@media (max-width:900px){.strip-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.strip-in{grid-template-columns:minmax(0,1fr)}}
.strip-in>div{
  background:none;border-right:1px solid var(--line);
  padding:clamp(2rem,3.4vw,3.2rem) clamp(1.2rem,2.2vw,2rem);
  display:flex;flex-direction:column;gap:.9rem;
}
.strip-in>div:last-child{border-right:0}
@media (max-width:900px){
  .strip-in>div:nth-child(2n){border-right:0}
  .strip-in>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:520px){.strip-in>div{border-right:0;
  border-bottom:1px solid var(--line)}}
.strip .n{
  font-family:var(--f-display);font-weight:400;color:var(--ink);
  font-size:clamp(2.8rem,5.2vw,4.4rem);line-height:.9;letter-spacing:-.04em;
}
.strip .t{font-size:.92rem;line-height:1.45;color:var(--grey);max-width:22ch}

/* --- projects: a checkerboard of caption cells and image cells -------- */
.projs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
@media (max-width:900px){.projs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.projs{grid-template-columns:minmax(0,1fr)}}
.projs .proj{
  display:flex;flex-direction:column;margin:0;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper);
}
.projs .proj-shot{aspect-ratio:4/3;overflow:hidden;background:var(--surface);
  width:100%;order:-1}
.projs .proj-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* The caption is a <figcaption> holding two spans. Both need to be blocks,
   or the label and the project name run together on one line. */
.projs .proj figcaption{
  padding:clamp(1.4rem,2.4vw,2rem);
  display:flex;flex-direction:column;gap:.5rem;flex:1;
}
.projs .proj .kind{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-ink);
}
.projs .proj .name{
  font-family:var(--f-display);font-weight:400;color:var(--ink);
  font-size:clamp(1.05rem,1vw + .82rem,1.32rem);line-height:1.24;
  letter-spacing:-.015em;text-wrap:pretty;
}
/* every third cell is caption-only, which is what makes it read as a board */
.projs .proj:nth-child(3n) .proj-shot{aspect-ratio:16/11}

/* --- section intros sit against a rule -------------------------------- */
.sect-intro{border-top:1px solid var(--ink);padding-top:clamp(1.4rem,2.2vw,2.2rem)}
.sect-intro h2{max-width:20ch}

/* --- accreditation marks --------------------------------------------- */
.marks img{height:clamp(112px,11vw,140px);width:auto;border-radius:0}

/* The hero is a light sheet now, so the on-dark button and link overrides
   written for the old photographic hero have to be undone. */
.hero .btn-ghost{--fg:var(--ink);border-color:var(--line-strong)}
.hero .btn-ghost:hover{background:rgba(20,20,20,.05);border-color:var(--ink)}
.hero a:not(.btn):not(.arrow-link){color:var(--accent-ink)}
.hero a:not(.btn):not(.arrow-link):hover{color:var(--ink)}