/* ==========================================================================
   Υδραυλικός Παπαδόπουλος, v3 "Μπετό"
   Concrete grey, black and PVC orange. Uppercase condensed headings,
   a split screen where the photo stays and the story scrolls.
   ========================================================================== */

@font-face{font-family:"Sofia Sans";src:url("../assets/fonts/sofia-sans-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:"Sofia Sans";src:url("../assets/fonts/sofia-sans-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}
@font-face{font-family:"Sofia Sans Extra Condensed";src:url("../assets/fonts/sofia-sans-extra-condensed-greek.woff2") format("woff2");font-weight:600 900;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:"Sofia Sans Extra Condensed";src:url("../assets/fonts/sofia-sans-extra-condensed-latin.woff2") format("woff2");font-weight:600 900;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{
  --concrete: #e4e6e9;    /* page, oklch(92.5% 0.005 250) */
  --slab:     #d2d6da;    /* rules, quiet panels */
  --paper:    #f9fafc;    /* cards, fields */
  --ink:      #13161c;    /* text 14.5:1, black blocks */
  --ink-2:    #44484e;    /* secondary text 7.4:1 */
  --on-ink:   #e4e6e9;
  --on-ink-2: #b9bec6;    /* secondary text on black, 9.6:1 */
  --pvc:      #e75e1b;    /* orange fills, always black text on it (5.2:1) */
  --pvc-deep: #b13e06;    /* orange details on grey (4.8:1) */

  --sans: "Sofia Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --cond: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;

  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.1875rem, 1.06rem + 0.45vw, 1.4375rem);
  --fs-h2:   clamp(2.75rem, 1.6rem + 4.2vw, 6.25rem);
  --fs-mega: clamp(3.25rem, 1.2rem + 7.4vw, 10rem);

  --maxw: 1440px;
  --pad:  clamp(16px, 3.6vw, 56px);
  --sec:  clamp(88px, 6vw + 48px, 160px);
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px){ :root{ --fs-body: 1.125rem; } }
@media (min-width: 1024px){ :root{ --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) + 12px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--concrete);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{padding:0;border:0;min-width:0}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2;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}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--on-ink);padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* the voice: uppercase condensed, as the client wrote the headings */
.display{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:-0.005em;line-height:.9}
.h2{font-size:var(--fs-h2);text-wrap:balance}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:52ch;text-wrap:pretty}
.prose{display:grid;gap:1em;color:var(--ink-2);max-width:60ch}
.eyebrow{font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pvc-deep);margin-bottom:20px}

/* ---------- Pills (every control is a pill) ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;border:2px solid transparent;font-weight:700;font-size:1rem;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:default;transition:background-color .18s,color .18s,border-color .18s,transform .12s}
a.pill,button.pill{cursor:pointer}
a.pill:active,button.pill:active{transform:scale(.98)}
.pill .ic{width:18px;height:18px}
.pill--sm{min-height:44px;padding:0 18px;font-size:.9375rem}
.pill--pvc{background:var(--pvc);color:var(--ink)}
.pill--ink{background:var(--ink);color:var(--on-ink)}
button.pill--ink:hover,a.pill--ink:hover{background:#2a2f37}
.pill--line{border-color:var(--ink);color:var(--ink)}
a.pill--line:hover{background:var(--ink);color:var(--on-ink)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--concrete);color:var(--ink);font-size:.875rem;font-weight:600}
.chip .ic{width:16px;height:16px}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;gap:28px;padding-inline:var(--pad);background:var(--concrete);border-bottom:2px solid var(--ink)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand__mark{height:36px;width:auto}
.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:#0060aa;margin-bottom:3px}
.brand--dark{color:var(--on-ink)}
.brand--dark .brand__word small{color:#0096c9}
.nav{margin-left:auto}
.nav ul{display:flex;gap:6px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-weight:600;font-size:.9688rem;text-decoration:none;transition:background-color .15s}
.nav a:hover{background:var(--slab)}
.menu-btn{display:none;width:48px;height:48px;border-radius:999px;border:2px solid var(--ink);background:transparent;align-items:center;justify-content:center;cursor:pointer}
.menu-btn .ic{width:22px;height:22px}
@media (max-width: 1023px){
  .header__phone{margin-left:auto}
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;background:var(--concrete);border-bottom:2px solid var(--ink);padding:12px var(--pad) 24px}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;gap:4px}
  .nav a{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:2.25rem;line-height:1;min-height:56px;padding:0}
  .nav a:hover{background:none;color:var(--pvc-deep)}
}
@media (max-width: 559px){ .header__phone{display:none} .menu-btn{margin-left:auto} }

/* ---------- Split screen ---------- */
.split{display:grid;grid-template-columns:1fr 1fr}
.split__media{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));overflow:hidden;background:var(--ink)}
.stage__item{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.stage__item.is-active{opacity:1}
.stage__item picture,.stage__item img{width:100%;height:100%}
.stage__item img{object-fit:cover}
.stage__item.is-active img{animation:settle 1.2s var(--ease) both}
@keyframes settle{from{transform:scale(1.04)}to{transform:none}}
.stage__chips{position:absolute;left:24px;bottom:24px;display:flex;flex-wrap:wrap;gap:8px;z-index:2}
.split__content{padding-inline:clamp(28px, 4vw, 72px) var(--pad);min-width:0}
.chapter{padding-block:var(--sec);border-bottom:2px solid var(--ink)}
.chapter:last-child{border-bottom:0}
.chapter .lead{margin-top:28px}
.chapter .prose{margin-top:24px}
.m-photo{display:none}
@media (max-width: 1023px){
  .split{grid-template-columns:1fr}
  .split__media{display:none}
  .split__content{padding-inline:var(--pad)}
  .m-photo{display:block;margin-inline:calc(-1 * var(--pad))}
  .m-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
  .intro .m-photo{margin-top:40px}
}

/* 1. Hero */
.hero{min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:flex-end;padding-top:48px;padding-bottom:40px}
.hero__title{font-size:clamp(3.5rem, 0.6rem + 7.4vw, 8.5rem);line-height:.86;text-wrap:balance;margin-top:auto}
.hero__title em{font-style:normal;color:var(--pvc-deep)}
.hero__base{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;margin-top:36px;padding-top:24px;border-top:2px solid var(--ink)}
.hero__lede{font-size:1.125rem;line-height:1.5;color:var(--ink-2);max-width:44ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:10px}
.hero__facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px;font-size:.9375rem;color:var(--ink-2)}
.hero__facts strong{color:var(--ink);font-weight:700}
@media (max-width: 1023px){
  .hero{min-height:0;padding-top:0}
  .hero .m-photo{margin-bottom:36px}
  .hero__title{margin-top:0}
}
@media (max-width: 559px){ .hero__ctas .pill{flex:1 1 100%} }

/* 3. Services: numbered index */
.index{margin-top:48px;border-top:2px solid var(--ink)}
.row{border-bottom:1px solid var(--slab);transition:background-color .25s var(--ease)}
.row summary{display:grid;grid-template-columns:3.25rem minmax(0,1fr) 48px;align-items:center;gap:16px;padding:18px 0;cursor:pointer;list-style:none}
.row summary::-webkit-details-marker{display:none}
.row__n{font-size:2rem;color:var(--pvc-deep)}
.row__t{font-size:clamp(1.625rem, 1.2rem + 1.1vw, 2.375rem);line-height:.95}
.row__btn{width:48px;height:48px;border-radius:999px;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),background-color .2s,border-color .2s}
.row__btn .ic{width:20px;height:20px}
.row summary:hover .row__t{color:var(--pvc-deep)}
.row[open]{background:var(--ink);color:var(--on-ink);margin-inline:calc(-1 * clamp(16px, 2vw, 28px));padding-inline:clamp(16px, 2vw, 28px);border-bottom-color:var(--ink)}
.row[open] .row__n{color:var(--pvc)}
.row[open] summary:hover .row__t{color:var(--on-ink)}
.row[open] .row__btn{background:var(--pvc);border-color:var(--pvc);color:var(--ink);transform:rotate(45deg)}
.row__body{display:grid;gap:.75em;padding:0 64px 26px calc(3.25rem + 16px);color:var(--on-ink-2);font-size:1rem;max-width:72ch}
.row__cta{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:8px;font-weight:700;color:var(--pvc);text-decoration:none}
.row__cta .ic{width:18px;height:18px;transition:transform .2s var(--ease)}
.row__cta:hover .ic{transform:translate(2px,-2px)}
.row[open] :focus-visible{outline-color:var(--pvc)}
@media (max-width: 559px){ .row summary{grid-template-columns:2.5rem minmax(0,1fr) 44px;gap:12px} .row__n{font-size:1.625rem} .row__body{padding:0 0 22px} .row__btn{width:44px;height:44px} }

/* 4. Why us */
.why__years{display:flex;align-items:flex-end;gap:24px;margin-top:48px;padding-bottom:32px;border-bottom:2px solid var(--ink)}
.why__years strong{font-size:clamp(7rem, 4rem + 9vw, 14rem);line-height:.78;color:var(--pvc-deep)}
.why__years h3{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:2rem;line-height:.95}
.why__years p{color:var(--ink-2);font-size:1rem;margin-top:8px;max-width:30ch}
.why__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px;margin-top:40px}
.why__list .ic{width:28px;height:28px;color:var(--pvc-deep);margin-bottom:14px}
.why__list h3{font-size:1.1875rem;font-weight:700;line-height:1.3}
.why__list p{font-size:1rem;color:var(--ink-2);margin-top:6px}
@media (max-width: 559px){ .why__list{grid-template-columns:1fr} .why__years{flex-direction:column;align-items:flex-start} }

/* 5. Emergency: orange, the number as the graphic */
.emergency{background:var(--pvc);color:var(--ink);padding-block:var(--sec)}
.emergency__title{font-size:var(--fs-mega);max-width:12ch}
.emergency__body{display:grid;gap:8px;margin-top:36px;max-width:56ch;font-size:var(--fs-lead);line-height:1.45;font-weight:500}
.emergency__strong{font-weight:800}
.emergency__num{display:flex;align-items:center;gap:clamp(14px, 2vw, 32px);margin-top:clamp(40px, 5vw, 72px);font-size:clamp(4rem, 0.4rem + 13.2vw, 15.5rem);white-space:nowrap}
.emergency__num .display{line-height:.8;letter-spacing:-0.015em}
.disc{flex:none;width:.66em;height:.66em;border-radius:999px;background:var(--ink);color:var(--pvc);display:inline-flex;align-items:center;justify-content:center}
.disc .ic{width:45%;height:45%;stroke-width:1.75}
.emergency__note{margin-top:28px;padding-top:18px;border-top:2px solid var(--ink);font-size:.9375rem;font-weight:600}
.emergency :focus-visible{outline-color:var(--ink)}

/* 6. Areas: typographic poster */
.areas{background:var(--ink);color:var(--on-ink);padding-block:var(--sec)}
.areas__title{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:1.75rem;line-height:1;color:var(--pvc)}
.areas__lead{margin-top:16px;color:var(--on-ink-2);font-size:var(--fs-lead);max-width:52ch;line-height:1.5}
.poster{margin-top:clamp(40px, 5vw, 72px);font-size:clamp(3rem, 0.8rem + 7.6vw, 10.5rem);line-height:.92;display:flex;flex-wrap:wrap;column-gap:.18em}
.poster li{color:var(--on-ink)}
.poster li:not(:last-child)::after{content:"/";color:#5b616a;margin-left:.18em}
.areas__notes{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 40px;align-items:baseline;margin-top:40px;padding-top:20px;border-top:2px solid #2c3139;color:var(--on-ink-2)}
.areas__more{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:1.75rem;line-height:1;color:var(--on-ink)}
.areas__notes p:last-child{max-width:60ch}
@media (max-width: 767px){ .areas__notes{grid-template-columns:1fr} }

/* 7. Process: sideways pan */
.process{background:var(--concrete);padding-block:var(--sec);overflow:hidden}
.process__head{margin-bottom:48px}
.pan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.pan__card{display:flex;flex-direction:column;min-height:420px;padding:28px;background:var(--paper)}
.pan__n{font-size:clamp(7rem, 5rem + 5vw, 11rem);line-height:.78;color:var(--pvc-deep)}
.pan__card h3{margin-top:auto;font-size:1.375rem;font-weight:700;line-height:1.25}
.pan__card p{margin-top:8px;color:var(--ink-2);font-size:1rem}
.pan__card--ink{background:var(--ink);color:var(--on-ink)}
.pan__card--ink .pan__n{color:var(--pvc)}
.pan__card--ink p{color:var(--on-ink-2)}
.pan__card--pvc{background:var(--pvc)}
.pan__card--pvc .pan__n{color:var(--ink)}
.pan__card--pvc p{color:var(--ink)}
@media (max-width: 1023px){ .pan{grid-template-columns:repeat(2,minmax(0,1fr))} .pan__card{min-height:320px} }
@media (max-width: 559px){ .pan{grid-template-columns:1fr} .pan__card{min-height:260px} }
/* pinned pan layout (set by JS on wide screens with motion) */
.is-panning .process__inner{height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:center}
.is-panning .pan{display:flex;max-width:none;margin:0;width:max-content;padding-left:max(var(--pad), (100vw - var(--maxw)) / 2 + var(--pad));padding-right:var(--pad)}
.is-panning .pan__card{width:clamp(340px, 33vw, 520px);min-height:min(56svh, 520px)}

/* 8. Works: mosaic, captions below */
.works{padding-block:var(--sec);border-top:2px solid var(--ink)}
.works__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px 64px;align-items:end}
.works__intro{display:grid;gap:12px}
.works__intro p:last-child{color:var(--ink-2);font-size:.9688rem}
.mosaic{display:grid;grid-template-columns:1.15fr 1fr 1.15fr;grid-template-areas:"a b d" "a c d";gap:32px 20px;margin-top:56px}
.mosaic figure{display:flex;flex-direction:column;min-height:0}
.mosaic__a{grid-area:a}.mosaic__b{grid-area:b}.mosaic__c{grid-area:c}.mosaic__d{grid-area:d}
.mosaic picture{flex:1;min-height:0;overflow:hidden;background:var(--slab)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mosaic__b picture,.mosaic__c picture{height:clamp(200px, 18vw, 300px);flex:none}
.mosaic figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:12px;font-size:.9375rem}
.mosaic figcaption strong{font-weight:700}
.mosaic figcaption span{color:var(--ink-2);white-space:nowrap;font-size:.875rem}
@media (hover: hover){ .mosaic figure:hover img{transform:scale(1.03)} }
@media (max-width: 1023px){ .works__head{grid-template-columns:1fr} }
@media (max-width: 767px){
  .mosaic{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d"}
  .mosaic picture,.mosaic__b picture,.mosaic__c picture{height:auto;flex:none}
  .mosaic img{aspect-ratio:4/3;height:auto}
  .mosaic figcaption{flex-direction:column;gap:2px}
}

/* 9. Reviews: three voices, no cards */
.reviews{padding-block:var(--sec);background:var(--slab)}
.reviews__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.rating{display:flex;align-items:flex-end;gap:20px}
.rating strong{font-size:clamp(6rem, 4rem + 6vw, 11rem);line-height:.78;color:var(--ink)}
.rating strong span{font-size:.38em;color:var(--pvc-deep)}
.rating__meta{display:flex;flex-direction:column;gap:6px;font-size:.9375rem;color:var(--ink-2);padding-bottom:6px}
.stars{display:inline-flex;gap:2px;color:var(--pvc-deep)}
.stars .ic{width:18px;height:18px;fill:currentColor;stroke:none}
.voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:64px}
.voices figure{border-top:2px solid var(--ink);padding-top:24px}
.voices blockquote p{font-size:clamp(1.25rem, 1.05rem + .6vw, 1.625rem);font-weight:600;line-height:1.35;letter-spacing:-0.01em}
.voices figcaption{margin-top:20px;font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:1.375rem;line-height:1}
@media (max-width: 1023px){ .voices{grid-template-columns:1fr;gap:32px} }

/* 10. FAQ */
.faq{padding-block:var(--sec)}
.faq__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:start}
.faq__title{position:sticky;top:calc(var(--header-h) + 32px)}
.faq__list{border-top:2px solid var(--ink)}
.qa{border-bottom:1px solid var(--slab)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:1.1875rem;font-weight:700;line-height:1.35}
.qa__btn{flex:none;width:44px;height:44px;border-radius:999px;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),background-color .2s,color .2s}
.qa__btn .ic{width:18px;height:18px}
.qa[open] .qa__btn{background:var(--ink);color:var(--on-ink);transform:rotate(45deg)}
.qa summary:hover h3{color:var(--pvc-deep)}
.qa__a{padding:0 68px 24px 0;color:var(--ink-2);max-width:64ch}
@media (max-width: 1023px){ .faq__grid{grid-template-columns:1fr} .faq__title{position:static} }

/* 11. Closing call */
.closing{background:var(--ink);color:var(--on-ink);padding-block:var(--sec)}
.closing__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 64px;align-items:end}
.closing__title{font-size:var(--fs-mega)}
.closing__body{display:grid;gap:12px;justify-items:start;color:var(--on-ink-2)}
.closing__lead{color:var(--on-ink);font-size:var(--fs-lead);line-height:1.45;font-weight:600}
.closing__facts{display:grid;gap:10px;margin:14px 0 20px;color:var(--on-ink)}
.closing__facts li{display:flex;align-items:center;gap:12px;word-break:break-word}
.closing__facts .ic{color:var(--pvc)}
@media (max-width: 1023px){ .closing__grid{grid-template-columns:1fr;align-items:start} }

/* 12. About */
.about{padding-block:var(--sec)}
.about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:end}
.about__copy .prose{margin-top:28px}
.motto{display:flex;flex-direction:column;font-size:clamp(3.5rem, 1.5rem + 5.6vw, 9rem);line-height:.88}
.motto span:nth-child(2){color:var(--pvc-deep)}
@media (max-width: 1023px){ .about__grid{grid-template-columns:1fr} }

/* 13. Contact */
.contact{padding-block:var(--sec);border-top:2px solid var(--ink)}
.contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 72px;align-items:start}
.contact__info .h2{font-size:clamp(2.5rem, 1.6rem + 3vw, 5rem)}
.contact__lede{margin-top:24px;color:var(--ink-2);max-width:46ch}
.ledger{margin-top:40px;border-top:2px solid var(--ink)}
.ledger div{display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--slab)}
.ledger dt{font-size:.875rem;font-weight:600;color:var(--ink-2)}
.ledger dd{font-weight:600;word-break:break-word}
.ledger dd.display{font-size:clamp(2rem, 1.5rem + 1.4vw, 2.75rem);line-height:.9;font-weight:800}
.form{background:var(--paper);padding:clamp(24px, 3.5vw, 56px)}
.form__title{font-size:2.25rem;margin-bottom:28px}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.field{display:grid;gap:8px;margin-bottom:18px}
.field--full{grid-column:1 / -1}
.field label,.field legend{font-size:.9375rem;font-weight:600;color:var(--ink)}
.field legend{margin-bottom:10px}
.field input,.field textarea{width:100%;min-height:54px;padding:0 22px;border:2px solid var(--slab);border-radius:999px;background:var(--concrete);font-size:1rem;transition:border-color .15s,background-color .15s}
.field textarea{border-radius:26px;padding:16px 22px;resize:vertical;min-height:132px}
.field input:hover,.field textarea:hover{border-color:#9aa1aa}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);background:var(--paper)}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--pvc);outline-offset:1px}
.needs__list{display:flex;flex-wrap:wrap;gap:8px}
.need{position:relative;display:inline-flex}
.need input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.need span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--slab);background:var(--concrete);font-size:.9375rem;font-weight:600;transition:background-color .15s,color .15s,border-color .15s}
.need input:hover + span{border-color:#9aa1aa}
.need input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.need input:focus-visible + span{outline:3px solid var(--pvc);outline-offset:2px}
.form .pill{margin-top:8px}
.form__note{margin-top:16px;font-size:.875rem;color:var(--ink-2);max-width:52ch}
@media (max-width: 1023px){ .contact__grid{grid-template-columns:1fr} }
@media (max-width: 559px){ .form__grid{grid-template-columns:1fr} .form .pill{width:100%} .form{margin-inline:calc(-1 * var(--pad))} }

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--on-ink-2);padding-top:80px}
.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-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;color:var(--on-ink);margin-bottom:18px}
.footer ul{display:grid;gap:10px;font-size:.9375rem}
.footer li{word-break:break-word}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;padding-block:24px 32px;border-top:2px solid #2c3139;font-size:.875rem}
.footer__base ul{display:flex;flex-wrap:wrap;gap:24px}
@media (max-width: 1023px){ .footer__grid{grid-template-columns:1fr 1fr} .footer__brand{grid-column:1 / -1} }
@media (max-width: 559px){ .footer__grid{grid-template-columns:1fr} }

/* ---------- Mobile dock ---------- */
.dock{display:none}
@media (max-width: 767px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--concrete);border-top:2px solid var(--ink);transition:transform .3s var(--ease)}
  .dock.is-hidden{transform:translateY(110%)}
  .dock .pill{min-height:52px;padding:0 12px;font-size:.9375rem}
}

/* ---------- Motion initial states (only with JS + motion) ---------- */
.motion [data-rise]{opacity:0;transform:translateY(18px)}
.motion [data-mask]{clip-path:inset(0 0 100% 0);transform:translateY(.25em)}
.motion [data-reveal] picture{clip-path:inset(100% 0 0 0)}
.motion [data-num]{opacity:0}
.motion [data-motto] span{opacity:0;transform:translateY(.3em)}
.process.is-panning{padding-block:0}
@media (prefers-reduced-motion: reduce){
  .stage__item{transition:none}
  .stage__item.is-active img{animation:none}
}
.is-panning .process__head{width:100%}
@media (min-width: 1024px){ .hero__title{font-size:clamp(3.5rem, 6.7vw, 8.5rem)} }