@charset "utf-8";
/* ==================================================================
   ETERNAL DESIGN AND BUILD LTD — VERSION 5
   /assets/css/v5.css

   V5 is set like a printed monograph rather than a web template.
   A warm paper ground, one serif with real optical sizes for
   headings and captions, Inter for reading (the face the brochure
   uses), and no monospace, no uppercase labels and no numbered
   rows. Photographs are placed asymmetrically and captioned in
   words, the way a magazine would.

   Palette and type match the A4 brochure: warm off-white, near-
   black and a single bronze accent.

   CONTENTS
   01 Tokens      02 Base        03 Type        04 Header & menu
   05 Layout      06 Buttons     07 Photographs 08 Homepage
   09 Project     10 Work index  11 Inner pages 12 Gallery & lightbox
   13 Forms       14 Credentials 15 Footer      16 The map
   17 Motion      18 Responsive  19 Print
================================================================== */

/* ============================ 00 FONTS ========================= */
/* Self-hosted (SIL Open Font License; licences in assets/fonts).
   Newsreader carries its optical-size and weight axes; Inter its weight axis. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;
  src:url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-wght-italic.woff2") format("woff2")}

/* ============================ 01 TOKENS ======================== */
:root{
  --paper:#F5F2EC;
  --paper-2:#ECE7DE;
  --paper-3:#E0D9CC;
  --ink:#1B1915;
  --ink-2:#36322B;
  --grey:#6D665C;
  --grey-2:#968E82;
  --bronze:#86663F;
  --dark:#1F1C18;
  --on-dark:#F0EBE2;
  --on-dark-dim:#ADA597;
  --bronze-on-dark:#C9A97A;
  --line:rgba(27,25,21,.16);
  --line-soft:rgba(27,25,21,.09);
  --line-on-dark:rgba(240,235,226,.16);

  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --max:1520px;
  --gut:clamp(1.25rem,4.4vw,4.5rem);
  --hh:78px;

  --s1:.5rem; --s2:1rem; --s3:1.75rem;
  --s4:clamp(2.25rem,3.6vw,3.5rem);
  --s5:clamp(3.5rem,6vw,6rem);
  --s6:clamp(5rem,10vw,10rem);

  --e:cubic-bezier(.2,.7,.2,1);
}

/* ============================ 02 BASE ========================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 1.5rem)}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-size:clamp(.98rem,.95rem + .16vw,1.06rem);line-height:1.66;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01";overflow-x:hidden;
}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto;background:var(--paper-2)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--ink);color:var(--paper)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:0;top:0;z-index:400;background:var(--ink);color:var(--paper);padding:.8rem 1.2rem}

/* ============================ 03 TYPE ========================== */
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:300;color:var(--ink);font-optical-sizing:auto}
h1{font-size:clamp(2.7rem,6.2vw,5.9rem);line-height:.98;letter-spacing:-.025em;text-wrap:balance}
h2,.d2{font-size:clamp(2rem,3.9vw,3.4rem);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
h3,.d3{font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.14;letter-spacing:-.012em;text-wrap:balance}
h4,.d4{font-size:clamp(1.1rem,1.35vw,1.3rem);line-height:1.25;font-weight:400}
.d1{font-size:clamp(2.7rem,6.2vw,5.9rem);line-height:.98;letter-spacing:-.025em}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300}
p{margin:0 0 1em;max-width:62ch}
p:last-child{margin-bottom:0}
.bright{color:var(--ink)}
em{font-style:italic}

.lede{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,2vw,1.8rem);
  line-height:1.3;letter-spacing:-.01em;color:var(--ink);max-width:30ch}
.lede--wide{max-width:38ch}
.body-lede{font-size:clamp(1.06rem,1.25vw,1.17rem);line-height:1.6;color:var(--ink-2);max-width:58ch}

/* V4's small-capital labels become margin notes: italic serif, sentence case */
.lab{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.35;
  letter-spacing:0;text-transform:none;color:var(--grey);margin:0}
.lab--grey{color:var(--grey-2)}
.num{font-family:var(--sans);font-size:.84rem;letter-spacing:0;text-transform:none;
  color:var(--grey-2);font-variant-numeric:normal;line-height:1.5}
.mono{font-variant-numeric:tabular-nums}

/* dark grounds */
.on-ink{background:var(--dark);color:var(--on-dark-dim)}
.on-ink p{color:var(--on-dark-dim)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4,.on-ink .bright,.on-ink .lede{color:var(--on-dark)}
.on-ink .lab{color:var(--bronze-on-dark)}
.on-ink .num{color:var(--on-dark-dim)}
.on-ink .rowlink__t,.on-ink .plate__name,.on-ink .quote p{color:var(--on-dark)}
.on-ink .rowlink__m,.on-ink .rowlink__d,.on-ink .plate__where,.on-ink .tick li,.on-ink .quote footer{color:var(--on-dark-dim)}
.on-ink .rows{border-top-color:var(--line-on-dark)}
.on-ink .rowlink,.on-ink .tick li{border-bottom-color:var(--line-on-dark)}
.on-ink .tlink{border-bottom-color:var(--line-on-dark)}
.on-ink .spec dd{color:var(--on-dark)}
.ftr__mark--logo img{width:clamp(220px,28vw,360px);height:auto;background:transparent!important;border:0}
/* ============================ 04 HEADER & MENU ================= */
.hdr{position:sticky;top:0;z-index:120;background:rgba(245,242,236,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--e)}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:var(--hh);
  display:flex;align-items:center;justify-content:space-between;gap:2rem}
.mark{display:flex;align-items:baseline;gap:.6rem;font-family:var(--serif);font-size:1.72rem;
  font-weight:400;letter-spacing:-.01em;color:var(--ink);line-height:1;white-space:nowrap}
.mark span{font-family:var(--sans);font-size:.77rem;letter-spacing:.01em;color:var(--grey);font-weight:400}.
.mark picture,.mark img{display:block}
.mark img{height:40px;width:auto;background:none}
@media (max-width:420px){.mark img{height:32px}}
.ftr__mark--logo picture,.ftr__mark--logo img{display:block}
.ftr__mark--logo img{width:clamp(200px,24vw,300px);height:auto;background:none}
.hdr nav{display:flex;align-items:center;gap:clamp(1rem,1.9vw,2rem)}
.hdr nav a{font-size:.9rem;color:var(--ink-2);padding:.25rem 0;position:relative}
.hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e)}
.hdr nav a:hover::after{transform:scaleX(1)}
.hdr nav .hdr__cta{color:var(--ink);font-weight:500;margin-left:.4rem;padding:.55rem 1rem;border:1px solid var(--ink)}
.hdr nav .hdr__cta::after{display:none}
.hdr nav .hdr__cta:hover{background:var(--ink);color:var(--paper)}

.burger{display:none;width:30px;height:20px;position:relative}
.burger i{position:absolute;left:0;right:0;height:1px;background:var(--ink);transition:transform .3s var(--e)}
.burger i:first-child{top:5px}.burger i:last-child{bottom:5px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-4.5px) rotate(-45deg)}

.menu{position:fixed;inset:var(--hh) 0 0;z-index:110;background:var(--paper);overflow-y:auto;
  padding:var(--s3) var(--gut) var(--s5)}
.menu nav{display:flex;flex-direction:column}
.menu nav > a{font-family:var(--serif);font-weight:300;font-size:2.1rem;line-height:1.15;
  padding:.45rem 0;color:var(--ink)}
.menu .sub{display:flex;flex-direction:column;padding:.1rem 0 .8rem 1rem;border-left:1px solid var(--line);margin:.2rem 0 .6rem}
.menu .sub a{font-size:.95rem;color:var(--grey);padding:.28rem 0}
.menu__tel{margin-top:var(--s3);font-size:1rem}
.menu__tel a{border-bottom:1px solid var(--line)}

/* ============================ 05 LAYOUT ======================== */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap--tight{max-width:1100px}
.sec{padding:var(--s5) 0}
.sec--sm{padding:var(--s4) 0}
.sec--xs{padding:var(--s3) 0}
.sec--line{border-top:1px solid var(--line-soft)}
.bleed{width:100%}

.two{display:grid;gap:var(--s2)}
@media (min-width:900px){
  .two{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(1.5rem,4vw,4.5rem)}
}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.stack--s{gap:var(--s2)}
.stack--l{gap:var(--s4)}
.hgroup{display:flex;flex-direction:column;gap:.35rem;padding-top:.35rem}
.hgroup > span.num{display:none}

/* a section heading with a short note beside it */
.sh{display:grid;gap:.8rem;margin-bottom:var(--s4)}
.sh p{color:var(--grey);max-width:46ch}
@media (min-width:860px){
  .sh{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:var(--s4)}
  .sh--row p{justify-self:end;text-align:right}
}

/* ============================ 06 BUTTONS ======================= */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.93rem;
  font-weight:500;letter-spacing:0;text-transform:none;padding:.9rem 1.45rem;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:background .3s var(--e),color .3s var(--e)}
.btn:hover{background:transparent;color:var(--ink)}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn:not(.btn--fill):not(.btn--light){}
.btn--light,.on-ink .btn,.on-ink .btn--fill{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.btn--light:hover,.on-ink .btn:hover,.on-ink .btn--fill:hover{background:transparent;color:var(--on-dark)}
.btn--sm{padding:.6rem 1rem}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.btns .btn + .btn{background:transparent;color:var(--ink)}
.btns .btn + .btn:hover{background:var(--ink);color:var(--paper)}
.on-ink .btns .btn + .btn{color:var(--on-dark);border-color:var(--line-on-dark)}

/* text link: an underline that is part of the type, not a decoration */
.more,.tlink{display:inline-block;font-family:var(--sans);font-size:.95rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.32em;
  text-decoration-color:var(--bronze);transition:text-underline-offset .3s var(--e),color .2s}
.more:hover,.tlink:hover{text-underline-offset:.5em;color:var(--bronze)}
.on-ink .more,.on-ink .tlink{color:var(--on-dark);text-decoration-color:var(--bronze-on-dark)}
.tlink + .tlink{margin-left:1.4rem}

/* ============================ 07 PHOTOGRAPHS =================== */
.ph{margin:0;position:relative}
.ph a{display:block;overflow:hidden}
.ph img{width:100%;transition:transform 1.4s var(--e)}
.ph a:hover img{transform:scale(1.02)}
.ph figcaption{font-family:var(--serif);font-style:italic;font-size:1.04rem;line-height:1.45;
  color:var(--ink-2);margin-top:.8rem;max-width:46ch}
.on-ink .ph figcaption{color:var(--on-dark)}

/* inherited V4 figure and placeholder */
.shot{margin:0;position:relative;overflow:hidden;background:var(--paper-2)}
.shot img{width:100%}
.shot figcaption{font-family:var(--serif);font-style:italic;font-size:1.04rem;color:var(--ink-2);padding-top:.75rem;
  padding-inline:var(--gut);background:var(--paper)}
.await{border:1px solid var(--line-soft);background:var(--paper-2);display:grid;place-items:center;
  text-align:center;padding:var(--s4) var(--s3);min-height:240px}
.await p{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--grey);max-width:30ch;margin:0}

/* ============================ 08 HOMEPAGE ====================== */
/* --- opening: words on the left, a whole room on the right --- */
.open{display:grid;max-width:calc(var(--max) + 12vw);margin:0 auto 0 0}
.open__text{padding:clamp(2.5rem,6vw,5.5rem) var(--gut) var(--s4);display:flex;flex-direction:column;
  justify-content:flex-end;gap:1.6rem}
.open__k{font-size:.9rem;color:var(--grey);margin:0}
.open h1{max-width:9ch}
.open h1 em{display:block;color:var(--ink-2)}
.open__p{font-size:clamp(1.02rem,1.2vw,1.12rem);max-width:40ch;color:var(--ink-2)}
.open__a{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin:0}
.open__img .ph img{width:100%;height:100%;object-fit:cover}
.open__img figcaption{padding:0 var(--gut);margin-top:.75rem}
@media (min-width:900px){
  .open{grid-template-columns:minmax(0,5fr) minmax(0,7.4fr);min-height:calc(100svh - var(--hh));max-height:980px}
  .open__text{padding-left:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));padding-bottom:clamp(3rem,6vw,5.5rem)}
  .open__img{position:relative;min-height:0}
  .open__img .ph{height:100%;display:flex;flex-direction:column}
  .open__img .ph a{flex:1;min-height:0}
  .open__img .ph picture{height:100%}
  .open__img figcaption{position:absolute;left:0;bottom:-2.6rem;padding:0;margin:0;
    transform:translateX(-0%);max-width:52ch}
}

/* --- the statement --- */
.intro{padding:clamp(5.5rem,11vw,10rem) 0 clamp(3.5rem,7vw,7rem)}
.intro__p{font-family:var(--serif);font-weight:300;font-size:clamp(1.55rem,2.9vw,2.6rem);
  line-height:1.24;letter-spacing:-.015em;color:var(--ink);max-width:34ch;margin:0}
.intro__p em{color:var(--bronze)}
@media (min-width:900px){.intro__p{margin-left:calc(100% / 12 * 2)}}

/* --- four chapters --- */
.ch{padding:clamp(3rem,7vw,7rem) 0}
.ch + .ch{border-top:1px solid var(--line-soft)}
.ch__grid{display:grid;gap:var(--s3)}
.ch__h{font-size:clamp(2.2rem,4.4vw,3.9rem);line-height:1;letter-spacing:-.025em;margin-bottom:1.4rem}
.ch__text p{color:var(--ink-2)}
.ch__seen{font-size:.9rem;color:var(--grey);line-height:1.6}
.ch__seen span{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--grey);margin-right:.25rem}
.ch__seen a{color:var(--ink-2);border-bottom:1px solid var(--line)}
.ch__seen a:hover{border-bottom-color:var(--bronze);color:var(--ink)}
.ch__text .more{margin-top:.4rem}
@media (min-width:900px){
  .ch__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.25rem,2.4vw,2.5rem);row-gap:var(--s4)}
  /* a staircase: the lead photograph, the words beside its foot, and the
     second photograph stepping down below the words */
  .ch__big{grid-row:1}
  .ch__text{grid-row:1;align-self:end;padding-bottom:4.2rem}
  .ch__small{grid-row:2;align-self:start}
  .ch--l .ch__big{grid-column:1 / 9}
  .ch--l .ch__text{grid-column:9 / 13;padding-left:clamp(0rem,1.5vw,1.5rem)}
  .ch--l .ch__small{grid-column:9 / 12;padding-left:clamp(0rem,1.5vw,1.5rem)}
  .ch--r .ch__big{grid-column:5 / 13}
  .ch--r .ch__text{grid-column:1 / 5;padding-right:clamp(0rem,1.5vw,1.5rem)}
  .ch--r .ch__small{grid-column:2 / 5}
  /* a tall or square lead photograph takes fewer columns */
  .ch--l.ch--tall .ch__big{grid-column:1 / 7}
  .ch--l.ch--tall .ch__text{grid-column:8 / 13}
  .ch--l.ch--tall .ch__small{grid-column:8 / 12}
  .ch--r.ch--tall .ch__big{grid-column:7 / 13}
  .ch--r.ch--tall .ch__text{grid-column:1 / 6}
  .ch--r.ch--tall .ch__small{grid-column:2 / 6}
  .ch__small .ph{max-width:340px}
  .ch__small .ph--port{max-width:250px}
  .ch--r .ch__small .ph{margin-left:auto}
}
@media (max-width:899px){
  .ch__big{margin-inline:calc(var(--gut) * -1)}
  .ch__big figcaption{padding-inline:var(--gut)}
  .ch__small{width:68%;margin-left:auto}
}


/* --- the houses: one project after another --- */
.feats{padding-top:clamp(1rem,3vw,3rem)}
.feats .sh{margin-bottom:0}
.ch__k{font-size:.9rem;color:var(--grey);margin-bottom:.7rem}
.ch__h a:hover{color:var(--bronze)}
.ch__h{margin-bottom:1rem}
.ch__work{list-style:none;margin:0 0 1.3rem;padding:0;display:flex;flex-wrap:wrap;gap:.1rem 0;
  font-family:var(--serif);font-style:italic;font-size:1.06rem;color:var(--bronze)}
.ch__work li:not(:last-child)::after{content:"\00B7";margin:0 .5rem;color:var(--grey-2);font-style:normal}

/* --- what we build --- */
.svcs{padding:var(--s5) 0;background:var(--paper-2)}
.svcs__grid{display:grid;gap:var(--s3)}
.sv{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--ink)}
.sv a{display:grid;gap:.2rem 2rem;padding:1.15rem 0;border-bottom:1px solid var(--line);
  transition:padding .35s var(--e)}
.sv a:hover{padding-left:.8rem}
.sv__t{font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.1;color:var(--ink)}
.sv__d{color:var(--grey);font-size:.95rem}
@media (min-width:900px){
  .svcs__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.25rem,2.4vw,2.5rem)}
  .svcs__grid h2{grid-column:1 / 5}
  .sv{grid-column:5 / 13}
  .sv a{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:baseline}
}

/* --- recent houses (unused on the V5 homepage) --- */
.houses{padding:clamp(4rem,8vw,8rem) 0 var(--s5);background:var(--paper-2)}
.hss{display:flex;flex-direction:column;gap:clamp(3.5rem,8vw,8rem)}
.hs{display:grid;gap:1.2rem}
.hs h3{font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.05;margin-bottom:.4rem}
.hs h3 a:hover{color:var(--bronze)}
.hs__m{font-size:.88rem;color:var(--grey);margin-bottom:.9rem}
.hs__t p:last-child{color:var(--ink-2);max-width:40ch}
@media (min-width:900px){
  .hs{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.25rem,2.4vw,2.5rem);align-items:end}
  .hs--a .ph{grid-column:1 / 7;grid-row:1}.hs--a .hs__t{grid-column:7 / 11;grid-row:1;padding-bottom:1rem}
  .hs--b .ph{grid-column:5 / 13;grid-row:1}.hs--b .hs__t{grid-column:1 / 5;grid-row:1;padding-bottom:1rem}
  .hs--c .ph{grid-column:2 / 9;grid-row:1}.hs--c .hs__t{grid-column:9 / 13;grid-row:1;padding-bottom:1rem}
  .hs--d .ph{grid-column:7 / 11;grid-row:1}.hs--d .hs__t{grid-column:3 / 7;grid-row:1;padding-bottom:1rem}
}

/* --- the full list --- */
.list{padding:var(--s5) 0}
.sch{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.sch a{display:grid;gap:.15rem 1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--line);
  transition:background .25s var(--e),padding .35s var(--e)}
.sch a:hover{background:var(--paper-2);padding-left:.9rem;padding-right:.9rem}
.sch__n{font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.55rem);line-height:1.15;color:var(--ink)}
.sch__w,.sch__k,.sch__d{font-size:.9rem;color:var(--grey)}
@media (min-width:860px){
  .sch a{grid-template-columns:minmax(0,3.2fr) minmax(0,2.6fr) minmax(0,4fr) minmax(0,1.3fr);align-items:baseline}
  .sch__d{text-align:right}
}
.list__n{margin-top:1.4rem;font-size:.92rem;color:var(--grey)}
.list__n a{color:var(--ink);border-bottom:1px solid var(--bronze)}

/* --- the practice --- */
.prac{padding:var(--s5) 0 var(--s4);border-top:1px solid var(--line-soft)}
.prac__grid{display:grid;gap:var(--s3)}
.prac__lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,2.1vw,1.85rem);
  line-height:1.3;color:var(--ink);max-width:34ch;margin-bottom:1.3rem}
@media (min-width:900px){
  .prac__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.25rem,2.4vw,2.5rem)}
  .prac__grid h2{grid-column:1 / 5}
  .prac__body{grid-column:5 / 12}
}

/* --- a client --- */
.voice{padding:var(--s6) 0;background:var(--paper)}
.voice blockquote{margin:0 auto;max-width:52rem}
.voice blockquote p{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.35rem,2.2vw,1.95rem);line-height:1.38;letter-spacing:-.01em;color:var(--ink);max-width:none}
.voice footer{margin-top:1.4rem;font-size:.92rem;color:var(--grey)}
.voice__n{max-width:52rem;margin:var(--s3) auto 0;font-size:.85rem;color:var(--grey-2)}
.voice__n a{color:var(--ink-2);border-bottom:1px solid var(--line)}

/* --- contact --- */
.talk{background:var(--dark);color:var(--on-dark-dim);padding:var(--s5) 0}
.talk h2{color:var(--on-dark);margin-bottom:1.2rem}
.talk p{color:var(--on-dark-dim);max-width:44ch}
.talk .btn{margin-top:.6rem}
.talk__grid{display:grid;gap:var(--s4)}
.talk__d{margin:0;display:grid;gap:0;border-top:1px solid var(--line-on-dark)}
.talk__d div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--line-on-dark)}
.talk__d dt{font-family:var(--serif);font-style:italic;color:var(--on-dark-dim)}
.talk__d dd{margin:0;color:var(--on-dark)}
.talk__d a:hover{color:var(--bronze-on-dark)}
.talk__d dd,.talk__d dt{min-width:0}
.talk__d a,.ftr a[href^="mailto:"],a[href^="mailto:"]{overflow-wrap:anywhere}
@media (min-width:900px){.talk__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;column-gap:var(--s5)}}

/* ============================ 09 PROJECT PAGE ================== */
.pj__head{padding:clamp(2.5rem,6vw,5.5rem) 0 var(--s4)}
.pj__k{font-size:.92rem;color:var(--grey);margin-bottom:1rem}
.pj__head h1{max-width:14ch}
.pj__lede{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.3rem,2vw,1.75rem);
  color:var(--ink-2);margin-top:1.1rem;max-width:36ch}
.ph--bleed img{width:100%;max-height:92vh;object-fit:cover}
.ph--bleed.ph--tall{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.ph--bleed.ph--tall img{width:auto;max-height:88vh;margin:0 auto}
.pj__body{padding:var(--s5) 0}
.pj__grid{display:grid;gap:var(--s4)}
.facts{margin:0;border-top:1px solid var(--ink);align-self:start}
.facts div{padding:.8rem 0;border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--serif);font-style:italic;color:var(--grey);font-size:.98rem}
.facts dd{margin:.1rem 0 0;color:var(--ink);font-size:.95rem}
.pj__sum{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.32;
  color:var(--ink);max-width:36ch;margin-bottom:var(--s4)}
.pj__lab{font-size:clamp(1.3rem,1.8vw,1.6rem);margin-bottom:1rem}
.scope{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;border-top:1px solid var(--line)}
@media (min-width:640px){.scope{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}}
.scope li{padding:.6rem 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;color:var(--ink-2)}
.pj__sec{margin-bottom:var(--s3)}
.pj__sec h3{font-style:italic;font-size:1.3rem;margin-bottom:.55rem}
.pj__sh{color:var(--ink);font-weight:500}
@media (min-width:900px){
  .pj__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.25rem,2.4vw,2.5rem)}
  .facts{grid-column:1 / 4;position:sticky;top:calc(var(--hh) + 1.5rem)}
  .pj__main{grid-column:5 / 12}
}
.pj__photos{padding:var(--s4) 0 var(--s5);border-top:1px solid var(--line-soft)}
.pj__photos .sh h2{font-size:clamp(1.6rem,2.6vw,2.3rem)}

.next{background:var(--paper-2);padding:var(--s5) 0}
.next__grid{display:grid;gap:var(--s3);align-items:end}
.next__k{font-family:var(--serif);font-style:italic;color:var(--grey);margin-bottom:.5rem}
.next h2 a:hover{color:var(--bronze)}
.next p{color:var(--grey)}
@media (min-width:860px){.next__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s5)}}

/* ============================ 10 WORK INDEX ==================== */
.pg__head{padding:clamp(2.5rem,6vw,5.5rem) 0 var(--s4)}
.pg__head h1{max-width:14ch}
.pg__lede{font-family:var(--serif);font-weight:300;font-size:clamp(1.25rem,1.9vw,1.65rem);line-height:1.32;
  color:var(--ink-2);max-width:40ch;margin-top:1.2rem}
.wks{padding:var(--s3) 0 var(--s6)}
.wks__grid{display:grid;gap:clamp(3rem,6vw,5.5rem) clamp(1.5rem,4vw,4.5rem)}
.wk .ph a{aspect-ratio:5/4}
.wk .ph picture,.wk .ph img{height:100%;object-fit:cover}
.wk .await{aspect-ratio:5/4;min-height:0}
.wk__t{padding-top:1rem}
.wk h2{font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.08}
.wk h2 a:hover{color:var(--bronze)}
.wk__m{font-size:.9rem;color:var(--grey);margin:.35rem 0 .1rem}
.wk__k{font-family:var(--serif);font-style:italic;color:var(--grey);font-size:1rem}
@media (min-width:860px){
  .wks__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk:nth-child(even){margin-top:clamp(4rem,9vw,9rem)}
  .wk:nth-child(4n+1) .ph{width:88%}
  .wk:nth-child(4n+3) .ph{width:88%;margin-left:auto}
  .wk:nth-child(4n+3) .wk__t{width:88%;margin-left:auto}
}

/* ============================ 11 INNER PAGES (V4 structure) ==== */
.phead{padding:clamp(2.5rem,6vw,5.5rem) 0 var(--s4)}
.phead h1{max-width:16ch}
.phead .lede{max-width:34ch;color:var(--ink-2);font-style:italic}

.crumbs{border-bottom:1px solid var(--line-soft)}
.crumbs ol{list-style:none;margin:0;padding:.9rem 0;display:flex;flex-wrap:wrap;gap:.45rem;
  font-size:.82rem;color:var(--grey-2)}
.crumbs li + li::before{content:"\2192";margin-right:.45rem;color:var(--grey-2)}
.crumbs a{color:var(--grey)}
.crumbs a:hover{color:var(--ink)}

.article{max-width:64ch}
.article h2{font-size:clamp(1.55rem,2.4vw,2.1rem);margin:var(--s4) 0 var(--s2)}
.article h2:first-child{margin-top:0}
.article h3{font-size:1.25rem;font-style:italic;margin:var(--s3) 0 .6rem}
.article p{margin-bottom:1.05em}
.article ul,.article ol{margin:0 0 1.05em;padding-left:1.15rem}
.article li{margin-bottom:.35em}
.article strong{color:var(--ink);font-weight:600}
.toc{position:static}
@media (min-width:900px){.toc{position:sticky;top:calc(var(--hh) + var(--s3))}}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:.45rem 0;border-top:1px solid var(--line-soft);font-size:.88rem;line-height:1.36;color:var(--grey)}
.toc a:hover,.toc a.on{color:var(--ink)}

.tick{list-style:none;margin:0;padding:0;display:grid}
@media (min-width:620px){.tick{grid-template-columns:repeat(2,1fr);column-gap:2rem}}
.tick li{padding:.55rem 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;color:var(--ink-2)}

.caps{display:grid;gap:var(--s3) var(--s4);border-top:1px solid var(--line);padding-top:var(--s3)}
@media (min-width:760px){.caps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.caps{grid-template-columns:repeat(4,1fr)}}
.caps > div{display:flex;flex-direction:column;gap:.6rem}
.caps ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.caps li{font-size:.92rem;color:var(--grey)}

.rows{border-top:1px solid var(--line)}
.rowlink{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.25rem;align-items:baseline;
  padding:1.2rem 0;border-bottom:1px solid var(--line-soft);transition:padding .35s var(--e),background .25s}
.rowlink > .num{display:none}
.rowlink:hover{padding-left:.8rem;padding-right:.8rem;background:var(--paper-2)}
.on-ink .rowlink:hover{background:rgba(255,255,255,.04)}
.rowlink__t{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.12;color:var(--ink)}
.rowlink__d{font-size:.93rem;color:var(--grey);margin:.35rem 0 0;max-width:56ch}
.rowlink__m{font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--grey-2);white-space:nowrap}
@media (max-width:719px){.rowlink{grid-template-columns:1fr}.rowlink__m{display:none}}

.grid{display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
@media (min-width:760px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid--3{grid-template-columns:repeat(3,1fr)}}

.plate{display:block;position:relative}
.plate figure{margin:0;overflow:hidden;background:var(--paper-2)}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)}
.plate:hover img{transform:scale(1.02)}
.plate__cap{display:flex;flex-direction:column;gap:.2rem;padding-top:.9rem}
.plate__name{font-family:var(--serif);font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.12;color:var(--ink)}
.plate__where{font-size:.88rem;color:var(--grey)}
.plate .await,.plate__await{aspect-ratio:3/2;min-height:0;margin:0}

.quote{max-width:54ch;margin:0;padding-top:1.2rem;border-top:1px solid var(--line)}
.quote p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.2rem,1.7vw,1.5rem);
  line-height:1.38;color:var(--ink)}
.quote footer{font-size:.9rem;color:var(--grey);margin-top:.9rem}

.spec{border-top:1px solid var(--ink);padding-top:.2rem}
.spec dl{margin:0;display:grid}
.spec dt{font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--grey);padding-top:.75rem}
.spec dd{margin:0 0 .75rem;font-size:.95rem;color:var(--ink);border-bottom:1px solid var(--line-soft);padding-bottom:.75rem}
.spec dd:last-child{border-bottom:0}

.dets{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:640px){.dets{grid-template-columns:repeat(2,1fr);column-gap:var(--s4)}}
@media (min-width:1024px){.dets{grid-template-columns:repeat(3,1fr)}}
.dets > div{padding:1.15rem 0;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:.35rem}
.dets p{color:var(--ink)}
.dets a{border-bottom:1px solid var(--line)}
.dets a:hover{border-bottom-color:var(--bronze)}

/* ============================ 12 GALLERY & LIGHTBOX ============ */
.shots{display:flex;flex-direction:column;gap:clamp(.75rem,1.6vw,1.6rem)}
.grow{display:flex;gap:clamp(.75rem,1.6vw,1.6rem);width:100%}
.grow__cell{min-width:0;height:100%;overflow:hidden;background:var(--paper-2)}
.grow__cell picture{display:block;height:100%}
.grow__cell img{width:100%;height:100%;object-fit:cover}
.shots img{cursor:zoom-in}
@media (max-width:760px){
  .shots .grow{display:grid;grid-template-columns:1fr;aspect-ratio:auto !important}
  .grow__cell{height:auto;flex:none !important}
  .grow__cell picture,.grow__cell img{height:auto}
}
/* the viewer: a solid dark room, photograph in the middle, caption on
   its own band underneath — never laid over the photograph or the page */
.lb{position:fixed;inset:0;z-index:300;background:#141210;display:none;flex-direction:column;
  align-items:stretch;padding:0}
.lb.on{display:flex}
body.is-locked{overflow:hidden}
.lb__bar{position:static;flex:none;display:flex;justify-content:space-between;align-items:center;
  padding:.55rem clamp(1rem,4vw,3rem);color:var(--on-dark);font-size:.9rem}
.lb__bar button{font-size:.92rem;padding:.5rem;color:var(--on-dark);border-bottom:1px solid var(--line-on-dark)}
.lb img{flex:1 1 auto;min-height:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;
  padding:0 clamp(3.2rem,5vw,4.5rem);background:none}
.lb__cap{position:static;flex:none;margin:0 auto;width:100%;max-width:80ch;
  padding:.55rem clamp(1rem,4vw,3rem) .8rem;min-height:0;
  color:#EDE7DC;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.86rem;line-height:1.45;
  text-align:center}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:2.8rem;height:2.8rem;
  display:grid;place-items:center;border-radius:50%;background:rgba(20,18,16,.72);
  color:var(--on-dark);font-size:1.9rem;line-height:1;font-family:var(--serif);padding:0 0 .2rem}
.lb__nav:hover,.lb__nav:focus-visible{background:rgba(20,18,16,.92)}
.lb__nav--prev{left:.6rem}.lb__nav--next{right:.6rem}
@media (max-width:640px){
  .lb img{padding:0}
  .lb__nav{top:46%;width:2.6rem;height:2.6rem}
}

/* ============================ 13 FORMS ========================= */
.form{display:grid;gap:1.2rem 1.6rem}
@media (min-width:720px){.form{grid-template-columns:repeat(2,1fr)}.form .wide{grid-column:1 / -1}}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-family:var(--serif);font-style:italic;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--grey)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:.55rem 0;border-radius:0;width:100%}
.field textarea{min-height:8.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink);outline:none}
.field--check{flex-direction:row;align-items:flex-start;gap:.7rem}
.field--check input{width:1.3rem;height:1.3rem;flex:none;margin-top:.15rem;accent-color:var(--ink)}
.field--check label{font-family:var(--sans);font-style:normal;font-size:.9rem;color:var(--grey)}
.hp{position:absolute;left:-9999px}
.formnote{font-size:.88rem;color:var(--grey)}
.formnote[data-state="error"]{color:#8E3F2E}

.formnote[data-state="ok"]{color:#2F6B3F}
.form [hidden]{display:none!important}
.inline{display:flex;gap:.75rem;align-items:flex-end}
.inline input{flex:1;min-width:0}
.inline .btn{flex:none;white-space:nowrap}
.otp-code{letter-spacing:.35em;font-variant-numeric:tabular-nums}
.is-verified input{border-bottom-color:#2F6B3F}
/* ============================ 14 CREDENTIALS =================== */
/* Other organisations' marks, kept in their own colours, on the white
   ground each of them is drawn for. Heights from data/site.json keep
   them at equal optical area rather than equal height. */
.creds{background:#fff;padding:var(--s4) 0;border-block:1px solid var(--line-soft)}
.creds__t{font-family:var(--serif);font-style:italic;color:var(--grey);margin-bottom:1.4rem}
.creds__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1.6rem 2.2rem}
.creds__row li{display:flex;align-items:center}
.creds__row img{width:auto;height:auto;max-height:var(--h,36px);max-width:150px;background:none}
.creds__n{margin-top:1.6rem;font-size:.8rem;color:var(--grey-2);max-width:70ch}
@media (max-width:620px){.creds__row{justify-content:flex-start;gap:1.4rem 1.8rem}}
.creds__dl{margin:2.2rem 0 0;display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line-soft)}
.creds__dl div{display:grid;grid-template-columns:1fr;gap:.2rem;padding:.95rem 0;border-bottom:1px solid var(--line-soft)}
.creds__dl dt{font-family:var(--serif);font-size:1.08rem;color:var(--ink)}
.creds__dl dd{margin:0;color:var(--ink-2);max-width:68ch}
@media (min-width:760px){.creds__dl div{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:2rem;align-items:baseline}}

/* the V4 strip, still used on inner pages that call it directly */
.accs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
@media (min-width:720px){.accs{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.accs{grid-template-columns:repeat(8,1fr)}}
.accs > div{background:#fff;display:grid;place-items:center;padding:1.3rem .75rem;min-height:96px}
.accs img{width:auto;height:auto;max-height:var(--h,36px);max-width:100%;background:none}

/* ============================ 15 FOOTER ======================== */
.ftr{background:var(--dark);color:var(--on-dark-dim);padding:var(--s5) 0 var(--s3)}
.ftr__top{display:grid;gap:.8rem;padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--line-on-dark)}
.ftr .ftr__mark{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4.5vw,3.8rem);line-height:1;
  letter-spacing:-.02em;color:var(--on-dark);margin:0;max-width:none}
.ftr .ftr__mark em{color:var(--on-dark-dim)}
.ftr__line{max-width:44ch;color:var(--on-dark-dim)}
@media (min-width:860px){.ftr__top{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end}}
.ftr__grid{display:grid;gap:var(--s4)}
@media (min-width:640px){.ftr__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.ftr__grid{grid-template-columns:repeat(4,1fr)}}
.ftr h4{font-family:var(--serif);font-style:italic;font-size:1.05rem;font-weight:400;color:var(--on-dark);margin-bottom:.8rem}
.ftr .ftr__gap{margin-top:1.6rem}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.42rem}
.ftr li,.ftr p{font-size:.9rem;line-height:1.6}
.ftr p{color:var(--on-dark-dim);max-width:34ch}
.ftr a{color:var(--on-dark-dim);transition:color .2s}
.ftr a:hover{color:var(--on-dark)}
.ftr__dim{font-size:.84rem !important}
.ftr__legal{margin-top:var(--s5);padding-top:var(--s2);border-top:1px solid var(--line-on-dark);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;font-size:.8rem;color:var(--on-dark-dim)}

.cookie{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--dark);color:var(--on-dark);padding:1.1rem var(--gut);display:none}
.cookie.on{display:block}
.cookie__in{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.cookie p{color:var(--on-dark-dim);font-size:.88rem;margin:0;max-width:62ch}

/* ============================ 16 THE MAP ======================= */
.map{display:grid;gap:var(--s3);margin-top:var(--s4)}
@media (min-width:1000px){.map{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:var(--s4)}}
.map__main{min-width:0}
.map__stage{position:relative;background:var(--paper-2);border:1px solid var(--line-soft);overflow:hidden}
.map__bound{fill:var(--paper);stroke:var(--grey-2);stroke-width:1.4;stroke-linejoin:round;opacity:.95}
.map__svg{width:100%;height:100%;display:block;touch-action:pan-y}
.map__field circle{fill:var(--grey-2);opacity:.4}
.map__dist{font-family:var(--sans);font-size:13px;fill:var(--grey-2);opacity:.7;pointer-events:none}
.map__rule path,.map__n path{stroke:var(--grey-2);stroke-width:1.4;fill:none}
.map__rule text,.map__n text{font-family:var(--sans);font-size:15px;fill:var(--grey-2);text-anchor:middle}
.pin{cursor:pointer;transition:opacity .4s var(--e)}
.pin__body{fill:var(--ink);transition:fill .25s var(--e)}
.pin__eye{fill:var(--paper)}
.pin__halo{fill:var(--bronze);opacity:0;transition:opacity .3s var(--e)}
.pin__hit{fill:transparent}
.pin--case .pin__body{fill:var(--bronze)}
.pin__ring{fill:none;stroke:var(--paper);stroke-width:1.5;opacity:.9}
.map__svg.filtered .pin{opacity:.14}
.map__svg.filtered .pin.in{opacity:1}
.pin.on .pin__body,.pin:hover .pin__body,.pin:focus-visible .pin__body{fill:var(--bronze)}
.pin--case.on .pin__body,.pin--case:hover .pin__body{fill:var(--ink)}
.pin.on .pin__halo,.pin:hover .pin__halo,.pin:focus-visible .pin__halo{opacity:.2}
.pin:focus{outline:none}
.pin:focus-visible .pin__body{stroke:var(--paper);stroke-width:1.6}
.map__tip{position:absolute;z-index:3;transform:translate(-50%,-100%);pointer-events:none;background:var(--dark);
  color:var(--on-dark);padding:.5rem .75rem;max-width:16rem;font-size:.8rem;line-height:1.45;white-space:nowrap}
.map__tip b{font-weight:500;display:block}
.map__tip em{font-style:italic;color:var(--bronze-on-dark)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--s2)}
.chip{font-size:.8rem;color:var(--grey);background:none;border:1px solid var(--line);padding:.4rem .7rem;
  cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.chip span{margin-left:.4rem;color:var(--grey-2)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.is-on span{color:var(--on-dark-dim)}
.map__list{list-style:none;margin:0;padding:0;max-height:min(62vh,640px);overflow-y:auto;border-top:1px solid var(--line)}
.mgrp{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--grey);display:flex;justify-content:space-between;
  padding:1.1rem 0 .35rem;border-bottom:1px solid var(--line)}
.mrow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem .4rem .55rem 0;
  border-bottom:1px solid var(--line-soft);transition:background .2s,padding-left .25s var(--e)}
.mrow__t{font-size:.95rem;color:var(--ink)}
.mrow__t a{border-bottom:1px solid var(--bronze)}
.mrow__pc{font-size:.82rem;color:var(--grey-2);white-space:nowrap}
.mrow.on{background:var(--paper-2);padding-left:.5rem}
.mrow.on .mrow__pc{color:var(--bronze)}
.mrow[hidden],.mgrp[hidden]{display:none}
.map__note{margin-top:var(--s2);max-width:44ch}
.map__credit{margin-top:.75rem;font-size:.75rem;color:var(--grey-2);max-width:60ch}
@media (max-width:620px){.map__dist{font-size:17px}.map__stage{margin-inline:calc(var(--gut) * -.4)}}

/* ============================ 17 MOTION ======================== */
.rise{opacity:1;transform:none}
.js .rise{opacity:0;transform:translateY(18px);transition:opacity 1s var(--e),transform 1.1s var(--e)}
.js .rise.on{opacity:1;transform:none}

/* ============================ 18 RESPONSIVE ==================== */
@media (max-width:1140px){
  .hdr nav{display:none}
  .burger{display:block}
}
@media (max-width:620px){
  :root{--hh:66px}
  .mark{font-size:1.45rem}
  .mark span{font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js .rise{opacity:1;transform:none}
}

/* ============================ 19 PRINT ========================= */
@media print{
  .hdr,.menu,.cookie,.lb,.btn,.burger{display:none !important}
  body{background:#fff;color:#000}
}

/* ============================ INSIGHT PHOTOGRAPHS ============== */
.ins__photo{padding:0 0 var(--s4)}
.ins__fig{background:none;overflow:visible}
.ins__fig picture{display:block;overflow:hidden;background:var(--paper-2)}
.ins__fig img{width:100%;max-height:72vh;object-fit:cover}
.ins__fig figcaption{font-family:var(--serif);font-style:italic;font-size:.9rem;line-height:1.45;
  color:var(--ink-2);background:none;padding:.7rem 0 0;max-width:70ch}
.ins__fig figcaption a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bronze);
  text-underline-offset:3px;margin-left:.3rem;white-space:nowrap}
.rowlink--img{grid-template-columns:clamp(96px,11vw,168px) minmax(0,1fr) auto;align-items:center}
.rowlink__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.rowlink__img picture{display:block;height:100%}
.rowlink__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.rowlink--img:hover .rowlink__img img{transform:scale(1.03)}
@media (max-width:719px){.rowlink--img{grid-template-columns:96px minmax(0,1fr);gap:1rem}}
.ins__fig--port{max-width:620px}
.ins__fig--port img{max-height:none}
@media (min-width:960px){
  .ins__fig--port{max-width:none;display:grid;grid-template-columns:minmax(0,560px) minmax(0,22rem);
    column-gap:clamp(1.5rem,3vw,3rem);align-items:end}
  .ins__fig--port figcaption{padding:0 0 .2rem;font-size:.95rem}
}
.creds__row a{display:flex;align-items:center;padding:.3rem;border-radius:2px;transition:opacity .2s}
.creds__row a:hover{opacity:.7}
.creds__row a:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.creds__dl dt a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.creds__dl dt a:hover{text-decoration-color:var(--bronze)}

/* ============================ TOUCH SCREENS ==================== */
/* "Design & Build" beside the wordmark never drops below 12px */
@media (max-width:719px){.mark span{font-size:.78rem}}
/* Phones and tablets: every link and button gets a fingertip-sized
   (about 44px) tap area. The extra area is invisible, so nothing on
   the page moves or changes appearance. */
@media (pointer:coarse){
  .burger,.mark,.more,.tlink,.ftr__legal a,.ftr__grid a,.creds__dl dt a,.field--check label a,
  .next h2 a,.ch__h a,.wk__t h2 a,.crumbs a{position:relative}
  .burger::before,.mark::before,.more::before,.tlink::before,.ftr__legal a::before,.ftr__grid a::before,
  .creds__dl dt a::before,.field--check label a::before,.next h2 a::before,.ch__h a::before,
  .wk__t h2 a::before,.crumbs a::before{content:"";position:absolute;left:-.35rem;right:-.35rem;
    top:50%;height:44px;transform:translateY(-50%)}
  .burger::before{left:-8px;right:-8px}
  .chip{min-height:44px;padding-inline:.9rem}
  .field--check input{width:1.5rem;height:1.5rem}
  .pin__hit{r:30px}
}

/* Very wide screens: the opening keeps the same proportions as on a
   laptop instead of reserving a margin worked out from the full width */
@media (min-width:1700px){
  .open{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}
  .open__text{padding-left:var(--gut)}
}

/* service pages: questions */
.faq + .faq{margin-top:var(--s3)}
.faq h3{margin-bottom:.5rem}
.facts dd a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.facts dd a:hover{text-decoration-color:var(--bronze)}

/* ============================ SERVICES INDEX =================== */
.svxs{display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,5.5rem)}
.svx{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:center}
.svx__img{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--paper-2)}
.svx__img picture{display:block;height:100%}
.svx__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)}
.svx:hover .svx__img img{transform:scale(1.02)}
.svx__k{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--grey);margin:0 0 .5rem}
.svx h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05;margin:0 0 .9rem}
.svx h2 a:hover{color:var(--bronze)}
.svx__d{color:var(--ink-2);max-width:42ch;margin:0 0 1.1rem}
@media (min-width:761px){
  .svx{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2rem,5vw,5rem)}
  .svx--r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .svx--r .svx__img{order:2}
}