/* ============================ 0  WEBFONTS ==============================
   Self-hosted rather than loaded from Google Fonts. A remote font request
   sends every visitor's IP address to a third party before they have agreed
   to anything, which is an unnecessary thing to have to explain in a privacy
   notice. These are served from our own domain, so no third party is
   involved and there is one less network round trip. Latin subset, woff2.
   ====================================================================== */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

/* =========================================================================
   R&D GROUP — "Wet Slate"
   An Apple Human Interface Guidelines reading of the R&D Group site.

     1  Tokens            light palette on bare :root, redefined for dark
     2  Base              reset, type scale, links, focus
     3  Functional layer  topbar, glass header, nav, title block
     4  Controls          buttons
     5  Page furniture    hero, pagehead, blocks, section heads
     6  Content           cells, grids, rows, ticks, steps, tables, forms
     7  Marquees          clients, accreditations, frameworks
     8  Photography       hero photo, case studies, vacancies, archive, band
     9  Gallery           filter, grid, lightbox
    10  Footer
    11  Motion & a11y

   Every colour is declared on bare :root first, then redefined under
   prefers-color-scheme and [data-theme]. Nothing gets its only definition
   inside a media query — that is what makes the dark appearance safe.
   ========================================================================= */

/* ============================== 1  TOKENS ============================== */
:root{
  /* surfaces — cool, blue-biased neutrals pulled from wet slate */
  --ground:#EFF1F4;
  --surface:#FFFFFF;
  --sunken:#E4E7EC;
  --dark:#12151A;
  --dark-2:#1B1F26;

  /* ink */
  --ink:#14171C;
  --ink-2:#586069;
  --ink-3:#5A626C;
  --on-dark:#F3F5F8;
  --on-dark-2:#A7AFB9;

  /* lines */
  --hairline:rgba(20,23,28,.11);
  --hairline-strong:rgba(20,23,28,.18);
  --hairline-dk:rgba(255,255,255,.13);

  /* accent — reserved for things that act */
  --accent:#D62D22;
  --accent-ink:#BE241A;
  --accent-lt:#FF7E72;
  --accent-on:#FFFFFF;

  /* materials */
  --glass:rgba(247,248,250,.72);
  --glass-line:rgba(20,23,28,.10);
  --shadow-s:0 1px 2px rgba(15,20,28,.06), 0 4px 14px rgba(15,20,28,.05);
  --shadow-m:0 2px 6px rgba(15,20,28,.07), 0 18px 44px rgba(15,20,28,.09);

  /* logo tiles carry other people's brand colours, so they stay white in
     both appearances rather than inverting or going muddy on a dark ground */
  --tile:#FFFFFF;
  --tile-ink:#14171C;
  --tile-ink-2:#5A626C;

  /* aliases kept alive for the inline styles already in the HTML */
  --paper:var(--surface);
  --concrete:var(--sunken);
  --line:var(--hairline);
  --line-dk:var(--hairline-dk);
  --signal:var(--accent);
  --signal-lt:var(--accent-lt);
  --slate:var(--ink-2);
  --slate-2:var(--ink-3);

  /* geometry & type */
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
  --shell:1180px; --gut:clamp(20px,4.4vw,40px);
  --font:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0C0E11; --surface:#171A1F; --sunken:#090B0D;
    --dark:#171A1F;   --dark-2:#1F242A;
    --ink:#F3F5F8; --ink-2:#9BA3AE; --ink-3:#949CA7;
    --on-dark:#F3F5F8; --on-dark-2:#A7AFB9;
    --hairline:rgba(255,255,255,.11); --hairline-strong:rgba(255,255,255,.20);
    --hairline-dk:rgba(255,255,255,.13);
    --accent:#D62D22; --accent-ink:#FF7E72;
    --glass:rgba(23,26,31,.68); --glass-line:rgba(255,255,255,.10);
    --shadow-s:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
    --shadow-m:0 2px 6px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ground:#0C0E11; --surface:#171A1F; --sunken:#090B0D;
  --dark:#171A1F;   --dark-2:#1F242A;
  --ink:#F3F5F8; --ink-2:#9BA3AE; --ink-3:#949CA7;
  --on-dark:#F3F5F8; --on-dark-2:#A7AFB9;
  --hairline:rgba(255,255,255,.11); --hairline-strong:rgba(255,255,255,.20);
  --hairline-dk:rgba(255,255,255,.13);
  --accent:#D62D22; --accent-ink:#FF7E72;
  --glass:rgba(23,26,31,.68); --glass-line:rgba(255,255,255,.10);
  --shadow-s:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
  --shadow-m:0 2px 6px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45);
}

/* =============================== 2  BASE =============================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:110px}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:8px}

.wrap{max-width:var(--shell); margin:0 auto; padding-inline:var(--gut)}
.measure{max-width:68ch}
.full{width:100%}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--ground); padding:12px 18px;
  border-radius:0 0 var(--r-s) 0; font-size:.9rem; font-weight:600; text-decoration:none;
}
.skip:focus{left:0}

.h-xl{font-size:clamp(2.5rem,5.6vw,4.2rem); line-height:1.04; letter-spacing:-.035em; font-weight:700; margin:0; text-wrap:balance}
.h-lg{font-size:clamp(1.85rem,3.5vw,2.75rem); line-height:1.1; letter-spacing:-.028em; font-weight:700; margin:0; text-wrap:balance}
.h-md{font-size:clamp(1.14rem,1.65vw,1.34rem); line-height:1.26; letter-spacing:-.016em; font-weight:600; margin:0; text-wrap:balance}
.lede{font-size:clamp(1.04rem,1.4vw,1.18rem); line-height:1.55; color:var(--ink-2); margin:0}
.tag,.eyebrow,.code{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0;
}
.dark,.dark .h-xl,.dark .h-lg,.dark .h-md{color:var(--on-dark)}
.dark .lede,.dark .tag,.dark .eyebrow,.dark .code{color:var(--on-dark-2)}

/* ======================== 3  FUNCTIONAL LAYER ========================== */
.topbar{
  background:var(--dark); color:var(--on-dark-2);
  font-family:var(--mono); font-size:.67rem; letter-spacing:.08em; position:relative; z-index:81;
}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px; flex-wrap:wrap}
.topbar-contact{display:flex; gap:18px}
.topbar a{color:var(--on-dark); text-decoration:none}
.topbar a:hover{text-decoration:underline}
@media (max-width:680px){ .topbar-in > span:first-child{display:none} .topbar-in{justify-content:center} }

.head{
  position:sticky; top:0; z-index:80; background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%);
  border-bottom:.5px solid transparent; transition:border-color .3s;
}
.head.stuck{border-bottom-color:var(--glass-line)}
.head-in{display:flex; align-items:center; gap:10px; min-height:64px; position:relative}
.brand{order:1}
.nav{order:2}
.appearance{order:3}
.burger{order:4}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand-logo{height:27px; width:auto}
.brand .logo-dk{display:none}
.brand-sub{font-family:var(--mono); font-size:.6rem; letter-spacing:.15em; color:var(--ink-3); white-space:nowrap}
@media (max-width:560px){ .brand-sub{display:none} }

.nav{display:flex; align-items:center; gap:2px}
.nav a{
  padding:8px 11px; border-radius:999px; text-decoration:none; white-space:nowrap;
  font-size:.87rem; font-weight:500; color:var(--ink-2); transition:background .18s, color .18s;
}
.nav a:hover{background:var(--hairline); color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); background:var(--hairline)}
.nav a.nav-cta{background:var(--accent); color:var(--accent-on); padding:10px 18px; font-weight:600; margin-left:6px}
.nav a.nav-cta:hover{background:var(--accent); color:var(--accent-on); filter:brightness(1.08)}

.burger{
  display:none; width:44px; height:44px; place-items:center; flex:none;
  border-radius:999px; border:.5px solid var(--hairline); background:transparent; cursor:pointer;
}
.burger span{display:block; width:17px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

.appearance{
  width:38px; height:38px; display:grid; place-items:center; flex:none;
  border-radius:999px; border:.5px solid var(--hairline); background:transparent;
  color:var(--ink-2); cursor:pointer; transition:background .18s, color .18s;
}
.appearance:hover{background:var(--hairline); color:var(--ink)}
.appearance svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

@media (max-width:1080px){
  .burger{display:grid}
  .nav{
    position:absolute; inset:calc(100% + 8px) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:2px; padding:10px; border-radius:var(--r-l); display:none;
    background:var(--glass); border:.5px solid var(--glass-line); box-shadow:var(--shadow-m);
    -webkit-backdrop-filter:blur(34px) saturate(180%); backdrop-filter:blur(34px) saturate(180%);
  }
  .nav.open{display:flex; animation:sheetIn .28s cubic-bezier(.2,.8,.25,1)}
  .nav a{min-height:48px; display:flex; align-items:center; padding:0 14px; border-radius:var(--r-s); font-size:1.02rem; font-weight:600; color:var(--ink)}
  .nav a.nav-cta{justify-content:center; margin-top:6px; margin-left:0; color:var(--accent-on)}
}
@keyframes sheetIn{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}

.titleblock{
  position:fixed; inset:auto 0 0 0; z-index:70; display:flex; align-items:center;
  background:var(--glass); border-top:.5px solid var(--glass-line);
  -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.titleblock > div{padding:9px 16px; border-left:.5px solid var(--hairline); white-space:nowrap}
.titleblock > div:first-of-type{border-left:0}
.titleblock b{color:var(--ink); font-weight:600}
.tb-grow{margin-left:auto}
.tb-progress{position:absolute; top:-1.5px; left:0; height:1.5px; width:0; background:var(--accent)}
@media (max-width:900px){ .titleblock{display:none} }
@media (min-width:901px){ body{padding-bottom:34px} }

/* ============================= 4  CONTROLS ============================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 24px; border-radius:999px; white-space:nowrap;
  font-size:.95rem; font-weight:600; text-decoration:none; cursor:pointer;
  border:.5px solid transparent; background:var(--accent); color:var(--accent-on);
  transition:transform .16s, filter .16s, background .16s;
}
.btn:active{transform:scale(.975)}
.btn:hover{filter:brightness(1.07)}
.btn-signal,.btn-primary{background:var(--accent); color:var(--accent-on)}
.btn-ghost,.btn-quiet{background:var(--hairline); color:var(--ink)}
.btn-ghost:hover,.btn-quiet:hover{background:var(--hairline-strong); filter:none}
.btn-on-dark{background:rgba(255,255,255,.13); color:#fff; border-color:rgba(255,255,255,.26)}
.btn-on-dark:hover{background:rgba(255,255,255,.22); filter:none}
.btn-glass{
  background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
}
.btn-glass:hover{background:rgba(255,255,255,.26); filter:none}
.btn-sm{min-height:38px; padding:0 17px; font-size:.87rem}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
@media (max-width:560px){ .btn{white-space:normal; text-align:center; padding-block:11px; line-height:1.3} }

/* ========================= 5  PAGE FURNITURE =========================== */
.block{padding-block:clamp(56px,7.5vw,100px)}
.block-tight{padding-block:clamp(38px,5vw,64px)}
.dark{background:var(--dark)}

.sec-head{
  display:grid; grid-template-columns:200px 1fr; gap:clamp(18px,4vw,52px);
  margin-bottom:clamp(28px,4vw,46px); align-items:start;
}
@media (max-width:860px){ .sec-head{grid-template-columns:1fr; gap:12px} }
.sec-head .tag{padding-top:.55rem; border-top:2px solid var(--accent); display:inline-block}
.dark .sec-head .tag{border-top-color:var(--accent-lt)}
.sec-head .lede{max-width:64ch}

.hero{
  position:relative; background:var(--dark); color:var(--on-dark);
  padding-block:clamp(46px,7vw,84px); overflow:hidden;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,56px); align-items:end}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }
.hero .h-xl{color:var(--on-dark)}
.hero .eyebrow{color:var(--on-dark-2); margin-bottom:18px}
.hero-lede{font-size:clamp(1.04rem,1.4vw,1.2rem); line-height:1.55; color:var(--on-dark-2); margin:20px 0 0; max-width:46ch}
.hero mark{background:none; color:var(--accent-lt)}
.hero-foot{
  display:grid; grid-template-columns:repeat(4,1fr); margin:clamp(34px,5vw,54px) 0 0;
  background:var(--dark-2); border:.5px solid var(--hairline-dk); border-radius:var(--r-l); overflow:hidden;
}
.hero-foot > div{padding:20px 22px; border-left:.5px solid var(--hairline-dk)}
.hero-foot > div:first-child{border-left:0}
.hero-foot dt{font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark-2); margin:0 0 7px}
.hero-foot dd{margin:0; font-size:1.42rem; font-weight:700; letter-spacing:-.03em; color:var(--on-dark); font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .hero-foot{grid-template-columns:1fr 1fr}
  .hero-foot > div:nth-child(3){border-left:0}
  .hero-foot > div:nth-child(n+3){border-top:.5px solid var(--hairline-dk)}
}
@media (max-width:440px){
  .hero-foot{grid-template-columns:1fr}
  .hero-foot > div{border-left:0}
  .hero-foot > div + div{border-top:.5px solid var(--hairline-dk)}
}

.pagehead{padding-block:clamp(44px,6vw,80px) clamp(30px,4vw,48px)}
.pagehead-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,52px); align-items:end}
@media (max-width:860px){ .pagehead-grid{grid-template-columns:1fr; gap:16px} }
.pagehead .eyebrow{margin-bottom:14px}
.pagehead .lede{max-width:52ch}

/* grid/flex children must be allowed to shrink below intrinsic width,
   or a wide image forces the whole page sideways on a narrow screen */
.grid-2 > *,.grid-3 > *,.grid-4 > *,.steps > *,.svc-index > *,
.case > *,.vac > *,.archive > *,.hero-grid > *,.sec-head > *,
.pagehead-grid > *,.foot-grid > *,.band-in > *{min-width:0}
.vac-img img,.case-imgs img,.feature img,.hero-photo img,.archive img{max-width:100%}

/* ============================= 6  CONTENT ============================== */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(13px,1.6vw,18px)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.6vw,18px)}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(13px,1.6vw,18px)}
@media (max-width:1000px){ .grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .grid-2{grid-template-columns:1fr} }
@media (max-width:620px){ .grid-3,.grid-4{grid-template-columns:1fr} }

.cell{
  background:var(--surface); border-radius:var(--r-l); box-shadow:var(--shadow-s);
  padding:24px 26px 28px; display:flex; flex-direction:column; gap:9px;
}
.cell > .code{margin-bottom:3px}
.cell p{margin:0; font-size:.95rem; line-height:1.52; color:var(--ink-2)}
.cell h3{margin:0}
.cell .h-lg{letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.dark .cell{background:var(--dark-2); box-shadow:none; border:.5px solid var(--hairline-dk)}
.dark .cell p{color:var(--on-dark-2)}

.rows{background:var(--surface); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-s)}
.dark .rows{background:var(--dark-2); box-shadow:none; border:.5px solid var(--hairline-dk)}
.row{display:grid; grid-template-columns:62px 1fr; gap:0 20px; padding:22px 26px; border-top:.5px solid var(--hairline)}
/* the markup puts the number, heading and paragraphs as siblings, so the
   number spans every row and everything else sits in the second column */
.row > .n{grid-column:1; grid-row:1 / -1}
.row > :not(.n){grid-column:2}
.dark .row{border-top-color:var(--hairline-dk)}
.row:first-child{border-top:0}
.row .n{font-family:var(--mono); font-size:.78rem; color:var(--accent-ink); padding-top:.3rem; font-variant-numeric:tabular-nums}
.dark .row .n{color:var(--accent-lt)}
.row h3{margin:0 0 6px; font-size:1.08rem; font-weight:600; letter-spacing:-.014em}
.row p{margin:0; font-size:.94rem; line-height:1.55; color:var(--ink-2); max-width:80ch}
.row p + p{margin-top:.7rem}
.dark .row h3{color:var(--on-dark)}
.dark .row p{color:var(--on-dark-2)}
.row a{color:var(--accent-ink); text-decoration:none; font-weight:500}
.dark .row a{color:var(--accent-lt)}
.row a:hover{text-decoration:underline}
@media (max-width:560px){ .row{grid-template-columns:1fr; gap:8px} .row > .n{padding:0; grid-column:1; grid-row:auto} .row > :not(.n){grid-column:1} }

.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.4vw,16px)}
@media (max-width:1000px){ .steps{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .steps{grid-template-columns:1fr} }
.step{
  background:var(--surface); border-radius:var(--r-l); box-shadow:var(--shadow-s);
  padding:22px 22px 26px; display:flex; flex-direction:column; gap:9px;
}
.dark .step{background:var(--dark-2); box-shadow:none; border:.5px solid var(--hairline-dk)}
.step .num{font-family:var(--mono); font-size:.74rem; color:var(--accent-ink); font-variant-numeric:tabular-nums}
.dark .step .num{color:var(--accent-lt)}
.step p{margin:0; font-size:.92rem; line-height:1.5; color:var(--ink-2)}
.dark .step p{color:var(--on-dark-2)}

.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.ticks li{position:relative; padding-left:30px; font-size:.96rem; line-height:1.5; color:var(--ink-2)}
.dark .ticks li{color:var(--on-dark-2)}
.ticks li::before{
  content:""; position:absolute; left:0; top:.32em; width:18px; height:18px; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center/11px no-repeat;
}

.svc-index{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.2vw,14px)}
@media (max-width:900px){ .svc-index{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .svc-index{grid-template-columns:1fr} }
.svc-link{
  background:var(--surface); border-radius:var(--r-m); box-shadow:var(--shadow-s);
  padding:20px 22px 22px; text-decoration:none; display:flex; flex-direction:column; gap:8px;
  transition:transform .25s cubic-bezier(.2,.7,.25,1), box-shadow .25s;
}
.svc-link:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.svc-link h3{margin:0; font-size:1.02rem; font-weight:600; letter-spacing:-.014em}
.dark .svc-link{background:var(--dark-2); box-shadow:none; border:.5px solid var(--hairline-dk)}

.table{
  width:100%; border-collapse:separate; border-spacing:0; background:var(--surface);
  border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-s); font-size:.94rem;
}
.table th,.table td{text-align:left; padding:15px 20px; border-top:.5px solid var(--hairline); vertical-align:top}
.table tr:first-child th,.table tr:first-child td{border-top:0}
.table th{width:34%; font-weight:600; color:var(--ink)}
.table td{color:var(--ink-2)}
.table a{color:var(--accent-ink); text-decoration:none}
.table a:hover{text-decoration:underline}
/* On a phone a 34% label column squeezes longer job titles into two-letter
   fragments, so the table stacks: label on its own line, value beneath it. */
@media (max-width:620px){
  .table th,.table td{display:block; width:auto; padding:12px 14px}
  .table th{padding-bottom:2px}
  .table td{padding-top:0; border-top:0}
}

.policy{margin-bottom:clamp(30px,4vw,52px)}
.policy h2{font-size:clamp(1.4rem,2.4vw,1.85rem); letter-spacing:-.024em; margin:0 0 14px}
.policy h3{font-size:1.02rem; font-weight:600; letter-spacing:-.012em; margin:22px 0 7px}
.policy p,.policy li{font-size:.96rem; line-height:1.62; color:var(--ink-2)}
.policy ul{padding-left:20px}

.form{display:grid; gap:16px; background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-s); padding:clamp(22px,3vw,34px)}
.dark .form{background:var(--dark-2); box-shadow:none; border:.5px solid var(--hairline-dk)}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-family:var(--mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:var(--font); font-size:1rem; color:var(--ink); background:var(--ground);
  border:.5px solid var(--hairline); border-radius:var(--r-s);
  padding:13px 15px; min-height:48px; width:100%; transition:border-color .18s, background .18s;
}
.field textarea{min-height:140px; resize:vertical; line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); background:var(--surface)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2.5px solid var(--accent); outline-offset:1px}
.form-note{font-size:.86rem; color:var(--ink-3); line-height:1.55; margin:0}
.dark .form-note,.foot .form-note{color:var(--on-dark-2)}
.dark .form-note a,.foot .form-note a{color:var(--accent-lt)}
.form-note a{color:var(--accent-ink)}

/* ============================= 7  MARQUEES ============================= */
/* Clients, accreditations and frameworks share one component: a continuous
   run of white tiles that holds any number of marks without a ragged row. */
.marquee{
  position:relative; overflow:hidden;
  /* break out of .wrap so the run reaches the screen edge and reads as
     continuing beyond it; body already clips the horizontal overflow */
  margin-inline:calc(50% - 50vw); padding-inline:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-run{padding-left:0}
.marquee-run:first-child{padding-left:10px}
.marquee-track{display:flex; width:max-content; animation:marq 64s linear infinite}
.marquee-rev .marquee-track{animation-name:marqRev; animation-duration:52s}
.marquee-slow .marquee-track{animation-duration:46s}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee-run{display:flex; align-items:stretch; gap:10px; padding-right:10px}

.tile{
  flex:none; background:var(--tile); border-radius:var(--r-m); box-shadow:var(--shadow-s);
  transition:transform .25s cubic-bezier(.2,.7,.25,1), box-shadow .25s;
}
a.tile:hover,a.tile:focus-visible{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.tile.client{width:186px; height:104px; display:grid; place-items:center; padding:16px 20px}
.tile.client img{max-height:52px; max-width:100%; width:auto; object-fit:contain}
.tile.cred{width:186px; height:138px; padding:20px 16px 15px; display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center}
.tile.cred img{max-height:44px; max-width:84%; width:auto; object-fit:contain}
.tile.cred span{font-family:var(--mono); font-size:.57rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tile-ink-2); line-height:1.45; margin-top:auto}
.tile.fw{width:244px; height:150px; padding:22px 18px 16px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.tile.fw img{max-height:52px; max-width:82%; width:auto; object-fit:contain}
.tile.fw span{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tile-ink-2); line-height:1.45; margin-top:auto}

/* --- Interactive timeline (about page) --------------------------------- */
/* A rail of years you can scroll and click, over entries that stay compact
   until opened. Built on <details>, so it still works without JavaScript
   and search engines can read every entry. */
.tl-rail{
  display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
  padding:2px 0 14px; margin-bottom:clamp(14px,2vw,20px);
  scrollbar-width:thin;
}
.tl-rail a{
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px;
  padding:0 15px; border-radius:999px; white-space:nowrap; text-decoration:none;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.09em;
  background:var(--surface); color:var(--ink-2);
  border:.5px solid var(--hairline); box-shadow:var(--shadow-s);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.dark .tl-rail a{background:var(--dark-2); border-color:var(--hairline-dk); color:var(--on-dark-2); box-shadow:none}
.tl-rail a:hover,.tl-rail a:focus-visible{background:var(--accent); color:#fff; border-color:transparent}

.tl{background:var(--surface); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-s)}
.dark .tl{background:var(--dark-2); box-shadow:none; border:.5px solid var(--hairline-dk)}
.tl-item{border-top:.5px solid var(--hairline); scroll-margin-top:96px}
.dark .tl-item{border-top-color:var(--hairline-dk)}
.tl-item:first-child{border-top:0}
.tl-item > summary{
  display:grid; grid-template-columns:96px 1fr 26px; gap:0 20px; align-items:start;
  padding:20px 26px; cursor:pointer; list-style:none; min-height:44px;
}
.tl-item > summary::-webkit-details-marker{display:none}
.tl-item > summary::marker{content:""}
.tl-item > summary:hover .tl-head{color:var(--accent-ink)}
.dark .tl-item > summary:hover .tl-head{color:var(--accent-lt)}
.tl-item > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-3px}
.tl-year{
  font-family:var(--mono); font-size:.76rem; color:var(--accent-ink);
  padding-top:.28rem; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.dark .tl-year{color:var(--accent-lt)}
.tl-head{font-size:1.06rem; font-weight:600; letter-spacing:-.014em; color:var(--ink); line-height:1.35}
.dark .tl-head{color:var(--on-dark)}
.tl-chev{
  width:20px; height:20px; margin-top:.3rem; justify-self:end; flex:0 0 auto;
  color:var(--ink-3); transition:transform .2s ease;
}
.dark .tl-chev{color:var(--on-dark-2)}
.tl-item[open] .tl-chev{transform:rotate(180deg)}
.tl-body{padding:0 26px 26px; display:grid; grid-template-columns:96px 1fr; gap:0 20px}
.tl-body > *{grid-column:2}
.tl-body p{margin:0; font-size:.94rem; line-height:1.6; color:var(--ink-2); max-width:78ch}
.dark .tl-body p{color:var(--on-dark-2)}
.tl-body p + p{margin-top:.75rem}
.tl-fig{margin:16px 0 0}
.tl-fig img{
  display:block; width:100%; max-width:520px; height:auto;
  border-radius:var(--r-m); box-shadow:var(--shadow-s);
}
.tl-fig figcaption{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.6; margin-top:9px; max-width:60ch;
}
.dark .tl-fig figcaption{color:var(--on-dark-2)}
@media (max-width:640px){
  .tl-item > summary{grid-template-columns:1fr 26px; gap:6px 12px; padding:18px}
  .tl-year{grid-column:1; grid-row:1; padding-top:0}
  .tl-head{grid-column:1; grid-row:2}
  .tl-chev{grid-column:2; grid-row:1 / span 2; align-self:center; margin-top:0}
  .tl-body{grid-template-columns:1fr; padding:0 18px 20px}
  .tl-body > *{grid-column:1}
}
@media (prefers-reduced-motion:reduce){ .tl-chev{transition:none} }

/* --- Cookie consent ----------------------------------------------------
   A real consent gate rather than a notice bar. Nothing non-essential runs
   until a choice is made, refusing is exactly as easy as accepting, and the
   choice can be changed later from the footer link. Today the site sets no
   analytics or marketing storage at all, so the categories below are the
   plumbing for when something is added, not a pretence that something is
   already there. ---------------------------------------------------------- */
.cc{
  position:fixed; z-index:300; left:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px);
  bottom:clamp(12px,3vw,26px); max-width:560px;
  background:var(--surface); color:var(--ink); border-radius:var(--r-l);
  box-shadow:var(--shadow-m); border:.5px solid var(--hairline);
  padding:clamp(20px,2.6vw,26px);
}
.dark .cc,:root[data-theme="dark"] .cc{border-color:var(--hairline-dk)}
.cc[hidden]{display:none !important}
.cc h2{font-size:1.06rem; font-weight:600; letter-spacing:-.014em; margin:0 0 8px}
.cc p{margin:0 0 14px; font-size:.9rem; line-height:1.55; color:var(--ink-2); max-width:62ch}
.cc a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px}
.cc-actions{display:flex; flex-wrap:wrap; gap:9px}
.cc-actions button{
  font:inherit; font-size:.86rem; font-weight:600; cursor:pointer;
  min-height:44px; padding:0 18px; border-radius:999px; border:1px solid transparent;
  transition:filter .18s ease, background .18s ease;
}
.cc-accept{background:var(--accent); color:#fff}
.cc-accept:hover{filter:brightness(1.08)}
.cc-reject{background:var(--sunken); color:var(--ink); border-color:var(--hairline)}
.cc-reject:hover{filter:brightness(.97)}
.cc-manage{background:transparent; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; padding:0 8px}
.cc-manage:hover{color:var(--ink)}
.cc-cats{margin:4px 0 16px; border-top:.5px solid var(--hairline); padding-top:14px}
.dark .cc-cats,:root[data-theme="dark"] .cc-cats{border-top-color:var(--hairline-dk)}
.cc-cat{display:flex; gap:12px; align-items:flex-start; padding:10px 0}
.cc-cat + .cc-cat{border-top:.5px solid var(--hairline)}
.dark .cc-cat + .cc-cat,:root[data-theme="dark"] .cc-cat + .cc-cat{border-top-color:var(--hairline-dk)}
.cc-cat input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--accent); flex:0 0 auto}
.cc-cat input:disabled{opacity:.55}
.cc-cat b{display:block; font-size:.9rem; font-weight:600; margin-bottom:3px}
.cc-cat span{font-size:.84rem; line-height:1.5; color:var(--ink-2)}
@media (max-width:520px){ .cc-actions button{width:100%} .cc-manage{width:auto !important} }
@media (prefers-reduced-motion:reduce){ .cc-actions button{transition:none} }

/* ========================== 8  PHOTOGRAPHY ============================= */
.hero-photo{margin:0; align-self:end}
.hero-photo img{width:100%; height:auto; max-height:min(58vh,520px); object-fit:cover; border-radius:var(--r-xl); box-shadow:var(--shadow-m)}
.hero-photo figcaption{font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--on-dark-2); margin-top:11px}

/* A single wide illustration or photograph running the width of the column.
   Detailed artwork is unreadable once it is squeezed into a phone, so below
   700px the picture keeps a usable width and the reader swipes it instead. */
.wide-fig{margin:0}
.wide-fig-scroll{
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-m); background:var(--surface);
}
.wide-fig img{display:block; width:100%; height:auto}
.wide-fig figcaption{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.6; margin-top:11px; max-width:74ch;
}
.wide-fig .swipe-hint{display:none}
@media (max-width:700px){
  .wide-fig-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
  .wide-fig img{min-width:760px}
  .wide-fig .swipe-hint{display:inline}
}

.cases{display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px)}
.case{
  background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-s);
  padding:clamp(20px,2.6vw,30px); display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,3vw,34px); align-items:center;
}
.dark .case{background:var(--dark-2); box-shadow:none; border:.5px solid var(--hairline-dk)}
@media (max-width:900px){ .case{grid-template-columns:1fr} }
.case-imgs{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.case-imgs-single{grid-template-columns:1fr}
.case-imgs-trio{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){ .case-imgs-trio{grid-template-columns:1fr 1fr} .case-imgs-trio figure:last-child{display:none} }
.case-imgs figure{margin:0; position:relative; border-radius:var(--r-m); overflow:hidden; background:var(--sunken)}
.case-imgs img{width:100%; height:auto; display:block}
.case-imgs figcaption{
  position:absolute; left:8px; bottom:8px; color:#fff; background:rgba(10,13,17,.62);
  font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.case-text{display:flex; flex-direction:column; gap:12px}
.case-text .code{
  display:inline-flex; align-self:flex-start; align-items:center; gap:7px;
  background:var(--hairline); padding:6px 12px; border-radius:999px; color:var(--ink-2);
}
.dark .case-text .code{background:var(--hairline-dk); color:var(--on-dark-2)}
.case-text .code::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.case-text h3{margin:0}
.case-text p{margin:0; font-size:.96rem; line-height:1.58; color:var(--ink-2)}
.dark .case-text p{color:var(--on-dark-2)}

.feature{margin:0}
.feature img{width:100%; height:auto; max-height:min(66vh,600px); object-fit:cover; border-radius:var(--r-xl); box-shadow:var(--shadow-m)}

.vacs{display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px)}
.vac{
  background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-s);
  padding:clamp(20px,2.6vw,30px); display:grid; grid-template-columns:280px 1fr;
  gap:clamp(20px,3vw,34px); align-items:start;
}
@media (max-width:820px){ .vac{grid-template-columns:1fr} }
.vac-img{margin:0}
.vac-img img{width:100%; height:auto; border-radius:var(--r-m); display:block}
.vac-text{display:flex; flex-direction:column; gap:13px}
.vac-meta{font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; color:var(--ink-3); margin:0}
.vac-note{font-size:.94rem; line-height:1.55; color:var(--ink-2); margin:0}
.vac .btn{align-self:flex-start}

.archive{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(20px,3vw,40px); align-items:start}
@media (max-width:860px){ .archive{grid-template-columns:1fr} }
.archive figure{margin:0}
.archive img{width:100%; height:auto; border-radius:var(--r-m); box-shadow:var(--shadow-m); background:var(--sunken)}
.archive figcaption{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); line-height:1.6; margin-top:11px}
.archive-note{margin-top:1.4rem}
.archive-note p{font-size:.96rem; color:var(--ink-2); line-height:1.6}

.band{
  position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--dark);
  padding:clamp(26px,4vw,44px); margin-block:clamp(30px,4vw,50px);
}
.band-in{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.band h2{color:var(--on-dark); margin:0; font-size:clamp(1.28rem,2.1vw,1.65rem); letter-spacing:-.02em}
.band p{color:var(--on-dark-2); margin:9px 0 0; max-width:58ch; font-size:.96rem}
.band .btn{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.26)}
.band .btn:hover{background:rgba(255,255,255,.24); filter:none}

/* Gas Safe Register advert banner ------------------------------------- */
.gs-ad{
  display:block; width:100%; max-width:728px; margin-inline:auto; line-height:0;
  background:#000; border:1px solid var(--hairline); border-radius:var(--r-m); overflow:hidden;
  box-shadow:var(--shadow-s); transition:box-shadow .18s, transform .18s;
}
.gs-ad img{display:block; width:100%; height:auto}
.gs-ad:hover{box-shadow:var(--shadow-m); transform:translateY(-1px)}
.gs-ad:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (max-width:640px){ .gs-ad{max-width:160px; border-radius:var(--r-s)} }
.gs-cap{
  margin:12px auto 0; text-align:center; max-width:62ch;
  font-size:.9rem; line-height:1.6; color:var(--ink-2);
}
.block.dark .gs-cap{color:var(--on-dark-2)}

/* ============================== 9  GALLERY ============================= */
.gal-filters{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline);
  border:.5px solid var(--hairline); border-radius:var(--r-l); overflow:hidden; margin-bottom:1.6rem;
}
@media (max-width:900px){ .gal-filters{grid-template-columns:repeat(2,1fr)} }
.gal-filters button{
  background:var(--surface); border:0; cursor:pointer; padding:15px 14px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2); transition:background .16s, color .16s;
}
.gal-filters button:hover{background:var(--hairline); color:var(--ink)}
.gal-filters button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
.gal-filters button:focus-visible{outline:2.5px solid var(--accent); outline-offset:-3px}
.gal-count{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--ink-3); margin:0 0 1.6rem}

.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,12px)}
@media (max-width:1000px){ .gal-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .gal-grid{grid-template-columns:repeat(2,1fr)} }
.gal-item{
  position:relative; margin:0; padding:0; border:0; width:100%; display:block; cursor:zoom-in;
  background:var(--sunken); border-radius:var(--r-m); overflow:hidden; text-align:left;
  box-shadow:var(--shadow-s); transition:transform .3s cubic-bezier(.2,.7,.25,1), box-shadow .3s;
}
.gal-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.gal-item:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; z-index:2}
.gal-item img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.25,1)}
.gal-item:hover img{transform:scale(1.045)}
.gal-item[hidden]{display:none}
.gal-cap{
  position:absolute; inset:auto 0 0 0; padding:28px 14px 12px; color:#fff;
  font-size:.82rem; line-height:1.35; pointer-events:none;
  background:linear-gradient(to top, rgba(8,11,15,.88), rgba(8,11,15,0));
  opacity:0; transform:translateY(6px); transition:opacity .22s, transform .22s;
}
.gal-item:hover .gal-cap,.gal-item:focus-visible .gal-cap{opacity:1; transform:none}
@media (hover:none){ .gal-cap{opacity:1; transform:none} }
.gal-empty{padding:3rem 1rem; text-align:center; color:var(--ink-3); font-family:var(--mono); font-size:.72rem; letter-spacing:.08em}

.lb[hidden]{display:none}
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(10,13,17,.985);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:3.6rem 4.6rem;
}
.lb-fig{margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:1rem}
.lb-fig img{max-width:100%; max-height:calc(100vh - 11rem); width:auto; height:auto; object-fit:contain; margin:0 auto; border-radius:var(--r-m)}
.lb-fig figcaption{color:#E7E7E3; text-align:center; font-size:.9rem; line-height:1.5; max-width:62ch; margin:0 auto}
.lb-fig figcaption b{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#8E969F; font-weight:400; margin-bottom:.4rem}
.lb button{
  position:absolute; background:rgba(255,255,255,.10); border:.5px solid rgba(255,255,255,.28);
  color:#fff; cursor:pointer; width:46px; height:46px; border-radius:999px; font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .16s;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb-close{top:1.4rem; right:1.4rem}
.lb-prev{left:1.2rem; top:50%; transform:translateY(-50%)}
.lb-next{right:1.2rem; top:50%; transform:translateY(-50%)}
.lb-n{position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; color:#8E969F}
@media (max-width:700px){
  .lb{padding:4.2rem 3.4rem 5rem}
  .lb-fig img{max-height:calc(100vh - 15rem)}
  .lb button{width:40px; height:40px}
  .lb-prev{left:.35rem} .lb-next{right:.35rem} .lb-close{top:1rem; right:1rem}
}
body.lb-open{overflow:hidden}

/* ============================== 10  FOOTER ============================= */
.foot{background:var(--dark); color:var(--on-dark-2); padding-block:clamp(44px,6vw,72px) 44px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px}
@media (max-width:1000px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .foot-grid{grid-template-columns:1fr} }
.foot-logo{height:30px; width:auto; margin-bottom:16px}
.foot h4{font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark-2); margin:0 0 13px; font-weight:500}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.foot li{font-size:.92rem; color:var(--on-dark-2)}
.foot a{font-size:.92rem; color:var(--on-dark-2); text-decoration:none}
.foot a:hover{color:var(--on-dark)}
.foot-legal{margin-top:36px; padding-top:22px; border-top:.5px solid var(--hairline-dk)}
.foot-legal p{font-size:.79rem; line-height:1.65; color:var(--on-dark-2); margin:0}
.foot-legal strong{color:var(--on-dark); font-weight:600}
.foot-bar{
  margin-top:20px; padding-top:18px; border-top:.5px solid var(--hairline-dk);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.1em; color:var(--on-dark-2);
}

/* ===================== 10b  SHORT VIEWPORTS ============================
   A 13-inch laptop is roughly 1280-1512 wide but only 700-850 tall once
   browser chrome is taken off. Sizing type and spacing on width alone made
   the hero taller than the screen. Everything below scales on whichever of
   width or height is the tighter constraint. */
.h-xl{font-size:clamp(2.2rem, min(5.6vw, 7.4vh), 4.2rem)}
.h-lg{font-size:clamp(1.65rem, min(3.5vw, 5vh), 2.75rem)}
.h-md{font-size:clamp(1.08rem, min(1.65vw, 2.3vh), 1.34rem)}

.hero{padding-block:clamp(28px, min(7vw, 5.4vh), 84px)}
.hero .eyebrow{margin-bottom:clamp(10px, 2vh, 18px)}
.hero-lede{margin-top:clamp(12px, 2.4vh, 20px)}
.hero .btn-row{margin-top:clamp(16px, 3vh, 24px)}
.hero-foot{margin-top:clamp(22px, min(5vw, 4.2vh), 54px)}
.hero-foot > div{padding:clamp(13px, 2.2vh, 20px) 22px}
.hero-photo img{max-height:min(52vh, 520px)}

.block{padding-block:clamp(44px, min(7.5vw, 8vh), 100px)}
.block-tight{padding-block:clamp(32px, min(5vw, 5.5vh), 64px)}
.sec-head{margin-bottom:clamp(22px, min(4vw, 4.5vh), 46px)}
.pagehead{padding-block:clamp(34px, min(6vw, 6.5vh), 80px) clamp(24px, min(4vw, 4vh), 48px)}

/* the drafting strip is a flourish; a short screen needs the pixels more */
@media (max-height:860px){
  .titleblock{display:none}
  body{padding-bottom:0}
}

/* ========================= 11  MOTION & A11Y =========================== */
/* Content is visible by default. The hidden-then-reveal state is gated on
   html.js, which the inline script in <head> sets, so a JS failure can never
   leave the page blank. */
.rise,.reveal{opacity:1; transform:none}
html.js .rise,html.js .reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.25,1), transform .7s cubic-bezier(.2,.7,.25,1);
}
html.js .rise.in,html.js .reveal.in{opacity:1; transform:none}

@media (max-width:1080px), (pointer:coarse){
  .btn-sm{min-height:44px; padding:0 18px}
  .appearance{width:44px; height:44px}
  .gal-filters button{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rise,.reveal,html.js .rise,html.js .reveal{opacity:1; transform:none}
  .marquee-track{animation:none; transform:none}
  .marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
}

/* the light brand mark takes over in the dark appearance */
:root[data-theme="dark"] .brand .logo-lt{display:none}
:root[data-theme="dark"] .brand .logo-dk{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .logo-lt{display:none}
  :root:not([data-theme="light"]) .brand .logo-dk{display:block}
}

/* ====== 12 QUOTE TOOL ====================================================
   Appended to assets/site.css for v=8.
   Uses only existing Wet Slate custom properties — defines no new tokens,
   so it inherits light/dark automatically.
   ------------------------------------------------------------------------ */

.q-shell{
  display:grid; gap:clamp(22px,3vw,40px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:980px){
  .q-shell{grid-template-columns:minmax(0,1fr) 332px}
}

/* --- progress rail ------------------------------------------------------ */
.q-rail{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
  margin:0 0 clamp(20px,2.6vw,30px); padding:0; list-style:none;
  font-size:.86rem; line-height:1.3;
}
.q-rail li{
  display:flex; align-items:center; gap:8px;
  color:var(--ink-2); padding:6px 12px 6px 8px;
  border:1px solid var(--hairline); border-radius:999px;
  background:var(--paper, transparent);
}
.q-rail b{
  display:grid; place-items:center;
  width:21px; height:21px; flex:0 0 21px; border-radius:50%;
  background:var(--hairline); color:var(--ink-2);
  font-size:.74rem; font-weight:650; font-variant-numeric:tabular-nums;
}
.q-rail li[data-state="current"]{border-color:var(--accent); color:var(--ink)}
.q-rail li[data-state="current"] b{background:var(--accent); color:#fff}
.q-rail li[data-state="done"] b{background:var(--ink-2); color:#fff}
.q-rail li[data-state="done"]{color:var(--ink)}

/* --- panels ------------------------------------------------------------- */
.q-step{display:none}
.q-step[data-active]{display:block}
.q-step > h3{
  margin:0 0 6px; font-size:clamp(1.22rem,2.2vw,1.55rem); line-height:1.25;
}
.q-step > .q-lede{margin:0 0 clamp(18px,2.2vw,26px); color:var(--ink-2); max-width:58ch}

.q-fs{border:0; margin:0 0 26px; padding:0; min-width:0}
.q-fs > legend{
  padding:0; margin:0 0 10px; font-weight:650; font-size:1rem; color:var(--ink);
}
.q-hint{margin:-4px 0 12px; font-size:.88rem; color:var(--ink-2); max-width:60ch}

/* --- choice cards ------------------------------------------------------- */
.q-choices{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.q-choice{position:relative; display:block}
.q-choice input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.q-choice > span{
  display:block; height:100%; padding:14px 16px;
  border:1px solid var(--hairline); border-radius:var(--r-m);
  background:var(--paper, transparent);
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.q-choice strong{display:block; font-weight:620; margin-bottom:3px; line-height:1.3}
.q-choice em{display:block; font-style:normal; font-size:.86rem; color:var(--ink-2); line-height:1.5}
.q-choice input:hover + span{border-color:var(--ink-2)}
.q-choice input:focus-visible + span{outline:2px solid var(--accent); outline-offset:3px}
.q-choice input:checked + span{
  border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent), var(--shadow-s);
}

/* --- service picker ----------------------------------------------------- */
.q-group{margin:0 0 22px}
.q-group > h4{
  margin:0 0 9px; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2); font-weight:650;
}
.q-svcs{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(min(100%,216px),1fr))}
.q-svc{position:relative; display:block}
.q-svc input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.q-svc > span{
  display:flex; gap:10px; align-items:flex-start; height:100%;
  padding:11px 13px; border:1px solid var(--hairline); border-radius:var(--r-s);
  font-size:.94rem; line-height:1.4; transition:border-color .16s, box-shadow .16s;
}
.q-svc > span::before{
  content:""; flex:0 0 17px; width:17px; height:17px; margin-top:1px;
  border:1.5px solid var(--hairline); border-radius:5px;
}
.q-svc input:hover + span{border-color:var(--ink-2)}
.q-svc input:focus-visible + span{outline:2px solid var(--accent); outline-offset:3px}
.q-svc input:checked + span{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.q-svc input:checked + span::before{
  background:var(--accent); border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.8'/%3E%3C/svg%3E");
  background-size:100% 100%;
}

/* --- plain fields ------------------------------------------------------- */
.q-grid{display:grid; gap:14px 18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,228px),1fr))}
.q-field{display:block; min-width:0}
.q-field > span{display:block; font-size:.9rem; font-weight:560; margin-bottom:5px}
.q-field .q-opt{font-weight:400; color:var(--ink-2)}
.q-field input, .q-field select, .q-field textarea{
  width:100%; box-sizing:border-box; padding:11px 12px;
  font:inherit; font-size:.97rem; color:var(--ink);
  background:var(--paper, #fff); border:1px solid var(--hairline);
  border-radius:var(--r-s); transition:border-color .16s, box-shadow .16s;
}
.q-field textarea{min-height:124px; resize:vertical; line-height:1.6}
.q-field input:focus, .q-field select:focus, .q-field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.q-span-all{grid-column:1/-1}
.q-err{display:block; margin-top:5px; font-size:.85rem; color:#b3261e; font-weight:560}
:root[data-theme="dark"] .q-err{color:#ffb4ab}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .q-err{color:#ffb4ab} }
.q-field[data-invalid] input, .q-field[data-invalid] select, .q-field[data-invalid] textarea{border-color:#b3261e}

/* --- photo drop --------------------------------------------------------- */
.q-drop{
  position:relative; display:block; padding:clamp(20px,3vw,30px);
  border:1.5px dashed var(--hairline); border-radius:var(--r-m);
  text-align:center; cursor:pointer; transition:border-color .16s, background .16s;
}
.q-drop:hover, .q-drop[data-over]{border-color:var(--accent)}
.q-drop input{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer}
.q-drop strong{display:block; font-size:1.02rem; margin-bottom:4px}
.q-drop span{display:block; font-size:.88rem; color:var(--ink-2); line-height:1.55}
.q-drop input:focus-visible + .q-drop-in{outline:2px solid var(--accent); outline-offset:6px; border-radius:var(--r-s)}
.q-thumbs{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); margin:14px 0 0; padding:0; list-style:none}
.q-thumbs li{
  position:relative; aspect-ratio:1; border-radius:var(--r-s); overflow:hidden;
  border:1px solid var(--hairline); background:var(--hairline);
}
.q-thumbs img{width:100%; height:100%; object-fit:cover; display:block}
.q-thumbs .q-doc{display:grid; place-items:center; width:100%; height:100%; font-size:.72rem; color:var(--ink-2); padding:6px; text-align:center; word-break:break-all}
.q-thumbs button{
  position:absolute; top:4px; right:4px; width:22px; height:22px; padding:0;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(0,0,0,.62); color:#fff; font-size:.9rem; line-height:1; cursor:pointer;
}
.q-thumbs button:focus-visible{outline:2px solid #fff; outline-offset:1px}

/* --- nav buttons -------------------------------------------------------- */
.q-nav{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:clamp(22px,2.8vw,32px)}
.q-nav .q-spacer{flex:1 1 auto}
.q-back{background:none; border:0; padding:10px 4px; font:inherit; color:var(--ink-2); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.q-back:hover{color:var(--ink)}

/* --- summary aside ----------------------------------------------------- */
.q-aside{
  border:1px solid var(--hairline); border-radius:var(--r-m);
  padding:clamp(18px,2.2vw,24px); background:var(--paper, transparent);
  box-shadow:var(--shadow-s);
}
@media (min-width:980px){ .q-aside{position:sticky; top:clamp(90px,11vh,124px)} }
.q-aside h3{margin:0 0 4px; font-size:1.04rem}
.q-aside > p{margin:0 0 16px; font-size:.86rem; color:var(--ink-2); line-height:1.55}
.q-lines{margin:0; padding:0; list-style:none; font-size:.92rem}
.q-lines li{display:flex; gap:12px; justify-content:space-between; padding:9px 0; border-top:1px solid var(--hairline); line-height:1.45}
.q-lines li:first-child{border-top:0}
.q-lines .q-l{min-width:0}
.q-lines .q-r{flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:620; white-space:nowrap}
.q-lines .q-survey{font-weight:500; color:var(--ink-2); font-size:.86rem}
.q-total{display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top:14px; padding-top:14px; border-top:2px solid var(--ink)}
.q-total .q-r{font-size:1.18rem; font-weight:680; font-variant-numeric:tabular-nums}
.q-smallprint{margin:14px 0 0; font-size:.78rem; line-height:1.6; color:var(--ink-2)}
.q-empty{margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.6}

/* --- outcome ----------------------------------------------------------- */
.q-done{text-align:center; max-width:56ch; margin-inline:auto; padding:clamp(26px,4vw,48px) 0}
.q-done .q-tick{
  width:56px; height:56px; margin:0 auto 18px; display:grid; place-items:center;
  border-radius:50%; background:var(--accent); color:#fff; font-size:1.7rem; line-height:1;
}
.q-done h3{margin:0 0 10px; font-size:clamp(1.3rem,2.4vw,1.7rem)}
.q-ref{display:inline-block; margin:12px 0 0; padding:7px 14px; border:1px dashed var(--hairline); border-radius:var(--r-s); font-variant-numeric:tabular-nums; letter-spacing:.04em}
.q-fail{
  margin:18px 0 0; padding:14px 16px; border:1px solid #b3261e; border-radius:var(--r-s);
  font-size:.92rem; line-height:1.6; text-align:left;
}

/* --- small page furniture (namespaced, no reliance on site classes) --- */
.q-eyebrow{
  margin:0 0 10px; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
  font-weight:650; color:var(--ink-2);
}
.q-faqs{max-width:76ch}
.q-faq{border-top:1px solid var(--hairline); padding:0}
.q-faq:last-child{border-bottom:1px solid var(--hairline)}
.q-faq > summary{
  cursor:pointer; padding:16px 34px 16px 0; position:relative; font-weight:600;
  line-height:1.45; list-style:none;
}
.q-faq > summary::-webkit-details-marker{display:none}
.q-faq > summary::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  margin-top:-6px; border-right:1.6px solid var(--ink-2); border-bottom:1.6px solid var(--ink-2);
  transform:rotate(45deg); transition:transform .18s;
}
.q-faq[open] > summary::after{transform:rotate(-135deg); margin-top:-2px}
.q-faq > summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-s)}
.q-faq > p{margin:0 0 18px; color:var(--ink-2); line-height:1.7; max-width:68ch}

/* --- the hidden attribute must beat our own display rules -------------
   .q-shell is display:grid, .q-err is display:block and so on, and an
   author display rule outranks the browser's [hidden]{display:none}.
   Without this block every error message shows permanently and the whole
   form flashes up before JavaScript has initialised it. ---------------- */
.q-shell[hidden], .q-aside[hidden], .q-rail[hidden], .q-total[hidden],
.q-err[hidden], .q-fail[hidden], .q-empty[hidden], .q-ref[hidden],
.q-step[hidden], .q-drop[hidden]{display:none}

/* --- reduced motion / print ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .q-choice > span, .q-svc > span, .q-field input, .q-field select, .q-field textarea, .q-drop{transition:none}
}
@media print{
  .q-rail, .q-nav, .q-drop{display:none}
  .q-step{display:block !important}
}