/* =========================================================================
   PÍPUVERK Suðurlands — visual system
   MÓTA Vefstofa · concept build 2026
   Palette: warm paper / charcoal ink / burnt copper
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  --paper:      #F2F0EA;
  --paper-2:    #EEECE6;
  --paper-3:    #E6E3DB;
  --paper-4:    #DEDBD1;

  /* ink */
  --ink:        #151515;
  --ink-2:      #1D1D1C;
  --ink-3:      #2A2A28;
  --ink-soft:   #56534B;
  --ink-mute:   #858176;

  /* accent */
  --copper:     #C7512E;
  --copper-lt:  #D96A42;
  --copper-dk:  #97381D;
  --brass:      #A8823F;
  --steel:      #74787B;
  --inox:       #A6ABAC;

  /* lines */
  --line:       rgba(21,21,21,.13);
  --line-2:     rgba(21,21,21,.22);
  --line-3:     rgba(21,21,21,.38);
  --line-inv:   rgba(242,240,234,.16);
  --line-inv-2: rgba(242,240,234,.30);

  /* type */
  --f-dis: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-txt: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-mon: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* metrics */
  --wrap: 1420px;
  --gut: clamp(20px, 4.2vw, 76px);
  --sec-y: clamp(88px, 11vw, 176px);
  --r: 2px;

  /* motion */
  --e: cubic-bezier(.22,.61,.36,1);
  --e-mech: cubic-bezier(.66,0,.16,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0;
  position:relative;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-txt);
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.62;
  font-weight:350;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%; height:auto; display:block}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
fieldset{border:0;margin:0;padding:0}
legend{padding:0}
::selection{background:var(--copper); color:var(--paper)}
:focus-visible{outline:2px solid var(--copper); outline-offset:3px}

.skip{position:absolute; left:-9999px; top:0; z-index:1000; background:var(--ink); color:var(--paper); padding:12px 18px}
.skip:focus{left:12px; top:12px}

/* ---------- 3. TYPE UTILITIES ---------- */
.mono{font-family:var(--f-mon); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; font-weight:400; line-height:1.5}
.muted{color:var(--ink-mute)}
.ac{color:var(--copper)}

.h2{
  font-family:var(--f-dis);
  font-weight:800;
  font-stretch:112%;
  font-size:clamp(2.6rem,6.4vw,5.6rem);
  line-height:.92;
  letter-spacing:-.035em;
  text-transform:none;
}
.h3{
  font-family:var(--f-dis); font-weight:750; font-stretch:108%;
  font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1; letter-spacing:-.03em;
}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}

.tag{display:flex; align-items:center; gap:.55em; flex-wrap:wrap; color:var(--ink-soft)}
.tag__sep{opacity:.4}
.tag--inv{color:rgba(242,240,234,.62)}
.dot{width:5px; height:5px; background:var(--copper); border-radius:50%; flex:none}
.dot--live{box-shadow:0 0 0 0 rgba(199,81,46,.6); animation:ping 2.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(199,81,46,.55)}70%{box-shadow:0 0 0 9px rgba(199,81,46,0)}100%{box-shadow:0 0 0 0 rgba(199,81,46,0)}}

.pulse{width:7px;height:7px;border-radius:50%;background:var(--copper);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--copper);opacity:.5;animation:pulse 2.4s var(--e) infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}

.ic{width:1em;height:1em;flex:none}

/* ---------- 4. BUTTONS & LINKS ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  position:relative; display:inline-flex; align-items:center; gap:.9em;
  padding:16px 24px; background:var(--bg); color:var(--fg);
  font-family:var(--f-mon); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  border-radius:var(--r); overflow:hidden; isolation:isolate;
  transition:background .4s var(--e), color .4s var(--e), transform .3s var(--e);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--copper); z-index:-1;
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e-mech);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn__pipe{
  position:relative; width:26px; height:1px; background:currentColor; flex:none;
  transition:width .42s var(--e-mech);
}
.btn__pipe::after{
  content:""; position:absolute; right:-1px; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);
}
.btn:hover .btn__pipe{width:40px}
.btn--sm{padding:11px 16px; font-size:.66rem}
.btn--sm .btn__pipe{width:16px}
.btn--lg{padding:20px 30px; font-size:.76rem}
.btn--full,.btn--block{width:100%; justify-content:space-between}
.btn--inv{--bg:var(--copper); --fg:#fff}
.btn--inv::before{background:var(--paper)}
.btn--inv:hover{color:var(--ink)}

.link-arrow{
  display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--f-mon); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  border-bottom:1px solid var(--line-2); padding-bottom:5px; transition:border-color .3s, color .3s;
}
.link-arrow:hover{border-color:var(--copper); color:var(--copper)}
.link-arrow__a{display:inline-block; transition:transform .34s var(--e-mech)}
.link-arrow:hover .link-arrow__a{transform:translateX(4px)}
a:not([class]){color:inherit; border-bottom:1px solid var(--line-2)}
a:not([class]):hover{border-color:var(--copper); color:var(--copper)}

.tick{width:8px;height:8px;border-left:1px solid var(--line-3);border-bottom:1px solid var(--line-3);flex:none;display:inline-block}
.tick--ac{border-color:var(--copper)}

/* ---------- 5. GLOBAL PIPE SPINE ---------- */
.spine{
  position:absolute; top:0; left:0; z-index:0; pointer-events:none; overflow:visible;
}
.spine .sp-base{fill:none; stroke:var(--line-2); stroke-width:1.15; stroke-linecap:square}
.spine .sp-shadow{fill:none; stroke:rgba(21,21,21,.05); stroke-width:5; transform:translate(1.5px,2px)}
.spine .sp-live{fill:none; stroke:var(--copper); stroke-width:1.6; stroke-linecap:round}
.spine .sp-glow{fill:none; stroke:var(--copper); stroke-width:6; opacity:.11; filter:blur(3px)}
.spine .sp-fit rect{fill:none; stroke:var(--line-3); stroke-width:1}
.spine .sp-fit.is-on rect{stroke:var(--copper); fill:rgba(199,81,46,.08)}
.spine .sp-node circle{fill:var(--paper); stroke:var(--line-3); stroke-width:1; transition:none}
.spine .sp-node .nd-core{fill:var(--paper); stroke:none}
.spine .sp-node.is-on circle{stroke:var(--copper)}
.spine .sp-node.is-on .nd-core{fill:var(--copper)}
.spine .sp-lbl{
  font-family:var(--f-mon); font-size:9px; letter-spacing:.16em; fill:var(--ink-mute);
  opacity:0; transition:opacity .6s var(--e);
}
.spine .sp-node.is-on + .sp-lbl,
.spine .sp-lbl.is-on{opacity:1}
.spine .sp-tee{stroke:var(--line-3); stroke-width:1; fill:none}
.spine .sp-tee.is-on{stroke:var(--copper)}

/* ---------- 6. HEADER ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:600;
  transition:background .45s var(--e), border-color .45s var(--e), backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(242,240,234,.88);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.hdr__in{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gut);
  height:76px; display:flex; align-items:center; gap:clamp(16px,3vw,48px);
}
.hdr.is-stuck .hdr__in{height:64px}
.hdr__in,.hdr.is-stuck .hdr__in{transition:height .4s var(--e)}

.brand{display:flex; align-items:center; gap:11px; flex:none}
.brand__mark{width:28px; height:28px; color:var(--ink)}
.brand__txt{display:flex; flex-direction:column; line-height:1}
.brand__txt strong{
  font-family:var(--f-dis); font-weight:850; font-stretch:118%;
  font-size:1.02rem; letter-spacing:-.02em;
}
.brand__txt em{font-family:var(--f-mon); font-style:normal; font-size:.56rem; letter-spacing:.24em; color:var(--ink-mute); margin-top:3px}

.nav{display:flex; gap:clamp(14px,2vw,32px); margin-left:auto}
.nav a{
  position:relative; display:flex; align-items:baseline; gap:.5em;
  font-size:.86rem; font-weight:450; letter-spacing:-.01em; padding:6px 0;
}
.nav__n{font-family:var(--f-mon); font-size:.58rem; letter-spacing:.1em; color:var(--copper); opacity:.75}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--copper); transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--e-mech);
}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1); transform-origin:left}
.nav a.is-active{color:var(--copper)}

.hdr__act{display:flex; align-items:center; gap:14px; margin-left:auto}
.nav + .hdr__act{margin-left:0}
.hdr__tel{display:flex; align-items:center; gap:.6em; color:var(--ink-soft); transition:color .3s}
.hdr__tel:hover{color:var(--copper)}

.hdr__gauge{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent}
.hdr__gauge i{display:block; height:100%; width:0; background:var(--copper); transition:width .1s linear}

.burger{display:none; width:38px; height:38px; position:relative; border:1px solid var(--line-2); border-radius:var(--r)}
.burger span{position:absolute; left:10px; width:18px; height:1px; background:var(--ink); transition:transform .4s var(--e-mech), opacity .3s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.mnav{position:fixed; inset:0; z-index:590; background:var(--paper); padding-top:76px; overflow-y:auto}
.mnav__in{padding:28px var(--gut) 40px; display:flex; flex-direction:column; gap:2px}
.mnav__in .tag{margin-bottom:22px}
.mnav a{
  display:flex; align-items:baseline; gap:14px; padding:15px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--f-dis); font-weight:750; font-stretch:110%;
  font-size:1.7rem; letter-spacing:-.03em;
}
.mnav a .mono{font-size:.62rem; color:var(--copper)}
.mnav__foot{margin-top:30px; display:flex; flex-direction:column; gap:16px}
.mnav__tel{color:var(--ink-soft); text-align:center}

/* ---------- 7. SECTION SHELL ---------- */
.sec, .qbar, .trust, .ba, .faq, .cform, .diag{position:relative; z-index:1}
.sec{padding-block:var(--sec-y)}
/* keep in-page anchors clear of the fixed header */
section[id], main [id]{scroll-margin-top:clamp(78px,10vh,104px)}
.shead{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,4vw,64px);
  align-items:start; padding-bottom:clamp(40px,5vw,74px);
  border-bottom:1px solid var(--line); margin-bottom:clamp(40px,5vw,72px);
}
.shead--tight{margin-bottom:clamp(28px,3.4vw,48px)}
.shead__num{
  font-size:clamp(2.6rem,5vw,4.4rem); line-height:.8; letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:1px var(--line-3); font-weight:500;
}
.shead__main{max-width:34ch}
.shead__lead{margin-top:18px; font-size:clamp(1.02rem,1.35vw,1.32rem); color:var(--ink-soft); line-height:1.5; letter-spacing:-.012em}
.shead__meta{text-align:right; color:var(--ink-soft); padding-top:.6em}

/* ---------- 8. HERO ---------- */
.hero{position:relative; z-index:1; padding-top:clamp(112px,13vw,168px); padding-bottom:clamp(48px,6vw,86px)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:clamp(32px,4vw,68px); align-items:end}

.hero__h1{margin:clamp(20px,2.4vw,34px) 0 0; line-height:.82}
/* JS measures the word and scales it to fill the column exactly (see initFit).
   The clamp below is the no-JS fallback and stays inside the column on its own. */
.hero__word{
  display:block; font-family:var(--f-dis); font-weight:900; font-stretch:112%;
  font-size:clamp(2.9rem,8vw,7rem); letter-spacing:-.05em; line-height:.82;
  white-space:nowrap;
}
.hero__sub{
  display:flex; align-items:center; gap:16px; margin-top:14px;
  font-family:var(--f-mon); font-size:clamp(.7rem,1.1vw,.9rem);
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft);
}
.hero__rule{flex:none; width:clamp(34px,5vw,74px); height:1px; background:var(--copper); position:relative}
.hero__rule::after{content:""; position:absolute; left:0; top:-2px; width:1px; height:5px; background:var(--copper)}

.hero__slogan{
  margin-top:clamp(28px,3.2vw,46px);
  font-family:var(--f-dis); font-weight:500; font-stretch:100%;
  font-size:clamp(1.5rem,2.9vw,2.5rem); line-height:1.08; letter-spacing:-.035em;
}
.hero__lead{margin-top:20px; max-width:46ch; color:var(--ink-soft); font-size:1.02rem}
.hero__cta{margin-top:clamp(26px,3vw,40px); display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); flex-wrap:wrap}

.hero__strip{
  margin-top:clamp(34px,4vw,54px); padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:clamp(14px,2.6vw,38px); color:var(--ink-soft);
}
.hero__strip li{display:flex; align-items:center; gap:.62em}

/* hero figure */
.hero__right{position:relative}
.hfig{position:relative}
.hfig__frame{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:var(--paper-3); aspect-ratio:4/5;
  box-shadow:0 1px 0 rgba(21,21,21,.08), 0 34px 70px -44px rgba(21,21,21,.55);
}
.hfig__frame img{width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.02); transition:transform 1.4s var(--e)}
.hfig:hover .hfig__frame img{transform:scale(1.028)}
.hfig__grain{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.16;
  background:linear-gradient(120deg,rgba(21,21,21,.22),transparent 45%,rgba(21,21,21,.16));
}
.reg{position:absolute; width:16px; height:16px; pointer-events:none; opacity:.85}
.reg::before,.reg::after{content:""; position:absolute; background:rgba(242,240,234,.85)}
.reg::before{width:16px; height:1px; top:0}
.reg::after{height:16px; width:1px; left:0}
.reg--tl{top:14px; left:14px}
.reg--tr{top:14px; right:14px; transform:scaleX(-1)}
.reg--bl{bottom:14px; left:14px; transform:scaleY(-1)}
.reg--br{bottom:14px; right:14px; transform:scale(-1)}

.hot{position:absolute; left:var(--hx); top:var(--hy); display:flex; align-items:center; gap:9px; pointer-events:none}
.hot--l{flex-direction:row-reverse}
.hot i{
  position:relative; width:7px; height:7px; border:1px solid var(--copper); border-radius:50%; flex:none;
  background:rgba(199,81,46,.2); opacity:0; transform:scale(.4); transition:opacity .45s var(--e), transform .45s var(--e-mech);
}
.hot i::after{content:""; position:absolute; left:50%; top:50%; width:2px; height:2px; background:var(--copper); transform:translate(-50%,-50%); border-radius:50%}
.hot b{
  font-family:var(--f-mon); font-size:.6rem; letter-spacing:.14em; font-weight:400;
  color:#fff; background:rgba(21,21,21,.78); padding:4px 8px; border-radius:1px; white-space:nowrap;
  opacity:0; transform:translateY(4px); transition:opacity .5s var(--e), transform .5s var(--e);
  backdrop-filter:blur(3px);
}
.hfig:hover .hot i,.hfig.is-touch .hot i{opacity:1; transform:scale(1)}
.hfig:hover .hot b,.hfig.is-touch .hot b{opacity:1; transform:none}
.hot:nth-of-type(2) i,.hot:nth-of-type(2) b{transition-delay:.07s}
.hot:nth-of-type(3) i,.hot:nth-of-type(3) b{transition-delay:.14s}
.hot:nth-of-type(4) i,.hot:nth-of-type(4) b{transition-delay:.21s}

.meas{position:absolute; left:20px; right:20px; bottom:52px; height:1px; background:rgba(242,240,234,.5); opacity:0; transition:opacity .5s var(--e)}
.meas::before,.meas::after{content:""; position:absolute; top:-4px; width:1px; height:9px; background:rgba(242,240,234,.6)}
.meas::before{left:0}
.meas::after{right:0}
.meas b{
  position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  background:rgba(21,21,21,.72); color:#fff; padding:2px 7px; font-size:.56rem; letter-spacing:.14em;
}
.hfig:hover .meas,.hfig.is-touch .meas{opacity:1}

.hfig__cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:14px; margin-top:14px; border-top:1px solid var(--line);
}
.hfig__cap .mono{color:var(--ink-soft)}
.hfig__cap-t{font-size:.9rem; color:var(--ink)}

.lockfit{
  position:absolute; left:-34px; bottom:74px; width:clamp(72px,7vw,96px);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--paper); padding:10px 8px; border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink-mute);
}
.lockfit svg{width:100%; height:auto; display:block}
.lockfit__nut{transform-origin:42px 42px; transform:rotate(-72deg); opacity:0}
.is-loaded .lockfit__nut{animation:lock 1.5s var(--e-mech) .55s forwards}
@keyframes lock{
  0%{transform:rotate(-72deg); opacity:0}
  30%{opacity:1}
  72%{transform:rotate(6deg)}
  100%{transform:rotate(0deg); opacity:1}
}
.lockfit__lbl{font-size:.54rem; letter-spacing:.12em; color:var(--ink-mute)}

.hfig__note{margin-top:16px; display:flex; gap:10px; color:var(--ink-mute); align-items:baseline}
.hfig__note-n{color:var(--copper)}

.hero__scroll{
  position:absolute; left:var(--gut); bottom:18px; display:flex; align-items:center; gap:10px;
  color:var(--ink-mute); letter-spacing:.24em;
}
.hero__scroll i{width:1px; height:26px; background:var(--line-3); position:relative; overflow:hidden}
.hero__scroll i::after{content:""; position:absolute; inset:0; background:var(--copper); animation:scrl 2.6s var(--e) infinite}
@keyframes scrl{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- 9. QUICK CONTACT BAR ---------- */
.qbar{border-block:1px solid var(--line); background:var(--paper-2)}
.qbar__in{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); flex-wrap:wrap;
  padding-block:16px;
}
.qbar__status{display:flex; align-items:center; gap:9px; font-size:.85rem; font-weight:450}
.qbar__q{
  font-family:var(--f-dis); font-weight:750; font-stretch:106%;
  font-size:clamp(1.05rem,1.6vw,1.35rem); letter-spacing:-.03em;
  padding-left:clamp(0px,2vw,22px); border-left:1px solid var(--line);
}
.qbar__loc{display:flex; align-items:center; gap:.6em; color:var(--ink-soft)}
.qbar__pin{width:7px; height:7px; border:1px solid var(--ink-soft); transform:rotate(45deg); flex:none}
.qbar__c{display:flex; align-items:center; gap:.6em; color:var(--ink-soft); transition:color .3s}
.qbar__c:hover{color:var(--copper)}
.qbar__cta{
  margin-left:auto; display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mon); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  padding:11px 18px; border:1px solid var(--ink); border-radius:var(--r);
  transition:background .35s var(--e), color .35s var(--e);
}
.qbar__cta span{transition:transform .35s var(--e-mech)}
.qbar__cta:hover{background:var(--ink); color:var(--paper)}
.qbar__cta:hover span{transform:translateX(4px)}

/* ---------- 10. SERVICES ---------- */
.svc{position:relative; padding-block:78px 62px}
.svc__bus{position:absolute; left:0; width:100%; pointer-events:none; z-index:1; overflow:visible}
.svc__bus--top{top:0; height:78px}
.svc__bus--bot{bottom:0; height:62px}
.svc__bus .nb path,.svc__bus .ne path{fill:none; stroke:var(--line-2); stroke-width:1; vector-effect:non-scaling-stroke}
.svc__bus .ne path{stroke:var(--line-3)}
.svc__bus .nn circle{
  fill:var(--paper); stroke:var(--line-3); stroke-width:1; vector-effect:non-scaling-stroke;
  transition:fill .35s var(--e), stroke .35s var(--e);
}
.svc__bus .nn circle.is-on{fill:var(--copper); stroke:var(--copper)}
.svc__bus .nl path{
  fill:none; stroke:var(--copper); stroke-width:1.7; vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--l,600); stroke-dashoffset:var(--l,600); opacity:0;
  transition:stroke-dashoffset .75s var(--e-mech), opacity .18s var(--e);
}
.svc__bus .nl path.is-on{opacity:1; stroke-dashoffset:0}
.svc__buslbl{position:absolute; left:calc(50% + 16px); color:var(--ink-mute); font-size:.56rem; pointer-events:none; z-index:1}
.svc__buslbl--top{top:20px}
.svc__buslbl--bot{bottom:22px}

.svc__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.svc__i{
  position:relative; background:var(--paper); padding:clamp(20px,1.8vw,28px);
  min-height:clamp(280px,25vw,340px); display:flex; flex-direction:column;
  transition:background .45s var(--e), transform .45s var(--e);
  cursor:default; overflow:hidden;
}
.svc__i::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--copper); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--e-mech);
}
.svc__i:hover,.svc__i:focus-visible,.svc__i.is-hot{background:var(--paper-2)}
.svc__i:hover::before,.svc__i:focus-visible::before,.svc__i.is-hot::before{transform:scaleX(1)}
.svc__k{color:var(--copper); font-size:.6rem; order:1}
.svc__d{position:absolute; top:clamp(20px,1.8vw,28px); right:clamp(20px,1.8vw,28px); color:var(--ink-mute); font-size:.6rem}
.svc__i h3{
  order:3; margin-top:22px;
  font-family:var(--f-dis); font-weight:700; font-stretch:104%;
  font-size:clamp(1.06rem,1.35vw,1.28rem); line-height:1.08; letter-spacing:-.03em;
}
.svc__p{
  order:4; margin-top:10px;
  font-size:.85rem; line-height:1.5; color:var(--ink-soft);
}
.svc__node{
  position:absolute; left:clamp(20px,1.8vw,28px); bottom:-5px; width:9px; height:9px;
  border:1px solid var(--line-3); border-radius:50%; background:var(--paper);
  transition:border-color .4s, background .4s, transform .4s var(--e-mech);
}
.svc__i:hover .svc__node,.svc__i:focus-visible .svc__node,.svc__i.is-hot .svc__node{
  border-color:var(--copper); background:var(--copper); transform:scale(1.25);
}
.svc__sch{
  order:2; width:100%; max-width:132px; height:auto;
  margin:24px 0 auto; opacity:.3;
  transition:opacity .5s var(--e), transform .6s var(--e);
}
.svc__i:hover .svc__sch,.svc__i:focus-visible .svc__sch,.svc__i.is-hot .svc__sch{opacity:1; transform:translateX(3px)}
.svc__sch .ln{fill:none; stroke:var(--ink); stroke-width:1.3}
.svc__sch .ln--ac{stroke:var(--copper)}
.svc__sch .thin{stroke-width:.8; opacity:.6}
.svc__sch .dash{stroke-dasharray:3 3}
.svc__sch .dotm{fill:var(--copper)}
.svc__sch .fill-ac{fill:var(--copper); stroke:none}
/* the floor-heating loop draws itself once, when the grid reveals */
.svc__sch .loop{stroke-dasharray:340; stroke-dashoffset:340; transition:stroke-dashoffset 1.4s var(--e) .25s}
.svc__grid.is-in .svc__sch .loop{stroke-dashoffset:0}
.svc__sch .needle{transform-origin:60px 32px; transform:rotate(-40deg); transition:transform 1s var(--e-mech)}
.svc__i:hover .svc__sch .needle,.svc__i.is-hot .svc__sch .needle{transform:rotate(28deg)}
.svc__i--urg .svc__k{color:var(--copper)}
.svc__i--urg::after{content:""; position:absolute; inset:0; border:1px solid rgba(199,81,46,.25); pointer-events:none}

.svc__foot{
  margin-top:26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  color:var(--ink-soft);
}
.svc__foot .link-arrow{margin-left:auto}

/* ---------- 11. MATERIALS ---------- */
.mats{position:relative; z-index:2; background:var(--ink); color:var(--paper); padding-block:clamp(64px,7vw,110px)}
.mats__head{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,52px)}
.mats__h{
  font-family:var(--f-dis); font-weight:600; font-stretch:104%;
  font-size:clamp(1.3rem,2.5vw,2.1rem); line-height:1.1; letter-spacing:-.035em; max-width:22ch;
}
.mats__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-inv)}
.mat{background:var(--ink); padding:0 0 22px}
.mat__img{position:relative; aspect-ratio:4/5; overflow:hidden; background:#0d0d0d}
.mat__img img{width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.05); transition:transform 1.1s var(--e), filter .6s}
.mat:hover .mat__img img{transform:scale(1.05); filter:saturate(1) contrast(1.05)}
.mat__sym{
  position:absolute; left:14px; bottom:12px; color:var(--paper);
  font-size:.68rem; letter-spacing:.2em; padding:4px 8px;
  border:1px solid rgba(242,240,234,.4); background:rgba(21,21,21,.45); backdrop-filter:blur(3px);
}
.mat h3{
  margin:18px 18px 12px;
  font-family:var(--f-dis); font-weight:700; font-stretch:106%;
  font-size:clamp(1.1rem,1.5vw,1.35rem); letter-spacing:-.03em;
}
.mat__spec{margin:0 18px; display:grid; gap:7px}
.mat__spec div{display:flex; justify-content:space-between; gap:10px; padding-bottom:7px; border-bottom:1px solid var(--line-inv)}
.mat__spec dt{color:rgba(242,240,234,.45); font-size:.58rem}
.mat__spec dd{margin:0; color:rgba(242,240,234,.9); font-size:.58rem; text-align:right}
.mats__note{margin-top:clamp(26px,3vw,42px); color:rgba(242,240,234,.5); max-width:62ch; letter-spacing:.06em; text-transform:none; font-size:.76rem; line-height:1.7}

/* ---------- 12. PROJECTS ---------- */
.projs{display:grid; gap:clamp(56px,7vw,120px)}
.proj{display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:clamp(28px,4vw,66px); align-items:start}
.proj--flip .proj__media{order:2}
.proj--flip .proj__body{order:1}

.proj__media{position:relative}
.proj__main{position:relative; overflow:hidden; border-radius:var(--r); background:var(--paper-3); aspect-ratio:4/3}
.proj__main img{width:100%; height:100%; object-fit:cover; filter:saturate(.92); transition:transform 1.3s var(--e)}
.proj:hover .proj__main img{transform:scale(1.03)}
.proj__scan{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,rgba(199,81,46,.28),transparent 12%);
  transform:translateY(-100%); transition:transform 1.1s var(--e-mech);
}
.proj.is-in .proj__scan{transform:translateY(100%)}
.proj__overlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity .7s var(--e)}
.proj:hover .proj__overlay{opacity:1}
.proj__overlay .lp{fill:none; stroke:var(--copper); stroke-width:1.6; stroke-dasharray:2200; stroke-dashoffset:2200; opacity:.85}
.proj:hover .proj__overlay .lp{animation:drawlp 2.4s var(--e) forwards}
@keyframes drawlp{to{stroke-dashoffset:0}}
.proj__overlay .pt{fill:var(--copper)}

.proj__detail{
  position:absolute; right:-14px; bottom:-32px; width:clamp(122px,17vw,224px);
  border:5px solid var(--paper); border-radius:var(--r); overflow:hidden;
  box-shadow:0 20px 44px -28px rgba(21,21,21,.6); background:var(--paper-3);
}
.proj__detail img{aspect-ratio:1; object-fit:cover; width:100%}
.proj__detail--mani img{aspect-ratio:4/3}
.proj__detail figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:6px 8px;
  background:rgba(21,21,21,.72); color:var(--paper); font-size:.52rem; letter-spacing:.14em;
}
.proj--flip .proj__detail{right:auto; left:-14px}

.proj__body{padding-top:clamp(0px,1vw,14px)}
.proj__idx{display:flex; align-items:center; gap:12px; color:var(--copper)}
.proj__idx span{font-size:.8rem}
.proj__idx i{width:34px; height:1px; background:var(--copper); display:block; flex:none}
.proj__h{
  margin-top:14px;
  font-family:var(--f-dis); font-weight:800; font-stretch:110%;
  font-size:clamp(1.8rem,3.3vw,2.9rem); line-height:.98; letter-spacing:-.04em;
}
.proj__txt{margin-top:16px; color:var(--ink-soft); max-width:44ch}
.proj__tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:20px}
.proj__tags li{
  padding:6px 11px; border:1px solid var(--line-2); border-radius:var(--r);
  font-size:.6rem; color:var(--ink-soft); background:var(--paper-2);
}
.meta{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:26px 0 24px; background:var(--line); border:1px solid var(--line)}
.meta div{background:var(--paper); padding:13px 14px}
.meta dt{color:var(--ink-mute); font-size:.56rem}
.meta dd{margin:5px 0 0; font-size:.92rem; letter-spacing:-.01em}

/* vertical reveal (project 03) */
.vreveal{position:relative; overflow:hidden; border-radius:var(--r); aspect-ratio:3/2; background:var(--paper-3)}
.vreveal img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.vreveal__old{position:absolute; inset:0; overflow:hidden; height:var(--rv,58%); transition:height 1.15s var(--e-mech)}
.vreveal__old img{height:auto; min-height:100%}
.proj.is-in .vreveal__old{height:var(--rv-in,0%)}
.vreveal:hover .vreveal__old{height:0%}
.vreveal__line{
  position:absolute; left:0; right:0; top:var(--rv,58%); height:1px; background:var(--paper);
  box-shadow:0 0 0 1px rgba(21,21,21,.2); transition:top 1.15s var(--e-mech);
}
.vreveal__line::before{
  content:""; position:absolute; left:0; right:0; top:-3px; height:7px;
  background:repeating-linear-gradient(90deg,var(--copper) 0 8px,transparent 8px 16px); opacity:.5;
}
.proj.is-in .vreveal__line{top:var(--rv-in,0%)}
.vreveal:hover .vreveal__line{top:0}
.vreveal__lbl{
  position:absolute; left:14px; padding:5px 9px; background:rgba(21,21,21,.74); color:var(--paper);
  font-size:.56rem; letter-spacing:.16em; transition:opacity .5s;
}
.vreveal__lbl--a{top:14px}
.vreveal__lbl--b{bottom:14px; background:var(--copper)}
.vreveal:hover .vreveal__lbl--a{opacity:0}

/* ---------- 13. EXPLODED VIEW ---------- */
.expl{position:relative; z-index:2; background:var(--ink-2); color:var(--paper); padding-block:clamp(72px,9vw,140px); overflow:hidden}
.expl::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(var(--line-inv) 1px,transparent 1px),linear-gradient(90deg,var(--line-inv) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 78%);
}
.expl__head{position:relative; max-width:60ch; margin-bottom:clamp(30px,4vw,52px)}
.expl__h{
  margin-top:18px;
  font-family:var(--f-dis); font-weight:800; font-stretch:110%;
  font-size:clamp(2rem,4.6vw,3.8rem); line-height:.96; letter-spacing:-.04em;
}
.expl__lead{margin-top:18px; color:rgba(242,240,234,.62); max-width:52ch}

.expl__stage{position:relative}
.expl__svg{width:100%; height:auto; display:block; overflow:visible}
.expl__svg .axis{stroke:var(--line-inv); stroke-width:1; stroke-dasharray:8 6}
.expl__svg .ticks path{stroke:var(--line-inv-2); stroke-width:1}
.expl__svg .part{transform:translateX(calc(var(--fx) * (1 - var(--asm,0))))}
.expl__svg .pipe-body{fill:#8E4A2D}
.expl__svg .pipe-hi{fill:#C97B52; opacity:.75}
.expl__svg .pipe-sh{fill:#5E2C17; opacity:.7}
.expl__svg .edge{stroke:rgba(242,240,234,.5); stroke-width:1}
.expl__svg .brass{fill:#8E7233; stroke:#C6A65A; stroke-width:1}
.expl__svg .knurl{stroke:rgba(242,240,234,.25); stroke-width:1}
.expl__svg .seal{fill:var(--copper); opacity:.9}
.expl__svg .seal-ring{fill:none; stroke:#E6A183; stroke-width:1}
.expl__svg .steel{fill:#3B3E40; stroke:rgba(242,240,234,.4); stroke-width:1}
.expl__svg .steel-hi{fill:#565B5E; opacity:.8}
.expl__svg .valve-b{fill:#3B3E40; stroke:rgba(242,240,234,.4); stroke-width:1}
.expl__svg .valve-c{fill:var(--copper)}
.expl__svg .stem{stroke:rgba(242,240,234,.6); stroke-width:4}
.expl__svg .handle{fill:var(--copper)}
.expl__svg .lead path{fill:none; stroke:rgba(242,240,234,.34); stroke-width:1}
.expl__svg .lbl{fill:var(--paper); font-family:var(--f-mon); font-size:13px; letter-spacing:.14em}
.expl__svg .sub{fill:rgba(242,240,234,.45); font-family:var(--f-mon); font-size:11px; letter-spacing:.08em}
.expl__svg .dim path{stroke:rgba(242,240,234,.28); stroke-width:1}
.expl__svg .dimlbl{fill:rgba(242,240,234,.5); font-family:var(--f-mon); font-size:11px; letter-spacing:.16em; text-anchor:middle}
.expl__svg .lead{opacity:calc(1 - var(--asm,0) * .55)}

.expl__bar{display:flex; align-items:center; gap:16px; margin-top:26px; color:rgba(242,240,234,.6)}
.expl__track{flex:1; height:2px; background:var(--line-inv); position:relative; overflow:hidden}
.expl__track i{position:absolute; inset:0; width:0; background:var(--copper)}
.expl__pct{min-width:4ch; text-align:right; color:var(--copper)}

.expl__hint{
  display:none; align-items:center; gap:.7em; margin-top:12px;
  color:rgba(242,240,234,.45); font-size:.58rem;
}
.expl__hint i{width:22px; height:1px; background:currentColor; display:block}
.expl__facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(36px,4vw,58px); background:var(--line-inv)}
.expl__facts li{background:var(--ink-2); padding:20px 18px; color:rgba(242,240,234,.72); font-size:.66rem; letter-spacing:.1em; line-height:1.6}
.expl__facts b{display:block; color:var(--copper); margin-bottom:8px; font-weight:400}

/* ---------- 14. PROCESS ---------- */
.proc{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.proc__s{
  position:relative; background:var(--paper); padding:clamp(24px,2.4vw,36px);
  display:flex; flex-direction:column; min-height:clamp(240px,24vw,320px);
  transition:background .5s var(--e);
}
.proc__s.is-on{background:var(--paper-2)}
.proc__n{
  font-size:clamp(2rem,3.4vw,3rem); line-height:.8; font-weight:400;
  color:transparent; -webkit-text-stroke:1px var(--line-3);
  transition:-webkit-text-stroke-color .6s var(--e), color .6s var(--e);
}
.proc__s.is-on .proc__n{-webkit-text-stroke-color:var(--copper)}
.proc__c{margin-top:auto}
.proc__c h3{
  font-family:var(--f-dis); font-weight:750; font-stretch:108%;
  font-size:clamp(1.24rem,1.8vw,1.6rem); letter-spacing:-.035em; line-height:1;
}
.proc__c p{margin-top:12px; font-size:.92rem; color:var(--ink-soft); line-height:1.5}
.proc__note{display:inline-block; margin-top:16px; color:var(--copper); font-size:.58rem}
.proc__ic{
  position:absolute; right:clamp(20px,2vw,30px); top:clamp(24px,2.4vw,36px);
  width:clamp(36px,3.4vw,46px); height:auto; opacity:.2; transition:opacity .5s var(--e), transform .7s var(--e-mech);
}
.proc__s.is-on .proc__ic{opacity:.9; transform:translateY(-2px)}
.proc__ic .ln{fill:none; stroke:var(--ink); stroke-width:1.5}
.proc__ic .ln--ac{stroke:var(--copper)}
.proc__ic .thin{stroke-width:1; opacity:.5}
.proc__ic .fill-ac{fill:var(--copper)}
.proc__s::after{
  content:""; position:absolute; right:-7px; top:50%; width:13px; height:13px; z-index:2;
  border-right:1px solid var(--line-3); border-bottom:1px solid var(--line-3);
  transform:translateY(-50%) rotate(-45deg); background:var(--paper);
  transition:border-color .5s var(--e);
}
.proc__s:last-child::after{display:none}
.proc__s.is-on::after{border-color:var(--copper)}

.proc__human{display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,44px); margin-top:clamp(28px,3vw,42px)}
.proc__human li{
  display:flex; align-items:baseline; gap:.7em;
  font-family:var(--f-dis); font-weight:500; font-stretch:102%;
  font-size:clamp(1rem,1.5vw,1.28rem); letter-spacing:-.03em;
}
.proc__human .mono{color:var(--copper); font-size:.8rem}

/* ---------- 15. DIAGNOSTIC ---------- */
.diag{padding-bottom:var(--sec-y)}
.diag__box{border:1px solid var(--line); background:var(--paper-2); padding:clamp(24px,3.2vw,52px); border-radius:var(--r)}
.diag__head{max-width:56ch; margin-bottom:clamp(26px,3vw,40px)}
.diag__head .h3{margin-top:16px}
.diag__lead{margin-top:14px; color:var(--ink-soft)}
.diag__grid{display:grid; grid-template-columns:minmax(0,.9fr) 90px minmax(0,1.2fr); gap:0; align-items:stretch}

.diag__opts{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line)}
.opt{
  position:relative; display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  flex:1 1 0; min-height:54px;
  padding:15px 18px; background:var(--paper); font-size:.98rem; letter-spacing:-.015em;
  transition:background .35s var(--e), padding-left .35s var(--e-mech);
}
.opt:hover{background:var(--paper-3); padding-left:24px}
.opt[aria-checked="true"]{background:var(--ink); color:var(--paper)}
.opt__v{
  width:14px; height:14px; border:1px solid var(--line-3); border-radius:50%; flex:none; position:relative;
  transition:border-color .35s, transform .5s var(--e-mech);
}
.opt__v::after{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:1px; background:var(--line-3);
  transform:translate(-50%,-50%); transition:background .35s;
}
.opt:hover .opt__v{border-color:var(--copper)}
.opt[aria-checked="true"] .opt__v{border-color:var(--copper); transform:rotate(90deg)}
.opt[aria-checked="true"] .opt__v::after{background:var(--copper)}

.diag__route{width:100%; height:100%; min-height:120px}
.diag__route .dr{fill:none; stroke:var(--line-2); stroke-width:1; vector-effect:non-scaling-stroke}
.diag__route .dr--live{stroke:var(--copper); stroke-width:1.6; stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset .8s var(--e-mech)}
.diag__route.is-on .dr--live{stroke-dashoffset:0}
.diag__route .dr-dot{fill:var(--copper); opacity:0}
.diag__route.is-on .dr-dot{opacity:1; animation:flowdot 1.8s var(--e) infinite}
@keyframes flowdot{0%{transform:translateX(0)}100%{transform:translateX(120px)}}

.diag__out{border:1px solid var(--line); background:var(--paper); padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; justify-content:center; min-height:100%}
.diag__empty{display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--ink-mute); padding:24px 0}
.diag__idle{width:52px; height:52px}
.diag__idle .ln{fill:none; stroke:currentColor; stroke-width:1.4}
.diag__idle .thin{stroke-width:1}
.diag__idle .dash{stroke-dasharray:4 4; animation:spin 24s linear infinite; transform-origin:30px 30px}
@keyframes spin{to{transform:rotate(360deg)}}

.diag__r{animation:fade .55s var(--e) both}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.diag__r-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.diag__r-k{padding:5px 10px; background:var(--ink); color:var(--paper); font-family:var(--f-mon); font-size:.58rem; letter-spacing:.15em}
.diag__r-u{padding:5px 10px; border:1px solid var(--copper); color:var(--copper); font-family:var(--f-mon); font-size:.58rem; letter-spacing:.15em}
.diag__r h3{font-family:var(--f-dis); font-weight:750; font-stretch:106%; font-size:clamp(1.3rem,2.1vw,1.75rem); letter-spacing:-.035em; line-height:1.04}
.diag__r p{margin-top:14px; color:var(--ink-soft); max-width:46ch}
.diag__r-list{margin-top:18px; display:grid; gap:7px}
.diag__r-list li{display:flex; gap:10px; align-items:baseline; font-size:.82rem; color:var(--ink-soft)}
.diag__r-list li::before{content:""; width:6px; height:6px; border-left:1px solid var(--copper); border-bottom:1px solid var(--copper); flex:none; transform:translateY(-1px)}
.diag__r-cta{margin-top:24px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line)}

/* ---------- 16. WHY ---------- */
.why{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.why__i{
  position:relative; background:var(--paper); padding:clamp(28px,3.4vw,54px);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .5s var(--e);
}
.why__i:hover{background:var(--paper-2)}
.why__n{
  position:absolute; top:clamp(28px,3.4vw,54px); right:clamp(28px,3.4vw,54px);
  color:var(--line-3); font-size:.72rem;
}
.why__ic{width:clamp(48px,4.6vw,64px); height:auto; margin-bottom:26px}
.why__ic .ln{fill:none; stroke:var(--ink); stroke-width:1.5}
.why__ic .ln--ac{stroke:var(--copper)}
.why__ic .thin{stroke-width:1; opacity:.4}
.why__ic .fill-ac{fill:var(--copper)}
.why__h{
  font-family:var(--f-dis); font-weight:800; font-stretch:112%;
  font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:.98; letter-spacing:-.04em;
}
.why__p{margin-top:16px; color:var(--ink-soft); max-width:40ch}

.why__quote{
  margin-top:clamp(40px,4.6vw,72px); padding:clamp(28px,3.4vw,52px);
  border:1px solid var(--line); background:var(--paper-2); border-left:2px solid var(--copper);
}
.why__quote p{
  font-family:var(--f-dis); font-weight:500; font-stretch:102%;
  font-size:clamp(1.2rem,2.4vw,2rem); line-height:1.18; letter-spacing:-.035em; max-width:34ch;
}
.why__quote footer{margin-top:20px; color:var(--ink-mute)}

/* ---------- 17. TRUST / GAUGE ---------- */
.trust{padding-block:var(--sec-y); border-top:1px solid var(--line)}
.trust__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(32px,5vw,90px); align-items:center}
.trust__h{margin-top:20px}
.trust__lead{margin-top:22px; color:var(--ink-soft); max-width:46ch}
.qc{margin-top:clamp(28px,3vw,44px); border-top:1px solid var(--line)}
.qc__i{display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:1rem; letter-spacing:-.015em}
.qc__i em{margin-left:auto; color:var(--ink-mute); font-style:normal}
.qc__box{
  width:15px; height:15px; border:1px solid var(--line-3); flex:none; position:relative;
  transition:border-color .4s var(--e);
}
.qc__box::after{
  content:""; position:absolute; left:2px; top:4px; width:9px; height:5px;
  border-left:1.5px solid var(--copper); border-bottom:1.5px solid var(--copper);
  transform:rotate(-45deg) scale(0); transform-origin:center;
  transition:transform .5s var(--e-mech);
}
.qc__i.is-on .qc__box{border-color:var(--copper)}
.qc__i.is-on .qc__box::after{transform:rotate(-45deg) scale(1)}

.trust__right{position:relative; display:flex; flex-direction:column; align-items:center; gap:20px}
.gauge{position:relative; width:min(100%,420px)}
.gauge svg{width:100%; height:auto; display:block}
.g-face{fill:var(--paper-2)}
.g-ring{fill:none; stroke:var(--line-3); stroke-width:1.2}
.g-ring2{fill:none; stroke:var(--line); stroke-width:1}
.g-ticks line{stroke:var(--line-3); stroke-width:1}
.g-ticks line.maj{stroke:var(--ink); stroke-width:1.4}
.g-ticks text{fill:var(--ink-soft); font-family:var(--f-mon); font-size:11px; text-anchor:middle}
.g-ok{stroke:var(--copper); stroke-width:5; opacity:.85; stroke-dasharray:var(--okl,0); stroke-dashoffset:var(--okl,0); transition:stroke-dashoffset 1.6s var(--e) .3s}
.gauge.is-on .g-ok{stroke-dashoffset:0}
.g-lbl{fill:var(--ink-mute); font-family:var(--f-mon); font-size:12px; letter-spacing:.24em; text-anchor:middle}
.g-val{fill:var(--ink); font-family:var(--f-dis); font-weight:800; font-size:38px; text-anchor:middle; letter-spacing:-.03em}
.g-sub{fill:var(--ink-mute); font-family:var(--f-mon); font-size:10px; letter-spacing:.2em; text-anchor:middle}
.g-needle{fill:var(--ink); transform-origin:150px 150px; transform:rotate(-135deg); transition:transform 2.2s var(--e-mech)}
.g-hub{fill:var(--ink)}
.g-hub2{fill:var(--copper)}

.stamp{position:absolute; right:-6%; bottom:2%; width:clamp(88px,11vw,130px); opacity:0; transform:rotate(-16deg) scale(.7)}
.gauge.is-on .stamp{animation:stampin .7s var(--e-mech) 1.9s forwards}
@keyframes stampin{0%{opacity:0; transform:rotate(-30deg) scale(1.5)}60%{opacity:1; transform:rotate(-11deg) scale(.96)}100%{opacity:1; transform:rotate(-13deg) scale(1)}}
.st-c{fill:none; stroke:var(--copper); stroke-width:2.4}
.st-c--thin{stroke-width:1; opacity:.6}
.st-check{fill:none; stroke:var(--copper); stroke-width:4; stroke-linecap:square}
.st-t{fill:var(--copper); font-family:var(--f-mon); font-size:14px; letter-spacing:.2em; text-anchor:middle}
.st-t--sm{font-size:8px; letter-spacing:.14em}
.gauge__cap{color:var(--ink-mute); text-align:center; max-width:40ch}

/* ---------- 18. BEFORE / AFTER ---------- */
.ba{padding-block:var(--sec-y); background:var(--paper-2); border-block:1px solid var(--line)}
.ba__head{max-width:62ch; margin-bottom:clamp(30px,3.6vw,48px)}
.ba__head .h2{margin-top:18px}
.ba__lead{margin-top:18px; color:var(--ink-soft); max-width:46ch}
.ba__stage{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.45fr); gap:clamp(24px,3vw,48px); align-items:start}
.ba__wrapimg{position:relative; overflow:hidden; border-radius:var(--r); aspect-ratio:3/2; background:var(--paper-3); user-select:none; cursor:ew-resize; touch-action:pan-y}
.ba__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.92)}
/* clip-path keeps the "after" image perfectly registered with the "before" one */
.ba__after{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--sp,50%)) 0 0)}
.ba__divider{position:absolute; top:0; bottom:0; left:var(--sp,50%); width:0; z-index:3; pointer-events:none}
.ba__line{position:absolute; top:0; bottom:0; left:-.5px; width:1px; background:var(--paper)}
.ba__line::before{
  content:""; position:absolute; left:-2px; top:0; bottom:0; width:5px;
  background:repeating-linear-gradient(to bottom,var(--copper) 0 10px,transparent 10px 20px); opacity:.55;
}
.ba__handle{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%); pointer-events:auto;
  width:52px; height:52px; border-radius:50%; background:var(--paper); color:var(--ink);
  border:1px solid var(--line-3); display:grid; place-items:center;
  box-shadow:0 8px 26px -12px rgba(21,21,21,.6); transition:transform .3s var(--e-mech), border-color .3s;
}
.ba__handle svg{width:26px; height:26px}
.ba__handle:hover{border-color:var(--copper); color:var(--copper); transform:translate(-50%,-50%) scale(1.07)}
.ba__tag{position:absolute; top:16px; padding:6px 10px; font-size:.58rem; letter-spacing:.16em; z-index:2; background:rgba(21,21,21,.74); color:var(--paper)}
.ba__tag--a{left:16px}
.ba__tag--b{right:16px; background:var(--copper)}

.ba__notes{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.ba__notes li{background:var(--paper); padding:18px 18px 20px; display:grid; gap:6px}
.ba__notes span{color:var(--copper); font-family:var(--f-mon); font-size:.62rem; letter-spacing:.14em}
.ba__notes b{font-size:.98rem; font-weight:550; letter-spacing:-.02em}
.ba__notes em{font-style:normal; font-size:.82rem; color:var(--ink-soft); line-height:1.5}

/* ---------- 19. SERVICE AREA / MAP ---------- */
.area__big{
  font-family:var(--f-dis); font-weight:900; font-stretch:120%;
  font-size:clamp(2.4rem,8.6vw,8rem); line-height:.86; letter-spacing:-.05em;
  margin-bottom:clamp(28px,3.4vw,50px);
}
.area__grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr); gap:clamp(24px,3.4vw,56px); align-items:start}
.map{position:relative; border:1px solid var(--line); background:var(--paper); border-radius:var(--r); padding:clamp(8px,1vw,16px)}
.map svg{width:100%; height:auto; display:block; color:var(--ink)}
.map__grid{color:var(--ink)}
.map__land{fill:var(--paper-4); stroke:var(--line-2); stroke-width:1}
.map__coast{fill:none; stroke:var(--line-3); stroke-width:1.4}
.map__sea path{fill:none; stroke:var(--line-2); stroke-width:1; stroke-linecap:round; opacity:.75}
.map__contour path{fill:none; stroke:var(--line-2); stroke-width:1; stroke-dasharray:5 5}
.map__river path{fill:none; stroke:var(--line-2); stroke-width:1.2}
.map__route{
  fill:none; stroke:var(--copper); stroke-width:1.8; stroke-linejoin:round;
  stroke-dasharray:var(--rl,900); stroke-dashoffset:var(--rl,900); transition:stroke-dashoffset 2.4s var(--e);
}
.map.is-on .map__route{stroke-dashoffset:0}
.map__branch{fill:none; stroke:var(--copper); stroke-width:1.2; stroke-dasharray:4 4; opacity:0; transition:opacity .8s var(--e) 1.4s}
.map.is-on .map__branch{opacity:.7}
.map__frame path{fill:none; stroke:var(--line-3); stroke-width:1}
.map__anno{fill:var(--ink-mute); font-family:var(--f-mon); font-size:11px; letter-spacing:.16em}
.map__anno--r{text-anchor:end}
.map__anno--c{text-anchor:middle}
.map__north path{stroke:var(--line-3); stroke-width:1; fill:none}

.town{cursor:pointer}
.t-hit{fill:transparent}
.t-dot{fill:var(--ink); transition:fill .3s, r .3s var(--e-mech)}
.t-ring{fill:none; stroke:var(--copper); stroke-width:1.2; opacity:.55}
.town[data-main] .t-dot{fill:var(--copper); r:6}
.town .t-lbl{fill:var(--ink-soft); font-family:var(--f-mon); font-size:11px; letter-spacing:.14em; text-anchor:middle; transition:fill .3s}
.town .t-lbl--main{fill:var(--ink); font-size:15px; letter-spacing:.16em}
.town .t-sub{fill:var(--ink-mute); font-family:var(--f-mon); font-size:9px; letter-spacing:.08em; text-anchor:middle}
.town:hover .t-dot,.town.is-on .t-dot{fill:var(--copper); r:6}
.town:hover .t-lbl,.town.is-on .t-lbl{fill:var(--copper)}

.map__read{
  position:absolute; right:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px);
  display:grid; grid-template-columns:auto auto; gap:4px 14px;
  background:var(--paper); border:1px solid var(--line-2); padding:12px 15px; border-radius:var(--r);
}
.map__read-k{color:var(--ink-mute); font-size:.56rem}
.map__read-v{color:var(--ink); font-size:.62rem}

.area__list ul{margin:18px 0 22px; border-top:1px solid var(--line)}
.area__list li{
  display:flex; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);
  font-size:1rem; letter-spacing:-.015em; cursor:pointer; transition:color .3s, padding-left .35s var(--e-mech);
}
.area__list li .mono{color:var(--ink-mute); font-size:.58rem}
.area__list li em{margin-left:auto; font-style:normal; color:var(--ink-mute); font-family:var(--f-mon); font-size:.56rem; letter-spacing:.12em}
.area__list li:hover,.area__list li.is-on{color:var(--copper); padding-left:8px}
.area__list li:hover .mono,.area__list li.is-on .mono{color:var(--copper)}
.area__note{color:var(--ink-soft); font-size:.88rem; padding-top:4px}

/* ---------- 20. EMERGENCY ---------- */
.emg{position:relative; z-index:2; background:#1A1210; color:var(--paper); padding-block:clamp(56px,7vw,104px); overflow:hidden}
.emg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 78% 50%,rgba(199,81,46,.26),transparent 58%);
}
.emg__in{position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(30px,4vw,72px); align-items:center}
.emg__h{margin-top:18px; color:var(--paper)}
.emg__lead{margin-top:20px; color:rgba(242,240,234,.66); max-width:46ch}
.emg__list{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.emg__list li{
  display:flex; align-items:center; gap:.65em; padding:8px 13px;
  border:1px solid rgba(242,240,234,.2); color:rgba(242,240,234,.82); font-size:.62rem; border-radius:var(--r);
}
.emg__list i{width:5px; height:5px; background:var(--copper-lt); border-radius:50%; flex:none}

.emg__right{display:flex; flex-direction:column; align-items:center; gap:18px}
.valve{display:flex; flex-direction:column; align-items:center; gap:20px; width:min(100%,320px)}
.valve__svg{width:100%; height:auto; display:block}
.v-plate{fill:#241614}
.v-ring{fill:none; stroke:rgba(242,240,234,.24); stroke-width:1.4}
.v-ring--in{stroke:rgba(242,240,234,.12)}
.v-handle{transform-origin:120px 120px; transition:transform 1.1s var(--e-mech)}
.valve:hover .v-handle,.valve:focus-visible .v-handle{transform:rotate(48deg)}
.v-wheel{fill:none; stroke:var(--copper-lt); stroke-width:5}
.v-wheel--in{stroke:rgba(217,106,66,.35); stroke-width:1.4}
.v-spoke{stroke:var(--copper-lt); stroke-width:5; stroke-linecap:round}
.v-hub{fill:var(--copper)}
.v-tel{fill:#fff}
.valve__cta{
  display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  font-family:var(--f-dis); font-weight:800; font-stretch:112%;
  font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.035em; line-height:1;
}
.valve__cta em{font-style:normal; font-size:.62rem; letter-spacing:.18em; color:var(--copper-lt); font-weight:400}
.emg__note{color:rgba(242,240,234,.4); text-align:center; font-size:.56rem}

/* ---------- 21. FAQ ---------- */
.faq{padding-block:var(--sec-y)}
.faq__grid{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(30px,4.6vw,86px); align-items:start}
.faq__aside .h2{margin-top:20px}
.faq__lead{margin-top:20px; color:var(--ink-soft); max-width:32ch}
.faq__aside .link-arrow{margin-top:26px}
.faq__list{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq summary{
  display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); padding:22px 0; cursor:pointer; list-style:none;
  transition:color .3s;
}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--copper)}
.fq__n{color:var(--ink-mute); flex:none; font-size:.6rem}
.fq summary:hover .fq__n,.fq[open] .fq__n{color:var(--copper)}
.fq__q{
  font-family:var(--f-dis); font-weight:600; font-stretch:104%;
  font-size:clamp(1.02rem,1.55vw,1.32rem); letter-spacing:-.03em; line-height:1.2; flex:1;
}
.fq__v{
  position:relative; width:22px; height:22px; flex:none; border:1px solid var(--line-3); border-radius:50%;
  transition:transform .5s var(--e-mech), border-color .4s;
}
.fq__v::before,.fq__v::after{content:""; position:absolute; left:50%; top:50%; background:var(--ink); transition:background .4s}
.fq__v::before{width:11px; height:1px; transform:translate(-50%,-50%)}
.fq__v::after{width:1px; height:11px; transform:translate(-50%,-50%)}
.fq[open] .fq__v{transform:rotate(90deg); border-color:var(--copper)}
.fq[open] .fq__v::before,.fq[open] .fq__v::after{background:var(--copper)}
.fq[open] .fq__v::after{height:0}
.fq__a{overflow:hidden; padding:0 0 24px}
.fq__a p{color:var(--ink-soft); max-width:64ch; padding-left:clamp(0px,4vw,58px)}
.fq[open] .fq__a{animation:fq .5s var(--e)}
@keyframes fq{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

/* ---------- 22. FORM ---------- */
.cform{padding-block:var(--sec-y); background:var(--paper-2); border-top:1px solid var(--line)}
.form{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:clamp(24px,3.4vw,58px); align-items:start}
.form__types,.form__fields,.form__files{grid-column:1}
.form__send{grid-column:1}
.form__aside{grid-column:2; grid-row:1 / span 4; position:sticky; top:96px}
.form__legend{
  display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-bottom:12px;
  border-bottom:1px solid var(--line); width:100%;
  font-family:var(--f-dis); font-weight:650; font-stretch:104%; font-size:1.06rem; letter-spacing:-.025em;
}
.form__legend .mono{
  width:22px; height:22px; display:grid; place-items:center; flex:none;
  border:1px solid var(--copper); color:var(--copper); font-size:.58rem; border-radius:50%;
}
.form__types{margin-bottom:clamp(26px,3vw,40px)}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{
  display:flex; align-items:center; gap:.7em; padding:13px 19px;
  border:1px solid var(--line-2); background:var(--paper); border-radius:var(--r);
  font-size:.95rem; letter-spacing:-.015em; transition:all .35s var(--e);
}
.chip span::before{
  content:""; width:8px; height:8px; border:1px solid var(--line-3); border-radius:50%; flex:none;
  transition:all .35s var(--e);
}
.chip:hover span{border-color:var(--line-3)}
.chip input:checked + span{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip input:checked + span::before{background:var(--copper); border-color:var(--copper)}
.chip input:focus-visible + span{outline:2px solid var(--copper); outline-offset:2px}

.form__fields{margin-bottom:clamp(26px,3vw,40px)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px}
.fld{display:flex; flex-direction:column; gap:8px}
.fld label{font-family:var(--f-mon); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.fld input,.fld textarea{
  font:inherit; font-size:1rem; padding:14px 16px; background:var(--paper);
  border:1px solid var(--line-2); border-radius:var(--r); color:var(--ink); width:100%;
  transition:border-color .3s, background .3s;
}
.fld textarea{resize:vertical; min-height:120px; line-height:1.55}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-mute); opacity:.75}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--copper); background:#fff}
.fld input:user-invalid{border-color:var(--copper-dk)}

.form__files{margin-bottom:clamp(26px,3vw,40px)}
.drop{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:clamp(26px,3.4vw,44px); border:1px dashed var(--line-3); border-radius:var(--r);
  background:var(--paper); cursor:pointer; transition:border-color .35s, background .35s;
}
.drop:hover,.drop.is-over{border-color:var(--copper); background:var(--paper-3)}
.drop__ic{width:44px; height:auto}
.drop__ic .ln{fill:none; stroke:var(--ink); stroke-width:1.4}
.drop__ic .ln--ac{stroke:var(--copper)}
.drop__t{font-family:var(--f-dis); font-weight:650; font-size:1.02rem; letter-spacing:-.025em}
.drop__s{font-size:.86rem; color:var(--ink-soft); max-width:42ch}
.drop__list{color:var(--copper); font-size:.58rem; margin-top:4px}

.form__send .btn{max-width:460px}
.form__legal{margin-top:14px; color:var(--ink-mute); text-transform:none; letter-spacing:.04em; font-size:.66rem}
.form__ok{
  margin-top:20px; padding:20px 22px; border:1px solid var(--copper); background:rgba(199,81,46,.06);
  display:grid; gap:6px; max-width:460px; border-radius:var(--r); animation:fade .5s var(--e);
}
.form__ok[hidden]{display:none}   /* the class's display would otherwise beat [hidden] */
.form__ok-ic{color:var(--copper); font-size:1.2rem; line-height:1}
.form__ok b{font-size:1rem; letter-spacing:-.02em}
.form__ok em{font-style:normal; font-size:.86rem; color:var(--ink-soft)}

.form__aside{border:1px solid var(--line); background:var(--paper); padding:24px; border-radius:var(--r)}
.form__next{margin:18px 0 24px; display:grid; gap:1px; background:var(--line)}
.form__next li{background:var(--paper); display:flex; gap:12px; padding:12px 0; font-size:.66rem; letter-spacing:.08em; color:var(--ink-soft); align-items:baseline}
.form__next span{color:var(--copper)}
.form__call{padding-top:18px; border-top:1px solid var(--line)}
.form__call p{font-size:.9rem; color:var(--ink-soft)}
.form__call a{display:block; margin-top:6px; font-size:.86rem; letter-spacing:.1em; color:var(--copper)}

/* ---------- 23. FINAL CTA ---------- */
.fcta{position:relative; z-index:2; background:#101010; color:var(--paper); overflow:hidden; padding-block:clamp(84px,11vw,168px)}
.fcta__bg{position:absolute; inset:0; opacity:.42}
.fcta__bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(.2) contrast(1.05)}
.fcta::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,#101010 30%,rgba(16,16,16,.72) 58%,rgba(16,16,16,.35));
}
.fcta__pipe{position:absolute; right:6%; top:0; width:clamp(180px,26vw,400px); height:auto; z-index:2; overflow:visible}
.fp-base{fill:none; stroke:rgba(242,240,234,.16); stroke-width:2}
.fp-live{
  fill:none; stroke:var(--copper); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:var(--fl,420); stroke-dashoffset:var(--fl,420); transition:stroke-dashoffset 1.6s var(--e);
}
.fcta.is-on .fp-live{stroke-dashoffset:0}
.fp-fit rect{fill:none; stroke:rgba(242,240,234,.3); stroke-width:1.4}
.fcta.is-on .fp-fit rect{stroke:var(--copper-lt)}
.fp-valve{transform-origin:352px 190px; transform:rotate(-52deg) scale(.7); opacity:0}
.fcta.is-on .fp-valve{animation:valvelock 1.1s var(--e-mech) 1.5s forwards}
@keyframes valvelock{0%{transform:rotate(-52deg) scale(.7); opacity:0}50%{opacity:1}80%{transform:rotate(6deg) scale(1.04)}100%{transform:rotate(0) scale(1); opacity:1}}
.fpv-b{fill:none; stroke:var(--copper); stroke-width:2}
.fpv-i{fill:none; stroke:rgba(242,240,234,.35); stroke-width:1.2}
.fpv-s{stroke:var(--copper); stroke-width:3; stroke-linecap:round}
.fpv-c{fill:var(--copper)}

.fcta__in{position:relative; z-index:3; max-width:900px}
.fcta__h{
  margin-top:22px;
  font-family:var(--f-dis); font-weight:900; font-stretch:118%;
  font-size:clamp(3rem,10vw,8.6rem); line-height:.84; letter-spacing:-.05em;
  color:var(--copper-lt);
}
.fcta__lead{margin-top:26px; color:rgba(242,240,234,.72); max-width:44ch; font-size:clamp(1.02rem,1.3vw,1.2rem)}
.fcta__cta{margin-top:clamp(30px,3.6vw,48px); display:flex; align-items:center; gap:clamp(20px,3vw,44px); flex-wrap:wrap}
.fcta__tel{display:flex; flex-direction:column; gap:6px; transition:color .3s}
.fcta__tel .mono{color:rgba(242,240,234,.5)}
.fcta__tel b{font-family:var(--f-dis); font-weight:700; font-stretch:106%; font-size:clamp(1.2rem,2vw,1.6rem); letter-spacing:-.03em}
.fcta__tel:hover{color:var(--copper-lt)}
.fcta__strip{
  margin-top:clamp(40px,5vw,72px); padding-top:20px; border-top:1px solid var(--line-inv);
  display:flex; flex-wrap:wrap; gap:clamp(14px,2.6vw,40px); color:rgba(242,240,234,.45);
}

/* ---------- 24. FOOTER ---------- */
.ftr{position:relative; z-index:2; background:var(--ink); color:var(--paper); padding-top:clamp(56px,6vw,90px); overflow:hidden}
.ftr__bg{position:absolute; inset:0; width:100%; height:100%; opacity:.34; pointer-events:none}
.ftr__net path{fill:none; stroke:var(--line-inv-2); stroke-width:1}
.ftr__dots circle{fill:var(--copper); opacity:.5}
.ftr__in{
  position:relative; display:grid; grid-template-columns:1.3fr 1fr 1.2fr 1fr;
  gap:clamp(24px,3vw,52px); padding-bottom:clamp(44px,5vw,72px);
}
.ftr__mark{width:40px; height:40px; color:var(--paper); margin-bottom:20px}
.ftr__name{font-family:var(--f-dis); font-weight:900; font-stretch:118%; font-size:1.5rem; letter-spacing:-.035em; line-height:1}
.ftr__name em{font-family:var(--f-mon); font-style:normal; font-size:.6rem; letter-spacing:.24em; color:rgba(242,240,234,.5); display:inline-block; margin-top:8px}
.ftr__desc{margin-top:20px; color:rgba(242,240,234,.6); font-size:.92rem; line-height:1.6}
.ftr__kt{margin-top:20px; color:rgba(242,240,234,.32); font-size:.54rem}
.ftr__lbl{color:rgba(242,240,234,.4); margin-bottom:20px}
.ftr__nav{display:flex; flex-direction:column; gap:2px}
.ftr__nav a{padding:7px 0; color:rgba(242,240,234,.82); font-size:.98rem; letter-spacing:-.015em; transition:color .3s, padding-left .35s var(--e-mech)}
.ftr__nav a:hover{color:var(--copper-lt); padding-left:7px}
.ftr__contact p{margin-bottom:16px; color:rgba(242,240,234,.82); font-size:.94rem; line-height:1.5}
.ftr__k{display:block; color:rgba(242,240,234,.38); font-size:.54rem; margin-bottom:4px}
.ftr__contact a{transition:color .3s}
.ftr__contact a:hover{color:var(--copper-lt)}
.ftr__contact .ac{color:var(--copper-lt)}
.ftr__hours dl{display:grid; gap:9px}
.ftr__hours dl div{display:flex; justify-content:space-between; gap:12px; padding-bottom:9px; border-bottom:1px solid var(--line-inv)}
.ftr__hours dt{color:rgba(242,240,234,.42); font-size:.56rem}
.ftr__hours dd{margin:0; color:rgba(242,240,234,.85); font-size:.56rem}
.ftr__status{display:flex; align-items:center; gap:9px; margin-top:20px; font-size:.86rem; color:rgba(242,240,234,.8)}

.ftr__bot{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-block:22px; border-top:1px solid var(--line-inv); color:rgba(242,240,234,.42);
}
.ftr__legal{display:flex; gap:12px; font-size:.82rem}
.ftr__legal a{border-bottom:1px solid var(--line-inv-2)}
.ftr__legal a:hover{color:var(--copper-lt); border-color:var(--copper-lt)}
.ftr__sep{opacity:.4}
.ftr__credit{display:flex; align-items:center; gap:12px}
.mota{
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px;
  border:1px solid var(--line-inv-2); border-radius:var(--r); color:var(--paper);
  font-family:var(--f-mon); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .35s var(--e), color .35s var(--e), background .35s var(--e);
}
.mota__m{width:14px; height:14px}
.mota:hover{border-color:var(--copper-lt); color:var(--copper-lt); background:rgba(199,81,46,.08)}

/* ---------- 25. MOBILE ACTION BAR ---------- */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:580; display:none;
  background:rgba(242,240,234,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:9px;
}
.mbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.6em; padding:15px 12px;
  font-family:var(--f-mon); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; border-radius:var(--r);
}
.mbar__call{border:1px solid var(--ink)}
.mbar__cta{background:var(--copper); color:#fff}

/* ---------- 26. REVEAL ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .85s var(--e) var(--d,0s), transform .85s var(--e) var(--d,0s)}
.reveal.is-in,.is-loaded .hero .reveal{opacity:1; transform:none}
[data-anim]{opacity:0; transform:translateY(22px); transition:opacity .9s var(--e), transform .9s var(--e)}
[data-anim].is-in{opacity:1; transform:none}
[data-anim-stagger] > *{opacity:0; transform:translateY(18px); transition:opacity .8s var(--e), transform .8s var(--e)}
[data-anim-stagger].is-in > *{opacity:1; transform:none}
[data-anim-stagger].is-in > *:nth-child(1){transition-delay:.02s}
[data-anim-stagger].is-in > *:nth-child(2){transition-delay:.08s}
[data-anim-stagger].is-in > *:nth-child(3){transition-delay:.14s}
[data-anim-stagger].is-in > *:nth-child(4){transition-delay:.2s}
[data-anim-stagger].is-in > *:nth-child(5){transition-delay:.26s}
[data-anim-stagger].is-in > *:nth-child(6){transition-delay:.32s}
[data-anim-stagger].is-in > *:nth-child(7){transition-delay:.38s}
[data-anim-stagger].is-in > *:nth-child(8){transition-delay:.44s}

/* pipe anchors are invisible geometry markers */
.p-anchor{position:absolute; left:var(--x); top:var(--y); width:0; height:0; pointer-events:none}

/* ---------- 27. RESPONSIVE ---------- */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:block}
  .svc__grid{grid-template-columns:repeat(2,1fr)}
  .svc__bus,.svc__buslbl{display:none}
  .svc{padding-block:0}
  .proc{grid-template-columns:repeat(2,1fr)}
  .proc__s:nth-child(2)::after{display:none}
  .expl__facts{grid-template-columns:repeat(2,1fr)}
  .ftr__in{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr; gap:44px; align-items:start}
  .hero__right{max-width:620px}
  .lockfit{left:auto; right:-10px; bottom:auto; top:-28px}
  .hero__scroll{display:none}
  .shead{grid-template-columns:auto 1fr; row-gap:24px}
  .shead__meta{grid-column:1 / -1; text-align:left; border-top:1px solid var(--line); padding-top:16px}
  .proj{grid-template-columns:1fr; gap:34px}
  .proj--flip .proj__media{order:1}
  .proj--flip .proj__body{order:2}
  .proj__detail{width:clamp(112px,22vw,180px)}
  .trust__grid{grid-template-columns:1fr; gap:48px}
  .ba__stage{grid-template-columns:1fr}
  .area__grid{grid-template-columns:1fr}
  .emg__in{grid-template-columns:1fr; gap:40px}
  .faq__grid{grid-template-columns:1fr; gap:36px}
  .form{grid-template-columns:1fr}
  .form__aside{grid-column:1; grid-row:auto; position:static}
  .mats__grid{grid-template-columns:repeat(2,1fr)}
  .diag__grid{grid-template-columns:1fr}
  .diag__route{display:none}
  .diag__opts{border-bottom:0}
  .diag__out{border-top:0}
}
@media (max-width:760px){
  :root{--sec-y:clamp(64px,13vw,92px)}
  body{font-size:15.5px}

  /* section headers stack: number above title, meta below the rule */
  .shead{grid-template-columns:1fr; gap:12px; padding-bottom:28px; margin-bottom:32px}
  .shead__num{font-size:clamp(2rem,9vw,2.6rem)}
  .h2{font-size:clamp(2.05rem,9vw,3.4rem)}
  .shead__lead{margin-top:12px; font-size:1.02rem}
  .shead__meta{margin-top:4px}

  /* the exploded connection stays legible by scrolling sideways */
  .expl__stage{overflow-x:auto; overflow-y:hidden; padding-bottom:6px; scrollbar-width:thin}
  .expl__svg,.expl__bar{min-width:660px}
  .expl__hint{display:flex}

  /* map: bigger annotation type, readout moves out of the drawing */
  .map .t-lbl{font-size:17px}
  .map .t-lbl--main{font-size:23px}
  .map .t-sub{display:none}
  .map__anno{font-size:15px}
  .map__read{position:static; margin-top:10px; justify-content:start}
  .hdr__tel{display:none}
  /* the sticky bottom bar already carries both actions — don't crowd the header */
  .hdr__act .btn--sm{display:none}
  .hdr__in{gap:12px}
  .qbar__in{gap:12px 18px; padding-block:14px}
  .qbar__q{border-left:0; padding-left:0; width:100%}
  .qbar__cta{margin-left:0; width:100%; justify-content:center}
  .svc__grid{grid-template-columns:1fr}
  .svc__i{min-height:0}
  .svc__p{max-height:none; opacity:1; margin-top:11px}
  .svc__sch{opacity:.5}
  .svc__i h3{padding-top:18px}
  .mats__grid{grid-template-columns:1fr}
  .mat__img{aspect-ratio:16/9}
  .proj__detail{position:relative; right:auto; left:auto; bottom:auto; width:100%; border-width:0; margin-top:14px; box-shadow:none}
  .proj--flip .proj__detail{left:auto}
  .meta{grid-template-columns:1fr}
  .proc{grid-template-columns:1fr}
  .proc__s{min-height:0}
  .proc__s::after{right:50%; top:auto; bottom:-7px; transform:translateX(50%) rotate(45deg)}
  .proc__s:nth-child(2)::after{display:block}
  .expl__facts{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .ftr__in{grid-template-columns:1fr; gap:34px}
  .ftr__bot{flex-direction:column; align-items:flex-start; gap:14px}
  .mbar{display:flex}
  body{padding-bottom:74px}
  .stamp{right:0; bottom:-4%}
  .ba__handle{width:44px; height:44px}
  .fcta__pipe{right:-10%; opacity:.5}
}
@media (max-width:760px){
  /* simplified single riser hugging the left margin */
  .p-anchor{left:var(--mx,3.4%)}
}

/* ---------- 28. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal,[data-anim],[data-anim-stagger] > *{opacity:1 !important; transform:none !important}
  .spine .sp-live,.map__route,.fp-live{stroke-dashoffset:0 !important}
  .expl__svg .part{transform:none}
}

/* ---------- 29. PRINT ---------- */
@media print{
  .hdr,.mbar,.spine,.mnav,.hero__scroll{display:none !important}
  body{background:#fff}
  .mats,.expl,.emg,.fcta,.ftr{background:#fff !important; color:#000 !important}
}