/* ==========================================================================
   Υδραυλικός Παπαδόπουλος, v2 "Γραμμή"
   White page, flat colour blocks, sharp corners, and one pipe line
   (the logo's elbow) that runs down the page with brass fittings.
   ========================================================================== */

/* ---------- Fonts (self-hosted, Greek + Latin subsets) ---------- */
@font-face{font-family:"Geologica";src:url("../assets/fonts/geologica-greek.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Geologica";src:url("../assets/fonts/geologica-latin.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/jetbrains-mono-greek.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  /* neutrals, tinted toward the brand blue */
  --paper:   oklch(99.3% 0.003 250);   /* page */
  --mist:    oklch(96.6% 0.007 250);   /* fields, quiet surfaces */
  --rule:    oklch(89.5% 0.013 250);   /* hairlines */
  --ink:     oklch(22% 0.038 255);     /* text, navy blocks */
  --ink-2:   oklch(44% 0.035 255);     /* secondary text, 7.5:1 */
  --ink-3:   oklch(52% 0.03 255);      /* meta, 5:1 */

  /* logo blues, exact */
  --deep:       #0060aa;
  --deep-press: oklch(41% 0.13 254);
  --sky:        #0096c9;

  /* the one accent */
  --brass:     #e0b04e;                /* on navy / deep only */
  --brass-ink: #8a6414;                /* brass on white, 5.4:1 */

  /* text on colour */
  --on-dark:   oklch(98.5% 0.006 250);
  --on-dark-2: oklch(93% 0.022 250);
  --on-ink-2:  oklch(80% 0.03 252);

  /* the pipe */
  --rail-c: var(--deep);
  --rail-w: 2px;
  --fit-c:  var(--brass-ink);

  /* type */
  --font: "Geologica", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-sm:   0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.1875rem, 1.06rem + 0.45vw, 1.4375rem);
  --fs-h3:   clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-h2:   clamp(2rem, 1.35rem + 2.3vw, 3.5rem);
  --fs-hero: clamp(2rem, 1.2rem + 3.1vw, 3.25rem);
  --fs-mega: clamp(2.75rem, 1.2rem + 6vw, 7rem);

  /* layout */
  --maxw: 1440px;
  --pad:  clamp(16px, 3vw, 40px);
  --gut:  30px;            /* room left of the content for the pipe */
  --rail-x: 7px;           /* pipe position inside the gutter */
  --sec:  clamp(80px, 4.5vw + 48px, 136px);
  --header-h: 64px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px){ :root{ --gut: 48px; --rail-x: 12px; --fs-body: 1.125rem; } }
@media (min-width: 1024px){ :root{ --gut: 64px; --rail-x: 18px; --header-h: 72px; } }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;word-spacing:-0.3em}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--on-dark);padding:12px 18px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.rz{padding-left:var(--gut)}

/* ---------- Type ---------- */
.h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-0.032em;line-height:1.06;text-wrap:balance;max-width:20ch}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.lead--narrow{max-width:52ch}
.prose{display:grid;gap:1em;color:var(--ink-2);max-width:62ch}
.note{font-size:var(--fs-sm);color:var(--ink-3);max-width:46ch}
.eyebrow{font-size:var(--fs-sm);font-weight:500;color:var(--deep);margin-bottom:20px}
.eyebrow--on-dark{color:var(--brass)}

/* ---------- The pipe ----------
   .rail     vertical pipe, spans its section
   .head     tee from the pipe into a heading, with a brass fitting  */
.rail{position:absolute;top:0;bottom:0;width:var(--rail-w);
  left:calc(max(0px, (100% - var(--maxw)) / 2) + var(--pad) + var(--rail-x));
  background:var(--rail-c);transform-origin:50% 0;pointer-events:none}
.head{position:relative}
.head::before,.head::after{content:"";position:absolute;pointer-events:none}
.head::before{ /* tee stub */
  top:.56em;left:calc(var(--rail-x) - var(--gut));width:calc(var(--gut) - var(--rail-x) - 12px);
  height:var(--rail-w);background:var(--rail-c);transform-origin:0 50%}
.head::after{ /* fitting: a short collar across the pipe */
  top:calc(.56em - 6px);left:calc(var(--rail-x) - var(--gut) - 5px);width:calc(var(--rail-w) + 10px);height:14px;
  background:var(--fit-c)}
@media (max-width: 767px){
  .head::before{width:calc(var(--gut) - var(--rail-x) - 8px)}
}

/* ---------- Buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:2px;border:1.5px solid transparent;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:default;transition:background-color .18s,color .18s,border-color .18s,transform .12s}
a.btn,button.btn{cursor:pointer}
a.btn:active,button.btn:active{transform:translateY(1px)}
.btn .ic{width:18px;height:18px}
.btn--sm{min-height:44px;padding:0 18px;font-size:.9375rem}
.btn--block{width:100%}
.btn--deep{background:var(--deep);color:var(--on-dark)}
a.btn--deep:hover,button.btn--deep:hover{background:var(--deep-press)}
.btn--line{border-color:var(--ink);color:var(--ink)}
a.btn--line:hover{background:var(--ink);color:var(--on-dark)}
.btn--ink{background:var(--ink);color:var(--on-dark)}
button.btn--ink:hover{background:oklch(30% 0.045 255)}
a.btn .ic,button.btn .ic{transition:transform .2s var(--ease-out)}
a.btn:hover .ic[aria-hidden],button.btn:hover .ic{transform:translateX(3px)}
a.btn--deep:hover .ic:first-child{transform:none}

.link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-weight:600;color:var(--deep);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:3px;transition:background-size .3s var(--ease-out)}
.link:hover{background-size:100% 1.5px}
.link .ic{width:18px;height:18px}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s}
.header.is-scrolled{border-bottom-color:var(--rule)}
.header__inner{height:var(--header-h);display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand__mark{width:auto;height:34px}
.brand__word{display:flex;flex-direction:column;font-weight:800;font-size:15px;line-height:1;letter-spacing:.01em}
.brand__word small{font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--deep);margin-bottom:3px}
.brand--on-dark{color:var(--on-dark)}
.brand--on-dark .brand__word small{color:var(--sky)}
.nav{margin-left:auto}
.nav__list{display:flex;gap:30px}
.nav__list a{font-size:.9375rem;color:var(--ink-2);text-decoration:none;padding:8px 0;
  background:linear-gradient(var(--deep),var(--deep)) 0 calc(100% - 2px)/0 1.5px no-repeat;transition:color .15s,background-size .25s var(--ease-out)}
.nav__list a:hover{color:var(--ink);background-size:100% 1.5px}
.header__end{display:flex;align-items:center;gap:20px;margin-left:36px}
.header__phone{font-size:.9375rem;color:var(--ink)}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1.5px solid var(--rule);background:var(--paper);border-radius:2px;cursor:pointer}
.menu-btn .ic{width:22px;height:22px}

@media (max-width: 1023px){
  .header__end{margin-left:auto;gap:12px}
  .menu-btn{display:inline-flex}
  .nav{position:absolute;left:0;right:0;top:100%;margin:0;background:var(--paper);border-bottom:1px solid var(--rule);
    padding:8px var(--pad) 24px;display:none}
  .nav.is-open{display:block}
  .nav__list{flex-direction:column;gap:0}
  .nav__list a{display:block;padding:14px 0;font-size:1.125rem;color:var(--ink);border-bottom:1px solid var(--rule);background:none}
}
@media (max-width: 767px){
  .header__phone,.header__end .btn{display:none}
}

/* ---------- 1. Hero ---------- */
.hero{position:relative}
.hero__top{position:relative;padding-top:clamp(40px, 4vw, 64px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px, 27vw, 400px);gap:48px;align-items:start}
.hero__title{font-size:var(--fs-hero);font-weight:700;letter-spacing:-0.035em;line-height:1.06}
.hero__title span{display:block;color:var(--deep)}
.hero__lede{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:48ch;margin-top:22px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.quick{background:var(--deep);color:var(--on-dark);padding:30px 30px 32px}
.quick__title{font-size:1.5rem;font-weight:600;letter-spacing:-0.02em;line-height:1.2;margin-bottom:20px}
.quick .field label{color:var(--on-dark-2)}
.quick .field input,.quick .select select{border-color:transparent;background:var(--paper)}
.quick .btn{margin-top:8px}
.quick :focus-visible{outline-color:var(--brass)}

.hero__media{position:relative;margin-top:clamp(40px, 4vw, 64px)}
.hero__media .wrap{position:relative;z-index:2}
.hero__media picture img{width:100%;height:clamp(240px, 30vw, 460px);object-fit:cover;object-position:50% 40%;margin-top:-56px}

/* the strip that overlaps the photo, the pipe turns into it */
.facts{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--paper);border-top:1px solid var(--rule);margin-left:var(--gut);padding-left:0}
.facts li{padding:22px 24px 24px;border-right:1px solid var(--rule);display:flex;flex-direction:column;justify-content:center;min-height:112px}
.facts li:last-child{border-right:0}
.facts strong{font-size:1.875rem;font-weight:700;letter-spacing:-0.03em;line-height:1.1}
.facts strong.num{font-size:1.3125rem;font-weight:500;letter-spacing:-0.01em;padding:6px 0 4px}
.facts span{font-size:var(--fs-sm);color:var(--ink-2);margin-top:4px}
.facts__note span{color:var(--ink);font-size:var(--fs-sm);line-height:1.5;margin:0}
/* elbow from the hero pipe into the strip */
.facts::before{content:"";position:absolute;pointer-events:none;
  left:calc(var(--rail-x) - var(--gut));width:calc(var(--gut) - var(--rail-x));
  top:calc(-1 * clamp(40px, 4vw, 64px) - 1px);height:calc(clamp(40px, 4vw, 64px) + 1px);
  border-left:var(--rail-w) solid var(--rail-c);border-bottom:var(--rail-w) solid var(--rail-c);border-bottom-left-radius:18px;
  transform-origin:0 0}
.rail--hero{top:0}

@media (max-width: 1023px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .quick{max-width:560px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li:nth-child(2){border-right:0}
  .facts li:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
@media (max-width: 767px){
  .quick{display:none}
  .hero__ctas .btn{flex:1 1 100%}
  .facts li{padding:16px 16px 18px;min-height:96px}
  .facts strong{font-size:1.5rem}
  .facts strong.num{font-size:1.0625rem}
  .facts__note{grid-column:1 / -1}
  .hero__media picture img{margin-top:0;height:240px}
}

/* ---------- Form fields (shared) ---------- */
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:.875rem;font-weight:500;color:var(--ink-2)}
.field input,.field textarea,.select select{color:var(--ink);width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--rule);border-radius:2px;background:var(--mist);font-size:1rem;line-height:1.4;transition:border-color .15s,background-color .15s}
.field textarea{resize:vertical;min-height:120px}
.field input:hover,.field textarea:hover,.select select:hover{border-color:oklch(80% 0.02 250)}
.field input:focus,.field textarea:focus,.select select:focus{outline:none;border-color:var(--deep);background:var(--paper)}
.field input:focus-visible,.field textarea:focus-visible,.select select:focus-visible{outline:2px solid var(--deep);outline-offset:1px}
.select{position:relative}
.select select{appearance:none;padding-right:44px;cursor:pointer}
.select select:has(option[value=""]:checked){color:var(--ink-3)}
.select option{color:var(--ink)}
.select .ic{position:absolute;right:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);pointer-events:none;color:var(--ink-2)}

/* ---------- Sections ---------- */
.sec{position:relative;padding-block:var(--sec)}
.sec + .sec{padding-top:0}
.block{position:relative;padding-block:var(--sec)}
.block--deep{background:var(--deep);color:var(--on-dark);--rail-c:oklch(74% 0.09 236);--fit-c:var(--brass)}
.block--ink{background:var(--ink);color:var(--on-dark);--rail-c:var(--sky);--fit-c:var(--brass)}
.block .lead{color:var(--on-dark-2)}
.block :focus-visible{outline-color:var(--brass)}

/* 2. Intro: text + tall image */
.intro{padding-top:var(--sec)}
.intro__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px, 6vw, 112px);align-items:end}
.intro__copy .lead{margin-top:28px}
.intro__copy .prose{margin-top:24px}
.intro__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width: 1023px){
  .intro__grid{grid-template-columns:1fr}
  .intro__media img{aspect-ratio:4/3}
}

/* 3. Services: cell grid */
.services .lead{margin-top:20px}
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-left:var(--gut);padding-left:0}
.svc__cell{display:flex;flex-direction:column;padding:28px 26px 26px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-height:380px;background:var(--paper)}
.svc__title{font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.015em;line-height:1.25;margin-bottom:14px;text-wrap:balance}
.svc__cell p{font-size:.9688rem;line-height:1.6;color:var(--ink-2)}
.svc__more{margin-top:10px}
.svc__cta{margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-weight:600;font-size:.9375rem;color:var(--deep);text-decoration:none}
.svc__cta .ic{width:17px;height:17px;transition:transform .2s var(--ease-out)}
.svc__cta:hover .ic{transform:translateX(4px)}
.svc__cell--deep{background:var(--deep);color:var(--on-dark)}
.svc__cell--deep p{color:var(--on-dark-2)}
.svc__cell--deep .svc__cta{color:var(--on-dark)}
.svc__cell--deep .svc__cta:focus-visible{outline-color:var(--brass)}
.svc__cell--photo{padding-top:0}
.svc__img{margin:0 -26px 24px;overflow:hidden}
.svc__img img{width:100%;aspect-ratio:16/10;object-fit:cover}
@media (max-width: 1199px){ .svc{grid-template-columns:repeat(2,minmax(0,1fr))} .svc__cell{min-height:0} }
@media (max-width: 639px){ .svc{grid-template-columns:1fr} .svc__cell{padding:24px 20px} .svc__img{margin:0 -20px 20px} }

/* 4. Why us: deep block */
.why__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px, 6vw, 112px)}
.why__copy .lead{margin-top:24px}
.why__years{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:end;padding-bottom:36px;border-bottom:1px solid oklch(100% 0 0 / .22)}
.why__years strong{font-size:clamp(6rem, 4rem + 7vw, 11rem);font-weight:700;letter-spacing:-0.06em;line-height:.8}
.why__years h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25}
.why__years p{color:var(--on-dark-2);font-size:.9688rem;margin-top:6px;max-width:34ch}
.why__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px;margin-top:36px}
.why__list .ic{width:26px;height:26px;color:var(--brass);margin-bottom:14px}
.why__list h3{font-size:1.125rem;font-weight:600;line-height:1.3}
.why__list p{font-size:.9688rem;color:var(--on-dark-2);margin-top:6px;line-height:1.6}
@media (max-width: 1023px){ .why__grid{grid-template-columns:1fr} }
@media (max-width: 639px){ .why__list{grid-template-columns:1fr} .why__years{grid-template-columns:1fr;gap:16px} }

/* 5. Emergency: the number is the graphic */
.emergency__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px, 5vw, 96px);align-items:end}
.emergency__copy{display:grid;gap:10px;color:var(--on-ink-2);font-size:var(--fs-lead);line-height:1.5}
.emergency__strong{color:var(--on-dark);font-weight:600}
.emergency__call{margin-top:clamp(48px, 5vw, 80px);color:var(--on-ink-2);max-width:60ch}
.emergency__num{display:flex;align-items:center;gap:clamp(16px, 2vw, 32px);margin-top:12px;color:var(--brass);
  font-size:clamp(2rem, -0.2rem + 9.6vw, 9rem);font-weight:700;letter-spacing:-0.045em;line-height:1;white-space:nowrap}
.emergency__num .ic{width:.62em;height:.62em;stroke-width:1.5}
.emergency__note{margin-top:28px;padding-top:20px;border-top:1px solid oklch(100% 0 0 / .14);color:var(--on-ink-2);font-size:var(--fs-sm)}
@media (max-width: 1023px){ .emergency__top{grid-template-columns:1fr;align-items:start} }

/* 6. Areas: the pipe network */
.areas__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px, 6vw, 112px);align-items:start}
.areas__copy .lead{margin-top:24px}
.areas__copy .note{margin-top:20px}
.net{--drop:30px;--gap:26px;--pw:2.5px;--arm:30px;display:grid;grid-template-columns:auto 1fr auto;align-items:end;padding-top:12px}
.net__hub{grid-column:1;grid-row:1;font-size:1.5rem;font-weight:700;color:var(--deep);letter-spacing:-0.02em;padding-bottom:12px}
.net__end{grid-column:3;grid-row:1;font-size:var(--fs-sm);color:var(--ink-2);padding-bottom:12px}
.net__list{grid-column:1 / -1;grid-row:2;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;row-gap:var(--gap);
  border-top:var(--pw) solid var(--deep);padding:var(--drop) 0 0 clamp(24px, 7%, 72px)}
.net__list::before{content:"";position:absolute;left:0;top:calc(-1 * var(--pw) - 7px);width:12px;height:calc(var(--pw) + 14px);background:var(--brass-ink)}
.net__list::after{content:"";position:absolute;right:0;top:calc(-1 * var(--pw) - 6px);width:var(--pw);height:calc(var(--pw) + 12px);background:var(--deep)}
.net__list li{position:relative;padding-left:calc(var(--arm) + 12px);font-size:1.1875rem;font-weight:500;line-height:1.5}
/* vertical pipe through the item (tee) */
.net__list li::before{content:"";position:absolute;left:0;top:calc(-1 * var(--gap));bottom:0;border-left:var(--pw) solid var(--deep)}
.net__list li span::before{content:"";position:absolute;left:0;top:calc(.75em - var(--pw) / 2);width:var(--arm);border-top:var(--pw) solid var(--deep)}
/* first in a column hangs from the trunk, with a fitting */
.net__list li:nth-child(3n+1)::before{top:calc(-1 * var(--drop) - var(--pw))}
.net__list li:nth-child(3n+1)::after{content:"";position:absolute;left:calc(var(--pw) / 2 - 4px);top:calc(-1 * var(--drop) - var(--pw) - 7px);width:8px;height:calc(var(--pw) + 14px);background:var(--brass-ink)}
/* last in a column ends in an elbow */
.net__list li:nth-child(3n)::before{bottom:auto;height:calc(var(--gap) + .75em + var(--pw) / 2);width:var(--arm);border-bottom:var(--pw) solid var(--deep);border-bottom-left-radius:14px}
.net__list li:nth-child(3n) span::before{display:none}
@media (max-width: 767px){
  .net{grid-template-columns:1fr;--drop:20px;--gap:18px}
  .net__end{grid-column:1;grid-row:3;padding:20px 0 0 calc(var(--arm) + 12px)}
  .net__list{grid-row:2;grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;border-top:0;padding-left:0}
  .net__list::before,.net__list::after,.net__list li:nth-child(3n+1)::after{display:none}
  .net__list li::before,.net__list li:nth-child(3n+1)::before,.net__list li:nth-child(3n)::before{top:calc(-1 * var(--gap));bottom:0;height:auto;width:auto;border-bottom:0;border-radius:0}
  .net__list li:first-child::before{top:calc(-1 * var(--drop))}
  .net__list li:nth-child(3n) span::before{display:block}
  .net__list li:last-child::before{bottom:auto;height:calc(var(--gap) + .75em + var(--pw) / 2);width:var(--arm);border-bottom:var(--pw) solid var(--deep);border-bottom-left-radius:14px}
  .net__list li:last-child span::before{display:none}
}
@media (max-width: 1023px){ .areas__grid{grid-template-columns:1fr} }

/* 7. Process: one horizontal pipe run */
.run{--p:1;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:64px;padding-top:56px}
.run::before,.run::after{content:"";position:absolute;top:0;height:var(--rail-w);left:calc(var(--rail-x) - var(--gut));right:0}
.run::before{background:var(--rule)}
.run::after{background:var(--deep);transform-origin:0 50%;transform:scaleX(var(--p))}
.run__step{position:relative}
.run__step::before{content:"";position:absolute;left:0;top:-62px;width:6px;height:14px;background:var(--brass-ink);z-index:1}
.run__n{display:block;font-size:2.5rem;font-weight:700;color:var(--deep);line-height:1;letter-spacing:-0.04em}
.run__step h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25;margin-top:20px;letter-spacing:-0.015em}
.run__step p{font-size:.9688rem;color:var(--ink-2);margin-top:10px;max-width:30ch}
@media (max-width: 1023px){ .run{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px} }
@media (max-width: 639px){
  .run{grid-template-columns:1fr;padding-top:0;margin-top:40px;row-gap:40px}
  .run::before,.run::after{display:none}
  .run__step::before{left:calc(var(--rail-x) - var(--gut) - 4px);top:.9rem;width:calc(var(--rail-w) + 8px);height:12px}
}

/* 8. Works: asymmetric gallery, captions below */
.works__intro{display:grid;gap:12px;margin-top:24px;max-width:60ch}
.works__intro p:last-child{color:var(--ink-3);font-size:var(--fs-sm)}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 24px;margin-top:56px}
.gallery__item{grid-column:span 5}
.gallery__item--wide{grid-column:span 7}
.gallery__img{overflow:hidden;background:var(--mist)}
.gallery__img img{width:100%;height:clamp(240px, 27vw, 440px);object-fit:cover;transition:transform .7s var(--ease-out)}
.gallery figcaption{display:flex;justify-content:space-between;gap:16px;padding-top:14px;border-top:0}
.gallery figcaption strong{font-weight:600;font-size:1rem}
.gallery figcaption span{font-size:.875rem;color:var(--ink-3);white-space:nowrap}
@media (hover: hover){ .gallery__item:hover .gallery__img img{transform:scale(1.025)} }
@media (max-width: 767px){
  .gallery{grid-template-columns:1fr;gap:32px}
  .gallery__item,.gallery__item--wide{grid-column:auto}
  .gallery__img img{height:auto;aspect-ratio:4/3}
  .gallery figcaption{flex-direction:column;gap:2px}
}

/* 9. Reviews: one quote at a time */
.reviews__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px, 6vw, 112px);align-items:start}
.score{margin-top:40px;display:flex;align-items:baseline;color:var(--brass-ink);line-height:.85}
.score strong{font-size:clamp(5rem, 3rem + 6vw, 9rem);font-weight:700;letter-spacing:-0.06em}
.score__of{font-size:clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem);font-weight:600;color:var(--ink-3);margin-left:6px}
.score__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;font-size:var(--fs-sm);color:var(--ink-2)}
.stars{display:inline-flex;gap:2px;color:var(--brass-ink)}
.stars .ic{width:17px;height:17px;fill:currentColor;stroke:none}
.quotes{padding-top:clamp(0px, 4vw, 72px)}
.quote blockquote p{font-size:clamp(1.5rem, 1.05rem + 1.6vw, 2.5rem);font-weight:500;letter-spacing:-0.022em;line-height:1.28;text-wrap:balance;max-width:26ch}
.quote figcaption{margin-top:28px;font-size:1rem;font-weight:600;color:var(--ink-2)}
.quote + .quote{margin-top:48px}
.js .quotes__track{display:grid}
.js .quote{grid-area:1 / 1;margin:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s .45s}
.js .quote.is-active{opacity:1;visibility:visible;transition:opacity .45s var(--ease-out)}
.quotes__nav{display:flex;align-items:center;gap:16px;margin-top:40px}
.quotes__nav[hidden]{display:none}
.quotes__count{font-size:.9375rem;color:var(--ink-2);min-width:4ch;text-align:center}
.sq-btn{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);background:var(--paper);border-radius:2px;cursor:pointer;transition:background-color .15s,color .15s}
.sq-btn:hover{background:var(--ink);color:var(--on-dark)}
.sq-btn:active{transform:translateY(1px)}
.sq-btn .ic{width:20px;height:20px}
@media (max-width: 1023px){ .reviews__grid{grid-template-columns:1fr} .quotes{padding-top:0} }

/* 10. FAQ */
.faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px, 6vw, 112px);align-items:start}
.faq__list{border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;list-style:none;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:var(--fs-h3);font-weight:500;line-height:1.35;letter-spacing:-0.01em}
.qa summary .ic{width:22px;height:22px;color:var(--deep);transition:transform .3s var(--ease-out)}
.qa[open] summary .ic{transform:rotate(45deg)}
.qa summary:hover h3{color:var(--deep)}
.qa__a{padding:0 48px 26px 0;color:var(--ink-2);max-width:66ch}
@media (max-width: 1023px){ .faq__grid{grid-template-columns:1fr} }

/* 11. Closing call */
.closing__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px, 6vw, 112px);align-items:end;padding-top:clamp(40px, 4vw, 72px);border-top:1px solid var(--rule);margin-left:var(--gut);padding-left:0}
.closing__title{font-size:var(--fs-mega);font-weight:700;letter-spacing:-0.045em;line-height:.98}
.closing__title::before,.closing__title::after{top:.45em}
.closing__title::after{top:calc(.45em - 6px)}
.closing__body{display:grid;gap:14px;color:var(--ink-2);justify-items:start}
.closing__body .lead{color:var(--ink)}
.closing__facts{display:grid;gap:10px;margin:12px 0 18px}
.closing__facts div{display:flex;align-items:center;gap:12px}
.closing__facts dt{display:flex;color:var(--deep)}
.closing__facts dd{color:var(--ink);font-weight:500;word-break:break-word}
@media (max-width: 1023px){ .closing__grid{grid-template-columns:1fr;align-items:start} }

/* 12. About */
.about .h2{max-width:22ch}
.about__cols{columns:2;column-gap:clamp(32px, 4vw, 72px);margin-top:40px;color:var(--ink-2);max-width:1080px}
.about__cols p{break-inside:avoid;margin-bottom:1em}
.motto{display:flex;flex-direction:column;margin-top:clamp(56px, 6vw, 96px);font-size:var(--fs-mega);font-weight:700;letter-spacing:-0.045em;line-height:1.02}
.motto span:nth-child(2){color:var(--deep);padding-left:clamp(24px, 8vw, 160px)}
.motto span:nth-child(3){padding-left:clamp(48px, 16vw, 320px)}
@media (max-width: 767px){ .about__cols{columns:1} }

/* 13. Contact: photo with panels on top */
.contact{position:relative;padding-block:clamp(72px, 8vw, 140px)}
.contact__media{position:absolute;inset:0;z-index:0}
.contact__media picture,.contact__media img{width:100%;height:100%}
.contact__media img{object-fit:cover}
.contact .wrap{position:relative;z-index:1}
.contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-left:var(--gut)}
.contact__info{background:var(--ink);color:var(--on-dark);padding:clamp(28px, 3.5vw, 56px)}
.contact__info .h2{font-size:clamp(1.875rem, 1.3rem + 1.8vw, 2.875rem)}
.contact__lede{margin-top:20px;color:var(--on-ink-2);max-width:44ch;line-height:1.6}
.spec{margin-top:36px;border-top:1px solid oklch(100% 0 0 / .16)}
.spec div{display:grid;grid-template-columns:minmax(0,13ch) 1fr;gap:16px;padding:14px 0;border-bottom:1px solid oklch(100% 0 0 / .16)}
.spec dt{font-size:.875rem;color:var(--on-ink-2);padding-top:2px}
.spec dd{font-weight:500;word-break:break-word}
.spec dd.num{color:var(--brass);font-weight:500}
.spec dd .num{color:var(--brass)}
.form{background:var(--paper);padding:clamp(28px, 3.5vw, 56px)}
.form__title{font-size:1.5rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:24px}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.field--full{grid-column:1 / -1}
.form .btn{margin-top:10px}
.form__note{margin-top:16px;font-size:.875rem;color:var(--ink-3);max-width:52ch}
@media (max-width: 1023px){ .contact__grid{grid-template-columns:1fr} }
@media (max-width: 767px){
  .contact{padding-block:0}
  .contact__media{position:relative;height:200px}
  .contact__grid{margin-left:0}
  .contact .wrap{padding-inline:0}
  .form__grid{grid-template-columns:1fr}
  .form .btn{width:100%}
}

/* ---------- Footer ---------- */
.footer{position:relative;background:var(--ink);color:var(--on-ink-2);padding-top:72px;--rail-c:var(--sky)}
.rail--end{bottom:auto;height:72px}
.footer__brand{position:relative}
.footer__brand::before{content:"";position:absolute;pointer-events:none;
  left:calc(var(--rail-x) - var(--gut));top:-1px;width:calc(var(--gut) - var(--rail-x) - 10px);height:18px;
  border-left:var(--rail-w) solid var(--rail-c);border-bottom:var(--rail-w) solid var(--rail-c);border-bottom-left-radius:16px}
.footer__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:48px;padding-bottom:64px}
.footer__brand p{margin-top:20px;max-width:34ch;font-size:.9688rem}
.footer__title{font-size:.875rem;font-weight:600;color:var(--on-dark);margin-bottom:18px}
.footer__col ul{display:grid;gap:10px;font-size:.9375rem}
.footer__col li{word-break:break-word}
.footer__base{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;padding-block:24px 32px;border-top:1px solid oklch(100% 0 0 / .14);font-size:.875rem}
.footer__legal{display:flex;gap:24px;flex-wrap:wrap}
@media (max-width: 1023px){ .footer__grid{grid-template-columns:1fr 1fr} .footer__brand{grid-column:1 / -1} }
@media (max-width: 639px){ .footer__grid{grid-template-columns:1fr} }

/* ---------- Mobile dock ---------- */
.dock{display:none}
@media (max-width: 767px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;
    padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--rule);
    transition:transform .3s var(--ease-out)}
  .dock.is-hidden{transform:translateY(100%)}
  .dock__btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;font-weight:600;font-size:.9688rem;text-decoration:none;color:var(--deep)}
  .dock__btn--call{background:var(--deep);color:var(--on-dark)}
  .dock__btn .ic{width:18px;height:18px}
}

/* ---------- Motion initial states (only when JS + motion are on) ---------- */
.motion [data-hero],.motion [data-rise]{opacity:0;transform:translateY(16px)}
.motion [data-reveal]{clip-path:inset(0 0 100% 0)}
.motion .quick{clip-path:inset(0 100% 0 0)}
.motion [data-block]{clip-path:inset(0 100% 0 0)}
.motion .rail{transform:scaleY(0)}
.motion .head::before{transform:scaleX(0)}
.motion .head::after{opacity:0}
.motion .head.is-joined::before{transform:scaleX(1);transition:transform .45s var(--ease-out)}
.motion .head.is-joined::after{opacity:1;transition:opacity .2s .3s}
.motion [data-net]{clip-path:inset(0 100% 0 0)}
.motion [data-motto] span{display:block;opacity:0;transform:translateY(24px)}
.motion [data-num]{opacity:0}
.motion .facts::before{clip-path:inset(0 100% 100% 0)}
.motion .facts.is-drawn::before{clip-path:inset(0 0 0 0);transition:clip-path .5s var(--ease-out)}