/* Start:/local/templates/fontan/template_styles.css?178906425670107*/
/* Шаблон fontan — редизайн сайта Fontan City. */

:root{
  /* та же палитра: графит / сталь / лёд — холоднее и точнее */
  --ink:#181d21;
  --ink-2:#2a323a;
  --ink-soft:#5c6771;
  --ink-faint:#8a949d;
  --mist:#f5f7f8;
  --ice:#e9eef1;
  --paper:#fbfcfc;
  --white:#fff;
  --graphite:#171c21;
  --graphite-2:#1e252b;
  --line:#e0e6ea;
  --line-2:#eef2f4;
  --line-dark:rgba(255,255,255,.12);
  --inverse:#f2f6f8;
  --inverse-muted:#9aa6af;
  /* единственный акцент — холодная сталь (из исходного #627f93), приглушённая */
  --steel:#5b7686;
  --steel-deep:#42596a;
  --steel-line:rgba(91,118,134,.34);
  --shadow-sm:0 1px 2px rgba(20,32,40,.03),0 10px 30px -18px rgba(20,32,40,.16);
  --shadow-md:0 40px 90px -40px rgba(14,24,32,.5);
  --r:4px;
  --r-lg:8px;
  --maxw:1320px;
  --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--mist);-webkit-font-smoothing:antialiased;font-weight:400;line-height:1.4}
/* Выделение текста: стальной тон палитры вместо системного синего. Подложка
   светлая и непрозрачная, поэтому одинаково читается и на тёмных секциях. */
::selection{background:#cfe0ea;color:#16212a}
/* Полосы прокрутки в тон воде: тонкая стальная «струя» вместо системного серого.
   scrollbar-color — для Firefox, ::-webkit-* — для Chromium и Safari. */
html{scrollbar-width:thin;scrollbar-color:#7ba8bf rgba(146,180,197,.16)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(146,180,197,.14)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a5cde1,#5c8399);background-clip:padding-box;border:2px solid transparent;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8bc0d9,#48708a);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* ---- one-screen scroll system ---- */
.scroller{height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y proximity;scroll-behavior:smooth}
.scroller::-webkit-scrollbar{width:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(28px,4vw,56px);width:100%}

/* every section fills the viewport and centers its content */
section.block,.hero{
  height:100vh;height:100dvh;
  scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  padding:clamp(96px,12vh,120px) 0 clamp(24px,4vh,44px);
}
.hero{padding-top:clamp(84px,9vh,92px);padding-bottom:clamp(12px,2vh,28px)}
/* header is sticky and sits above; give sections room under it via scroll-margin */
section.block{scroll-margin-top:84px}

/* screen progress dots */
.dots{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;gap:14px}
.dots a{width:9px;height:9px;border-radius:50%;border:1px solid var(--ink-faint);background:transparent;transition:.3s;display:block;position:relative}
.dots a.dark-dot{border-color:rgba(255,255,255,.68)}
.dots a:hover{border-color:var(--steel);transform:scale(1.25)}
.dots a.active{background:var(--steel);border-color:var(--steel)}
@media(max-width:980px){.dots{display:none}}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.serif{font-family:var(--serif);letter-spacing:-.01em}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-deep);font-weight:500}
.label.dash{display:inline-flex;align-items:center;gap:12px}
.label.dash::before{content:"";width:24px;height:1px;background:var(--steel)}
a{color:inherit;text-decoration:none}

.reveal{opacity:0;transform:translateY(20px);transition:opacity 1s cubic-bezier(.16,.8,.3,1),transform 1s cubic-bezier(.16,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(245,247,248,.82);backdrop-filter:saturate(150%) blur(22px);-webkit-backdrop-filter:saturate(150%) blur(22px);border-bottom:1px solid rgba(224,230,234,.9);transition:background .4s,border-color .4s}
header.on-dark{background:rgba(23,28,33,.72);border-bottom-color:rgba(255,255,255,.1)}
header.on-dark .brand,header.on-dark nav.main a,header.on-dark .phone{color:#fff}
header.on-dark .brand .mark::after{border-color:#fff}
header.on-dark .btn-primary{background:#fff;color:var(--ink)}
/* push scroller content below fixed header without breaking snap: pad first section */
.scroller>.hero{scroll-snap-align:start}
.hd{display:flex;align-items:center;gap:40px;height:84px}
.brand{font-family:var(--serif);font-weight:450;font-size:22px;letter-spacing:.02em;display:flex;align-items:center;gap:12px}
.brand .mark{width:20px;height:20px;position:relative;flex:none}
.brand .mark::before,.brand .mark::after{content:"";position:absolute;border-radius:50%;border:1.5px solid var(--steel)}
.brand .mark::before{inset:0}
.brand .mark::after{inset:6px;border-color:var(--ink)}
nav.main{display:flex;gap:32px;margin-left:12px}
nav.main a{font-size:13px;letter-spacing:.01em;font-weight:450;position:relative;padding:8px 0;color:var(--ink)}
nav.main a::after{content:"";position:absolute;left:0;bottom:3px;height:1px;width:0;background:var(--steel);transition:width .4s cubic-bezier(.16,.8,.3,1)}
nav.main a:hover::after{width:100%}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:24px}
.phone{font-family:var(--mono);font-weight:500;font-size:14px}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:450;font-size:13px;border-radius:999px;padding:13px 26px;cursor:pointer;border:1px solid transparent;transition:transform .4s cubic-bezier(.16,.8,.3,1),box-shadow .4s,background .4s,color .4s,border-color .4s;white-space:nowrap}
.btn .ar{transition:transform .4s cubic-bezier(.16,.8,.3,1);font-family:var(--mono)}
.btn:hover .ar{transform:translateX(4px)}
.btn-primary{color:var(--inverse);background:var(--graphite)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-steel{background:var(--steel-deep);color:#fff;border-color:var(--steel-deep)}
.btn-steel:hover{background:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* hero */
.hero{position:relative;overflow:hidden;color:var(--inverse)}
.hero-media{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);filter:saturate(.72) contrast(1.03) brightness(.92)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,19,23,.96) 0%,rgba(14,19,23,.78) 40%,rgba(14,19,23,.34) 72%,rgba(14,19,23,.08) 100%)}
.hero .wrap{position:relative;z-index:2;padding:clamp(10px,2vh,24px) clamp(28px,4vw,56px)}
.hero .topline{display:flex;gap:20px;align-items:center;margin-bottom:clamp(18px,2.6vh,32px)}
.hero .topline .label{color:var(--steel)}
.hero .topline .tick{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--inverse-muted)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.6vw,66px);line-height:1.05;letter-spacing:-.025em;max-width:1040px;margin-bottom:clamp(20px,3vh,32px)}
.hero p.lead{font-size:18px;line-height:1.62;max-width:680px;color:#d7dfe4;font-weight:400}
.hero-ctas{display:flex;gap:16px;margin:clamp(24px,3.2vh,40px) 0 clamp(28px,3.6vh,48px);flex-wrap:wrap}
.hero-ctas .btn-primary{padding:16px 32px}
.hero-ctas .btn-outline{border-color:rgba(255,255,255,.4);color:#fff;padding:16px 32px}
.hero-ctas .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.spec{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.16);max-width:1000px}
.spec .cell{padding:clamp(12px,1.8vh,22px) 28px 0 0}
.spec .cell .n{font-family:var(--serif);font-size:26px;color:#fff;font-weight:450;letter-spacing:-.01em}
.spec .cell .t{font-family:var(--mono);font-size:11px;color:var(--inverse-muted);margin-top:6px;letter-spacing:.05em}

/* sections */
section.block{position:relative}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(28px,4vw,56px);align-items:end;margin-bottom:clamp(22px,3.4vh,44px)}
.sec-head .idx{font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.1em;margin-bottom:clamp(10px,1.6vh,20px);display:block}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.3vw,50px);line-height:1.08;letter-spacing:-.025em}
.sec-head .side p{color:var(--ink-soft);font-size:16px;line-height:1.64;margin-top:14px}

/* portfolio */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(20px,3vh,40px)}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.02em;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;transition:.35s;color:var(--ink-soft)}
.chip:hover{border-color:var(--steel);color:var(--steel-deep)}
.chip.active{background:var(--ink);color:var(--inverse);border-color:var(--ink)}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px)}
.pcard{cursor:pointer}
.pcard .img{height:clamp(230px,38vh,360px);background-size:cover;background-position:center;position:relative;overflow:hidden;border-radius:var(--r-lg)}
.pcard .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform .9s cubic-bezier(.16,.8,.3,1)}
.pcard:hover .img img{transform:scale(1.05)}
.pcard .img .tag{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#fff;background:rgba(20,28,34,.55);backdrop-filter:blur(8px);padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14)}
.pcard .body{padding:16px 2px 0;border-top:0;margin-top:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pcard h3{font-family:var(--serif);font-size:21px;font-weight:450;line-height:1.2}
.pcard .meta{font-family:var(--mono);color:var(--ink-faint);font-size:11px;margin-top:8px;letter-spacing:.03em}
.pcard .go{font-family:var(--mono);font-size:18px;color:var(--steel-deep);flex:none;transition:transform .4s}
.pcard:hover .go{transform:translate(3px,-3px)}

/* clients */
.block.white{background:var(--white)}
.logos{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.logo{height:clamp(120px,17vh,172px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.45s;background:var(--white)}
.logo:nth-child(4n){border-right:none}
.logo:nth-child(n+5){border-bottom:none}
.logo:hover{background:var(--mist)}
.logo b{font-family:var(--serif);font-size:25px;letter-spacing:.02em;font-weight:450;transition:.45s}
.logo:hover b{color:var(--steel-deep)}
.logo small{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink-faint)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(32px,5vh,72px)}
.metric{padding:0 44px}
.metric:first-child{padding-left:0}
.metric+.metric{border-left:1px solid var(--line)}
.metric b{font-family:var(--serif);font-size:42px;font-weight:450;letter-spacing:-.02em;color:var(--ink)}
.metric b .u{color:var(--steel);font-size:.7em}
.metric span{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:12px;letter-spacing:.03em}

/* process dark */
.block.dark{background:var(--graphite);color:var(--inverse)}
.block.dark .sec-head h2{color:#fff}
.block.dark .sec-head .side p{color:#aeb9c1}
.block.dark .sec-head .idx{color:var(--inverse-muted)}
.block.dark .label{color:var(--steel)}
.proc{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:start}
.steps .step{border-top:1px solid rgba(255,255,255,.13);padding:clamp(16px,2.4vh,28px) 0;display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:baseline;transition:.4s;cursor:pointer}
.steps .step:first-child{border-top:none}
.steps .step:hover{padding-left:10px}
.steps .num{font-family:var(--mono);font-size:14px;color:var(--steel);font-weight:500;padding-top:6px}
.steps h4{font-family:var(--serif);font-size:21px;font-weight:450}
.steps .step.big h4{font-size:clamp(24px,3vh,29px)}
.steps .desc{grid-column:2;color:#aeb9c1;font-size:15px;line-height:1.62;margin-top:14px;max-width:440px}
.steps .tog{font-family:var(--mono);font-size:18px;color:rgba(255,255,255,.45);font-weight:400}
.proc-photo{border-radius:var(--r-lg);overflow:hidden;position:relative;height:clamp(360px,60vh,580px);box-shadow:var(--shadow-md)}
.proc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.78)}
.proc-photo .tag{position:absolute;top:28px;left:28px;z-index:2;font-family:var(--mono);background:rgba(16,22,27,.6);backdrop-filter:blur(10px);padding:9px 15px;border-radius:999px;font-size:10px;letter-spacing:.12em;border:1px solid rgba(255,255,255,.15)}
.proc-photo .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px;background:linear-gradient(transparent,rgba(12,17,21,.94))}
.proc-photo .cap small{font-family:var(--mono);color:rgba(220,231,237,.82);letter-spacing:.12em;font-size:11px;font-weight:500;text-shadow:0 1px 5px rgba(0,0,0,.58)}
.proc-photo .cap h4{font-family:var(--serif);font-size:26px;font-weight:450;margin-top:12px;line-height:1.24}

/* audience */
.aud-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin-bottom:clamp(14px,1.8vh,24px)}
.aud{position:relative;border-radius:var(--r-lg);overflow:hidden;height:clamp(230px,34vh,360px);display:flex;align-items:flex-end;color:#fff}
.aud img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:transform .9s cubic-bezier(.16,.8,.3,1)}
.aud:hover img{transform:scale(1.05)}
.aud::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(9,14,18,.94))}
.aud .c{position:relative;z-index:2;padding:30px}
.badge{display:inline-flex;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:999px;border:1px solid var(--steel-line);color:#dfe6ea;background:rgba(91,118,134,.18);backdrop-filter:blur(6px)}
.aud .badge-top{position:absolute;top:24px;left:24px;z-index:3}
.aud h3{font-family:var(--serif);font-size:23px;font-weight:450;margin-top:16px}
.aud p{font-size:14px;margin-top:10px;color:#d3dbe1;line-height:1.55}
.mini-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mini{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,2vh,26px);background:var(--white);transition:.45s}
.mini:hover{box-shadow:var(--shadow-sm);border-color:var(--steel-line)}
.mini .badge{background:transparent;color:var(--steel-deep);border-color:var(--steel-line)}
.mini h3{font-family:var(--serif);font-size:20px;font-weight:450;margin:18px 0 8px}
.mini p{font-size:14px;color:var(--ink-soft);line-height:1.58}

/* services */
.block.ice{background:var(--ice)}
.svc-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
.svc{position:relative;border-radius:var(--r-lg);overflow:hidden;height:clamp(280px,42vh,400px);color:#fff;display:flex;align-items:flex-end}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:transform .9s cubic-bezier(.16,.8,.3,1)}
.svc:hover img{transform:scale(1.05)}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 46%,rgba(9,14,18,.92))}
.svc .c{position:relative;z-index:2;padding:30px}
.svc .n{position:absolute;top:26px;left:28px;z-index:3;font-family:var(--mono);font-size:13px;color:var(--steel)}
.svc h3{font-family:var(--serif);font-size:25px;font-weight:450}
.svc .go{font-family:var(--mono);font-size:11px;margin-top:12px;color:#dfe6ea;display:inline-flex;gap:8px;letter-spacing:.06em;text-transform:uppercase}
.svc .go .ar{transition:transform .4s}.svc:hover .go .ar{transform:translateX(5px)}
.svc-mini-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-mini{border-radius:var(--r-lg);padding:clamp(20px,2.6vh,32px);min-height:clamp(140px,20vh,190px);display:flex;flex-direction:column;justify-content:space-between;transition:.45s}
.svc-mini.dark{background:var(--graphite);color:var(--inverse)}
.svc-mini.light{background:var(--white);border:1px solid var(--line)}
.svc-mini:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.svc-mini .n{font-family:var(--mono);font-size:13px;color:var(--steel)}
.svc-mini h3{font-family:var(--serif);font-size:22px;font-weight:450;margin-top:18px}
.svc-mini .go{font-family:var(--mono);font-size:11px;margin-top:14px;display:inline-flex;gap:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.svc-mini.light .go{color:var(--steel-deep)}
.svc-mini .go .ar{transition:transform .4s}.svc-mini:hover .go .ar{transform:translateX(5px)}

/* production */
/* Production uses the shared dark-section palette. */
#s06{height:auto;min-height:100vh;min-height:100dvh;overflow:visible}
#s06 .sec-head{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
#s06 .sec-head h2{max-width:780px;font-size:clamp(30px,3.15vw,46px);text-wrap:balance}
#s06 .sec-head .side p{margin-top:0;max-width:390px;color:#aeb9c1}
#s06 .prod-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
#s06 .shot{grid-column:span 2;min-width:0;min-height:clamp(230px,30vh,320px);position:relative;display:flex;align-items:flex-end;border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;background:var(--graphite-2);color:#fff}
#s06 .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.76);transition:transform .7s ease}
#s06 .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,29,36,.03) 15%,rgba(20,29,36,.35) 48%,rgba(20,29,36,.92) 100%)}
#s06 .shot .c{position:relative;z-index:2;width:100%;padding:clamp(20px,2vw,28px)}
#s06 .shot small{display:block;font-family:var(--mono);color:rgba(220,231,237,.82);font-size:10px;font-weight:500;letter-spacing:.1em;line-height:1.6;text-shadow:0 1px 5px rgba(0,0,0,.62)}
#s06 .shot h3{font-family:var(--serif);font-size:clamp(20px,1.85vw,24px);font-weight:450;line-height:1.2;margin-top:8px}
#s06 .shot p{font-size:12px;color:#d0d9df;line-height:1.5;margin-top:7px}
#s06 .numbox{grid-column:span 3;min-width:0;border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:clamp(20px,2vw,28px);display:grid;grid-template-columns:minmax(130px,.8fr) minmax(0,1.2fr);gap:clamp(18px,2vw,28px);align-items:center;background:var(--graphite-2)}
#s06 .numbox .k{font-family:var(--mono);font-size:10px;color:#b5c5cf;letter-spacing:.1em;margin-bottom:12px}
#s06 .numbox b{display:block;font-family:var(--serif);font-size:clamp(38px,4.5vh,50px);font-weight:450;letter-spacing:-.02em;color:#fff;line-height:1}
#s06 .numbox b .u{color:#a8bfce;font-size:.65em}
#s06 .numbox .lbl{font-family:var(--mono);font-size:10px;color:var(--inverse-muted);margin-top:9px;letter-spacing:.01em;line-height:1.5}
#s06 .numbox p{font-size:13px;color:#aeb9c1;line-height:1.6;border-left:1px solid var(--line-dark);padding-left:clamp(18px,2vw,28px)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){#s06 .shot:hover img{transform:scale(1.04)}}
@media(max-width:980px){
  #s06{min-height:0;padding:64px 0}
  #s06 .sec-head{grid-template-columns:1fr;gap:16px}
  #s06 .sec-head h2{max-width:720px;font-size:clamp(30px,4.5vw,42px)}
  #s06 .sec-head .side p{max-width:620px;font-size:15px}
  #s06 .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #s06 .shot{grid-column:auto;min-height:260px}
  #s06 .shot:first-child{grid-column:1/-1;min-height:300px}
  #s06 .numbox{grid-column:auto;grid-template-columns:1fr;gap:16px;align-content:start}
  #s06 .numbox p{border-left:0;border-top:1px solid var(--line-dark);padding:16px 0 0}
}
@media(max-width:600px){
  #s06 .prod-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  #s06 .shot,#s06 .shot:first-child{grid-column:auto;min-height:280px}
  #s06 .sec-head h2{font-size:30px;line-height:1.14}
  #s06 .numbox{padding:24px}
}
@media(prefers-reduced-motion:reduce){#s06 .reveal{opacity:1;transform:none;transition:none}#s06 .shot img{transition:none}}
.span2{grid-column:span 2}

/* bureau */
.bureau{display:grid;grid-template-columns:1fr 2fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.bureau .left{padding:clamp(26px,3vh,44px);border-right:1px solid var(--line);display:flex;flex-direction:column}
.bureau .left h3{font-family:var(--serif);font-size:clamp(20px,2.6vh,24px);font-weight:450;margin:clamp(10px,1.6vh,18px) 0}
.bureau .left p{font-size:14px;color:var(--ink-soft);line-height:1.62}
.pills{margin-top:auto;padding-top:28px}
.pill{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding:clamp(11px,1.6vh,16px) 0;font-size:14px;font-weight:450;transition:.3s}
.pill .d{font-family:var(--mono);font-size:11px;color:var(--steel)}
.pill:hover{padding-left:8px;color:var(--steel-deep)}
.bureau .rows{padding:8px}
.brow{display:grid;grid-template-columns:64px 1fr 250px;gap:24px;padding:clamp(14px,2vh,26px) 28px;align-items:center;transition:.4s;border-bottom:1px solid var(--line)}
.brow:last-child{border-bottom:none}
.brow:hover{background:var(--mist)}
.brow .n{font-family:var(--mono);font-size:14px;color:var(--steel);padding-top:4px}
.brow h4{font-family:var(--serif);font-size:clamp(18px,2.4vh,21px);font-weight:450}
.brow p{font-size:13.5px;color:var(--ink-soft);margin-top:6px;line-height:1.5}
.brow .res{font-family:var(--mono);font-size:11px;color:var(--steel-deep);letter-spacing:.02em;line-height:1.5}
.proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px);margin-top:clamp(16px,2.4vh,30px)}
.proof{padding-top:22px;border-top:1px solid var(--ink)}
.proof .k{font-family:var(--mono);font-size:11px;color:var(--steel-deep);letter-spacing:.06em}
.proof b{font-family:var(--serif);font-size:18px;display:block;margin:10px 0;font-weight:450}
.proof p{font-size:14px;color:var(--ink-soft);line-height:1.58}

/* form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.field{display:grid;grid-template-columns:48px 1fr auto;gap:20px;align-items:center;padding:clamp(16px,2.6vh,28px) 0;border-top:1px solid var(--line);cursor:pointer;transition:.35s}
.field:last-of-type{border-bottom:1px solid var(--line)}
.field:hover{padding-left:8px}
.field .n{font-family:var(--mono);color:var(--steel-deep);font-size:12px;letter-spacing:.06em}
.field label{font-family:var(--serif);font-size:19px;cursor:pointer;font-weight:450}
.field .plus{font-family:var(--mono);font-size:20px;color:var(--ink-faint)}
.form-submit{margin-top:34px}
.form-photo{border-radius:var(--r-lg);overflow:hidden;height:clamp(320px,56vh,460px);position:relative;color:#fff;box-shadow:var(--shadow-md)}
.form-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.78)}
.form-photo .cap{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:32px;background:linear-gradient(transparent,rgba(8,13,17,.92));display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.form-photo .cap p{font-family:var(--serif);font-size:18px;max-width:420px;line-height:1.32;font-weight:450}
.form-photo .cap a{font-family:var(--mono);font-size:11px;color:var(--steel);white-space:nowrap;letter-spacing:.06em;text-transform:uppercase}

/* footer */
footer{background:var(--graphite);color:var(--inverse);padding:clamp(48px,8vh,96px) 0 44px;scroll-snap-align:end}
.f-grid{display:grid;grid-template-columns:minmax(230px,1.25fr) minmax(190px,1fr) repeat(4,minmax(120px,.75fr));gap:clamp(24px,2vw,36px);align-items:start}
.f-brand .logo-t{font-family:var(--serif);font-size:30px;font-weight:450;display:flex;align-items:center;gap:14px}
.f-brand .logo-t .mark{width:22px;height:22px;position:relative;flex:none}
.f-brand .logo-t .mark::before,.f-brand .logo-t .mark::after{content:"";position:absolute;border-radius:50%;border:1.5px solid var(--steel)}
.f-brand .logo-t .mark::before{inset:0}.f-brand .logo-t .mark::after{inset:7px;border-color:#fff}
.f-brand p{font-size:15px;color:#aeb9c1;margin-top:22px;line-height:1.62}
.f-contact h5,.f-col h5{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:22px}
.f-contact .ph{display:block;font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--inverse);white-space:nowrap}
.f-contact .em{display:block;font-family:var(--mono);font-size:13px;color:#aeb9c1;margin-top:8px}
.f-contact .f-address{margin-top:18px;color:#aeb9c1;font-size:13px;font-style:normal;line-height:1.6}
.f-contact .f-address a{display:inline-block;color:inherit;text-decoration:none}
.f-contact .f-hours{margin-top:16px;color:#aeb9c1;font-size:13px;line-height:1.6}
.f-contact .f-hours span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.f-contact .f-hours p{margin-top:5px;font-size:13px;line-height:1.6;color:#aeb9c1}
.f-col a{display:block;font-size:14px;color:#c2ccd3;margin-bottom:14px}
footer a:not(.btn){transition:color .25s ease,transform .25s ease}
footer a:not(.btn):hover{color:#a9c5d6;transform:translateX(5px)}
.f-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;min-height:86px;margin-top:60px;padding:0;border-top:1px solid rgba(255,255,255,.13);font-family:var(--mono);font-size:11px;color:#828e97;letter-spacing:.02em}

/* short laptops: shave a bit more so every screen still fits */
@media(min-width:981px) and (max-height:730px){
  .hero h1{font-size:clamp(30px,3.4vw,44px);margin-bottom:14px}
  .hero p.lead{font-size:15px;line-height:1.5}
  .hero-ctas{margin:18px 0 22px}
  .hero .topline{margin-bottom:14px}
  .hero .spec .cell .n{font-size:20px}
  .spec .cell{padding:12px 20px 0 0}
  .numbox b{font-size:40px}
}
@media(min-width:981px) and (max-height:760px){
  section.block,.hero{padding-top:clamp(88px,11vh,104px)}
  .sec-head h2{font-size:clamp(28px,3vw,40px)}
  .sec-head{margin-bottom:clamp(18px,2.6vh,32px)}
  .hero h1{font-size:clamp(34px,4vw,52px)}
  .hero p.lead{font-size:16px}
  .pcard .img{height:clamp(210px,34vh,320px)}
  .aud{height:clamp(210px,30vh,320px)}
  .svc{height:clamp(210px,30vh,320px)}
  .brow{padding:12px 24px}
  .bureau .left{padding:22px}
}
@media(max-width:980px){
  /* on phones/tablets drop the one-screen constraint — natural scroll reads better */
  .scroller{height:auto;overflow:visible;scroll-snap-type:none}
  section.block,.hero{min-height:auto;padding:96px 0 64px}
  header{position:sticky}
  .wrap{padding:0 24px}
  nav.main,.hd-right .phone{display:none}
  .sec-head{grid-template-columns:1fr;gap:20px}
  .cards-3,.logos,.metrics,.aud-3,.mini-3,.svc-3,.svc-mini-3,.spec{grid-template-columns:1fr}
  .spec .cell{border-bottom:1px solid rgba(255,255,255,.14);padding:18px 0}
  .metric+.metric{border-left:none;border-top:1px solid var(--line);padding:24px 0 0}
  .metric{padding:0}
  .logo{border-right:none!important}
  .proc,.prod-grid,.bureau,.proofs,.form-grid,.f-grid{grid-template-columns:1fr}
  .prod-grid{grid-auto-rows:auto}.span2{grid-column:auto}
  .bureau .left{border-right:none;border-bottom:1px solid var(--line)}
  .brow{grid-template-columns:48px 1fr}.brow .res{grid-column:2}
}

/* v4 — Figma 700:30 blocks, with the previous premium theme retained. */
section.block,.hero{height:auto;min-height:100vh;min-height:100dvh;overflow:visible}
section.block{padding-bottom:clamp(48px,6vh,80px)}
.hero{overflow:hidden}
.hd{gap:24px}
nav.main{gap:22px;margin-left:0}
.brand-group{flex:none}
.brand-group small{display:block;font-family:var(--mono);font-size:8px;color:var(--ink-soft);letter-spacing:.07em;margin-top:4px}
header.on-dark .brand-group small{color:var(--inverse-muted)}
.hd-right{gap:18px}
.hd-right .btn{padding:12px 20px}
.section-intro{max-width:1040px;font-size:16px;line-height:1.65;color:var(--ink-soft);margin:-4px 0 28px}
.portfolio-head{grid-template-columns:minmax(0,1fr) auto}
.pcard .case-link{display:inline-flex;font-family:var(--mono);font-size:11px;color:var(--steel-deep);margin-top:12px}
.pcard .meta{line-height:1.5}
.pcard .img{height:auto;aspect-ratio:5/6}
.aud{height:auto;min-height:320px}
.aud .c{padding-top:100px}
.svc{height:auto;min-height:300px}
.svc .c{padding-top:100px}
.logos{gap:12px;border:0;border-radius:0}
.logo,.logo:nth-child(4n),.logo:nth-child(n+5){border:1px solid var(--line);border-radius:var(--r)}
.logo:nth-child(n+5){background:var(--ice)}
.metrics{border-block:1px solid var(--line);padding:24px 0;margin-top:28px}
.metric{padding:0 24px;min-width:0}
.metric b{font-size:clamp(26px,2.5vw,38px)}
.metric span{font-size:10px;line-height:1.5;margin-top:8px}
.reviews{margin-top:48px;scroll-margin-top:108px}
.reviews-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}
.reviews-head h3{font-family:var(--serif);font-size:28px;font-weight:450}
.review-count{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.review-stage{display:grid;grid-template-columns:minmax(0,.19fr) minmax(0,1fr) minmax(0,.19fr);align-items:center}
.review-viewport{position:relative;overflow:hidden}
.review-stage{transform:translateX(0);transition:transform .82s cubic-bezier(.25,.1,.25,1);will-change:transform}
.review-stage.is-jump{transition:none}
.review-stage-clone{position:absolute;inset:0;width:100%;z-index:2;pointer-events:none}
.review-preview{padding:24px 18px;min-height:250px;overflow:hidden;background:var(--ice);border:1px solid var(--line);color:var(--ink-soft)}
.review-preview small{font-family:var(--mono);font-size:9px}
.review-preview p{font-family:var(--serif);font-size:18px;line-height:1.5;margin-top:18px}
.review-active{position:relative;z-index:1;display:grid;grid-template-columns:minmax(140px,.3fr) minmax(0,1fr);gap:28px;background:#46525b;color:var(--inverse);border-radius:var(--r-lg);padding:32px;min-height:300px;box-shadow:var(--shadow-sm)}
.review-badge{display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;border:1px solid rgba(255,255,255,.3);font-family:var(--mono);font-size:13px;line-height:1.65;align-self:start;min-height:180px}
.review-copy{border-left:1px solid rgba(255,255,255,.2);padding-left:28px;min-width:0}
.review-copy small{font-family:var(--mono);font-size:10px;color:#c2ccd3;letter-spacing:.1em}
.review-copy blockquote{font-family:var(--serif);font-size:clamp(22px,2.1vw,30px);line-height:1.35;margin-top:18px}
.review-copy cite{display:block;font-style:normal;font-size:11px;line-height:1.6;color:#c2ccd3;margin-top:22px}
.review-controls{display:flex;gap:10px;margin-top:20px}
.review-controls button{width:40px;height:36px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:#fff;cursor:pointer;font-size:18px}
.review-controls button:hover{background:rgba(255,255,255,.1)}
.steps details{border-top:1px solid var(--line-dark);padding:20px 0}
.steps details:first-child{border-top:0}
.steps summary{display:grid;grid-template-columns:44px 1fr auto;gap:16px;cursor:pointer;list-style:none;align-items:baseline}
.steps summary::-webkit-details-marker{display:none}
.steps summary h3{font-family:var(--serif);font-size:22px;font-weight:450}
.steps summary .hint{display:block;font-size:12px;color:#aeb9c1;margin-top:8px}
.steps summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--inverse-muted)}
.steps details[open] summary::after{content:'−'}
.steps details[open] .hint{display:none}
.steps details>p{font-size:14px;color:#aeb9c1;line-height:1.65;padding-left:60px;margin-top:16px}
.mini-3{gap:20px}
.mini.dark{background:var(--graphite);border-color:var(--line-dark);color:var(--inverse)}
.mini.dark p{color:#c2ccd3}
.mini.dark .badge{border-color:rgba(255,255,255,.24);color:#bacbd6;background:transparent}
.mini-link{display:block;height:100%}
.technology{min-height:0!important;padding:64px 0!important;background:var(--white)}
.technology-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);background:var(--graphite-2);color:var(--inverse);border-radius:var(--r-lg);overflow:hidden}
.technology-copy{padding:clamp(28px,3.3vw,44px)}
.technology-copy .label{color:#b6c6d0}
.technology-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.15;margin:18px 0}
.technology-copy p{font-size:14px;line-height:1.6;color:#c2ccd3}
.technology-copy .btn{background:#fff;color:var(--ink);margin-top:26px}
.technology-copy .contact-notice{color:#c2ccd3}
.technology-media{position:relative;min-height:390px;background:var(--graphite)}
.technology-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.technology-types{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:rgba(23,28,33,.88);padding:18px 0}
.technology-types span{display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;font-family:var(--mono);font-size:9px;letter-spacing:.02em;overflow-wrap:anywhere}
.technology-types span+span{border-left:1px solid rgba(255,255,255,.25)}
#s06 .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:'workshop assembly assembly geography' 'experience projects quality quality';align-items:stretch}
#s06 .shot{grid-column:auto;min-height:260px}
#s06 .workshop{grid-area:workshop}
#s06 .assembly{grid-area:assembly}
#s06 .quality{grid-area:quality}
#s06 .geography{grid-area:geography}
#s06 .experience{grid-area:experience}
#s06 .projects{grid-area:projects}
#s06 .numbox{grid-column:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:24px}
#s06 .numbox b{font-size:clamp(32px,3.2vw,48px)}
#s06 .numbox .lbl{line-height:1.5}
#s06 .numbox p{border:0;padding:0;margin-top:18px;font-size:13px}
.production-assurances{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);margin-top:clamp(34px,5vw,64px);padding-top:30px;border-top:1px solid var(--line-dark)}
.production-assurances article{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);column-gap:clamp(20px,3vw,44px);align-items:start}
.production-assurances article>span{grid-row:1/3;font-family:var(--mono);font-size:10px;line-height:1.55;letter-spacing:.1em;color:#9fb6c5}
.production-assurances h3{font-family:var(--serif);font-size:clamp(21px,2vw,27px);font-weight:450;line-height:1.25;color:#fff}
.production-assurances p{margin-top:10px;max-width:48ch;font-size:13px;line-height:1.7;color:#aeb9c1}
.bureau-note{font-family:var(--mono);font-size:11px!important;color:var(--steel-deep)!important;border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
.bureau .rows{min-width:0}
.brow{grid-template-columns:40px minmax(0,1fr) minmax(120px,.6fr);gap:20px;padding:22px 20px}
.proofs{gap:20px;margin-top:24px}
.proof{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.proof b{margin:0 0 12px}
.field label{display:block;font-size:17px}
.field input,.field textarea{width:100%;min-width:0;background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0;padding:8px 0;color:var(--ink);font:14px 'Inter',sans-serif;resize:vertical}
.field textarea{min-height:60px}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--steel)}
.field:focus-within{padding-left:0}
.field input[type=file]{font-size:11px}
.contact-notice{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-top:18px}
.contact-alternatives{display:flex;align-items:baseline;gap:32px;border-top:1px solid var(--line);padding-top:24px;margin-top:40px}
.contact-alternatives .label{flex:none}
.contact-links{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:12px;line-height:1.6}
.contact-links button{font:inherit;color:inherit;border:0;background:transparent;cursor:pointer;text-align:left}
.contact-links a:hover,.contact-links button:hover{color:var(--steel-deep);text-decoration:underline}
.f-brand .btn{margin-top:20px;border-color:var(--line-dark);color:#fff}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--steel);outline-offset:5px}
[hidden]{display:none!important}
@media(min-width:981px) and (max-width:1200px){nav.main{gap:14px}nav.main a{font-size:11px}.hd-right .phone{display:none}.review-active{padding:24px;gap:20px}.review-copy{padding-left:20px}.f-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.f-brand{grid-column:span 2}}
@media(max-width:980px){
  section.block,.hero{height:auto;min-height:0;padding:64px 0}
  .hero{min-height:calc(100dvh - 84px)}
  .hero .wrap{padding:20px 24px}
  .hero h1{font-size:clamp(32px,5.5vw,48px)}
  .hero p.lead{font-size:16px}
  .hero .topline{flex-wrap:wrap;gap:12px}
  .hd{gap:16px}
  .brand{font-size:20px}
  .hd-right .btn{font-size:11px;padding:12px 16px}
  .logos,.metrics,.aud-3,.mini-3,.svc-3,.svc-mini-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric{padding:16px!important;border:0!important}
  .metrics{gap:16px}
  .metric b{font-size:30px}
  .proc{gap:32px}
  .proc-photo{height:400px}
  .aud-3 .aud:last-child,.svc-3 .svc:last-child{grid-column:1/-1}
  .aud{min-height:310px}
  .aud .c{padding:24px}
  .review-stage{grid-template-columns:1fr}
  .review-preview{display:none}
  .review-active{grid-template-columns:160px 1fr}
  .technology-card{grid-template-columns:1fr}
  .technology-media{min-height:350px}
  #s06 .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'workshop assembly' 'geography experience' 'projects quality'}
  #s06 .shot:first-child{grid-column:auto;min-height:260px}
  .proofs{grid-template-columns:1fr}
  .brow{grid-template-columns:40px minmax(0,1fr)}
  .brow .res{grid-column:2}
  .form-grid{gap:32px}
  .contact-alternatives{display:block}
  .contact-links{margin-top:16px}
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .f-brand{grid-column:auto}
}
@media(max-width:600px){
  .brand-group small{display:none}
  .brand{font-size:17px;gap:8px}
  .hd-right .btn{font-size:10px;padding:11px 12px}
  .hero-ctas .btn{white-space:normal}
  .portfolio-head{grid-template-columns:1fr;align-items:start}
  .portfolio-head .btn{justify-self:start}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .logo{height:110px}
  .logo b{font-size:19px}
  .logo small{font-size:7px;letter-spacing:.05em;text-align:center}
  .metrics,.aud-3,.mini-3,.svc-3,.svc-mini-3{grid-template-columns:1fr}
  .metric{border-bottom:1px solid var(--line)!important}
  .review-active{grid-template-columns:1fr;padding:24px}
  .review-badge{min-height:80px;align-self:auto}
  .review-copy{border-left:0;padding:0}
  .reviews-head h3{font-size:25px}
  .review-count{white-space:nowrap}
  .technology-media{min-height:280px}
  .technology-types{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 0}
  .technology-types span:nth-child(3){border-left:0}
  #s06 .prod-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:'workshop' 'assembly' 'geography' 'experience' 'projects' 'quality'}
  #s06 .shot,#s06 .shot:first-child{min-height:280px}
  #s06 .numbox{min-height:230px}
  .field{grid-template-columns:28px minmax(0,1fr);gap:12px}
  .form-photo .cap{display:block;padding:24px}
  .form-photo .cap a{display:inline-block;margin-top:12px}
  .f-grid{grid-template-columns:1fr}
  .f-brand{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){html,.scroller{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero-media{transform:none!important}*,*::before,*::after{transition-duration:.01ms!important}}

/* v5 — Form guidance, numbered process, stable reviews and brand details. */
.site-header-v5{--header-rule:rgba(91,118,134,.2);box-shadow:0 8px 32px -24px rgba(20,32,40,.25);background:rgba(245,247,248,.94)}
.site-header-v5.on-dark{--header-rule:rgba(203,220,232,.18);background:rgba(28,36,43,.94)}
.site-header-v5 .hd{height:96px;gap:24px}
.site-header-v5 .brand-group{position:relative;border-right:1px solid var(--header-rule);padding-right:24px}
.site-header-v5 .brand{font-size:23px;letter-spacing:.035em;gap:13px}
.site-header-v5 .brand .mark{width:30px;height:30px}
.site-header-v5 .brand .mark::after{inset:9px}
.site-header-v5 .brand-group small{margin-top:8px;letter-spacing:.075em;font-size:7px}
.site-header-v5 nav.main{align-self:stretch;align-items:center;gap:18px;flex:1;justify-content:center}
.site-header-v5 nav.main a{font-size:11px;font-weight:500;padding:14px 0;white-space:nowrap;letter-spacing:.01em}
.site-header-v5 nav.main .nav-index{display:block;font-family:var(--mono);font-size:8px;color:var(--steel);letter-spacing:.08em;margin-bottom:5px}
.site-header-v5.on-dark nav.main .nav-index{color:#a0b7c6}
.site-header-v5 nav.main a::after{bottom:7px;height:2px}
.site-header-v5 nav.main a[aria-current=location]::after{width:100%}
.site-header-v5 nav.main a[aria-current=location]{color:var(--steel-deep)}
.site-header-v5.on-dark nav.main a[aria-current=location]{color:#d2e0e9}
.site-header-v5 .hd-right{gap:18px;margin-left:0;flex:none}
.header-contact{border-left:1px solid var(--header-rule);padding-left:22px}
.header-contact small{display:block;font-family:var(--mono);font-size:7px;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:6px}
.site-header-v5.on-dark .header-contact small{color:var(--inverse-muted)}
.site-header-v5 .phone{font-size:12px;white-space:nowrap}
.site-header-v5 .hd-right .btn{padding:10px 12px 10px 19px;gap:13px;font-size:11px}
.site-header-v5 .hd-right .btn .ar{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.25);border-radius:50%;font-size:15px}
.site-header-v5.on-dark .hd-right .btn .ar{border-color:rgba(23,28,33,.2)}
.header-progress{position:absolute;bottom:-1px;left:0;right:0;height:2px;overflow:hidden;pointer-events:none}
.header-progress span{display:block;width:100%;height:100%;background:var(--steel);transform:scaleX(var(--page-progress,0));transform-origin:left}
.site-header-v5.on-dark .header-progress span{background:#a3becf}
/* No native bullets, triangles or +/- icons: the expanded number is the cue. */
#s03 .steps summary{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:24px;list-style:none}
#s03 .steps summary::marker{content:'';font-size:0}
#s03 .steps summary::-webkit-details-marker{display:none}
#s03 .steps summary::before,#s03 .steps summary::after{display:none;content:none}
#s03 .steps .num{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:20px;font-weight:400;line-height:1;padding:0;letter-spacing:-.06em;color:#94a6b2;transition:font-size .24s ease,color .24s ease}
#s03 .steps details{padding:23px 0}
#s03 .steps details[open] .num{font-size:58px;color:#d3e1eb}
#s03 .steps details[open] summary h3{color:#fff}
#s03 .steps details>p{max-width:540px;padding-left:104px;margin-top:16px;font-size:13px;line-height:1.72;color:#b8c3ca}
#s03 .steps summary h3{font-size:23px;line-height:1.25}
#s03 .steps summary .hint{line-height:1.5}
/* A long quote must never resize either preview card. */
.review-stage{--preview-height:280px;grid-template-columns:minmax(0,.19fr) minmax(0,1fr) minmax(0,.19fr)}
.review-preview{box-sizing:border-box;inline-size:100%;height:var(--preview-height);min-height:var(--preview-height);max-height:var(--preview-height);overflow:hidden;align-self:center;display:flex;flex-direction:column;justify-content:flex-start}
.review-preview small{display:block;flex:none;line-height:1.5}
.review-preview p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden;line-height:1.5;max-height:162px;flex:none}
/* Persistent instructions plus examples: labels remain visible while typing. */
.contact-prompt{padding:0 0 26px}
.contact-prompt h3{font-family:var(--serif);font-size:26px;line-height:1.25;font-weight:450;max-width:480px;margin-bottom:12px}
.contact-prompt p{font-size:14px;line-height:1.65;color:var(--ink-soft);max-width:520px}
.field input::placeholder,.field textarea::placeholder{color:#687681;opacity:1;font-size:13px;line-height:1.6}
.field textarea{line-height:1.6}
.field-help{display:block;color:var(--ink-soft);font-size:11px;line-height:1.5;margin-top:8px}
/* Abstract geometry echoes the existing ring-shaped brand mark. */
footer{position:relative;overflow:hidden;padding-bottom:28px}
.footer-signature{position:relative;display:flex;align-items:center;gap:46px;margin-top:0;padding-top:38px!important;border-top:0;min-height:226px}
.footer-signature::before{content:"";position:absolute;top:0;left:clamp(28px,4vw,56px);right:clamp(28px,4vw,56px);height:1px;background:var(--line-dark)}
.signature-art{width:190px;height:150px;position:relative;flex:none}
.signature-ring{position:absolute;width:126px;height:126px;top:12px;border:1px solid rgba(174,201,219,.42);border-radius:50%}
.signature-ring:nth-child(1){left:0}
.signature-ring:nth-child(2){left:31px;border-color:rgba(174,201,219,.28)}
.signature-ring:nth-child(3){left:62px;border-color:rgba(174,201,219,.16)}
.signature-axis{position:absolute;left:0;right:0;top:75px;height:1px;background:linear-gradient(90deg,transparent,rgba(174,201,219,.3),transparent)}
.signature-copy{position:relative}
.signature-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:#9bb0bf}
.signature-copy p{font-family:var(--serif);font-size:clamp(32px,4.2vw,56px);font-weight:400;letter-spacing:-.025em;line-height:1.07;color:#edf2f6;margin-top:13px}
.signature-copy p span{color:#9eb3c2}
.back-to-top{margin-left:auto;display:flex;align-items:center;gap:16px;color:#c7d5df}
.back-to-top>span{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(174,201,219,.28);border-radius:50%;font-family:var(--mono);font-size:23px;transition:background .25s,transform .25s}
.back-to-top small{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.back-to-top:hover>span{background:rgba(174,201,219,.08);transform:translateY(-3px)}
@media(min-width:981px) and (max-width:1320px){.site-header-v5 .header-contact{display:none}.site-header-v5 .hd{gap:20px}.site-header-v5 nav.main{gap:20px}.site-header-v5 .brand-group{padding-right:20px}}
@media(max-width:980px){
  .site-header-v5 .hd{height:84px;gap:20px}
  .site-header-v5 .hd-right{margin-left:auto}
  .site-header-v5 nav.main,.site-header-v5 .header-contact{display:none}
  .site-header-v5 .brand-group{border:0;padding-right:0}
  .site-header-v5 .brand{font-size:22px}
  .review-stage{grid-template-columns:1fr}
  .review-preview{display:none}
  .footer-signature{gap:30px}
  .signature-art{transform:scale(.85);transform-origin:left center;width:162px}
}
@media(max-width:600px){
  .site-header-v5 .hd{gap:10px}
  .site-header-v5 .brand{font-size:17px;gap:8px;letter-spacing:0}
  .site-header-v5 .brand .mark{width:24px;height:24px}
  .site-header-v5 .brand .mark::after{inset:7px}
  .site-header-v5 .hd-right .btn{font-size:10px;gap:8px;padding:9px 10px 9px 13px}
  .site-header-v5 .hd-right .btn .ar{width:22px;height:22px;font-size:13px}
  .f-bottom{min-height:0;padding-block:24px}
  /* Телефонный футер идёт одной колонкой: текст и ссылки держим на одном
     кегле, блоки различаем моно-подписями, а не разнобоем размеров. */
  .f-brand p,.f-col a,.f-contact .em,.f-contact .f-address,.f-contact .f-address a,.f-contact .f-hours,.f-contact .f-hours p{font-size:14px}
  .f-contact h5,.f-col h5,.f-contact .f-hours span{font-size:11px}
  #s03 .steps summary{grid-template-columns:62px minmax(0,1fr);gap:18px}
  #s03 .steps .num{font-size:18px}
  #s03 .steps details[open] .num{font-size:48px}
  #s03 .steps summary h3{font-size:21px}
  #s03 .steps details>p{padding-left:80px;font-size:13px}
  .contact-prompt h3{font-size:24px}
  .footer-signature{gap:20px;flex-wrap:wrap;padding-top:28px!important}
  .signature-art{width:100px;height:100px;transform:scale(.54);transform-origin:left center;margin-right:-10px}
  .signature-copy{flex:1;min-width:170px}
  .signature-kicker{font-size:7px;letter-spacing:.07em}
  .signature-copy p{font-size:30px}
  .back-to-top{margin:8px 0 0 auto}
  .back-to-top>span{width:40px;height:40px;font-size:20px}
}
@media(prefers-reduced-motion:reduce){#s03 .steps .num,.back-to-top>span{transition:none}}

/* v6 — ordinary document scrolling and explicit accordion affordances. */
html{scroll-behavior:auto;scroll-snap-type:none;scrollbar-gutter:stable}
body{scroll-snap-type:none}
.scroller{height:auto;max-height:none;overflow:visible;scroll-snap-type:none;scroll-behavior:auto}
section.block,.hero,#s06{height:auto;min-height:100vh;min-height:100svh;scroll-snap-align:none;scroll-snap-stop:normal}
footer{scroll-snap-align:none;scroll-snap-stop:normal}
/* Fades do not move visible content while the user is scrolling. */
.reveal,.reveal.in{transform:none;transition:opacity .45s ease}
/* Reserve room for the large number; no font-size tween that changes row height. */
#s03 .steps summary{grid-template-columns:80px minmax(0,1fr) 30px;min-height:60px}
#s03 .steps summary::after{content:'+';display:grid;place-items:center;align-self:center;width:30px;height:30px;font-family:var(--mono);font-size:24px;font-weight:400;line-height:1;color:#bccedb;border:1px solid rgba(188,206,219,.28);border-radius:50%}
#s03 .steps details[open] summary::after{content:'−';color:#fff;border-color:rgba(211,225,235,.5)}
#s03 .steps .num{transition:color .2s ease}
@media(max-width:980px){
  section.block,#s06{min-height:0}
  .hero{min-height:calc(100vh - 84px);min-height:calc(100svh - 84px)}
}
@media(max-width:600px){
  #s03 .steps summary{grid-template-columns:56px minmax(0,1fr) 28px;gap:12px;min-height:54px}
  #s03 .steps summary::after{width:28px;height:28px;font-size:22px}
  #s03 .steps details>p{padding-left:68px}
}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.in,#s03 .steps .num{transition:none}}
@media(prefers-reduced-motion:reduce){.review-stage{transition:none;will-change:auto}}

/* v8 — A stable carousel and a separate, scrollable reading view. */
.review-active{box-sizing:border-box;width:100%;height:430px;min-height:430px;max-height:430px;grid-template-rows:minmax(0,1fr);overflow:hidden}
.review-badge{box-sizing:border-box;width:100%;height:180px;min-height:180px;max-height:180px;overflow:hidden;overflow-wrap:anywhere}
.review-copy{display:flex;flex-direction:column;height:100%;min-height:0}
.review-copy>small{flex:none}
.review-copy>div[aria-live]{flex:1;min-height:0;overflow:hidden}
.review-copy blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;overflow-wrap:anywhere}
.review-copy cite{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.review-controls{flex:none;align-items:center;margin-top:auto;padding-top:20px;min-height:56px}
.review-controls button{flex:none}
.review-controls .review-read{display:inline-flex;justify-content:center;align-items:center;gap:8px;width:auto;min-height:36px;height:auto;padding:8px 14px;margin-left:auto;font-family:var(--mono);font-size:11px;line-height:1.4;white-space:nowrap;background:rgba(255,255,255,.06)}
.review-controls .review-read:hover{background:rgba(255,255,255,.16)}
html.review-dialog-open{overflow:hidden}
.review-dialog{box-sizing:border-box;width:min(720px,calc(100% - 40px));max-width:720px;max-height:84vh;max-height:84svh;margin:auto;padding:32px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 30px 100px rgba(12,18,24,.25);overflow-y:auto;overscroll-behavior:contain}
.review-dialog::backdrop{background:rgba(12,18,24,.65);backdrop-filter:blur(5px)}
.review-dialog-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line);background:var(--paper)}
.review-dialog-head .label{color:var(--steel-deep)}
.review-dialog-close{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;font-size:26px;line-height:1;background:transparent;color:var(--ink);cursor:pointer}
.review-dialog-close:hover{background:var(--ice);border-color:var(--steel-line)}
.review-dialog h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.15;margin:28px 0 16px}
.review-dialog blockquote{font-family:var(--serif);font-size:26px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.review-dialog-author{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-top:24px}
@media(max-width:600px){
  .review-active{height:480px;min-height:480px;max-height:480px;grid-template-rows:80px minmax(0,1fr);gap:24px}
  .review-badge{height:80px;min-height:80px;max-height:80px;padding:12px}
  .review-copy blockquote{font-size:22px;line-height:1.35}
  .review-controls{gap:8px}
  .review-controls>button:not(.review-read){width:34px}
  .review-controls .review-read{font-size:10px;padding:8px 10px;gap:6px}
  .review-dialog{width:calc(100% - 24px);padding:22px;max-height:88vh;max-height:88svh}
  .review-dialog h2{font-size:28px}
  .review-dialog blockquote{font-size:22px}
}

#s03 .steps summary::after,
#s03 .steps details[open] summary::after{
  border:0;
  border-radius:0;
  background:transparent;
}

/* Navigation links have no underline in any state; keyboard focus stays visible. */
.site-header-v5 nav.main a{
  text-decoration:none;
}
.site-header-v5 nav.main a::after{
  content:none;
  display:none;
}

/* Open editorial layout: one introduction, three services, one invitation. */
#s07.bureau-section-v12{
  min-height:0;
  padding-block:clamp(64px,8vw,104px);
  background:var(--paper);
}
#s07 .sec-head{
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:end;
  gap:clamp(32px,5vw,72px);
  margin-bottom:clamp(36px,4vw,56px);
}
#s07 .sec-head h2{max-width:540px;text-wrap:balance}
#s07 .sec-head .side p{max-width:440px;margin:0;font-size:17px;line-height:1.65}
#s07 .bureau-scope{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);
  margin:0;
  padding:0;
  list-style:none;
}
#s07 .bureau-service{
  min-width:0;
  display:flex;
  flex-direction:column;
  border-top:0;
  padding-top:0;
}
#s07 .bureau-number{
  font-family:var(--mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--steel-deep);
  margin-bottom:18px;
}
#s07 .bureau-service h3{
  font-family:var(--serif);
  font-size:clamp(24px,2.1vw,28px);
  font-weight:450;
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0 0 14px;
}
#s07 .bureau-service>p{font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:38ch}
#s07 .bureau-result{margin:0;margin-top:auto;padding-top:28px}
#s07 .bureau-result dt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
#s07 .bureau-result dd{margin:0;max-width:30ch;font-size:14px;font-weight:500;line-height:1.55;color:var(--ink)}
#s07 .bureau-closing{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(28px,4vw,56px);
  margin-top:clamp(36px,4vw,56px);
  padding:clamp(36px,4vw,56px) clamp(28px,3.5vw,48px) clamp(22px,2vw,26px);
  border:1px solid rgba(169,197,214,.22);
  border-left:6px solid #7897aa;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,#25343e 0%,#172128 72%,#121a20 100%);
  color:#fff;
  box-shadow:0 24px 60px -40px rgba(18,27,33,.75);
}
#s07 .bureau-closing-copy{position:relative;z-index:1;min-width:0;max-width:760px}
#s07 .bureau-offer-label{display:block;margin-bottom:14px;font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.12em;color:#a9c5d6}
#s07 .bureau-closing h3{font-family:var(--serif);font-size:clamp(28px,3vw,40px);font-weight:450;line-height:1.14;letter-spacing:-.02em;margin-bottom:14px;color:#fff;text-wrap:balance}
#s07 .bureau-closing p{max-width:65ch;font-size:15px;font-weight:400;line-height:1.7;color:#d8e0e5!important;opacity:1;text-shadow:none}
#s07 .bureau-closing .btn{position:relative;z-index:1;flex:none;background:#edf3f6;border-color:#edf3f6;color:#172128;box-shadow:0 12px 34px -22px rgba(0,0,0,.8)}
#s07 .bureau-closing .btn:hover{background:#a9c5d6;border-color:#a9c5d6;color:#10171c}
@media(max-width:980px){
  #s07 .sec-head{grid-template-columns:1fr;gap:20px;margin-bottom:36px}
  #s07 .sec-head .side p{max-width:600px;font-size:16px}
  #s07 .bureau-scope{grid-template-columns:1fr;gap:28px}
  #s07 .bureau-service{padding-top:22px}
  #s07 .bureau-number{margin-bottom:12px}
  #s07 .bureau-service>p{max-width:60ch}
  #s07 .bureau-result{padding-top:18px}
  #s07 .bureau-result dd{max-width:none}
  #s07 .bureau-closing{align-items:flex-start;flex-direction:column;gap:24px}
  .production-assurances{grid-template-columns:1fr;gap:28px}
}
@media(max-width:600px){
  #s07.bureau-section-v12{padding-block:60px}
  #s07 .sec-head h2{font-size:32px;line-height:1.12}
  #s07 .bureau-service h3{font-size:25px}
  #s07 .bureau-closing{padding:26px 22px;border-left-width:5px}
  #s07 .bureau-closing h3{font-size:28px}
  #s07 .bureau-closing .btn{max-width:100%;white-space:normal}
  .production-assurances article{grid-template-columns:1fr;gap:10px}
  .production-assurances article>span{grid-row:auto}
}

/* Compact attachment control in the existing ice / graphite palette. */
#s08 .attachment-field{grid-template-columns:48px minmax(0,1fr);align-items:start;cursor:default}
#s08 .attachment-field:hover,#s08 .attachment-field:focus-within{padding-left:0}
#s08 .attachment-field>.n{padding-top:4px}
#s08 .attachment-content{min-width:0}
#s08 .attachment-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px}
#s08 #attachment-label{font-family:var(--serif);font-size:19px;font-weight:450;line-height:1.3;color:var(--ink)}
#s08 .attachment-optional{font-family:'Inter',sans-serif;font-size:11px;line-height:1.5;color:var(--ink-soft)}
#s08 .attachment-help{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:8px 0 16px;max-width:42ch}
#s08 .attachment-picker{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:16px 18px;
  border:1px dashed var(--steel-line);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.6);
  color:var(--steel-deep);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
#s08 .attachment-picker:hover{background:var(--paper);border-color:var(--steel)}
#s08 .attachment-picker:focus-within{outline:2px solid var(--steel);outline-offset:3px;background:var(--paper)}
#s08 .attachment-picker input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;cursor:pointer;z-index:1}
#s08 .attachment-icon{flex:none}
#s08 .attachment-plus{margin-left:auto;font-family:var(--mono);font-size:23px;font-weight:400;line-height:1}
#s08 .attachment-selected{display:flex;align-items:center;gap:12px;min-width:0;margin-top:10px;padding:10px 10px 10px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}
#s08 .attachment-file-info{flex:1;min-width:0}
#s08 .attachment-name{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
#s08 .attachment-size{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--ink-soft)}
#s08 .attachment-remove{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--r);background:transparent;color:var(--ink-soft);font:24px/1 var(--mono);cursor:pointer;transition:background .2s,color .2s}
#s08 .attachment-remove:hover{background:var(--ice);color:var(--ink)}
#s08 .attachment-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){
  #s08 .attachment-field{grid-template-columns:28px minmax(0,1fr);gap:12px}
  #s08 .attachment-picker{padding:14px;min-height:60px;gap:10px}
}
@media(prefers-reduced-motion:reduce){#s08 .attachment-picker,#s08 .attachment-remove{transition:none}}

/* Image additions to v13. Existing typography, palette and page scrolling are retained. */
#s07 .bureau-service{border-top:0;padding-top:0}
#s07 .bureau-visual{
  position:relative;
  width:100%;
  aspect-ratio:1.9;
  margin:0 0 22px;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--ice);
  flex:none;
}
#s07 .bureau-visual img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.78)}
#s07 .bureau-visual.supervision img{object-position:50% 64%}
#s07 .bureau-visual-note{font-size:11px;line-height:1.5;color:var(--ink-soft);margin-top:16px}
#s05 .service-mini-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
#s05 .service-detail-media{
  display:block;
  flex:none;
  width:104px;
  height:64px;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--graphite-2);
  border:1px solid var(--line-dark);
}
#s05 .svc-mini.light .service-detail-media{border-color:var(--line);background:var(--ice)}
#s05 .service-detail-media img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.78)}
#s05 .service-detail-media.supervision img{object-position:50% 66%}
#s05 .service-detail-media.equipment img{object-fit:contain}
#s05 .svc-mini.with-media h3{margin-top:14px}
#s05 .svc-design-visual img{object-position:50% 48%}
@media(max-width:980px){
  #s07 .bureau-visual{aspect-ratio:2.3;max-height:260px;margin-bottom:20px}
  #s05 .service-detail-media{width:96px;height:60px}
}
@media(max-width:600px){
  #s07 .bureau-visual{aspect-ratio:1.75;max-height:none}
  #s05 .service-detail-media{width:112px;height:68px}
}

/* Decorative photographs sit behind the existing fixed-size review content. */
#reviews .review-active{isolation:isolate;background:var(--graphite)}
#reviews .review-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none;background:var(--graphite)}
#reviews .review-backdrop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.55)}
#reviews .review-backdrop::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,20,27,.68) 0%,rgba(12,20,27,.78) 40%,rgba(12,20,27,.87) 100%)}
#reviews .review-badge,#reviews .review-copy{position:relative;z-index:1}
#reviews .review-badge{background:rgba(12,20,27,.18)}
#reviews .review-copy>small,#reviews .review-copy cite{color:#dbe4ea}
#reviews .review-controls button{background:rgba(12,20,27,.28)}
#reviews .review-controls button:hover{background:rgba(255,255,255,.14)}
@media(max-width:600px){
  #reviews .review-backdrop::after{background:linear-gradient(180deg,rgba(12,20,27,.68) 0%,rgba(12,20,27,.82) 32%,rgba(12,20,27,.92) 100%)}
}

/* v19 — Full review drafts, with the project photograph after the text. */
.review-dialog blockquote{margin:0;font-size:24px;line-height:1.6}
.review-object{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.review-object img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center;border-radius:8px;background:var(--ice)}
.review-object figcaption{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:12px;line-height:1.5;color:var(--ink-soft)}
.review-object-title{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-deep)}
@media(max-width:600px){
  .review-dialog blockquote{font-size:21px;line-height:1.55}
  .review-object{margin-top:24px;padding-top:20px}
  .review-object img{aspect-ratio:4/3}
}

/* v21 — Original full-colour brand artwork; no tinting or distortion. */
#s02 .logos .logo{box-sizing:border-box;padding:18px 22px;gap:14px;background:var(--white)}
#s02 .logos .logo:hover{background:var(--white);border-color:var(--steel-line)}
#s02 .logo-visual{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(50px,7.5vh,82px);min-height:0}
#s02 .logo-visual img{display:block;width:var(--brand-width,180px);max-width:100%;height:100%;object-fit:contain;filter:none;opacity:1}
#s02 .logos .logo small{display:block;max-width:100%;text-align:center;line-height:1.4}
@media(max-width:600px){
  #s02 .logos .logo{padding:16px 12px;gap:12px}
  #s02 .logo-visual{height:64px}
  #s02 .logos .logo small{font-size:8px;letter-spacing:.09em}
}

/* v22 — Compact metric headings; suffixes remain beside their numbers. */
#s02 .metrics{align-items:start}
#s02 .metric>b{display:block;white-space:nowrap;font-size:clamp(22px,2vw,32px);line-height:1.15}
#s02 .metric>b .u{display:inline;margin:0;font-family:inherit;font-size:.7em;line-height:inherit;letter-spacing:inherit}
@media(max-width:1000px){
  #s02 .metric>b{font-size:28px}
}

/* v26 — Project imagery in place of the large text-only role badge. */
#reviews .review-badge{display:block;position:relative;margin:0;padding:0;border:0;border-radius:8px;overflow:hidden;background:var(--graphite)}
#reviews .review-badge>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#reviews .review-badge>figcaption{position:absolute;inset:auto 0 0;padding:28px 12px 12px;background:linear-gradient(transparent,rgba(12,20,27,.93) 48%);color:#fff;font-family:var(--mono);font-size:9px;line-height:1.5;letter-spacing:.05em;text-align:left;overflow-wrap:normal}
#reviews .review-preview>img{display:block;flex:none;width:100%;height:74px;object-fit:cover;border-radius:4px;margin-bottom:14px}
#reviews .review-preview>p{margin-top:12px;-webkit-line-clamp:3;line-clamp:3;max-height:81px}
@media(max-width:600px){
  #reviews .review-badge>img{object-position:center 55%}
  #reviews .review-badge>figcaption{padding:22px 12px 10px;font-size:9px}
}

/* v27 — Illustrative stock portraits; object photographs remain separate. */
#reviews .review-badge>img{object-position:center}
#reviews .review-preview>img{width:74px;max-width:100%;height:74px;object-position:center}
@media(max-width:600px){
  #reviews .review-badge{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:14px;background:transparent}
  #reviews .review-badge>img{width:80px;height:80px;object-position:center;border-radius:6px}
  #reviews .review-badge>figcaption{position:static;padding:0;background:none;font-size:10px}
}

#s04 .aud .badge-top{color:#fff}

/* Keep the contact introduction and photograph together beside the form. */
#s08 .contact-aside{min-width:0;display:flex;flex-direction:column;gap:24px}
#s08 .contact-aside>.side p{margin-top:14px;color:var(--ink-soft);font-size:16px;line-height:1.64}
@media(min-width:981px) and (min-height:520px){
  #s08 .contact-aside{
    position:sticky;
    top:120px;
    align-self:start;
  }
  #s08 .contact-aside>.form-photo{
    height:clamp(260px,calc(100svh - 300px),460px);
    max-height:none;
  }
}

/* Water background for section 07. */
#s07.bureau-section-v12{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:linear-gradient(180deg,#F4F2F0 0%,#F4F2F0 86%,var(--ice) 100%);
}
#s07::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-14% -12%;
  pointer-events:none;
  opacity:.38;
  background:
    radial-gradient(ellipse at 12% 8%,rgba(82,113,134,.18),transparent 30%),
    radial-gradient(ellipse at 88% 92%,rgba(148,157,161,.22),transparent 34%),
    repeating-radial-gradient(ellipse at 90% 0%,transparent 0 34px,rgba(82,113,134,.07) 36px 38px,transparent 40px 70px);
  background-size:auto,auto,150% 150%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);
  animation:water-surface 18s ease-in-out infinite alternate;
}
#s07>.wrap{position:relative;z-index:1}
@keyframes water-surface{
  from{background-position:0 0,0 0,0 0}
  to{background-position:30px 12px,-24px -14px,60px 36px}
}
@media(prefers-reduced-motion:reduce){#s07::before{animation:none}}

/* End */


/* Start:/local/templates/fontan/bureau_v34.css?17890642566572*/
/* ============================================================
   Блок «07 — БЮРО» — стили из макета v34-water.
   Источник: C:\Users\khome\Documents\Codex\2026-09-02\ye\outputs\
             fontan-city-premium_v34-water.html

   Разметка блока в v33 и v34 совпадает до символа — отличается
   только оформление («водная» тема). Поэтому index.php не трогали,
   перенесены лишь стили.

   Из групповых селекторов v34 оставлены ТОЛЬКО части про #s07 и
   .bureau-*, чтобы водная тема не перекрасила остальные секции.
   Подключается после template_styles.css.
   ============================================================ */

@keyframes water-surface {from{background-position:0 0,0 0,0 0}to{background-position:30px 12px,-24px -14px,60px 36px}}

/* bureau */
.bureau {display:grid;grid-template-columns:1fr 2fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}

.bureau .left {padding:clamp(26px,3vh,44px);border-right:1px solid var(--line);display:flex;flex-direction:column}

.bureau .left h3 {font-family:var(--serif);font-size:clamp(20px,2.6vh,24px);font-weight:450;margin:clamp(10px,1.6vh,18px) 0}

.bureau .left p {font-size:14px;color:var(--ink-soft);line-height:1.62}

.bureau .rows {padding:8px}

@media(min-width:981px) and (max-height:760px) {

  .bureau .left {padding:22px}

}

@media(max-width:980px) {

  .bureau {grid-template-columns:1fr}

  .bureau .left {border-right:none;border-bottom:1px solid var(--line)}

}

.bureau-note {font-family:var(--mono);font-size:11px!important;color:var(--steel-deep)!important;border-top:1px solid var(--line);padding-top:18px;margin-top:20px}

.bureau .rows {min-width:0}

one invitation. */
#s07.bureau-section-v12 {min-height:0;
  padding-block:clamp(64px,8vw,104px);
  background:var(--paper);}

#s07 .sec-head {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:end;
  gap:clamp(32px,5vw,72px);
  margin-bottom:clamp(36px,4vw,56px);}

#s07 .sec-head h2 {max-width:540px;text-wrap:balance}

#s07 .sec-head .side p {max-width:440px;margin:0;font-size:17px;line-height:1.65}

#s07 .bureau-scope {display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);
  margin:0;
  padding:0;
  list-style:none;}

#s07 .bureau-service {min-width:0;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
  padding-top:22px;}

#s07 .bureau-number {font-family:var(--mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--steel-deep);
  margin-bottom:18px;}

#s07 .bureau-service h3 {font-family:var(--serif);
  font-size:clamp(24px,2.1vw,28px);
  font-weight:450;
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0 0 14px;}

#s07 .bureau-service>p {font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:38ch}

#s07 .bureau-result {margin:0;margin-top:auto;padding-top:28px}

#s07 .bureau-result dt {font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}

#s07 .bureau-result dd {margin:0;max-width:30ch;font-size:14px;font-weight:500;line-height:1.55;color:var(--ink)}

#s07 .bureau-closing {display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  margin-top:clamp(36px,4vw,56px);
  padding-top:30px;
  border-top:1px solid var(--line);}

#s07 .bureau-closing-copy {min-width:0;max-width:660px}

#s07 .bureau-closing h3 {font-family:var(--serif);font-size:23px;font-weight:450;line-height:1.3;margin-bottom:10px}

#s07 .bureau-closing p {font-size:14px;line-height:1.7;color:var(--ink-soft);max-width:66ch}

#s07 .bureau-closing .btn {flex:none}

@media(max-width:980px) {

  #s07 .sec-head {grid-template-columns:1fr;gap:20px;margin-bottom:36px}

  #s07 .sec-head .side p {max-width:600px;font-size:16px}

  #s07 .bureau-scope {grid-template-columns:1fr;gap:28px}

  #s07 .bureau-service {padding-top:22px}

  #s07 .bureau-number {margin-bottom:12px}

  #s07 .bureau-service>p {max-width:60ch}

  #s07 .bureau-result {padding-top:18px}

  #s07 .bureau-result dd {max-width:none}

  #s07 .bureau-closing {align-items:flex-start;flex-direction:column;gap:24px}

}

@media(max-width:600px) {

  #s07.bureau-section-v12 {padding-block:60px}

  #s07 .sec-head h2 {font-size:32px;line-height:1.12}

  #s07 .bureau-service h3 {font-size:25px}

  #s07 .bureau-closing .btn {max-width:100%;white-space:normal}

}

palette and page scrolling are retained. */
#s07 .bureau-service {border-top:0;padding-top:0}

#s07 .bureau-visual {position:relative;
  width:100%;
  aspect-ratio:1.9;
  margin:0 0 22px;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--ice);
  flex:none;}

#s07 .bureau-visual img {display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.78)}

#s07 .bureau-visual.supervision img {object-position:50% 64%}

#s07 .bureau-visual-note {font-size:11px;line-height:1.5;color:var(--ink-soft);margin-top:16px}

@media(max-width:980px) {

  #s07 .bureau-visual {aspect-ratio:2.3;max-height:260px;margin-bottom:20px}

}

@media(max-width:600px) {

  #s07 .bureau-visual {aspect-ratio:1.75;max-height:none}

}

#s07.bureau-section-v12 {background:#F4F2F0}

#s07::before {content:"";position:absolute;inset:0;pointer-events:none;opacity:.38;
  background:
    radial-gradient(ellipse at 12% 8%,rgba(82,113,134,.18),transparent 30%),
    radial-gradient(ellipse at 88% 92%,rgba(148,157,161,.22),transparent 34%),
    repeating-radial-gradient(ellipse at 90% 0%,transparent 0 34px,rgba(82,113,134,.07) 36px 38px,transparent 40px 70px);
  background-size:auto,auto,130% 130%;
  animation:water-surface 18s ease-in-out infinite alternate;}

#s07>.wrap {position:relative;z-index:1}

#s07 .bureau-visual {box-shadow:inset 0 0 0 1px rgba(244,242,240,.13),0 24px 60px -42px rgba(38,48,61,.72)}

#s07 .bureau-visual::after {content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(125deg,rgba(82,113,134,.18),transparent 38%,rgba(244,242,240,.1) 54%,transparent 70%);
  mix-blend-mode:soft-light;}

@media(prefers-reduced-motion:reduce) {

  #s07::before {animation:none}

}
/* End */


/* Start:/local/templates/fontan/custom.css?178906425640098*/
/* ============================================================
   fontan — собственные доработки поверх макета.
   Файл НЕ перезаписывается при переимпорте макета:
   template_styles.css генерируется из исходника, этот — правится руками.
   Подключается после него, поэтому побеждает в каскаде.
   ============================================================ */

/* Desktop sections follow their content instead of stretching to screen height. */
html,
body,
.scroller {
  max-width:100%;
  overflow-x:clip;
}

#scroller > section,
#scroller > footer {
  width:100%;
  max-width:none;
  margin-inline:0;
}

@media (min-width:981px) {
  body:not(.services-page) #scroller > section.block,
  body:not(.services-page) #scroller > #s06,
  body:not(.services-page) #scroller > #s07.bureau-section-v12 {
    height:auto;
    min-height:0;
    padding-block:64px;
  }
  body:not(.services-page) .wrap { padding-inline:48px; }
}

/* Header navigation: underline grows outwards from the centre. */
.site-header-v5 { --nav-hover-color:#527f99; }
.site-header-v5.on-dark { --nav-hover-color:#b8deef; }
.header-utility { border-bottom:1px solid var(--header-rule); }
.header-utility-row { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:34px; }
.header-utility-row nav { display:flex; align-items:center; gap:22px; }
/* Слева — город и режим работы: верхняя строка перестаёт быть
   полупустой и уравновешивает блок ссылок справа. */
.header-utility-note { display:flex; align-items:center; gap:10px; margin:0; color:var(--ink-faint); font-family:var(--mono); font-size:9px; font-weight:500; line-height:1; letter-spacing:.085em; text-transform:uppercase; }
.header-utility-sep { flex:none; width:14px; height:1px; background:currentColor; opacity:.45; }
.site-header-v5.on-dark .header-utility-note { color:var(--inverse-muted); }
.header-utility a { position:relative; padding-block:5px; color:var(--ink-soft); font-family:var(--mono); font-size:9px; font-weight:500; line-height:1; letter-spacing:.085em; text-transform:uppercase; transition:color .25s ease; }
/* Подчёркивание выезжает слева и убирается вправо. */
.header-utility a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.header-utility a:is(:hover,:focus-visible) { color:var(--steel-deep); }
.header-utility a:is(:hover,:focus-visible)::after { transform:scaleX(1); transform-origin:left; }
.site-header-v5.on-dark .header-utility a { color:var(--inverse-muted); }
.site-header-v5.on-dark .header-utility a:is(:hover,:focus-visible) { color:#b8deef; }
.site-header-v5 .hd { height:74px; }
@media (max-width:980px) { .header-utility { display:none; } }
.site-header-v5 nav.main a { transition:color .25s ease; }
.site-header-v5 nav.main a::after {
  content:'';
  display:block;
  left:0;
  bottom:7px;
  width:100%;
  height:2px;
  background:var(--nav-hover-color);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.site-header-v5 nav.main a:is(:hover,:focus-visible),
.site-header-v5.on-dark nav.main a:is(:hover,:focus-visible) {
  color:var(--nav-hover-color);
}
.site-header-v5 nav.main a:is(:hover,:focus-visible)::after { transform:scaleX(1); }
@media (prefers-reduced-motion:reduce) {
  .site-header-v5 nav.main a,.site-header-v5 nav.main a::after { transition:none; }
}

/* Expandable contact card in the desktop header. */
.site-header-v5 .header-contact { position:relative; display:grid; justify-items:start; gap:2px; }
.header-contact-toggle {
  display:flex; align-items:center; gap:7px; padding:8px 0; border:0; background:transparent;
  color:var(--ink); cursor:pointer;
}
.header-contact-chevron {
  width:7px; height:7px; margin:-4px 1px 0 3px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .25s ease,margin .25s ease;
}
.header-contact-toggle[aria-expanded="true"] .header-contact-chevron { margin-top:4px; transform:rotate(225deg); }
.header-email { padding-left:13px; color:var(--ink-soft); font-family:var(--mono); font-size:9px; line-height:1.2; letter-spacing:.02em; transition:color .2s ease; }
.header-email:hover { color:var(--steel-deep); }
.site-header-v5.on-dark .header-email { color:#9eb3c2; }
.site-header-v5.on-dark .header-email:hover { color:#d7e8f0; }
.site-header-v5.on-dark .header-contact-toggle { color:#fff; }
.header-contact-card {
  position:absolute; z-index:70; top:calc(100% + 25px); right:0; width:min(390px,calc(100vw - 32px));
  padding:24px; border:1px solid #d9e3e9; border-radius:var(--r-lg); background:#f7f9fa;
  color:var(--ink); box-shadow:0 24px 70px rgba(20,37,47,.22);
}
.header-contact-card::before { content:''; position:absolute; right:28px; top:-7px; width:13px; height:13px; border-left:1px solid #d9e3e9; border-top:1px solid #d9e3e9; background:#f7f9fa; transform:rotate(45deg); }
.header-contact-card-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:10px; }
.header-contact-card-head>span { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-deep); }
.header-contact-close { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #d2dde3; border-radius:50%; background:transparent; color:var(--ink); font:22px/1 'Inter',sans-serif; cursor:pointer; }
.header-contact-card dl { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; margin:0; }
.header-contact-card dl>div { min-width:0; }
.header-contact-card dt { margin-bottom:6px; font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-deep); }
.header-contact-card dd { margin:0; font-size:13px; line-height:1.5; }
.header-contact-card dd a { color:inherit; text-decoration:none; }
.header-contact-card dd a:hover { color:var(--steel-deep); text-decoration:underline; }
.header-contact-actions { display:flex; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid #d9e3e9; }
.header-contact-socials { display:flex; align-items:center; gap:7px; }
.header-contact-socials a { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid rgba(177,166,159,.18); border-radius:50%; background:transparent; color:var(--ink-soft); box-shadow:none; transition:color 180ms ease,border-color 180ms ease,background-color 180ms ease,transform 180ms ease; }
.header-contact-socials a:is(:hover,:focus-visible) { border-color:rgba(214,168,109,.44); background:rgba(214,168,109,.08); color:var(--ink); transform:translateY(-1px); }
.header-contact-socials svg { width:20px; height:20px; fill:currentColor; }
.header-contact-socials a:first-child svg { width:18px; height:18px; }
.header-contact-socials a:last-child svg { width:23px; height:23px; }
@media(max-width:1320px) { .header-contact-card { display:none; } }

/* Phone-only art direction; tablet and desktop keep their original cascade. */
@media (max-width: 600px) {
  html { scrollbar-gutter:auto; }
  /* Reuse desktop radii: --r: 4px, --r-lg: 8px. */
  .wrap { padding-inline:20px; }
  section.block, #s06, #s07.bureau-section-v12 { padding-block:56px; min-height:0; }
  .sec-head { gap:18px; margin-bottom:26px; }
  .sec-head h2, #s06 .sec-head h2, #s07 .sec-head h2 { font-size:32px; line-height:1.12; text-wrap:balance; }
  .sec-head .idx { display:flex; align-items:center; gap:10px; font-size:10px; color:#527186; margin-bottom:18px; }
  .sec-head .idx::before { content:''; width:7px; height:7px; border-radius:50%; background:#7b9bad; box-shadow:0 0 0 4px #7b9bad14; }
  .sec-head .side p, .section-intro { font-size:14px; line-height:1.65; }
  .btn { min-height:48px; justify-content:space-between; }
  a, button, summary { -webkit-tap-highlight-color:transparent; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid #6b9eb8; outline-offset:4px; }
  .site-header-v5 .hd { height:68px; gap:12px; }
  .site-header-v5 .brand { font-size:18px; }
  .site-header-v5 .brand-group small { display:block; font-size:6px; letter-spacing:.08em; margin-top:4px; }
  .site-header-v5 .hd-right { margin-left:auto; }
  .site-header-v5 .hd-right:has(.mobile-menu-button) > .btn { display:none; }
  .mobile-menu-button { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 13px; border:1px solid #7b9bad55; border-radius:30px; background:transparent; color:inherit; font:11px 'Inter',sans-serif; cursor:pointer; }
  .on-dark .mobile-menu-button { color:#eef6fa; border-color:#b9d9e744; }
  .mobile-menu-button svg { width:18px; height:18px; }

  .hero { min-height:0; padding:235px 0 28px; background:#14242e; }
  .hero-media { height:370px; transform:none; background-position:64% 40%; filter:saturate(.8); }
  .hero::after { background:linear-gradient(180deg,#14242e05 90px,#14242e24 160px,#14242eec 320px,#14242e 400px); }
  .hero .wrap { padding:0 20px; }
  .hero .topline { margin-bottom:18px; }
  .hero .topline .label { color:#d0e6f0; font-size:9px; letter-spacing:.12em; }
  .hero .label.dash::before { width:22px; background:#b9d9e7; }
  .hero h1 { font-size:clamp(34px,9.7vw,48px); line-height:1.06; letter-spacing:-.035em; text-wrap:balance; margin-bottom:18px; }
  .hero p.lead { font-size:14px; line-height:1.65; color:#c0ced6; max-width:38ch; }
  .hero-ctas { display:grid; gap:10px; margin:24px 0; }
  .hero-ctas .btn { width:100%; padding:14px 20px; font-size:13px; }
  .hero-ctas .btn-primary { background:#c4e0ec; color:#14242e; border-color:#c4e0ec; }
  .hero-ctas .btn-outline { border-color:#b9d9e738; background:#ffffff05; }
  .hero .spec { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; border:0; }
  .hero .spec .cell { min-width:0; padding:16px 14px; background:#ffffff06; border:1px solid #b9d9e722; border-radius:var(--r); }
  .hero .spec .cell .n { font-size:clamp(16px,5.3vw,22px); color:#e6f2f8; }
  .hero .spec .cell .t { font-size:9px; color:#a7beca; margin-top:5px; }

  .portfolio-head { grid-template-columns:1fr; gap:16px; }
  .portfolio-head .btn { padding:8px 16px; min-height:44px; font-size:12px; }
  .filters { flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:0; }
  .filters .chip { display:flex; align-items:center; justify-content:center; flex:1 0 auto; min-height:44px; padding:11px 14px; font-family:'Inter',sans-serif; font-size:12px; font-weight:500; line-height:1.35; letter-spacing:0; white-space:nowrap; background:#f1f5f7; border:1px solid #dfe7ec; border-radius:12px; transition:background-color .2s,color .2s,border-color .2s; }
  .filters .chip.active { background:#243c4b; color:#fff; border-color:#243c4b; box-shadow:0 3px 8px #243c4b18; }
  .cards-3 { gap:20px; }
  .pcard { padding:0; overflow:hidden; border:1px solid #dfe7ec; border-radius:var(--r-lg); background:#f6f8f9; }
  .pcard .img { aspect-ratio:1.15; border-radius:0; }
  .pcard .img .tag { top:12px; left:12px; font-size:8px; padding:8px 10px; }
  .pcard .body { padding:18px 18px 16px; margin-top:0; }
  .pcard h3 { font-size:23px; line-height:1.2; }
  .pcard .go { display:none; }
  .pcard .case-link { min-height:44px; padding:10px 0; border:0; font-size:11px; }
  #s02 { background:#edf2f5; }
  #s02 .logos { gap:8px; }
  #s02 .logos .logo { border-radius:var(--r); height:110px; border:1px solid #dce5eb; padding:16px; }
  #s02 .logo-visual { height:48px; }
  #s02 .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0; border:0; margin-top:20px; }
  #s02 .metric { background:#dfe9ef; border:0!important; border-radius:var(--r); padding:18px 14px!important; }
  #s02 .metric > b { font-size:23px; color:#284658; }
  #s02 .metric:nth-child(n+3) > b { font-size:clamp(16px,4.8vw,20px); white-space:normal; text-wrap:balance; }
  #s02 .metric > span { font-family:'Inter',sans-serif; font-size:11px; line-height:1.5; margin-top:8px; }
  .reviews { margin-top:36px; }
  .reviews-head { align-items:center; gap:12px; }
  .reviews-head h3 { font-size:25px; }
  .review-count { flex:none; background:transparent; padding:0; border-radius:0; font-family:var(--mono); font-size:clamp(20px,5.6vw,24px); font-weight:500; line-height:1.2; letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--steel-deep); }
  #reviews .review-active { border-radius:var(--r-lg); padding:22px; }
  #reviews .review-controls button { min-height:44px; min-width:44px; }
  /* Flush sticky header: scrolling text cannot appear above or beside it. */
  .review-dialog { padding-top:0; scroll-padding-top:88px; }
  .review-dialog-head { top:0; z-index:2; margin-inline:-22px; padding:18px 22px; background:var(--paper); }

  #s03 { border-radius:0; background:radial-gradient(ellipse at 100% 0,#304b5c,transparent 50%),#17262f; }
  #s03 .proc { gap:24px; }
  /* Stages inherit desktop rows: transparent background and a top divider. */
  #s03 .steps summary { grid-template-columns:30px minmax(0,1fr) 28px; gap:10px; }
  #s03 .steps .num, #s03 .steps details[open] .num { font-size:13px; color:#a8c9db; padding:0; letter-spacing:0; }
  #s03 .steps summary h3 { font-size:clamp(17px,5.1vw,20px); }
  #s03 .steps summary .hint { font-size:11px; line-height:1.5; }
  #s03 .steps details > p { padding-left:40px; font-size:13px; }
  #s03 .proc-photo { height:280px; }
  #s03 .proc-photo .tag { top:16px; left:16px; font-size:8px; }
  #s03 .proc-photo .cap { padding:24px; }
  #s03 .proc-photo .cap h4 { font-size:23px; }
  .aud-3, .svc-3 { gap:12px; }
  .aud { min-height:280px; }
  .aud .c { padding:24px; }
  .mini-3 { gap:10px; }
  .mini { padding:22px; border-radius:var(--r-lg); }
  .mini h3 { margin-top:14px; font-size:23px; }
  #s05 { background:#e5edf2; }
  .svc { min-height:265px; }
  .svc .c { padding:24px; width:100%; }
  .svc .n { top:18px; left:18px; display:grid; place-items:center; width:34px; height:34px; border:1px solid #ffffff55; border-radius:50%; background:#14242e66; color:white; }
  .svc .go { display:flex; justify-content:space-between; padding-top:14px; margin-top:18px; border-top:1px solid #ffffff33; }
  .svc-mini-3 { gap:10px; }
  .svc-mini { min-height:180px; padding:22px; }
  .svc-mini .go { color:#bad5e4; }
  .technology-card { border-radius:var(--r-lg); }
  .technology-copy { padding:26px 22px; }
  .technology-copy h2 { font-size:30px; }
  .technology-media { min-height:270px; }
  .technology-types { padding:20px 12px; }
  #s06 .prod-grid { gap:12px; }
  #s06 .shot, #s06 .shot:first-child { min-height:270px; }
  #s06 .numbox { min-height:0; padding:24px; gap:10px; background:#243641; }
  #s06 .numbox b { font-size:42px; }
  #s06 .numbox p { padding-top:14px; }
  .production-assurances { gap:12px; }
  #s07 .bureau-scope { gap:16px; }
  #s07 .bureau-service { padding:0 0 22px; overflow:hidden; border:1px solid #d9e2e7; border-radius:var(--r-lg); background:#ffffffd9; }
  #s07 .bureau-visual { border-radius:0; margin-bottom:20px; }
  #s07 .bureau-number, #s07 .bureau-service h3, #s07 .bureau-service > p, #s07 .bureau-result { margin-inline:22px; }
  #s07 .bureau-number { font-size:11px; }
  #s07 .bureau-service h3 { margin-bottom:10px; }
  #s07 .bureau-service > p { font-size:14px; }
  #s07 .bureau-result { border-top:1px solid #dfe7ec; padding-top:16px; margin-top:20px; }
  #s07 .bureau-closing { position:relative; overflow:hidden; border:1px solid #3b505e; border-radius:var(--r-lg); padding:24px; background:#171f26; color:#fff; margin-top:24px; }
  #s07 .bureau-closing .btn { width:100%; background:#fff; border-color:#fff; color:#172128; }
  #s07 .bureau-closing .btn:hover { background:#fff; border-color:#fff; color:#172128; }

  #s08 { border-radius:0; background:#e2ecf2; }
  #s08 #contact-form { border:1px solid #d5e0e7; border-radius:var(--r-lg); padding:24px 18px; background:#fff; }
  #s08 .contact-prompt { padding-bottom:20px; }
  #s08 .field { grid-template-columns:minmax(0,1fr); padding-block:14px; border:0; }
  #s08 .field > .n { display:none; }
  #s08 .field label { font-size:12px; }
  #s08 .field input:not([type=file]), #s08 .field textarea { margin-top:8px; padding:13px; border:1px solid #d7e2e9; border-radius:var(--r); background:#f5f8fa; font-size:16px; }
  #s08 .field input:focus, #s08 .field textarea:focus { border-color:#5b849d; outline:3px solid #7b9bad22; }
  #s08 .field textarea { min-height:144px; }
  #s08 .field input::placeholder, #s08 .field textarea::placeholder { font-size:12px; }
  #s08 .form-actions .btn { width:100%; }
  #s08 .contact-aside { gap:18px; }
  footer { padding-bottom:110px; }
  .f-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 18px; }
  .f-brand, .f-contact { grid-column:1 / -1; }
  .f-col a { min-height:44px; display:flex; align-items:center; margin:0; line-height:1.4; }

  html.mobile-menu-open { overflow:hidden; }
  .mobile-menu { position:fixed; inset:0; margin:0; width:100%; max-width:none; height:100dvh; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; padding:max(24px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left)); border:0; border-radius:0; background:#171f26; color:#f0f4f6; }
  .mobile-menu[open] { display:flex; flex-direction:column; }
  .mobile-menu::backdrop { background:#0f1920; }
  .mobile-menu-head { flex:none; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:28px; }
  .mobile-menu-brand { display:flex; align-items:center; gap:9px; font:450 26px/1.2 var(--serif); letter-spacing:-.03em; white-space:nowrap; }
  .mobile-menu-mark { position:relative; flex:none; width:22px; height:22px; border:1px solid #a5bac8; border-radius:50%; }
  .mobile-menu-mark::after { content:''; position:absolute; inset:6px; border:1px solid #a5bac8; border-radius:50%; }
  .mobile-menu-close { flex:none; display:grid; place-items:center; width:44px; height:44px; border:1px solid #ffffff23; background:transparent; border-radius:50%; font-size:26px; color:inherit; cursor:pointer; }
  .mobile-menu nav { flex:none; display:grid; }
  .mobile-menu nav a { display:grid; grid-template-columns:22px minmax(0,1fr) 18px; gap:14px; align-items:center; min-height:50px; padding:8px 0; border:0; font:400 14px/1.4 'Inter',sans-serif; }
  .mobile-menu nav a small { font:10px var(--mono); color:#a5bac8; }
  .mobile-menu nav a span { font:18px var(--mono); opacity:0; }
  .mobile-menu nav a:hover, .mobile-menu nav a:focus-visible { color:#a5bac8; }
  .mobile-menu nav a:hover span, .mobile-menu nav a:focus-visible span { opacity:1; }
  .mobile-menu-contact { flex:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; margin-top:auto; padding-top:24px; border-top:1px solid #ffffff23; }
  .mobile-menu nav { margin-bottom:24px; }
  .mobile-menu-reach { grid-column:1/-1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
  .mobile-menu-reach a { display:flex; align-items:center; min-height:32px; font:400 13px/1.4 var(--mono); white-space:nowrap; }
  .mobile-menu-reach a:first-child { font-size:18px; font-weight:500; letter-spacing:-.01em; }
  .mobile-menu-hours, .mobile-menu-address { min-width:0; font-style:normal; }
  .mobile-menu-hours > span, .mobile-menu-address > span { display:block; margin-bottom:10px; font:400 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#a5bac8; }
  .mobile-menu-hours p, .mobile-menu-address a { font:400 13px/1.6 'Inter',sans-serif; color:#f0f4f6; }
  .mobile-menu-address a { display:block; min-height:44px; }
  .mobile-menu-catalog { flex:none; display:flex; justify-content:space-between; align-items:center; min-height:36px; margin:20px 0; font:400 14px/1.4 'Inter',sans-serif; color:#a5bac8; }
  .mobile-menu-cta { flex:none; display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:12px 19px; border-radius:999px; background:#d1e2ed; color:#182a36; font:500 13px/1.4 'Inter',sans-serif; }
  .mobile-dock { position:fixed; z-index:65; bottom:max(12px,env(safe-area-inset-bottom)); left:12px; right:12px; display:grid; grid-template-columns:1fr 1.5fr; gap:6px; padding:6px; border:1px solid #cbdde855; border-radius:var(--r-lg); background:#172b38ed; backdrop-filter:blur(18px); box-shadow:0 8px 30px #0c223344; }
  .mobile-dock a { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; border-radius:var(--r); font-size:12px; color:#e1edf4; }
  .mobile-dock a:last-child { background:#c4e0ec; color:#14242e; }
  .mobile-dock svg { width:16px; height:16px; }
  .mobile-dock[hidden] { display:none; }
}

/* Preserve the approved hierarchy while fitting shorter phone screens. */
@media (max-width:600px) and (max-height:800px) {
  .mobile-menu { padding: max(16px,env(safe-area-inset-top)) 24px max(16px,env(safe-area-inset-bottom)); }
  .mobile-menu-head { margin-bottom:16px; }
  .mobile-menu nav { margin-bottom:16px; }
  .mobile-menu nav a { min-height:44px; }
  .mobile-menu-contact { gap:16px 20px; padding-top:16px; }
  .mobile-menu-reach { gap:4px; }
  .mobile-menu-reach a { min-height:28px; }
  .mobile-menu-catalog { margin:12px 0; }
}
@media (max-width:600px) and (max-height:680px) {
  .mobile-menu { padding: max(12px,env(safe-area-inset-top)) 20px max(12px,env(safe-area-inset-bottom)); }
  .mobile-menu-head { margin-bottom:12px; }
  .mobile-menu nav { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
  .mobile-menu nav a { grid-template-columns:18px minmax(0,1fr); gap:8px; }
  .mobile-menu nav a span { display:none; }
  .mobile-menu nav a:last-child { grid-column:1 / -1; }
  .mobile-menu-hours p, .mobile-menu-address a { font-size:12px; }
  .mobile-menu-catalog { margin:8px 0; }
}
@media (max-width:360px) {
  .mobile-menu { padding-inline:20px; }
  .mobile-menu-brand { font-size:23px; }
}
@media (max-width:600px) and (prefers-reduced-motion:no-preference) {
  .mobile-menu[open] { animation:mobile-menu-enter .32s cubic-bezier(.2,.7,.3,1); }
}
@keyframes mobile-menu-enter {
  from { transform:translateX(100%); }
  to { transform:translateX(0); }
}

/* ---- Секция 03 «Как проходит работа»: плавное раскрытие этапов ---- */

#s03 .steps details.scroll-active summary { opacity:1; }

@media (min-width:981px) {
  body:not(.services-page) #scroller > #s03 {
    height:360vh;
    min-height:360vh;
    padding-block:0;
    justify-content:flex-start;
    overflow:visible;
  }

  #s03 > .wrap {
    position:sticky;
    top:var(--process-top,108px);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    height:calc(100dvh - var(--process-top,108px));
    min-height:0;
    box-sizing:border-box;
    padding-top:clamp(32px,4.5vh,52px);
    padding-bottom:clamp(32px,4.5vh,52px);
    overflow:visible;
  }

  #s03 .sec-head { margin-bottom:clamp(36px,5vh,56px); flex-shrink:0; }
  #s03 .proc { min-height:0; }
  #s03 .proc-photo { max-height:min(420px,48vh); }

  #s03 .sec-head .side,
  #s03 .proc-photo {
    translate:none;
  }
}

/* Compact the stage list while keeping the entire story pinned. */
@media (min-width:981px) and (max-height:950px) {
  #s03 > .wrap {
    padding-block:clamp(24px,3.5vh,34px);
  }
  #s03 .sec-head { margin-bottom:clamp(28px,4vh,38px); }
  #s03 .steps details { padding:clamp(12px,calc(5vh - 23px),24px) 0; }
  #s03 .steps summary { min-height:36px; }
  #s03 .steps details[open] .num { font-size:40px; }
  #s03 .steps details > p { margin-top:16px; line-height:1.65; }
  #s03 .steps details summary .hint { display:none; }
}

/* Панель с текстом этапа. Высоту анимирует JS через Web Animations API —
   нативный <details> раскрывается мгновенно и сделать это чистым CSS нельзя,
   пока ::details-content не поддержан повсеместно. */
#s03 .steps details > p {
  overflow: hidden;
}

/* Номер этапа: было .24s ease — слишком быстро на фоне 58-пиксельного скачка.
   Синхронизируем с длительностью раскрытия панели. */
#s03 .steps .num {
  transition:
    font-size .44s cubic-bezier(.22, .61, .36, 1),
    color     .44s cubic-bezier(.22, .61, .36, 1),
    letter-spacing .44s cubic-bezier(.22, .61, .36, 1);
}

/* Заголовок этапа подсвечивается в такт, а не мгновенно */
#s03 .steps summary h3 {
  transition: color .34s ease;
}

/* Подсказка под закрытым этапом. В макете она снимается через display:none —
   это и давало рывок: строка исчезала за один кадр и layout прыгал.
   Заменяем на схлопывание по высоте. Селектор с #s03 перебивает
   правило .steps details[open] .hint{display:none} из макета. */
#s03 .steps summary .hint {
  display: block;
  overflow: hidden;
  max-height: 3em;
  opacity: .8;
  transition:
    max-height .44s cubic-bezier(.22, .61, .36, 1),
    opacity    .26s ease,
    margin-top .44s cubic-bezier(.22, .61, .36, 1);
}

#s03 .steps details[open] summary .hint {
  display: block;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

/* Строка этапа целиком: мягкая реакция на наведение и раскрытие */
#s03 .steps details {
  transition: padding .44s cubic-bezier(.22, .61, .36, 1);
}

#s03 .steps summary {
  transition: opacity .26s ease;
}

#s03 .steps details:not([open]) summary:hover {
  opacity: .82;
}

/* Пока идёт анимация — курсор и выделение не мешают */
#s03 .steps details.is-animating summary {
  pointer-events: none;
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  #s03 .steps .num,
  #s03 .steps summary h3,
  #s03 .steps summary .hint,
  #s03 .steps details,
  #s03 .steps summary {
    transition: none;
  }
}

/* ---- Секция 02 «Отзывы»: счётчик в такт со сменой карточки ---- */

/* .review-count стоит в .reviews-head, вне .review-stage, поэтому общий
   кроссфейд блока его не задевает — гасим отдельно, из showReview.
   Длительность совпадает с фазой затухания (FADE_OUT_MS в script.js). */
#reviews .review-count {
  transition: opacity .19s ease;
}

@media (prefers-reduced-motion: reduce) {
  #reviews .review-count {
    transition: none;
  }
}

/* ============================================================
   Шапка: пластика, глубина и живые состояния.
   Всё поверх template_styles.css — тот перегенерируется из макета.
   ============================================================ */

/* Ровная полупрозрачная подложка без градиента. */
.site-header-v5 {
  background:#f6f9fa;
  border-bottom-color:transparent;
  box-shadow:0 20px 44px -38px rgba(20,37,47,.55);
  transition:background .4s ease,box-shadow .4s ease;
}
.site-header-v5.on-dark {
  background:#181f25;
  box-shadow:0 20px 46px -38px rgba(0,0,0,.7);
}
.site-header-v5::before {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:var(--header-rule);
}

/* Вертикальные разделители — такие же растворяющиеся линии,
   а не отрезки во всю высоту строки. */
.site-header-v5 .brand-group { border-right:0; }
.site-header-v5 .brand-group::after,
.site-header-v5 .header-contact::before {
  content:''; position:absolute; top:50%; width:1px; height:44px; transform:translateY(-50%);
  background:linear-gradient(180deg,transparent,var(--header-rule) 20%,var(--header-rule) 80%,transparent);
}
.site-header-v5 .brand-group::after { right:0; }
.site-header-v5 .header-contact::before { left:0; }

/* Знак марки — кольца на воде: при наведении расходится ещё две волны. */
.site-header-v5 .brand .mark { border-radius:50%; transition:box-shadow .5s cubic-bezier(.16,.8,.3,1); }
.site-header-v5 .brand .mark::before,
.site-header-v5 .brand .mark::after { transition:transform .5s cubic-bezier(.16,.8,.3,1),border-color .4s ease; }
.site-header-v5 .brand-group:hover .mark { box-shadow:0 0 0 4px rgba(91,118,134,.09),0 0 0 9px rgba(91,118,134,.045); }
.site-header-v5 .brand-group:hover .mark::before { transform:scale(1.08); }
.site-header-v5 .brand-group:hover .mark::after { transform:scale(.72); border-color:var(--steel); }
.site-header-v5.on-dark .brand-group:hover .mark { box-shadow:0 0 0 4px rgba(184,222,239,.12),0 0 0 9px rgba(184,222,239,.06); }
.site-header-v5 .brand-group small { transition:color .3s ease; }
.site-header-v5 .brand-group:hover small { color:var(--steel-deep); }
.site-header-v5.on-dark .brand-group:hover small { color:#b8deef; }

/* Меню: кегль читаемее, активный пункт снова получает подчёркивание
   (custom.css перевёл ::after на scaleX, и правило width:100% перестало работать). */
.site-header-v5 nav.main { gap:24px; }
.site-header-v5 nav.main a { font-size:12px; letter-spacing:.012em; }
.site-header-v5 nav.main a[aria-current] { color:var(--nav-hover-color); }
.site-header-v5 nav.main a[aria-current]::after { transform:scaleX(1); }
.nav-ext { display:inline-block; margin-left:5px; font-size:.82em; opacity:.5; transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s ease; }
.site-header-v5 nav.main a:is(:hover,:focus-visible) .nav-ext { opacity:1; transform:translate(2px,-2px); }

/* Телефон — кликабельная плашка, а не «голый» текст. */
.site-header-v5 .header-contact { padding-left:9px; border-left:0; }
.header-contact-toggle { padding:9px 13px; margin-right:-13px; border-radius:999px; transition:background .25s ease,color .25s ease; }
.header-contact-toggle:is(:hover,:focus-visible,[aria-expanded="true"]) { background:rgba(91,118,134,.09); color:var(--steel-deep); }
.site-header-v5.on-dark .header-contact-toggle:is(:hover,:focus-visible,[aria-expanded="true"]) { background:rgba(255,255,255,.1); color:#fff; }

/* Кнопка-CTA: объём вместо плоской заливки, стрелка «наливается» при наведении. */
.site-header-v5:not(.on-dark) .hd-right .btn-primary {
  background:linear-gradient(135deg,#252e35,#12171b);
  box-shadow:0 12px 26px -16px rgba(16,26,33,.8);
}
.site-header-v5:not(.on-dark) .hd-right .btn-primary:hover { box-shadow:0 18px 34px -16px rgba(16,26,33,.9); }
.site-header-v5.on-dark .hd-right .btn-primary { background:linear-gradient(135deg,#fff,#dfe8ee); }
.site-header-v5 .hd-right .btn .ar { transition:background .35s ease,border-color .35s ease,transform .4s cubic-bezier(.16,.8,.3,1); }
.site-header-v5:not(.on-dark) .hd-right .btn:hover .ar { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); }
.site-header-v5.on-dark .hd-right .btn:hover .ar { background:rgba(23,28,33,.1); border-color:rgba(23,28,33,.35); }

/* Полоса прогресса — та же «вода», что и в скроллбаре. */
.header-progress span {
  background:linear-gradient(90deg,#8fb8cc,#527f99 60%,#3a5567);
  box-shadow:0 0 10px rgba(82,127,153,.5);
  transition:transform .18s linear;
}
.site-header-v5.on-dark .header-progress span {
  background:linear-gradient(90deg,#cfe4ef,#8fb8cc 60%,#6d97ac);
  box-shadow:0 0 12px rgba(184,222,239,.4);
}

/* Компактная высота постоянна; при прокрутке добавляется только тень. */
@media (min-width:981px) {
  .site-header-v5 .hd,
  .site-header-v5.is-scrolled .hd { height:74px; transition:none; }
  .site-header-v5.is-scrolled,
  .site-header-v5.is-scrolled.on-dark { box-shadow:none; }
}

/* Главный CTA не теряется на тёмной фотографии первого экрана. */
.hero-slider {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-height:calc(100svh - 102px);
  width:100%;
  max-width:none;
  margin-inline:0;
}
.hero-slider::after { z-index:1; pointer-events:none; }
.hero-slide {
  grid-area:1/1;
  position:relative;
  display:grid;
  align-items:center;
  justify-self:stretch;
  width:100%;
  max-width:none;
  margin:0;
  min-height:inherit;
  opacity:1;
  visibility:visible;
  pointer-events:none;
}
.hero-slide.is-active {
  pointer-events:auto;
}
.hero-slide .hero-media {
  left:0;
  right:0;
  width:100%;
  max-width:none;
  background-image:var(--hero-bg);
  opacity:0;
  transform:scale(1.035);
  transition:opacity 1.15s cubic-bezier(.4,0,.2,1),transform 7.5s ease-out;
}
.hero-slide.is-active .hero-media { opacity:1; transform:scale(1.075); }
.hero-slide > .wrap > :not(.hero-edit-link) {
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s step-end;
}
.hero-slide.is-active > .wrap > :not(.hero-edit-link) {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:
    opacity .52s ease .42s,
    transform .68s cubic-bezier(.22,.61,.36,1) .42s,
    visibility 0s linear .42s;
}
.hero-slide .lead { max-width:680px; font-size:18px; line-height:1.62; color:#d7dfe4; }
.hero-slide .lead p { margin:0; }
.hero-slide .spec { margin:0; }
.hero-slider-controls {
  position:absolute!important;
  z-index:4!important;
  right:clamp(28px,4vw,56px);
  bottom:24px;
  left:auto!important;
  display:flex;
  align-items:center;
  gap:12px;
  width:auto!important;
  padding:0!important;
}
.hero-slider-dots { display:flex; align-items:center; gap:8px; }
.hero-slider-dot { width:28px; height:2px; padding:0; border:0; background:rgba(255,255,255,.35); cursor:pointer; transition:width .3s ease,background .3s ease; }
.hero-slider-dot.is-active { width:48px; background:#fff; }
.hero-slider-arrow { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(14,19,23,.12); color:#fff; cursor:pointer; transition:background .25s ease,border-color .25s ease,transform .25s ease; }
.hero-slider-arrow svg { display:block; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hero-slider-arrow:hover { border-color:#fff; background:rgba(255,255,255,.14); transform:scale(1.05); }
.hero-edit-link { position:absolute; top:12px; right:12px; color:#fff; font:10px var(--mono); text-decoration:underline; }

.hero .hero-ctas .btn-primary {
  border-color:rgba(255,255,255,.4);
  box-shadow:0 10px 26px -18px rgba(0,0,0,.9);
}
.hero .hero-ctas .btn-primary:hover {
  border-color:#fff;
  box-shadow:0 14px 30px -17px rgba(0,0,0,.95);
}

/* Одинаковое положение стрелок в обеих кнопках первого экрана. */
.hero .hero-ctas .btn {
  position:relative;
  padding-right:56px;
}
.hero .hero-ctas .btn .ar {
  position:absolute;
  top:50%;
  right:16px;
  width:18px;
  text-align:center;
  line-height:1;
  transform:translateY(-50%);
}
.hero .hero-ctas .btn:hover .ar {
  transform:translate(4px,-50%);
}

@media (max-width:600px) {
  .hero-slider { min-height:720px; }
  .hero-slider-controls { right:20px; bottom:18px; gap:8px; }
  .hero-slider-arrow { width:34px; height:34px; }
  .hero-slider-dot { width:18px; }
  .hero-slider-dot.is-active { width:30px; }
  .hero .hero-ctas .btn { padding-right:48px; }
  .hero .hero-ctas .btn .ar { right:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .site-header-v5,.site-header-v5 .hd,.header-utility a::after,
  .site-header-v5 .brand .mark,.site-header-v5 .brand .mark::before,.site-header-v5 .brand .mark::after,
  .nav-ext,.header-contact-toggle,.header-progress span { transition:none; }
}

/* Portfolio: recomposed by visible card order when a category is selected. */
#s01 .portfolio-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:40px 24px; }
#s01 .pcard { grid-column:span var(--card-span,4); min-width:0; }
#s01 .pcard[hidden] { display:none; }
#s01 .pcard .img { height:clamp(260px,29vw,440px); aspect-ratio:auto; }
#s01 .pcard .body { margin-top:0; padding-top:20px; }
#s01 .pcard h3 { font-size:clamp(22px,2vw,30px); }
#s01 .project-number { position:absolute; right:20px; bottom:16px; color:#fff; font-family:var(--mono); font-size:13px; padding:6px 9px; border-radius:999px; background:rgba(20,28,34,.55); }
@media (min-width:701px) and (max-width:1000px) {
  #s01 .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 20px; }
  #s01 .pcard { grid-column:span 1; }
  #s01 .pcard .img { height:320px; }
}
@media (max-width:700px) {
  #s01 .portfolio-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  #s01 .pcard { grid-column:1; }
  #s01 .pcard .img { height:auto; aspect-ratio:4/5; }
}

/* Подписи лежат на фото: карточка — это кадр, текст поверх затемнения
   в нижней трети. Высота кадра у всех карточек одинаковая, поэтому ряд
   выравнивается сам — без подгонки текстовых блоков. */
#s01 .pcard { position:relative; display:block; height:auto; }
#s01 .pcard .img { overflow:hidden; }
#s01 .pcard .img::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg,rgba(10,16,21,0) 32%,rgba(10,16,21,.3) 58%,rgba(10,16,21,.84) 100%);
}
#s01 .pcard .body {
  position:absolute; z-index:2; inset:auto 0 0 0; margin:0; border-top:0;
  padding:22px 22px 20px; color:#fff;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
}
#s01 .pcard .body > div { display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-width:0; }
#s01 .pcard h3 { color:#fff; margin:0; text-wrap:balance; text-shadow:0 1px 14px rgba(8,14,19,.45); }
#s01 .pcard .case-link {
  margin:0; color:#fff; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
#s01 .pcard .case-link:is(:hover,:focus-visible) { color:#fff; background:rgba(255,255,255,.22); border-color:#fff; }
#s01 .pcard .go { color:#fff; flex:none; }
/* Номер уезжает наверх — внизу теперь подпись. */
#s01 .project-number { top:16px; right:16px; bottom:auto; z-index:2; }

/* Мозаика: карточки разной ширины, но высота картинки у всех одна
   и задана в px, а не через aspect-ratio: иначе широкая карточка вытянет
   ряд вверх и верхние края соседей разъедутся. */
@media (min-width:1001px) {
  #s01 .portfolio-grid { gap:26px 24px; }
  /* Кадр выше, чем был без подписи: тексту нужно место внизу. */
  #s01 .pcard .img { height:clamp(320px,33vw,500px); }
  #s01 .pcard h3 { font-size:clamp(18px,1.5vw,24px); }
  #s01 .pcard .body { padding:26px 26px 24px; }
  #s01 .project-number { top:18px; right:18px; font-size:12px; padding:5px 9px; }
}

/* End */


/* Start:/local/templates/fontan/cursor.css?17890642561430*/
/* Native cursors: no animation, pointer tracking or touch interception. */
@media (hover: hover) and (pointer: fine) {
  :root {
    --cursor-default: url("/local/templates/fontan/images/cursor/arrow.svg") 3 2, auto;
    --cursor-link: url("/local/templates/fontan/images/cursor/pointer.svg") 7 2, pointer;
  }
  html, body, body * { cursor: var(--cursor-default) !important; }
  a[href], button, summary, [role="button"], select,
  input[type="button"], input[type="submit"], input[type="reset"],
  input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"],
  label[for], label:has(input[type="checkbox"]), [onclick],
  .chip, .pcard, .steps .step, .field, .attachment-picker,
  .attachment-remove { cursor: var(--cursor-link) !important; }
  a[href] *, button *, summary *, [role="button"] *, [onclick] *,
  .chip *, .pcard *, .steps .step *, .field *, .attachment-picker * {
    cursor: inherit !important;
  }
  input:not([type]), input[type="text"], input[type="email"],
  input[type="tel"], input[type="password"], input[type="search"],
  input[type="url"], input[type="number"], textarea,
  [contenteditable="true"] { cursor: text !important; }
  input[readonly] { cursor: var(--cursor-default) !important; }
  button:disabled, input:disabled, select:disabled, textarea:disabled,
  [aria-disabled="true"] { cursor: not-allowed !important; }
  /* Keep Bitrix editor controls familiar. */
  #bx-panel, #bx-panel * { cursor: auto !important; }
}

/* End */


/* Start:/local/templates/fontan/leads.css?17890642567467*/
.lead-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lead-consent{display:flex!important;align-items:flex-start;gap:12px;font:12px/1.55 var(--sans, sans-serif);color:var(--ink-soft);margin:20px 0 22px;max-width:62ch}
.lead-consent input{width:17px!important;height:17px!important;min-height:17px!important;flex:none;margin:1px 0 0;accent-color:var(--ink)}
.lead-consent a{text-decoration:underline;text-underline-offset:3px}
.service-enquiry{padding:clamp(42px,5vh,64px) 0;background:var(--ice);scroll-margin-top:110px}
.service-enquiry .sec-head{grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(54px,6vw,96px);margin-bottom:clamp(24px,3vh,36px)}
.service-enquiry .sec-head>div{grid-column:2}
.service-enquiry .sec-head .idx{margin-bottom:12px}
.service-enquiry .sec-head h2{font:400 clamp(34px,3.4vw,48px)/1.08 var(--serif)}
.service-enquiry-grid{grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(54px,6vw,96px)}
.service-enquiry form{order:2;min-width:0;display:grid;grid-template-columns:minmax(0,1fr)}
.service-enquiry form>.contact-prompt,.service-enquiry form>.enquiry-task,.service-enquiry form>.lead-trap,.service-enquiry form>.lead-consent,.service-enquiry form>[data-lead-status],.service-enquiry form>noscript{grid-column:1/-1}
.service-enquiry .contact-prompt{padding-bottom:14px}
.service-enquiry .contact-prompt h3{font-size:23px;margin-bottom:7px}
.service-enquiry .contact-prompt p{font-size:13px;line-height:1.55}
.service-enquiry .field{padding:clamp(11px,1.55vh,17px) 0}
.service-enquiry .field textarea{min-height:64px}
.service-enquiry .field>div{min-width:0}
/* Услуга больше не поле формы: она уже в заголовке страницы, в форме её
   держит hidden-input, а человеку она подтверждается подписью в колонке. */
.service-enquiry .field:first-of-type{border-top:0}
.service-enquiry .contact-aside .enquiry-service-note{max-width:none;margin-top:20px;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.service-enquiry .contact-aside .enquiry-service-note b{display:block;margin-top:7px;font:400 17px/1.35 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
/* Кадр услуги добирает пустоту колонки: тянется по остатку высоты рядом с формой. */
.service-enquiry-media{margin:0;overflow:hidden;border-radius:var(--r);background:var(--mist)}
.service-enquiry-media img{display:block;width:100%;height:100%;object-fit:cover}
.service-enquiry .contact-aside{order:1;min-width:0;display:flex;flex-direction:column;gap:38px;padding-top:4px}
.service-enquiry .contact-aside p{max-width:48ch;margin-top:14px;font-size:16px;line-height:1.64;color:var(--ink-soft)}
.service-enquiry-contacts{padding-top:28px;border-top:1px solid var(--line)}
.service-enquiry-contacts a{display:block;width:max-content;max-width:100%;margin-top:14px;font:500 14px/1.5 var(--mono);letter-spacing:.02em;text-transform:uppercase}
.service-enquiry .lead-consent{margin:12px 0 14px}
.service-enquiry .form-submit{margin-top:18px;justify-self:start}
@media(min-width:981px){
  .service-enquiry>.wrap{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);grid-template-rows:min-content 1fr min-content;column-gap:clamp(48px,6vw,88px);row-gap:24px;align-items:start}
  .service-enquiry .sec-head{display:block;grid-column:1;grid-row:1;margin:0!important}
  .service-enquiry .sec-head h2{max-width:10ch;font-size:clamp(38px,4vw,56px);line-height:1.05}
  .service-enquiry-grid{display:contents}
  /* Телефон и почта короткие — ставим их в один ряд: форма короче на строку. */
  .service-enquiry form{grid-column:2;grid-row:1/3;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
  .service-enquiry form>.field{grid-column:1/-1}
  .service-enquiry form>.enquiry-phone{grid-column:1}
  .service-enquiry form>.enquiry-email{grid-column:2}
  .service-enquiry .contact-aside{grid-column:1;grid-row:2/4;align-self:stretch;gap:24px;padding:0}
  .service-enquiry .contact-aside p{font-size:15px;line-height:1.6;margin-top:12px}
  /* Кадр занимает пустоту под формой, а не отдельную строку: колонка с формой
     была короче левой, и этот запас теперь работает на картинку. */
  .service-enquiry-media{grid-column:2;grid-row:3;height:clamp(140px,17vh,190px)}
  .service-enquiry-contacts{margin-top:auto;padding-top:20px}
  .service-enquiry .field{grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;padding:8px 0}
  .service-enquiry .field .n{padding-top:4px}
  .service-enquiry .field:hover{padding-left:0}
  .service-enquiry .form-submit{grid-column:1/-1;margin-top:4px}
}
[data-lead-form] [type=submit]:disabled{opacity:.65;cursor:default}
[data-lead-status]{margin-top:16px!important}
.service-detail-copy h2{font:400 clamp(26px,3vw,36px)/1.2 var(--serif);margin:36px 0 18px}
.service-detail-copy ul,.service-detail-copy ol{padding-left:24px;margin-bottom:24px}
.service-proof{border-left:3px solid var(--steel);background:var(--ice);padding:28px;margin:36px 0}
.service-proof h2{margin-top:16px}.service-proof a{font-size:14px;text-decoration:underline;text-underline-offset:4px}
.services-intro-copy .btn{margin-top:20px}.services-intro-copy .services-text-link{margin-left:16px}
@media(max-width:980px){.service-enquiry .sec-head{grid-template-columns:1fr;gap:0}.service-enquiry .sec-head>div{grid-column:1}.service-enquiry-grid{grid-template-columns:1fr;gap:42px}
 /* Узкий экран: сперва объясняем, о чём спросим, затем форма, а прямые
    контакты — запасной путь уже после неё. */
 .service-enquiry .contact-aside{display:contents}
 /* Кадр закрывает пустоту десктопной колонки; в одну колонку он только
    удлиняет путь до полей. */
 .service-enquiry-media{display:none}
 .service-enquiry .contact-aside>.side{order:1}
 .service-enquiry form{order:2}
 .service-enquiry .service-enquiry-contacts{order:3}
}
@media(max-width:600px){.service-enquiry-grid{gap:38px}.service-enquiry{padding:54px 0}.service-enquiry form{grid-template-columns:1fr}.service-enquiry form>*{grid-column:1!important}.service-enquiry .field{grid-template-columns:28px minmax(0,1fr);gap:12px}.service-enquiry .field:hover{padding-left:0}.service-enquiry .btn{width:100%;white-space:normal}.service-proof{padding:20px}.services-intro-copy .services-text-link{margin-left:0}
 /* Телефон и почта повторяются в подвале строкой ниже — на телефоне это
    один и тот же экран, поэтому дубль после кнопки убираем. */
 .service-enquiry .service-enquiry-contacts{display:none}
}
@media(min-width:981px) and (max-height:760px){.service-enquiry{padding:24px 0}.service-enquiry .sec-head{margin-bottom:20px}.service-enquiry .sec-head h2{font-size:38px}.service-enquiry .contact-prompt{padding-bottom:8px}.service-enquiry .field{padding:5px 0}.service-enquiry .lead-consent{margin:9px 0 11px}.service-enquiry .form-submit{margin-top:12px}}

/* End */
/* /local/templates/fontan/template_styles.css?178906425670107 */
/* /local/templates/fontan/bureau_v34.css?17890642566572 */
/* /local/templates/fontan/custom.css?178906425640098 */
/* /local/templates/fontan/cursor.css?17890642561430 */
/* /local/templates/fontan/leads.css?17890642567467 */