/* Elevated Polished Cleaning design system
   Display: Montserrat 600/700 (headings)
   UI/body: Montserrat 400 (everything else), self-hosted
   Accent:  gold, drawn from the mark, used as hairlines and labels only */

/* Montserrat, self-hosted. Served from this domain rather than from Google so
   that reading the site does not tell a third party what is being read, which
   is what the cookie notice promises. Variable weight 300-800 in one file.
   Licensed under the SIL Open Font License. */
@font-face{
  font-family:"Montserrat";
  src:url("/assets/fonts/montserrat.woff2") format("woff2");
  font-weight:300 800; font-style:normal; font-display:optional;
}

:root{
  --ink:#0E0F0C;
  --ink-2:#35372F;
  --paper:#FAF8F4;
  --cream:#F2EEE5;
  --muted:#6E6B62;
  --rule:#E0DACE;
  --rule-2:#CFC7B7;
  --gold:#A8841F;
  --gold-dark:#D6B45F;
  --dark:#111210;
  --dark-2:#1A1B17;
  --display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --ui:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --measure:66ch;
  --gutter:clamp(20px,5vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--ui); font-weight:400; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--gold); text-underline-offset:3px; text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}
.shell{max-width:1120px; margin:0 auto; padding-inline:var(--gutter)}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 14px}

/* ---------- type ---------- */
/* Montserrat is wider and has a much larger x-height than the serif it
   replaced, so the same pixel sizes read considerably bigger. Sizes come down,
   weight goes up to 700, and the display sizes get negative tracking, which a
   geometric sans needs at scale and a serif does not. */
h1,h2,h3{font-family:var(--display); font-weight:700; color:var(--ink);
  line-height:1.2; letter-spacing:-.02em; text-wrap:balance; margin:0}
h1{font-size:clamp(27px,3vw,38px)}
h2{font-size:clamp(21px,2.2vw,28px)}
h3{font-size:clamp(17px,1.6vw,20px)}
h3{letter-spacing:-.01em}
h4{font-family:var(--ui); font-weight:500; font-size:17px; color:var(--ink); margin:0}
p{margin:0; max-width:var(--measure)}
.label{
  font-family:var(--ui); font-weight:400; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0;
}
.lead{font-size:clamp(17px,1.6vw,19px); line-height:1.62; color:var(--ink-2)}
.flow > * + *{margin-top:1.1em}
.flow > * + h2{margin-top:2.2em}
.flow > * + h3{margin-top:1.9em}
.flow > h2 + *,.flow > h3 + *{margin-top:.85em}
.flow ul{margin:0; padding-left:1.15em; max-width:var(--measure)}
.flow li{margin-bottom:.45em}
.flow li::marker{color:var(--rule-2)}

/* diamond rule, echoes the mark */
.diamond{display:block; width:100%; height:9px; border:0; margin:0;
  background:
    linear-gradient(to right,var(--rule),var(--rule)) left center/calc(50% - 16px) 1px no-repeat,
    linear-gradient(to right,var(--rule),var(--rule)) right center/calc(50% - 16px) 1px no-repeat;
  position:relative;
}
.diamond::after{
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
  transform:translate(-50%,-50%) rotate(45deg); border:1px solid var(--gold);
}

/* ---------- header ---------- */
.masthead{background:var(--dark); color:#EDEAE2}
.masthead a{color:#EDEAE2; text-decoration:none}
.mast-inner{display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-block:18px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-mark{width:30px; height:30px; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.14em; color:#F3F0E8}
.brand-sub{font-family:var(--ui); font-weight:500; font-size:8px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-dark); margin-top:4px}
.nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.nav a{font-family:var(--ui); font-size:14px; font-weight:500; letter-spacing:.02em; opacity:.85}
.nav a:hover,.nav a[aria-current="page"]{opacity:1; color:var(--gold-dark)}
.nav .tel{letter-spacing:.04em; font-weight:400}

/* ---------- nav dropdowns ---------- */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* The padding grows the area that keeps the menu open; the matching negative
   margin means the masthead does not get taller for it. */
.nav-item{
  position:relative; display:inline-flex; align-items:center; gap:5px;
  padding-block:10px; margin-block:-10px;
}
.nav-item[data-section="true"] > a{opacity:1; color:var(--gold-dark)}
/* 24x24 hit area around a 10x6 arrow, per WCAG 2.2 target size, again
   without pushing the neighbours around. */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  padding:9px 7px; margin:-9px -7px;
  color:#EDEAE2; opacity:.85; line-height:0;
}
.nav-toggle:hover{opacity:1; color:var(--gold-dark)}
.nav-toggle svg{transition:transform .18s ease}
.nav-item[data-open="true"] .nav-toggle svg{transform:rotate(180deg)}

.nav-menu{
  position:absolute; top:calc(100% + 2px); left:-14px; z-index:60;
  min-width:232px; margin:0; padding:8px 0; list-style:none;
  background:var(--dark-2); border:1px solid #2E2F28;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  display:none;
}
.nav-item[data-open="true"] > .nav-menu{display:block}
/* Invisible bridge across the gap between the label and the menu. Without it
   the pointer leaves the item on the way down and the menu shuts under it. */
.nav-menu::before{
  content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
/* Hover only where there is a real pointer: on a touch screen hover sticks. */
@media (hover:hover) and (pointer:fine){
  .nav-item:hover > .nav-menu,
  .nav-item:focus-within > .nav-menu{display:block}
}
.nav-menu li{margin:0}
.nav-menu a{
  display:block; padding:9px 18px; font-size:14px; letter-spacing:.03em;
  color:#D8D4C9; opacity:1; white-space:nowrap;
}
.nav-menu a:hover,.nav-menu a:focus-visible{background:#24251F; color:var(--gold-dark)}
.nav-menu a[aria-current="page"]{color:var(--gold-dark)}
.nav-menu-all{border-top:1px solid #2E2F28; margin-top:6px; padding-top:4px}
.nav-menu-all a{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#A9A496}

/* On narrow screens the masthead nav wraps, and an absolutely positioned menu
   would hang off the side. Let it sit in the flow and push the nav open. */
@media (max-width:680px){
  .nav-item{flex-wrap:wrap}
  .nav-menu{
    position:static; min-width:0; width:100%; left:auto; top:auto;
    box-shadow:none; border-left:0; border-right:0; margin:8px 0 2px;
  }
  .nav-menu a{padding:10px 14px; white-space:normal}
}
.btn{
  display:inline-block; font-family:var(--ui); font-size:13px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:13px 24px; border:1px solid var(--gold); color:var(--gold); background:transparent;
  cursor:pointer;
}
.btn:hover{background:var(--gold); color:var(--dark)}
.masthead .btn{border-color:var(--gold-dark); color:var(--gold-dark)}
.masthead .btn:hover{background:var(--gold-dark); color:var(--dark)}
.btn-solid{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.btn-solid:hover{background:var(--gold); border-color:var(--gold); color:var(--dark)}

/* ---------- hero ---------- */
.hero{background:var(--dark); color:#E8E5DC; padding-block:clamp(40px,5.5vw,72px)}
.hero h1{color:#F6F3EB; max-width:22ch}
.hero .label{color:var(--gold-dark)}
.hero p{color:#C6C2B6; max-width:56ch}
.hero .stack{display:flex; flex-direction:column; gap:18px; align-items:flex-start}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* page intro (non-home) */
.page-head{background:var(--dark); color:#E8E5DC; padding-block:clamp(38px,4.5vw,60px)}
.page-head h1{color:#F6F3EB; max-width:22ch}
.page-head .lead{color:#C6C2B6; max-width:58ch; margin-top:18px}
.page-head .label{color:var(--gold-dark); margin-bottom:16px}
.crumbs{font-size:13px; color:#908C81; margin-bottom:18px; font-weight:300}
.crumbs a{color:#B6B1A4; text-decoration:none}
.crumbs a:hover{color:var(--gold-dark)}

/* ---------- sections ---------- */
.section{padding-block:clamp(48px,7vw,84px)}
.section--cream{background:var(--cream)}
/* Two cream blocks in a row would merge into one slab; a hairline keeps them
   legible as separate sections without reintroducing a dark band. */
.section--cream + .section--cream{border-top:1px solid var(--rule-2)}
.section--dark{background:var(--dark); color:#D8D4C9}
.section--dark h2,.section--dark h3{color:#F3F0E8}
.section--dark .label{color:var(--gold-dark)}
.section--dark a{color:var(--gold-dark)}
.sec-head{margin-bottom:34px}
.sec-head .label{margin-bottom:14px}

/* ---------- grids ---------- */
.grid{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.cell{background:var(--paper); padding:26px 24px}
/* The rules between cells are the container background showing through a 1px
   gap, so a part-filled final row leaves a bare grey rectangle. When the last
   item would sit alone, let it span the rest of the row instead. */
.grid--3 > .cell:last-child:nth-child(3n+2){grid-column:span 2}
.section--cream .cell{background:var(--cream)}
.cell h3{font-size:19px; margin-bottom:8px}
.cell p{font-size:15.5px; color:var(--muted); line-height:1.6}
.cell a{text-decoration:none}
.cell a:hover h3{color:var(--gold)}

/* numbered steps */
.steps{display:grid; gap:0; counter-reset:step}
.step{display:grid; grid-template-columns:54px 1fr; gap:20px;
  padding-block:22px; border-top:1px solid var(--rule)}
.step:first-child{border-top:0}
.step-n{font-family:var(--display); font-weight:700; font-size:22px; color:var(--gold); line-height:1.1}
.step h3{font-size:20px; margin-bottom:6px}
.step p{font-size:16px; color:var(--ink-2)}

/* credential strip */
.creds{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0}
.creds li{font-family:var(--ui); font-size:12px; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; border:1px solid var(--rule-2); padding:9px 14px; color:var(--ink-2)}
.section--dark .creds li{border-color:#33342C; color:#C6C2B6}

/* area link columns */
.areas-group + .areas-group{margin-top:26px}
.areas-group h4{color:var(--gold); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:400; margin-bottom:12px}
.arealinks{display:flex; flex-wrap:wrap; gap:8px 0; list-style:none; padding:0; margin:0}
.arealinks li{display:flex; align-items:center}
.arealinks li + li::before{content:""; width:4px; height:4px; transform:rotate(45deg);
  background:var(--rule-2); margin:0 14px}
.arealinks a{font-family:var(--ui); font-size:16px; text-decoration:none; color:var(--ink-2)}
.arealinks a:hover{color:var(--gold)}
.section--dark .arealinks a{color:#C6C2B6}
.section--dark .arealinks a:hover{color:var(--gold-dark)}
.section--dark .arealinks li + li::before{background:#3A3B33}

/* pull / method panel */
.panel{background:var(--cream); border-left:2px solid var(--gold); padding:26px 28px; max-width:var(--measure)}
.section--cream .panel{background:var(--paper)}
.panel > * + *{margin-top:1em}

/* testimonial */
.quote{max-width:62ch}
.quote blockquote{margin:0; font-family:var(--display); font-weight:500; font-size:clamp(19px,2.2vw,24px); letter-spacing:-.01em;
  line-height:1.4; color:var(--ink)}
.quote cite{display:block; margin-top:16px; font-family:var(--ui); font-style:normal;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* FAQ */
.faq{border-top:1px solid var(--rule); max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{padding:18px 30px 18px 0; cursor:pointer; list-style:none;
  font-family:var(--ui); font-weight:500; font-size:17px; color:var(--ink); position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:4px; top:50%; width:8px; height:8px;
  border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details > p{padding:0 0 20px; font-size:16px; color:var(--ink-2)}

/* form */
.form{max-width:600px; display:grid; gap:18px}
.field{display:grid; gap:7px}
.field label{font-family:var(--ui); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--ui); font-size:16px; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule-2); padding:12px 14px; border-radius:0; width:100%;
}
.field textarea{min-height:110px; resize:vertical}
.form-note{font-size:14px; color:var(--muted); max-width:56ch}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* honeypot: hidden from people, visible to naive bots.
   Not display:none, which some bots detect and skip. */
.hp{position:absolute!important; left:-9999px!important; top:auto!important;
  width:1px!important; height:1px!important; overflow:hidden!important}

/* journal */
.posts{display:grid; gap:0; border-top:1px solid var(--rule)}
.post-row{display:grid; grid-template-columns:150px 1fr; gap:26px;
  padding-block:26px; border-bottom:1px solid var(--rule); text-decoration:none}
.post-row:hover h3{color:var(--gold)}
.post-meta{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:6px}
.post-row h3{font-size:23px; margin-bottom:7px}
.post-row p{font-size:15.5px; color:var(--muted); line-height:1.6}

/* footer */
.footer{background:var(--dark); color:#9D998E; padding-block:56px 34px; font-size:14.5px}
.footer a{color:#C6C2B6; text-decoration:none}
.footer a:hover{color:var(--gold-dark)}
.footer h4{color:var(--gold-dark); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:400; margin-bottom:14px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:38px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:8px}
.footer-base{margin-top:40px; padding-top:22px; border-top:1px solid #2A2B24;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--3 > .cell:last-child:nth-child(3n+2){grid-column:auto}
  .grid--3 > .cell:last-child:nth-child(2n+1){grid-column:span 2}
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:680px){
  body{font-size:16.5px}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .grid--3 > .cell:last-child{grid-column:auto}
  .mast-inner{padding-block:14px}
  .nav{gap:16px; width:100%; justify-content:flex-start}
  .nav .btn{display:none}
  .post-row{grid-template-columns:1fr; gap:8px}
  .post-meta{padding-top:0}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .step{grid-template-columns:38px 1fr; gap:14px}
}

/* ---------- photography ---------- */
.fig{margin:0; max-width:var(--measure)}
.fig picture, .fig img{display:block; width:100%; height:auto}
.fig figcaption, .compare figcaption{
  font-family:var(--ui); font-size:14px; color:var(--muted);
  margin-top:12px; line-height:1.5; max-width:var(--measure);
}
.flow > .fig, .flow > .compare{margin-top:1.6em}

.compare{margin:0}
.compare-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.compare-half{position:relative}
.compare-half picture, .compare-half img{display:block; width:100%; height:auto}
.compare-tag{
  position:absolute; top:12px; left:12px; z-index:1;
  font-family:var(--ui); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--dark); color:var(--gold-dark); padding:5px 10px;
}

/* a single photograph used as a section feature */
.feature-img{margin-top:38px}
.feature-img picture, .feature-img img{display:block; width:100%; height:auto}
.feature-img figcaption{
  font-family:var(--ui); font-size:14px; color:var(--muted); margin-top:12px;
}

@media (max-width:620px){
  .compare-pair{grid-template-columns:1fr; gap:18px}
}

/* ---------- full-bleed hero ---------- */
/* The photograph runs edge to edge behind the text. Source photographs are
   portrait, so the crop is handled by object-fit rather than by the file, and
   object-position favours the upper-middle of the frame where the subject is. */
.hero--cover{
  position:relative; isolation:isolate;
  display:grid; align-items:center;
  min-height:clamp(400px,50vh,540px);
  padding-block:clamp(48px,6vw,76px);
  text-align:center;
}
.hero--cover .hero-bg{position:absolute; inset:0; z-index:-1; overflow:hidden}
.hero--cover .hero-bg picture{display:block; width:100%; height:100%}
.hero--cover .hero-bg img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center 44%;
}
/* Scrim in the brand dark, heavier top and bottom so the masthead above and
   the section below both keep a clean edge, lighter through the middle so the
   photograph still reads. */
.hero--cover .hero-scrim{
  position:absolute; inset:0;
  /* Alpha is set from measurement, not taste: sampling the brightest pixel
     under each text band, AA needs .61 behind the lead and .65 behind the
     eyebrow. .70 through the middle clears both with margin, and the darker
     top and bottom edges carry the joins to the masthead and the next
     section. */
  background:linear-gradient(180deg,
    rgba(17,18,16,.82) 0%,
    rgba(17,18,16,.70) 22%,
    rgba(17,18,16,.70) 80%,
    rgba(17,18,16,.86) 100%);
}
.hero--cover .hero-inner{width:100%}
.hero--cover .stack{align-items:center; gap:20px}
.hero--cover h1{max-width:19ch; margin-inline:auto; color:#FBF9F4}
.hero--cover p.lead{max-width:58ch; margin-inline:auto; color:#E2DFD6}
.hero--cover .hero-actions{justify-content:center}
.hero--cover .label{color:#EBD49A}

/* Solid gold call to action: the one high-contrast element in the frame. */
.btn--gold{background:var(--gold-dark); border-color:var(--gold-dark); color:var(--dark)}
.btn--gold:hover{background:#E8CE86; border-color:#E8CE86; color:var(--dark)}
.hero-alt-link{color:#E2DFD6; font-family:var(--ui); font-size:15px}
.hero-alt-link:hover{color:var(--gold-dark)}

@media (max-width:720px){
  .hero--cover{min-height:clamp(360px,58vh,460px)}
  /* Let the headline use the full gutter width rather than wrapping to five
     ragged lines against an artificial measure. */
  .hero--cover h1{max-width:none}
  .hero--cover .hero-bg img{object-position:center 56%}
  .hero--cover p.lead{font-size:16.5px}
  /* The photograph is busiest and brightest through the middle at this width,
     where the lead sits, so the scrim carries more weight. */
  .hero--cover .hero-scrim{
    background:linear-gradient(180deg,
      rgba(17,18,16,.86) 0%,
      rgba(17,18,16,.76) 38%,
      rgba(17,18,16,.78) 62%,
      rgba(17,18,16,.90) 100%);
  }
}

/* sub-headings inside a section: h3 for semantics, sized as a UI label */
.flow h3.sub{
  font-family:var(--ui); font-weight:500; font-size:17px;
  color:var(--ink); letter-spacing:0; line-height:1.4;
}
.areas-group h3.group-label{
  font-family:var(--ui); font-weight:400; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px; line-height:1.4;
}
.footer .foot-label{
  color:var(--gold-dark); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:400; margin:0 0 14px;
}

/* ---------- cookie consent ---------- */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--dark); color:#D8D4C9;
  border-top:1px solid var(--gold-dark);
  padding:18px var(--gutter) calc(18px + env(safe-area-inset-bottom,0px));
}
.consent-inner{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.consent-text{flex:1 1 460px; min-width:0}
.consent-text p{margin:0; font-size:14.5px; line-height:1.6; color:#C6C2B6; max-width:68ch}
.consent-text p + p{margin-top:8px}
.consent-text p:first-child{color:#F3F0E8; margin-bottom:6px}
.consent-text p:first-child strong{font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:.01em}
.consent-text p + p strong{color:#F3F0E8; font-weight:600}
.consent-text a{color:var(--gold-dark)}
.consent-actions{display:flex; gap:12px; flex:0 0 auto; align-items:center}
/* Declining is exactly as easy as accepting, which the ICO requires. */
/* Both choices get identical weight: no nudging toward Accept. */
.consent .btn{padding:12px 26px; font-size:12.5px; min-width:132px; text-align:center}
.consent .consent-no{background:#F3F0E8; border-color:#F3F0E8; color:var(--dark)}
.consent .consent-no:hover{background:#fff; border-color:#fff; color:var(--dark)}
.consent .consent-yes{background:var(--gold-dark); border-color:var(--gold-dark); color:var(--dark)}
.consent .consent-yes:hover{background:#E4C87E; border-color:#E4C87E}
@media (max-width:620px){
  .consent-inner{gap:16px}
  .consent-actions{width:100%}
  .consent-actions .btn{flex:1 1 0; text-align:center}
}

/* ---------- photograph placeholders ---------- */
/* Deliberately plain and obviously unfinished, so an empty slot can never be
   mistaken for a design choice or for a broken image. */
.ph{
  width:100%;
  border:1px dashed var(--rule-2); background:var(--cream);
  display:grid; place-items:center; text-align:center;
}
.ph-in{display:flex; flex-direction:column; gap:7px; padding:22px; max-width:46ch}
.ph-tag{
  font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}
.ph-slug{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:var(--ink-2)}
.ph-brief{font-size:14px; line-height:1.55; color:var(--muted)}
.ph-shape{
  font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); opacity:.8;
}
.section--cream .ph{background:var(--paper)}
/* The lead image sits tight under the page head rather than a full section. */
.section--lead-media{padding-block:clamp(24px,3vw,38px) 0}
.section--lead-media .ph,.section--lead-media img{max-width:100%}
.section--lead-media picture img{display:block; width:100%; height:auto}
@media (max-width:680px){
  .ph-brief{font-size:13px}
  .ph-in{padding:16px}
}

/* ---------- service cards ---------- */
/* Flex rather than a fixed grid: five cards then sit three and two centred,
   instead of leaving a hole in the final row. */
.svc-cards{display:flex; flex-wrap:wrap; gap:26px; justify-content:center}
.svc-card{
  flex:1 1 300px; max-width:352px;
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--rule);
}
.section--cream .svc-card{background:var(--paper)}
.svc-card-media{position:relative; background:var(--cream)}
.svc-card-media img,.svc-card-media picture{display:block; width:100%}
.svc-card-media img{aspect-ratio:16 / 10; object-fit:cover; height:auto}
.svc-card-media .ph{border:0; border-bottom:1px dashed var(--rule-2)}
.svc-card-body{display:flex; flex-direction:column; gap:12px; padding:24px 24px 26px; flex:1}
.svc-card-body h3{font-size:19px; margin:0}
.svc-card-body p{font-size:15.5px; line-height:1.6; color:var(--muted); margin:0; flex:1}
.btn--sm{align-self:flex-start; padding:10px 18px; font-size:11.5px}

/* ---------- areas we cover ---------- */
.section--cover .cover-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px);
  align-items:center;
}
.cover-text .lead{max-width:52ch}
.cover-group{margin-top:26px}
.cover-group h3{
  font-family:var(--ui); font-size:12px; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin:0 0 8px;
}
.cover-list{font-size:16px; line-height:1.9; color:var(--ink-2); margin:0; max-width:46ch}
.cover-list a{text-decoration:none; border-bottom:1px solid var(--rule-2)}
.cover-list a:hover{color:var(--gold); border-bottom-color:var(--gold)}
.cover-cta{margin-top:30px}
.cover-map img,.cover-map picture{display:block; width:100%; height:auto}
.cover-map img{border:1px solid var(--rule-2)}

@media (max-width:860px){
  .section--cover .cover-inner{grid-template-columns:1fr; gap:32px}
  .cover-map{order:-1}
}

/* ---------- email in the masthead and above every form ---------- */
.sec-contact{
  margin:10px 0 0; font-size:15px; color:var(--muted); max-width:60ch;
}
.sec-contact a{color:var(--ink-2); border-bottom:1px solid var(--rule-2); text-decoration:none}
.sec-contact a:hover{color:var(--gold); border-bottom-color:var(--gold)}