/* ═══════════════════════════════════════════════════
   INSPECTOR TEMPLATE — stylesheet

   TO REBRAND A CLIENT: change the colours in :root
   below. Nothing else in this file needs editing.

   Note there are TWO golds. --gold is for icons,
   borders and fills. --gold-text is a darker version
   used anywhere gold appears as readable text; the
   lighter one fails contrast on the cream background.
   If you change one, change both.
   ═══════════════════════════════════════════════════ */

:root{
  --navy:#0A1628;
  --gold:#C8933E;              /* decorative only — icons, borders, fills */
  --gold-text:#8A6420;         /* gold for TEXT — passes contrast on cream */
  --gold-light:rgba(200,147,62,.08);--gold-glow:rgba(200,147,62,.05);
  --white:#FDFAF5;--surface:#F6F0E4;
  --text:#2A3444;--text-2:#556070;
  --text-3:#646E7D;            /* darkened from #8A95A5 for readability */
  --border:rgba(0,0,0,.06);--green:#2D7A3A;
  --ease:cubic-bezier(.25,.46,.45,.94);--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-sharp:cubic-bezier(.2,.9,.25,1);
  --gutter:2rem;
  --wrap:1060px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:70px}
body{font-family:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
::selection{background:var(--gold);color:#fff}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 18px;z-index:2000;border-radius:0 0 8px 0;font-size:.85rem;font-weight:600}
.skip:focus{left:0}

/* ── Chrome ───────────────────────────────────────── */
.scroll-prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold),#DAAB58);z-index:1001;width:0}

/* ── Nav ──────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:1000;background:rgba(253,250,245,.88);backdrop-filter:saturate(200%) blur(20px);-webkit-backdrop-filter:saturate(200%) blur(20px);border-bottom:.5px solid var(--border);transition:box-shadow .3s,transform .4s var(--ease)}
nav.scrolled{box-shadow:0 1px 10px rgba(0,0,0,.04)}
nav.hidden{transform:translateY(-100%)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:60px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.2rem;color:var(--navy);text-decoration:none;letter-spacing:-.02em;transition:opacity .3s;flex-shrink:0}
.logo:hover{opacity:.7}
.logo span{color:var(--gold-text)}
.logo-img{height:32px;width:auto;display:block}
.foot-brand .logo-img{height:34px}
.nav-links{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.nav-links a{font-size:.82rem;font-weight:500;color:var(--text-2);text-decoration:none;transition:color .25s;position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.nav-links a:hover{color:var(--navy)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--navy);font-weight:600}
.nav-r{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.nav-tel{font-weight:600;font-size:.85rem;color:var(--text);text-decoration:none;transition:color .3s;white-space:nowrap}
.nav-tel:hover{color:var(--gold-text)}
.nav-cta{background:var(--navy);color:#fff;padding:9px 20px;border-radius:980px;font-size:.8rem;font-weight:600;text-decoration:none;transition:all .3s var(--ease);white-space:nowrap}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(10,22,40,.15)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.burger span{display:block;width:20px;height:1.5px;background:var(--navy);transition:transform .3s var(--ease),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.drawer{display:none;position:fixed;inset:60px 0 0 0;background:var(--white);z-index:999;padding:1.5rem var(--gutter);flex-direction:column;gap:.25rem;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease-out)}
.drawer.open{opacity:1;transform:translateY(0);pointer-events:auto}
.drawer a{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:var(--navy);text-decoration:none;padding:.75rem 0;border-bottom:1px solid var(--border)}

/* ── Buttons ──────────────────────────────────────── */
.btn-dark{background:var(--navy);color:#fff;padding:14px 30px;border-radius:980px;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .35s var(--ease);border:none;cursor:pointer;position:relative;overflow:hidden}
.btn-dark::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.08);transform:translate(-50%,-50%);transition:width .5s var(--ease-out),height .5s var(--ease-out)}
.btn-dark:hover::before{width:300px;height:300px}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(10,22,40,.16)}
.btn-dark svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .3s}
.btn-dark:hover svg{transform:translateX(3px)}
.btn-gold{background:var(--gold);color:#fff;padding:14px 30px;border-radius:980px;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .35s var(--ease);border:none;cursor:pointer}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(200,147,62,.28)}
.btn-gold svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}
.btn-ghost{color:var(--text);padding:14px 20px;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .3s;background:none;border:none;cursor:pointer;font-family:inherit}
.btn-ghost:hover{color:var(--gold-text)}
.btn-ghost svg{width:14px;height:14px;stroke:var(--gold);stroke-width:2;fill:none}

/* ── Section furniture ────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 var(--gutter)}
.sec{padding:4.5rem 0}
.sec-alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec-label{font-size:.7rem;font-weight:700;color:var(--gold-text);letter-spacing:.09em;text-transform:uppercase;margin-bottom:.5rem}
.sec-heading{font-family:'Archivo',sans-serif;font-size:clamp(1.4rem,2.8vw,1.85rem);color:var(--navy);margin-bottom:2rem;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.centered{text-align:center}
.centered .sec-heading{margin-left:auto;margin-right:auto}
.lede{font-size:.95rem;color:var(--text-2);line-height:1.7;max-width:560px}
.centered .lede{margin-left:auto;margin-right:auto}

/* Reveal — one class, applied by app.js */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease-sharp),transform .75s var(--ease-sharp)}
.reveal.in{opacity:1;transform:none}
/* Directional variants — motion that matches where the element belongs */
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .8s var(--ease-sharp),transform .8s var(--ease-sharp)}
.reveal-left.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.955);transition:opacity .8s var(--ease-sharp),transform .8s var(--ease-out)}
.reveal-scale.in{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}

/* ── Home hero ────────────────────────────────────── */
.hero{padding-block:3.25rem 3.75rem;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}
.hero h1{font-family:'Archivo',sans-serif;font-size:clamp(2rem,4.2vw,2.9rem);font-weight:700;line-height:1.06;letter-spacing:-.035em;color:var(--navy);margin-bottom:1.25rem}
.hero h1 em{font-style:normal;position:relative}
.hero h1 em::after{content:'';position:absolute;bottom:2px;left:0;right:0;height:3px;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:left;animation:drawLine .8s var(--ease-sharp) 1s forwards}
@keyframes drawLine{to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:translateX(0)}}
.hero-content>*{opacity:0;animation:rise .8s var(--ease-sharp) forwards}
.hero-badge{animation-delay:.05s}
.hero-content h1{animation-delay:.18s}
.hero-sub{font-size:.95rem;color:var(--text-2);line-height:1.65;margin-bottom:1.6rem;max-width:440px;animation-delay:.34s}
.hero-ctas{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;animation-delay:.5s}
.hero-img{position:relative;overflow:hidden;border-radius:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.1);opacity:0;
  animation:slideInRight .9s var(--ease-sharp) .15s forwards}
.hero-img img{width:100%;height:auto;aspect-ratio:4/3.4;max-height:420px;
  object-fit:cover;object-position:center 25%;display:block;
  transform:scale(1.1) translate3d(0,0,0);will-change:transform}

/* ── Inner page hero ──────────────────────────────── */
.page-hero{padding-block:3.75rem 2.75rem;border-bottom:1px solid var(--border);text-align:center}
.page-hero h1{font-family:'Archivo',sans-serif;font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700;line-height:1.08;letter-spacing:-.032em;color:var(--navy);margin:0 auto .95rem;max-width:none}

/* ── Credential strip ─────────────────────────────── */
.creds-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:900px;margin:0 auto}
.cred-card{background:var(--white);border:1px solid rgba(10,22,40,.13);border-radius:16px;padding:1.6rem 1rem;text-align:center;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.cred-card:hover{transform:translateY(-3px);border-color:rgba(10,22,40,.28);box-shadow:0 8px 24px rgba(10,22,40,.07)}
.cred-ico{width:40px;height:40px;border-radius:50%;background:var(--gold-light);display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;transition:transform .4s var(--ease-spring)}
.cred-card:hover .cred-ico{transform:scale(1.1) rotate(-5deg)}
.cred-ico svg{width:18px;height:18px;stroke:var(--gold);stroke-width:1.8;fill:none}
.cred-card h3{font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:.15rem}
.cred-card p{font-size:.65rem;color:var(--text-3);font-weight:500}

/* ── Quote form ───────────────────────────────────── */
.form-card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:2.25rem;box-shadow:0 1px 2px rgba(0,0,0,.03),0 16px 48px rgba(0,0,0,.05);max-width:520px;margin:0 auto}
.form-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.15rem;padding-bottom:.85rem;border-bottom:1px solid var(--border)}
.form-top h2{font-family:'Archivo',sans-serif;font-size:1.05rem;color:var(--navy);font-weight:700;letter-spacing:-.02em}
.form-badge{background:rgba(45,122,58,.06);color:var(--green);font-size:.575rem;font-weight:700;padding:3px 9px;border-radius:100px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.ff{display:flex;flex-direction:column;gap:.55rem}
.ff label{font-size:.65rem;font-weight:700;color:var(--text-3);letter-spacing:.07em;text-transform:uppercase}
.ff input,.ff select{border:1px solid rgba(0,0,0,.07);border-radius:10px;padding:11px 13px;font-size:.85rem;font-family:inherit;background:var(--surface);transition:border-color .3s,background .3s,box-shadow .3s;outline:none;color:var(--text);width:100%}
.ff input:focus,.ff select:focus{border-color:var(--gold);background:var(--white);box-shadow:0 0 0 3px var(--gold-light)}
.ff input[aria-invalid="true"]{border-color:#9B2C2C;background:rgba(155,44,44,.03)}
.ff .row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.ff .fld{display:flex;flex-direction:column;gap:.2rem}
.hp{position:absolute;left:-9999px}
.opt-toggle{text-align:center}
.opt-toggle button{background:none;border:none;color:var(--gold-text);font-size:.675rem;font-weight:600;cursor:pointer;font-family:inherit;padding:4px 6px;transition:opacity .3s}
.opt-toggle button:hover{opacity:.7}
.opt-fields{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);display:flex;flex-direction:column;gap:.55rem}
.opt-fields.show{max-height:220px}
.form-submit{width:100%;padding:14px;background:var(--navy);color:#fff;border:none;border-radius:980px;font-size:.875rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .35s var(--ease);margin-top:.5rem;position:relative;overflow:hidden}
.form-submit:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(10,22,40,.15)}
.form-submit[disabled]{opacity:.6;cursor:default;transform:none}
.form-note{text-align:center;font-size:.6rem;color:var(--text-3);margin-top:.45rem;line-height:1.5}
.form-note a{color:var(--text-3)}
.form-error{display:none;font-size:.72rem;color:#9B2C2C;text-align:center;margin-top:.5rem}
.form-error.show{display:block}
.form-success{display:none;text-align:center;padding:2.5rem 1.5rem}
.form-success.show{display:block}
.form-success .chk{width:44px;height:44px;border-radius:50%;background:rgba(45,122,58,.06);margin:0 auto .6rem;display:flex;align-items:center;justify-content:center;animation:pop .4s var(--ease-spring)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.form-success .chk svg{width:20px;height:20px;stroke:var(--green);stroke-width:2;fill:none}
.form-success h2{font-family:'Archivo',sans-serif;font-size:1rem;color:var(--navy);margin-bottom:.25rem;font-weight:700;letter-spacing:-.02em}
.form-success p{font-size:.78rem;color:var(--text-2);line-height:1.5}
.form-success .cb{display:inline-flex;align-items:center;gap:5px;margin-top:.65rem;color:var(--navy);font-weight:600;font-size:.8rem;text-decoration:none}
.form-success .cb svg{width:12px;height:12px;stroke:var(--gold);stroke-width:2;fill:none}

/* ── Accordion ────────────────────────────────────── */
.accordion{display:flex;flex-direction:column;gap:.6rem;max-width:700px;margin:0 auto}
.acc-item{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:box-shadow .4s,border-color .3s}
.acc-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.03)}
.acc-item.open{border-color:rgba(200,147,62,.2)}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.5rem;cursor:pointer;gap:1rem;user-select:none;width:100%;background:none;border:none;font-family:inherit;text-align:left}
.acc-head-left{display:flex;align-items:center;gap:.75rem}
.acc-ico{width:32px;height:32px;border-radius:9px;background:var(--gold-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .4s var(--ease-spring)}
.acc-item.open .acc-ico{transform:scale(1.06) rotate(-4deg)}
.acc-ico svg{width:15px;height:15px;stroke:var(--gold);stroke-width:1.8;fill:none}
.acc-head h3{font-size:.875rem;font-weight:700;color:var(--navy)}
.acc-toggle{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s var(--ease)}
.acc-item.open .acc-toggle{background:var(--navy);border-color:var(--navy);transform:rotate(45deg)}
.acc-toggle svg{width:12px;height:12px;stroke:var(--text-3);stroke-width:2;fill:none;transition:stroke .3s}
.acc-item.open .acc-toggle svg{stroke:#fff}
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc-body-inner{padding:0 1.5rem 1.25rem}

/* Check list — shared by accordion, realtor page, report page */
.ticks{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.ticks li{display:flex;align-items:flex-start;gap:.55rem;font-size:.82rem;color:var(--text-2);line-height:1.55}
.tick{width:16px;height:16px;border-radius:5px;background:var(--gold-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.tick svg{width:9px;height:9px;stroke:var(--gold);stroke-width:2.5;fill:none;
  stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .45s var(--ease-sharp)}
.acc-item.open .tick svg,.ticks.drawn .tick svg{stroke-dashoffset:0}
.acc-item.open .tick:nth-child(1) svg{transition-delay:.06s}
.acc-item.open .ticks li:nth-child(2) .tick svg{transition-delay:.12s}
.acc-item.open .ticks li:nth-child(3) .tick svg{transition-delay:.18s}
.acc-item.open .ticks li:nth-child(4) .tick svg{transition-delay:.24s}

/* ── Reviews ──────────────────────────────────────── */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rev-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:1.5rem;transition:box-shadow .4s,transform .4s var(--ease)}
.rev-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.04);transform:translateY(-2px)}
.rev-stars{display:flex;gap:1px;margin-bottom:.6rem}
.rev-stars svg{width:12px;height:12px;fill:var(--gold)}
.rev-txt{font-size:.82rem;color:var(--text-2);line-height:1.6;margin-bottom:.85rem;font-style:italic}
.rev-who{display:flex;align-items:center;gap:7px}
.rev-av{width:26px;height:26px;border-radius:50%;background:var(--gold-light);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.5rem;color:var(--gold-text);flex-shrink:0}
.rev-name{font-size:.7rem;font-weight:600;color:var(--text)}
.rev-loc{font-size:.575rem;color:var(--text-3)}
.rev-source{text-align:center;margin-top:1.5rem;font-size:.72rem;color:var(--text-3)}
.rev-source a{color:var(--gold-text);font-weight:600;text-decoration:none}
.rev-source a:hover{text-decoration:underline}

/* ── Service areas ────────────────────────────────── */

/* ── Closing CTA ──────────────────────────────────── */
.cta-box{max-width:640px;margin:0 auto;text-align:center}
.cta-box h2{font-family:'Archivo',sans-serif;font-size:clamp(1.4rem,3vw,1.85rem);color:var(--navy);margin-bottom:.5rem;font-weight:700;letter-spacing:-.028em;line-height:1.15}
.cta-box>p{font-size:.875rem;color:var(--text-2);margin:0 auto 2rem;max-width:400px}
.cta-btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:.75rem}
.cta-note{font-size:.65rem;color:var(--text-3)}
.cta-note strong{color:var(--gold-text);font-weight:600}

/* ── Split content block (about, realtors, report) ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:stretch}
.split-tight{gap:2.5rem}
.split-body{display:flex;flex-direction:column;justify-content:center}
/* The text column sets the row height. The image is absolutely
   positioned inside its column so it fills exactly that height —
   it can never be taller and leave space above and below. */
.split > div:has(> img):not(.report-frame){position:relative;min-height:300px}
.split > div.reveal.from-right{will-change:transform}
.split img{position:absolute;inset:0;width:100%;height:100%;
  border-radius:18px;box-shadow:0 10px 34px rgba(0,0,0,.08);
  object-fit:cover;object-position:center 25%}
.split-body p{font-size:.88rem;color:var(--text-2);line-height:1.75;margin-bottom:1rem}
.split-body h2{font-family:'Archivo',sans-serif;font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--navy);margin-bottom:1rem;font-weight:700;letter-spacing:-.025em;line-height:1.18}

/* ── Numbered process (a real sequence, so numbered) ─ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:step}
.step{background:var(--white);border:1px solid rgba(10,22,40,.13);border-radius:16px;
  padding:1.75rem 1.5rem;position:relative;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.step:hover{transform:translateY(-3px);border-color:rgba(10,22,40,.28);
  box-shadow:0 10px 26px rgba(10,22,40,.08)}
.step::before{transition:opacity .3s,color .3s}
.step:hover::before{opacity:1;color:var(--gold-text)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:'Archivo',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--gold-text);opacity:.75;display:block;margin-bottom:.6rem;line-height:1}
.step h3{font-size:.9rem;font-weight:700;color:var(--navy);margin-bottom:.4rem}
.step p{font-size:.8rem;color:var(--text-2);line-height:1.6}

/* ── Fact panel (credentials, insurance) ──────────── */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;max-width:820px;margin:0 auto}
.fact{background:var(--white);border:1px solid rgba(10,22,40,.13);border-radius:14px;padding:1.1rem 1.15rem;text-align:center;transition:border-color .3s,transform .4s var(--ease)}
.fact:hover{border-color:rgba(10,22,40,.26);transform:translateY(-2px)}
.fact dt{font-size:.6rem;font-weight:700;color:var(--text-3);letter-spacing:.07em;text-transform:uppercase;margin-bottom:.3rem}
.fact dd{font-size:.85rem;font-weight:600;color:var(--navy)}

/* ── Report preview ───────────────────────────────── */
.report-frame{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:1.25rem;box-shadow:0 16px 44px rgba(0,0,0,.07)}
.report-frame img{border-radius:10px;aspect-ratio:8.5/11;object-fit:cover;object-position:top;width:100%;border:1px solid var(--border)}
.report-cap{font-size:.65rem;color:var(--text-3);text-align:center;margin-top:.75rem}

/* ── Prose (privacy) ──────────────────────────────── */
.prose h2{font-family:'Archivo',sans-serif;font-size:1.15rem;color:var(--navy);margin:2rem 0 .6rem;font-weight:700;letter-spacing:-.02em}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:.85rem;color:var(--text-2);line-height:1.75}
.prose p{margin-bottom:.9rem}
.prose ul{margin:0 0 .9rem 1.1rem}
.prose li{margin-bottom:.35rem}
.prose a{color:var(--gold-text)}
.prose .updated{font-size:.7rem;color:var(--text-3);margin-bottom:2rem}

/* ── Footer ───────────────────────────────────────── */
footer{border-top:3px solid var(--navy);background:var(--navy);padding:3rem 0 1.5rem;margin-top:0;color:rgba(255,255,255,.72)}
footer .logo{color:#fff}
footer .logo span{color:var(--gold)}
footer .logo-img{filter:brightness(0) invert(1)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.foot-brand .logo{margin-bottom:.6rem;display:inline-block}
.foot-brand p{font-size:.78rem;color:rgba(255,255,255,.66);line-height:1.65;max-width:290px}
.foot-lic{font-size:.68rem !important;color:rgba(255,255,255,.52) !important;margin-top:.6rem;letter-spacing:.02em}
.foot-col h3{font-size:.6rem;font-weight:700;color:var(--gold);letter-spacing:.09em;text-transform:uppercase;margin-bottom:.85rem}
.foot-col a,.foot-col p{display:block;font-size:.8rem;color:rgba(255,255,255,.72);text-decoration:none;margin-bottom:.5rem;transition:color .25s}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{max-width:var(--wrap);margin:2.25rem auto 0;padding:1.25rem var(--gutter) 0;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem}
.foot-bottom p,.foot-bottom a{font-size:.68rem;color:rgba(255,255,255,.5);text-decoration:none}
.foot-bottom a:hover{color:rgba(255,255,255,.85)}
.foot-by{color:var(--gold) !important;font-weight:600;transition:opacity .25s}
.foot-by:hover{opacity:.75;color:var(--gold) !important}


/* ── Responsive ───────────────────────────────────── */
@media(max-width:980px){
  .nav-links{display:none}
  .burger{display:flex}
  .drawer{display:flex}
  /* Phone replaces the quote button in the mobile header: on a phone,
     calling is the fastest action and the quote button is in the menu. */
  .nav-cta{display:none}
  .nav-tel{display:inline-flex;align-items:center;gap:.35rem;
    background:var(--navy);color:#fff;padding:9px 16px;border-radius:980px;
    font-size:.82rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
  .nav-tel:hover{color:#fff;opacity:.9}
}
@media(max-width:420px){
  .nav-in{gap:.6rem}
  .logo{font-size:1.05rem}
  .nav-tel{padding:8px 13px;font-size:.78rem}
}
@media(max-width:900px){
  :root{--gutter:1.75rem}
  .hero{grid-template-columns:1fr;gap:2rem;padding-block:3rem 2rem;text-align:center}
  .hero-sub{max-width:none;margin-left:auto;margin-right:auto}
  .hero-ctas{justify-content:center}
  .hero-img{max-width:100%;margin:0 auto}
  .hero-img img{aspect-ratio:16/10;max-height:240px;object-position:center 30%}
  .creds-in{grid-template-columns:repeat(2,1fr)}
  .rev-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .split{grid-template-columns:1fr;gap:2rem}
  .split img{max-width:340px;margin:0 auto}
  .steps{grid-template-columns:1fr;gap:1rem}
  .facts{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:600px){
  :root{--gutter:1.25rem}
  .sec{padding:3rem 0}
  .hero-ctas{flex-direction:column;width:100%}
  .hero-ctas .btn-dark,.hero-ctas .btn-ghost{width:100%;justify-content:center}
  .hero{gap:1.5rem;padding-block:2rem 1.5rem}
  .hero-sub{margin-bottom:1.5rem}
  .hero-img{border-radius:16px}
  .hero-img img{transform:none}
  .hero-img img{aspect-ratio:16/9;max-height:185px}
  .creds-in{grid-template-columns:1fr 1fr;gap:.6rem}
  .ff .row{grid-template-columns:1fr}
  .form-card{padding:1.5rem}
  .cta-btns{flex-direction:column;align-items:stretch}
  .cta-btns .btn-dark,.cta-btns .btn-ghost,.cta-btns .btn-gold{width:100%;justify-content:center}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;text-align:center}
}

/* ── Reduced motion ───────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-left,.reveal-scale,.reveal.from-left,.reveal.from-right{opacity:1;transform:none}
  .reveal.wipe{clip-path:none}
  .sec-heading > span.mask-line{transform:none}
  .hero-content>*,.hero-img{opacity:1;animation:none}
  .tick svg{stroke-dashoffset:0}
  .scroll-prog{display:none}
}



/* ── Count-up figures ─────────────────────────────────── */
.count{font-variant-numeric:tabular-nums}

/* ── Button press feedback ────────────────────────────── */
.btn-dark:active,.btn-gold:active,.form-submit:active,.nav-cta:active{transform:translateY(0) scale(.985)}

/* ── Accordion icon: subtle scale on open ─────────────── */
.acc-item.open .acc-ico{transform:scale(1.08) rotate(-4deg)}


/* ── FAQ (accordion without the icon tile) ────────────── */
.acc-plain .acc-head{padding:1.05rem 1.4rem}
.acc-plain .acc-head h3{font-size:.9rem;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.acc-plain .acc-head-left{gap:0}
.faq-a{font-size:.85rem;color:var(--text-2);line-height:1.7;margin-top:-.15rem}
.faq-foot{text-align:center;margin-top:1.6rem;font-size:.8rem;color:var(--text-3)}
.faq-foot a{color:var(--gold-text);font-weight:600;text-decoration:none}
.faq-foot a:hover{text-decoration:underline}
@media(max-width:600px){
  .acc-plain .acc-head{padding:.95rem 1.1rem}
  .acc-plain .acc-head h3{font-size:.85rem}
}


/* ── Hero badge ───────────────────────────────────────── */
.hero-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;background:var(--gold-light);border:1px solid rgba(200,147,62,.18);padding:.35rem .7rem;border-radius:99px;font-size:.72rem;font-weight:600;color:var(--text);text-decoration:none;margin-bottom:1.1rem;transition:background .25s,transform .25s var(--ease)}
a.hero-badge:hover{background:rgba(200,147,62,.16);transform:translateY(-1px)}
.hero-badge .stars{color:var(--gold);font-size:.7rem;letter-spacing:.5px;line-height:1}

/* ── Headline dash accent ─────────────────────────────── */
.hero h1 .dash{color:var(--gold-text);padding:0 .06em;letter-spacing:.04em}

/* ── Hero chips ───────────────────────────────────────── */
.hero-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem;animation-delay:.66s}
.hero-chips span{font-size:.68rem;font-weight:600;color:var(--text-2);border:1px solid var(--border);padding:.3rem .6rem;border-radius:7px;white-space:nowrap}


@media(max-width:900px){
  .hero-chips{justify-content:center}
  .hero-badge{align-self:center;margin-left:auto;margin-right:auto}
}
@media(max-width:600px){
  .hero-badge{font-size:.68rem;padding:.3rem .6rem}
  .hero-chips{gap:.3rem;margin-top:.9rem}
  .hero-chips span{font-size:.64rem;padding:.26rem .5rem}
}


/* ── Full-screen hero ─────────────────────────────────────
   The hero fills exactly one screen at any desktop size.
   - min-height, not height: content can always grow past it,
     so short screens scroll rather than truncate
   - no cap: the image stretches, so a taller screen gets a
     taller photo instead of empty space
   - dvh, not vh: accounts for the mobile address bar
   - min-width:901px so phones keep natural flow

   To turn this off, delete this whole block.               */
@media(min-width:901px){
  .hero + .sec{padding-top:3rem;padding-bottom:3rem}   /* symmetric, so cards sit centred */
  .hero{
    min-height:calc(100dvh - 60px);   /* exactly one screen, minus the sticky nav */
    align-items:stretch;            /* columns match height — no gap under either */
    padding-top:2rem;
    padding-bottom:2.5rem;
  }
  /* Text block centres itself inside the taller column */
  .hero-content{display:flex;flex-direction:column;justify-content:center}
  /* Image grows to fill the column instead of stopping short */
  .hero-img{display:flex}
  .hero-img img{height:100%;max-height:none;aspect-ratio:auto;object-position:center 22%}
}



/* ── Service area pills ───────────────────────────────── */
.area-pills{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;max-width:660px;margin:0 auto}
.area-pill{background:var(--white);border:1px solid var(--border);padding:.4rem .85rem;border-radius:99px;font-size:.8rem;color:var(--text-2);white-space:nowrap;transition:border-color .25s,transform .25s var(--ease)}
.area-pill:hover{border-color:rgba(200,147,62,.35);transform:translateY(-1px)}
.area-pill.is-main{font-weight:700;color:var(--navy);border-color:rgba(200,147,62,.35);background:var(--gold-light)}
.area-note{text-align:center;margin-top:1.35rem;font-size:.8rem;color:var(--text-3)}
@media(max-width:600px){
  .area-pills{gap:.35rem}
  .area-pill{font-size:.75rem;padding:.35rem .7rem}
}


/* ── Hero image caption strip ─────────────────────────── */
.hero-img{position:relative}
.hero-strip{position:absolute;left:0;right:0;bottom:0;padding:2.75rem 1.15rem 1.05rem;
  background:linear-gradient(to top,rgba(8,17,31,.90) 0%,rgba(8,17,31,.72) 45%,transparent 100%);
  pointer-events:none}
.hero-strip-label{display:block;font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#E3BC77;margin-bottom:.2rem}
.hero-strip-text{display:block;font-size:.82rem;font-weight:600;color:#fff;line-height:1.35}
@media(max-width:600px){
  .hero-strip{padding:2.25rem .9rem .8rem}
  .hero-strip-label{font-size:.58rem}
  .hero-strip-text{font-size:.76rem}
}


/* ── Closing CTA band ─────────────────────────────────────
   Sits on the alt background so it separates from the section
   above and from the dark footer below. The negative margin
   pulls the band up to meet the preceding section, removing
   the doubled padding between two stacked sections.          */
.cta-sec{border-top:1px solid var(--border);padding:3.25rem 0 3.5rem}
.sec + .cta-sec{margin-top:-1.5rem}
.cta-box h2{font-size:clamp(1.45rem,3vw,1.95rem);margin-bottom:.45rem}
.cta-box>p{margin-bottom:1.6rem}
.cta-note{margin-top:.15rem;line-height:1.6}
.cta-note strong{color:var(--gold-text);font-weight:700}
@media(max-width:600px){
  .cta-sec{padding:2.5rem 0 2.75rem}
  .sec + .cta-sec{margin-top:-1rem}
}




/* ── Services page: two-column layout ─────────────────────
   Services left, photos right. The photo column STRETCHES to match
   whatever height the services column is, so the layout holds up
   whether a client offers three services or ten. Photos crop to fit
   rather than overhanging or leaving a gap.
   Built for exactly 2 or 4 photos.                          */
.svc-split{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:stretch}
.svc-list .sec-heading{margin-bottom:1.5rem}
.svc-photos{display:flex;flex-direction:column}
.svc-photos .sec-heading{margin-bottom:1.25rem}

.gallery{display:grid;gap:.7rem;flex:1;min-height:340px;max-height:620px}
.gallery figure{margin:0;border-radius:14px;overflow:hidden;background:var(--surface);
  border:1px solid rgba(10,22,40,.10);transition:transform .4s var(--ease),box-shadow .4s;min-height:0}
.gallery figure:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,22,40,.09)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}

/* 2 photos — stacked, each fills half the column height */
.gallery{grid-template-rows:1fr 1fr}
/* 4 photos — 2x2, each cell fills a quarter */
.gallery:has(figure:nth-child(3)){grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}

/* Browsers without :has() */
@supports not selector(:has(*)){
  .gallery{grid-template-columns:1fr 1fr}
}

/* Photo column deleted → services run full width, centred */
.svc-split:not(:has(.svc-photos)){grid-template-columns:1fr;max-width:700px;margin:0 auto}

@media(max-width:900px){
  .svc-split{grid-template-columns:1fr;gap:2.5rem;align-items:start}
  .svc-photos{display:block}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;min-height:0;max-height:none}
  .gallery figure{aspect-ratio:4/3}
  .svc-list,.svc-photos{max-width:700px;margin:0 auto;width:100%}
}
@media(max-width:480px){
  .gallery,.gallery:has(figure:nth-child(3)){grid-template-columns:1fr}
}


/* Inner-page intro is centred; the content below stays left-aligned */
.page-hero .lede{margin-left:auto;margin-right:auto;max-width:820px;font-size:1rem}

@media(max-width:600px){
  .page-hero{padding-block:2.5rem 2rem}
  .page-hero .lede{font-size:.92rem}
}


/* ── Back link on inner pages ─────────────────────────── */
.crumb-back{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;
  color:var(--text-3);text-decoration:none;margin-bottom:1rem;padding:.25rem .1rem;
  transition:color .25s,gap .25s var(--ease)}
.crumb-back svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .25s var(--ease)}
.crumb-back:hover{color:var(--gold-text)}
.crumb-back:hover svg{transform:translateX(-2px)}


/* ── Tick list with a bold lead-in ────────────────────────
   The <li> is a flex row: tick, then everything else in one
   block. Without the wrapper the bold label and the sentence
   after it become separate flex items and wrap independently. */
.tick-body{flex:1;min-width:0}
.tick-body strong{color:var(--navy);font-weight:700}
.ticks li{align-items:flex-start}

/* Sample report page keeps its own framing — the page preview
   should not be cropped, so it is excluded from the stretch. */
.split:has(.report-frame){align-items:center}
.split .report-frame{position:static}
.split .report-frame img{position:static;inset:auto;width:100%;height:auto;
  border-radius:10px;box-shadow:none;object-position:top}

@media(max-width:900px){
  .split{align-items:start}
  .split > div:has(> img){position:static;min-height:0}
  .split img{position:static;height:auto;aspect-ratio:4/3}
}


/* ── For-realtors list: give the text column room and air ──
   Wider text column and more space between points, so the list
   reaches roughly the same height as the photo beside it. */
.split:has(.tick-body){grid-template-columns:1.25fr .75fr;gap:3.5rem}
.split .ticks{gap:1.15rem}
.split .ticks li{font-size:.88rem;line-height:1.65}
.split .tick-body strong{display:inline}
.split .tick{margin-top:4px}

@media(max-width:900px){
  .split:has(.tick-body){grid-template-columns:1fr;gap:2.5rem}
  .split .ticks{gap:.9rem}
}

@media(max-width:520px){ .facts{grid-template-columns:1fr} }


/* ── Quiet closing line (About page) ──────────────────── */
.about-close{padding:2.5rem 0 3.25rem;border-top:1px solid var(--border)}
.about-close-line{font-size:.92rem;color:var(--text-2);text-align:center;max-width:560px;margin:0 auto}
.about-close-line a{color:var(--gold-text);font-weight:700;text-decoration:none}
.about-close-line a:hover{text-decoration:underline}


/* ── Google reviews link under the testimonials ───────── */
.rev-source{text-align:center;margin-top:1.6rem}
.rev-source a{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;
  color:var(--text-2);text-decoration:none;border:1px solid rgba(10,22,40,.13);
  padding:.5rem .95rem;border-radius:99px;background:var(--white);
  transition:border-color .25s,transform .25s var(--ease),color .25s}
.rev-source a:hover{border-color:rgba(200,147,62,.4);color:var(--navy);transform:translateY(-1px)}
.rev-source svg{width:15px;height:15px;fill:var(--gold-text);flex-shrink:0}

/* ── Address in the footer ────────────────────────────── */
.foot-addr{font-style:normal;font-size:.75rem;line-height:1.6;color:rgba(255,255,255,.6);margin-top:.7rem}


/* Second heading inside a split body (About page) */
.split-body h2 + p{margin-top:0}
.split-body h2:not(:first-child){padding-top:1.6rem;border-top:1px solid var(--border);margin-top:2.5rem}




/* ── Credential strip ─────────────────────────────────── */
.cred-card{background:var(--white);border:1px solid rgba(10,22,40,.13);border-radius:16px;
  padding:1.6rem 1rem;text-align:center;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.cred-card:hover{transform:translateY(-3px);border-color:rgba(10,22,40,.28);
  box-shadow:0 8px 24px rgba(10,22,40,.07)}
.cred-card h3{font-size:.84rem;letter-spacing:-.01em}








/* ── Service area ─────────────────────────────────────────
   Section background fades from the beige section above into
   the cream section below, so there is no hard edge at either
   end. The navy card sits on top of that gradient.          */
.areas-fade{background:linear-gradient(to bottom,var(--surface) 0%,var(--white) 100%)}

.areas-card{background:var(--navy);border-radius:24px;padding:3rem 2rem 2.75rem;text-align:center;
  max-width:860px;margin:0 auto;position:relative;overflow:hidden;
  box-shadow:0 18px 44px rgba(10,22,40,.16)}
.areas-card::before{content:'';position:absolute;top:-60%;right:-15%;width:70%;height:200%;
  background:radial-gradient(circle,rgba(200,147,62,.11) 0%,transparent 62%);pointer-events:none}
.areas-card > *{position:relative}
.areas-card .sec-label{color:var(--gold)}
.areas-card .sec-heading{color:#fff;margin-bottom:1.6rem}
.areas-card .area-pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17);
  color:rgba(255,255,255,.86)}
.areas-card .area-pill:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.areas-card .area-pill.is-main{background:var(--gold);border-color:var(--gold);
  color:var(--navy);font-weight:700}
.areas-card .area-pill.is-main:hover{background:#D8A452;border-color:#D8A452}
.areas-card .area-note{color:rgba(255,255,255,.58);margin-top:1.2rem}
@media(max-width:600px){
  .areas-card{padding:2.25rem 1.25rem 2rem;border-radius:18px}
}


/* ── FAQ: show four, reveal the rest on click ─────────────
   The hidden questions stay in the DOM so they are still
   indexed and still match the FAQ schema in <head>. */
.faq-extra{display:none}
.accordion.faq-open .faq-extra{display:block;animation:faqIn .35s var(--ease-sharp) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Same arrow as the services link at rest; it rotates to point
   down once the extra questions are open, then back again. */
#faqMore svg{transition:transform .35s var(--ease)}
#faqMore:hover svg{transform:translateX(3px)}
#faqMore[aria-expanded="true"] svg{transform:rotate(90deg)}
#faqMore[aria-expanded="true"]:hover svg{transform:rotate(90deg) translateX(3px)}
@media(prefers-reduced-motion:reduce){
  .accordion.faq-open .faq-extra{animation:none}
}


/* ═══════════════════════════════════════════════════════════
   SCROLL MOTION
   Four techniques, applied selectively. All of it switches off
   under prefers-reduced-motion at the bottom of this file.
   ═══════════════════════════════════════════════════════════ */

/* 1 ── Directional slide. Add .from-left or .from-right
        alongside .reveal on any element. */
.reveal.from-left{opacity:0;transform:translateX(-38px);
  transition:opacity .85s var(--ease-sharp),transform .85s var(--ease-sharp)}
.reveal.from-right{opacity:0;transform:translateX(46px);
  transition:opacity .85s var(--ease-sharp),transform .85s var(--ease-sharp)}
.reveal.from-left.in,.reveal.from-right.in{opacity:1;transform:none}

/* 2 ── Image wipe. Revealed left to right rather than faded. */
.reveal.wipe{opacity:1;transform:none;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--ease-sharp)}
.reveal.wipe.in{clip-path:inset(0 0 0 0)}

/* 3 ── Heading mask. Type rises from behind its own edge.
        Applied to every .sec-heading automatically. */
.sec-heading{overflow:hidden;padding-bottom:.12em}
.sec-heading > span.mask-line{display:block;transform:translateY(105%);
  transition:transform .85s var(--ease-sharp)}
.sec-heading.in > span.mask-line{transform:translateY(0)}

/* 4 ── Sequential stagger is handled by data-delay in the HTML
        and the existing observer in app.js. */

/* 5 ── Hero parallax. Set by app.js on scroll; the transform is
        applied to the image only, never to the text. */



/* ── Mobile hero: no buttons ──────────────────────────────
   The phone sits in the header on every screen, and the quote
   link is in the menu, so the hero stays clean. Delete this
   block to bring the buttons back. */
@media(max-width:768px){
  .hero-ctas{display:none}
  .hero-sub{margin-bottom:1.15rem}
  .hero-chips{margin-top:0}
}


/* ── Drawer: the quote link reads as the action, not another page ── */
.drawer .drawer-cta{color:var(--gold-text);border-bottom:none;margin-top:.4rem}


/* ── One gutter, everywhere ───────────────────────────────
   --gutter is the only horizontal inset on the site. Cards and
   panels sit inside it, never outside. Change it here and the
   whole site moves together. */
@media(max-width:420px){ :root{--gutter:1.1rem} }

/* Panels inside the gutter get their own inner padding, kept
   proportional so the text never sits tight to an edge. */
@media(max-width:600px){
  .form-card{padding:1.4rem 1.25rem}
  .areas-card{padding:2.25rem 1.25rem 2rem}
  .acc-head{padding:1rem 1.15rem}
  .acc-body-inner{padding:0 1.15rem 1.15rem}
  .cred-card{padding:1.35rem .85rem}
  .report-frame{padding:1rem}
}


/* ── Hero certification logos ─────────────────────────────
   One row of badges under the chips. Height is fixed and width
   follows each file, so square and tall badges sit level. */
.hero-logos{display:flex;align-items:center;gap:1.4rem;margin-top:1.9rem;animation-delay:.8s}
.hero-logos img{height:84px;width:auto;max-width:150px;object-fit:contain}
@media(max-width:900px){
  .hero-logos{justify-content:center}
}
@media(max-width:600px){
  .hero-logos{gap:1rem;margin-top:1.4rem}
  .hero-logos img{height:62px;max-width:110px}
}


/* ── Included protection (home page) ──────────────────────
   Five cards that wrap 3 + 2 on desktop, centred. Buy-back strip
   and terms note sit underneath. */
#included .lede{margin-top:-1rem;margin-bottom:2.25rem}
.incl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;max-width:980px;margin:0 auto}
.incl-card{flex:0 1 calc((100% - 2rem)/3);min-width:250px;background:var(--white);border:1px solid rgba(10,22,40,.13);
  border-radius:16px;padding:1.5rem 1.4rem;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.incl-card:hover{transform:translateY(-3px);border-color:rgba(10,22,40,.28);box-shadow:0 8px 24px rgba(10,22,40,.07)}
.incl-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.incl-ico{width:38px;height:38px;border-radius:11px;background:var(--gold-light);display:flex;align-items:center;justify-content:center}
.incl-ico svg{width:18px;height:18px;stroke:var(--gold);stroke-width:1.8;fill:none}
.incl-tag{font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);
  background:var(--surface);border:1px solid var(--border);padding:.25rem .55rem;border-radius:99px}
.incl-card h3{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:.35rem;letter-spacing:-.01em}
.incl-card p{font-size:.82rem;color:var(--text-2);line-height:1.6}
.incl-bb{display:flex;align-items:center;gap:1rem;max-width:720px;margin:2rem auto 0;background:var(--navy);
  border-radius:16px;padding:1.1rem 1.4rem}
.incl-bb img{width:60px;height:60px;object-fit:contain;flex-shrink:0;background:#fff;border-radius:10px;padding:4px}
.incl-bb p{font-size:.84rem;color:rgba(255,255,255,.78);line-height:1.6}
.incl-bb strong{color:#fff}
.incl-bb a{color:#E3BC77;font-weight:600;text-decoration:none;white-space:nowrap}
.incl-bb a:hover{text-decoration:underline}
.incl-note{text-align:center;max-width:640px;margin:1.2rem auto 0;font-size:.74rem;color:var(--text-3);line-height:1.6}
.incl-note a{color:var(--gold-text);font-weight:600;text-decoration:none}
.incl-note a:hover{text-decoration:underline}
.ticks li a{color:var(--gold-text);font-weight:600;text-decoration:none}
.ticks li a:hover{text-decoration:underline}
@media(max-width:900px){ .incl-card{flex-basis:calc((100% - 1rem)/2)} }
@media(max-width:600px){
  .incl-card{flex-basis:100%;min-width:0;padding:1.25rem 1.15rem}
  .incl-bb{flex-direction:column;text-align:center;padding:1.25rem 1.15rem}
}