@charset "utf-8";
/* ==========================================================================
   Cleanertile Roofing — Sunbury-on-Thames
   Brand: white background, red type, simple red wordmark (per brief).
   --------------------------------------------------------------------------
   Palette contrast (sRGB, WCAG AA):
     #C4162C on #FFFFFF ......... 6.0:1   (accents / links / eyebrows)
     #FFFFFF on #C4162C ......... 6.0:1   (primary button label)
     #FFFFFF on #A81328 ......... 7.5:1   (deep-red CTA band)
     #16161B on #FFFFFF ......... 18.0:1  (headings)
     #4A4A52 on #FFFFFF ......... 8.8:1   (body copy)
     #F0596E on #16161B ......... 5.5:1   (accent on ink / hero)
     #D5D1D0 on #16161B ......... 12.4:1  (footer body copy)
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root{
  /* Red is an ACCENT, not the default heading colour: eyebrows, buttons,
     icons, rules and one deep-red CTA band. Headings sit in ink so the page
     reads calm while the brand still reads red-and-white. */
  --red:#C4162C;
  --red-dk:#A21226;
  --red-deep:#7A0E1C;
  --red-lt:#F0596E;
  --red-tint:#FBEBEE;
  --red-tint-2:#F3DFE3;
  --ink:#16161B;
  --ink-2:#202026;
  --ink-3:#2C2C34;
  --paper:#FFFFFF;
  --paper-2:#FAF8F7;
  --paper-3:#F1EDEC;
  --line:#EAE5E4;
  --line-dk:#37373F;
  --body:#4A4A52;
  --body-dk:#D5D1D0;
  --muted:#75757D;

  --wrap:1200px;
  --r-sm:10px;
  --r:16px;
  --r-lg:26px;
  --r-xl:34px;

  --shadow-1:0 1px 2px rgba(22,22,27,.04), 0 4px 16px rgba(22,22,27,.05);
  --shadow-2:0 8px 26px rgba(22,22,27,.09), 0 2px 6px rgba(22,22,27,.04);
  --shadow-3:0 26px 64px rgba(22,22,27,.16);
  --shadow-red:0 10px 24px rgba(196,22,44,.22);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.35s;

  --font-head:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* clip (not hidden) so the parked off-canvas panel can't inflate innerWidth
     or break position:sticky on the header */
  overflow-x:clip;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block;}
figure{margin:0;}
a{color:var(--red);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font:inherit;color:inherit;}
[hidden]{display:none !important;}

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.02em;
  font-weight:800;
}
h1{font-size:clamp(2.05rem,1.3rem + 3.2vw,3.6rem);}
h2{font-size:clamp(1.6rem,1.18rem + 1.85vw,2.45rem);text-wrap:balance;}
h3{font-size:clamp(1.15rem,1.02rem + .55vw,1.4rem);font-weight:700;color:var(--ink);}
h4{font-size:1.02rem;font-weight:700;color:var(--ink);}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
strong{color:var(--ink);}

::selection{background:var(--red);color:#fff;}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px;}

/* --------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px;}
.section{padding-block:clamp(56px,4.4vw,92px);}
.section--tight{padding-block:clamp(40px,3vw,64px);}
.section--paper{background:var(--paper-2);}
.section--ink{background:var(--ink);color:var(--body-dk);}
.section--ink h2{color:#fff;}
.section--ink h3,.section--ink h4,.section--ink strong{color:#fff;}
.section--red{background:linear-gradient(145deg,#A81328,#7A0E1C);color:#fff;}
.section--red h2,.section--red h3{color:#fff;}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-head);
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin:0 0 14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);border-radius:2px;}
.section--ink .eyebrow{color:var(--red-lt);}
.section--ink .eyebrow::before{background:var(--red-lt);}
.section--red .eyebrow{color:#fff;}
.section--red .eyebrow::before{background:#fff;}

.lede{font-size:1.09rem;color:var(--body);max-width:64ch;}
.section--ink .lede{color:var(--body-dk);}
.head{max-width:70ch;margin-bottom:clamp(28px,2.4vw,44px);}
.head--centre{margin-inline:auto;text-align:center;}
.head--centre .eyebrow{justify-content:center;}

/* --------------------------------------------------------------- buttons */
.btn{
  --btn-bg:var(--red);
  --btn-fg:#fff;
  --btn-bd:var(--red);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;
  border:2px solid var(--btn-bd);
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-head);
  font-size:.97rem;font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  box-shadow:var(--shadow-red);
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(196,22,44,.38);
  background:var(--red-dk);border-color:var(--red-dk);color:#fff;
  text-decoration:none;
}
.btn:active{transform:translateY(-1px);}
.btn__ico{width:19px;height:19px;flex:0 0 19px;transition:transform var(--dur) var(--ease);}
.btn:hover .btn__ico{transform:translateX(3px);}
.btn--ghost{
  --btn-bg:transparent;--btn-fg:var(--red);--btn-bd:var(--red-tint-2);
  box-shadow:none;
}
.btn--ghost:hover{
  --btn-bg:var(--red);--btn-fg:#fff;--btn-bd:var(--red);
  box-shadow:0 14px 30px rgba(196,22,44,.28);
}
.btn--on-ink{
  --btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4);
  box-shadow:none;
}
.btn--on-ink:hover{--btn-bg:#fff;--btn-fg:var(--red);--btn-bd:#fff;box-shadow:0 14px 30px rgba(0,0,0,.25);}
.btn--wide{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

/* --------------------------------------------------------------- header */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur) var(--ease);
}
.header.is-stuck{box-shadow:0 6px 24px rgba(26,26,31,.10);}
.header__bar{display:flex;align-items:center;gap:18px;min-height:76px;}

/* wordmark: plain red type, as the brief asks */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;}
.brand:hover{text-decoration:none;}
.brand__text{display:flex;flex-direction:column;line-height:1;}
.brand__name{
  font-family:var(--font-head);font-weight:800;font-size:1.32rem;
  color:var(--red);letter-spacing:-.03em;white-space:nowrap;
  transition:color var(--dur) var(--ease), letter-spacing var(--dur) var(--ease);
}
.brand__sub{
  font-family:var(--font-head);
  font-size:.66rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--red);white-space:nowrap;margin-top:4px;
  transition:letter-spacing var(--dur) var(--ease);
}
.brand:hover .brand__name{color:var(--red-dk);}
.brand:hover .brand__sub{letter-spacing:.36em;}

.nav{display:none;margin-left:auto;}
.nav__list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.nav__link{
  position:relative;display:block;padding:9px 14px;border-radius:8px;
  font-family:var(--font-head);font-size:.94rem;font-weight:600;
  color:var(--ink);text-decoration:none;
  transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav__link:hover{color:var(--red);background:var(--red-tint);text-decoration:none;}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);}
.nav__link[aria-current="page"]{color:var(--red);}

.header__actions{display:flex;align-items:center;gap:12px;margin-left:auto;}
.header__tel{
  display:none;align-items:center;gap:9px;text-decoration:none;
  padding:8px 12px;border-radius:10px;
  transition:background-color var(--dur) var(--ease);
}
.header__tel:hover{background:var(--red-tint);text-decoration:none;}
.header__tel .ico{width:20px;height:20px;flex:0 0 20px;color:var(--red);}
.header__tel-txt{display:flex;flex-direction:column;line-height:1.15;}
.header__tel-label{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.header__tel-num{font-family:var(--font-head);font-weight:800;font-size:1rem;color:var(--ink);white-space:nowrap;}
.header .btn{padding:12px 20px;font-size:.9rem;}
.header__cta{display:none;}

.navtoggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex:0 0 48px;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  cursor:pointer;position:relative;z-index:2;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.navtoggle:hover{background:var(--red-tint);border-color:var(--red);}
.navtoggle__box{display:block;width:22px;height:15px;position:relative;}
.navtoggle__box span{
  position:absolute;left:0;width:100%;height:2.4px;border-radius:2px;background:var(--red);
  transition:transform .3s var(--ease), opacity .2s linear, top .3s var(--ease);
}
.navtoggle__box span:nth-child(1){top:0;}
.navtoggle__box span:nth-child(2){top:6.3px;}
.navtoggle__box span:nth-child(3){top:12.6px;}
.navtoggle[aria-expanded="true"] .navtoggle__box span:nth-child(1){top:6.3px;transform:rotate(45deg);}
.navtoggle[aria-expanded="true"] .navtoggle__box span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] .navtoggle__box span:nth-child(3){top:6.3px;transform:rotate(-45deg);}

/* ------------------------------------------------- mobile nav (body-level) */
.mobilenav{
  position:fixed;inset:0;z-index:80;
  display:grid;grid-template-rows:auto 1fr;
  background:var(--paper);color:var(--ink);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .42s var(--ease), visibility .42s;
}
body.nav-open .mobilenav{transform:translateY(0);visibility:visible;}
.mobilenav__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);min-height:76px;}
.mobilenav__close{
  width:48px;height:48px;flex:0 0 48px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--red);cursor:pointer;
  transition:background-color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mobilenav__close:hover{background:var(--red-tint);border-color:var(--red);transform:rotate(90deg);}
.mobilenav__close svg{width:20px;height:20px;}
.mobilenav__body{overflow-y:auto;padding:22px 20px 40px;}
.mobilenav__list{list-style:none;margin:0 0 24px;padding:0;}
.mobilenav__list li{border-bottom:1px solid var(--line);}
.mobilenav__link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 4px;text-decoration:none;color:var(--ink);
  font-family:var(--font-head);font-size:1.22rem;font-weight:700;
  transition:color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mobilenav__link:hover,.mobilenav__link[aria-current="page"]{color:var(--red);padding-left:12px;text-decoration:none;}
.mobilenav__link svg{width:17px;height:17px;opacity:.5;color:var(--red);}
.mobilenav__cta{display:grid;gap:12px;}
/* the callback button must stay red/white inside the panel — beat the generic link colour */
.mobilenav .btn{color:#fff;}
.mobilenav .btn--ghost{color:var(--red);}
.mobilenav .btn--ghost:hover{color:#fff;}

/* --------------------------------------------------------------- hero
   Full-bleed photograph behind the copy. The image is a real <img> (not a CSS
   background) so it keeps the 900/1600 srcset and can be fetched at high
   priority; scrims sit above it as pseudo-elements. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);
  color:#fff;
  padding-block:clamp(64px,7vw,124px) clamp(60px,6vw,112px);
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  /* keep the ridge line and sky in frame at every crop */
  object-position:62% 52%;
}
/* scrim 1 — overall darkening so white type always clears AA */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,14,18,.26) 0%,rgba(14,14,18,.19) 42%,rgba(14,14,18,.50) 100%);
}
/* scrim 2 — extra weight behind the copy column, plus a whisper of brand red */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(11,11,14,.62) 0%,rgba(11,11,14,.34) 48%,rgba(11,11,14,.04) 80%),
    radial-gradient(900px 620px at 6% 92%, rgba(196,22,44,.26), transparent 66%);
}
.hero > .wrap{position:relative;z-index:2;}

.hero__grid{display:grid;gap:clamp(30px,3.4vw,54px);align-items:center;}
.hero .eyebrow{color:#fff;}
.hero .eyebrow::before{background:var(--red-lt);width:30px;height:3px;}
.hero h1{color:#fff;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35);}
.hero h1 em{
  font-style:normal;color:#fff;
  /* red is the accent, so the town name gets a red underline rather than red ink,
     which would drop below AA on the photograph */
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-decoration-thickness:5px;
  text-underline-offset:9px;
  text-decoration-skip-ink:none;
}
.hero__lede{
  font-size:clamp(1.02rem,.98rem + .3vw,1.14rem);
  color:rgba(255,255,255,.90);max-width:54ch;margin-bottom:26px;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
}

.hero__chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 24px;padding:0;list-style:none;}
.hero__chips li{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:.83rem;font-weight:600;color:#fff;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero__chips li:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);transform:translateY(-2px);}
.hero__chips svg{width:14px;height:14px;flex:0 0 14px;color:var(--red-lt);}

.hero .btn--ghost{--btn-bg:rgba(255,255,255,.08);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42);}
.hero .btn--ghost:hover{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff;}

.hero__note{margin-top:22px;font-size:.9rem;color:rgba(255,255,255,.72);}
.hero__note a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--red-lt);text-decoration-thickness:2px;}
.hero__note a:hover{color:var(--red-lt);}

/* glass panel — the reassurance column beside the copy */
.hero__panel{
  position:relative;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.20);
  background:rgba(20,20,25,.46);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
  padding:clamp(22px,2.2vw,30px);
}
.hero__panel-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:16px;margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.hero__panel-head svg{width:26px;height:26px;flex:0 0 26px;color:var(--red-lt);}
.hero__panel-head b{display:block;font-family:var(--font-head);font-size:1.02rem;line-height:1.15;color:#fff;}
.hero__panel-head span{display:block;font-size:.76rem;font-weight:600;color:rgba(255,255,255,.66);margin-top:3px;}
.hero__points{list-style:none;margin:0;padding:0;}
.hero__points li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:.94rem;color:rgba(255,255,255,.86);
}
.hero__points li:last-child{border-bottom:0;padding-bottom:0;}
.hero__points svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px;color:var(--red-lt);}
.hero__points strong{color:#fff;font-weight:700;}
.hero__panel-foot{
  display:flex;align-items:center;gap:12px;
  margin-top:18px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero__panel-foot svg{width:20px;height:20px;flex:0 0 20px;color:var(--red-lt);}
.hero__panel-foot span{font-size:.8rem;color:rgba(255,255,255,.62);display:block;line-height:1.35;}
.hero__panel-foot a{
  font-family:var(--font-head);font-weight:800;font-size:1.16rem;color:#fff;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
}
.hero__panel-foot a:hover{color:var(--red-lt);text-decoration:none;}

/* --------------------------------------------------------------- strip */
.strip{background:var(--paper-2);color:var(--ink);border-bottom:1px solid var(--line);}
.strip__inner{
  display:grid;gap:16px 26px;
  padding-block:22px;
  grid-template-columns:minmax(0,1fr);
}
.strip__item{display:flex;align-items:center;gap:12px;font-weight:700;font-family:var(--font-head);font-size:.94rem;}
.strip__item svg{
  width:38px;height:38px;flex:0 0 38px;padding:8px;border-radius:11px;
  background:var(--red-tint);color:var(--red);
}

/* --------------------------------------------------------------- cards */
.grid{display:grid;gap:22px;}
.grid--2{grid-template-columns:minmax(0,1fr);}
.grid--3{grid-template-columns:minmax(0,1fr);}
.grid--4{grid-template-columns:minmax(0,1fr);}

.card{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 24px 24px;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:1;
  background:linear-gradient(90deg,var(--red),var(--red-lt));
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--red-tint-2);}
.card:hover::before{transform:scaleX(1);}
.card h3{margin-bottom:.45em;}
.card h3 a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease);}
.card:hover h3 a{color:var(--red);}
.card p{font-size:.97rem;}

.card__ico{
  width:52px;height:52px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red-tint);color:var(--red);
  margin-bottom:16px;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card__ico svg{width:26px;height:26px;flex:0 0 26px;}
.card:hover .card__ico{background:var(--red);color:#fff;transform:translateY(-2px) rotate(-4deg);}

.card__more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--red);
}
.card__more svg{width:15px;height:15px;transition:transform var(--dur) var(--ease);}
.card:hover .card__more svg{transform:translateX(4px);}
.card__link::after{content:"";position:absolute;inset:0;z-index:2;}
.card__link:hover{text-decoration:none;}

.card--ink{background:var(--ink-2);border-color:var(--line-dk);color:var(--body-dk);}
.card--ink h3{color:#fff;}
.card--ink .card__ico{background:rgba(196,22,44,.22);color:var(--red-lt);}
.card--ink:hover{border-color:rgba(240,89,110,.45);}
.card--ink:hover h3 a{color:var(--red-lt);}

/* photo cards (services on home) */
.pcard{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--red-tint-2);}
/* EVERY service card carries a media block of the same shape — a photograph
   where we have one, a drawn tile swatch where we do not — so the grid never
   mixes tall photo cards with short icon-only cards. */
.pcard__media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--paper-3);}
.pcard__media--tile{
  background-color:var(--paper-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cg fill='none' stroke='%23C4162C' stroke-opacity='0.18' stroke-width='1.1'%3E%3Cpath d='M0 12h40M0 24h40M0 0v12M20 0v12M10 12v12M30 12v12'/%3E%3C/g%3E%3C/svg%3E");
  background-size:40px 24px;
  display:flex;align-items:center;justify-content:center;
}
.pcard__media--tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(255,255,255,.66),rgba(255,255,255,.04) 56%,rgba(196,22,44,.09));
}
.pcard__watermark{
  position:relative;z-index:1;
  width:74px;height:74px;color:var(--red);opacity:.32;
  transition:transform .7s var(--ease), opacity var(--dur) var(--ease);
}
.pcard:hover .pcard__watermark{transform:scale(1.07);opacity:.44;}
.pcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);}
.pcard:hover .pcard__media img{transform:scale(1.06);}
.pcard__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(26,26,31,.35));
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.pcard:hover .pcard__media::after{opacity:1;}
.pcard__body{position:relative;padding:22px;display:flex;flex-direction:column;flex:1;}
.pcard__body h3{margin-bottom:.4em;}
.pcard__body h3 a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease);}
.pcard:hover .pcard__body h3 a{color:var(--red);}
.pcard__body p{font-size:.96rem;margin-bottom:14px;}
.pcard__body .card__more{margin-top:auto;}
/* the badge hangs up over the media block, so it lives in the BODY —
   .pcard__media has overflow:hidden and would clip it off */
.pcard__ico{
  position:absolute;left:18px;top:-23px;z-index:2;
  width:46px;height:46px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;box-shadow:var(--shadow-red);
  transition:transform var(--dur) var(--ease);
}
.pcard__ico svg{width:22px;height:22px;}
.pcard:hover .pcard__ico{transform:translateY(-3px) rotate(-6deg);}
.pcard__media + .pcard__body{padding-top:36px;}

/* numbered steps */
.steps{counter-reset:step;display:grid;gap:18px;}
.step{
  position:relative;padding:24px 24px 22px 74px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:22px;top:23px;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1rem;
  transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--red-tint-2);}
.step:hover::before{transform:scale(1.1);background:var(--red-dk);}
.step h3{font-size:1.1rem;margin-bottom:.35em;}
.step p{font-size:.96rem;margin:0;}

/* --------------------------------------------------------------- split */
/* --------------------------------------------------------------- photo panel */
.shot{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--shadow-2);
  background:var(--paper-3);
  aspect-ratio:4/3;
}
.shot picture{display:block;width:100%;height:100%;}
.shot img{
  width:100%;
  /* height comes from the container's aspect-ratio, never from the file */
  height:100%;
  object-fit:cover;object-position:center;
  display:block;
  transition:transform .8s var(--ease);
}
.shot:hover img{transform:scale(1.04);}
.shot__tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  max-width:calc(100% - 28px);
  padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  color:var(--ink);font-size:.79rem;font-weight:700;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.shot__tag svg{width:14px;height:14px;flex:0 0 14px;color:var(--red);}

.split{display:grid;gap:clamp(28px,3vw,52px);align-items:center;}
.split__media .shot{border-color:var(--line);box-shadow:var(--shadow-2);}
.section--ink .split__media .shot{border-color:rgba(255,255,255,.12);}

/* tick list — grid, not flex, so inline <strong> labels stay inline */
.ticks{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:12px;}
.ticks li{
  position:relative;padding-left:34px;font-size:1rem;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.28em;
  width:22px;height:22px;border-radius:50%;
  background:var(--red);
}
.ticks li::after{
  content:"";position:absolute;left:5.5px;top:.62em;
  width:11px;height:6px;
  border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;
  transform:rotate(-45deg);
}
.ticks strong{color:var(--ink);font-weight:700;}
.section--ink .ticks strong{color:#fff;}

/* service "what's included" panel */
.incl{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px);
  box-shadow:var(--shadow-1);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.incl:hover{box-shadow:var(--shadow-2);border-color:var(--red-tint-2);}
.incl h3{
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin-bottom:16px;
}
.section--paper .incl{background:var(--paper);}
.ticks--2{grid-template-columns:minmax(0,1fr);}
@media (min-width:700px){.ticks--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;}}

/* sticky header clearance for in-page anchors */
[id]{scroll-margin-top:96px;}

.prose{max-width:78ch;}
.prose .lede{max-width:none;}

/* --------------------------------------------------------------- gallery */
.gallery{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);}
.gallery__item{
  margin:0;
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--paper-3);
}
.gallery__item img{
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.gallery__item:hover img{transform:scale(1.06);}
.gallery__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:38px 16px 14px;
  background:linear-gradient(to top,rgba(26,26,31,.9),rgba(26,26,31,0));
  color:#fff;font-size:.9rem;font-weight:600;
  transform:translateY(6px);opacity:.94;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.gallery__item:hover .gallery__cap{transform:translateY(0);opacity:1;}
/* the 2.6:1 letterbox needs its subject held on the centre line once it is
   cropped square-ish like the rest */
.gallery__item picture{display:block;}

/* --------------------------------------------------------------- faq */
.faq{display:grid;gap:12px;max-width:900px;margin-inline:auto;}
.faq__item{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);overflow:hidden;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item:hover{border-color:var(--red-tint-2);box-shadow:var(--shadow-1);}
.faq__item[open]{border-color:var(--red);box-shadow:var(--shadow-1);}
.faq__q{
  display:flex;align-items:flex-start;gap:14px;
  padding:19px 20px;cursor:pointer;list-style:none;
  font-family:var(--font-head);font-weight:700;font-size:1.03rem;color:var(--ink);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq__q::-webkit-details-marker{display:none;}
.faq__q:hover{background:var(--red-tint);color:var(--red);}
.faq__item[open] .faq__q{color:var(--red);}
.faq__q .faq__sign{
  margin-left:auto;flex:0 0 24px;width:24px;height:24px;position:relative;margin-top:2px;
}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--red);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq__sign::before{width:14px;height:2.4px;}
.faq__sign::after{width:2.4px;height:14px;}
.faq__item[open] .faq__sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.faq__a{padding:0 20px 20px;font-size:.99rem;}
.faq__a p{margin-bottom:.8em;}
.faq__a p:last-child{margin-bottom:0;}

/* --------------------------------------------------------------- areas */
.areas{
  list-style:none;margin:0;padding:0;
  display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
.areas li a{
  display:flex;align-items:center;gap:9px;
  padding:13px 15px;border-radius:10px;
  background:var(--paper);border:1px solid var(--line);
  font-size:.95rem;font-weight:600;color:var(--ink);text-decoration:none;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.areas li a::before{
  content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--red);
  transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.areas li a:hover{
  transform:translateY(-3px);border-color:var(--red);
  background:var(--red);color:#fff;box-shadow:var(--shadow-red);text-decoration:none;
}
.areas li a:hover::before{transform:scale(1.5);background:#fff;}

/* --------------------------------------------------------------- map */
.map{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-3);
  min-height:320px;
}
.map iframe{position:relative;z-index:1;display:block;width:100%;height:420px;border:0;}
.map__fallback{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:28px;text-align:center;color:var(--muted);font-size:.94rem;
}
.map__fallback svg{width:36px;height:36px;color:var(--red);}

/* --------------------------------------------------------------- form */
.formcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,34px);
  box-shadow:var(--shadow-2);
}
.form{display:grid;gap:16px;}
.field{display:grid;gap:7px;}
.field label{
  font-family:var(--font-head);font-size:.86rem;font-weight:700;color:var(--ink);
}
.field .req{color:var(--red);}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--paper-2);
  border:1.5px solid var(--line);border-radius:10px;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea{resize:vertical;min-height:130px;}
.field select{appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--red-tint-2);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);background:var(--paper);
  box-shadow:0 0 0 4px rgba(196,22,44,.14);
}
.form__row{display:grid;gap:16px;}
.form__note{font-size:.85rem;color:var(--muted);margin:0;}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}

.alert{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:10px;margin-bottom:18px;
  background:var(--red-tint);border:1px solid var(--red-tint-2);color:var(--red-deep);font-size:.94rem;
}
.alert svg{width:20px;height:20px;flex:0 0 20px;margin-top:1px;}

/* --------------------------------------------------------------- contact tiles */
.contacts{display:grid;gap:14px;}
.contacttile{
  display:flex;align-items:flex-start;gap:14px;min-width:0;
  padding:20px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contacttile > :not(.contacttile__ico){min-width:0;}
.contacttile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--red);text-decoration:none;}
.contacttile__ico{
  width:46px;height:46px;flex:0 0 46px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red-tint);color:var(--red);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.contacttile:hover .contacttile__ico{background:var(--red);color:#fff;}
.contacttile__ico svg{width:22px;height:22px;}
.contacttile b{display:block;font-family:var(--font-head);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px;}
.contacttile span{display:block;font-family:var(--font-head);font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.3;overflow-wrap:anywhere;}
.contacttile span:has(+em),.contacttile span[data-long]{font-size:.98rem;}
.contacttile em{display:block;font-style:normal;font-size:.88rem;color:var(--body);margin-top:3px;overflow-wrap:anywhere;}

/* --------------------------------------------------------------- cta band */
.cta{
  position:relative;isolation:isolate;overflow:hidden;
  /* the one big red area on the page — a deep, settled red rather than the
     flat pillarbox fill, so it reads as brand rather than as a warning */
  background:linear-gradient(145deg,#A81328 0%,#8C1021 52%,#6E0C19 100%);
  color:#fff;
  border-radius:var(--r-xl);
  padding:clamp(36px,3.8vw,64px);
  text-align:center;
  box-shadow:0 22px 54px rgba(122,14,28,.28);
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(720px 380px at 84% 2%, rgba(255,255,255,.13), transparent 64%),
    radial-gradient(560px 340px at 6% 104%, rgba(0,0,0,.26), transparent 66%);
}
.cta .eyebrow{color:rgba(255,255,255,.86);}
.cta .eyebrow::before{background:rgba(255,255,255,.7);}
.cta h2{color:#fff;}
.cta p{max-width:58ch;margin-inline:auto;color:rgba(255,255,255,.86);}
.cta .btn-row{justify-content:center;margin-top:24px;}
.cta .btn{--btn-bg:#fff;--btn-fg:var(--red-deep);--btn-bd:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18);}
.cta .btn:hover{--btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink);}
.cta .btn--on-ink{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5);box-shadow:none;}
.cta .btn--on-ink:hover{--btn-bg:#fff;--btn-fg:var(--red-deep);--btn-bd:#fff;}

/* --------------------------------------------------------------- breadcrumbs */
.crumbs{background:var(--paper-2);border-bottom:1px solid var(--line);}
.crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  list-style:none;margin:0;padding:13px 0;font-size:.85rem;color:var(--muted);
}
.crumbs a{color:var(--body);}
.crumbs a:hover{color:var(--red);}
.crumbs li+li::before{content:"/";margin-right:8px;color:#C9C3C5;}
.crumbs [aria-current="page"]{color:var(--red);font-weight:600;}

/* --------------------------------------------------------------- pagehead */
.pagehead{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--paper);color:var(--body);
  padding-block:clamp(40px,3.6vw,72px);
  border-bottom:1px solid var(--line);
}
.pagehead::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(900px 460px at 92% -10%, rgba(196,22,44,.055), transparent 66%),
    linear-gradient(180deg,#fff,var(--paper-2));
}
.pagehead h1{color:var(--ink);max-width:22ch;}
.pagehead .eyebrow{margin-bottom:16px;}
.pagehead .lede{color:var(--body);}

/* --------------------------------------------------------------- footer */
.footer{background:var(--ink);color:var(--body-dk);padding-block:clamp(44px,3.6vw,68px) 0;}
.footer h4{color:#fff;font-family:var(--font-head);font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;}
.footer__grid{display:grid;gap:34px;}
.footer__brand{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.footer__brand-name{display:block;font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:#fff;line-height:1.1;letter-spacing:-.02em;}
.footer__brand-sub{display:block;font-family:var(--font-head);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--red-lt);font-weight:700;margin-top:4px;}
.footer p{font-size:.95rem;}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.footer__list a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--body-dk);font-size:.95rem;text-decoration:none;
  transition:color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer__list a:hover{color:var(--red-lt);transform:translateX(4px);text-decoration:none;}
.footer__contact{display:grid;gap:14px;}
.footer__contact a{display:flex;align-items:flex-start;gap:11px;color:var(--body-dk);text-decoration:none;transition:color var(--dur) var(--ease);}
.footer__contact a:hover{color:var(--red-lt);}
.footer__contact svg{width:19px;height:19px;flex:0 0 19px;color:var(--red-lt);margin-top:3px;}
.footer__contact b{font-family:var(--font-head);color:#fff;font-weight:700;display:block;font-size:1rem;}
.footer__contact span{display:block;font-size:.86rem;color:#A5A1A6;}
.footer__areas{font-size:.88rem;color:#A5A1A6;line-height:1.75;}
.footer__areas strong{color:#D7D3D6;}
.footer__bottom{
  margin-top:clamp(30px,2.6vw,44px);border-top:1px solid var(--line-dk);
  padding-block:20px 24px;
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;
  font-size:.85rem;color:#9C989E;
}
.footer__bottom a{color:#9C989E;}
.footer__bottom a:hover{color:var(--red-lt);}

/* --------------------------------------------------------------- misc */
.reveal{opacity:0;transform:translateY(18px);}
.reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease), transform .6s var(--ease);}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--red);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;
}
.skip:focus{left:0;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.notfound{text-align:center;max-width:620px;margin-inline:auto;}
.notfound__code{
  font-family:var(--font-head);font-size:clamp(4rem,10vw,7rem);font-weight:800;
  line-height:1;color:var(--red);margin:0 0 8px;
}

/* --------------------------------------------------------------- responsive */
@media (max-width:899px){
  /* A 3:2 landscape covering a tall phone column is cropped to a ~20%-wide
     vertical strip — mostly sky, no roof. So on phones the photograph becomes
     a proper BAND across the top that fades into ink, and the copy sits below
     it on solid ink. The eyebrow overlaps the very bottom of the fade, where
     the scrim is already opaque. */
  .hero{
    --band:clamp(220px,52vw,300px);
    background:var(--ink);
    padding-block:calc(var(--band) - 44px) clamp(40px,8vw,58px);
  }
  .hero__bg{height:var(--band);object-position:50% 52%;}
  .hero::before{
    inset:0 0 auto 0;height:calc(var(--band) + 8px);
    background:linear-gradient(180deg,
      rgba(14,14,18,.20) 0%,
      rgba(14,14,18,.34) 42%,
      rgba(14,14,18,.86) 82%,
      var(--ink) 100%);
  }
  .hero::after{
    background:radial-gradient(720px 520px at 6% 78%, rgba(196,22,44,.22), transparent 66%);
  }
  .hero__lede{font-size:1rem;margin-bottom:22px;}
  .hero__chips{gap:8px;margin-bottom:20px;}
  .hero__chips li{padding:7px 12px;font-size:.79rem;}
  /* target the <em> itself — it sets these directly, so an inherited value loses */
  .hero h1 em{text-underline-offset:7px;text-decoration-thickness:4px;}
  .hero__panel{margin-top:6px;padding:20px;background:rgba(255,255,255,.05);}
  .hero__points li{padding:11px 0;font-size:.9rem;}
}
@media (min-width:560px){
  .form__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .strip__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .gallery{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .contacts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
@media (min-width:760px){
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .header__tel{display:flex;}
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .split--flip .split__media{order:2;}
  .strip__inner{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:20px;}
  .footer__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);}
  .contacts{grid-template-columns:minmax(0,1fr);}
}
@media (min-width:1000px){
  .navtoggle{display:none;}
  .nav{display:block;}
  .header__cta{display:inline-flex;}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:1100px){
  .contacts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .split .contacts{grid-template-columns:minmax(0,1fr);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none;}
}

@media print{
  .header,.mobilenav,.footer,.cta,.navtoggle{display:none !important;}
  body{color:#000;}
}