/* ============================================================
   TRUECOAT PAINTING — "The Studio Coat" design system
   Editorial paint-atelier: warm paper, ink, one LIVING accent.
   The accent is the visitor's chosen paint color (fan deck) —
   picking a swatch repaints the whole site. Fonts: Instrument
   Serif (display) · Archivo (grotesque) · Space Mono (spec).
   ============================================================ */
:root{
  /* living paint color (JS swaps these from the fan deck) */
  --paint:#31513f;            /* No.02 Cascade Pine (default) */
  --paint-deep:#243d2f;
  --paint-soft:#e3e9e2;       /* pale tint of paint for washes */
  --on-paint:#f6f3ec;         /* text on paint */
  /* fixed system */
  --paper:#f5f1e8;            /* warm gallery paper */
  --paper-2:#ede8db;          /* deeper paper */
  --card:#fbf9f3;
  --ink:#191512;              /* warm near-black */
  --ink-2:#4c453c;            /* muted body */
  --ink-3:#7c7466;            /* captions */
  --line:#dcd5c6;
  --line-2:#c9c1af;
  --gold:#b98a2f;             /* review stars only */
  --ff-d:"Instrument Serif",Georgia,serif;
  --ff-g:"Archivo",system-ui,sans-serif;
  --ff-m:"Space Mono",monospace;
  --sh-1:0 1px 2px rgba(25,21,18,.06),0 6px 24px -12px rgba(25,21,18,.22);
  --sh-2:0 2px 6px rgba(25,21,18,.08),0 24px 48px -20px rgba(25,21,18,.3);
  --r:14px;
  --ease:cubic-bezier(.19,1,.22,1);
  --wrap:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:var(--paint);color:var(--on-paint)}
body{font-family:var(--ff-g);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* paper grain over everything, very quiet */
body::before{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,.dsp{font-family:var(--ff-d);font-weight:400;line-height:1.04;letter-spacing:-.01em}
h1 em,h2 em,h3 em{font-style:italic;color:var(--paint)}
h4{font-family:var(--ff-g);font-weight:700;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
section{padding:clamp(64px,9vw,120px) 0;position:relative}

/* ---- spec chips (masking-tape mono labels) ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-m);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);padding:7px 14px 6px;border-radius:3px;position:relative;transform:rotate(-.6deg)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--paint);flex:none}
.eyebrow.c-center{transform:rotate(.4deg)}
.sec-head{max-width:820px;margin-bottom:clamp(34px,5vw,56px)}
.sec-head h2{font-size:clamp(2.4rem,5.4vw,4.2rem);margin:18px 0 14px}
.sec-head p{color:var(--ink-2);font-size:1.1rem;max-width:58ch}
.sec-head.c-center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.c-center p{margin-left:auto;margin-right:auto}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:var(--paper);font-weight:600;font-size:1rem;letter-spacing:.01em;padding:15px 26px;border-radius:9px;border:1.5px solid var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.btn::before{content:"";width:13px;height:13px;border-radius:3px 3px 3px 8px;background:var(--paint);flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:transform .35s var(--ease),background .5s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:hover::before{transform:rotate(90deg)}
.btn-cool,.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-cool:hover,.btn-ghost:hover{border-color:var(--ink);background:var(--card)}
.btn-dark{background:var(--paint);border-color:var(--paint);color:var(--on-paint)}
.btn-dark::before{background:var(--paper)}
.btn-dark:hover{background:var(--paint-deep)}
.btn-lg{padding:18px 32px;font-size:1.06rem}
.btn.full{width:100%;justify-content:center}

/* ---- preview + top bars ---- */
.preview-bar{background:var(--ink);color:#cfc8bb;text-align:center;font-size:.83rem;padding:9px 14px;position:relative;z-index:60}
.preview-bar b{color:var(--paper)}
.preview-bar a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.topbar{background:var(--paint);color:var(--on-paint);text-align:center;font-size:.82rem;letter-spacing:.02em;padding:7px 14px;transition:background .5s}
.topbar b{font-weight:700}
.topbar .dot{opacity:.55;margin:0 9px}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--ff-g);font-weight:800;font-size:1.22rem;letter-spacing:0}
.logo .mark{width:38px;height:38px;border-radius:8px 8px 8px 16px;background:var(--ink);display:grid;place-items:center;box-shadow:inset 0 -10px 0 rgba(0,0,0,.14);flex:none}
.logo .mark svg{width:20px;height:20px;fill:none;stroke:#f6f3ec;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.logo small{display:block;font-family:var(--ff-m);font-weight:400;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);margin-top:1px}
.mnav{display:flex;align-items:center;gap:4px}
.mnav>a,.drop>span{display:inline-block;padding:10px 14px;font-weight:500;font-size:.98rem;color:var(--ink-2);border-radius:8px;cursor:pointer;transition:color .2s,background .2s}
.mnav>a:hover,.drop:hover>span,.mnav>a.on,.drop>span.on{color:var(--ink);background:var(--paper-2)}
.drop{position:relative}
.drop>span::after{content:"";display:inline-block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:8px;transition:transform .25s}
.drop:hover>span::after{transform:rotate(225deg) translateY(-1px)}
.drop-menu{position:absolute;top:calc(100% + 10px);left:-12px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-2);padding:10px;display:grid;grid-template-columns:repeat(2,270px);gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s var(--ease)}
.drop:hover .drop-menu{opacity:1;visibility:visible;transform:none}
.drop-menu a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:10px;transition:background .2s}
.drop-menu a:hover{background:var(--paper-2)}
.drop-menu .di{width:34px;height:34px;flex:none;border-radius:8px 8px 8px 14px;background:var(--paint-soft);display:grid;place-items:center;transition:background .5s}
.drop-menu .di svg{width:18px;height:18px;fill:none;stroke:var(--paint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.drop-menu a.warm .di{background:var(--paper-2)}
.drop-menu .dt{display:block;font-weight:600;font-size:.95rem}
.drop-menu .dd{display:block;font-size:.8rem;color:var(--ink-3)}
.drop-menu .dm-all{grid-column:1/-1;justify-content:center;font-family:var(--ff-m);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paint);border-top:1px dashed var(--line);border-radius:0;margin-top:6px;padding-top:14px}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-phone{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.98rem;letter-spacing:.01em}
.nav-phone svg{width:17px;height:17px;fill:none;stroke:var(--paint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ============ HERO — editorial split + Color Studio ============ */
.hero{padding:clamp(48px,6vw,84px) 0 0;overflow:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,4vw,64px);align-items:center;position:relative}
.hero-copy{padding-bottom:clamp(40px,6vw,80px)}
.hero .badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-m);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);padding:8px 14px;border-radius:3px;transform:rotate(-.8deg)}
.hero .badge i{width:8px;height:8px;border-radius:50%;background:var(--paint);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--paint) 45%,transparent)}55%{box-shadow:0 0 0 8px transparent}}
.hero h1{font-size:clamp(3.1rem,7vw,5.9rem);margin:22px 0 20px;max-width:12ch}
.hero h1 .swash{position:relative;white-space:nowrap}
.hero h1 .swash svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.34em;overflow:visible}
.hero h1 .swash svg path{fill:none;stroke:var(--paint);stroke-width:10;stroke-linecap:round;opacity:.9;stroke-dasharray:620;stroke-dashoffset:620;animation:swash 1.1s .5s var(--ease) forwards;transition:stroke .5s}
@keyframes swash{to{stroke-dashoffset:0}}
.hero .sub{font-size:1.16rem;color:var(--ink-2);max-width:52ch;line-height:1.66}
.hero .acts{display:flex;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap}
.hero .or{font-size:.98rem;color:var(--ink-3)}
.hero .or b{color:var(--ink);font-weight:700}
.hero .trust{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero .trust .ti{position:relative;padding-left:16px}
.hero .trust .ti::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--paint);opacity:.85;transition:background .5s}
.hero .trust .tn{display:block;font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.hero .trust .tn .stars{color:var(--gold);letter-spacing:.05em}
.hero .trust .tl{display:block;font-size:.8rem;color:var(--ink-3);margin-top:2px}
.hero{overflow:hidden}

/* ---- Color Studio card (signature tool) ---- */
.studio{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-2);overflow:hidden;position:relative}
.studio .room{position:relative;aspect-ratio:16/10.6;overflow:hidden;background:var(--paper-2)}
.studio .room img{width:100%;height:100%;object-fit:cover}
.studio .wallpaint,.studio .room .tag-live{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--ink) 82%,transparent);color:var(--paper);backdrop-filter:blur(6px);font-family:var(--ff-m);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border-radius:4px}
.studio .room .tag-live i{width:7px;height:7px;border-radius:50%;background:#7fd77f;animation:pulse 2s infinite}
.studio .room .readout{position:absolute;left:14px;bottom:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:var(--sh-1)}
.studio .readout .swn{font-family:var(--ff-d);font-size:1.3rem;line-height:1.1}
.studio .readout .swno{display:block;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.studio .readout .hex{font-family:var(--ff-m);font-size:.72rem;color:var(--ink-3);letter-spacing:.08em}
.studio .deckbar{padding:18px 20px 20px}
.studio .deckbar .lbl{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.studio .deckbar .lbl a{color:var(--paint);text-decoration:underline;text-underline-offset:3px;text-transform:none;letter-spacing:.04em}
.deck{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.deck button{aspect-ratio:1/1.28;border-radius:6px 6px 6px 12px;background:var(--c);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 0 -8px 14px -8px rgba(0,0,0,.28);transition:transform .3s var(--ease),box-shadow .3s var(--ease);outline-offset:3px}
.deck button::after{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.deck button:hover{transform:translateY(-4px)}
.deck button[aria-pressed="true"]{transform:translateY(-4px);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink),inset 0 -8px 14px -8px rgba(0,0,0,.28)}
.studio .studio-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px dashed var(--line);padding:14px 20px;flex-wrap:wrap}
.studio .studio-foot .note{font-size:.8rem;color:var(--ink-3);max-width:30ch}
.studio .studio-foot .btn{padding:12px 20px;font-size:.92rem}
.hero-edge{height:clamp(34px,5vw,64px);background:var(--paint);transition:background .5s;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C60 20 140 58 240 44 C340 30 420 12 540 26 C660 40 740 60 860 48 C980 36 1060 10 1180 22 C1300 34 1380 52 1440 38 L1440 64 L0 64 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C60 20 140 58 240 44 C340 30 420 12 540 26 C660 40 740 60 860 48 C980 36 1060 10 1180 22 C1300 34 1380 52 1440 38 L1440 64 L0 64 Z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* ============ GIANT TYPE MARQUEE ============ */
.bigband{background:var(--paint);color:var(--on-paint);padding:clamp(20px,3vw,34px) 0;overflow:clip;transition:background .5s}
.bigband .track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:slide 34s linear infinite}
.bigband:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.bigband .cell{font-family:var(--ff-g);font-weight:900;font-size:clamp(2.6rem,6vw,5rem);letter-spacing:0;text-transform:uppercase;padding:0 .45em;display:inline-flex;align-items:center;gap:.5em}
.bigband .cell.ghost{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--on-paint) 65%,transparent)}
.bigband .cell::after{content:"";width:.55em;height:.55em;border-radius:35% 35% 35% 60%;background:var(--on-paint);opacity:.35;margin-left:.45em}
@media(prefers-reduced-motion:reduce){.bigband .track{animation:none}}

/* ============ STATS AS FAN-DECK CHIPS ============ */
.stats{padding:clamp(56px,8vw,96px) 0 0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px 10px 10px 22px;box-shadow:var(--sh-1);padding:26px 24px 22px;position:relative;transition:transform .4s var(--ease)}
.stat::before{content:"";position:absolute;top:12px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 0 3px var(--paper-2)}
.stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;border-radius:0 0 9px 21px;background:var(--paint);opacity:.9;transition:background .5s}
.stat:nth-child(1){transform:rotate(-1.1deg)}
.stat:nth-child(2){transform:rotate(.7deg) translateY(8px)}
.stat:nth-child(3){transform:rotate(-.5deg)}
.stat:nth-child(4){transform:rotate(1deg) translateY(6px)}
.stat:hover{transform:rotate(0) translateY(-4px)}
.stat .n{font-family:var(--ff-d);font-size:clamp(2.4rem,3.6vw,3.3rem);line-height:1;display:flex;align-items:baseline;gap:2px}
.stat .n em{font-style:italic;color:var(--paint);font-size:.62em;transition:color .5s}
.stat .l{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}

/* ============ SERVICES — drawdown cards ============ */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,22px)}
.svc-c{grid-column:span 4;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.svc-c:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.svc-c.photo .ph{aspect-ratio:16/9.4;overflow:hidden;position:relative}
.svc-c.photo .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);filter:saturate(.94)}
.svc-c.photo:hover .ph img{transform:scale(1.05)}
.svc-c.photo .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(to top,rgba(25,21,18,.34),transparent)}
.svc-c .num{position:absolute;top:12px;left:14px;z-index:2;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.22em;color:#fff;background:color-mix(in srgb,var(--ink) 72%,transparent);backdrop-filter:blur(4px);padding:6px 10px;border-radius:3px}
.svc-c .bd{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.svc-c h3{font-size:1.65rem}
.svc-c p{color:var(--ink-2);font-size:.95rem;line-height:1.6;flex:1}
.svc-c .more{font-weight:700;font-size:.9rem;color:var(--ink);display:inline-flex;align-items:center;gap:8px;margin-top:8px}
.svc-c .more::before{content:"";width:22px;height:2px;background:var(--paint);transition:width .35s var(--ease),background .5s}
.svc-c:hover .more::before{width:34px}
.svc-c:nth-child(1),.svc-c:nth-child(2){grid-column:span 6}
.svc-c:nth-child(1) .ph,.svc-c:nth-child(2) .ph{aspect-ratio:16/8.2}
.svc-c.svc-all{grid-column:span 12;background:var(--ink);color:var(--paper);flex-direction:row;align-items:center;justify-content:space-between;gap:26px;padding:34px 38px;min-height:0;border-color:var(--ink);flex-wrap:wrap}
.svc-c.svc-all::before{content:"";flex:none;order:2;width:min(300px,34vw);height:74px;border-radius:8px 8px 8px 18px;background:linear-gradient(115deg,#31513f 0 20%,#8a9b83 0 40%,#c2734a 0 60%,#8d9aa6 0 80%,#c8a24a 0 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.svc-c.svc-all .sa-k{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#b3aa99;margin-bottom:8px}.svc-c.svc-all .grp-txt{flex:1 1 320px}.svc-c.svc-all .more{order:3}
.svc-c.svc-all h3{color:var(--paper);font-size:1.8rem}
.svc-c.svc-all p{color:#b3aa99}
.svc-c.svc-all .more{color:var(--paper)}

/* ============ CRAFT — "why coats fail" editorial ============ */
.craft{background:var(--ink);color:var(--paper)}
.craft .eyebrow{background:#241f1a;border-color:#3a332b;color:#b3aa99}
.craft h2{color:var(--paper)}
.craft .sec-head p{color:#b3aa99}
.craft-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:start}
.craft-steps{counter-reset:cs;display:flex;flex-direction:column}
.craft-step{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px 0;border-top:1px solid #2e2822;position:relative;transition:background .3s}
.craft-step:last-child{border-bottom:1px solid #2e2822}
.craft-step .cn{font-family:var(--ff-d);font-style:italic;font-size:2.2rem;color:var(--paint-soft);opacity:.55;min-width:64px;transition:color .5s}
.craft-step:hover .cn{opacity:1;color:var(--paint-soft)}
.craft-step h4{color:var(--paper);font-size:1.18rem;margin-bottom:6px}
.craft-step h4 .tape{display:inline-block;font-family:var(--ff-m);font-weight:400;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--paint-soft);padding:4px 9px 3px;border-radius:2px;margin-left:10px;transform:rotate(-2deg) translateY(-3px);transition:background .5s}
.craft-step p{color:#b3aa99;font-size:.97rem;line-height:1.64;max-width:52ch}
.craft-fig{position:sticky;top:110px;border-radius:18px;overflow:hidden;box-shadow:var(--sh-2)}
.craft-fig img{width:100%;aspect-ratio:4/4.6;object-fit:cover}
.craft-fig .fig-cap{position:absolute;left:16px;bottom:16px;background:color-mix(in srgb,var(--ink) 78%,transparent);backdrop-filter:blur(6px);color:var(--paper);font-family:var(--ff-m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:4px}

/* ============ ESTIMATOR — spec-sheet calculator ============ */
.est{background:var(--paper-2)}
.est-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,64px);align-items:start}
.est-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-2);overflow:hidden}
.est-card .ehead{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px dashed var(--line);font-family:var(--ff-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.est-card .ehead b{color:var(--ink)}
.est-body{padding:24px}
.est-row{margin-bottom:22px}
.est-row>.elbl{display:flex;justify-content:space-between;font-weight:700;font-size:.95rem;margin-bottom:10px}
.est-row>.elbl small{font-weight:400;color:var(--ink-3)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts button{border:1.5px solid var(--line-2);background:var(--paper);padding:10px 16px;border-radius:8px;font-weight:600;font-size:.92rem;transition:all .25s var(--ease)}
.opts button:hover{border-color:var(--ink)}
.opts button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opts.multi button[aria-pressed="true"]{background:var(--paint);border-color:var(--paint);color:var(--on-paint)}
.est-out{border-top:2px solid var(--ink);margin-top:6px;padding:20px 24px 24px;background:var(--paper)}
.est-out .eo-lbl{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.est-out .eo-val{font-family:var(--ff-d);font-size:clamp(2.2rem,3.4vw,3rem);line-height:1.1;margin:6px 0 4px}
.est-out .eo-val em{font-style:italic;color:var(--paint)}
.est-out .eo-note{font-size:.8rem;color:var(--ink-3);max-width:46ch}
.est-out .btn{margin-top:16px}
.est-copy .bullets{display:flex;flex-direction:column;gap:0;margin-top:28px}
.est-copy .bullets .bl{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.est-copy .bullets .bl:last-child{border-bottom:1px solid var(--line)}
.est-copy .bl .ic{width:38px;height:38px;border-radius:9px 9px 9px 16px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center}
.est-copy .bl .ic svg{width:19px;height:19px;fill:none;stroke:var(--paint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.est-copy .bl b{display:block;font-size:1rem;margin-bottom:2px}
.est-copy .bl p{color:var(--ink-2);font-size:.92rem;line-height:1.6}

/* ============ GALLERY — editorial masonry ============ */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px)}
.gcell{position:relative;border-radius:var(--r);overflow:hidden;grid-column:span 4;aspect-ratio:4/3.1;box-shadow:var(--sh-1)}
.gcell img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);filter:saturate(.95)}
.gcell:hover img{transform:scale(1.06)}
.gcell::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(25,21,18,.55) 0%,transparent 42%)}
.gcell .cap{position:absolute;left:18px;bottom:16px;right:18px;color:#fff;z-index:2}
.gcell .cap .t{font-family:var(--ff-d);font-size:1.35rem;line-height:1.15}
.gcell .cap .s{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75;margin-top:4px}
.gcell.big{grid-column:span 8;grid-row:span 2;aspect-ratio:auto}
.gcell.wide{grid-column:span 8;aspect-ratio:16/6.4}

/* ============ WHY — ledger list ============ */
.why .wgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,80px);align-items:start}
.why .sec-head{position:sticky;top:110px;margin-bottom:0}
.why-list{display:flex;flex-direction:column}
.why-i{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line);transition:padding .3s var(--ease)}
.why-i:last-child{border-bottom:1px solid var(--line)}
.why-i:hover .wn{background:var(--paint);color:var(--on-paint);border-color:var(--paint)}
.why-i h4{font-size:1.16rem;margin-bottom:5px}
.why-i p{color:var(--ink-2);font-size:.96rem;line-height:1.62;max-width:54ch}

/* ============ CARE PLAN band ============ */
.plan-hi{background:var(--paint);color:var(--on-paint);border-radius:24px;padding:clamp(30px,4.5vw,60px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:center;position:relative;overflow:hidden;transition:background .5s}
.plan-hi::after{content:"CARE";position:absolute;right:-.1em;bottom:-.32em;font-family:var(--ff-g);font-weight:900;font-size:clamp(6rem,13vw,11rem);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--on-paint) 30%,transparent);pointer-events:none}
.plan-hi .eyebrow{background:color-mix(in srgb,var(--paint-deep) 70%,transparent);border-color:color-mix(in srgb,var(--on-paint) 25%,transparent);color:var(--on-paint)}
.plan-hi .eyebrow::before{background:var(--on-paint)}
.plan-hi h2{color:var(--on-paint);font-size:clamp(2.2rem,4.4vw,3.6rem);margin:16px 0 12px}
.plan-hi h2 em{color:var(--on-paint);opacity:.85}
.plan-hi p{color:color-mix(in srgb,var(--on-paint) 82%,transparent);max-width:52ch}
.plan-hi .btn{background:var(--on-paint);border-color:var(--on-paint);color:var(--paint);margin-top:22px}
.plan-hi .pfeat{list-style:none;display:flex;flex-direction:column;gap:0;position:relative;z-index:2}
.plan-hi .pfeat li{display:flex;gap:14px;align-items:center;padding:15px 0;border-top:1px solid color-mix(in srgb,var(--on-paint) 22%,transparent);font-weight:600}
.plan-hi .pfeat li:last-child{border-bottom:1px solid color-mix(in srgb,var(--on-paint) 22%,transparent)}
.plan-hi .pfeat li svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--on-paint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============ REVIEWS — spotlight + strip ============ */
.rev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.rev-spot{border-left:4px solid var(--paint);padding:6px 0 6px clamp(20px,3vw,36px);margin-bottom:clamp(30px,4vw,48px);transition:border-color .5s;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
.rev-spot .q,.rev-spot .who{grid-column:1}
.rev-src{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;gap:12px}
.rev-src .rs{background:var(--card);border:1px solid var(--line);border-radius:10px 10px 10px 18px;box-shadow:var(--sh-1);padding:12px 16px;min-width:0;flex:1 1 150px;max-width:240px}
.rev-src .rs b{font-size:1.25rem;display:flex;align-items:baseline;gap:8px}
.rev-src .rs b .stars{color:var(--gold);font-size:.85rem;letter-spacing:.1em}
.rev-src .rs span{display:block;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
@media(max-width:900px){.rev-spot{grid-template-columns:1fr}.rev-src{flex-direction:row;flex-wrap:wrap}}
.rev-spot .q{font-family:var(--ff-d);font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.22;max-width:26ch}
.rev-spot .q em{font-style:italic;color:var(--paint)}
.rev-spot .who{margin-top:16px;font-family:var(--ff-m);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.rev-wrap{overflow:hidden;position:relative;margin:0 calc(-1*clamp(20px,4vw,48px));padding:0 clamp(20px,4vw,48px)}
.rev-wrap::before,.rev-wrap::after{content:"";position:absolute;top:0;bottom:0;width:clamp(20px,4vw,48px);z-index:3;pointer-events:none}
.rev-wrap::before{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.rev-wrap::after{right:0;background:linear-gradient(to left,var(--paper),transparent)}
.revs{display:flex;gap:18px;width:max-content;animation:slide 60s linear infinite}
.rev-wrap:hover .revs{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.revs{animation:none;width:auto;overflow-x:auto}}
.rev{width:360px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:14px 14px 14px 26px;padding:24px 24px 20px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.rev .stars{color:var(--gold);letter-spacing:.12em;font-size:.92rem}
.rev p{margin:12px 0 16px;color:var(--ink-2);font-size:.95rem;line-height:1.62;flex:1}
.rev .by{font-weight:800;font-size:.94rem}
.rev .by span{display:block;font-family:var(--ff-m);font-weight:400;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}

/* ============ AREA + MAP ============ */
.area{background:var(--paper-2)}
.area-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:center}
.area h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin:16px 0 12px}
.area h2 em{color:var(--paint)}
.area p{color:var(--ink-2);font-size:1.06rem;max-width:52ch}
.area .cities{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.area .cities a{border:1.5px solid var(--line-2);background:var(--card);border-radius:7px 7px 7px 13px;padding:9px 15px;font-weight:600;font-size:.9rem;transition:all .25s var(--ease)}
.area .cities a:hover{border-color:var(--paint);color:var(--paint);transform:translateY(-2px)}
.area-map{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);position:relative}
.area-map iframe{display:block;width:100%;height:420px;border:0}


/* ============ FAQ ============ */
.faq{max-width:820px;margin:0 auto}
.faq details{border-top:1px solid var(--line);transition:background .3s}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-weight:700;font-size:1.08rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .qi{width:34px;height:34px;flex:none;border:1.5px solid var(--line-2);border-radius:8px 8px 8px 14px;display:grid;place-items:center;font-weight:400;font-size:1.2rem;color:var(--ink-2);transition:all .3s var(--ease)}
.faq details[open] summary .qi{background:var(--paint);border-color:var(--paint);color:var(--on-paint);transform:rotate(45deg)}
.faq .fa{padding:0 4px 24px;color:var(--ink-2);line-height:1.66;max-width:64ch}

/* ============ FINAL CTA — painted panel ============ */
.cta{padding:0 0 clamp(64px,9vw,120px)}
.cta .wrap>div,.cta .inner{position:relative}
.cta-panel{background:var(--paint);color:var(--on-paint);border-radius:26px;padding:clamp(44px,7vw,90px) clamp(24px,5vw,80px);text-align:center;position:relative;overflow:hidden;transition:background .5s}
.cta-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 85% -10%,color-mix(in srgb,var(--on-paint) 14%,transparent),transparent 70%)}
.cta h2{color:var(--on-paint);font-size:clamp(2.6rem,6vw,4.8rem);max-width:18ch;margin:0 auto 16px;position:relative}
.cta h2 em{color:var(--on-paint);opacity:.85}
.cta p{color:color-mix(in srgb,var(--on-paint) 84%,transparent);max-width:54ch;margin:0 auto;position:relative}
.cta .acts{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap;position:relative}
.cta .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cta .call{color:var(--on-paint);font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ============ FOOTER ============ */
.mfoot{background:var(--ink);color:#b3aa99;padding:clamp(56px,7vw,90px) 0 0;overflow:clip}
.mfoot .fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,56px)}
.mfoot h4{color:var(--paper);font-family:var(--ff-m);font-weight:400;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:16px}
.mfoot a{display:block;padding:5px 0;font-size:.96rem;transition:color .2s}
.mfoot a:hover{color:var(--paper)}
.mfoot .flogo{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mfoot .flogo .mark{width:38px;height:38px;border-radius:8px 8px 8px 16px;background:var(--paint);display:grid;place-items:center;transition:background .5s}
.mfoot .flogo .mark svg{width:20px;height:20px;fill:none;stroke:var(--on-paint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mfoot .flogo b{color:var(--paper);font-size:1.15rem;font-weight:800}
.mfoot .fp{font-size:.93rem;line-height:1.6;max-width:34ch}
.mfoot .fbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.mfoot .fbadges span{font-family:var(--ff-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid #37312a;border-radius:4px;padding:6px 10px;color:#8f8677}
.mfoot .fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid #2b2620;margin-top:clamp(36px,5vw,56px);padding:22px 0 26px;font-size:.8rem;color:#8f8677}
.mfoot .fbot a{display:inline}
.mfoot .fword{font-family:var(--ff-g);font-weight:900;font-size:clamp(4rem,14vw,12.5rem);letter-spacing:-.03em;text-transform:uppercase;line-height:.86;text-align:center;color:transparent;-webkit-text-stroke:1.2px #37312a;user-select:none;pointer-events:none;margin-top:clamp(20px,3vw,40px)}
.mfoot .fword em{font-family:var(--ff-d);font-style:italic;text-transform:none;color:var(--paint);-webkit-text-stroke:0;transition:color .5s}

/* ============ SUBPAGES — hero / prose / aside ============ */
.phero{background-color:var(--ink);background-size:cover;background-position:center;color:var(--paper);padding:clamp(72px,9vw,130px) 0;position:relative}
.phero::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(20,16,12,.55),rgba(20,16,12,.15))}
.phero .wrap{position:relative;z-index:2}
.crumb{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#cfc8bb;margin-bottom:18px}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb span{color:#fff}
.phero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);max-width:20ch;color:#fff}
.phero h1 .cool,.phero h1 .warm{font-style:italic;color:var(--paint-soft)}
.phero .lead{margin-top:16px;font-size:1.13rem;color:#e9e4d8;max-width:62ch;line-height:1.66}
.phero .acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.phero .call,.cta .call{font-weight:700}
.phero .call{color:#fff;text-decoration:underline;text-underline-offset:4px}
.sphero{padding:clamp(60px,7vw,100px) 0}
.pbody{padding:clamp(48px,6vw,84px) 0}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(30px,4vw,64px);align-items:start}
.prose{font-size:1.02rem;color:var(--ink-2)}
.prose h2{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--ink);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px;line-height:1.7}
.prose .lead-p{font-family:var(--ff-d);font-size:1.45rem;line-height:1.42;color:var(--ink);margin-bottom:24px}
.prose ul{list-style:none;margin:0 0 20px}
.prose ul li{position:relative;padding:10px 0 10px 34px;border-bottom:1px dashed var(--line)}
.prose ul li::before{content:"";position:absolute;left:2px;top:16px;width:14px;height:14px;border-radius:4px 4px 4px 8px;background:var(--paint);opacity:.9;transition:background .5s}
.prose ul li::after{content:"";position:absolute;left:6px;top:20px;width:6px;height:3px;border-left:1.6px solid var(--on-paint);border-bottom:1.6px solid var(--on-paint);transform:rotate(-45deg)}
.prose ul li b{color:var(--ink)}
.psteps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 8px}
.pstep{background:var(--card);border:1px solid var(--line);border-radius:12px 12px 12px 22px;padding:20px;display:flex;gap:16px;align-items:flex-start}
.pstep .pn{font-family:var(--ff-m);font-size:.8rem;width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--paint);color:var(--on-paint);border-radius:8px 8px 8px 14px;transform:rotate(-2deg);transition:background .5s}
.pstep h4{font-size:1.05rem;margin-bottom:4px;color:var(--ink)}
.pstep p{font-size:.9rem;margin:0;line-height:1.6}
.brands{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 8px}
.brands span{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);background:var(--card);border-radius:5px;padding:8px 13px;color:var(--ink-2)}
.paside{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);padding:24px}
.pcard h3{font-size:1.5rem;margin-bottom:8px}
.pcard p{color:var(--ink-2);font-size:.93rem;line-height:1.6}
.pcard .res{display:flex;gap:18px;margin:14px 0}
.pcard .res .n{font-family:var(--ff-d);font-size:1.7rem}
.pcard .res .l{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.pcard .btn{width:100%;justify-content:center;margin-top:10px}
.pcard .call{display:block;text-align:center;margin-top:12px;font-size:.92rem;color:var(--ink-2)}
.pcard .call b{color:var(--ink)}
.aside-emg{background:var(--paint-soft);border:1px solid var(--line);border-radius:16px;padding:20px;transition:background .5s}
.aside-emg .t{font-weight:800;margin-bottom:4px}
.aside-emg p{font-size:.9rem;color:var(--ink-2);line-height:1.55}
.aside-emg a{font-weight:700;color:var(--paint);text-decoration:underline;text-underline-offset:3px}
.rel-svc{border-top:1px solid var(--line);margin-top:34px;padding-top:20px}
.rel-svc h4{font-family:var(--ff-m);font-weight:400;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.rel-svc a{display:inline-block;border:1.5px solid var(--line-2);border-radius:7px;padding:8px 14px;margin:0 8px 8px 0;font-weight:600;font-size:.88rem;transition:all .2s}
.rel-svc a:hover{border-color:var(--paint);color:var(--paint)}

/* ============ PLANS (maintenance) ============ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.plan.feat{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan.feat h3,.plan.feat .price{color:var(--paper)}
.plan .tag{position:absolute;top:-13px;left:24px;background:var(--paint);color:var(--on-paint);font-family:var(--ff-m);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:4px;transform:rotate(-1.5deg);transition:background .5s}
.plan .pn{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.plan.feat .pn{color:#b3aa99}
.plan .pd{font-size:.92rem;color:var(--ink-2);margin:6px 0 14px}
.plan.feat .pd{color:#b3aa99}
.plan .price{font-family:var(--ff-d);font-size:2.6rem;line-height:1}
.plan .price span{font-family:var(--ff-g);font-size:1rem;color:var(--ink-3)}
.plan .pbill{font-size:.78rem;color:var(--ink-3);margin-top:4px}
.plan ul{list-style:none;margin:18px 0 22px;flex:1}
.plan li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:.93rem}
.plan li svg{width:17px;height:17px;flex:none;margin-top:3px;fill:none;stroke:var(--paint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan.feat li svg{stroke:var(--paint-soft)}
.plan .btn{justify-content:center}
.plan.feat .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.plan-note{font-size:.85rem;color:var(--ink-3);text-align:center;margin-top:22px}

/* ============ BOOKING / CONTACT ============ */
.bk-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,60px);align-items:start}
.emg-card{display:flex;gap:16px;background:var(--paint-soft);border:1px solid var(--line);border-radius:16px;padding:20px;transition:background .5s}
.emg-card .eic{width:42px;height:42px;flex:none;border-radius:10px 10px 10px 18px;background:var(--paint);display:grid;place-items:center;transition:background .5s}
.emg-card .eic svg{width:20px;height:20px;fill:none;stroke:var(--on-paint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.emg-card .t{font-weight:800}
.emg-card .d{font-size:.92rem;color:var(--ink-2);line-height:1.55}
.emg-card a{font-weight:700;color:var(--paint);text-decoration:underline;text-underline-offset:3px}
.bk-pts{list-style:none;margin:22px 0}
.bk-pts li{display:flex;gap:13px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:.97rem;color:var(--ink-2)}
.bk-pts .ck{width:24px;height:24px;flex:none;border-radius:6px 6px 6px 11px;background:var(--paint);display:grid;place-items:center;margin-top:1px;transition:background .5s}
.bk-pts .ck svg{width:13px;height:13px;fill:none;stroke:var(--on-paint);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bk-pts b{color:var(--ink)}
.bk-hours{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.bk-hours h4{font-family:var(--ff-m);font-weight:400;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.bk-hours .row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.bk-hours .row:last-child{border:0}
.bk-hours .row b{font-weight:700}
.bk-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-2);padding:clamp(22px,3vw,34px);position:relative}
.bk-card::before{content:"EST-04";position:absolute;top:18px;right:22px;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.22em;color:var(--ink-3)}
.bk-card .bh{font-family:var(--ff-d);font-size:2rem;line-height:1.1}
.bk-card .bs{color:var(--ink-2);font-size:.95rem;margin:8px 0 20px}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bk-f{margin-bottom:14px}
.bk-f label{display:block;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.bk-f label .req{color:#a4442c}
.bk-f input,.bk-f select,.bk-f textarea{width:100%;font:inherit;font-size:.98rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-2);border-radius:9px;padding:13px 14px;transition:border .2s,box-shadow .2s}
.bk-f input:focus,.bk-f select:focus,.bk-f textarea:focus{outline:none;border-color:var(--paint);box-shadow:0 0 0 3px color-mix(in srgb,var(--paint) 18%,transparent)}
.bk-f input.bad,.bk-f select.bad{border-color:#a4442c;box-shadow:0 0 0 3px rgba(164,68,44,.14)}
.urg{display:flex;gap:10px;flex-wrap:wrap}
.urg .uo{position:relative}
.urg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.urg label{display:inline-block;border:1.5px solid var(--line-2);border-radius:8px;padding:10px 16px;font-weight:600;font-size:.9rem;transition:all .2s;cursor:pointer}
.urg input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.urg .em input:checked+label{background:var(--paint);border-color:var(--paint);color:var(--on-paint)}
.bk-card .btn{margin-top:8px}
.bk-fine{font-size:.8rem;color:var(--ink-3);margin-top:14px}
.bk-fine b{color:var(--ink-2)}
.bk-done{display:none;text-align:center;padding:40px 10px}
.bk-done.on{display:block}
.bk-done .ic{width:64px;height:64px;margin:0 auto 18px;border-radius:16px 16px 16px 28px;background:var(--paint);display:grid;place-items:center;transition:background .5s}
.bk-done .ic svg{width:30px;height:30px;fill:none;stroke:var(--on-paint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bk-done h3{font-size:1.9rem;margin-bottom:8px}
.bk-done p{color:var(--ink-2);max-width:44ch;margin:0 auto}
.warm-card{background:var(--paint-soft)}

/* ============ EMERGENCY / DEADLINE BAND ============ */
.emg .wrap{background:var(--ink);color:var(--paper);border-radius:20px;padding:clamp(24px,3.4vw,40px) clamp(24px,3.4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.emg .el{display:flex;align-items:center;gap:18px;flex:1 1 420px}
.emg .eic{width:52px;height:52px;flex:none;border-radius:12px 12px 12px 22px;background:var(--paint);display:grid;place-items:center;transition:background .5s}
.emg .eic svg{width:24px;height:24px;fill:none;stroke:var(--on-paint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.emg h3{color:var(--paper);font-size:1.6rem;margin-bottom:4px}
.emg p{color:#b3aa99;font-size:.95rem;max-width:56ch}
.emg .btn{background:var(--paper);border-color:var(--paper);color:var(--ink);flex:none}

/* ============ MOBILE MENU / BURGER / FAB ============ */
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;padding:10px;border-radius:9px;border:1px solid var(--line)}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m-menu{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.m-menu .ov{position:absolute;inset:0;background:rgba(25,21,18,.5);opacity:0;transition:opacity .3s}
.m-menu .panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,380px);background:var(--paper);box-shadow:var(--sh-2);transform:translateX(102%);transition:transform .45s var(--ease);display:flex;flex-direction:column;overflow-y:auto;padding:18px 22px 28px}
body.menu-open .m-menu{pointer-events:auto}
body.menu-open .m-menu .ov{opacity:1}
body.menu-open .m-menu .panel{transform:none}
.m-menu .mm-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.m-menu .mm-head b{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.m-menu .mm-close{font-size:1.6rem;width:40px;height:40px;border:1px solid var(--line);border-radius:9px}
.m-menu .ml{display:block;padding:13px 6px;font-weight:600;font-size:1.05rem;border-bottom:1px dashed var(--line)}
.m-menu .ml.sub{padding-left:22px;font-weight:500;font-size:.98rem;color:var(--ink-2)}
.m-menu .ml.grp{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);border:0;padding-top:18px}
.m-menu .mm-cta{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:12px}
.m-menu .mm-cta .btn{justify-content:center}
.m-menu .mm-phone{text-align:center;font-weight:800;font-size:1.06rem}
.fab-call{display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:70;background:var(--ink);color:var(--paper);border-radius:13px;padding:15px 20px;align-items:center;justify-content:center;gap:10px;font-weight:700;box-shadow:var(--sh-2)}
.fab-call svg{width:18px;height:18px;fill:none;stroke:var(--paint-soft);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ============ MOTION / FOCUS ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.deck button,.stat,.btn{transition:none}}
:focus-visible{outline:2.5px solid var(--paint);outline-offset:3px;border-radius:4px}

/* ============ RESPONSIVE ============ */
@media(max-width:1120px){
  .mnav{display:none}
  .burger{display:flex}
  .nav-phone{display:none}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero-copy{padding-bottom:0}
  .craft-grid{grid-template-columns:1fr}
  .craft-fig{position:static;max-width:640px}
  .est-grid{grid-template-columns:1fr}
  .why .wgrid{grid-template-columns:1fr}
  .why .sec-head{position:static}
  .area-grid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .paside{position:static}
  .bk-grid{grid-template-columns:1fr}
  .plan-hi{grid-template-columns:1fr}
  .mfoot .fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:15.5px}
  .nav{height:64px;gap:10px}
  .nav-right{gap:8px}
  .nav-right .btn{padding:10px 13px;font-size:.84rem;white-space:nowrap}
  .logo{font-size:1.05rem;gap:9px}
  .logo .mark{width:32px;height:32px}
  .logo small{letter-spacing:.18em;white-space:nowrap}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:14px}
  .stat:nth-child(n){transform:none}
  .svc-grid{grid-template-columns:1fr}
  .svc-c,.svc-c:nth-child(1),.svc-c:nth-child(2),.svc-c.svc-all{grid-column:span 12}
  .gal{grid-template-columns:1fr}
  .gcell,.gcell.big,.gcell.wide{grid-column:span 1;aspect-ratio:4/2.9}
  .deck{grid-template-columns:repeat(5,1fr)}
  .deck button{aspect-ratio:1/1.1}
  .psteps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .bk-row{grid-template-columns:1fr}
  .rev{width:300px}
  .fab-call{display:flex}
  body{padding-bottom:70px}
  .mfoot .fcols{grid-template-columns:1fr}
  .area-map iframe{height:320px}
  .cta .acts{flex-direction:column}
  .studio .room{aspect-ratio:16/11}
  .studio .studio-foot{flex-direction:column;align-items:stretch;text-align:center}
  .studio .studio-foot .btn{justify-content:center}
  .hero h1{font-size:clamp(2.7rem,12vw,3.6rem)}
  .rev-spot .q{font-size:1.5rem}
}

.preview-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.pv-claim{display:inline-block;background:#fff;color:#14100c!important;font-weight:800;padding:7px 16px;border-radius:999px;text-decoration:none;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.pv-claim:hover{transform:translateY(-1px)}
/* ==== ELEVATION v1 ==== */
::selection{background:var(--paint);color:var(--on-paint)}
:focus-visible{outline:2px solid var(--paint);outline-offset:3px;border-radius:4px}

/* Papier-Textur, sehr subtil */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
 background-image:radial-gradient(rgba(35,29,22,.028) 1px,transparent 1.2px);background-size:26px 26px}
main,header,footer{position:relative;z-index:1}

/* HERO: groessere Buehne, Farb-Wash, engere Zeilen */
.hero h1{font-size:clamp(3.6rem,8.4vw,7.4rem);line-height:1.06;letter-spacing:-.005em}
@media(max-width:740px){.hero h1{font-size:clamp(2.7rem,11.5vw,3.7rem)}}
.hero h1 .swash svg path{stroke-dasharray:330;stroke-dashoffset:330;animation:swashDraw 1.05s var(--ease) .5s forwards}
@keyframes swashDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.hero h1 .swash svg path{animation:none;stroke-dashoffset:0}}
.hero h1 em{letter-spacing:-.01em}
.hero{position:relative;overflow:hidden}
.hero .sub{font-size:1.08rem;max-width:54ch}
/* Underline-Stroke animiert einmalig */
@keyframes strokeIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .stroke, .hero h1 .u::after{transform-origin:left center;animation:strokeIn 1.1s var(--ease) .35s both}

/* Kreis-Stempel (rotierend, claim-sicher) */
.hero-stamp svg{width:100%;height:100%;animation:spin 80s linear infinite}
.hero-stamp text{font:600 9.8px/1 "Space Mono",monospace;letter-spacing:.1em;fill:var(--ink-2)}
.hero-stamp circle{fill:var(--paint);}
@keyframes spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){.hero-stamp svg{animation:none}}

/* Kunden-Logo: breite Logos duerfen atmen */
.mark img{width:auto!important;height:32px!important;max-width:128px;object-fit:contain}
.mark{width:auto!important;min-width:46px;height:auto!important;padding:7px 10px;border-radius:10px;display:inline-flex;align-items:center}

/* SERVICES: Rhythmus statt Raster — erste Karte gross, Ghost-Numerale, Hover-Leben */
.svc-c{position:relative}
.svc-c .num{position:absolute;z-index:2;top:14px;left:14px;background:var(--ink);color:var(--paper);
 font:700 .72rem/1 "Space Mono",monospace;letter-spacing:.14em;padding:7px 10px;border-radius:7px}
.svc-c .ph{overflow:hidden}
.svc-c .ph img{transition:transform .8s var(--ease)}
.svc-c:hover .ph img{transform:scale(1.055)}
.svc-c .more{position:relative}
.svc-c:hover{box-shadow:var(--sh-2)}

/* METHOD: Ghost-Numerale + Verbindungslinie */
.why-i{position:relative}

/* REVIEWS: Zitat-Glyphe, Sterne in Kundenfarbe, leichte Rotation im Wechsel */
.mysrev .rev{position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.mysrev .rev::before{content:"\201C";position:absolute;top:2px;right:16px;font:700 4.2rem/1 var(--ff-g);
 color:color-mix(in srgb,var(--paint) 26%,transparent)}

/* MARQUEE: Hover-Pause */
.tick:hover .tick-track,.marq:hover .marq-track{animation-play-state:paused}

/* ESTIMATOR-Auswahl-Chip */
#eOut{display:inline-block;background:var(--paint-soft);border:1px solid color-mix(in srgb,var(--paint) 30%,transparent);
 padding:10px 16px;border-radius:12px}

/* FAB: erst nach Scroll (JS setzt .on), sanft */
#mysfab{opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
#mysfab.on{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){#mysfab{opacity:1;transform:none;pointer-events:auto}}

/* Sektions-Rhythmus: Luft variieren */
section{scroll-margin-top:90px}


/* ==== ELEVATION v2 ==== */
/* Hero-Komposition */
.hero{padding-top:clamp(64px,7vw,110px)}
.hero .wrap{position:relative}
.hero-copy{position:relative;z-index:2}
.hero h1 .hl2{display:inline-block}
.hero h1 .swash{display:inline-block;margin-left:1.2ch}
/* Stempel als Sticker auf der Studio-Ecke */
.studio{position:relative;overflow:visible!important}
.studio .hero-stamp{position:absolute;right:-26px;left:auto;top:-30px;width:140px;height:140px;z-index:6;opacity:1!important;
 filter:drop-shadow(0 10px 22px rgba(25,20,14,.28))}
.studio .hero-stamp text{font:600 9px/1 "Space Mono",monospace;letter-spacing:.24em;fill:color-mix(in srgb,var(--paper) 92%,transparent)}
.studio .hero-stamp path#circ{fill:none}
@media(max-width:1100px){.studio .hero-stamp{right:-10px;top:-26px;width:112px;height:112px}}
/* Pinselstrich-Divider */
.brush-divider{line-height:0;margin-top:clamp(30px,4vw,54px)}
.brush-divider svg{display:block;width:100%;height:clamp(44px,6vw,90px)}
.brush-divider path{fill:var(--paint);transition:fill .5s}
/* Getoente Baender */
section.tint{background:color-mix(in srgb,var(--paint) 7%,var(--paper));
 border-radius:clamp(22px,3vw,40px);margin:clamp(18px,2.4vw,34px) clamp(10px,1.6vw,26px);
 padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
/* Editorial-Eyebrow mit Linie */
.sec-head .eyebrow{display:flex;align-items:center;gap:16px;width:100%;background:none;border:none;padding-left:0}
.sec-head .eyebrow::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,color-mix(in srgb,var(--paint) 55%,transparent),color-mix(in srgb,currentColor 22%,transparent))}
.sec-head h2{font-size:clamp(2.5rem,4.9vw,4rem)}
/* Mobile-Header: Logo kompakt, kein Umbruch */
@media(max-width:740px){
 .mark img{max-width:92px!important;height:26px!important}
 .logo{gap:8px}
}

/* ==== AUSRASTEN v3: FRISCH GESTRICHEN ==== */
/* --- PAINTWALL: die gestrichene Wand --- */
.hero{position:relative;overflow:visible}
.paintwall{position:absolute;top:0;right:0;bottom:-1px;width:min(46vw,660px);z-index:0;
 background:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-paint) 5%,transparent) 0 2px,transparent 2px 34px),
  linear-gradient(180deg,color-mix(in srgb,var(--paint) 92%,#000) 0%,var(--paint) 18%,var(--paint) 82%,color-mix(in srgb,var(--paint) 90%,#000) 100%);
 clip-path:polygon(26px 0%,100% 0%,100% 100%,4px 100%,20px 96.5%,6px 93%,24px 89.5%,8px 86%,26px 82.5%,4px 79%,22px 75.5%,6px 72%,24px 68.5%,8px 65%,26px 61.5%,4px 58%,20px 54.5%,6px 51%,24px 47.5%,8px 44%,26px 40.5%,4px 37%,22px 33.5%,6px 30%,24px 26.5%,8px 23%,26px 19.5%,4px 16%,20px 12.5%,6px 9%,24px 5.5%,10px 2%);
 filter:drop-shadow(-8px 0 18px rgba(24,18,10,.10));transition:background .5s}
.hero .wrap{position:relative;z-index:2}
.hero .studio{z-index:3}
.hero h1{font-size:clamp(3.5rem,8vw,7rem);line-height:1.06;letter-spacing:-.005em}
@media(max-width:1100px){.paintwall{width:52vw}}
@media(max-width:740px){.paintwall{top:auto;height:46%;width:100%;clip-path:polygon(0 26px,7% 6px,14% 24px,22% 4px,30% 26px,38% 8px,46% 24px,54% 4px,62% 26px,70% 8px,78% 24px,86% 6px,94% 24px,100% 8px,100% 100%,0 100%)}}
/* Hero-CTA in Kundenfarbe (on-paint garantiert Kontrast) */
.btn.btn-paint{background:var(--paint);border-color:var(--paint);color:var(--on-paint)}
.btn.btn-paint::before{background:var(--on-paint)}
.btn.btn-paint:hover{box-shadow:0 14px 30px -12px color-mix(in srgb,var(--paint) 60%,transparent)}
/* Stempel: Papier-Plakette mit Farb-Ring (sitzt auf Wand UND Bild) */
.studio .hero-stamp text{fill:var(--paper)}
/* --- DUNKLES KAPITEL (Method) --- */
section.dark{background:var(--ink);color:var(--paper);
 border-radius:clamp(22px,3vw,40px);margin:clamp(18px,2.4vw,34px) clamp(10px,1.6vw,26px);
 padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px)}
section.dark .sec-head h2,section.dark h2{color:var(--paper)}
section.dark .sec-head h2 em{color:var(--paint-soft)}
section.dark .eyebrow{color:color-mix(in srgb,var(--paper) 78%,transparent)}
section.dark .eyebrow::after{background:linear-gradient(90deg,color-mix(in srgb,var(--paint) 70%,transparent),color-mix(in srgb,var(--paper) 14%,transparent))}
section.dark .sec-head p,section.dark p{color:color-mix(in srgb,var(--paper) 86%,transparent)}
section.dark h4{color:var(--paper)}
section.dark .why-i{border-color:color-mix(in srgb,var(--paper) 14%,transparent)}
/* Ziffern: solide Farb-Chips (kein Geister-Outline mehr) */
.why-i .wn{width:58px;height:58px;flex:none;display:grid;place-items:center;border-radius:16px;
 background:var(--paint);color:var(--on-paint);font:800 1.5rem/1.15 var(--ff-g);letter-spacing:0;
 box-shadow:0 10px 24px -12px color-mix(in srgb,var(--paint) 70%,transparent)}
section.dark .why-i .wn{background:var(--paint);color:var(--on-paint)}
/* --- Estimator: deutliche Controls --- */
#estCard button{border:1.5px solid var(--line-2);background:var(--card);font-weight:600}
#estCard button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
section.tint #estCard button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
/* --- Kontrast-Anhebungen --- */

section.tint{background:color-mix(in srgb,var(--paint) 9%,var(--paper))}
section.tint p{color:var(--ink-2)}

/* Kontrast-Anhebung (Scan-Funde >=4.5 small / >=3 Sterne) */
:root{--ink-2:#494439;--ink-3:#6a6252}
.ti .tl,.trust .tl{color:var(--ink-2)}
.mono,[class*="mono"]{color:var(--ink-2)}

/* ==== v4 mobile ==== */
@media(max-width:740px){
 .studio .hero-stamp{right:6px;top:-30px;width:104px;height:104px}
 section.dark,section.tint{margin-left:8px;margin-right:8px;border-radius:20px}
 .why-i .wn{width:46px;height:46px;font-size:1.15rem;border-radius:12px}
 #estCard button{padding:12px 14px}
 .hero h1{overflow-wrap:anywhere}
}
/* ==== v4 daten-gestufte Fuelle ==== */
.hours-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--sh-1)}
.hours-card h3{font-family:var(--ff-d);font-size:1.5rem;margin:0 0 12px}
.hours-card ul{list-style:none;margin:0;padding:0}
.hours-card li{display:flex;justify-content:space-between;gap:18px;padding:7px 0;border-top:1px solid var(--line);font-size:.95rem}
.hours-card li:first-child{border-top:none}
.hours-card li b{font-weight:600}
.guides details{border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:12px;overflow:hidden}
.guides summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:1.06rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
.guides summary::after{content:"+";font:700 1.3rem/1 var(--ff-g);color:var(--paint)}
.guides details[open] summary::after{content:"\2212"}
.guides .g-body{padding:0 22px 20px;color:var(--ink-2);line-height:1.7}
.guides .g-body p{margin:0 0 10px}

.studio .hero-stamp svg{background:var(--ink);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--paint) 70%,transparent);animation:spin 26s linear infinite;display:block}

footer footer 
/* Kontrast-Restfixes v5 */
section.dark .stars,
/* Galerie-Captions: Scrim = immer lesbar, egal welches Foto */
.cap{background:linear-gradient(180deg,transparent 0%,rgba(16,13,9,.55) 34%,rgba(16,13,9,.86) 100%)!important;
 padding-top:34px!important}
.cap .t{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.cap .s{color:rgba(255,255,255,.88)!important}


/* ==== v6 marquee/gold/social/footer-logo ==== */
/* GOLD-Sterne ueberall (Glyph-Icons; Lesbarkeit via dezentem Schatten) */
.stars{color:#e6a63c!important;text-shadow:0 1px 1px rgba(80,45,0,.4)}
section.dark .stars{color:#f0b44e!important}
/* Marquee-Karten: Quote-Glyphe beibehalten */
.revs .rev{position:relative}
.revs .rev::before{content:"\201C";position:absolute;top:2px;right:14px;font:700 3.6rem/1 var(--ff-g);color:color-mix(in srgb,var(--paint) 24%,transparent)}
/* Social-Icon-Buttons */
footer footer /* Footer-Logo: nie aus der Box */
footer .mark{width:auto!important;height:auto!important;padding:5px 9px;display:inline-flex;align-items:center;border-radius:9px}
footer .mark img{height:24px!important;width:auto!important;max-width:110px;object-fit:contain}

/* ==== v7 brand social icons ==== */
.f-social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.f-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 12px -6px rgba(0,0,0,.45);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.f-social a svg{width:21px;height:21px;display:block}
.f-social a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 10px 18px -8px rgba(0,0,0,.5)}
.f-social a.sm-facebook{background:#1877F2}
.f-social a.sm-instagram{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.f-social a.sm-youtube{background:#FF0000}
.f-social a.sm-tiktok{background:#000}
.f-social a.sm-x{background:#000}
.f-social a.sm-linkedin{background:#0A66C2}
.f-social a.sm-pinterest{background:#E60023}

/* z-fix dropdown: Menue immer VOR Seiteninhalt */
header{position:relative;z-index:200}
header .drop,header .dropdown,nav .drop{z-index:210}
.phero,.hero{z-index:1}

/* v8 Service-Tiefe */
.inc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 26px}
.inc-grid li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600}
.inc-grid li svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:var(--paint);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.guide-copy{max-width:68ch;color:var(--ink-2);line-height:1.75}
.guide-copy p{margin:0 0 14px}
.rel-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.rel-lbl{font:600 .72rem/1 "Space Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-right:6px}
.rel-pill{text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem;padding:9px 16px;border:1.5px solid var(--line-2);border-radius:999px}
.rel-pill:hover{border-color:var(--paint);color:var(--paint)}

/* sm-shape v9: native Formen */
.f-social a.sm-facebook,.f-social a.sm-pinterest{border-radius:50%}
.f-social a.sm-youtube{width:52px;border-radius:12px}
.f-social a svg{width:22px;height:22px}
.f-social a.sm-youtube svg{width:24px;height:24px}

/* SHARED v2 */
html,body{overflow-x:hidden}
.svc-c{position:relative}
.svc-c .num{position:absolute;z-index:2;top:14px;left:14px;background:var(--ink);color:var(--paper);font:700 .72rem/1 "Space Mono",monospace;letter-spacing:.14em;padding:7px 10px;border-radius:7px}
.svc-c .ph{overflow:hidden}
.svc-c .ph img{transition:transform .8s var(--ease)}
.svc-c:hover .ph img{transform:scale(1.055)}
.svc-c:hover{box-shadow:var(--sh-2)}

/* dark-Kapitel: Ghost-Buttons + em hell (Kontrast) */
section.dark .btn-cool,section.dark .btn-ghost{color:var(--paper)!important;border-color:color-mix(in srgb,var(--paper) 48%,transparent)!important;background:transparent!important}
section.dark .btn-cool:hover,section.dark .btn-ghost:hover{border-color:var(--paper)!important;background:color-mix(in srgb,var(--paper) 10%,transparent)!important}
section.dark b,section.dark strong{color:var(--paper)}
section.dark em{color:var(--paint-soft)}
footer .fp{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.mfoot .fp,.mfoot p,.mfoot{color:color-mix(in srgb,var(--paper) 74%,transparent)}
/* em-Akzent in Headlines: helle Kundenfarben abdunkeln fuer Kontrast (dark-Kapitel bleibt paint-soft) */
/* em-kontrast-v2: heller Grund -> em abgedunkelt; dunkles Kapitel -> em aufgehellt */
h1 em,h2 em,h3 em,.sec-head h2 em{color:color-mix(in srgb,var(--paint) 60%,var(--ink))!important}
section.dark h1 em,section.dark h2 em,section.dark h3 em,section.dark .sec-head h2 em{color:color-mix(in srgb,var(--paint-soft) 55%,#fff)!important}
.mm-phone,.mm-phone b{color:color-mix(in srgb,var(--paint) 52%,var(--ink))!important}
/* Review-Karten feste Breite erzwingen (Marquee darf nicht strecken) + Rating-Sterne gold */
.rev-wrap .revs .rev{width:360px!important;flex:0 0 360px!important}
@media(max-width:640px){.rev-wrap .revs .rev{width:300px!important;flex-basis:300px!important}}
/* customer-logo: echtes Firmenlogo ohne aufgesetzten Kasten, konsistente Hoehe */
.mark.mark-logo{background:none!important;box-shadow:none!important;padding:0!important;width:auto!important;min-width:0!important;height:auto!important;border-radius:0}
.mark.mark-logo img{height:30px!important;width:auto!important;max-width:150px!important}
footer .mark.mark-logo img,.mfoot .mark.mark-logo img{height:26px!important}
/* Initialen-Monogramm fuer Firmen ohne echtes Logo (Demo final) */
.mark.mark-mono{font-family:var(--ff-d);font-weight:800;font-size:15px;letter-spacing:.01em;color:var(--on-paint)}
footer .mark.mark-mono,.mfoot .mark.mark-mono{font-size:13px}

/* ===== BEFORE / AFTER, the reveal (signature) ===== */
.compare{padding:clamp(60px,8vw,110px) 0}
.ba{position:relative;aspect-ratio:16/10;max-width:1000px;margin:46px auto 0;border-radius:14px;overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize;box-shadow:0 40px 82px -42px rgba(25,21,18,.45);border:1px solid var(--line)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba .before{filter:saturate(.4) brightness(.76) contrast(.9) sepia(.18);clip-path:inset(0 var(--clip,50%) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--paint);transform:translateX(-50%);box-shadow:0 0 0 1px rgba(255,255,255,.4);transition:background .5s;pointer-events:none}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:var(--paint);border:3px solid var(--paper);display:grid;place-items:center;box-shadow:0 6px 20px rgba(25,21,18,.42);transition:background .5s}
.ba-grip::before,.ba-grip::after{content:"";position:absolute;border-block:5px solid transparent}
.ba-grip::before{border-right:7px solid var(--on-paint);left:13px}
.ba-grip::after{border-left:7px solid var(--on-paint);right:13px}
.ba-tag{position:absolute;bottom:16px;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:4px;color:#fff;background:rgba(25,21,18,.72);backdrop-filter:blur(4px);pointer-events:none}
.ba-tag.b{left:16px}.ba-tag.a{right:16px;background:var(--paint);color:var(--on-paint)}
@media(max-width:640px){.ba{aspect-ratio:3/4}.ba-grip{width:56px;height:56px}}

/* ===== CRAFT scroll-progress timeline (signature #2) ===== */
.craft-steps{position:relative;padding-left:34px}
.craft-steps::before{content:"";position:absolute;left:6px;top:36px;bottom:36px;width:2px;background:#2e2822}
.craft-steps::after{content:"";position:absolute;left:6px;top:36px;width:2px;height:calc((100% - 72px) * var(--cprog,0));background:var(--paint);box-shadow:0 0 11px var(--paint);transition:height .18s ease-out}
.craft-step::before{content:"";position:absolute;left:-34px;top:38px;width:12px;height:12px;border-radius:50%;background:#2e2822;border:2px solid var(--ink);transition:background .4s,box-shadow .4s,transform .4s;z-index:1}
.craft-step.lit::before{background:var(--paint);box-shadow:0 0 0 5px color-mix(in srgb,var(--paint) 26%,transparent);transform:scale(1.15)}
.craft-step .cn{transition:color .5s,opacity .5s}
.craft-step.lit .cn{opacity:1;color:var(--paint-soft)}
@media(max-width:820px){.craft-steps{padding-left:30px}.craft-step::before{left:-30px}}

/* ===== Room-Visualizer: Wand faerbt sich live mit gewaehlter Farbe (#3) ===== */
.room{position:relative}
.room .wallpaint{position:absolute;inset:0 0 44% 0;background:var(--paint);mix-blend-mode:multiply;opacity:.5;pointer-events:none;z-index:1;transition:background .55s var(--ease),opacity .55s;mask:linear-gradient(#000 62%,transparent);-webkit-mask:linear-gradient(#000 62%,transparent)}
.room img{position:relative;z-index:0}
.room .tag-live,.room .readout{z-index:3}

/* Try-your-color: after = Wand in Studio-Farbe, before = heutige matte Wand */
.ba .ba-paint{position:absolute;inset:0;background:var(--paint);mix-blend-mode:multiply;opacity:.46;pointer-events:none;z-index:1;transition:background .55s var(--ease);mask:linear-gradient(#000 42%,#00000088 58%,transparent 74%);-webkit-mask:linear-gradient(#000 42%,#00000088 58%,transparent 74%)}
.ba .before{z-index:2}
.ba .ba-stains{position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:inset(0 var(--clip,50%) 0 0);mix-blend-mode:multiply;opacity:.5;background:
 radial-gradient(220px 140px at 18% 30%,#8d846f55,transparent 70%),
 radial-gradient(300px 190px at 62% 18%,#7d745f44,transparent 70%),
 radial-gradient(180px 220px at 38% 62%,#8a806b4d,transparent 70%),
 radial-gradient(260px 160px at 82% 48%,#756c5844,transparent 72%)}
.ba-tag.a b{font-weight:700}

/* motion pass: rotierender Stamp, Parallax, Service-Hover-Boost */
.hero-stamp svg{animation:stampspin 14s linear infinite}
@keyframes stampspin{to{transform:rotate(360deg)}}
.svc-c.photo .ph::before{content:"View service →";position:absolute;left:14px;bottom:12px;z-index:3;background:var(--paint);color:var(--on-paint);font-weight:700;font-size:.8rem;padding:8px 14px;border-radius:100px;opacity:0;transform:translateY(8px);transition:all .35s var(--ease)}
.svc-c.photo:hover .ph::before{opacity:1;transform:none}
.svc-c .num{transition:background .3s,color .3s}
.svc-c:hover .num{background:var(--paint);color:var(--on-paint)}
.paintwall,.craft-fig img{will-change:transform}


/* ============================================================
   AWWWARDS LAYER v1 — interaction: paint cursor, scroll brush,
   magnetic CTAs. Progressive: no JS -> native cursor stays.
   ============================================================ */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:3000;pointer-events:none;
  background:linear-gradient(90deg,var(--paint),var(--paint-deep));box-shadow:0 0 12px -2px var(--paint);
  transition:background .5s}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button,body.has-cursor [role=button],body.has-cursor summary,
body.has-cursor input,body.has-cursor label,body.has-cursor .ba{cursor:none}
.cur-ring,.cur-dot{position:fixed;top:0;left:0;z-index:2600;pointer-events:none;border-radius:50%;
  mix-blend-mode:multiply;will-change:transform}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--paint);opacity:.65;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .35s,border-color .5s}
.cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--paint);
  transition:opacity .35s,transform .1s,background .5s}
body.cur-hot .cur-ring{width:54px;height:54px;margin:-27px 0 0 -27px;opacity:.9;
  background:color-mix(in srgb,var(--paint) 15%,transparent)}
body.cur-hot .cur-dot{opacity:0}
body.cur-press .cur-ring{width:26px;height:26px;margin:-13px 0 0 -13px}
@media(hover:none),(pointer:coarse){.cur-ring,.cur-dot{display:none!important}body.has-cursor,body.has-cursor *{cursor:auto}}
@media(prefers-reduced-motion:reduce){.cur-ring,.cur-dot{display:none!important}}


/* ============================================================
   AWWWARDS LAYER v2 — kinetic split headlines (word rise).
   JS wraps each word; reduced-motion / no-JS -> full static text.
   ============================================================ */
.kin .wm{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.05;padding-bottom:.02em;margin-bottom:-.02em}
.kin .wm>i,.kin .wm>em>i{display:inline-block;font-style:inherit;transform:translateY(116%);transition:transform .75s var(--ease)}
.kin .wm>em{font-style:italic;color:var(--paint);transition:color .5s}
.kin.in .wm>i,.kin.in .wm>em>i{transform:none}
@media(prefers-reduced-motion:reduce){.kin .wm>i,.kin .wm>em>i{transform:none!important;transition:none}}


/* ============================================================
   AWWWARDS LAYER v3 — tilt + spotlight on service & gallery cards.
   pointer:fine only; reduced-motion/touch -> flat.
   ============================================================ */
.svc-c,.gcell{transform-style:preserve-3d}
.svc-c::after,.gcell::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;z-index:4;
  transition:opacity .35s;mix-blend-mode:soft-light;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--paint) 30%,transparent),transparent 60%)}
.svc-c.tilting::after,.gcell.tilting::after{opacity:1}
@media(hover:none),(pointer:coarse){.svc-c::after,.gcell::after{content:none}}
@media(prefers-reduced-motion:reduce){.svc-c,.gcell{transform:none!important}}


/* ============================================================
   AWWWARDS LAYER v4 — image clip-reveal on scroll (wall unveiled).
   Photo wipes up from bottom as it enters. reduced-motion -> full.
   ============================================================ */
.reveal-img{clip-path:inset(0 0 100% 0)}
.reveal-img.shown{clip-path:inset(0 0 0% 0);transition:clip-path 1.05s var(--ease)}
@media(prefers-reduced-motion:reduce){.reveal-img{clip-path:none!important;transition:none}}


/* ============================================================
   AWWWARDS LAYER v5 — named-color deck marquee (Farrow&Ball feel).
   Reads live deck colors; duplicated track for seamless loop.
   ============================================================ */
.cmarq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);padding:17px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cmarq-track{display:flex;width:max-content;animation:cmarq 46s linear infinite}
.cmarq:hover .cmarq-track{animation-play-state:paused}
.cmarq-chip{display:inline-flex;align-items:center;gap:11px;padding:0 30px;font-family:var(--ff-m);font-size:.82rem;letter-spacing:.03em;color:var(--ink-2);white-space:nowrap}
.cmarq-chip .sw{width:15px;height:15px;border-radius:4px 4px 4px 7px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.cmarq-chip .no{color:var(--ink-3);font-size:.72rem;letter-spacing:.06em}
@keyframes cmarq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cmarq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:6px 0}}


/* ============================================================
   AWWWARDS LAYER v7 — masking-tape peel-in (eyebrows) + living grain.
   Pure CSS. reduced-motion -> static.
   ============================================================ */
.reveal .eyebrow{opacity:0;transform:translateY(-7px) rotate(-6deg)}
.reveal.in .eyebrow{opacity:1;transform:rotate(-.6deg);transition:opacity .5s var(--ease) .12s,transform .62s var(--ease) .12s}
.reveal.in .eyebrow.c-center{transform:rotate(.4deg)}
body::before{inset:-6%;animation:grainshift 7.5s steps(5) infinite}
@keyframes grainshift{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,2%)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.reveal .eyebrow{opacity:1!important;transform:rotate(-.6deg)!important}body::before{animation:none;inset:0}}


/* ============================================================
   AWWWARDS LAYER v9 — pull-a-swatch: deck chip lifts like a
   paint card drawn from the fan deck. CSS-only, overrides -4px.
   ============================================================ */
.deck button:hover{transform:translateY(-9px) rotate(-3deg) scale(1.05);z-index:3;
  box-shadow:0 15px 26px -10px rgba(25,21,18,.55),inset 0 0 0 1px rgba(0,0,0,.1),inset 0 -8px 14px -8px rgba(0,0,0,.28)}
@supports selector(:has(*)){.deck:has(button:hover) button:not(:hover){opacity:.8;transition:opacity .3s}}
@media(prefers-reduced-motion:reduce){.deck button:hover{transform:translateY(-4px);transition:none}}


/* ============ THE CREW — team section (halal: monogram avatars, no faces) ============ */
.crew-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:6px}
.crew-c{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;gap:15px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.crew-c:hover{transform:translateY(-5px);box-shadow:var(--sh-1)}
.crew-av{width:54px;height:54px;border-radius:14px 14px 14px 22px;background:var(--paint-soft);color:var(--paint);display:grid;place-items:center;font-family:var(--ff-g);font-weight:800;font-size:1.24rem;letter-spacing:.01em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);transition:background .5s,color .5s}
.crew-bd b{display:block;font-family:var(--ff-g);font-weight:700;font-size:1.04rem}
.crew-bd span{display:block;font-size:.85rem;color:var(--ink-3);margin-top:3px}
.crew-note{display:flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--ff-m);font-size:.75rem;letter-spacing:.02em;color:var(--ink-3);justify-content:center;text-align:center}
.crew-note svg{color:var(--paint);flex:none}
@media(max-width:900px){.crew-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.crew-grid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}