/* Начална страница — посока „Сервизна книжка“. */

/* ---------- cover: the photo fills the screen, the wide wordmark and the copy sit on it ---------- */
.cover{position:relative;isolation:isolate;background:var(--field);color:var(--field-ink);min-height:calc(100svh - var(--hdr-h));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:clamp(160px,34vh,360px) var(--m) clamp(40px,7vh,80px);overflow:clip}
.cover-pic{position:absolute;inset:0;z-index:-1;margin:0;background:var(--field);overflow:clip}
.cover-pic .cam{position:absolute;inset:0;transform:translateY(var(--cv-y,0)) scale(var(--cv-s,1));transform-origin:50% 60%;will-change:transform}
.cover-pic img{width:100%;height:100%;object-fit:cover;object-position:30% 45%}
/* the car stays clear at the top; the copy sits on a dark fade at the bottom */
.cover-pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,12,14,.96) 0%,rgba(12,12,14,.9) 42%,rgba(12,12,14,.35) 70%,rgba(12,12,14,.12) 100%)}
/* without the photo: a compact dark opening, the wordmark and the copy centred, no full-screen height */
.cover.no-pic{min-height:0;justify-content:center;padding-block:clamp(56px,11vh,140px) clamp(48px,9vh,110px)}
.cover-title{font-weight:inherit;transform:translateY(var(--cv-m,0));opacity:var(--cv-o,1)}
.cover-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.wide{display:block;font:700 clamp(56px, 1.5rem + 8vw, 150px)/.9 var(--sans);letter-spacing:.12em;margin-right:-.12em;color:var(--field-ink)}
.wide b{color:var(--brand);font-weight:700}
.tagline{font-family:var(--serif);font-weight:500;font-size:var(--s-lead);line-height:1.15;margin-top:16px}
.cover-what{margin-top:14px;max-width:62ch;font-weight:700;color:var(--field-ink)}
.cover-sub{margin-top:12px;max-width:64ch;color:var(--field-muted)}
.cover-ask{margin-top:26px;font-family:var(--serif);font-weight:600;font-size:var(--s-lead);line-height:1.15;color:var(--field-ink)}
.cover-row{margin-top:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.cover-row .link{color:var(--field-ink)}
.cover-meta{margin-top:22px;font-size:var(--s-small);font-weight:600;color:var(--field-muted)}
.cover-meta a{color:var(--field-ink);text-decoration:none}
.cover-meta a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- „Механизмът“: pinned wordmark scene (motion language of concept A „Хронограф“) ---------- */
/* the scene is an ordinary block about three quarters of the screen tall — no longer pinned for a long scroll
   (Milen, 2026-10-24: it took too much room). The animation is scrubbed while the block moves up the screen. */
.mvt{--mvt-h:min(74svh,720px);position:relative;height:var(--mvt-h);background:var(--field)}
.mvt-stage{position:relative;height:var(--mvt-h);overflow:clip;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gut);align-items:center;padding-inline:var(--m)}
.mvt-copy{grid-column:1 / span 5;align-self:start;padding-top:clamp(16px,4vh,56px);position:relative;z-index:2;will-change:transform,opacity;color:var(--field-ink)}
.mvt-copy h2{font-size:var(--s-head);line-height:1}
.mvt-copy p{margin-top:20px;max-width:38ch;color:var(--field-muted)}
.mvt-dialwrap{grid-column:6 / span 7;align-self:start;justify-self:center;width:100%;margin-top:clamp(8px,3vh,40px);perspective:1400px;position:relative;z-index:1}
/* photo behind the wordmark (admin `mvtImage`: the night XC90). The car stays in the lower part;
   the wordmark sits in the dark above it, the copy in the dark top-left corner. */
.mvt-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0C0C0E}
.mvt-bg img{position:absolute;top:13%;left:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%;
  transform-origin:60% 100%;will-change:transform} /* lowered: the wet floor under the car is cropped, the dark sky gains room */
.mvt-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 0% 15%,rgba(12,12,14,.8),rgba(12,12,14,0) 70%),
    linear-gradient(180deg,#0C0C0E 13%,rgba(12,12,14,.45) 22%,rgba(12,12,14,0) 45%)}
/* very wide screens: the whole picture by height, centred, its sides fading into the dark (the car stays below the wordmark) */
@media (min-aspect-ratio:19/10) and (min-width:760px){
  .mvt-bg img{width:auto;right:0;margin-inline:auto;object-fit:fill;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
}
.mvt-tilt{transition:transform 600ms var(--ease-out)}
.mvt-dial{aspect-ratio:2.8/1;transform-origin:50% 50%;will-change:transform,opacity} /* wide and low: stays above the car */
.mk{position:relative;height:100%;container-type:inline-size;display:grid;place-content:center;justify-items:center}
.mk-words{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.mk-words li{position:absolute;max-width:30cqw;transform:translate(-50%,-50%);text-align:center;text-wrap:balance;
  font:600 clamp(10px,2.5cqw,15px)/1.3 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);will-change:transform,opacity}
.mk-logo{display:flex;font:800 15.5cqw/1 var(--sans);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.mk-logo span{display:block;will-change:transform,opacity}
.mk-help{color:var(--brand)}
.mk-sub{margin-top:3cqw;font:600 clamp(10px,2.2cqw,14px)/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.mvt-red{position:absolute;inset:0;z-index:3;background:var(--brand);clip-path:circle(0% at 70% 50%);will-change:clip-path;pointer-events:none}
.mvt-dark{position:absolute;inset:0;z-index:4;background:var(--field);color:var(--field-ink);display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;padding-bottom:clamp(28px,7%,64px);clip-path:circle(0% at 70% 50%);will-change:clip-path;pointer-events:none}
/* after the red circle: the Camaro fills the block, the question sits on the photo over a soft dark fade */
.mvt-dark picture{position:absolute;inset:0}
.mvt-dark img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.25);will-change:transform}
.mvt-dark::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,12,14,.75) 0%,rgba(12,12,14,.2) 40%,rgba(12,12,14,0) 65%)}
.mvt-dark-t{position:relative;z-index:1;text-align:center;padding-inline:var(--m)}
.mvt-dark-h{font:500 var(--s-display)/.95 var(--serif)}
.mvt-dark-s{margin-top:16px;font:600 var(--s-small) var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--field-muted)}

/* ---------- intro statement with two plates ---------- */
.intro{padding-block:var(--gap-section) calc(var(--gap-section) * .75);row-gap:40px;align-items:end}
.intro .statement{grid-column:1 / span 7;font-family:var(--serif);font-weight:600;font-size:var(--s-lead);line-height:1.25;max-width:60ch}
.intro .plate-a{grid-column:9 / span 4;grid-row:1 / span 2;align-self:start}
.intro .plate-b{grid-column:1 / span 4}
.plate img{width:100%;object-fit:cover}
.plate-a img{aspect-ratio:4/5}
.plate-b img{aspect-ratio:3/2}
.plate figcaption{font-size:var(--s-small)}
.intro .note{grid-column:5 / span 4;align-self:end}
.intro .note .link{margin-top:12px}

/* ---------- situations: statements on colour fields ---------- */
.fields>*{min-height:48svh;padding:clamp(28px,3.4vw,48px) var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);grid-template-rows:auto 1fr auto}
.f-bg{background:var(--bg)} .f-s{background:var(--surface)} .f-s2{background:var(--surface-2)}
.f-dark{background:var(--field);color:var(--field-ink)}
.f-dark .muted{color:var(--field-muted)}
.fields .lead-field{min-height:auto;padding-top:var(--gap-section);padding-bottom:clamp(36px,4.5vw,64px);grid-template-rows:auto}
.lead-field h2{grid-column:1 / span 9;font-size:var(--s-display);line-height:.95}
.lead-field p{grid-column:10 / span 3;align-self:end;max-width:34ch}
.fields>.sit{grid-template-rows:auto auto 1fr} /* heading, then its text, then the photo */
.sit .info{grid-column:1 / span 6;grid-row:2;max-width:46ch;margin-top:clamp(20px,2.4vw,36px)}
.sit .info>p{margin-bottom:16px}
.sit .info li{padding:2px 0 2px 1.1em;position:relative}
.sit .info li::before{content:"•";position:absolute;left:0}
.sit .info .link{margin-top:20px}
.sit h3{grid-column:1 / span 10;grid-row:1;font-size:var(--s-display);line-height:.92;text-wrap:balance;max-width:16ch}
.sit h3 a{text-decoration:none}
.sit.mirror .info{grid-column:7 / span 6;justify-self:end}
.sit.mirror h3{grid-column:3 / span 10;justify-self:end;text-align:right}
.sit-photo{grid-column:9 / span 4;grid-row:3;align-self:end;margin-top:clamp(24px,3vw,40px);overflow:hidden}
.sit.mirror .sit-photo{grid-column:1 / span 4}
.sit-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
/* with a photo the situation block IS the photo: it fills the block behind the heading, the text and the link,
   darkened so the white text reads (Milen, 2026-10-24) */
.fields>.sit.has-photo{position:relative;isolation:isolate;overflow:clip;color:#fff;background:var(--field)}
.fields>.sit.has-photo>.sit-photo{position:absolute;inset:0;z-index:-1;margin:0!important;width:auto!important;max-width:none!important;
  height:auto;grid-column:auto!important;grid-row:auto!important;align-self:stretch!important;justify-self:stretch!important}
/* (align-self:end from the old layout shrank the frame to its not-yet-loaded image: 0 px, so it never loaded) */
.sit.has-photo .sit-photo img{width:100%;height:100%;aspect-ratio:auto;object-position:50% 68%;-webkit-mask-image:none!important;mask-image:none!important}
.sit.has-photo .sit-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,12,14,.9) 0%,rgba(12,12,14,.66) 50%,rgba(12,12,14,.52) 100%)}
.sit.has-photo a,.sit.has-photo .link{color:#fff}
.sit.has-photo .muted{color:rgba(255,255,255,.84)}

/* ---------- real project: two objects, two fields ---------- */
.case-head{padding-block:var(--gap-section) 36px;row-gap:24px;align-items:start}
.case-title{grid-column:1 / span 5}
.case-head h2{font-size:var(--s-head);line-height:1}
.case-car{margin-top:14px;font-family:var(--serif);font-weight:600;font-size:var(--s-lead);line-height:1.2}
.case-facts{grid-column:7 / span 6;margin:0;display:grid;grid-template-columns:minmax(120px,auto) 1fr;column-gap:24px}
.case-facts dt{font-size:var(--s-small);font-weight:700;color:var(--muted);padding:12px 0;border-top:1px solid var(--line)}
.case-facts dd{margin:0;padding:12px 0;border-top:1px solid var(--line);max-width:52ch}
/* ---------- real projects on the homepage: compact cards ---------- */
.pjs{padding-block:var(--gap-section) clamp(28px,4vw,56px)}
.pjs-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.pjs-head h2{font-size:var(--s-head);line-height:1}
.pjs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--gut);padding-inline:var(--m)}
.pj{display:flex;flex-direction:column;background:var(--surface);color:var(--ink);text-decoration:none;border-radius:6px;overflow:clip}
.pj-pic{position:relative;margin:0;aspect-ratio:16/9;background:var(--field)}
.pj-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-soft)}
.pj:hover .pj-pic img{transform:scale(1.03)}
.pj-pic figcaption,.pj-pic.is-empty{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 12px;color:#fff;
  background:linear-gradient(0deg,rgba(12,12,14,.9) 0%,rgba(12,12,14,.5) 60%,rgba(12,12,14,0) 100%)}
.pj-pic.is-empty{position:relative;height:100%;display:flex;align-items:flex-end}
.pj-pic b{display:block;font-size:var(--s-lead);font-weight:600;line-height:1.15}
.pj-pic span{display:block;margin-top:4px;font-size:var(--s-small);color:rgba(255,255,255,.82)}
.pj-body{padding:14px 16px 18px;display:grid;gap:10px}
.pj-body p{margin:0;font-size:var(--s-small)}
.pj .owner-review{margin:4px 0 0}
.pj .owner-review blockquote{font-size:var(--s-body)}
.pjs-acts{margin-top:20px}
@media (max-width:759px){
  /* phone, several projects: one row of cards swiped sideways */
  .pjs-list.is-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);scrollbar-width:none}
  .pjs-list.is-row::-webkit-scrollbar{display:none}
  .pjs-list.is-row .pj{flex:0 0 84vw;scroll-snap-align:start}
  /* a short strip on the phone: the photo is a hint, the text and the review carry the card */
  .pj-pic{aspect-ratio:2/1}
  .pj-pic figcaption{padding:28px 14px 10px}
}

/* the owner's review next to a case: a quote with a red rule, the name under it */
.owner-review{grid-column:1 / -1;margin:24px 0 0;padding:4px 0 4px 18px;border-left:3px solid var(--brand);max-width:60ch}
.owner-review blockquote{margin:0;font-size:var(--s-lead);line-height:1.3;font-weight:500}
.owner-review figcaption{margin-top:10px;font-size:var(--s-small);color:var(--muted)}
.owner-review figcaption strong{color:var(--ink)}

/* ---------- „С какво мога да ти помогна?“ ---------- */
.help-sec{padding-block:clamp(44px,5.5vw,80px)}
.help-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:12px;align-items:end;margin-bottom:28px}
.help-head h2{grid-column:1 / span 7;font-size:var(--s-head);line-height:1}
.help-head p{grid-column:8 / span 5;max-width:40ch}
.help-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.help-item{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;min-height:160px;padding:20px 18px 50px;background:var(--surface);color:var(--ink);text-decoration:none;
  transition:background-color var(--t-hover) ease,color var(--t-hover) ease}
.help-item b{font-weight:600;font-size:var(--s-lead);line-height:1.12}
.help-item span{font-size:var(--s-small);color:var(--muted)}
.help-go{position:absolute;left:20px;bottom:18px;font-style:normal;font-weight:700;color:var(--red-ui);transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .help-item:hover{background:var(--field);color:var(--field-ink)}
  .help-item:hover span{color:var(--field-muted)}
  .help-item:hover .help-go{transform:translateX(6px)}
}
.help-item:focus-visible{outline:2px solid var(--red-ui);outline-offset:2px}
.help-other{margin-top:20px}

/* ---------- social profiles (only when real URLs exist) ---------- */
.social{padding-block:var(--gap-section) 0}
.social-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:6px}
.social-item{display:flex;flex-direction:column;gap:8px;height:100%;padding:24px 22px;background:var(--field);text-decoration:none;color:var(--field-ink);
  transition:background-color var(--t-hover) ease}
.social-item b{font-size:var(--s-lead);font-family:var(--serif);font-weight:600}
.social-item b small{font:600 var(--s-small) var(--sans);color:var(--field-muted);margin-left:6px}
.social-item span{font-size:var(--s-small);font-weight:700}
.social-item .arrow{color:var(--red-ui)}
@media (hover:hover) and (pointer:fine){.social-item:hover{background:#000}.social-item:hover .arrow{transform:translateX(6px)}}
.case{display:grid;grid-template-columns:1fr 1fr}
.case .panel{position:relative;min-height:60svh;overflow:clip;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,3vw,40px) var(--m)}
.case .p1{background:var(--surface)} .case .p2{background:var(--surface-2)}
.case .obj{position:absolute;left:50%;top:0;width:min(100%,640px);transform:translate(-50%,-14%);pointer-events:none}
.case .photo{position:absolute;inset:0 0 auto 0;height:72%}
.case .photo img{width:100%;height:100%;object-fit:cover}
/* with a real photo the panel is the photo: the title, the text and the buttons sit on it over a dark fade */
.case .panel.has-photo .photo{height:100%}
.case .panel.has-photo .photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,12,14,.9) 0%,rgba(12,12,14,.55) 32%,rgba(12,12,14,0) 60%)}
.case .panel.has-photo .row{color:#fff;z-index:1}
.case .panel.has-photo .row p{color:rgba(255,255,255,.86)}
.case .row{position:relative;display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;min-height:104px}
.case .row h3{font:700 var(--s-body)/1.2 var(--sans);margin-bottom:4px}
.case .row p{max-width:32ch}
.case .acts{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- many into one ---------- */
.many{padding-top:var(--gap-section)}
.many-top{row-gap:20px;align-items:end}
.many-top h2{grid-column:1 / span 5;font-size:var(--s-head);line-height:1}
.many-top p{grid-column:7 / span 5;max-width:46ch}
/* „От работата“: a dark strip of 4:5 photos that runs off the right edge, so it reads as something to swipe */
.work{background:var(--field);padding-block:clamp(28px,3.5vw,56px)}
.work-strip{display:flex;gap:clamp(10px,1.2vw,18px);margin:0;padding:0 var(--m);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);scrollbar-width:none;cursor:grab}
.work-strip::-webkit-scrollbar{display:none}
.work-strip.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.work-strip li{flex:0 0 clamp(190px,21vw,340px);scroll-snap-align:start}
/* every photo in a frame, like a print in a dark mount (Milen, 2026-10-24) */
.work-strip li{padding:8px;background:#1C1D21;border:1px solid rgba(255,255,255,.1);border-radius:6px}
.work-strip img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;pointer-events:none;border-radius:3px;
  -webkit-mask-image:none!important;mask-image:none!important}
@media (max-width:759px){ .work-strip li{flex-basis:58vw} }
.flow{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gut)}
/* the picture of each step: a tone tile with an ink drawing, red only on the result's seal */
.ill{display:block;width:clamp(72px,6.5vw,100px);aspect-ratio:1;background:var(--surface);color:var(--ink);margin-bottom:16px}
.ill svg{display:block;width:100%;height:100%;overflow:visible}
.ill svg *{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.ill .fill{fill:var(--surface)}
.ill circle.ia-dot{fill:currentColor;stroke:none}
.ill .red{fill:var(--brand);stroke:none}
.ill .on-red{stroke:#fff;stroke-width:3.4}
.ill .ia-swing{transform-origin:30% 75%}
.flow h3{font:700 var(--s-body)/1.25 var(--sans);margin-bottom:8px}
.flow p{max-width:30ch}
.many-cta{margin-top:48px}
.road{margin-top:var(--gap-section);position:relative;overflow:clip;aspect-ratio:21/8;background:#9BA8B3}
.road img{width:100%;height:118%;object-fit:cover;object-position:50% 70%}
.road figcaption{position:absolute;left:var(--m);bottom:clamp(16px,2.4vw,32px);max-width:36ch;background:var(--bg);padding:14px 18px;font-size:var(--s-small)}
.road figcaption strong{display:block;font-size:var(--s-body)}

/* ---------- passport (live) ---------- */
.pass{padding-block:var(--gap-section);row-gap:40px}
.pass-l{grid-column:1 / span 5}
.pass-l h2{font-size:var(--s-head);line-height:1}
.pass-l>p{margin-top:18px;max-width:40ch}
.pf{margin-top:28px;display:grid;grid-template-columns:2fr 1fr;gap:12px}
.pf label{display:block;font-size:var(--s-small);font-weight:700;margin-bottom:6px}
.pf input{width:100%;min-height:44px;border:0;border-radius:var(--radius);background:var(--surface);color:var(--ink);font:500 var(--s-body) var(--sans);padding:0 14px}
.pf input:focus{background:#fff}
.pass-note{margin-top:22px;font-size:var(--s-small);color:var(--muted)}
.pass-acts{margin-top:22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ledger{grid-column:7 / span 6;background:var(--surface);padding:clamp(24px,3vw,44px);align-self:start}
.ledger-car{font-family:var(--serif);font-weight:600;font-size:var(--s-lead);line-height:1.15}
.ledger-car span{color:var(--muted);font-weight:500}
.ledger table{width:100%;margin-top:20px;border-collapse:collapse;text-align:left}
.ledger th{font-size:var(--s-small);font-weight:700;color:var(--muted);padding:0 12px 10px 0;border-bottom:2px solid var(--ink)}
.ledger td{padding:12px 12px 12px 0;vertical-align:top;border-bottom:1px solid var(--line)}
.ledger td:first-child{font-weight:700;width:30%}
.ledger .fresh{animation:ink 520ms var(--ease-out)}
/* „Повече спокойствие…“ — its own block across the section: a heading and three reasons side by side */
.calm{grid-column:1 / -1;margin-top:clamp(24px,4vw,56px)}
.calm-h{font-size:var(--s-head);line-height:1;max-width:20ch}
.calm-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.calm-list li{padding-top:18px;border-top:2px solid var(--ink)}
.calm-list h4{font:700 var(--s-body)/1.3 var(--sans);margin:0 0 8px}
.calm-list p{max-width:42ch}
@media (max-width:759px){.calm-list{grid-template-columns:1fr;gap:24px}}

/* ---------- about: two columns, highlighted words ---------- */
.about{background:var(--field);color:var(--field-ink);padding-block:var(--gap-section)}
.about h2{font-size:var(--s-head);line-height:1;margin-bottom:28px}
.about .story{columns:2;column-gap:var(--gut);font-family:var(--serif);font-weight:500;font-size:var(--s-lead);line-height:1.3;color:var(--field-muted)}
.about .story strong{color:var(--field-ink);font-weight:600}
.hl{background:var(--field-hl);color:var(--field-ink);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl-b{background:var(--field-hl-2)}
.about .story a{background:var(--red-ui);color:#fff;font-family:var(--sans);font-weight:700;font-size:.82em;padding:.1em .3em;text-decoration:none;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color var(--t-hover) ease}
.about .story a:hover{background:var(--red-ui-hover)}
.about .more{margin-top:36px}
.about .more .link{color:var(--field-ink)}
.about.has-pic .wrap{row-gap:40px;align-items:start}
.about-pic{grid-column:1 / span 3;margin:0;position:sticky;top:96px}
.about-pic img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.about-txt{grid-column:6 / span 7}
.about.has-pic .story{columns:1}

/* ---------- faq: a band per question ---------- */
.faq-head{background:var(--surface-2);display:flex;align-items:flex-end;padding:clamp(28px,4vw,56px) var(--m) 24px}
.faq-head h2{font-size:var(--s-head);line-height:1;max-width:14ch}
.faq-head.has-bg{min-height:clamp(200px,32svh,340px);color:var(--field-ink)}
.qa{padding:clamp(18px,2.4vw,32px) var(--m)}
.qa h3{margin:0}
.qa p{margin:0}
.qa:nth-child(odd){background:var(--bg)} .qa:nth-child(even){background:var(--surface)}
.qa h3{grid-column:1 / span 5;font-family:var(--serif);font-weight:600;font-size:var(--s-lead);line-height:1.15}
.qa p{grid-column:7 / span 6;max-width:52ch}

/* ---------- the талон (quick inquiry) ---------- */
.talon-wrap{padding-block:var(--gap-section)}
.talon{position:relative;margin-inline:auto;max-width:1180px;background:var(--red-deep);color:#fff;display:grid;grid-template-columns:46fr 54fr}
.talon .tl{padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.talon h2{font-size:var(--s-head);line-height:1}
.talon .tl p{max-width:34ch;font-size:var(--s-small)}
.talon a{color:#fff}
.talon form{padding:clamp(20px,3vw,40px);display:grid;gap:8px}
.perf{position:absolute;left:46%;top:0;bottom:0;width:0}
.perf::before,.perf::after{content:"";position:absolute;left:-14px;width:28px;height:28px;border-radius:50%;background:var(--bg)}
.perf::before{top:-14px} .perf::after{bottom:-14px}
.perf i{position:absolute;left:-2px;top:26px;bottom:26px;border-left:5px dotted var(--bg)}
.tfield{position:relative}
.tfield label{display:block;font-size:13px;font-weight:700;margin-bottom:3px}
.tfield input[type=text],.tfield input[type=tel],.tfield input[type=email],.tfield select,.tfield textarea{width:100%;min-height:44px;border:0;border-radius:var(--radius);background:var(--coupon-in);color:var(--ink);font:500 var(--s-body) var(--sans);padding:0 14px}
.tfield textarea{min-height:76px;padding:12px 14px;resize:vertical;display:block}
.tfield .help{font-size:var(--s-small);margin:-2px 0 6px;opacity:.9}
.talon .em-opt{color:inherit;opacity:.8}
.tfield select{appearance:none;-webkit-appearance:none}
.tfield.sel::after{content:"▾";position:absolute;right:16px;bottom:12px;color:var(--ink);pointer-events:none}
.tcheck{display:flex;gap:10px;align-items:flex-start;font-size:var(--s-small);font-weight:600;line-height:1.45;margin-top:4px}
.tcheck input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.talon :focus-visible{outline-color:#fff}
.talon .err{display:none;font-size:var(--s-small);font-weight:700;margin-top:4px}
.talon .err.show{display:block}
.talon button{margin-top:6px;width:100%;min-height:44px}
.talon .status{font-size:var(--s-small);font-weight:600;display:none}
.talon .status.show{display:block}
.talon .status .btn{margin-top:10px;width:auto;min-height:44px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* taste-skill-ignore: honeypot, never visible */
.alt{margin-top:22px;text-align:center;font-size:var(--s-small)}

/* ---------- who it's for ---------- */
.who{padding-top:var(--gap-section)}
.who h2{font-size:var(--s-head);line-height:1;margin-bottom:28px}
.who-list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gut)}
.who-list>li{padding:24px 0 26px;display:grid;gap:10px;align-content:start}
.who-list h3{font-size:var(--s-lead);line-height:1.15;max-width:22ch}
.who-list p{max-width:44ch}
.who-points{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:44ch}
.who-points li{position:relative;padding:0 0 0 22px;font-size:var(--s-small);font-weight:600;display:block}
.who-points li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--brand)}
/* with the night Camaro behind it: white text on the dark fade */
.who.has-bg{padding-block:clamp(72px,10vw,160px) clamp(40px,5vw,72px);color:var(--field-ink)}
.who.has-bg .who-list p{color:rgba(236,236,234,.84)}
.who.has-bg .link{color:var(--field-ink)}
.who.has-bg .bg-ph::after{background:linear-gradient(0deg,rgba(12,12,14,.94) 0%,rgba(12,12,14,.8) 55%,rgba(12,12,14,.45) 100%)}
/* phone: a tall list on a wide night photo would show only dark sky — the photo is a block on top instead */
@media (max-width:759px){
  .who.has-bg{background:var(--field);padding-top:calc(40svh + 20px)}
  .who.has-bg .bg-ph{bottom:auto;height:40svh}
  .who.has-bg .bg-ph::after{background:linear-gradient(0deg,var(--field) 0%,rgba(17,18,20,.6) 22%,rgba(17,18,20,0) 55%)}
}

/* ---------- where I work ---------- */
.where{padding-block:var(--gap-section) 0;row-gap:28px}
.where h2{grid-column:1 / -1;font-size:var(--s-head);line-height:1}
.where-cols{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.where-cols>div{background:var(--surface);padding:clamp(22px,2.4vw,36px)}
.where-cols>div:first-child{background:var(--field);color:var(--field-ink)}
.where-cols h3{font-family:var(--serif);font-weight:600;font-size:var(--s-lead);margin-bottom:10px}
.where-cols .link,.where-cols a{font-weight:700}
.times{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:24px}
.times dt{font-size:var(--s-small);color:var(--muted);font-weight:600}
.times dd{margin:0;font-weight:700}
.where-times{grid-column:1 / -1;margin-top:0}
/* with the mountain-road photo behind it: white heading, dark glass cards */
.where.has-bg{margin-top:var(--gap-section);padding-block:clamp(72px,10vw,160px) clamp(32px,4vw,56px);color:var(--field-ink)}
.where.has-bg .where-cols>div{background:rgba(17,18,20,.74);color:var(--field-ink)}
.where.has-bg .where-cols>div:first-child{background:rgba(17,18,20,.9)}
.where.has-bg a{color:var(--field-ink)}
.where.has-bg .times dt{color:var(--field-muted)}

/* ---------- reviews ---------- */
.reviews{padding-block:var(--gap-section) 0}
.reviews h2{font-size:var(--s-head);line-height:1;margin-bottom:32px}
.rev-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--gut)}
.rev blockquote{margin:0;font-size:var(--s-lead);line-height:1.3}
.rev figcaption{margin-top:14px;font-size:var(--s-small);color:var(--muted)}
.rev-more{margin-top:24px}

/* ---------- book a call ---------- */
.book{padding-block:var(--gap-section) 0;row-gap:32px;align-items:start}
.book-l{grid-column:1 / span 5}
.book-l h2{font-size:var(--s-head);line-height:1}
.book-l p{margin-top:16px;max-width:40ch}
.book-r{grid-column:7 / span 6;display:grid;gap:22px}
.book-r fieldset{border:0;margin:0;padding:0}
.book-r legend{font-size:var(--s-small);font-weight:700;margin-bottom:8px;padding:0}
.book-days,.book-parts{display:flex;flex-wrap:wrap;gap:8px}
.book-day b{font-weight:700;text-transform:capitalize}
.book-r .btn{justify-self:start}
.book-note{font-size:var(--s-small);color:var(--muted)}
.t-when{font-size:var(--s-small);font-weight:700;background:rgba(255,255,255,.14);padding:10px 12px}

/* ---------- tablet ---------- */
@media (max-width:1023px){
  .sit .info{grid-column:1 / span 8}
  .sit.mirror .info{grid-column:5 / span 8}
  .flow{grid-template-columns:1fr 1fr;row-gap:28px}
  .ledger,.pass-l{grid-column:1 / -1}
  .about .story{columns:1;max-width:40ch}
  .about-pic{grid-column:1 / span 5;position:static}
  .about-txt{grid-column:1 / -1}
  .lead-field h2{grid-column:1 / -1}
  .lead-field p{grid-column:1 / span 8;margin-top:20px}
  .case-title,.case-facts{grid-column:1 / -1}
  .help-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .help-head h2,.help-head p{grid-column:1 / -1}
  .where-cols{grid-template-columns:1fr}
  .book-l,.book-r{grid-column:1 / -1}
}

/* ---------- phone ---------- */
@media (max-width:759px){
  .mvt{--mvt-h:74svh}
  .mvt-copy h2{font-size:clamp(26px,7vw,32px)}
  .mvt-copy p{font-size:var(--s-small)}
  .help-list{grid-template-columns:1fr}
  .help-item{min-height:0;padding:18px 18px 18px;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .help-item b{flex:1 1 calc(100% - 40px)}
  .help-go{position:static;order:-1;flex:none}
  .help-item span{flex:1 1 100%;padding-left:calc(1ch + 14px)}
  .case-facts{grid-template-columns:1fr}
  .case-facts dd{border-top:0;padding-top:0}
  .cover-what{font-size:var(--s-small)}
  .mvt-stage{grid-template-columns:1fr;align-content:center;row-gap:20px}
  .mvt-copy,.mvt-dialwrap{grid-column:1}
  .mvt-stage{align-content:start;row-gap:4px}
  .mvt-dialwrap{order:-1;margin-top:8px}
  .mvt-dial{aspect-ratio:2/1}
  .mvt-copy{padding-top:0}
  /* phone: the picture is anchored to the bottom and cropped to the front of the car; dark above it */
  .mvt-bg img{top:auto;left:-38%;bottom:0;width:136%;height:auto;aspect-ratio:16/9;object-fit:cover;transform-origin:70% 100%} /* a height before it loads, or lazy loading never starts */
  .mvt-bg::after{background:linear-gradient(180deg,#0C0C0E 0%,#0C0C0E 52%,rgba(12,12,14,0) 66%)}
  .mvt-dial{aspect-ratio:2.4/1}
  .mvt-copy h2{font-size:clamp(29px,8vw,38px)}
  .mvt-copy p{margin-top:12px}
  .mvt-dark,.mvt-red{clip-path:circle(0% at 50% 30%)}
  .mvt-dark-h{font-size:clamp(36px,10vw,52px)}
  .sit-photo{grid-row:3;margin-top:24px;width:84%}
  /* the portrait stays a modest picture on the phone (Milen 2026-10-27: it was too big edge to edge) */
  .about-pic{grid-column:1 / -1;width:60%;justify-self:center}
  /* phone: the photo is its own block at the top, fading into the dark field; the copy follows below it */
  .cover{justify-content:flex-start;padding-top:0}
  .cover-pic{position:relative;inset:auto;z-index:0;width:calc(100% + 2 * var(--m));height:38svh;margin:0 calc(var(--m) * -1) -32px;flex:none}
  .cover-pic img{object-position:28% 55%}
  .cover-pic::after{background:linear-gradient(0deg,var(--field) 0%,rgba(17,18,20,0) 40%)}
  .cover > :not(.cover-pic){position:relative;z-index:1}
  .wide{font-size:clamp(44px,13.5vw,64px);letter-spacing:.07em;margin-right:-.07em}
  .cover-row{flex-direction:column;gap:16px;width:100%}
  .who-list{grid-template-columns:1fr}
  .who-list>li{padding:18px 0}
  .book-days .dt-opt{flex:1 1 calc(33% - 8px);justify-content:center;padding:0 8px}
  .book-parts .dt-opt{flex:1 1 calc(50% - 8px)}
  /* phone: the two photos under the statement sit side by side, half width each, the same height */
  .intro{row-gap:20px}
  .intro.g>.plate-a{grid-column:1 / span 6!important;max-width:none;justify-self:stretch}
  .intro.g>.plate-b{grid-column:7 / span 6!important;max-width:none}
  .intro .plate img{aspect-ratio:4/5}
  .intro .plate figcaption{font-size:12px;padding:28px 10px 8px}
  .fields>*{min-height:0;grid-template-columns:1fr}
  .fields>* >*{grid-column:1 !important}
  .sit .info,.sit.mirror .info{grid-row:2;justify-self:start;margin-top:20px}
  .sit h3,.sit.mirror h3{grid-row:1;justify-self:start;text-align:left;font-size:clamp(30px,8.5vw,40px)}
  .case{grid-template-columns:1fr}
  .case .panel{min-height:0;justify-content:flex-start;padding-top:0}
  .case .row{min-height:0}
  .case .obj{position:relative;left:auto;width:100%;transform:none;margin:-14% 0 -4%}
  .case .photo{position:relative;height:auto;aspect-ratio:3/2;margin:0 calc(var(--m) * -1) 16px}
  /* phone, with a real photo: the photo fills the panel and the text sits on it at the bottom */
  .case .panel.has-photo{min-height:min(112vw,520px);justify-content:flex-end;padding-block:0 20px}
  .case .panel.has-photo .photo{position:absolute;inset:0;height:100%;aspect-ratio:auto;margin:0}
  .flow{grid-template-columns:1fr;row-gap:24px}
  .flow-ill li{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:start}
  .flow-ill .ill{width:64px;margin:0}
  .road{aspect-ratio:4/5}
  .road figcaption{right:var(--m)}
  .pf{grid-template-columns:1fr}
  .ledger table,.ledger tbody,.ledger tr,.ledger td{display:block;width:auto}
  .ledger thead{display:none}
  .ledger tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .ledger td{border:0;padding:2px 0}
  .ledger td:first-child{width:auto}
  .qa{display:block}
  .qa h3{font-size:var(--s-body);font-family:var(--sans);font-weight:700;line-height:1.3}
  .qa p{margin-top:4px;font-size:var(--s-small)}
}
@media (max-width:879px){
  .talon{grid-template-columns:1fr}
  .perf{position:relative;left:0;top:auto;bottom:auto;width:100%;height:0}
  .perf::before{left:-14px;top:-14px} .perf::after{left:auto;right:-14px;top:-14px;bottom:auto}
  .perf i{left:26px;right:26px;top:-2px;bottom:auto;border-left:0;border-top:5px dotted var(--bg)}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .cover [data-line]{display:block;transform:translateY(105%);animation:line-up 900ms var(--ease-expo) forwards;animation-delay:calc(260ms + var(--i) * 110ms)}
  .js .cover [data-load]{opacity:0;transform:translateY(14px);animation:rise 560ms var(--ease-out) forwards;animation-delay:var(--d)}
  .js .cover-pic{clip-path:inset(0 0 100% 0);animation:open var(--t-open) var(--ease-in-out) 80ms forwards}
  .js .cover-pic img{transform:scale(1.12);animation:settle 1500ms var(--ease-soft) 80ms forwards}
  /* step pictures: the parts arrive once when the step is revealed; the typing dots and the wrench keep a slow rhythm */
  .js .flow-ill li:not(.is-in) .ill [class*="ia-"]{opacity:0}
  .js .flow-ill li.is-in .ia-l{animation:ill-l 700ms var(--ease-out) both;animation-delay:calc(var(--d,0ms) + var(--ad,150ms))}
  .js .flow-ill li.is-in .ia-r{animation:ill-r 700ms var(--ease-out) both;animation-delay:calc(var(--d,0ms) + var(--ad,150ms))}
  .js .flow-ill li.is-in .ia-up{animation:ill-up 700ms var(--ease-out) both;animation-delay:calc(var(--d,0ms) + var(--ad,150ms))}
  .js .flow-ill li.is-in .ia-pop{animation:ill-pop 600ms var(--ease-expo) both;animation-delay:calc(var(--d,0ms) + var(--ad,150ms))}
  .js .flow-ill li.is-in .ia-dot{animation:ill-blink 1400ms ease-in-out infinite;animation-delay:calc(1000ms + var(--bd,0ms))}
  .js .flow-ill li.is-in .ia-swing{animation:ill-in 400ms var(--ease-out) both,ill-swing 3600ms var(--ease-in-out) infinite;animation-delay:calc(var(--d,0ms) + 150ms),calc(var(--d,0ms) + 600ms)}
  /* situation photo: a mask opens upward while the picture settles */
  .js .sit-photo{transition:clip-path 1100ms var(--ease-in-out) 160ms}
  .js .sit-photo img{transition:transform 1500ms var(--ease-out) 160ms}
  .js .sit-photo:not(.is-in){clip-path:inset(100% 0 0 0)}
  .js .sit-photo:not(.is-in) img{transform:scale(1.12)}
  @supports (animation-timeline:view()){
    .road img{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
/* without motion the scene is an ordinary section: no pin, no dive */
.mvt.is-static,html:not(.js) .mvt{height:auto}
.mvt.is-static .mvt-stage,html:not(.js) .mvt-stage{position:relative;top:0;height:auto;padding-block:var(--gap-section)}
.mvt.is-static .mvt-dark,html:not(.js) .mvt-dark,.mvt.is-static .mvt-red,html:not(.js) .mvt-red,
.mvt.is-static .mk-words,html:not(.js) .mk-words{display:none}
@keyframes drift{from{transform:translateY(-9%)}to{transform:translateY(0)}}
@keyframes ill-l{from{opacity:0;transform:translateX(-14px)}}
@keyframes ill-r{from{opacity:0;transform:translateX(14px)}}
@keyframes ill-up{from{opacity:0;transform:translateY(12px)}}
@keyframes ill-in{from{opacity:0}}
@keyframes ill-pop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes ill-blink{0%,100%{opacity:.25}35%{opacity:1}}
@keyframes ill-swing{0%,45%,100%{transform:rotate(0)}12%{transform:rotate(-26deg)}24%{transform:rotate(4deg)}34%{transform:rotate(-14deg)}}