:root{
  --ink:#1C1814; --slate:#5C564E; --mute:#8C8378; --line:#E8E2DA;
  --orange:#E8501A; --orange-deep:#C23E0E; --orange-soft:#FFF1E8;
  --orange-mid:#FFDCC7; --orange-line:#F6CDB6;
  --cream:#FBF6F0; --cream-deep:#F4E9DC;
  --dark:#171311; --dark-2:#221C19; --dline:rgba(255,255,255,.15);
  --dtext:#BDB3A9; --dbright:#F2ECE5;
  --head:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html body{margin:0;font-family:var(--body);font-size:16px;line-height:1.6;color:var(--slate);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
body h1,body h2,body h3,body h4{font-family:var(--head);color:var(--ink);margin:0;line-height:1.03;letter-spacing:-.035em}
body h1{font-weight:800;font-size:clamp(2.6rem,6.1vw,5.2rem)}
body h2{font-weight:800;font-size:clamp(2rem,4.4vw,3.5rem)}
body h3{font-weight:700;font-size:1.26rem;line-height:1.2;letter-spacing:-.025em}
body h4{font-weight:700;font-size:1.02rem;line-height:1.28;letter-spacing:-.015em}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
.wrap{max-width:1260px;margin:0 auto;padding:0 32px}
section{padding:112px 0}
.eb{display:flex;align-items:center;gap:12px;font-size:.71rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:24px}
.eb::before{content:"";width:28px;height:1.5px;background:var(--orange);flex:none}
.eb.dk{color:#F2A87E}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:.96rem;
  font-weight:600;text-decoration:none;border-radius:100px;padding:16px 32px;
  border:1.5px solid transparent;cursor:pointer;font-family:var(--body);
  transition:background .2s,color .2s,border-color .2s}
.btn-o{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-o:hover{background:var(--orange-deep);border-color:var(--orange-deep)}
.btn-d{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-d:hover{background:#000;border-color:#000}
.btn-g{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-g:hover{border-color:var(--ink)}
.btn-g.dk{color:#fff;border-color:rgba(255,255,255,.32)}
.btn-g.dk:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-row{display:flex;flex-wrap:wrap;gap:13px}
.aw{display:inline-block;transition:transform .2s}
a:hover .aw{transform:translateX(4px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:rgba(23,19,17,.94);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1.5px solid var(--dline)}
.hdr-in{display:flex;align-items:center;gap:22px;height:78px}
.logo{flex:none;display:block}
.logo img{height:29px;width:auto}
.nav{display:flex;align-items:center;margin-left:auto}
.ni{position:relative}
.ni>a{display:flex;align-items:center;gap:8px;padding:14px 17px;font-size:.92rem;
  font-weight:500;color:var(--dbright);text-decoration:none;white-space:nowrap;position:relative}
.ni>a::after{content:"";position:absolute;left:17px;right:17px;bottom:8px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.ni:hover>a::after,.ni:focus-within>a::after{transform:scaleX(1)}
.ni:hover>a{color:#fff}
.car{width:6px;height:6px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);
  transform:rotate(45deg) translateY(-2px);transition:border-color .2s}
.ni:hover .car{border-color:var(--orange)}
/* smoked glass panel. no second orange rule, the nav underline is the only one. */
.dd{position:absolute;top:calc(100% - 2px);left:50%;transform:translateX(-50%);min-width:268px;
  background:rgba(26,21,19,.66);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1.5px solid rgba(255,255,255,.13);border-radius:20px;padding:12px;
  box-shadow:0 32px 74px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;visibility:hidden;transition:opacity .16s,visibility .16s}
@supports not (backdrop-filter:blur(2px)){.dd{background:rgba(26,21,19,.97)}}
.ni:hover .dd,.ni:focus-within .dd{opacity:1;visibility:visible}
.dd ul{padding:0}
.dd a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 14px;text-decoration:none;border-radius:12px;
  font-family:var(--head);font-weight:700;font-size:.96rem;letter-spacing:-.02em;color:var(--dbright)}
.dd a:hover{background:rgba(232,80,26,.16);color:#fff}
.dd a i{font-style:normal;color:var(--orange);opacity:0;transform:translateX(-6px);transition:all .2s}
.dd a:hover i{opacity:1;transform:translateX(0)}
.hdr .btn{padding:12px 24px;font-size:.89rem;flex:none}
@media(max-width:1200px){.nav{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--dark);color:var(--dtext);position:relative;overflow:hidden;padding:104px 0 0}
.hero::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:20px 20px;pointer-events:none}
.hero .wrap{position:relative}
.hgrid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:64px;align-items:start}
.hero .eb{color:#F2A87E}
.hero h1{color:#fff;margin-bottom:34px}
.hero h1 em{font-style:normal;color:var(--orange)}
.lede{font-size:1.14rem;line-height:1.55;color:var(--dtext);max-width:52ch;margin-bottom:24px}
.pledge{border-left:3px solid var(--orange);padding:4px 0 4px 22px;max-width:50ch}
.pledge b{display:block;font-family:var(--head);font-weight:700;font-size:1.28rem;
  color:#fff;letter-spacing:-.028em;line-height:1.24}
.hero-micro{margin-top:34px;display:grid;gap:12px}
.hero-micro span{display:flex;align-items:flex-start;gap:11px;font-size:.9rem;color:var(--dtext)}
.hero-micro span::before{content:"";width:6px;height:6px;border-radius:50%;
  background:#46B487;flex:none;margin-top:.5em}

.hform{background:var(--dark-2);border:1.5px solid var(--dline);border-radius:24px;padding:34px 30px}
.hform h3{color:#fff;font-size:1.32rem;margin-bottom:8px;letter-spacing:-.03em}
.hform .fh{font-size:.9rem;color:var(--mute);margin-bottom:24px;line-height:1.5}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:.73rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--body);font-size:.94rem;
  color:#fff;padding:13px 15px;border:1.5px solid var(--dline);border-radius:12px;
  background:rgba(255,255,255,.05);transition:border-color .2s}
.fld input::placeholder,.fld textarea::placeholder{color:#6E655D}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--orange)}
.fld select option{background:var(--dark-2);color:#fff}
.fld textarea{resize:vertical;min-height:78px}
.hform .btn{width:100%;margin-top:10px}
@media(max-width:1040px){.hgrid{grid-template-columns:1fr;gap:46px}}

.claims{display:grid;grid-template-columns:repeat(4,1fr);margin-top:92px;border-top:1.5px solid var(--dline)}
.claim{padding:38px 28px 48px;border-right:1.5px solid var(--dline)}
.claim:last-child{border-right:0}.claim:first-child{padding-left:0}
.claim b{display:block;font-family:var(--head);font-weight:800;font-size:1.36rem;color:#fff;
  letter-spacing:-.032em;line-height:1.1;margin-bottom:12px}
.claim span{font-size:.9rem;color:var(--mute);line-height:1.5}
@media(max-width:980px){
  .claims{grid-template-columns:repeat(2,1fr)}
  .claim{padding:28px 22px 32px;border-bottom:1.5px solid var(--dline)}
  .claim:nth-child(2n){border-right:0}.claim:first-child{padding-left:22px}}
@media(max-width:560px){.claims{grid-template-columns:1fr}.claim{border-right:0}}

/* ---------- metric band ----------
   Sits directly under the hero because a buyer who has never heard of us needs
   the reassurance before the pitch, not after it. Five numbers and one line.
   No scale or badge claims are made because none can currently be evidenced. */
/* Typographic, not boxed. The card pattern is already doing the work in the
   service grid, the comparison panels and the calculator, so repeating it here
   made the page read as one long run of containers. Numbers sit directly on
   white with a short orange tick as the only ornament. */
.mx{background:#fff;border-bottom:1.5px solid var(--line);padding:0}
.mx-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:38px 26px;padding:64px 0 26px}
.mx-i::before{content:"";display:block;width:26px;height:2.5px;background:var(--orange);
  border-radius:2px;margin-bottom:18px}
.mx-i b{display:block;font-family:var(--head);font-weight:800;
  font-size:clamp(1.65rem,2.9vw,2.45rem);letter-spacing:-.052em;color:var(--ink);
  line-height:1;margin-bottom:10px}
.mx-i b i{font-style:normal;color:var(--orange)}
.mx-i span{font-size:.83rem;color:var(--mute);line-height:1.4;display:block}
.mx-note{padding:0 0 58px;font-size:1rem;color:var(--slate);max-width:72ch;margin:0}
.mx-note b{color:var(--ink);font-weight:600}
@media(max-width:1040px){.mx-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px}}
@media(max-width:620px){
  .mx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding:44px 0 20px}
  .mx-i::before{margin-bottom:14px}
  .mx-note{padding-bottom:44px;font-size:.95rem}}

/* ---------- section head ---------- */
.sh{max-width:820px;margin-bottom:66px}
.sh h2{margin-bottom:20px}
.sh p{font-size:1.13rem;color:var(--slate);max-width:62ch}
.sh.dk h2{color:#fff}.sh.dk p{color:var(--dtext)}
span.hl{color:#fff;font-weight:600;box-shadow:inset 0 -.55em 0 rgba(232,80,26,.42)}

/* ---------- service cards ---------- */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1.5px solid var(--orange-line);border-radius:26px;padding:44px 40px 36px;
  background:var(--orange-soft);text-decoration:none;transition:background .24s,border-color .24s}
.card:hover{background:#fff;border-color:var(--ink)}
.card .idx{position:absolute;top:32px;right:38px;font-family:var(--head);font-weight:800;
  font-size:.82rem;letter-spacing:.1em;color:var(--orange-line);transition:color .24s}
.card:hover .idx{color:var(--ink)}
.card .nm{font-size:.71rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-deep);margin-bottom:15px}
.card .kicker{font-family:var(--head);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(1.8rem,3.1vw,2.5rem);color:var(--orange-deep);line-height:1.02;margin-bottom:19px;
  transition:color .24s}
.card:hover .kicker{color:var(--ink)}
.card p{font-size:.99rem;color:var(--slate);margin-bottom:24px;max-width:44ch}
.card .go{margin-top:auto;padding-top:20px;border-top:1.5px solid var(--orange-line);
  font-size:.89rem;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;gap:14px}
.card .go em{font-style:normal;color:var(--mute);font-weight:400}
.card:hover .go{border-color:var(--line)}
@media(max-width:820px){.svc{grid-template-columns:1fr}.card{padding:34px 26px 30px}}

/* ---------- routing ---------- */
.rt{background:var(--cream);border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.rt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.rc{border:1.5px solid var(--line);background:#fff;border-radius:26px;padding:44px 40px;
  display:flex;flex-direction:column}
.rc.own{border-color:var(--orange);background:var(--ink)}
.rc .t{font-size:.71rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin-bottom:16px}
.rc.own .t{color:#F2A87E}
.rc h3{font-size:clamp(1.55rem,2.7vw,2.15rem);margin-bottom:16px;letter-spacing:-.035em}
.rc.own h3{color:#fff}
.rc p{font-size:1.01rem;margin-bottom:26px}
.rc.own p{color:var(--dtext)}
.rc .btn{margin-top:auto;align-self:flex-start}
@media(max-width:860px){.rt-grid{grid-template-columns:1fr}.rc{padding:34px 26px}}

/* ---------- routes ---------- */
.ways{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:22px}
.way{border:1.5px solid var(--line);border-radius:26px;padding:44px 40px;
  transition:border-color .24s,background .24s}
.way:hover{border-color:var(--orange-line);background:var(--orange-soft)}
.way .n{font-family:var(--head);font-weight:800;font-size:.78rem;letter-spacing:.14em;
  color:var(--orange);margin-bottom:20px}
.way h3{font-size:clamp(1.45rem,2.4vw,1.95rem);margin-bottom:15px}
.way p{font-size:.99rem;margin-bottom:0}
.joint{background:var(--ink);border-radius:26px;padding:42px 40px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.joint h4{color:#fff;font-size:1.22rem;margin-bottom:11px}
.joint p{color:var(--dtext);font-size:.99rem;max-width:72ch;margin:0}
@media(max-width:860px){.ways{grid-template-columns:1fr}.way{padding:32px 26px}
  .joint{grid-template-columns:1fr;padding:32px 26px;gap:24px}}

/* ---------- comparison: one grid, so every row lines up exactly ---------- */
.cmp{display:grid;grid-template-columns:172px repeat(3,minmax(0,1fr));gap:0 16px;
  grid-template-areas:
    "x  ha hb hc"
    "l1 a1 b1 c1"
    "l2 a2 b2 c2"
    "l3 a3 b3 c3"
    "l4 a4 b4 c4"
    "l5 a5 b5 c5";}
.colbg{border:1.5px solid var(--line);border-radius:26px;background:#fff;z-index:0}
.colbg.win{border-color:var(--orange);background:var(--orange-soft);
  box-shadow:0 26px 56px rgba(232,80,26,.15)}
.cmp>*:not(.colbg){position:relative;z-index:1}
.ch{padding:34px 30px 28px}
.ch .tag{font-size:.66rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--mute);margin-bottom:14px}
.ch h3{font-size:1.44rem;margin-bottom:9px;letter-spacing:-.032em}
.ch p{font-size:.89rem;color:var(--slate);margin:0;line-height:1.45}
.ch.win .tag{color:var(--orange-deep)}
.ch.win h3{color:var(--orange-deep)}
.cl{display:flex;align-items:center;padding:24px 0;font-size:.67rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  border-top:1.5px solid var(--line)}
.cc{display:flex;align-items:center;padding:24px 30px;font-size:.94rem;
  color:var(--slate);line-height:1.5;border-top:1.5px solid var(--line)}
.cc.win{color:var(--ink);font-weight:500;border-top-color:var(--orange-line)}
.cmp .lastrow{padding-bottom:34px}
/* Mobile: three tall columns cannot be compared on a phone, and the DOM is
   row major so stacking them orphans every row under the last header.
   Instead the three headers collapse into one compact legend at the top, and
   each criterion becomes a self contained block holding all three answers. */
@media(max-width:960px){
  .cmp{display:block;grid-template-areas:none}
  .colbg{display:none}

  .ch{padding:16px 20px;border:1.5px solid var(--line);border-bottom:0;background:#fff}
  .ch:first-of-type{border-radius:18px 18px 0 0}
  .ch .tag{font-size:.6rem;letter-spacing:.16em;margin-bottom:6px}
  .ch h3{font-size:1.1rem;margin-bottom:4px}
  .ch p{font-size:.85rem;line-height:1.4}
  .ch.win{background:var(--orange-soft);border-color:var(--orange-line);
    border-bottom:1.5px solid var(--orange-line);border-radius:0 0 18px 18px;
    box-shadow:inset 3px 0 0 var(--orange)}

  .cl{display:block;border:0;padding:0;margin:30px 0 12px;
    font-family:var(--head);font-size:.98rem;font-weight:700;letter-spacing:-.02em;
    text-transform:none;color:var(--ink)}
  .cl::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
    background:var(--orange);margin-right:10px;vertical-align:middle}

  .cc{display:block;padding:15px 18px;border:1.5px solid var(--line);border-bottom:0;
    background:#fff;font-size:.93rem;line-height:1.5}
  .cc.ca{border-radius:16px 16px 0 0}
  .cc::before{content:attr(data-l);display:block;font-size:.61rem;font-weight:700;
    letter-spacing:.15em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
  .cc.win{background:var(--orange-soft);border-color:var(--orange-line);
    border-bottom:1.5px solid var(--orange-line);border-radius:0 0 16px 16px;
    box-shadow:inset 3px 0 0 var(--orange);color:var(--ink);font-weight:500}
  .cc.win::before{color:var(--orange-deep)}
  .cmp .lastrow{padding-bottom:15px}
  .cmp .cl.lastrow{padding-bottom:0}}

/* ---------- calculator ---------- */
.calc{background:var(--dark);color:var(--dtext);position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:20px 20px;pointer-events:none}
.calc .wrap{position:relative}
.cg{display:grid;grid-template-columns:minmax(0,356px) minmax(0,1fr);gap:50px;align-items:start}
.ctl{background:var(--dark-2);border:1.5px solid var(--dline);border-radius:24px;padding:32px 28px}
.fg{margin-bottom:28px}
.fg>label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--dbright);margin-bottom:14px}
.fg>label b{font-family:var(--head);font-weight:800;font-size:1.34rem;color:var(--orange);letter-spacing:-.03em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:100px;
  background:rgba(255,255,255,.18);outline:none;cursor:pointer;display:block}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--orange);border:3px solid var(--dark-2);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--orange);
  border:3px solid var(--dark-2);cursor:pointer}
.ends{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mute);margin-top:8px}
.mix{display:flex;flex-wrap:wrap;gap:8px}
.mix label{display:inline-flex;align-items:center;gap:8px;font-size:.83rem;font-weight:500;
  color:var(--dbright);background:rgba(255,255,255,.05);border:1.5px solid var(--dline);
  border-radius:100px;padding:9px 15px;cursor:pointer;transition:border-color .18s,background .18s}
.mix label:has(input:checked){border-color:var(--orange);background:rgba(232,80,26,.17)}
.mix input{accent-color:var(--orange);width:14px;height:14px;margin:0}
.bill{margin-top:26px;padding-top:22px;border-top:1.5px solid var(--dline);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bill span{font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.bill b{font-family:var(--head);font-weight:800;font-size:1.7rem;color:#fff;letter-spacing:-.035em}

.out{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.oc{border:1.5px solid var(--dline);border-radius:22px;padding:30px 26px;
  background:rgba(255,255,255,.035);display:flex;flex-direction:column}
.oc.win{border-color:var(--orange);background:rgba(232,80,26,.13)}
.oc .t{font-family:var(--head);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;
  color:#fff;margin-bottom:7px}
.oc .sub{font-size:.81rem;color:var(--mute);margin-bottom:24px;min-height:2.5em;line-height:1.4}
.oc.win .sub{color:#E8B79C}
.oc .big{font-family:var(--head);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);
  color:#fff;line-height:1;letter-spacing:-.038em;margin-bottom:6px}
.oc .cap{font-size:.8rem;color:var(--mute)}
.oc .mini{margin-top:22px}
.oc .mini label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.74rem;font-weight:600;color:var(--dbright);margin-bottom:10px}
.oc .mini label b{font-family:var(--head);font-weight:800;color:var(--orange);font-size:1rem}
.oc .keep{margin-top:auto;padding-top:19px;border-top:1.5px solid var(--dline);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.85rem}
.oc.win .keep{border-color:rgba(246,205,182,.3)}
.oc .keep span{color:var(--mute)}
.oc .keep b{font-family:var(--head);font-weight:800;font-size:1.06rem;letter-spacing:-.02em;color:#5FD3A0}
.oc .keep b.neg{color:#FF8B6B}
.cfoot{margin-top:24px;padding:22px 26px;border:1.5px solid rgba(246,205,182,.32);
  background:rgba(232,80,26,.1);border-radius:20px;display:flex;flex-wrap:wrap;
  gap:12px 24px;align-items:center;justify-content:space-between}
.cfoot p{font-size:1rem;color:var(--dbright);margin:0;max-width:62ch}
.cfoot b{color:#fff;font-weight:600}
.cfoot a{color:#F2A87E;font-weight:600;text-decoration:none;font-size:.93rem;white-space:nowrap}
@media(max-width:1060px){.cg{grid-template-columns:1fr;gap:30px}}
@media(max-width:800px){.out{grid-template-columns:1fr}.oc .sub{min-height:0}}

/* ---------- faq ---------- */
.qf{border-top:1.5px solid var(--line);max-width:940px}
.qf details{border-bottom:1.5px solid var(--line)}
.qf summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:20px;
  padding:26px 0;font-family:var(--head);font-weight:700;font-size:1.14rem;color:var(--ink);line-height:1.28}
.qf summary::-webkit-details-marker{display:none}
.qf summary:hover{color:var(--orange-deep)}
.qi{flex:none;width:20px;height:20px;margin-top:3px;position:relative}
.qi::before,.qi::after{content:"";position:absolute;background:var(--orange);
  left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .18s}
.qi::before{width:13px;height:1.5px}.qi::after{width:1.5px;height:13px}
details[open] .qi::after{opacity:0}
.qf .an{padding:0 0 28px 40px;max-width:70ch}
.qf .an p{font-size:.99rem;margin-bottom:.7em}
@media(max-width:560px){.qf .an{padding-left:0}}

/* ---------- closing ---------- */
.fin{background:var(--ink);color:#fff;padding:112px 0;position:relative;overflow:hidden}
.fin::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:20px 20px}
.fin .wrap{position:relative}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,450px);gap:64px;align-items:center}
.fin h2{color:#fff;max-width:17ch;margin-bottom:20px}
.fin .fp{font-size:1.14rem;color:var(--dtext);max-width:50ch}
.fin ul{margin-top:28px}
.fin li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--dbright);padding:9px 0}
.fin li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none;margin-top:.55em}
.fcard{background:#fff;border-radius:24px;padding:34px 32px}
.fcard h3{font-size:1.32rem;margin-bottom:8px;letter-spacing:-.03em}
.fcard .fh{font-size:.9rem;color:var(--mute);margin-bottom:24px;line-height:1.5}
.fcard .fld label{color:var(--mute)}
.fcard .fld input,.fcard .fld select,.fcard .fld textarea{background:#fff;border-color:var(--line);color:var(--ink)}
.fcard .fld input::placeholder,.fcard .fld textarea::placeholder{color:#B5ABA1}
.fcard .fld select option{background:#fff;color:var(--ink)}
.fcard .btn{width:100%;margin-top:10px}
@media(max-width:940px){.fgrid{grid-template-columns:1fr;gap:44px}}

/* ---------- footer ---------- */
.ft{background:var(--cream);color:var(--slate);border-top:3px solid var(--orange);position:relative;overflow:hidden}
.ft-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;
  align-items:end;padding:80px 0 60px}
.ft-top .logo img{height:34px;margin-bottom:30px}
.ft-say{font-family:var(--head);font-weight:800;letter-spacing:-.042em;line-height:1.02;
  font-size:clamp(1.9rem,4vw,3.15rem);color:var(--ink);max-width:14ch;margin:0}
.ft-say em{font-style:normal;color:var(--orange)}
/* The motto is a self contained panel, not a second headline. Side by side on
   desktop the two statements read fine, but stacked on a phone two large
   display blocks merge into one confusing lump. Giving this one its own
   surface keeps the hierarchy readable once the columns collapse. */
.ft-line{position:relative;font-family:var(--head);font-weight:800;
  font-size:clamp(1.32rem,2.5vw,1.95rem);letter-spacing:-.042em;
  color:var(--ink);line-height:1.1;margin:0;max-width:19ch;
  background:var(--orange-soft);border:1.5px solid var(--orange-line);
  border-radius:22px;padding:30px 32px 32px}
.ft-line em{font-style:normal;color:var(--orange);display:block}
.ft-line::before{content:"";display:block;width:26px;height:3px;border-radius:2px;
  background:var(--orange);margin-bottom:16px}
/* Business email is a real sales channel, so it is kept out of the markup as a
   plain mailto. Assembled by script below, invisible to address harvesters. */
.ft-em{display:inline-flex;align-items:center;gap:7px}
.ft-em a{color:var(--ink);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid var(--orange)}
.ft-em a:hover{color:var(--orange-deep)}
.ft-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;
  padding:52px 0 56px;border-top:1.5px solid var(--cream-deep)}
.ft h4{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--head);
  font-size:.98rem;font-weight:700;letter-spacing:-.022em;text-transform:none;
  margin-bottom:22px;padding:0;border:0}
.ft h4::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.ft li{margin-bottom:13px}
.ft-nav a{display:inline-block;font-size:.94rem;color:var(--slate);text-decoration:none;
  transition:color .2s,transform .2s}
.ft-nav a:hover{color:var(--orange-deep);transform:translateX(4px)}
.ft-base{border-top:1.5px solid var(--cream-deep);padding:24px 0;display:flex;flex-wrap:wrap;gap:16px;
  justify-content:space-between;align-items:center;font-size:.85rem;color:var(--mute);position:relative;z-index:2}
.ft-base a{color:var(--mute);text-decoration:none}.ft-base a:hover{color:var(--ink)}
.soc{display:flex;gap:9px}
.soc a{width:38px;height:38px;border:1.5px solid var(--cream-deep);border-radius:12px;display:flex;
  align-items:center;justify-content:center;color:var(--slate);background:#fff;transition:all .2s}
.soc a:hover{border-color:var(--orange);color:#fff;background:var(--orange)}
.soc svg{width:17px;height:17px;fill:currentColor;display:block}
.ft-mark{font-family:var(--head);font-weight:800;letter-spacing:-.055em;
  font-size:clamp(3.6rem,15.5vw,13rem);line-height:.78;color:var(--cream-deep);
  white-space:nowrap;user-select:none;padding-bottom:.06em;margin-top:14px;overflow:hidden}
@media(max-width:1060px){
  .ft-top{grid-template-columns:1fr;gap:40px;align-items:start;padding:64px 0 48px}
  .ft-line{max-width:100%}
  .ft-nav{grid-template-columns:repeat(2,1fr);gap:34px}}
@media(max-width:620px){
  .ft-top{gap:34px;padding:52px 0 40px}
  .ft-say{font-size:1.72rem;max-width:100%}
  .ft-line{font-size:1.28rem;padding:24px 24px 26px}
  .ft-line::before{width:22px;margin-bottom:13px}}
@media(max-width:760px){
  .ft-nav{grid-template-columns:repeat(2,1fr);gap:28px;padding:40px 0 44px}
  section{padding:78px 0}.hero{padding:70px 0 0}.fin{padding:80px 0}}

.rv{opacity:0;transition:opacity .5s ease}.rv.in{opacity:1}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transition:none}.aw{transition:none}}
.nojs .rv{opacity:1}

/* ---------- v2a form status banners ----------
   Shared confirmation/error strip used by v2a_status_banner() on all three
   page templates (home, about, contact) after a wp_mail() form submit. */
.v2a-banner{max-width:1260px;margin:0 auto 28px;padding:16px 22px;border-radius:14px;
  font-family:var(--body);font-size:.94rem;font-weight:600;line-height:1.5;border:1.5px solid transparent}
.v2a-banner--ok{background:#EAF6EF;border-color:#B7E4C7;color:#1E6B3C}
.v2a-banner--err{background:var(--orange-soft);border-color:var(--orange-line);color:var(--orange-deep)}