/* ============================================================
   БЕЛЫЙ КАМЕНЬ · искусственный камень
   Aesthetic: "Alabaster Atelier" — light pastel gallery,
   warm alabaster page, pure-white stone slabs, graphite ink
   and graphite controls. Soft realistic shadows, no italics.
   ============================================================ */

:root{
  /* palette — light / pastel */
  --bg:        #f4f1ea;   /* warm alabaster page */
  --bg-2:      #ece7dd;   /* soft inset / hover */
  --panel:     #ffffff;   /* pure white cards */
  --panel-2:   #faf8f3;   /* off-white card */
  --line:      rgba(36,30,22,.10);
  --line-2:    rgba(36,30,22,.18);
  --text:      #1d1b16;   /* near-black ink */
  --dim:       #5f584c;   /* warm secondary */
  --mute:      #948b7c;   /* tertiary */
  --graphite:  #2b2926;   /* buttons / icons / accents */
  --graphite-2:#413d37;   /* graphite hover */
  --em:        #34302a;   /* highlighted words */
  --glow:      rgba(43,41,38,.16);
  --wa:        #1faa53;
  --tg:        #2a8fd0;

  /* type */
  --display: "Prata", Georgia, "Times New Roman", serif;
  --sans:    "Golos Text", system-ui, -apple-system, sans-serif;

  --header-h: 86px;
  --wrap: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  scroll-padding-top:0;
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; color:inherit; background:none; border:none }
input,textarea{ font-family:inherit }
h1,h2,h3{ font-weight:400; line-height:1.04 }
em{ font-style:normal }                 /* no italics anywhere */
::selection{ background:var(--graphite); color:#fff }
.font-display{ font-family:var(--display); font-weight:400 }

/* ---------- atmospherics ---------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.ambient-glow{
  position:absolute; top:-34vh; right:-16vw;
  width:80vw; height:80vw; border-radius:50%;
  background:radial-gradient(circle, rgba(255,252,244,.9) 0%, rgba(232,224,208,.45) 40%, transparent 68%);
  filter:blur(26px); opacity:.7;
  transition:transform 1.1s var(--ease), opacity 1.1s var(--ease);
}
body::before{ /* soft light wash, not a dark vignette */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 78% at 50% 0%, rgba(255,255,255,.55), transparent 58%);
}

/* scroll progress */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60; background:transparent }
.scroll-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--graphite-2),var(--graphite),#6b6459) }

/* ---------- side dots ---------- */
.dots{
  position:fixed; right:34px; top:50%; transform:translateY(-50%);
  z-index:55; display:flex; flex-direction:column; gap:18px; align-items:flex-end;
}
.dot{ position:relative; display:flex; align-items:center; gap:12px; opacity:.55; transition:opacity .4s }
.dot span{ font-size:11px; letter-spacing:.12em; color:var(--mute); font-variant-numeric:tabular-nums; opacity:0; transform:translateX(6px); transition:.4s var(--ease) }
.dot::after{ content:""; width:9px; height:9px; border-radius:50%; border:1px solid var(--line-2); transition:.4s var(--ease) }
.dot::before{ content:attr(data-label); position:absolute; right:26px; white-space:nowrap; font-size:12px; letter-spacing:.04em; color:var(--text); opacity:0; transform:translateX(8px); pointer-events:none; transition:.35s var(--ease) }
.dot:hover{ opacity:1 } .dot:hover::before{ opacity:1; transform:none }
.dot:hover span{ opacity:1; transform:none }
.dot.is-active{ opacity:1 }
.dot.is-active span{ opacity:1; transform:none; color:var(--graphite) }
.dot.is-active::after{ border-color:var(--graphite); background:var(--graphite); box-shadow:0 0 0 4px rgba(43,41,38,.12); transform:scale(1.15) }

/* ---------- floating contact ---------- */
.float-contact{ position:fixed; right:26px; bottom:26px; z-index:58; display:flex; flex-direction:column; gap:12px; align-items:flex-end }
.fc{
  display:inline-flex; align-items:center; gap:0; height:54px; width:54px;
  border-radius:30px; overflow:hidden;
  background:var(--graphite); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px -8px rgba(40,34,26,.5); transition:.45s var(--ease); color:#fff;
}
.fc .ic{ width:22px; height:22px; flex:0 0 54px; transition:.4s }
.fc span{ font-size:14px; font-weight:500; white-space:nowrap; padding-right:22px; opacity:0; max-width:0; transition:.45s var(--ease) }
.fc--wa .ic{ color:#4ade80 } .fc--tg .ic{ color:#5bb8e8 }
.fc:hover{ width:auto; background:var(--graphite-2); box-shadow:0 16px 38px -8px rgba(40,34,26,.6) }
.fc:hover span{ opacity:1; max-width:180px }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:2px; font-size:15px; font-weight:500;
  letter-spacing:.01em; overflow:hidden; transition:.4s var(--ease); white-space:nowrap;
}
.btn .ic-arrow{ width:18px; height:18px; transition:transform .4s var(--ease) }
.btn:hover .ic-arrow{ transform:translateX(5px) }
.btn--sm{ padding:11px 19px; font-size:13.5px }
.btn--block{ display:flex; width:100%; justify-content:center }
.btn--primary{ background:var(--graphite); color:#fff; box-shadow:0 10px 26px -12px rgba(40,34,26,.7) }
.btn--primary::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%); transform:translateX(-130%); transition:transform .7s var(--ease) }
.btn--primary:hover{ background:var(--graphite-2); box-shadow:0 16px 34px -12px rgba(40,34,26,.75); transform:translateY(-2px) }
.btn--primary:hover::after{ transform:translateX(130%) }
.btn--ghost{ border:1px solid var(--line-2); color:var(--text) }
.btn--ghost:hover{ border-color:var(--graphite); color:var(--graphite); background:rgba(43,41,38,.05) }

.link-arrow{ display:inline-flex; align-items:center; gap:8px; color:var(--graphite); font-weight:600; font-size:14.5px; transition:.3s }
.link-arrow .ic-arrow{ width:16px; height:16px; transition:transform .3s }
.link-arrow:hover{ gap:12px } .link-arrow:hover .ic-arrow{ transform:translateX(3px) }

/* ---------- header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 clamp(20px,4vw,52px);
  transition:background .5s var(--ease), height .5s var(--ease), border-color .5s, box-shadow .5s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{ height:70px; background:rgba(244,241,234,.82); backdrop-filter:blur(14px) saturate(120%); border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(255,255,255,.7) }
.brand{ display:flex; align-items:center; gap:13px; flex:0 0 auto }
.brand-mark{
  display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px;
  font-family:var(--display); font-size:16px; letter-spacing:.02em; color:#fff;
  border-radius:50%; background:var(--graphite);
  box-shadow:0 6px 16px -8px rgba(40,34,26,.6);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.05 }
.brand-name{ font-family:var(--display); font-size:21px; letter-spacing:.01em }
.brand-sub{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--mute) }

.nav{ display:flex; gap:34px; margin-left:auto }
.nav a{ position:relative; font-size:14.5px; color:var(--dim); padding:6px 0; transition:color .3s }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--graphite); transition:width .35s var(--ease) }
.nav a:hover{ color:var(--text) } .nav a:hover::after{ width:100% }

.header-cta{ display:flex; align-items:center; gap:22px; flex:0 0 auto }
.header-phone{ font-size:14.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap; transition:color .3s }
.header-phone:hover{ color:var(--graphite) }

.burger{ display:none; flex-direction:column; gap:6px; width:42px; height:42px; align-items:center; justify-content:center }
.burger span{ width:24px; height:1.8px; background:var(--text); transition:.35s var(--ease) }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.8px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.8px) rotate(-45deg) }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:49; background:rgba(244,241,234,.98); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:center; padding:0 30px;
  opacity:0; visibility:hidden; transition:.5s var(--ease);
}
.mobile-menu.is-open{ opacity:1; visibility:visible }
.mobile-menu nav{ display:flex; flex-direction:column; gap:6px }
.mobile-menu nav a{ font-family:var(--display); font-size:clamp(28px,9vw,46px); display:flex; align-items:baseline; gap:16px; padding:8px 0; transform:translateY(14px); opacity:0; transition:.5s var(--ease) }
.mobile-menu.is-open nav a{ transform:none; opacity:1 }
.mobile-menu nav a span{ font-family:var(--sans); font-size:13px; color:var(--graphite); letter-spacing:.1em }
.mobile-menu-foot{ position:absolute; bottom:40px; left:30px; right:30px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:24px }
.mobile-menu-foot a{ font-size:18px; font-weight:600 }
.mm-soc{ display:flex; gap:14px }
.mm-soc a{ display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line-2); border-radius:50% }
.mm-soc .ic{ width:20px; height:20px; color:var(--graphite) }

/* ---------- section shell ---------- */
.section{
  position:relative; z-index:2; scroll-snap-align:start; scroll-snap-stop:always;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + 24px) 0 56px;
}
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,4vw,52px) }
.ic{ width:24px; height:24px; display:inline-block; vertical-align:middle }

/* section heads */
.sec-head{ max-width:780px; margin-bottom:clamp(34px,5vw,60px) }
.sec-head--row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap }
.sec-num{ display:inline-block; font-size:12px; letter-spacing:.32em; color:var(--graphite); margin-bottom:14px; font-variant-numeric:tabular-nums }
.sec-num::before{ content:"— " ; color:var(--mute) }
.sec-title{ font-size:clamp(34px,5.4vw,64px); letter-spacing:-.01em }
.sec-title em,.hero-title em{
  color:var(--em);
  text-decoration:underline;
  text-decoration-color:var(--graphite);
  text-decoration-thickness:.05em;
  text-underline-offset:.12em;
}
.sec-note{ margin-top:16px; color:var(--dim); font-size:clamp(15px,1.6vw,17px); max-width:46ch }

.eyebrow{ display:flex; align-items:center; gap:14px; font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--graphite); font-weight:600 }
.eyebrow-line{ width:46px; height:1px; background:linear-gradient(90deg,var(--graphite),transparent) }

/* ====================================================
   HERO
   ==================================================== */
.hero-grid{ display:grid; grid-template-columns:1.06fr .94fr; align-items:center; gap:clamp(30px,5vw,72px) }
.hero-title{ font-size:clamp(33px,8.2vw,86px); margin:22px 0 0; letter-spacing:-.015em }
.hero-lead{ margin-top:26px; font-size:clamp(16px,1.9vw,19px); color:var(--dim); max-width:48ch }
.hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap }
.hero-stats{ display:flex; gap:clamp(22px,4vw,52px); margin-top:46px; list-style:none; flex-wrap:wrap }
.hero-stats li{ display:flex; flex-direction:column; gap:2px }
.hero-stats b{ font-size:clamp(30px,3.6vw,44px); color:var(--text); line-height:1 }
.hero-stats span{ font-size:13px; color:var(--mute); letter-spacing:.02em }

.hero-visual{ position:relative; align-self:stretch; min-height:min(64vh,560px); display:flex; align-items:center; justify-content:center }

/* ---- manager portrait (the one photo) ---- */
.manager{ position:relative; width:min(100%,420px) }
.manager-photo{
  position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden;
  /* swap this background with a real photo of Sergey:
     background:url("/uploads/sergey.jpg") center/cover; */
  background:
    radial-gradient(120% 90% at 30% 20%, #ffffff 0%, transparent 55%),
    linear-gradient(160deg, #ece6db 0%, #d9d0c1 60%, #c7bca9 100%);
  border:1px solid var(--line); display:grid; place-items:center;
  box-shadow:0 40px 80px -36px rgba(45,38,28,.45), inset 0 1px 0 rgba(255,255,255,.7);
  transform:rotate(-1.1deg);
}
.manager-photo svg{ width:46%; height:46%; color:rgba(43,41,38,.22) }
.manager-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  background:var(--graphite); color:#fff; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; padding:7px 14px; border-radius:2px; font-weight:600;
}
.manager-cap{
  position:absolute; left:-14px; right:24px; bottom:-22px; z-index:3;
  background:var(--panel); border:1px solid var(--line);
  padding:16px 22px; border-radius:3px; box-shadow:0 24px 50px -26px rgba(45,38,28,.5);
  transform:rotate(.6deg);
}
.manager-cap b{ display:block; font-family:var(--display); font-size:22px; color:var(--text) }
.manager-cap span{ display:block; margin-top:4px; font-size:13.5px; color:var(--dim); letter-spacing:.01em }

.scroll-cue{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--mute); font-size:11px; letter-spacing:.24em; text-transform:uppercase }
.scroll-cue i{ width:1px; height:40px; background:linear-gradient(var(--graphite),transparent); position:relative; overflow:hidden }
.scroll-cue i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--graphite); animation:cue 1.8s var(--ease) infinite }
@keyframes cue{ to{ top:120% } }

/* ====================================================
   STONE SLABS (procedural, no images)
   ==================================================== */
.slab{
  position:relative; width:100%; height:100%; min-height:inherit; border-radius:3px; overflow:hidden;
  background-color:var(--s2);
  background-image:
    radial-gradient(120% 80% at 25% 18%, var(--s1) 0%, transparent 55%),
    radial-gradient(90% 70% at 82% 88%, var(--s3) 0%, transparent 50%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(64deg, rgba(0,0,0,.05) 0 1px, transparent 1px 14px),
    linear-gradient(150deg, var(--s1), var(--s2) 55%, var(--s3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 70px rgba(0,0,0,.05), 0 30px 64px -30px rgba(45,38,28,.42);
  --s1:#ffffff; --s2:#f1ede5; --s3:#ded6c8;
}
.slab::after{ /* micro grain veining */
  content:""; position:absolute; inset:0; opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .04' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  background-size:cover;
}
.slab-seam{ /* fine polished joint vein */
  position:absolute; top:0; bottom:0; left:38%; width:1.5px; z-index:2;
  background:linear-gradient(180deg, rgba(60,56,50,.5), rgba(43,41,38,.85), rgba(60,56,50,.5));
  box-shadow:1px 0 0 rgba(255,255,255,.6), -1px 0 2px rgba(0,0,0,.06);
  opacity:.7;
}
.slab-edge{ position:absolute; left:0; right:0; bottom:0; height:24px; z-index:2; background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.08)); border-bottom:1px solid rgba(0,0,0,.05) }

.slab--hero{ min-height:min(64vh,560px); --s1:#ffffff; --s2:#efe9df; --s3:#d4cabb; transform:rotate(-1.4deg) }
.slab--hero .slab-seam{ left:46% }
.slab--cream{ --s1:#fffaf0; --s2:#f3ead8; --s3:#ddcfb6 }
.slab--graphite{ --s1:#5a5651; --s2:#3c3a37; --s3:#26241f }
.slab--graphite .slab-seam{ background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.85), rgba(255,255,255,.5)); box-shadow:1px 0 3px rgba(255,255,255,.4) }
.slab--graphite::after{ opacity:.3 }
.slab--pearl{ --s1:#ffffff; --s2:#eef0ee; --s3:#d4d7d2 }
.slab--sand{ --s1:#f7ead0; --s2:#e7d2ab; --s3:#cdb286 }
.slab--stone{ --s1:#f0ede6; --s2:#d8d3c8; --s3:#b3ada0 }
.slab--onyx{ --s1:#3a352f; --s2:#211d18; --s3:#100d0a }
.slab--onyx .slab-seam{ background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.8), rgba(255,255,255,.45)); box-shadow:1px 0 4px rgba(255,255,255,.4) }
.slab--onyx::after{ opacity:.25 }

/* ====================================================
   SERVICES
   ==================================================== */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.price-card{
  position:relative; padding:34px 30px 32px; border:1px solid var(--line);
  background:var(--panel);
  border-radius:3px; overflow:hidden; transition:.5s var(--ease);
  box-shadow:0 14px 40px -28px rgba(45,38,28,.35);
}
.price-card::before{ content:""; position:absolute; left:0; top:0; height:2px; width:0; background:linear-gradient(90deg,var(--graphite),transparent); transition:width .6s var(--ease) }
.price-card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 30px 60px -28px rgba(45,38,28,.4) }
.price-card:hover::before{ width:100% }
.price-card--feature{ background:var(--panel-2); border-color:var(--line-2) }
.price-card--feature::after{ content:"Чаще всего"; position:absolute; top:18px; right:-30px; transform:rotate(45deg); background:var(--graphite); color:#fff; font-size:11px; letter-spacing:.08em; padding:4px 36px; font-weight:600 }
.price-idx{ font-size:12px; letter-spacing:.2em; color:var(--mute); font-variant-numeric:tabular-nums }
.price-name{ font-size:24px; margin:14px 0 18px; letter-spacing:-.01em }
.price-val{ font-size:clamp(30px,3.4vw,40px); color:var(--text); line-height:1; letter-spacing:-.01em }
.price-val .price-from{ font-family:var(--sans); font-size:15px; color:var(--mute); font-weight:600; letter-spacing:.02em; margin-right:8px; vertical-align:.18em }
.price-val small{ font-family:var(--sans); font-size:14px; color:var(--mute); letter-spacing:.01em; font-weight:500 }
.price-dash{ color:var(--mute); margin:0 2px }
.price-desc{ margin:18px 0 20px; color:var(--dim); font-size:14.5px; min-height:3em }
.price-feat{ list-style:none; display:flex; flex-direction:column; gap:11px; border-top:1px solid var(--line); padding-top:20px }
.price-feat li{ position:relative; padding-left:22px; font-size:14px; color:var(--text) }
.price-feat li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border:1px solid var(--graphite); transform:rotate(45deg) }
.price-foot{ margin-top:30px; color:var(--mute); font-size:14px }
.price-foot a{ color:var(--graphite); font-weight:600; border-bottom:1px solid transparent; transition:border-color .3s } .price-foot a:hover{ border-color:var(--graphite) }

/* ====================================================
   WORKS — horizontal rail
   ==================================================== */
.works{ overflow:hidden }
.works-rail{ overflow-x:auto; scrollbar-width:none; cursor:grab; -webkit-overflow-scrolling:touch; padding:8px 0 14px; scroll-snap-type:x proximity }
.works-rail::-webkit-scrollbar{ display:none }
.works-rail.is-drag{ cursor:grabbing }
.works-track{ display:flex; gap:20px; padding:0 clamp(20px,4vw,52px); width:max-content }
.work-card{ flex:0 0 clamp(280px,34vw,400px); scroll-snap-align:center }
.work-card .slab{ height:clamp(240px,32vh,340px); min-height:0 }
.work-card .slab-seam{ left:42% }
.work-meta{ padding:18px 2px 0 }
.work-meta h3{ font-size:20px; letter-spacing:-.01em }
.work-meta span{ display:block; margin-top:6px; font-size:13px; color:var(--mute); letter-spacing:.02em }
.works-hint{ margin-top:18px; text-align:center; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute) }

/* ====================================================
   MATERIALS
   ==================================================== */
.mat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.mat-card{
  position:relative; padding:30px 28px; border:1px solid var(--line); border-radius:3px;
  background:var(--panel); overflow:hidden; transition:.5s var(--ease); min-height:188px;
  box-shadow:0 12px 34px -28px rgba(45,38,28,.3);
}
.mat-card:hover{ background:var(--panel-2); border-color:var(--line-2); transform:translateY(-4px) }
.mat-mono{ position:absolute; right:14px; top:-10px; font-size:104px; line-height:1; color:rgba(43,41,38,.06); transition:.5s var(--ease) }
.mat-card:hover .mat-mono{ color:rgba(43,41,38,.12); transform:translateY(4px) }
.mat-card h3{ font-size:21px; letter-spacing:.04em; position:relative }
.mat-card p{ margin-top:12px; color:var(--dim); font-size:14.5px; position:relative; max-width:30ch }
.mat-card--cta{ display:flex; flex-direction:column; justify-content:space-between; background:var(--graphite); border-color:var(--graphite) }
.mat-card--cta p{ color:#fff; font-size:17px; max-width:none }
.mat-card--cta .link-arrow{ color:#fff }
.mat-card--cta:hover{ background:var(--graphite-2) }

/* ====================================================
   CONTACTS + form
   ==================================================== */
.contacts{ justify-content:flex-start }
.contacts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); margin-top:auto }
.contact-list{ list-style:none; margin-top:34px; display:flex; flex-direction:column; gap:4px }
.contact-list a{ display:flex; align-items:center; gap:18px; padding:18px 16px; border:1px solid transparent; border-radius:3px; transition:.4s var(--ease) }
.contact-list a:hover{ background:var(--panel); border-color:var(--line); padding-left:22px; box-shadow:0 14px 34px -26px rgba(45,38,28,.4) }
.contact-list .ic{ width:22px; height:22px; color:var(--graphite); flex:0 0 22px }
.contact-list b{ display:block; font-size:17px; font-weight:600; letter-spacing:.01em }
.contact-list i{ font-style:normal; font-size:13px; color:var(--mute) }

.lead-form{ background:var(--panel); border:1px solid var(--line-2); border-radius:4px; padding:clamp(26px,3vw,40px); box-shadow:0 40px 90px -50px rgba(45,38,28,.5) }
.field{ margin-bottom:18px }
.field label{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:9px }
.field label i{ color:var(--graphite); font-style:normal }
.field input,.field textarea{
  width:100%; padding:14px 16px; background:var(--panel-2); border:1px solid var(--line-2);
  border-radius:2px; color:var(--text); font-size:15.5px; transition:.3s var(--ease); resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--mute) }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--graphite); background:#fff; box-shadow:0 0 0 3px rgba(43,41,38,.10) }
.field.invalid input,.field.invalid textarea{ border-color:#c0573a; box-shadow:0 0 0 3px rgba(192,87,58,.12) }
.lead-alt{ margin:16px 0 14px; font-size:12.5px; color:var(--mute); text-align:center }
.lead-soc{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--line-2); border-radius:2px; font-size:14px; transition:.35s var(--ease) }
.chip .ic{ width:18px; height:18px; color:var(--graphite) }
.chip:hover{ transform:translateY(-2px); background:var(--panel-2) }
.chip--wa:hover{ border-color:var(--wa); color:var(--wa) } .chip--wa .ic{ color:var(--wa) }
.chip--tg:hover{ border-color:var(--tg); color:var(--tg) } .chip--tg .ic{ color:var(--tg) }

.contact-hours{ display:flex; align-items:center; gap:10px; margin-top:18px; padding-left:16px; color:var(--dim); font-size:14px }
.contact-hours .ic{ width:18px; height:18px; color:var(--graphite) }
.about-block{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line) }
.about-block h3{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--graphite); font-weight:600 }
.about-block p{ margin-top:12px; color:var(--dim); font-size:15px; max-width:46ch }
.hp{ position:absolute !important; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none }

/* uploaded portfolio photos (replace procedural slabs when present) */
.work-photo{ width:100%; height:clamp(240px,32vh,340px); object-fit:cover; border-radius:3px; display:block;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 30px 64px -30px rgba(45,38,28,.42) }

/* footer */
.footer{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:clamp(40px,6vw,72px); padding-top:30px; border-top:1px solid var(--line) }
.footer-brand{ display:flex; align-items:center; gap:14px }
.footer-brand .brand-mark{ width:38px; height:38px; flex:0 0 38px; font-size:15px }
.footer-brand b{ font-family:var(--display); font-size:18px; display:block }
.footer-brand span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute) }
.footer-brands{ font-size:12.5px; letter-spacing:.12em; color:var(--mute) }
.footer-copy{ font-size:12.5px; color:var(--mute); flex-basis:100%; padding-top:8px; border-top:1px solid var(--line); margin-top:6px }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,140%); z-index:80;
  display:flex; align-items:center; gap:12px; padding:15px 24px; border-radius:3px;
  background:var(--graphite); color:#fff; font-weight:500; font-size:15px;
  box-shadow:0 18px 50px -16px rgba(40,34,26,.6); transition:transform .6s var(--ease);
}
.toast .ic{ width:22px; height:22px; color:#fff }
.toast.is-show{ transform:translate(-50%,0) }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i,0) * 90ms) }
[data-reveal].is-in{ opacity:1; transform:none }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width:1080px){
  .nav{ gap:24px } .header-phone{ display:none }
  .hero-grid{ grid-template-columns:1fr 1fr }
  .price-grid{ grid-template-columns:1fr; max-width:560px }
  .price-card--feature::after{ display:none }
}
@media (max-width:880px){
  :root{ --header-h:72px }
  html{ scroll-snap-type:none } /* let content breathe on small screens */
  .section{ min-height:auto; padding:calc(var(--header-h) + 40px) 0 64px }
  .nav,.header-cta{ display:none }
  .burger{ display:flex }
  .dots{ display:none }
  .hero-grid,.contacts-grid{ grid-template-columns:1fr }
  .hero-visual{ order:-1; min-height:46vh }
  .manager{ width:min(86%,360px) }
  .hero-stats{ gap:26px }
  .mat-grid{ grid-template-columns:1fr 1fr }
  .scroll-cue{ display:none }
  .float-contact{ right:16px; bottom:16px }
}
@media (max-width:560px){
  .wrap{ padding:0 20px }
  .mat-grid{ grid-template-columns:1fr }
  .footer{ flex-direction:column; align-items:flex-start }
  .btn{ width:100% } .hero-actions{ flex-direction:column } .hero-actions .btn{ justify-content:center }
  .manager-cap{ left:0; right:0 }
}

/* short viewports — never trap the deck */
@media (max-height:760px) and (min-width:881px){
  html{ scroll-snap-type:y proximity }
  .section{ min-height:auto; padding-top:calc(var(--header-h) + 30px); padding-bottom:48px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
  html{ scroll-snap-type:none }
  [data-reveal]{ opacity:1; transform:none }
}