/* ==========================================================================
   Earlybird Roofing & Home Improvements
   Design system rebuilt from the live WordPress/Elementor site.

   Display : Roboto Slab 700/800   (hero + all section headings)
   UI/body : Saira 400/500/600/700 (nav, buttons, counters, body copy)
   Accent  : #F23E01 orange
   Device  : the orange diagonal hatch bar, carried through every section
   ========================================================================== */

:root{
  --orange:      #F23E01;
  --orange-dark: #C63201;
  --orange-soft: #FFF1EC;
  --red:         #E23125;
  --ink:         #111111;
  --ink-2:       #15171D;
  --ink-3:       #23262E;
  --body:        #4A4A4A;
  --muted:       #6E6E6E;
  --paper:       #FFFFFF;
  --tint:        #F5F4F2;
  --blush:       #F9E0E2;
  --line:        #E4E2DF;

  --display: "Roboto Slab", Georgia, serif;
  --ui: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--ui);
  font-size:16.5px;
  line-height:1.72;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--orange); text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.3rem, 5.2vw, 4.05rem); font-weight:700; }
h2{ font-size:clamp(1.85rem, 3.5vw, 2.85rem); }
h3{ font-size:clamp(1.15rem, 1.8vw, 1.4rem); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(56px, 7vw, 104px); }
.section--tint{ background:var(--tint); }
.section--ink{ background:var(--ink); color:#C9C9C9; }
.section--ink h2,.section--ink h3{ color:#fff; }

/* --- the signature device: orange diagonal hatch ------------------------ */
.hatch{
  display:block; width:132px; height:13px; margin:0 0 22px;
  background:repeating-linear-gradient(115deg,
    var(--orange) 0 5px, transparent 5px 11px);
}
.hatch--c{ margin-inline:auto; }
.hatch--sm{ width:86px; height:10px; margin-bottom:16px; }
.hatch--light{
  background:repeating-linear-gradient(115deg,
    #fff 0 5px, transparent 5px 11px);
}

/* hatch as a list marker */
.ticks{ list-style:none; margin:0 0 1.3em; padding:0; }
.ticks li{
  position:relative; padding-left:30px; margin-bottom:9px; line-height:1.62;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em; width:18px; height:8px;
  background:repeating-linear-gradient(115deg,
    var(--orange) 0 3px, transparent 3px 7px);
}
.section--ink .ticks li::before{
  background:repeating-linear-gradient(115deg,
    var(--orange) 0 3px, transparent 3px 7px);
}
.ticks--2{ columns:2; column-gap:34px; }
@media (max-width:640px){ .ticks--2{ columns:1; } }

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ui); font-weight:600; font-size:1rem; letter-spacing:.01em;
  padding:15px 30px; border:0; border-radius:3px; cursor:pointer;
  white-space:nowrap;
  background:var(--orange); color:#fff;
  transition:background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn:hover{ background:var(--orange-dark); transform:translateY(-2px); box-shadow:0 9px 22px rgba(242,62,1,.28); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.btn--ink{ background:var(--ink); }
.btn--ink:hover{ background:#000; box-shadow:0 9px 22px rgba(0,0,0,.3); }
.btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.65); }
.btn--ghost:hover{ background:#fff; color:var(--ink); box-shadow:inset 0 0 0 2px #fff; }
.btn--pill{ border-radius:999px; padding:13px 30px; }
.btn--lg{ padding:18px 38px; font-size:1.06rem; }
.btn__ico{ width:17px; height:17px; flex:none; }

/* --- top utility bar ---------------------------------------------------- */
.topbar{
  background:var(--ink); color:#B9B9B9;
  font-size:.85rem; letter-spacing:.01em;
}
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center;
  justify-content:space-between; min-height:42px; padding-block:7px; }
.topbar a{ color:#fff; font-weight:500; }
.topbar a:hover{ color:var(--orange); }
.topbar__l{ display:flex; align-items:center; gap:9px; }
.topbar__r{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.topbar svg{ width:14px; height:14px; flex:none; color:var(--orange); }
@media (max-width:760px){ .topbar__l{ display:none; } .topbar .wrap{ justify-content:center; } }

/* --- header ------------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.hdr .wrap{ display:flex; align-items:center; gap:22px; min-height:80px; }
.hdr__logo{ flex:none; display:block; }
.hdr__logo img{ height:52px; width:auto; }
.hdr__nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.hdr__nav a{
  font-family:var(--ui); font-size:.95rem; font-weight:500; color:var(--ink);
  padding:10px 14px; border-radius:3px; position:relative;
  transition:color .2s var(--ease);
}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{ color:var(--orange); }
.hdr__nav a[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:6px;
  background:repeating-linear-gradient(115deg, var(--orange) 0 3px, transparent 3px 7px);
}
.hdr__cta{ margin-left:12px; }
.hdr__burger{
  display:none; margin-left:auto; width:46px; height:46px; border:1px solid var(--line);
  border-radius:4px; background:#fff; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.hdr__burger span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.hdr__burger span::before,.hdr__burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
}
.hdr__burger span::before{ top:-6px; } .hdr__burger span::after{ top:6px; }

/* services dropdown */
.drop{ position:relative; }
.drop__btn{
  display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer;
  font-family:var(--ui); font-size:.95rem; font-weight:500; color:var(--ink);
  padding:10px 14px; border-radius:3px;
}
.drop__btn:hover{ color:var(--orange); }
.drop__btn svg{ width:10px; height:10px; transition:transform .2s var(--ease); }
.drop[data-open="true"] .drop__btn svg{ transform:rotate(180deg); }
.drop__menu{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:310px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--orange);
  box-shadow:0 18px 44px rgba(0,0,0,.13); padding:8px; border-radius:0 0 4px 4px;
  opacity:0; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.drop[data-open="true"] .drop__menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.drop__menu a{
  display:block; padding:10px 14px; font-size:.9rem; font-weight:500;
  border-radius:3px; line-height:1.35;
}
.drop__menu a:hover{ background:var(--orange-soft); color:var(--orange); }

@media (max-width:1080px){
  .hdr__burger{ display:flex; }
  .hdr__nav{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:0 20px 40px rgba(0,0,0,.12);
    flex-direction:column; align-items:stretch; gap:0; padding:10px var(--gut) 22px;
    display:none;
  }
  .hdr__nav[data-open="true"]{ display:flex; }
  .hdr__nav a,.drop__btn{ padding:13px 4px; width:100%; text-align:left; justify-content:space-between; }
  .hdr__nav a[aria-current="page"]::after{ left:4px; right:auto; width:60px; }
  .drop{ border-top:1px solid var(--line); }
  .drop__menu{
    position:static; transform:none; opacity:1; visibility:visible; min-width:0;
    box-shadow:none; border:0; border-left:3px solid var(--orange); border-radius:0;
    padding:0 0 8px 12px; margin-bottom:6px; display:none;
  }
  .drop[data-open="true"] .drop__menu{ display:block; transform:none; }
  .hdr__cta{ margin:14px 0 0; justify-content:center; }
}

/* --- hero --------------------------------------------------------------- */
.hero{ position:relative; background:var(--ink-2); overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; background:url("../img/slide1.webp") center/cover no-repeat;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(10,10,12,.9) 0%, rgba(10,10,12,.74) 42%, rgba(10,10,12,.34) 100%);
}
.hero .wrap{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,64px);
  align-items:center; padding-block:clamp(52px,6.5vw,96px); }
.hero__copy{ color:#EDEDED; max-width:640px; }
.hero h1{ color:#fff; text-shadow:0 2px 22px rgba(0,0,0,.4); margin-bottom:22px; }
.hero__eyebrow{
  display:inline-block; font-family:var(--ui); font-weight:600; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:16px;
}
.hero__flag{
  display:inline-flex; align-items:center; gap:11px; background:var(--orange); color:#fff;
  font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,1.9vw,1.35rem);
  padding:11px 24px; border-radius:3px; margin-bottom:22px;
}
.hero__flag svg{ width:20px; height:20px; }
.hero__sub{ font-size:1.06rem; line-height:1.72; color:#DCDCDC; max-width:560px; margin-bottom:28px; }
.hero__badges{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero__badges img{ height:82px; width:auto; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)); }

/* hero form panel */
.hform{ background:rgba(17,17,17,.95); border:1px solid rgba(255,255,255,.1);
  border-top:4px solid var(--orange); padding:26px 26px 28px; border-radius:3px;
  box-shadow:0 26px 60px rgba(0,0,0,.42); }
.hform h2{ font-family:var(--ui); font-weight:600; font-size:1.5rem; color:#fff;
  text-align:center; margin-bottom:18px; }

@media (max-width:960px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero__copy{ max-width:none; }
  .hero__badges img{ height:66px; }
}

/* --- forms -------------------------------------------------------------- */
.field{ margin-bottom:11px; }
.field label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--ui); font-size:.95rem; color:var(--ink);
  background:var(--blush); border:1px solid transparent; border-radius:2px;
  padding:13px 15px; transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ min-height:104px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#9A7F82; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; background:#fff; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(242,62,1,.18);
}
.field--err input,.field--err textarea{ border-color:var(--red); box-shadow:0 0 0 3px rgba(226,49,37,.16); }
.field__msg{ display:none; font-size:.8rem; color:var(--red); margin-top:5px; font-weight:500; }
.field--err .field__msg{ display:block; }
.form__submit{ width:100%; justify-content:center; margin-top:6px; }
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }
.form__note{ font-size:.78rem; color:#8C8C8C; text-align:center; margin-top:11px; line-height:1.5; }
.hform .form__note{ color:#8A8A8A; }
.form__err{ font-size:.82rem; color:var(--red); font-weight:500; margin:0 0 10px; line-height:1.5; }
.form__err:empty{ display:none; }

/* reCAPTCHA v2 checkbox. Google's iframe is a fixed 304px, so on narrow form
   columns it is scaled down rather than allowed to blow out the layout. */
.g-recaptcha{ margin:4px 0 12px; }
@media (max-width:360px){
  .g-recaptcha{ transform:scale(.87); transform-origin:0 0; height:68px; }
}

/* light form (used on tinted / white sections) */
.form--light .field input,.form--light .field textarea{ background:#fff; border-color:var(--line); }
.form--light .field input:focus,.form--light .field textarea:focus{ border-color:var(--orange); }

/* --- stat bar ----------------------------------------------------------- */
.stats{ background:var(--orange); padding-block:0; }
.stats .wrap{ padding-block:0; }
.stats__inner{
  background:var(--ink); margin-block:-1px; padding:30px clamp(20px,4vw,56px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center;
  transform:translateY(-26px); box-shadow:0 18px 44px rgba(0,0,0,.2);
}
.stat__label{ font-family:var(--display); font-size:.9rem; color:#fff; font-weight:400; }
.stat__num{ font-family:var(--ui); font-weight:600; font-size:clamp(2rem,3.4vw,2.6rem); color:var(--orange); line-height:1.2; }
.stat__cap{ font-family:var(--ui); font-size:.87rem; letter-spacing:.09em; text-transform:uppercase; color:#fff; }
@media (max-width:720px){
  .stats__inner{ grid-template-columns:1fr; gap:22px; transform:translateY(-18px); }
}

/* --- about (asymmetric, overlapping images) ----------------------------- */
.about__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,5vw,72px); align-items:center; }
.about__media{ position:relative; padding-bottom:74px; padding-left:26px; }
.about__media::before{
  content:""; position:absolute; left:0; top:24px; bottom:98px; width:6px;
  background:repeating-linear-gradient(180deg, var(--orange) 0 7px, transparent 7px 15px);
}
.about__media img:first-child{ border-radius:2px; box-shadow:0 16px 40px rgba(0,0,0,.14); }
.about__media img:last-child{
  position:absolute; right:-14px; bottom:0; width:62%;
  border:7px solid #fff; border-radius:2px; box-shadow:0 18px 44px rgba(0,0,0,.18);
}
@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ padding-bottom:56px; }
  .about__media img:last-child{ width:56%; right:0; }
}

/* --- why choose us ------------------------------------------------------ */
.why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why__card{
  background:#fff; border:1px solid var(--line); border-radius:3px; padding:32px 22px 28px;
  text-align:center; position:relative; overflow:hidden;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.why__card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:repeating-linear-gradient(115deg, var(--orange) 0 4px, transparent 4px 9px);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.why__card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.1); border-color:#D8D5D1; }
.why__card:hover::after{ transform:scaleX(1); }
.why__ico{
  width:62px; height:62px; margin:0 auto 18px; border-radius:50%; background:var(--orange);
  display:grid; place-items:center; color:#fff;
}
.why__ico svg{ width:29px; height:29px; }
.why__card h3{
  font-family:var(--ui); font-size:.95rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink); margin:0; line-height:1.45;
}
@media (max-width:940px){ .why__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .why__grid{ grid-template-columns:1fr; } }

/* --- process (editorial numerals, alternating) -------------------------- */
.proc{ display:grid; gap:0; }
.proc__row{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,4vw,52px);
  align-items:start; padding-block:clamp(26px,3.4vw,40px);
  border-bottom:1px solid var(--line);
}
.proc__row:first-child{ border-top:1px solid var(--line); }
.proc__n{
  font-family:var(--display); font-weight:700; font-size:clamp(3.2rem,7vw,5.6rem);
  line-height:.86; color:transparent;
  -webkit-text-stroke:2px var(--orange);
  min-width:2.1ch;
}
.proc__row:nth-child(even) .proc__n{ color:var(--orange); -webkit-text-stroke:0; }
.proc__body h3{ font-size:clamp(1.3rem,2.2vw,1.72rem); margin-bottom:10px; }
.proc__body p{ max-width:66ch; }
@media (max-width:620px){
  .proc__row{ grid-template-columns:1fr; gap:8px; }
}

/* --- quote band (orange, full bleed w/ art) ----------------------------- */
.qband{ background:var(--orange); position:relative; overflow:hidden; color:#fff; }
.qband .wrap{ position:relative; display:grid; grid-template-columns:.8fr 1.2fr;
  gap:clamp(20px,4vw,56px); align-items:center; padding-block:clamp(40px,5vw,66px); }
.qband__art img{ max-width:340px; }
.qband h2{ color:#fff; margin-bottom:12px; }
.qband p{ color:rgba(255,255,255,.94); max-width:60ch; margin-bottom:24px; }
.qband__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.qband .btn--ink{ background:var(--ink); }
.qband__phone{
  display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--ink);
  font-family:var(--ui); font-weight:600; font-size:1.06rem; padding:15px 28px; border-radius:3px;
  white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.qband__phone:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.22); color:var(--ink); }
.qband__phone svg{ width:18px; height:18px; color:var(--orange); }
@media (max-width:860px){
  .qband .wrap{ grid-template-columns:1fr; }
  .qband__art{ display:none; }
}

/* --- services grid ------------------------------------------------------ */
.svcs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc{
  display:block; background:#fff; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; color:var(--ink);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.svc__img{ aspect-ratio:16/10; overflow:hidden; background:var(--tint); }
.svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.svc:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.13); border-color:#D8D5D1; }
.svc:hover .svc__img img{ transform:scale(1.06); }
.svc__body{ padding:18px 18px 20px; text-align:center; }
.svc__body h3{
  font-family:var(--ui); font-size:.93rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--orange); margin:0 0 8px; line-height:1.42;
}
.svc__more{
  display:inline-flex; align-items:center; gap:7px; font-size:.83rem; font-weight:600;
  color:var(--ink); letter-spacing:.04em;
}
.svc__more svg{ width:12px; height:12px; transition:transform .22s var(--ease); }
.svc:hover .svc__more svg{ transform:translateX(4px); }
.svc:hover .svc__more{ color:var(--orange); }
@media (max-width:900px){ .svcs__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .svcs__grid{ grid-template-columns:1fr; } }

/* services header row (heading left, mark right) */
.svcs__head{ display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center;
  margin-bottom:38px; }
.svcs__head img{ width:104px; opacity:.9; }
@media (max-width:620px){ .svcs__head{ grid-template-columns:1fr; gap:14px; } .svcs__head img{ width:78px; } }

/* --- offer band --------------------------------------------------------- */
.offer{ background:var(--ink); color:#CFCFCF; position:relative; overflow:hidden; }
.offer::before{
  content:""; position:absolute; inset:0;
  background:url("../img/authorised-repairer.jpg") center/cover no-repeat;
  opacity:.10; filter:grayscale(1);
}
.offer h2,.offer h3{ color:#fff; }
.offer p{ color:#DEDEDE; }
.offer .wrap{ position:relative; display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(26px,4vw,60px); align-items:center; }
.offer__tag{
  display:inline-block; font-family:var(--ui); font-weight:700; font-size:.8rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-bottom:14px;
}
.offer h2{ font-size:clamp(2rem,4.4vw,3.3rem); margin-bottom:16px; }
.offer h2 em{ font-style:normal; color:var(--orange); }
.offer__list{ margin-top:22px; }
.offer__list li{ color:#DADADA; }
.offer__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
@media (max-width:860px){ .offer .wrap{ grid-template-columns:1fr; } }

/* --- reviews ------------------------------------------------------------ */
.revs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rev{
  background:#fff; border:1px solid var(--line); border-radius:3px; padding:24px 22px 26px;
  display:flex; flex-direction:column;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.rev:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.1); }
.rev__top{ display:flex; align-items:center; gap:11px; margin-bottom:4px; }
.rev__top img{ width:24px; height:24px; }
.rev__name{ font-family:var(--ui); font-weight:600; color:var(--ink); font-size:1.02rem; }
.rev__stars{ color:var(--orange); letter-spacing:2px; font-size:.86rem; margin-bottom:10px; }
.rev__title{ font-family:var(--ui); font-weight:600; color:var(--ink); font-size:.95rem; margin-bottom:9px; }
.rev__body{ font-size:.93rem; font-style:italic; color:var(--muted); line-height:1.68; margin:0; }
@media (max-width:900px){ .revs__grid{ grid-template-columns:1fr; } }

/* --- works gallery (full bleed, varied cells) --------------------------- */
.works__grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:12px;
}
.works__grid a{ overflow:hidden; border-radius:2px; background:var(--tint); display:block; }
.works__grid img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.works__grid a:hover img{ transform:scale(1.07); }
.works__grid a:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.works__grid a:nth-child(6){ grid-column:span 2; }
@media (max-width:860px){
  .works__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .works__grid a:nth-child(1){ grid-column:span 2; grid-row:span 1; }
}

/* --- FAQ (sticky heading left, accordion right) ------------------------- */
.faq__grid{ display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(26px,5vw,68px); align-items:start; }
.faq__aside{ position:sticky; top:110px; }
@media (max-width:900px){
  .faq__grid{ grid-template-columns:1fr; }
  .faq__aside{ position:static; }
}
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:clamp(1rem,1.5vw,1.14rem);
  color:var(--ink); padding:20px 44px 20px 0; position:relative; line-height:1.45;
  transition:color .2s var(--ease);
}
.acc__btn:hover{ color:var(--orange); }
.acc__btn::after,.acc__btn::before{
  content:""; position:absolute; right:8px; top:50%; background:var(--orange);
  transition:transform .26s var(--ease), opacity .26s var(--ease);
}
.acc__btn::before{ width:15px; height:3px; margin-top:-1.5px; }
.acc__btn::after{ width:3px; height:15px; right:14px; margin-top:-7.5px; }
.acc__item[data-open="true"] .acc__btn::after{ transform:rotate(90deg); opacity:0; }
.acc__panel{ overflow:hidden; height:0; transition:height .3s var(--ease); }
.acc__inner{ padding:0 0 22px; max-width:74ch; }
@media (prefers-reduced-motion: reduce){ .acc__panel{ transition:none; } }

/* --- service areas ------------------------------------------------------ */
.areas__list{
  display:flex; flex-wrap:wrap; gap:9px 10px; margin-top:26px; padding:0; list-style:none;
}
.areas__list li{
  font-family:var(--ui); font-size:.87rem; font-weight:500; color:var(--body);
  background:#fff; border:1px solid var(--line); border-radius:2px; padding:7px 14px;
}
.section--tint .areas__list li{ background:#fff; }

/* --- split contact ------------------------------------------------------ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.split__form{ background:var(--ink); padding:clamp(30px,4.5vw,56px); }
.split__form h2{ color:#fff; }
.split__info{
  background:var(--orange); color:#fff; padding:clamp(30px,4.5vw,56px);
  display:flex; flex-direction:column; justify-content:center;
}
.split__info h2{ color:#fff; }
.split__info a{ color:#fff; }
.info__row{ display:flex; gap:15px; align-items:flex-start; margin-bottom:24px; }
.info__row:last-child{ margin-bottom:0; }
.info__ico{
  width:44px; height:44px; flex:none; border-radius:50%; background:rgba(255,255,255,.18);
  display:grid; place-items:center; color:#fff;
}
.info__ico svg{ width:19px; height:19px; }
.info__k{ font-family:var(--ui); font-weight:600; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:2px; }
.info__v{ font-family:var(--display); font-weight:700; font-size:1.14rem; color:#fff; word-break:break-word; }
.info__v a:hover{ text-decoration:underline; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

/* --- page hero (inner pages) -------------------------------------------- */
.phero{ position:relative; background:var(--ink-2); overflow:hidden; }
.phero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.phero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(92deg, rgba(10,10,12,.9) 0%, rgba(10,10,12,.72) 60%, rgba(10,10,12,.5) 100%); }
.phero .wrap{ position:relative; padding-block:clamp(50px,6vw,88px); }
.phero h1{ color:#fff; font-size:clamp(1.95rem,4.2vw,3.25rem); margin-bottom:14px; max-width:20ch; }
.phero__sub{ color:#DCDCDC; font-size:1.06rem; max-width:62ch; margin:0; }
.crumb{ font-size:.83rem; color:#A9A9A9; margin-bottom:16px; font-weight:500; }
.crumb a{ color:#D8D8D8; }
.crumb a:hover{ color:var(--orange); }
.crumb span{ color:var(--orange); }

/* --- article layout (service pages) ------------------------------------- */
.artgrid{ display:grid; grid-template-columns:1.42fr .58fr; gap:clamp(28px,4.5vw,62px); align-items:start; }
@media (max-width:940px){ .artgrid{ grid-template-columns:1fr; } }
.prose h2{ margin-top:1.9em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:1.6em; font-size:1.2rem; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose .lead{ font-size:1.1rem; line-height:1.72; color:#3D3D3D; }
.aside{ position:sticky; top:110px; }
.aside__form{ background:var(--ink); border-top:4px solid var(--orange); padding:26px 24px 28px; border-radius:3px; }
.aside__form h2{ font-family:var(--ui); font-weight:600; font-size:1.32rem; color:#fff; margin-bottom:6px; }
.aside__form p{ font-size:.88rem; color:#A8A8A8; margin-bottom:16px; }
.aside__call{
  margin-top:18px; background:var(--orange-soft); border:1px solid #FBD4C6; border-radius:3px;
  padding:20px; text-align:center;
}
.aside__call .info__k{ color:var(--muted); }
.aside__call .info__v{ color:var(--ink); font-size:1.3rem; }
.aside__call .info__v a{ color:var(--ink); }

/* related services */
.rel__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .rel__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .rel__grid{ grid-template-columns:1fr; } }

/* --- footer ------------------------------------------------------------- */
.ftr{ background:var(--ink); color:#A5A5A5; padding-block:clamp(46px,5vw,72px) 0; font-size:.93rem; }
.ftr__grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1.1fr; gap:clamp(24px,3.4vw,48px); }
.ftr h3{
  font-family:var(--ui); font-size:.84rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:#fff; margin-bottom:18px;
}
.ftr__logo img{ height:58px; width:auto; margin-bottom:18px; }
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr li{ margin-bottom:9px; line-height:1.5; }
.ftr a{ color:#A5A5A5; }
.ftr a:hover{ color:var(--orange); }
.ftr__bot{
  margin-top:clamp(34px,4vw,54px); border-top:1px solid rgba(255,255,255,.12);
  padding-block:20px; display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between;
  font-size:.85rem; color:#8A8A8A;
}
@media (max-width:900px){ .ftr__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .ftr__grid{ grid-template-columns:1fr; } }

/* --- misc --------------------------------------------------------------- */
.eyebrow{
  display:block; font-family:var(--ui); font-weight:600; font-size:.8rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--orange); margin-bottom:12px;
}
.lead{ font-size:1.08rem; }
.center{ text-align:center; }
.center .hatch{ margin-inline:auto; }
.mw{ max-width:62ch; }
.mw-c{ max-width:64ch; margin-inline:auto; }
.mt-l{ margin-top:32px; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--orange); color:#fff;
  padding:12px 20px; z-index:200; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

.tocall{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:var(--orange); color:#fff; text-align:center; padding:14px;
  font-family:var(--ui); font-weight:600; font-size:1.02rem;
  box-shadow:0 -6px 20px rgba(0,0,0,.18);
}
.tocall:hover{ color:#fff; }
@media (max-width:680px){
  .tocall{ display:block; }
  body{ padding-bottom:56px; }
}

/* thank-you */
.ty{ text-align:center; max-width:64ch; margin-inline:auto; padding-block:clamp(60px,8vw,120px); }
.ty__ico{ width:84px; height:84px; margin:0 auto 26px; border-radius:50%; background:var(--orange);
  display:grid; place-items:center; color:#fff; }
.ty__ico svg{ width:40px; height:40px; }