/* LATCH: Canopy direction. Tokens mirror agency/3-direction/brand.json */
:root{
  --bg:#121812; --surface:#1A221A; --stone:#E7E8E0; --paper:#F1F2EC; --ink:#1A2019; --muted-on-stone:#56604F;
  --text:#E9E7DE; --sage:#A3AD98; --moss:#547143; --moss-deep:#4B663C; --brass:#B8956A;
  --line:rgba(233,231,222,.16); --line-ink:rgba(26,32,25,.16);
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --ease:cubic-bezier(.65,0,.35,1); --ease-out:cubic-bezier(.22,1,.36,1);
  --gut:clamp(1.25rem, 4vw, 3.5rem); --section-y:clamp(5rem, 11vw, 10rem);
  /* the page lines up with the menu (client, 12 Oct, 7:29 to 7:34 pm): a right-hand column starts under "Services" and
     runs to the right gutter (--tail), the gap beside it is the step from "Studio" to "Services" (--gap-r), and the FAQ
     answers start under "Habitats" (--tail-hab). These are worked out from the menu's type, which is set in rem: each
     link's width in rem, the gaps between them, the button's padding and the two 38px icons. site.js measures the
     real lines and replaces them, so they hold in any browser and before the fonts arrive. */
  --nav-gap:clamp(1.25rem,2.6vw,2.5rem);
  --tail:calc(23.82rem + 3.55 * var(--nav-gap) + 78px);
  --gap-r:calc(3.5rem + var(--nav-gap));
  --tail-hab:calc(var(--tail) + 8.17rem + 2 * var(--nav-gap));
  --head-h:4.5rem;
  --v-bg:#0E130E; --v-fg:#E9E7DE; --v-muted:#A3AD98; --v-accent:#B8956A; --v-line:rgba(233,231,222,.2);
  --v-head:var(--serif); --v-label:var(--sans); --v-body:var(--sans);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* responsive type (client, 12 Oct: 'can see how the words scale with the change in screen size', hba.com). Every size on
   the site is in rem, so the root sets them all: the browser's own size (16px by default) up to 1280px wide, then growing
   with the window to 1.375 times that at 2240px and beyond. Headings already scale between phone and laptop through their
   vw clamps; above 1280px words, measures and spacing grow together, so a wide screen shows the same page, larger. */
html{font-size:clamp(100%, .5rem + .625vw, 1.375rem)}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* paragraphs 10% smaller than the first build's 1.0625rem, 'so it looks more premium' (client, 14 Oct) */
body{margin:0;background:var(--bg);color:var(--text);font:400 .95625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
/* photographs can't be long-pressed or dragged out (client, 11 Oct); site.js blocks the right-click menu */
img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.on-stone :focus-visible{outline-color:var(--moss-deep)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.label{margin:0;font:500 .75rem/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--sage)}
.on-stone{background:var(--stone);color:var(--ink)}
.on-stone .label{color:var(--muted-on-stone)}
.skip{position:absolute;left:-999px;top:0;background:var(--stone);color:var(--ink);padding:.75rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.site-head{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:1.25rem var(--gut);transition:background .5s var(--ease-out),padding .5s var(--ease-out)}
.site-head.is-solid,.site-head.is-static{background:rgba(18,24,18,.94);padding-block:.85rem;border-bottom:1px solid var(--line)}
.logo{display:block;line-height:0}
.logo img{height:1.5rem;width:auto}
.nav{display:flex;align-items:center;gap:var(--nav-gap)}
.nav a{display:inline-flex;align-items:center;min-height:44px;font:500 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--text);opacity:.82;transition:opacity .2s;padding:0}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--brass)}
.nav .nav-cta{opacity:1;border:1px solid var(--brass);padding:0 1.1rem;transition:background .25s,color .25s}
.nav .nav-cta:hover{background:var(--brass);color:var(--bg)}
.nav-social{display:inline-flex;align-items:center;gap:.15rem;margin-left:calc(var(--nav-gap) * -.45)}
.nav .nav-social a{justify-content:center;width:38px}
.nav-social svg{display:block}
.menu-btn{display:none;background:none;border:0;color:var(--text);font:500 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:.9rem 0 .9rem 1rem;cursor:pointer}

/* buttons, links */
.btns{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:max(48px,3rem);padding:0 1.35rem;font:500 .8rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:1px solid var(--text);background:none;color:inherit;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn-solid{background:var(--text);color:var(--bg)}
.btn-solid:hover{background:var(--brass);border-color:var(--brass);color:var(--bg)}
.btn-line:hover{background:rgba(233,231,222,.1)}
.on-stone .btn{border-color:var(--ink)}
.on-stone .btn-solid{background:var(--ink);color:var(--stone)}
.on-stone .btn-solid:hover{background:var(--moss-deep);border-color:var(--moss-deep);color:var(--paper)}
.more{display:inline-flex;align-items:center;gap:.6rem;font:500 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:inherit;padding:.95rem 0;border-top:1px solid var(--line)}
.more span{transition:transform .18s}
.more:hover{color:var(--brass)}.more:hover span{transform:translateX(5px)}
.on-stone .more{border-color:var(--line-ink)}
.on-stone .more:hover{color:var(--moss-deep)}

/* reveal: the signature, one system for every photograph on the site. Anything with
   class .reveal is driven by the ripple helper in site.js (scroll reveals, the home
   hero slideshow uses it). Each photograph clears outward from
   its centre like still water: a soft feathered edge, one faint ring, a whisper of
   sheen. The front travels at a fixed speed (site.js sets --r-end and --rd), so bigger
   photographs take longer, and the ring band (--band) is a share of the photograph's
   size, so a full-screen photograph ripples like a small one. */
@property --r { syntax: '<length>'; inherits: true; initial-value: -140px; }
.reveal{position:relative;overflow:hidden;--rx:50%;--ry:50%;--band:140px;--r:calc(var(--band) * -1);--mask:radial-gradient(circle farthest-corner at var(--rx) var(--ry),#000 0,#000 var(--r),rgba(0,0,0,.62) calc(var(--r) + var(--band) * .26),rgba(0,0,0,.22) calc(var(--r) + var(--band) * .6),rgba(0,0,0,.3) calc(var(--r) + var(--band) * .74),transparent calc(var(--r) + var(--band)))}
.reveal.is-open{--r:var(--r-end,1200px);transition:--r var(--rd,1.2s) linear}
.reveal img,.reveal video{-webkit-mask-image:var(--mask);mask-image:var(--mask);transform:scale(1.03);filter:brightness(.9);transition:transform calc(var(--rd,1.2s) + .6s) var(--ease-out),filter calc(var(--rd,1.2s) + .6s) var(--ease-out)}
.reveal.is-open img,.reveal.is-open video{transform:none;filter:none}
.reveal::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle farthest-corner at var(--rx) var(--ry),transparent calc(var(--r) - var(--band) * .29),rgba(233,231,222,.05) var(--r),transparent calc(var(--r) + var(--band) * .31));mix-blend-mode:screen;opacity:0;transition:opacity .4s}
.reveal.is-open::after{opacity:1}
.reveal.is-done::after{opacity:0}
.reveal.is-done img,.reveal.is-done video{-webkit-mask-image:none;mask-image:none}
/* a photograph being covered by the next one (the slideshows) stays whole and dims */
.is-prev > .reveal img,.reveal.is-prev img{-webkit-mask-image:none;mask-image:none;animation:recede 1.1s var(--ease-out) forwards}
.is-prev > .reveal::after,.reveal.is-prev::after{opacity:0}
@keyframes recede{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.03);filter:brightness(.42)}}

/* home hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:end}
.slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.slide{position:absolute;inset:0;visibility:hidden;z-index:1}
.slide.is-on{visibility:visible;z-index:3}
.slide.is-prev{visibility:visible;z-index:2}
/* each photograph eases slowly in while it is on show, like walking into the space (client, 11 Oct) */
.slide.is-on,.slide.is-prev{animation:hero-zoom 11s cubic-bezier(.3,.2,.45,1) forwards}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.12)}}
.slide img{width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(18,24,18,.62) 0%,rgba(18,24,18,.25) 45%,rgba(18,24,18,0) 70%),linear-gradient(180deg,rgba(18,24,18,.55) 0%,rgba(18,24,18,0) 22%,rgba(18,24,18,0) 45%,rgba(18,24,18,.82) 100%)}
.hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;padding:0 var(--gut) clamp(2rem,5vw,3.5rem)}
.hero h1{font:300 clamp(2.4rem,5vw,4.75rem)/1.04 var(--serif);letter-spacing:-.012em;margin:0 0 1.75rem;max-width:16ch}
/* the client's headline with a small keyword line above it, both in the one H1 (11 Oct) */
.h1-kicker{display:block;margin:0 0 1rem;font:500 .75rem/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--sage);max-width:none}
.h1-main{display:block}
.hero .h1-kicker{text-shadow:0 1px 8px rgba(18,24,18,.6)}

/* home about intro */
/* two-column sections: the right-hand column starts under "Services" in the menu and ends on the right gutter, in line
   with the header's right edge (client, 12 Oct: text "isn't going all the way to the right", then "align to services") */
.about-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tail));gap:2rem var(--gap-r)}
/* the right-hand text starts level with the heading, with the small label above both (client, 12 Oct): the drop is the
   label's line and the heading's top margin, plus a touch for the serif's taller first line */
.about-intro > div:last-child{padding-top:calc(.9rem + .9rem + .25rem)}
.about-intro{padding:var(--section-y) var(--gut) 0;align-items:start;scroll-margin-top:var(--head-h)}
.about-intro h2{font:300 clamp(1.7rem,3vw,2.75rem)/1.16 var(--serif);margin:.9rem 0 0;max-width:27ch}
.about-intro p{margin:0 0 1.25rem;color:#D6D4CA}
.about-intro .more{margin-top:.5rem}

/* home: the habitats moved to their own page, so the home page sends people there (client, 12 Oct) */
.explore{padding:var(--section-y) var(--gut)}
.explore h2{margin:1.25rem 0 0;font:300 clamp(2.2rem,5.6vw,5rem)/1.04 var(--serif);letter-spacing:-.01em}
.explore a{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:clamp(1.5rem,3vw,2.5rem) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;transition:color .3s}
.explore svg{flex:none;width:clamp(44px,6vw,88px);height:auto;color:var(--brass);transition:transform .45s var(--ease-out)}
.explore a:hover{color:#F3EFE4}
.explore a:hover svg{transform:translateX(10px)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 var(--gut) 2.5rem}
.filters a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border:1px solid var(--line);color:var(--text);font:500 .75rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:border-color .2s,background .2s}
.filters a[aria-current="page"]{border-color:var(--brass);background:rgba(184,149,106,.14)}
.filters a:hover{border-color:var(--sage)}

/* habitats index and categories: one habitat at a time, fading to the next; ‹ ❙❙ › step and pause, the index jumps (client, 11 Oct) */
.hp{position:relative;height:100svh;min-height:36rem;overflow:hidden;background:var(--bg)}
/* every slide keeps its place but stays hidden unless on show or fading out, so its links can't be reached */
.hp .hs-slide{display:block;visibility:hidden}
.hp .hs-slide.is-on,.hp .hs-slide.is-prev{visibility:visible}
/* projects change with the ripple, not a fade (client, 12 Oct): a slide shows at once and its photograph ripples open
   over the last, which stays whole and dims beneath it (the .reveal rules). Only one dark wash shows at a time. */
.hp .hs-slide{opacity:1;transition:none;background:none}
.hp .hs-slide.is-prev.panel::before{opacity:0}
.hp .hs-slide.is-on .panel-card > *{transition-delay:.8s}
.hp .hs-slide.is-on .panel-card > *:last-child{transition-delay:.95s}
.hp::after{content:"";position:absolute;top:0;right:0;bottom:0;width:min(34vw,460px);z-index:5;pointer-events:none;background:linear-gradient(270deg,rgba(18,24,18,.64) 0%,rgba(18,24,18,.3) 55%,rgba(18,24,18,0) 100%)}
.panel-media{position:absolute;inset:0}
.panel-media img{width:100%;height:100%;object-fit:cover}
.panel::before{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,rgba(18,24,18,.88) 0%,rgba(18,24,18,.3) 40%,rgba(18,24,18,0) 62%);pointer-events:none}
/* the words rise in once their habitat is on show, and drop away as it fades out */
.panel-card > *{transition:opacity .7s var(--ease-out),transform 1s var(--ease-out)}
.hs-slide:not(.is-on) .panel-card > *{opacity:0;transform:translateY(22px)}
.hs-slide.is-on .panel-card > *{transition-delay:.45s}
.hs-slide.is-on .panel-card > *:last-child{transition-delay:.6s}
.hp .hs-ctrl{position:absolute;z-index:6;right:var(--gut);bottom:clamp(1.75rem,5vw,3.5rem)}
.hp.is-paused .i-pause{display:none}.hp.is-paused .i-play{display:block}
.hp::before{content:"";position:absolute;inset:0 0 auto 0;height:min(50svh,28rem);z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(18,24,18,.72) 0%,rgba(18,24,18,.35) 55%,rgba(18,24,18,0) 100%)}
.hp-top{position:absolute;z-index:6;left:var(--gut);top:calc(var(--head-h) + clamp(1.5rem,3vw,2.5rem));max-width:min(34rem,calc(100% - 2 * var(--gut) - 16rem))}
.hp-top h1{margin:0 0 1.25rem;font:300 clamp(1.2rem,1.7vw,1.55rem)/1.3 var(--serif);text-shadow:0 1px 12px rgba(18,24,18,.7)}
.hp-top .filters{padding:0}
.hp-top .filters a{background:rgba(18,24,18,.45);border-color:var(--v-line)}
.hp-top .filters a[aria-current="page"]{background:rgba(184,149,106,.3);border-color:var(--brass)}
.stack-side{position:absolute;z-index:6;right:var(--gut);top:50%;transform:translateY(-50%);display:grid;justify-items:end;gap:1.5rem}
.stack-index{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.stack-side .more{text-shadow:0 1px 10px rgba(18,24,18,.9)}
.stack-after{display:none;padding:1.5rem var(--gut) var(--section-y)}
.stack-after .more{border-top:0}
.stack-index button{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;width:100%;min-height:40px;background:none;border:0;padding:0;color:var(--sage);font:500 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;opacity:.7;transition:opacity .3s,color .3s}
.stack-index button::after{content:"";width:18px;height:1px;background:currentColor;transition:width .45s var(--ease-out)}
.stack-index button:hover{opacity:1}
/* keep the index legible over bright photographs */
.stack-index button{text-shadow:0 1px 10px rgba(18,24,18,.9),0 0 2px rgba(18,24,18,.6)}
.stack-index button[aria-current="true"]{opacity:1;color:var(--text)}
.stack-index button[aria-current="true"]::after{width:40px;background:var(--brass)}
.stack-index .n{color:var(--brass)}
.panel-card{position:absolute;z-index:4;left:var(--gut);right:calc(var(--gut) + 16rem);bottom:clamp(1.75rem,5vw,3.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 4rem;align-items:end}
.panel-card .code{font:500 .78rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.panel-card h2{font:300 clamp(2rem,4.6vw,4.2rem)/1.02 var(--serif);margin:.75rem 0 0}
.panel-card h2 a{text-decoration:none}
.panel-card p{margin:0 0 1rem;max-width:46ch;color:#E2E0D6}
.tags{font-size:.82rem;color:var(--sage);margin:0 0 1rem}
.credit{font-size:.75rem;color:var(--sage);letter-spacing:.04em;margin:.5rem 0 0}

/* press */
/* the quote sits under the heading where the photograph was, the list in the right-hand column, starting level with the
   heading (client, 12 Oct) */
.press{padding:var(--section-y) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tail));grid-template-rows:auto auto 1fr;column-gap:var(--gap-r);align-items:start}
.press > .label{grid-column:1;grid-row:1}
.press h2{grid-column:1;grid-row:2;font:300 clamp(1.9rem,3.4vw,3rem)/1.1 var(--serif);margin:.9rem 0 0;max-width:19ch}
.press .recog{grid-column:2;grid-row:2/4;margin-top:.9rem}
.press .quote{grid-column:1;grid-row:3;margin-top:clamp(2.5rem,5vw,4.5rem);max-width:36rem}
.press blockquote{margin:0 0 1.25rem;font:300 italic clamp(1.6rem,2.8vw,2.4rem)/1.2 var(--serif)}
.press cite{display:block;font:normal .9rem/1.5 var(--sans);color:var(--muted-on-stone);margin-bottom:1.5rem}

.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-of-type{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.35rem 0;font:400 1.25rem/1.35 var(--serif)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";width:12px;height:12px;flex:none;border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);transform:rotate(45deg) translateY(-3px);transition:transform .45s var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
/* the questions answer the pointer (Terris to Matthew, 12 Oct: 'more interactive on hover for them to click'): a brass
   line draws along the top, the question steps in and the chevron nudges. Same timings in and out, and they run with
   reduced motion on too (Terris, 13 Oct): it is a 12px step and a 1px line, and Windows with animations off reports
   reduce, which left the hover snapping */
.faq-list summary{position:relative;transition:color .45s var(--ease-out),padding-left .45s var(--ease-out)}
.faq-list summary::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.faq-list details[open] > summary::before{transform:scaleX(1)}
@media (hover:hover){
  .faq-list summary:hover{color:#F3EFE4;padding-left:.75rem}
  .faq-list summary:hover::before{transform:scaleX(1)}
  .faq-list summary:hover::after{transform:rotate(45deg) translate(2px,-1px)}
  .faq-list details[open] > summary:hover::after{transform:rotate(-135deg) translate(2px,-1px)}
}
.faq-list details p{margin:0 0 1.5rem;max-width:56ch;color:#D6D4CA}

/* inner page hero */
.page-hero{padding:calc(var(--head-h) + clamp(3rem,8vw,6.5rem)) var(--gut) clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tail));gap:1.5rem var(--gap-r);align-items:end;border-bottom:1px solid var(--line)}
.page-hero h1{font:300 clamp(2.1rem,4.4vw,4.1rem)/1.06 var(--serif);letter-spacing:-.012em;margin:.9rem 0 0;max-width:22ch}
.page-hero .lede{margin:0;color:#D6D4CA}
.crumbs{font-size:.8rem;color:var(--sage);margin:0 0 1rem}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--brass)}

/* habitats index: the project list after the slideshow */
.stack-after + .plist-sec{padding-top:var(--section-y)}

/* habitat page: every photograph as a full-screen slideshow that fades (client, 11 Oct) */
.hs{position:relative;height:100svh;min-height:34rem;background:var(--bg);overflow:hidden}
.hs-slides{position:absolute;inset:0;touch-action:pan-y}
/* each slide carries the page ground, so an upright photo's side bars fade in with it and cover the one before */
.hs-slide{position:absolute;inset:0;margin:0;display:none;opacity:0;background:var(--bg);transition:opacity 1.3s var(--ease)}
.hs-slide.is-on,.hs-slide.is-prev,.hs-slide.is-next{display:block}
.hs-slide.is-on{opacity:1;z-index:2}
.hs-slide.is-prev{opacity:1;z-index:1}
.hs-slide img{width:100%;height:100%;object-fit:cover}
/* each photograph ripples open over the last, as on the home hero (client, 12 Oct). The whole slide is masked, so an
   upright photograph arrives with its dark surround; the one beneath stays whole and dims */
.hs .hs-slide.reveal{transition:none;-webkit-mask-image:var(--mask);mask-image:var(--mask)}
.hs .hs-slide.reveal.is-open{transition:--r var(--rd,1.2s) linear}
.hs .hs-slide.reveal img{-webkit-mask-image:none;mask-image:none}
.hs .hs-slide.reveal.is-done,.hs .hs-slide.reveal.is-prev{-webkit-mask-image:none;mask-image:none}
/* upright photographs on a wide screen show whole on the dark ground instead of being cropped to a strip */
@media (min-aspect-ratio:1/1){.hs-slide.is-tall img{object-fit:contain;padding-top:var(--head-h)}}
.hs::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(18,24,18,.86) 0%,rgba(18,24,18,.35) 26%,rgba(18,24,18,0) 46%),linear-gradient(180deg,rgba(18,24,18,.62) 0%,rgba(18,24,18,0) 22%)}
.hs-bar{position:absolute;z-index:4;left:var(--gut);right:var(--gut);bottom:clamp(1.75rem,4.5vw,3.25rem);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
/* no label line above the name: the Type row under the slideshow says it (client, 14 Oct) */
.hs h1{font:300 clamp(2.4rem,5.4vw,5rem)/1.02 var(--serif);letter-spacing:-.012em;margin:0}
.hs-ctrl{display:flex;align-items:center;gap:.5rem;flex:none}
.hs-count{margin:0 1rem 0 0;font:500 .78rem/1 var(--sans);letter-spacing:.16em;color:var(--sage);font-variant-numeric:tabular-nums}
.hs-count b{color:var(--text);font-weight:500}
.hs-btn{display:grid;place-items:center;width:max(48px,3rem);height:max(44px,2.75rem);padding:0;background:rgba(18,24,18,.35);border:1px solid var(--v-line);color:var(--text);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.hs-btn:hover{border-color:var(--brass);color:var(--brass)}
.i-play{display:none}
.hs.is-paused .i-pause{display:none}
.hs.is-paused .i-play{display:block}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:0;border-bottom:1px solid var(--line);padding:0 var(--gut)}
.facts div{padding:1.4rem 1.5rem 1.4rem 0}
.facts dt{font:500 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin-bottom:.55rem}
.facts dd{margin:0;font:400 1.05rem/1.45 var(--serif)}
/* on laptops and up the facts sit in one row sized to their content, so the Type ("Residential · Landed · Landscape")
   stays on one line instead of breaking in an equal-width column; the spare width is shared out (Terris, 13 Oct) */
@media (min-width:64rem){.facts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:auto}}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tail));gap:2rem var(--gap-r);padding:var(--section-y) var(--gut)}
.story.solo .paras{grid-column:2}
/* the write-up runs at one size throughout (client, 11 Oct) */
.story .paras p{margin:0 0 1.4rem;color:#D6D4CA;font-size:1.0125rem}
.next{position:relative;display:block;min-height:70svh;text-decoration:none;overflow:hidden}
.next-media{position:absolute;inset:0}
.next-media img{width:100%;height:100%;object-fit:cover}
.next:hover .next-media.is-done img{transform:scale(1.03);transition:transform 1.4s var(--ease-out)}
.next::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(18,24,18,.85),rgba(18,24,18,.15) 60%)}
.next-inner{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(2rem,5vw,3.5rem)}
.next h2{font:300 clamp(2.2rem,5vw,4.6rem)/1.02 var(--serif);margin:.8rem 0 1rem}
.enquiry{padding:var(--section-y) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tail));gap:2rem var(--gap-r);align-items:end;border-top:1px solid var(--line)}
.enquiry h2{font:300 clamp(2rem,4vw,3.4rem)/1.08 var(--serif);margin:.9rem 0 0;max-width:18ch}
.enquiry p{margin:0 0 1.5rem;color:#D6D4CA}

/* about */
/* recognition: awards link to the awarding body, press opens the on-site reader */
.recog-box h2.label{margin:0}
.recog{list-style:none;margin:1rem 0 0;padding:0}
.split .recog{margin:0}
.recog li{border-top:1px solid var(--line)}
.recog li:last-child{border-bottom:1px solid var(--line)}
.recog li a,.recog li p{display:block;margin:0;padding:.95rem 0;text-decoration:none;font:400 1.05rem/1.4 var(--serif);color:var(--text);max-width:none}
.recog .by{display:block;margin-top:.35rem;font:500 .7rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
/* the year leads each line, in a column of its own (client, 12 Oct) */
.recog.dated li a,.recog.dated li p{display:grid;grid-template-columns:4.5rem minmax(0,1fr);align-items:baseline}
.recog .yr{font:500 .78rem/1 var(--sans);letter-spacing:.2em;color:var(--brass);font-variant-numeric:tabular-nums}
.recog .rt{display:block}
.recog a:hover{color:var(--brass)}
.on-stone .recog li{border-color:var(--line-ink)}
.on-stone .recog li a,.on-stone .recog li p{color:var(--ink)}
.on-stone .recog .by{color:var(--muted-on-stone)}
.on-stone .recog .yr{color:var(--moss-deep)}
.on-stone .recog a:hover{color:var(--moss-deep)}
.press-note{margin:0 0 1.5rem;font-size:.9rem;line-height:1.55;color:var(--muted-on-stone);max-width:44ch}

/* project list on /habitats: every completed project from the client's sheet */
.plist-sec{padding:0 var(--gut) var(--section-y)}
.plist-sec{scroll-margin-top:var(--head-h)}
.plist-label{border-top:1px solid var(--line);padding-top:2rem;margin:0 0 2.5rem}
.plist-cols,.plist li{display:grid;grid-template-columns:5rem minmax(0,1.6fr) minmax(0,1fr) 9rem;gap:.35rem 2rem;align-items:baseline}
.plist-cols{padding-bottom:.85rem;font:500 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.plist-cols span:last-child,.plist .s{text-align:right}
.plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.plist li{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.plist .y{font:500 .78rem/1 var(--sans);letter-spacing:.2em;color:var(--brass);font-variant-numeric:tabular-nums}
.plist .n{font:300 1.3rem/1.3 var(--serif);color:var(--text)}
.plist .n a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--brass)}
.plist .n a:hover{color:var(--brass)}
.plist .w{display:block;margin-top:.25rem;font:400 .85rem/1.45 var(--sans);color:var(--sage)}
.plist .t,.plist .s{font-size:.92rem;color:#CFCDC3}
.plist .s{font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .plist-cols{display:none}
  .plist li{grid-template-columns:3.6rem minmax(0,1fr);gap:.3rem 1rem}
  .plist .t,.plist .s{grid-column:2;text-align:left}
}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2rem 6rem;padding:var(--section-y) var(--gut);align-items:start}
.split h2{font:300 clamp(1.9rem,3.4vw,3rem)/1.1 var(--serif);margin:.9rem 0 0;max-width:16ch}
.split p{margin:0 0 1.25rem;max-width:56ch;color:#D6D4CA}
.on-stone .split p,.on-stone.split p{color:#2C3329}
.disciplines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);padding:0 var(--gut) var(--section-y)}
.disciplines div{border-top:1px solid var(--line);padding-top:1.25rem}
.disciplines h3{font:300 clamp(1.6rem,2.4vw,2.1rem)/1.1 var(--serif);margin:0 0 .9rem}
.disciplines p{margin:0;color:#D6D4CA;max-width:40ch}
.how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 3rem}
.how li{border-top:1px solid var(--line-ink);padding-top:1.1rem}
.how h3{font:400 1.3rem/1.3 var(--serif);margin:0 0 .6rem}
.how p{margin:0;color:#2C3329;max-width:44ch}
.credits{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.credits div{display:grid;grid-template-columns:13rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}
.credits dt{font:500 .72rem/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.credits dd{margin:0;color:#D6D4CA}
/* the darkened edges the habitat photographs carry, on the studio photograph (client) */
.services{list-style:none;margin:0;padding:0}
.services li{border-top:1px solid var(--line);padding:1.05rem 0;font:300 clamp(1.45rem,2.3vw,2rem)/1.2 var(--serif)}
.services li:last-child{border-bottom:1px solid var(--line)}
.services-note{margin:1.1rem 0 0;font-size:.92rem;color:var(--sage)}

/* services page: the film full width, then Expertise, then Awards & Press (client, 11 Oct).
   The poster is the film's first frame. The video starts at once and opens through the same ripple, so it is
   already moving as it appears (client, 12 Oct) */
.film{position:relative}
/* Matthew's edit is landscape, so it shows as a wide band across the page, never a tall crop
   (client, 12 Oct: 'this is landscape so should be wider and more compressed') */
.film .reveal{aspect-ratio:2/1;max-height:78svh;width:100%}
/* the same scrims as the habitat slideshows: dark under the header, easing into the page at the foot */
.film::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(18,24,18,.6) 0%,rgba(18,24,18,0) 22%,rgba(18,24,18,0) 70%,rgba(18,24,18,.55) 100%)}
.film .reveal img,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film video{z-index:1;opacity:0;transition:opacity .5s var(--ease-out),transform calc(var(--rd,1.2s) + .6s) var(--ease-out),filter calc(var(--rd,1.2s) + .6s) var(--ease-out)}
.film.is-playing video{opacity:1}
.expertise{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tail));gap:2.5rem var(--gap-r);padding:var(--section-y) var(--gut);align-items:stretch;scroll-margin-top:var(--head-h)}
.expertise h1{margin:0;font:300 clamp(2.4rem,4.8vw,4.2rem)/1.04 var(--serif);letter-spacing:-.012em}
/* the photograph fills the left column from under the heading to the foot of the list, with no caption (client, 12 Oct) */
.ex-head{display:flex;flex-direction:column}
.expertise figure{margin:2.75rem 0 0;flex:1 1 auto;min-height:18rem}
.expertise figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the text starts level with "Expertise", under the small keyword line (client, 12 Oct) */
.ex-body{padding-top:calc(1.125rem + 1rem - .45rem)}
.ex-body > p{margin:0 0 2.25rem;color:#D6D4CA}
.ex-body .btn{margin-top:2.25rem}
#awards{scroll-margin-top:var(--head-h)}

/* faqs page */
.faq-page{padding:var(--section-y) var(--gut);display:grid;gap:clamp(3rem,7vw,5.5rem)}
/* the questions start under "Habitats" in the menu (client, 12 Oct: 'this we align with the Habitats') */
.faq-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tail-hab));gap:1.5rem var(--gap-r)}
.faq-group h2{font:300 clamp(1.6rem,2.6vw,2.2rem)/1.15 var(--serif);margin:0}

/* collaborate: just the "Write to us" block (client, 11 Oct) */
.page-hero.collab{min-height:72svh;align-items:center;border-bottom:0}
.collab .lede + .lede{margin-top:1.1rem}
.collab .btns{margin-top:2rem}

/* contact page */
.contact-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--tail));gap:3rem var(--gap-r);padding:clamp(3rem,6vw,5rem) var(--gut) var(--section-y)}
.form{display:grid;gap:1.4rem}
.field{display:grid;gap:.5rem}
.field label,.field legend{font:500 .74rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.field .hint{font-size:.85rem;color:var(--sage);margin-top:-.2rem}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(233,231,222,.35);color:var(--text);font:400 1.125rem/1.5 var(--sans);padding:.65rem 0;border-radius:0;-webkit-appearance:none;appearance:none}
.field select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B8956A'/%3E%3C/svg%3E") no-repeat right .2rem center;padding-right:1.5rem}
.field select option{background:var(--surface);color:var(--text)}
.field textarea{min-height:9rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--brass)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{box-shadow:0 2px 0 var(--brass)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.check{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem;color:#D6D4CA;cursor:pointer}
.form-status{min-height:1.5rem;font-size:.95rem;color:var(--brass)}

/* dropdowns, site-wide: site.js turns every <select> into this listbox and keeps the native one
   hidden in the form. It reads as a field (hairline underline), and opens downward like a blind
   from the brass line: no radius, no shadow, a 1px chevron and tick on the 12px grid. */
.sel{position:relative}
.field .sel-native{position:absolute;left:0;bottom:0;width:100%;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;padding:.65rem 0;border-bottom:1px solid rgba(233,231,222,.35);color:var(--text);font:400 1.125rem/1.5 var(--sans);cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color .2s}
.sel-btn:hover{border-bottom-color:rgba(233,231,222,.7)}
.sel-btn:focus{outline:none}
.sel-btn:focus-visible{border-bottom-color:var(--brass);box-shadow:0 2px 0 var(--brass)}
.sel.is-open .sel-btn{border-bottom-color:var(--brass)}
.sel-btn svg{flex:none;color:var(--brass);transition:transform .2s var(--ease-out)}
.sel.is-open .sel-btn svg{transform:rotate(180deg)}
.sel.is-invalid .sel-btn{border-bottom-color:#C8644A}
.sel-list{position:absolute;z-index:30;left:0;right:0;top:100%;margin:0;padding:.35rem 0;list-style:none;background:var(--surface);border:1px solid var(--line);border-top:0;max-height:min(20rem,52vh);overflow-y:auto;overscroll-behavior:contain}
.sel.is-up .sel-list{top:auto;bottom:calc(100% + 1px);border-top:1px solid var(--line);border-bottom:0}
.sel-list[hidden]{display:none}
.sel.is-open .sel-list{animation:sel-down .26s var(--ease-out)}
.sel.is-up.is-open .sel-list{animation-name:sel-up}
@keyframes sel-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes sel-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.sel-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:46px;padding:.5rem 1.1rem;border-left:1px solid transparent;color:#CFCDC3;font:400 1.0625rem/1.4 var(--sans);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.sel-list li.is-active{background:rgba(233,231,222,.06);border-left-color:var(--brass);color:var(--text)}
.sel-list li[aria-selected="true"]{color:var(--text)}
.sel-list li[aria-selected="true"]::after{content:"";flex:none;width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23B8956A' stroke-linecap='square'/%3E%3C/svg%3E") center/12px no-repeat}
.sel-list li[aria-disabled="true"]{opacity:.4;cursor:default}
.on-stone .sel-btn{color:var(--ink);border-bottom-color:rgba(26,32,25,.35)}
.on-stone .sel-list{background:var(--paper);border-color:var(--line-ink)}
.on-stone .sel-list li{color:#2C3329}
.on-stone .sel-list li.is-active{background:rgba(26,32,25,.06);border-left-color:var(--moss-deep)}

/* checkboxes, site-wide: a hairline square that fills brass, with a 1px tick (the honeypot keeps .sr) */
input[type="checkbox"]:not(.sr){-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:.15rem 0 0;border:1px solid rgba(233,231,222,.45);border-radius:0;cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23121812' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E") center/0 0 no-repeat;
  transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),background-size .2s var(--ease-out)}
input[type="checkbox"]:not(.sr):hover{border-color:var(--brass)}
input[type="checkbox"]:not(.sr):checked{background-color:var(--brass);border-color:var(--brass);background-size:12px 12px}
input[type="checkbox"]:not(.sr):user-invalid{border-color:#C8644A}
input[type="checkbox"]:not(.sr):disabled{opacity:.4;cursor:not-allowed}
.on-stone input[type="checkbox"]:not(.sr){border-color:rgba(26,32,25,.45)}
.on-stone input[type="checkbox"]:not(.sr):checked{background-color:var(--moss-deep);border-color:var(--moss-deep);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23F1F2EC' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E")}
/* no reduced-motion override here either: the dropdown and checkboxes animate as everything else does (Terris, 13 Oct) */
.aside-block{border-top:1px solid var(--line);padding-top:1.25rem;margin-bottom:2rem}
.aside-block p{margin:.6rem 0 0}
.aside-block a{text-decoration:none;font:300 1.3rem/1.3 var(--serif);border-bottom:1px solid var(--line)}
.aside-block a:hover{border-color:var(--brass)}

/* legal / simple */
.prose{padding:var(--section-y) var(--gut);max-width:56rem}
.prose h2{font:400 1.35rem/1.3 var(--serif);margin:2.25rem 0 .6rem}
.prose p{margin:0;color:#D6D4CA;max-width:60ch}
.prose p + p,.prose ul + p,.prose p + ul{margin-top:.9rem}
.prose ul{margin:.9rem 0 0;padding-left:1.2rem;color:#D6D4CA;max-width:60ch}
.prose li{margin:.3rem 0}
.prose li::marker{color:var(--brass)}
/* email addresses linked inside body copy (privacy, FAQ answers) */
.prose p a,.faq-list details p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--brass);transition:color .2s}
.prose p a:hover,.faq-list details p a:hover{color:var(--brass)}
.simple{min-height:80svh;display:grid;align-content:center;padding:calc(var(--head-h) + 4rem) var(--gut) 4rem}
.simple h1{font:300 clamp(2.2rem,5vw,4.4rem)/1.05 var(--serif);margin:.9rem 0 1.25rem;max-width:18ch}
.simple p{margin:0 0 2rem;color:#D6D4CA;max-width:44ch}

/* press reading panel (site.js + <template id="press-*">) */
.pm{width:min(980px,calc(100vw - 2 * var(--gut)));height:min(92dvh,1100px);max-width:none;max-height:none;margin:auto;padding:0;border:1px solid var(--line);background:var(--bg);color:var(--text);overflow:hidden}
.pm::backdrop{background:rgba(10,14,10,.84)}
.pm[open]{animation:hv-in .4s var(--ease-out)}
.pm-shell{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%}
.pm-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem clamp(1.25rem,3vw,2.5rem);border-bottom:1px solid var(--line)}
.pm-kicker{margin:0;font:500 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.pm-close{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;padding:0 1.1rem;background:none;border:1px solid var(--line);color:var(--text);font:500 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.pm-close:hover{border-color:var(--brass);color:var(--brass)}
.pm-scroll{overflow-y:auto;overscroll-behavior:contain;outline:none;padding:clamp(1.75rem,4vw,3.5rem) clamp(1.25rem,5vw,4.5rem) clamp(2.5rem,5vw,4rem)}
.pr-label{margin:0;font:500 .72rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.pr-title{margin:.9rem 0 .8rem;font:300 clamp(1.8rem,3.6vw,3rem)/1.08 var(--serif);letter-spacing:-.012em;max-width:22ch}
.pr-byline{margin:0;font-size:.9rem;color:var(--sage)}
.pr-figs{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;gap:.75rem;margin:clamp(1.75rem,4vw,2.75rem) 0 .7rem}
.pr-figs figure{margin:0;overflow:hidden}
.pr-figs figure:first-child{grid-row:1/3}
.pr-figs img{width:100%;height:100%;object-fit:cover}
.pr-figs figure:first-child img{aspect-ratio:auto;min-height:100%}
.pr-figs figure:not(:first-child) img{aspect-ratio:4/3}
.pr-credit{margin:0 0 clamp(1.5rem,3vw,2.25rem);font-size:.8rem;color:var(--sage)}
.pr-body{max-width:60ch}
.pr-body p{margin:0 0 1.2rem;color:#D6D4CA;font-size:.972rem}
.pr-body p:first-child{font:300 clamp(1.25rem,1.9vw,1.55rem)/1.45 var(--serif);color:var(--text)}
.pr-body blockquote{margin:2rem 0;padding-left:1.25rem;border-left:1px solid var(--brass);font:300 italic clamp(1.4rem,2.4vw,1.9rem)/1.25 var(--serif)}
.pr-body cite{display:block;margin-top:.8rem;font:normal .85rem/1.4 var(--sans);color:var(--sage)}
.pr-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
@media (max-width:700px){
  .pm{width:100vw;height:100dvh;border:0}
  .pr-figs{grid-template-columns:1fr;grid-template-rows:none}
  .pr-figs figure:first-child{grid-row:auto}
  .pr-figs figure:not(:first-child){display:none}
}

/* footer */
/* the logo on the left; Habitats, Studio and Reach out in three equal columns from the "Services" line to the right
   gutter (client, 12 Oct: 'Below we space out equally') */
footer{padding:3.5rem var(--gut) 2.5rem;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,calc((var(--tail) - 4rem) / 3)));gap:2rem;border-top:1px solid var(--line);font-size:.92rem}
footer h2{font:500 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--sage);margin:0 0 1rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
footer li a{display:inline-block;padding:.4rem 0}
footer a{text-decoration:none;opacity:.85}footer a:hover{opacity:1;color:var(--brass)}
footer .tagline{margin:1.25rem 0 0;max-width:30ch;color:var(--sage)}
footer .tagline.label{max-width:none;white-space:nowrap}
footer .fine{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:2rem;border-top:1px solid var(--line);color:var(--sage);font-size:.8rem}

/* six nav items and two icons: tighter between 900 and 1060px */
@media (min-width:901px) and (max-width:1060px){
  :root{--nav-gap:1.1rem; --tail:calc(22.42rem + 3.55 * var(--nav-gap) + 78px); --gap-r:calc(3.26rem + var(--nav-gap));
    --tail-hab:calc(var(--tail) + 7.63rem + 2 * var(--nav-gap))}
  .nav a{letter-spacing:.15em}
}
@media (max-width:900px){
  .hero::before{background:linear-gradient(180deg,rgba(18,24,18,.55) 0%,rgba(18,24,18,.15) 28%,rgba(18,24,18,.82) 58%,rgba(18,24,18,.94) 100%)}
  .nav{display:none;position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:1.75rem}
  .nav.is-open{display:flex}
  .nav a{font-size:1rem;min-height:48px}
  .nav-social{margin:0;gap:1rem}
  .nav-social svg{width:22px;height:22px}
  .menu-btn{display:block;position:relative;z-index:50}
  .hero-inner,.about-intro,.press,.panel-card,.page-hero,.story,.enquiry,.split,.faq-group,.contact-page,.expertise{grid-template-columns:1fr}
  .about-intro p,.page-hero .lede,.enquiry p,.ex-body > p,.story .paras p{max-width:60ch}
  .stack-index .t{display:none}
  .stack-side{top:calc(var(--head-h) + 1rem);transform:none}
  .stack-side .more{display:none}
  .stack-after{display:block}
  .stack-after + .plist-sec{padding-top:0}
  .disciplines,.how,.credits{grid-template-columns:1fr}
  /* no photograph under "Expertise" on phones and tablets, so the text comes straight after the heading (client, 12 Oct:
     'We drop this image. So the text can move up in mobile. No issue for desktop view') */
  .expertise figure{display:none}
  .story.solo .paras{grid-column:auto}
  .about-intro > div:last-child,.ex-body{padding-top:0}
  .press{grid-template-rows:none}
  .press > .label,.press h2,.press .recog,.press .quote{grid-column:1;grid-row:auto}
  .press .recog{margin-top:2rem}
  footer{grid-template-columns:1fr 1fr}
}
/* phones: the wording sits under the photographs, not over them (client, 9 Oct) */
@media (max-width:700px){
  .hero{display:block;min-height:0}
  .hero .slides{position:relative;height:62svh}
  .film .reveal{aspect-ratio:16/9}
  .hero::before{bottom:auto;height:62svh;background:linear-gradient(180deg,rgba(18,24,18,.6) 0%,rgba(18,24,18,0) 24%)}
  .hero-inner{padding:1.75rem var(--gut) 1rem}
  .hero h1{margin-bottom:1.5rem}
  /* habitats: the slides stack in one grid cell, so the slideshow is as tall as its longest write-up */
  .hp{height:auto;min-height:0;overflow:visible}
  .hp .hs-slides{position:relative;display:grid}
  .hp .hs-slide{position:relative;inset:auto;grid-area:1/1}
  .hp .panel-media{position:relative;inset:auto;height:56svh}
  .hp .panel::before{bottom:auto;height:56svh;background:linear-gradient(180deg,rgba(18,24,18,.55) 0%,rgba(18,24,18,0) 16%)}
  .hp .panel-card{position:static;padding:1.25rem var(--gut) 0;gap:.5rem}
  .hp .panel-card h2{font-size:2rem;margin-top:.5rem}
  .hp .hs-ctrl{position:static;padding:.75rem var(--gut) 0}
  .hp::after,.hp::before{display:none}
  /* phones: the slideshow first, then the H1 and filters under its controls */
  .hp{display:flex;flex-direction:column}
  .hp .hs-slides{order:1}
  .hp .hs-ctrl{order:2}
  .hp-top{position:static;order:3;max-width:none;padding:1.75rem var(--gut) 0}
  .hp-top h1{font-size:1.25rem}
  .hs{height:auto;min-height:0;overflow:visible}
  .hs .hs-slides{position:relative;height:66svh;overflow:hidden}
  .hs::before{bottom:auto;height:66svh;background:linear-gradient(180deg,rgba(18,24,18,.6) 0%,rgba(18,24,18,0) 24%)}
  .hs-bar{position:static;flex-direction:column;align-items:stretch;gap:1.25rem;padding:1.5rem var(--gut) 1.75rem}
  .hs h1{margin-top:.6rem}
  .hs-ctrl{justify-content:flex-start}
  .hs-btn{background:none}
  .next{min-height:0}
  .next-media{position:relative;height:46svh}
  .next::before{display:none}
  .next-inner{position:static;padding:1.5rem var(--gut) 2rem}
}
@media (max-width:600px){
  .row2{grid-template-columns:1fr}
  .credits div{grid-template-columns:1fr;gap:.3rem}
  footer{grid-template-columns:1fr}
}