/* ============================================================
   SQUARE & TRUE — squareandtrue.uk
   ============================================================ */

@font-face{font-family:'Display';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-400.woff2) format('woff2')}
@font-face{font-family:'Display';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-500.woff2) format('woff2')}
@font-face{font-family:'Display';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-400i.woff2) format('woff2')}
@font-face{font-family:'Body';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/source-serif-400.woff2) format('woff2')}
@font-face{font-family:'Body';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/source-serif-600.woff2) format('woff2')}
@font-face{font-family:'Body';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/source-serif-400i.woff2) format('woff2')}
@font-face{font-family:'UI';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'UI';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff2) format('woff2')}

:root{
  --chalk:#F6F4EF; --ink:#191917; --fen:#2C382F; --brass:#8C6F3C;
  --sawn:#DAD5C8; --oxide:#8A3A2A;
  --rule:#E3DFD5; --mut:#6E6B62; --paper:#FFFFFF;
  --wrap:clamp(60rem,88vw,96rem); --text:switch;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem; --s8:10rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--chalk);color:var(--ink);font-family:Body,Georgia,'Times New Roman',serif;
  font-size:1.0625rem;line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:oldstyle-nums;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--fen);color:var(--chalk)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.narrow{max-width:clamp(44rem,62vw,70rem)}
.narrow.mid{margin-inline:auto}
.aside{position:sticky;top:6rem}
.measure{max-width:clamp(38rem,54vw,60rem)}
.grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,6vw,5rem);align-items:start}
section{padding-block:clamp(3.5rem,9vw,var(--s7))}
.pad-s{padding-block:clamp(2.5rem,6vw,var(--s6))}
.rule{border:0;border-top:1px solid var(--rule)}

/* ---------- type ---------- */
.eyebrow{font-family:UI,system-ui,sans-serif;font-size:.6875rem;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--brass);display:block}
h1,h2,h3,h4{font-family:Display,Georgia,serif;font-weight:400;line-height:1.08;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.14}
h3{font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.2}
h4{font-size:1.15rem}
.h-sm{font-size:clamp(1.6rem,2.8vw,2.1rem)}
p{margin-bottom:1.15em;max-width:clamp(38rem,54vw,60rem)}
p.lead,.standfirst{font-family:Display,Georgia,serif;font-size:clamp(1.35rem,2.3vw,1.75rem);
  line-height:1.42;max-width:32rem;color:var(--ink)}
.prose h2{margin:2.6rem 0 .85rem}
.prose h2:first-child{margin-top:0}
.prose p:last-child{margin-bottom:0}
strong{font-weight:600}
em{font-style:italic}
.small{font-family:UI,sans-serif;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.amp{color:var(--brass)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(246,244,239,.94);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--rule)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-block:.95rem;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.brand svg{height:26px;width:auto}
.brand .mk{height:15px;width:15px;flex:0 0 auto}
nav.main{display:flex;align-items:center;gap:clamp(.8rem,1.5vw,1.35rem)}
nav.main a{font-family:UI,sans-serif;font-size:.665rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);padding-block:.4rem;border-bottom:1px solid transparent;transition:border-color .18s,color .18s;white-space:nowrap}
nav.main a:hover,nav.main a[aria-current]{border-bottom-color:var(--brass)}
.btn{display:inline-block;font-family:UI,sans-serif;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;
  padding:.7rem 1.2rem;border:1px solid var(--ink);color:var(--ink);background:transparent;
  transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--chalk)}
.btn-fill{background:var(--fen);border-color:var(--fen);color:var(--chalk)}
.btn-fill:hover{background:var(--ink);border-color:var(--ink)}
.btn-light{border-color:var(--sawn);color:var(--chalk)}
.btn-light:hover{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.navtoggle{display:none;background:none;border:0;font-family:UI,sans-serif;font-size:.7rem;
  letter-spacing:.19em;text-transform:uppercase;cursor:pointer;color:var(--ink);padding:.5rem 0}

/* ---------- hero ---------- */
.hero{background:var(--fen);color:var(--chalk);position:relative;overflow:hidden}
.hero .wrap{padding-block:clamp(4.5rem,13vw,9.5rem);position:relative;z-index:2}
.hero h1{color:var(--chalk);max-width:16ch}
.hero .sub{font-family:Display,serif;font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.44;
  color:#E9E6DD;max-width:28rem;margin-top:1.6rem}
.hero .eyebrow{color:var(--sawn);margin-bottom:1.5rem}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.6rem}
.hero-diag{position:absolute;inset:0;opacity:.09;pointer-events:none}

.page-head{background:var(--chalk);border-bottom:1px solid var(--rule)}
.page-head .wrap{padding-block:clamp(2.8rem,7vw,5rem)}
.page-head h1{max-width:18ch}
.page-head .standfirst{margin-top:1.35rem;color:#3A382F}
.crumb{font-family:UI,sans-serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);margin-bottom:1.4rem}
.crumb a:hover{color:var(--brass)}

/* ---------- plates (image placeholders) ---------- */
.plate{position:relative;background:var(--sawn);overflow:hidden;display:grid;place-items:center}
.plate::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 2px,transparent 2px 9px);opacity:.5}
.plate.dark{background:var(--fen)}
.plate .ph{position:relative;z-index:2;text-align:center;padding:1.5rem;max-width:26rem}
.plate .ph .lab{font-family:UI,sans-serif;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fen);opacity:.62}
.plate.dark .ph .lab{color:var(--sawn);opacity:.62}
.plate .ph .txt{font-family:Display,serif;font-size:1.05rem;line-height:1.4;margin-top:.5rem;color:var(--fen);opacity:.78}
.plate.dark .ph .txt{color:var(--chalk);opacity:.72}
.ph-img{width:100%;height:auto;object-fit:cover;display:block;background:var(--sawn)}
.r-wide{aspect-ratio:16/9} .r-room{aspect-ratio:3/2} .r-tall{aspect-ratio:4/5} .r-sq{aspect-ratio:1/1}
.r-band{aspect-ratio:21/9}
figcaption{font-family:UI,sans-serif;font-size:.7rem;letter-spacing:.1em;color:var(--mut);margin-top:.7rem;text-transform:uppercase}

/* ---------- cards ---------- */
.card{display:block;background:var(--paper);border:1px solid var(--rule);transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--brass);transform:translateY(-2px)}
.card .body{padding:1.5rem 1.5rem 1.7rem}
.card .kicker{font-family:UI,sans-serif;font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.card h3{margin:.55rem 0 .5rem;font-size:1.45rem}
.card p{font-size:.94rem;line-height:1.62;color:#43413A;margin:0}
.card .more{font-family:UI,sans-serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);margin-top:1.05rem;display:inline-block}
.card:hover .more{color:var(--brass)}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.94rem;margin:1.7rem 0;font-variant-numeric:lining-nums}
.tbl caption{font-family:UI,sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);text-align:left;padding-bottom:.8rem}
.tbl th{font-family:UI,sans-serif;font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  text-align:left;background:var(--fen);color:var(--chalk);padding:.8rem .95rem}
.tbl td{padding:.85rem .95rem;border-bottom:1px solid var(--rule);vertical-align:top;color:#33312B}
.tbl tbody tr:nth-child(even) td{background:#FBFAF7}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.7rem 0}
.tbl-scroll .tbl{margin:0;min-width:30rem}
.tbl-scroll:focus-visible{outline:2px solid var(--sawn);outline-offset:3px}
.specs{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:.5rem}
.specs th{font-family:UI,sans-serif;font-size:.63rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);text-align:left;width:34%;padding:.72rem 1rem .72rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.specs td{padding:.72rem 0;border-bottom:1px solid var(--rule);vertical-align:top;color:#33312B}

/* ---------- panels ---------- */
.panel{background:var(--paper);border:1px solid var(--rule);padding:clamp(1.5rem,3vw,2.4rem)}
.panel-fen{background:var(--fen);color:var(--chalk)}
.panel-fen p{color:#E4E1D7}
.panel-fen .eyebrow{color:var(--sawn)}
.band{background:var(--fen);color:var(--chalk)}
.band p{color:#E4E1D7} .band h2{color:var(--chalk)} .band .eyebrow{color:var(--sawn)}
.band-sawn{background:#EFECE3}
.note{background:#EFECE3;border-left:2px solid var(--brass);padding:1.3rem 1.6rem;margin:1.9rem 0;max-width:40rem}
.note p{margin:0;font-size:.97rem}
.pull{font-family:Display,serif;font-size:clamp(1.5rem,2.7vw,2.05rem);line-height:1.34;color:var(--fen);
  border-left:2px solid var(--brass);padding-left:1.4rem;margin:2.4rem 0;max-width:34rem}
.band .pull{color:var(--chalk);border-color:var(--brass)}

/* ---------- numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(218,213,200,.3)}
.nums div{padding:1.9rem 1.2rem;border-right:1px solid rgba(218,213,200,.3)}
.nums div:last-child{border-right:0}
.nums .fig{font-family:Display,serif;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;color:var(--chalk)}
.nums .lab{font-family:UI,sans-serif;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sawn);opacity:.8;margin-top:.7rem;display:block}

/* ---------- faq ---------- */
details.faq{border-bottom:1px solid var(--rule)}
details.faq summary{list-style:none;cursor:pointer;padding:1.15rem 2.2rem 1.15rem 0;position:relative;
  font-family:Display,serif;font-size:1.22rem;line-height:1.35}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';position:absolute;right:.2rem;top:1.05rem;color:var(--brass);font-size:1.3rem;font-family:UI,sans-serif}
details.faq[open] summary::after{content:'–'}
details.faq .a{padding:0 0 1.4rem;max-width:38rem;color:#43413A;font-size:.99rem}

/* ---------- forms ---------- */
.form{display:grid;gap:1.15rem;max-width:34rem}
.field label{font-family:UI,sans-serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);display:block;margin-bottom:.45rem}
.field input,.field select,.field textarea{width:100%;font-family:Body,serif;font-size:1rem;padding:.75rem .9rem;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass);outline-offset:-1px;border-color:var(--brass)}
.field .hint{font-size:.83rem;color:var(--mut);margin-top:.35rem}

/* ---------- footer ---------- */
footer.site{background:var(--fen);color:var(--sawn);padding-block:clamp(3rem,7vw,5rem) 2.2rem;margin-top:0}
footer.site a{color:var(--sawn);opacity:.86}
footer.site a:hover{color:var(--chalk);opacity:1}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2.2rem}
.foot-grid h4{font-family:UI,sans-serif;font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--chalk);opacity:.62;margin-bottom:1rem;font-weight:500}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:.55rem;font-size:.9rem}
.foot-brand svg{height:32px;margin-bottom:1.2rem}
.foot-brand p{font-size:.9rem;color:var(--sawn);opacity:.8;max-width:22rem}
.foot-base{border-top:1px solid rgba(218,213,200,.2);margin-top:3rem;padding-top:1.6rem;
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-family:UI,sans-serif;font-size:.68rem;letter-spacing:.1em;color:var(--sawn);opacity:.7}

/* ---------- misc ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.tag{font-family:UI,sans-serif;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.36rem .7rem;color:var(--mut)}
.quote-block{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:2.2rem 0;margin:2.6rem 0}
.quote-block q{font-family:Display,serif;font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.4;quotes:'“' '”'}
.quote-block .attr{font-family:UI,sans-serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);margin-top:1rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--fen);color:var(--chalk);padding:.7rem 1rem}
.list-plain{list-style:none;max-width:38rem}
.list-plain li{position:relative;padding-left:1.5rem;margin-bottom:.6rem}
.list-plain li::before{content:'—';position:absolute;left:0;color:var(--brass)}

@media(max-width:1180px){
  .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  nav.main{display:none}
  .navtoggle{display:block}
  .site-head.open nav.main{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;
    position:absolute;top:100%;left:0;right:0;background:var(--chalk);border-bottom:1px solid var(--rule);
    padding:1rem clamp(1.25rem,4vw,3rem) 1.6rem}
  .nums{grid-template-columns:1fr 1fr}
  .nums div:nth-child(2){border-right:0}
}
@media(max-width:620px){
  .brand svg{height:19px} .brand .mk{height:12px;width:12px} .brand{gap:.5rem}
  .head-in{gap:.8rem}
}
@media(max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .specs th{width:40%}
  .tbl{font-size:.86rem} .tbl th,.tbl td{padding:.6rem .55rem}
}
@media print{.site-head,footer.site,.hero-actions{display:none}body{background:#fff}}

/* ── homepage: the establishing photograph ─────────────────────────────── */
.hero.has-photo .wrap{padding-block:clamp(6rem,17vw,12rem)}
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-photo img,.hero-photo picture{width:100%;height:100%;display:block}
.hero-photo img{object-fit:cover;object-position:50% 58%}
.hero.has-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(18,24,20,.93) 0%,rgba(18,24,20,.84) 34%,
             rgba(18,24,20,.58) 62%,rgba(18,24,20,.46) 100%)}
.hero.has-photo .hero-diag{z-index:2;opacity:.07}
.hero.has-photo .wrap{z-index:3}
@media(max-width:700px){
  .hero.has-photo::after{background:linear-gradient(180deg,rgba(20,26,22,.80) 0%,rgba(20,26,22,.88) 100%)}
  .hero-photo img{object-position:50% 50%}
}

/* honeypot — present for a robot, invisible and unreachable for a person */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   v2 — wider photography, image-led headers, denser grids
   Appended 7 August 2026. Overrides the block above.
   ============================================================ */

:root{
  --wrap:clamp(60rem,88vw,96rem);          /* text and standard content, unchanged */
  --wrap-wide:1600px;     /* card grids: more columns on a big monitor */
  --measure:38rem;        /* ~68 characters. The readable maximum. */
}

/* ---------- full-bleed photography -------------------------------------
   The single change that fixes "everything looks narrow". A photograph
   breaks out of its container to the full width of the window; the text
   around it does not. This is what Roundhouse, Plain English and Tom
   Howley all do, and it is why their sites feel wide and ours did not. */
.bleed{
  width:100vw;
  margin-inline:calc(50% - 50vw);
  max-width:none;
}
.bleed img{width:100%;height:auto;display:block}
.bleed.crop{height:clamp(24rem,62vh,44rem)}
.bleed.crop img{height:100%;object-fit:cover;object-position:50% 55%}

/* wide but not edge to edge — for pairs and detail rows */
.wrap-wide{max-width:var(--wrap-wide);margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3rem)}

/* ---------- image-led page header --------------------------------------
   Was: a title on the left of an empty band. Now: the title sits over the
   photograph, which is what a page on a site selling £60,000 kitchens
   should open with. Falls back to the old header where a page has no
   photograph of its own. */
.page-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(22rem,58vh,40rem);display:flex;align-items:flex-end}
.page-hero > picture,.page-hero > img{position:absolute;inset:0;z-index:0}
.page-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* two scrims: a vertical one so the title has a floor to stand on, and a
   horizontal one so the crumb and eyebrow at top-left stay legible whatever
   the photograph is doing behind them */
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(16,22,18,.88) 0%,rgba(16,22,18,.62) 20%,
                    rgba(16,22,18,.26) 46%,rgba(16,22,18,.06) 72%,rgba(16,22,18,.10) 100%),
    linear-gradient(to right,rgba(16,22,18,.50) 0%,rgba(16,22,18,.14) 40%,
                    rgba(16,22,18,0) 66%)}
.page-hero h1,.page-hero .standfirst,.page-hero .crumb,.page-hero .eyebrow{
  text-shadow:0 1px 24px rgba(10,14,11,.55)}
.page-hero .wrap{position:relative;z-index:2;
  padding-block:clamp(2.5rem,6vw,4.5rem);width:100%}
.page-hero .crumb,.page-hero .crumb a{color:#CFCABC}
.page-hero .crumb a:hover{color:#fff}
.page-hero .eyebrow{color:var(--sawn)}
.page-hero h1{color:var(--chalk);margin:.6rem 0 0}
.page-hero .standfirst{color:#E4E1D7;max-width:34rem;margin-top:1rem}

/* the plain header, for pages with no photograph — now centred, which is
   what he asked for, and only where there is no image to carry it */
.page-head{text-align:center}
.page-head .crumb{justify-content:center}
.page-head h1,.page-head .standfirst{margin-inline:auto}
.page-head .standfirst{max-width:36rem}
.page-head .eyebrow{display:block}

/* ---------- the readable measure --------------------------------------
   Unchanged in width, deliberately. 65-75 characters is the maximum the
   eye tracks comfortably and every competitor respects it. */
.narrow,.prose{max-width:var(--measure)}
.prose{margin-inline:auto}

/* ---------- grids that grow with the screen ---------------------------- */
.grid.g3,.grid.g4{grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr))}

/* rooms: four across on one line, as asked */
.grid.rooms{display:grid;gap:clamp(1.25rem,2.4vw,2rem);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.grid.rooms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid.rooms{grid-template-columns:1fr}}

/* projects: no orphan on the last row — seven items sit 4+3, not 3+3+1 */
.grid.projects{display:grid;gap:clamp(1.5rem,2.6vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(23rem,100%),1fr))}
.grid.projects > :first-child{grid-column:span 2}
@media(max-width:1000px){.grid.projects > :first-child{grid-column:span 1}}

/* journal: three, then four on a wide monitor, one on a phone */
.grid.journal{display:grid;gap:clamp(1.25rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}

/* ranges: two up, but full-bleed images inside the cards */
.grid.ranges{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(27rem,100%),1fr))}

/* ---------- the Enquire button ----------------------------------------
   It had a box round it that read as a stray form control. Now it is the
   one gold item in the bar, which is what a call to action should be. */
.site-head .btn-nav,.site-head .enquire{
  border:0;background:none;padding:.55rem 0;
  color:var(--brass);font-family:UI,sans-serif;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;position:relative}
.site-head .btn-nav::after,.site-head .enquire::after{
  content:"";position:absolute;left:0;right:0;bottom:.2rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease}
.site-head .btn-nav:hover::after,.site-head .enquire:hover::after{transform:scaleX(1)}

/* ---------- a photograph between sections ------------------------------ */
.plate-band{margin-block:clamp(3.5rem,8vw,6.5rem)}
.plate-band figcaption{max-width:var(--measure);margin:1rem auto 0;text-align:center;
  font-family:UI,sans-serif;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}

/* ---------- a pair of photographs, wide -------------------------------- */
.pair-wide{display:grid;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr))}

/* ---------- sister brands ---------------------------------------------- */
.sisters{display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr))}
.sister{border:1px solid var(--rule);padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--paper);display:flex;flex-direction:column;gap:.9rem}
.sister h3{margin:0}
.sister p{margin:0;color:#4A4842}
.sister .go{margin-top:auto;font-family:UI,sans-serif;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}

/* ---------- social ------------------------------------------------------ */
.social{display:flex;gap:1.1rem;align-items:center;margin-top:1.4rem}
.social a{display:inline-flex;width:2.2rem;height:2.2rem;align-items:center;
  justify-content:center;border:1px solid rgba(218,213,200,.34);border-radius:50%;
  color:var(--sawn);transition:border-color .2s ease,color .2s ease}
.social a:hover{border-color:var(--brass);color:var(--brass)}
.social svg{width:1rem;height:1rem;fill:currentColor}

/* ---------- price band on a range page --------------------------------- */
.price-line{font-family:UI,sans-serif;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin-top:1.2rem}

/* ---------- mobile: stop everything feeling like a column -------------- */
@media(max-width:700px){
  .bleed.crop{height:clamp(18rem,52vh,26rem)}
  .page-hero{min-height:clamp(18rem,52vh,26rem)}
  .wrap{padding-inline:1.15rem}
  .prose{max-width:none}
  .grid.g3,.grid.g4,.grid.journal,.grid.ranges{grid-template-columns:1fr}
}

/* ---------- v2: chrome the earlier stylesheet did not cover -------------- */
.head-in{max-width:var(--wrap-wide)}
nav.main a.on{border-bottom-color:var(--brass)}
.mnav{display:none}
.mnav[hidden]{display:none}
@media(max-width:1060px){
  nav.main{display:none}
  .navtoggle{display:block}
  .mnav:not([hidden]){display:flex;flex-direction:column;gap:0;
    padding:0 clamp(1.25rem,4vw,3rem) 1.2rem;border-top:1px solid var(--rule)}
  .mnav a{font-family:UI,sans-serif;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);padding:.85rem 0;border-bottom:1px solid var(--rule)}
  .mnav a:last-child{border-bottom:0;color:var(--brass)}
}
footer.site .wrap{max-width:var(--wrap-wide)}
.foot-grid{grid-template-columns:1.6fr repeat(5,1fr)}
@media(max-width:1180px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h4{font-family:UI,sans-serif;font-size:.66rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--sawn);margin:0 0 .9rem}
.foot-grid a{color:#CFCABC;font-size:.86rem}
.foot-grid a:hover{color:var(--chalk)}
.foot-brand svg{height:30px;width:auto;margin-bottom:1.1rem}
.foot-brand p{color:#B9B5AA;font-size:.9rem;max-width:22rem}
.foot-legal{border-top:1px solid rgba(218,213,200,.18);margin-top:3rem;padding-top:1.6rem}
.foot-legal p{color:#8E8A80;font-size:.78rem;max-width:none}
.foot-legal a{color:#B9B5AA}
.card-b .eyebrow{display:block;margin-bottom:.5rem}
.cta .split{align-items:center}

/* the featured project card is twice the width, so the card beside it must
   not stretch to match its height and leave a slab of empty paper */
.grid.projects{align-items:start}
.grid.ranges,.grid.g3,.grid.g4,.grid.journal{align-items:start}
.grid.projects > :first-child .ph-img{aspect-ratio:16/9;object-fit:cover;height:auto}

/* ---------- the locator on the contact page ----------------------------- */
.mapcard{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.6rem);align-items:center;border:1px solid var(--rule);
  background:var(--paper);padding:clamp(1.4rem,2.6vw,2.2rem)}
.mapcard img{width:100%;height:auto;display:block}
.mapcard-b p{margin:0 0 .9rem}
.maplinks{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.1rem 0}
.fineprint{font-size:.82rem;color:var(--mut)}
@media(max-width:820px){.mapcard{grid-template-columns:1fr}}

/* ---------- the enquiry form ------------------------------------------- */
.enq{border:1px solid var(--rule);background:var(--paper);
  padding:clamp(1.5rem,3vw,2.6rem) clamp(1.4rem,3vw,3rem)}
.enq-lede{max-width:34rem;color:var(--mut);margin:.4rem 0 1.8rem}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(1.2rem,2.4vw,2.2rem)}
.enq-grid > p{margin:0 0 1.15rem;max-width:none}
.enq-wide{grid-column:1 / -1}
@media(max-width:720px){.enq-grid{grid-template-columns:1fr}}
.enq label{display:block;font-family:UI,sans-serif;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sawn);margin-bottom:.45rem}
.enq .req{color:var(--brass)}
.enq input,.enq select,.enq textarea{width:100%;font:inherit;font-size:.95rem;
  color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:0;
  padding:.7rem .8rem;appearance:none}
.enq select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238C6F3C' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:11px;
  padding-right:2.2rem}
.enq textarea{resize:vertical;line-height:1.55}
.enq input:focus,.enq select:focus,.enq textarea:focus{outline:2px solid var(--brass);
  outline-offset:1px;border-color:var(--brass)}
.enq input:user-invalid,.enq textarea:user-invalid{border-color:#9A3B2C}
.enq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enq-send{margin:.6rem 0 1.2rem}
.enq-send .btn{cursor:pointer}
.enq .fineprint{max-width:38rem}
.enq-note{border-left:3px solid var(--brass);background:#fff;padding:1rem 1.2rem;
  margin:0 0 1.6rem}
.enq-note.bad{border-left-color:#9A3B2C}
.enq-note p{margin:0}

/* ── client testimonials ─────────────────────────────────────────────────
   Set in the body face rather than a display italic: these are people
   talking, not a masthead. Two columns on a desktop, one on a phone. */
.quotes{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));margin-top:1.4rem}
.quote{margin:0;padding:1.5rem 1.6rem;background:#FFFDF9;border:1px solid rgba(60,50,35,.10)}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-size:1.02rem;line-height:1.62}
.quote blockquote p::before{content:"\201C"}
.quote blockquote p::after{content:"\201D"}
.quote figcaption{margin-top:.9rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;opacity:.62}
.quotes-note{margin-top:1.5rem;max-width:44rem}
@media (max-width:700px){.quote{padding:1.2rem 1.25rem}}
/* Header nav. The primary menu was wider than the header, so it ran off the right edge and took Enquire and the Menu button with it. Labels are shortened in the menu itself; these rules condense the bar between 1181 and 1440px, and style the mnav panel wherever the burger shows rather than only below 1060px. */
@media (max-width:1440px) and (min-width:1181px){nav.main{gap:.7rem}nav.main a{font-size:.6rem;letter-spacing:.1em}}
@media (max-width:1180px){.mnav:not([hidden]){display:flex;flex-direction:column;gap:0;padding:0 clamp(1.25rem,4vw,3rem) 1.2rem;border-top:1px solid var(--rule)}.mnav a{font-family:UI,sans-serif;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:.85rem 0;border-bottom:1px solid var(--rule)}.mnav a:last-child{border-bottom:0;color:var(--brass)}}
/* Softer condensing: the bar only needs tightening below 1400px, and .7rem crowded the separators. Above 1400px the original spacing is restored. */
@media (max-width:1400px) and (min-width:1181px){nav.main{gap:1rem}nav.main a{font-size:.63rem;letter-spacing:.12em}}
@media (min-width:1401px){nav.main{gap:clamp(.8rem,1.5vw,1.35rem)}nav.main a{font-size:.665rem;letter-spacing:.15em}}
/* WhatsApp in the header, beside Enquire. Same number and prefilled message as the footer link and as reeveandco.com. Ink rather than brass so Enquire stays the primary action. The word is dropped below 1000px and the whole item below 620px, where the footer link carries it. */
.site-head .wa{padding:.55rem 0;color:var(--ink);font-family:UI,sans-serif;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;position:relative;white-space:nowrap}
.site-head .wa::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.site-head .wa:hover::after{transform:scaleX(1)}
@media (max-width:1000px){.site-head .wa .wa-w{display:none}}
@media (max-width:620px){.site-head .wa{display:none}}

/* 2026 site-wide refinement: calmer measure, tactile hierarchy and deliberate interaction. */
:root{--shadow-soft:0 18px 48px rgba(35,28,18,.10);--focus-ring:0 0 0 3px rgba(140,111,60,.32)}
body{font-kerning:normal;text-rendering:optimizeLegibility}.site-head{backdrop-filter:blur(10px)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.card{transition:transform .32s ease,box-shadow .32s ease}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}.card .ph-img{transition:transform .55s ease}.card:hover .ph-img{transform:scale(1.025)}
.btn{transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s ease}.btn:hover{transform:translateY(-1px)}
.page-head,.page-hero{border-bottom:1px solid rgba(60,50,35,.11)}.page-hero::after{background:linear-gradient(90deg,rgba(20,24,20,.54),rgba(20,24,20,.12) 70%)}
.sister{transition:background-color .25s ease,border-color .25s ease}.sister:hover{background:#fffdf9;border-color:rgba(140,111,60,.45)}
@media (min-width:900px){.page-content>section:first-child{padding-top:clamp(4.5rem,8vw,8rem)}}