/* OWB Developments - technical plate
   Nippo + Satoshi. Petrol-slate on bone. Hazard yellow, rationed.

   Both faces are self-hosted from assets/fonts. They were served off the
   Fontshare CDN until 18 Aug 2026, when that API started refusing requests
   ("Access to the Fontshare API has been temporarily restricted") and the site
   fell back to Georgia. Fontshare licence permits self-hosting. Do not put the
   CDN link back. */

@font-face{font-family:'Nippo';src:url('../fonts/nippo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nippo';src:url('../fonts/nippo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Nippo';src:url('../fonts/nippo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#0D0F10;
  --slate:#12384F;
  --slate-2:#0E2A3B;
  --steel:#6E7377;
  --hair:#D5D3CE;
  --bone:#F4F3F0;
  --bone-2:#EAE8E3;
  --hazard:#F2C230;
  --disp:'Nippo','Helvetica Neue',Arial,sans-serif;
  --body:'Satoshi',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --gut:clamp(24px,5vw,96px);
  --max:1440px;
  --sec:clamp(84px,10vw,158px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--hazard);color:var(--ink)}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.rule{height:1px;background:var(--hair);border:0}

/* ---------- small caps data label ---------- */
.lab{
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--steel);font-weight:500;display:block;
}
.lab--light{color:rgba(255,255,255,.5)}

/* ---------- header ---------- */
.topbar{
  background:var(--ink);color:rgba(255,255,255,.68);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.topbar .wrap{display:flex;justify-content:space-between;gap:20px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.topbar a:hover{color:#fff}

.hd{border-bottom:1px solid var(--hair);background:var(--bone);position:sticky;top:0;z-index:60}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:16px;padding-bottom:16px}
/* Client note 20 Aug 2026: back to the original logo, in the group blue.
   The square-and-hazard-bar mark drawn in CSS here was ours, not his. */
.mark{display:flex;align-items:center;flex:0 0 auto}
.mark img{height:78px;width:auto;display:block}

.nav{display:flex;gap:clamp(16px,2.2vw,34px);font-size:14px;font-weight:500}
.nav a{padding-bottom:4px;border-bottom:3px solid transparent;transition:border-color .25s}
.nav a:hover{border-bottom-color:var(--hair)}
.nav a.on{border-bottom-color:var(--hazard)}
.hd__tel{font-family:var(--disp);font-weight:500;font-size:16px;letter-spacing:.01em;white-space:nowrap}
.hd__tel span{display:block;font-family:var(--body);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);font-weight:500}

.navtoggle{display:none;background:none;border:1px solid var(--hair);padding:9px 14px;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;background:#08090A;overflow:hidden;min-height:min(88vh,860px);display:flex;align-items:flex-end}
.hero--sm{min-height:min(58vh,520px)}
.hero--type{background:var(--slate);min-height:min(52vh,470px)}
.hero--type .hero__in{padding-top:clamp(96px,14vh,170px)}
.hero--type h1 em{color:rgba(255,255,255,.42)}
.hero__img{position:absolute;inset:0}
.hero__img img{width:100%;height:100%;object-fit:cover;opacity:.9}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,8,10,.66) 0%,rgba(6,8,10,.22) 26%,rgba(6,8,10,.62) 62%,rgba(6,8,10,.94) 100%),
  linear-gradient(96deg,rgba(6,8,10,.78) 0%,rgba(6,8,10,.5) 38%,rgba(6,8,10,.12) 68%,rgba(6,8,10,0) 100%)}
/* --lit: for a night photograph, which needs the scrim off it rather than on it.
   Home page only. Daylight heroes keep the heavy scrim above or the type goes. */
.hero--lit .hero__img img{object-position:50% 62%;opacity:1}
.hero--lit h1{text-shadow:0 2px 26px rgba(6,8,10,.42)}
.hero--lit h1 em{color:rgba(255,255,255,.72)}
.hero--lit .hero__scrim{background:
  linear-gradient(180deg,rgba(6,8,10,.30) 0%,rgba(6,8,10,.02) 28%,rgba(6,8,10,.22) 62%,rgba(6,8,10,.70) 100%),
  linear-gradient(96deg,rgba(6,8,10,.38) 0%,rgba(6,8,10,.18) 40%,rgba(6,8,10,.02) 70%,rgba(6,8,10,0) 100%)}
.hero__in{position:relative;width:100%;padding-top:clamp(140px,20vh,240px);padding-bottom:clamp(40px,5vw,72px)}
.hero__topwrap{position:absolute;top:24px;left:0;right:0;z-index:2}
.hero__top{display:flex;justify-content:space-between;gap:20px}
.hero h1{
  font-family:var(--disp);font-weight:700;color:#fff;
  font-size:clamp(2.9rem,7vw,6.6rem);line-height:.92;letter-spacing:-.032em;
  max-width:16ch;
}
.hero h1 em{font-style:normal;color:rgba(255,255,255,.52)}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(28px,5vw,90px);margin-top:clamp(26px,3.4vw,44px);flex-wrap:wrap}
.hero__deck{color:rgba(255,255,255,.78);font-size:clamp(15px,1.15vw,17px);max-width:44ch;border-top:1px solid rgba(255,255,255,.26);padding-top:18px}
.hero__deck .lab{margin-bottom:10px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--body);font-weight:700;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:18px 32px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  transition:background .25s,color .25s,border-color .25s;cursor:pointer;
}
.btn:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;border-color:#fff;color:var(--ink)}
.btn--light:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- trust strip ---------- */
.trust{background:var(--ink);color:rgba(255,255,255,.74)}
.trust .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:17px;padding-bottom:17px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.trust b{color:#fff;font-weight:700}

/* ---------- section furniture ---------- */
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.sec--tight{padding-bottom:clamp(60px,7vw,96px)}
.sechd{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:20px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.sechd h2{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.sechd .lab{color:var(--steel)}
.idx{display:flex;align-items:center;gap:14px}
.idx::before{content:"";width:26px;height:3px;background:var(--hazard);flex:0 0 auto}

h2.big,h3.big{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.02;letter-spacing:-.03em;color:var(--slate)}
.lede{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,90px);align-items:start}
.lede__p{font-family:var(--disp);font-weight:500;font-size:clamp(1.35rem,2.35vw,2.1rem);line-height:1.24;letter-spacing:-.016em;color:var(--slate)}
.lede__b{color:var(--steel);margin-top:24px;max-width:62ch}
.lede__b + .lede__b{margin-top:16px}

/* ---------- schedule rows ---------- */
.sched{margin-top:6px}
.sched__row{
  display:grid;grid-template-columns:56px minmax(0,3.2fr) minmax(0,5.4fr) 132px;
  gap:clamp(16px,2.6vw,38px);padding:26px 0;border-bottom:1px solid var(--hair);align-items:baseline;
}
.sched__row .n{font-size:11px;letter-spacing:.16em;color:var(--steel);font-weight:500}
.sched__row .t{font-family:var(--disp);font-weight:500;font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:-.012em;color:var(--ink)}
.sched__row .d{color:var(--steel);font-size:15.5px;line-height:1.6}
.sched__row .m{text-align:right;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);font-weight:500}
a.sched__row{transition:background .25s}
a.sched__row:hover{background:var(--bone-2)}
a.sched__row:hover .t{color:var(--slate)}

/* ---------- fork (the two sides of the business, home page only) ---------- */
.fork{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.fork > a{
  padding:clamp(36px,4.2vw,60px) clamp(28px,3.4vw,52px) clamp(36px,4.2vw,60px) 0;
  border-right:1px solid var(--hair);transition:background .25s;display:block;
}
.fork > a:last-child{border-right:0;padding-left:clamp(28px,3.4vw,52px)}
.fork > a:hover{background:var(--bone-2)}
.fork h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,2.9vw,2.6rem);line-height:1.02;letter-spacing:-.03em;color:var(--slate);margin:16px 0 14px}
.fork p{color:var(--steel);font-size:15.5px;max-width:42ch}
.fork .go{display:inline-block;margin-top:26px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);font-weight:500;border-bottom:1px solid var(--hair);padding-bottom:4px;transition:border-color .25s,color .25s}
.fork > a:hover .go{border-bottom-color:var(--slate);color:var(--slate)}

/* ---------- audience switch (homes <-> commercial) ---------- */
.switch{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:24px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  transition:background .25s;
}
.switch:hover{background:var(--bone-2)}
.switch .t{font-family:var(--disp);font-weight:500;font-size:clamp(1.05rem,1.4vw,1.32rem);letter-spacing:-.012em;color:var(--slate)}
.switch .go{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);font-weight:500;border-bottom:1px solid var(--hair);padding-bottom:4px;transition:border-color .25s,color .25s}
.switch:hover .go{border-bottom-color:var(--slate);color:var(--slate)}

/* ---------- dark band ---------- */
.band{background:var(--slate);color:#fff}
.band--ink{background:var(--ink)}
.band .lab{color:rgba(255,255,255,.5)}
.band h3.big,.band h2.big{color:#fff}
.band p{color:rgba(255,255,255,.72)}
.band__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}
.band__fig{border:1px solid rgba(255,255,255,.18);padding:9px}
.band__fig img{width:100%;height:clamp(300px,42vw,480px);object-fit:cover}
.cov{display:grid;grid-template-columns:1fr 1fr;margin-top:34px;border-top:1px solid rgba(255,255,255,.18)}
.cov div{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:14px;color:rgba(255,255,255,.74)}
.cov div:nth-child(odd){padding-right:20px}

/* ---------- thermal survey frames (powerflushing) ---------- */
.therm{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,56px);margin-top:clamp(38px,5vw,66px)}
.therm figure{margin:0;display:flex;flex-direction:column}
.therm figcaption{display:flex;flex-direction:column;flex:1}
.therm .read{margin-top:auto}
.therm .scr{border:1px solid rgba(255,255,255,.2);background:#000;padding:8px}
.therm .scr img{display:block;width:100%;height:clamp(260px,25vw,380px);object-fit:contain;background:#000}
.therm figcaption{margin-top:20px}
.therm h4{font-family:var(--disp);font-weight:500;font-size:1.22rem;letter-spacing:-.012em;color:#fff;margin:12px 0 10px}
.therm p{font-size:15px;line-height:1.6;max-width:40ch}
.read{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;border-top:1px solid rgba(255,255,255,.2);padding-top:16px}
.read b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.55rem);letter-spacing:-.028em;color:#fff;line-height:1}
.read b i{font-style:normal;font-size:.56em;font-weight:500;color:rgba(255,255,255,.5);margin-left:2px}
.read .lab{margin-top:9px}

/* ---------- plates (image tiles) ---------- */
.plates{display:grid;gap:clamp(24px,3.4vw,56px);margin-top:44px}
.plates--2{grid-template-columns:repeat(2,1fr)}
.plates--ev{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
.plates--ev .plate img{height:clamp(360px,38vw,540px)}
.plates--3{grid-template-columns:repeat(3,1fr)}
.plate figure{overflow:hidden;background:var(--bone-2);border:1px solid var(--hair)}
.plate img{width:100%;height:clamp(240px,26vw,380px);object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.plate:hover img{transform:scale(1.025)}
.plate h4{font-family:var(--disp);font-weight:500;font-size:1.35rem;letter-spacing:-.012em;margin:22px 0 8px;color:var(--slate)}
.plate p{color:var(--steel);font-size:15.5px;max-width:52ch}
.plate .lab{margin-bottom:14px}

/* ---------- split (image + text, NOT a hero) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.duo__img{background:var(--bone-2);overflow:hidden;min-height:clamp(320px,40vw,600px)}
.duo__img img{width:100%;height:100%;object-fit:cover}
.duo__txt{padding:clamp(40px,6vw,96px);display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--hair)}
.duo__txt h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.8rem,3vw,2.9rem);line-height:1.04;letter-spacing:-.03em;color:var(--slate);margin:18px 0 20px}
.duo__txt p{color:var(--steel);max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.tags span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--hair);padding:9px 14px;color:var(--steel);font-weight:500}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.facts div{padding:34px 26px 34px 0;border-bottom:1px solid var(--hair)}
.facts .f{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.9rem);letter-spacing:-.03em;color:var(--slate);line-height:1}
.facts .lab{margin-top:12px}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.q{padding:44px 40px 44px 0;border-right:1px solid var(--hair)}
.q:last-child{border-right:0}
.q:not(:first-child){padding-left:40px}
.q p{font-family:var(--disp);font-weight:500;font-size:1.16rem;line-height:1.42;letter-spacing:-.012em;color:var(--slate)}
.q cite{display:block;font-style:normal;margin-top:20px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);font-weight:500}

/* ---------- badges ---------- */
.badges{display:flex;gap:clamp(22px,3vw,44px);align-items:center;flex-wrap:wrap;padding:32px 0;border-bottom:1px solid var(--hair)}
.badges img{height:40px;width:auto;filter:grayscale(1);opacity:.6}
.badges .lab{margin-right:12px}

/* ---------- cta ---------- */
.cta{display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap;padding:clamp(60px,8vw,110px) 0}
.cta h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,4.2vw,3.6rem);line-height:1;letter-spacing:-.033em;color:var(--slate)}
.band .cta h3{color:#fff}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.6);font-size:14px;padding-top:clamp(56px,7vw,92px);padding-bottom:40px}
.foot__grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,60px);padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot h5{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:500;margin-bottom:18px}
.foot ul{list-style:none;display:grid;gap:11px}
.foot a:hover{color:#fff}
.foot__mark{width:125px;height:auto;display:block}
.foot__base{display:flex;justify-content:space-between;gap:20px;padding-top:26px;font-size:12px;color:rgba(255,255,255,.4);flex-wrap:wrap}
/* Studio credit, matched to the two spans either side of it. Measured, not
   guessed: both compute to Satoshi 400 / 12px / normal tracking / no transform
   / rgba(255,255,255,.4). Site-side only - never edit srs-credit.css. */
.foot__base .srs-credit{font-family:var(--body);font-size:12px;letter-spacing:normal;text-transform:none;color:rgba(255,255,255,.4)}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:9px}
.field--full{grid-column:1/-1}
.field label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);font-weight:500}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;padding:15px 16px;border:1px solid var(--hair);background:#fff;color:var(--ink);border-radius:0;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--slate);outline-offset:-2px}
/* honeypot. Off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{grid-column:1/-1;border-left:3px solid var(--hazard);background:var(--bone-2);padding:16px 18px;margin:0 0 26px;font-size:15px}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(20px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .plate img{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .plates--3{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
  .q{border-right:0;border-bottom:1px solid var(--hair);padding:34px 0}
  .q:not(:first-child){padding-left:0}
  .q:last-child{border-bottom:0}
}
@media (max-width:900px){
  .nav{display:none}
  .nav.open{
    display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;
    background:var(--bone);border-bottom:1px solid var(--hair);padding:8px var(--gut) 20px;
  }
  .nav.open a{padding:14px 0;border-bottom:1px solid var(--hair);border-left:3px solid transparent}
  .nav.open a.on{border-bottom-color:var(--hair);border-left-color:var(--hazard);padding-left:12px}
  .navtoggle{display:block}
  .hd .wrap{position:relative}
  .hd__tel{display:none}
  .lede{grid-template-columns:1fr;gap:20px}
  .band__grid{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .duo__txt{border-left:0;border-top:1px solid var(--hair)}
  .sched__row{grid-template-columns:38px 1fr;row-gap:8px}
  .sched__row .d{grid-column:2}
  .sched__row .m{grid-column:2;text-align:left}
  .fork{grid-template-columns:1fr}
  .fork > a{border-right:0;border-bottom:1px solid var(--hair);padding-right:0}
  .fork > a:last-child{border-bottom:0;padding-left:0}
  .switch{gap:10px}
  .plates--2,.plates--3,.plates--ev{grid-template-columns:1fr}
  .therm{grid-template-columns:1fr}
  .therm .scr img{height:clamp(300px,60vw,440px)}
  .form{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .mark img{height:62px}
  body{font-size:16px}
  .facts{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .topbar .wrap{font-size:10px;letter-spacing:.12em}
}


/* ==========================================================================
   Signal Red Studio - client footer credit
   v1.0  2026-09-10
   --------------------------------------------------------------------------
   Self-contained. Every selector is namespaced .srs-credit so it cannot
   collide with a client's own footer CSS. No web font, no reset, no
   !important, nothing outside this block.

   By design the credit inherits the client's own small-print typeface and
   size. The recognisable part is the mark and the name, not our typeface.
   Forcing Inter into someone else's footer looks bolted on.

   Tune per site with the custom properties on .srs-credit.
   ========================================================================== */

.srs-credit {
  /* --- knobs ------------------------------------------------------------ */
  --srs-red: #a52019;         /* RAL 3001, the logo red */
  --srs-red-bright: #ef4444;  /* the on-dark substitute */
  --srs-accent: var(--srs-red);
  --srs-mark: 1.65em;          /* mark scales with the surrounding text */
  --srs-gap: 0.55em;
  --srs-lead-opacity: 0.7;     /* the "Site by" words sit back a little */

  display: inline-flex;
  align-items: center;
  gap: var(--srs-gap);
  font: inherit;
  color: inherit;
  line-height: 1.25;
}

.srs-credit__mark {
  flex: 0 0 auto;
  width: var(--srs-mark);
  height: var(--srs-mark);
  /* the spiral loses its counters below about 17px, so hold a floor */
  min-width: 17px;
  min-height: 17px;
  color: var(--srs-accent);
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.srs-credit__lead {
  opacity: var(--srs-lead-opacity);
}

.srs-credit__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.srs-credit__link:hover,
.srs-credit__link:focus-visible {
  color: var(--srs-accent);
  border-bottom-color: currentColor;
}

.srs-credit__link:focus-visible {
  outline: 2px solid var(--srs-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.srs-credit:hover .srs-credit__mark {
  opacity: 1;
}

/* --- variant: on a dark footer -------------------------------------------
   #a52019 goes muddy below about 25% lightness. Swap to the bright red. */
.srs-credit--on-dark {
  --srs-accent: var(--srs-red-bright);
}

/* --- variant: no colour --------------------------------------------------
   For footers where a red mark fights the client's own palette. The mark
   inherits the footer text colour and the link only shifts weight. */
.srs-credit--mono {
  --srs-accent: currentColor;
}

.srs-credit--mono .srs-credit__mark {
  color: currentColor;
  opacity: 0.55;
}

.srs-credit--mono:hover .srs-credit__mark {
  opacity: 0.9;
}

/* --- variant: text only --------------------------------------------------
   Drops inside an existing copyright sentence. No mark, no flex. */
.srs-credit--text {
  display: inline;
  gap: 0;
}

/* --- variant: small -----------------------------------------------------
   Pins the credit to 11px regardless of the client's footer scale. */
.srs-credit--sm {
  font-size: 11px;
  letter-spacing: 0.01em;
}

/* --- variant: the lockup ------------------------------------------------
   Mark plus the stacked wordmark, on its own footer row. Use where there
   is vertical room. Reproduces the brand's own tracking. */
.srs-credit--lockup {
  --srs-mark: 30px;
  --srs-gap: 12px;
  align-items: center;
}

.srs-credit--lockup .srs-credit__lead {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.srs-credit--lockup .srs-credit__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-bottom: 0;
  padding-bottom: 0;
}

.srs-credit--lockup .srs-credit__link:hover,
.srs-credit--lockup .srs-credit__link:focus-visible {
  color: inherit;
}

.srs-credit__lockup {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.srs-credit__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.srs-credit__sub {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}

.srs-credit--lockup .srs-credit__link:hover .srs-credit__name,
.srs-credit--lockup .srs-credit__link:focus-visible .srs-credit__name {
  color: var(--srs-accent);
}

/* --- respect the setting ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .srs-credit__mark,
  .srs-credit__link,
  .srs-credit__name {
    transition: none;
  }
}