/* ТОНИ АУТО 81: стилове на сайта.
   Посока: сервизът е показан като витрина на луксозна марка. Топло черно поле, бели букви,
   снимките светят като осветени предмети; цветът на хартиеното тиксо е единственият акцент. */

/* ---------- tokens ---------- */
:root {
  --bg: #0c0a08;
  --surface: #171411;
  --surface-2: #221d19;
  --surface-3: #2f2923;
  --ink: #ffffff;
  --ink-soft: #c9c1b6;
  --muted: #9b948b;
  --accent: #d4ad59;
  --accent-ink: #0c0a08;
  --paper: #e6e3dd;
  --paper-2: #f1f1ef;
  --paper-3: #d4d0c8;
  --paper-ink: #15110d;
  --paper-muted: #5c5750;

  --font-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --font-text: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* six sizes for the whole site */
  --step-small: 0.875rem;                                    /* 14 */
  --step-body: 1.0625rem;                                    /* 17 */
  --step-lead: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem);     /* 20-24 */
  --step-statement: clamp(1.375rem, 1rem + 1.45vw, 2.25rem); /* 22-36 */
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);            /* 32-64 */
  --step-display: clamp(2.5rem, 1rem + 6.4vw, 7.25rem);      /* 40-116, home wordmark */
  --step-display-s: clamp(2.1rem, 1rem + 4.5vw, 5.25rem);    /* 34-84, page titles */

  --margin: clamp(1.25rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(6rem, 12vw, 12rem);
  --header: 4rem;
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-padding-top: calc(var(--header) + 1rem); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
ul[role="list"], ol[role="list"], ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 200; background: var(--paper); color: var(--paper-ink); padding: 0.7rem 1rem; text-decoration: none; }
.skip:focus { top: 0.5rem; }
[hidden] { display: none !important; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: inherit; text-wrap: balance; hyphens: none; }
.display { font-family: var(--font-display); font-weight: 800; font-size: var(--step-display-s); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.display--xl { font-size: min(10.1vw, 10rem); }
.head { font-family: var(--font-display); font-weight: 800; font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase; }
.lead { font-size: var(--step-lead); line-height: 1.38; max-width: 36ch; text-wrap: pretty; }
.small { font-size: var(--step-small); line-height: 1.5; }
.muted { color: var(--muted); }
.nums { font-variant-numeric: tabular-nums; }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 3rem; padding: 0 1.4rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); font-weight: 600; font-size: var(--step-body); line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button[disabled] { opacity: 0.4; cursor: not-allowed; }
.button--ghost { background: var(--surface-2); color: var(--ink); }
.button--ink { background: var(--paper-ink); color: var(--paper); }
.button--small { min-height: 2.6rem; padding: 0 1.1rem; }
.button--bar { min-height: 2.5rem; padding: 0 1rem; }
.link { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.link--muted { color: var(--muted); }
.link-arrow { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.08em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color var(--t-hover) ease; }
button.link, button.link-arrow { font-size: inherit; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #e6c170; }
  .button--ghost:hover { background: var(--surface-3); }
  .button--ink:hover { background: #2b241d; }
  .link:hover, .link-arrow:hover { text-decoration-color: currentColor; }
}
.field { display: block; width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem; background: var(--paper-2); color: var(--paper-ink); border: 0; border-radius: var(--radius); font-size: max(1rem, 16px); }
.field::placeholder { color: var(--paper-muted); }
.field--dark { background: var(--surface-2); color: var(--ink); }
.field--dark::placeholder { color: var(--muted); }
select.field { appearance: none; background-image: none; padding-right: 2.5rem; }

/* ---------- layout ---------- */
.section { padding: calc(var(--section) / 2) var(--margin); }
main > section:first-child { padding-top: clamp(2rem, 6vw, 5rem); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--bg); transition: transform 360ms var(--ease-out); }
.site-header.is-hidden { transform: translateY(-100%); }
.bar { height: var(--header); display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); padding: 0 var(--margin); }
.brand { font-family: var(--font-display); font-weight: 800; font-size: var(--step-body); letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; }
.nav { margin-left: auto; display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.nav-link { font-size: var(--step-body); font-weight: 500; text-decoration: none; padding: 0.4rem 0; color: var(--ink-soft); transition: color var(--t-hover) ease; }
.nav-link[aria-current="page"], .nav-link.is-current, .nav-services[aria-expanded="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.45em; text-decoration-thickness: 2px; }
.menu-btn { display: none; margin-left: auto; min-height: 2.75rem; padding: 0 1rem; background: var(--surface-2); font-weight: 600; }
.menu-btn-close { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn-open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn-close { display: inline; }
@media (hover: hover) and (pointer: fine) { .nav-link:hover { color: var(--ink); } }

.menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); padding: 2rem var(--margin) 2.5rem; opacity: 0; transform: translateY(-0.5rem); transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
.menu.is-open { opacity: 1; transform: none; }
.menu-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.menu-services a { display: grid; gap: 0.35rem; text-decoration: none; }
.menu-thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 0.6rem; transition: transform 600ms var(--ease-out); }
.menu-services a { overflow: hidden; }
.menu-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1.15; }
.menu-sub { color: var(--muted); font-size: var(--step-small); }
.menu-services a[aria-current="page"] .menu-name { color: var(--accent); }
.menu-extra, .menu-contact { display: none; }
@media (hover: hover) and (pointer: fine) { .menu-services a:hover .menu-thumb { transform: scale(1.04); } .menu-services a:hover .menu-name { color: var(--accent); } }

/* ---------- home hero: the booth, full screen, four stages ---------- */
.page-home .site-header { background: transparent; transition: transform 360ms var(--ease-out), background-color 300ms ease; }
.page-home .site-header.is-solid, .page-home .site-header.menu-open { background: var(--bg); }
.hero-full { position: relative; z-index: 0; isolation: isolate; height: 100svh; min-height: 36rem; margin-top: calc(-1 * var(--header)); overflow: hidden; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: end; align-items: end; padding: 0 var(--margin) clamp(1.75rem, 5svh, 3.5rem); color: var(--ink); }
main > .hero-full:first-child { padding-top: 0; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--surface); }
.stage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; transition: opacity 1600ms ease; }
.stage.is-active { opacity: 1; }
/* taste-skill-ignore: neutral scrim under the text on the photograph */
.hero-full::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(12, 10, 8, 0.95) 0%, rgba(12, 10, 8, 0.78) 26%, rgba(12, 10, 8, 0.2) 56%, rgba(12, 10, 8, 0) 70%), linear-gradient(to bottom, rgba(12, 10, 8, 0.72) 0, rgba(12, 10, 8, 0.35) 5rem, rgba(12, 10, 8, 0) 11rem); } /* taste-skill-ignore */
.wordmark { grid-column: 1 / -1; margin-bottom: clamp(0.25rem, 1svh, 0.75rem); }
.hero-copy { grid-column: 1 / 9; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance; }
.hero-line { margin-top: 0; font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; color: var(--paper); text-wrap: balance; }
.hero-actions { margin-top: clamp(1.25rem, 3.2svh, 2rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.hero-spec { color: var(--paper); }
.button--hero { background: var(--paper); color: var(--paper-ink); min-height: 3.25rem; padding: 0 1.6rem; }
@media (hover: hover) and (pointer: fine) { .button--hero:hover { background: #fff; } }
.hero-stages { grid-column: 9 / 13; align-self: end; }
.hero-stages-cap { margin-bottom: 0.65rem; font-size: var(--step-small); color: var(--paper); }
.counter-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--paper); }
.counter-tab { position: relative; overflow: hidden; min-height: 3rem; padding: 0.5rem 0.25rem; font-size: var(--step-small); font-weight: 600; color: var(--paper-muted); transition: color var(--t-hover) ease; }
.counter-tab[aria-pressed="true"] { color: var(--paper-ink); }
.tab-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.counter-tab[aria-pressed="true"] .tab-fill { transform: scaleX(1); }
.tab-label { position: relative; }
@media (hover: hover) and (pointer: fine) { .counter-tab:hover { color: var(--paper-ink); } }

/* ---------- under one roof: one big picture, the words, a clip and a detail ---------- */
.intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--gutter); row-gap: clamp(2rem, 4vw, 3rem); }
.intro-big { grid-column: 1 / 8; grid-row: 1 / 3; display: flex; flex-direction: column; min-height: min(86svh, 54rem); }
.intro-big-media { position: relative; flex: 1; overflow: clip; background: var(--surface); }
.intro-big-media img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }
.intro figcaption { margin-top: 0.6rem; font-size: var(--step-small); color: var(--ink-soft); }
.intro-copy { grid-column: 8 / 13; grid-row: 1; align-self: start; padding-top: clamp(0rem, 3vw, 2.5rem); }
.intro-copy .lead { margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.intro-copy p + p { margin-top: 1rem; color: var(--ink-soft); }
.intro-pair { grid-column: 8 / 13; grid-row: 2; align-self: end; display: grid; grid-template-columns: 2fr 3fr; gap: 12px; }
.intro-pair video, .intro-pair img { display: block; width: 100%; height: clamp(15rem, 40svh, 25rem); object-fit: cover; background: var(--surface); }

/* ---------- showcase with work-order slips ---------- */
.showcase { position: relative; height: 96svh; min-height: 46rem; overflow: hidden; color: var(--paper); }
.showcase-bg { position: absolute; inset: 0; overflow: clip; }
.showcase-bg img { width: 100%; height: 112%; object-fit: cover; filter: brightness(0.7); will-change: transform; }
.showcase-copy { position: absolute; top: clamp(4rem, 11svh, 7rem); left: 18%; max-width: 34rem; padding: 1.75rem 2rem 2rem; background: rgba(12, 10, 8, 0.78); }
.showcase-copy .lead { margin-top: 1rem; color: var(--paper); }
.slips { position: absolute; left: var(--margin); right: var(--margin); bottom: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; }
.slip-wrap { height: max(15rem, calc(var(--h) * 1svh)); transform-origin: 50% 100%; }
.slip-wrap:nth-child(1) { --h: 38; }
.slip-wrap:nth-child(2) { --h: 30; rotate: -1.6deg; }
.slip-wrap:nth-child(3) { --h: 44; }
.slip-wrap:nth-child(4) { --h: 33; rotate: 1.2deg; }
.slip-wrap:nth-child(5) { --h: 27; }
.slip-wrap:nth-child(6) { --h: 40; rotate: -0.9deg; }
.slip { display: flex; flex-direction: column; gap: 0.2rem; height: calc(100% + 2rem); padding: 1.1rem 1rem 3rem; background: var(--paper); color: var(--paper-ink); font-size: var(--step-small); line-height: 1.45; text-decoration: none; transition: transform 420ms var(--ease-out), background-color var(--t-hover) ease; }
.slip-wrap:nth-child(3) .slip { background: var(--paper-2); }
.slip-title { font-weight: 700; font-size: var(--step-body); }
.slip-cut { color: var(--paper-muted); white-space: nowrap; overflow: hidden; letter-spacing: 0.08em; }
.slip-line { color: var(--paper-ink); }
.slip-more { margin-top: 0.6rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .slip:hover { transform: translateY(-0.9rem); background: #fff; } }

/* ---------- from damage to shine: three photo panels stepping down ---------- */
.steps-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(2.5rem, 5vw, 4rem); align-items: end; }
.steps-head { grid-column: 1 / 7; }
.steps-intro { grid-column: 8 / 13; }
.steps-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.step-panel:nth-child(2) { margin-top: clamp(2rem, 9svh, 6rem); }
.step-panel:nth-child(3) { margin-top: clamp(4rem, 18svh, 12rem); }
.step-link { position: relative; display: block; height: clamp(26rem, 68svh, 42rem); overflow: hidden; color: var(--paper); text-decoration: none; background: var(--surface); }
.step-media { position: absolute; inset: 0; overflow: clip; transition: transform 900ms var(--ease-out); }
.step-media img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }
/* taste-skill-ignore: neutral scrim under the text on the photograph */
.step-link::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(12, 10, 8, 0.94) 0%, rgba(12, 10, 8, 0.6) 32%, rgba(12, 10, 8, 0) 58%); } /* taste-skill-ignore */
.step-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 0.75rem; padding: clamp(1.25rem, 2.2vw, 2rem); }
.step-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-statement); line-height: 1; letter-spacing: -0.03em; transition: color var(--t-hover) ease; }
.step-text { max-width: 32ch; margin: 0; }
.step-more { justify-self: start; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 0.08em; }
@media (hover: hover) and (pointer: fine) { .step-link:hover .step-media { transform: scale(1.05); } .step-link:hover .step-name { color: var(--accent); } }
.step-link:active .step-media { transform: scale(1.02); }

/* ---------- tiles with label strips ---------- */
.work-head, .g-group-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2.5rem; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 12px; }
.tile { display: flex; flex-direction: column; width: 100%; text-align: left; cursor: zoom-in; color: inherit; }
.tile-img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.tile-img img, .tile-img video { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.tile-play { position: absolute; left: 50%; top: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border-radius: 50%; background: rgba(12, 10, 8, 0.75); }
.tile-play::after { content: ''; position: absolute; left: 1.55rem; top: 1.25rem; width: 1.3rem; height: 1.5rem; background: var(--paper); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tile-tag { display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; min-height: 5.25rem; padding: 0.75rem; font-size: var(--step-small); line-height: 1.3; font-variant-numeric: tabular-nums; }
.tag-row { display: flex; justify-content: space-between; gap: 0.4rem; }
.tag-model { font-family: var(--font-display); font-weight: 600; font-size: var(--step-small); line-height: 1.15; }
.tag-a .tile-tag { background: var(--paper); color: var(--paper-ink); }
.tag-b .tile-tag { background: var(--accent); color: var(--accent-ink); }
.tag-c .tile-tag { background: var(--surface-2); color: var(--ink); }
.tag-d .tile-tag { background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile-img img { transform: scale(1.05); } }
.tile:active .tile-img img { transform: scale(1.02); }

/* ---------- coupon ---------- */
.coupon-sec { padding-top: clamp(5rem, 9vw, 8rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
.coupon { position: relative; display: grid; grid-template-columns: 46fr 54fr; width: min(100%, calc(100% * 10 / 12)); margin-inline: auto; background: var(--paper); color: var(--paper-ink); }
.notch { position: absolute; left: 46%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--bg); }
.notch--t { top: -14px; }
.notch--b { bottom: -14px; }
.coupon-left { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(1.75rem, 3.4vw, 3rem); border-right: 5px dotted var(--bg); }
.coupon-title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-statement); line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase; }
.coupon-left p { max-width: 36ch; }
.coupon-right { display: flex; flex-direction: column; gap: 10px; padding: clamp(1.75rem, 3.4vw, 3rem); }
.coupon-submit { min-height: 3.5rem; background: var(--paper-ink); color: var(--paper); font-weight: 600; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.coupon-submit:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .coupon-submit:hover { background: #2b241d; } }
.coupon-alt { margin-top: 0.35rem; font-size: var(--step-small); color: var(--paper-muted); }
.coupon-alt .link { color: var(--paper-ink); }

/* ---------- footer ---------- */
.site-footer { background: var(--surface); padding: clamp(4rem, 8vw, 7rem) var(--margin) 2.5rem; }
.blockmark-link { display: block; text-decoration: none; }
.blockmark { display: flex; align-items: flex-end; gap: 4px; height: max(14rem, 34svh); }
.blk { flex: 1 1 0; height: calc(var(--hn) * 100%); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; transform-origin: 50% 100%; }
.blk span { font-family: var(--font-display); font-weight: 800; font-size: var(--step-display-s); line-height: 0.78; color: var(--surface); transform: translateY(0.04em); }
.blk-gap { flex: 0 0 1.6vw; }
.page-home .blk span { font-size: var(--step-display); }
.b1 { background: var(--paper); }
.b2 { background: var(--surface-3); }
.b2 span { color: var(--bg); }
.b3 { background: var(--accent); }
.b4 { background: var(--ink); }
.footer-grid { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 2rem var(--gutter); }
.fhead { font-family: var(--font-text); font-weight: 600; font-size: var(--step-small); color: var(--muted); margin-bottom: 0.9rem; }
.fcol ul { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.fcol p + p { margin-top: 0.5rem; }
.footer-phone { font-family: var(--font-display); font-weight: 800; font-size: var(--step-lead); text-decoration: none; letter-spacing: -0.01em; }
.footer-hours { margin-top: 0.9rem !important; color: var(--ink-soft); }
.footer-last { margin-top: 3.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: var(--step-small); color: var(--muted); }

.quickbar { display: none; }
.toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 120; max-width: min(28rem, calc(100vw - 2rem)); padding: 0.9rem 1.1rem; background: var(--paper); color: var(--paper-ink); font-size: var(--step-small); opacity: 0; transform: translate(-50%, 1rem); pointer-events: none; transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- service pages ---------- */
.s-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: center; min-height: calc(100svh - var(--header)); padding: clamp(2rem, 5vw, 4rem) var(--margin) clamp(3rem, 6vw, 5rem); }
.s-hero-copy { grid-column: 1 / 8; }
.s-hero-copy .lead { margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.s-hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.s-hero-media { grid-column: 8 / 13; }
.frame { position: relative; overflow: hidden; background: var(--surface); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall { aspect-ratio: 5 / 6; max-height: 76svh; margin-left: auto; }
.frame figcaption { padding-top: 0.6rem; font-size: var(--step-small); color: var(--ink-soft); }
.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem var(--gutter); }
.facts div { background: var(--surface); padding: 1.1rem 1.25rem; }
.facts dt { font-size: var(--step-small); color: var(--muted); }
.facts dd { margin-top: 0.25rem; font-weight: 500; }

.why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
.why-copy { grid-column: 1 / 7; }
.why-copy .claims { margin-top: 2.5rem; grid-template-columns: 1fr; }
.why-photos { grid-column: 8 / 13; display: grid; gap: 1.5rem; align-content: start; }
.why-photos .frame { overflow: visible; background: none; }
.why-photos .frame img { aspect-ratio: 4 / 3; height: auto; }

.claims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--gutter); }
.claims--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.75rem; }
.claim dt { font-weight: 600; font-size: var(--step-lead); line-height: 1.25; }
.claim dd { margin: 0.45rem 0 0; max-width: 40ch; }

.rent { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: start; background: var(--surface); padding-top: calc(var(--section) / 2.4); padding-bottom: calc(var(--section) / 2.4); }
.rent-copy { grid-column: 1 / 6; }
.rent-copy > p { margin-top: 1.25rem; }
.ticks { margin: 1.5rem 0; display: grid; gap: 0.6rem; }
.ticks li { padding-left: 1.4rem; position: relative; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 0.6rem; background: var(--accent); }
.booth { grid-column: 7 / 13; display: grid; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); color: var(--paper-ink); }
.booth-label { display: block; margin-bottom: 0.65rem; font-weight: 600; font-size: var(--step-small); color: var(--paper-muted); }
.booth-days { display: flex; flex-wrap: wrap; gap: 8px; }
.day { display: grid; min-width: 4.75rem; padding: 0.55rem 0.7rem; background: var(--paper-2); text-align: left; line-height: 1.25; font-size: var(--step-small); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.day b { font-weight: 600; }
.day:active { transform: scale(0.96); }
.day[aria-pressed="true"] { background: var(--paper-ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .day:hover:not([aria-pressed="true"]) { background: #fff; } }
.stepper { display: inline-flex; align-items: stretch; }
.step-btn { width: 3rem; min-height: 3rem; background: var(--paper-2); font-size: 1.4rem; line-height: 1; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.step-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .step-btn:hover { background: #fff; } }
.step-val { display: grid; place-items: center; min-width: 8rem; font-weight: 600; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0 1rem; background: var(--paper-2); font-size: var(--step-small); font-weight: 500; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.seg input:checked + span { background: var(--paper-ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg--dark span { background: var(--surface-2); color: var(--ink); }
.seg--dark input:checked + span { background: var(--paper); color: var(--paper-ink); }
.msg { min-height: 5.5em; padding: 1rem 1.1rem; background: var(--surface); color: var(--ink); line-height: 1.5; max-width: none; white-space: pre-line; }
.msg--paper { background: var(--paper-2); color: var(--paper-ink); }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.send .link { font-size: var(--step-body); }

.clip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: center; }
.clip-frame { grid-column: 2 / 6; justify-self: center; width: min(100%, 22rem); aspect-ratio: 9 / 16; overflow: hidden; background: var(--surface); }
.clip-video { width: 100%; height: 100%; object-fit: cover; }
.clip-copy { grid-column: 7 / 12; }
.clip-copy p { margin-top: 1.25rem; }

.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; }
.faq .head { grid-column: 1 / 5; }
.faq-list { grid-column: 5 / 13; display: grid; gap: 8px; }
.qa { background: var(--surface); }
.qa summary { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.4rem; cursor: pointer; list-style: none; font-weight: 600; line-height: 1.35; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; flex: none; color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform var(--t-ui) var(--ease-out); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 1.4rem 1.4rem; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .qa summary:hover { color: var(--accent); } }

.cta-band { padding: clamp(5rem, 10vw, 9rem) var(--margin); background: var(--surface); text-align: center; }
.cta-line { margin-inline: auto; font-size: var(--step-lead); color: var(--ink-soft); }
.cta-phone { display: inline-block; margin-top: 1rem; font-family: var(--font-display); font-weight: 800; font-size: var(--step-display-s); line-height: 1; letter-spacing: -0.04em; text-decoration: none; white-space: nowrap; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .cta-phone:hover { color: var(--accent); } }
.cta-alt { margin: 2rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; max-width: none; }

/* picker */
.picker { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: start; }
.picker-copy { grid-column: 1 / 7; }
.picker-copy > p { margin-top: 1.25rem; }
.picker-chosen { margin-top: 2rem; display: grid; gap: 1rem; }
.picker-count { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem 0.45rem 0.8rem; background: var(--surface-2); font-size: var(--step-small); }
.chip button { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; background: var(--surface-3); font-size: 1rem; line-height: 1; }
.picker-presets { font-size: var(--step-small); color: var(--ink-soft); }
.picker-fig { grid-column: 8 / 13; display: grid; justify-items: center; gap: 1rem; }
.plan { width: min(100%, 22rem); height: auto; max-height: 76svh; overflow: visible; }
.plan .panel { fill: #574e45; cursor: pointer; transition: fill var(--t-hover) ease; outline: none; }
.plan .panel[aria-checked="true"] { fill: var(--accent); }
.plan .panel:focus-visible { stroke: var(--paper); stroke-width: 3; }
.plan .glass { fill: #26323b; }
@media (hover: hover) and (pointer: fine) { .plan .panel:hover { fill: #7a6e61; } .plan .panel[aria-checked="true"]:hover { fill: #e6c170; } }
.plan-hint { font-size: var(--step-small); color: var(--muted); text-align: center; }

/* boyadisvane hero */
.b-hero { padding: 0 0 clamp(3rem, 6vw, 5rem); }
main > .b-hero:first-child { padding-top: 0; }
.b-hero-media { height: min(50svh, 44vw); overflow: hidden; background: var(--surface); }
.b-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.b-hero-copy { padding: 0 var(--margin); }
.b-hero-copy h1 { margin-top: clamp(1.25rem, 2.5vw, 2rem); white-space: nowrap; }
.b-hero-side { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.b-hero-side .lead { grid-column: 1 / 7; }
.b-hero-side .s-hero-actions { grid-column: 8 / 13; margin-top: 0; justify-content: flex-end; }

/* sticky stages */
.stages { padding: calc(var(--section) / 2) var(--margin); }
.stages-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 3rem; }
.stages-head .head { grid-column: 1 / 7; }
.stages-head p { grid-column: 8 / 13; }
.stages-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.stages-media { grid-column: 1 / 8; position: sticky; top: calc(var(--header) + 4svh); height: calc(100svh - var(--header) - 8svh); overflow: hidden; background: var(--surface); }
.stages-img { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.stages-img.is-active { opacity: 1; }
.stages-img img { width: 100%; height: 100%; object-fit: cover; }
.stages-steps { grid-column: 9 / 13; }
.stage-step { min-height: 78svh; display: flex; flex-direction: column; justify-content: center; opacity: 0.38; transition: opacity 500ms ease; }
.stage-step.is-active { opacity: 1; }
.stage-step:first-child { min-height: 60svh; justify-content: flex-start; padding-top: 10svh; }
.stage-step-img { display: none; }
.stage-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-statement); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1rem; }
.stage-step p { font-size: var(--step-lead); }

/* folio */
.w-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; padding: clamp(2rem, 4vw, 3.5rem) var(--margin) clamp(3rem, 6vw, 5rem); align-items: start; }
.w-hero-copy { grid-column: 1 / 7; grid-row: 1; }
.w-hero-copy .lead { margin-top: 1.5rem; }
.w-stage { grid-column: 7 / 13; grid-row: 1 / span 2; }
.w-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.w-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transition: opacity 700ms ease; }
.w-caption { margin-top: 0.75rem; font-size: var(--step-small); color: var(--ink-soft); max-width: 60ch; }
.w-controls { grid-column: 1 / 7; grid-row: 2; display: grid; gap: 1.5rem; align-self: end; }
.w-controls .booth-label { color: var(--ink-soft); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch:has(input:checked) { outline: 2px solid var(--accent); outline-offset: 3px; }
.swatch:has(input:focus-visible) { outline: 2px solid var(--paper); outline-offset: 3px; }
.swatch:active { transform: scale(0.92); }
.compare { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; }
.compare-head { grid-column: 1 / 5; }
.compare-head p { margin-top: 1.25rem; }
.table-wrap { grid-column: 5 / 13; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--surface-3); }
.compare-table thead th { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-lead); letter-spacing: -0.02em; }
.compare-table tbody th { font-weight: 600; color: var(--ink-soft); width: 28%; }
.decals { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: center; }
.decals-copy { grid-column: 1 / 5; }
.decals-copy p { margin-top: 1.25rem; }
.decals-tiles { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* detayli */
.d-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: center; min-height: calc(100svh - var(--header)); padding: clamp(2rem, 5vw, 4rem) var(--margin); }
.d-hero-copy { grid-column: 1 / 7; }
.d-hero-copy .lead { margin-top: 1.5rem; }
.d-pair { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-shot figcaption, .case-shot figcaption { margin-top: 0.7rem; font-size: var(--step-small); color: var(--ink-soft); }
.case-stage { display: inline-block; margin-right: 0.35rem; font-weight: 600; color: var(--accent); }
.case-btn { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.case-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .case-btn:hover img { transform: scale(1.04); } }
.case { margin-top: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; }
.case-head { grid-column: 1 / 4; }
.case-title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-statement); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.02em; }
.case-head p { margin-top: 1rem; }
.case-row { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.case-row .case-btn { aspect-ratio: 3 / 4; }
.case-btn--43 { aspect-ratio: 4 / 3; }
.onsite-row .case-btn { aspect-ratio: 3 / 4; }
.onsite-row .case-btn video, .onsite-row .case-btn img { width: 100%; height: 100%; object-fit: cover; }
.process-list { margin-top: 2.75rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); }
.process-item { padding: 1.5rem 0 2.25rem; }
.process-item:nth-child(-n+3) { background: none; }
.process-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-lead); letter-spacing: -0.02em; margin-bottom: 0.6rem; color: var(--accent); }
.process-item p { max-width: 34ch; }

/* gallery page */
.g-hero { padding: clamp(2rem, 5vw, 4rem) var(--margin) clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; align-items: end; }
.g-hero h1 { grid-column: 1 / 7; }
.g-hero .lead { grid-column: 7 / 13; }
.filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.filter { min-height: 2.9rem; padding: 0 1rem; background: var(--surface-2); font-weight: 500; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.filter .nums { margin-left: 0.3rem; color: var(--muted); }
.filter[aria-pressed="true"] { background: var(--paper); color: var(--paper-ink); }
.filter[aria-pressed="true"] .nums { color: var(--paper-muted); }
.filter:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .filter:hover:not([aria-pressed="true"]) { background: var(--surface-3); } }
.g-group { padding: clamp(2.5rem, 5vw, 4.5rem) var(--margin); }
.g-note { margin-top: 1.5rem; color: var(--ink-soft); }

/* contact */
.c-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; padding: clamp(2rem, 5vw, 4rem) var(--margin) clamp(3rem, 6vw, 5rem); align-items: start; }
.c-hero-copy { grid-column: 1 / 6; }
.c-hero-copy .lead { margin-top: 1.5rem; }
.c-ways { grid-column: 7 / 13; }
.c-phone { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--step-head); line-height: 1; letter-spacing: -0.04em; text-decoration: none; white-space: nowrap; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .c-phone:hover { color: var(--accent); } }
.c-buttons { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 10px; }
.c-info { margin-top: 2.5rem; display: grid; gap: 8px; }
.c-info > div { background: var(--surface); padding: 1.1rem 1.25rem; display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; }
.c-info dt { color: var(--muted); font-size: var(--step-small); padding-top: 0.15rem; }
.c-info dd { margin: 0; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 22rem; }
.find { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: start; }
.find-copy { grid-column: 1 / 6; }
.find-copy > p { margin-top: 1.25rem; }
.find-buttons { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 10px; }
.find-photo { margin-top: 2rem; }
.find-photo img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.find-photo figcaption { margin-top: 0.6rem; font-size: var(--step-small); color: var(--ink-soft); }
.map { grid-column: 6 / 13; aspect-ratio: 4 / 3; min-height: 26rem; background: var(--surface); }
.map iframe { width: 100%; height: 100%; border: 0; filter: invert(0.9) hue-rotate(180deg) saturate(0.55) contrast(0.92); }

/* on-site strip (contact) */
.onsite { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; }
.onsite-head { grid-column: 1 / 5; }
.onsite-head p { margin-top: 1.25rem; }
.onsite-row { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.onsite-row figure img, .onsite-row figure video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface); }
.onsite-row figcaption { margin-top: 0.6rem; font-size: var(--step-small); color: var(--ink-soft); }
.repair-first { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: center; }
.repair-first .rf-copy { grid-column: 1 / 5; }
.repair-first .rf-copy p { margin-top: 1.25rem; }
.repair-first .rf-photos { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rf-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.rf-photos figcaption { margin-top: 0.6rem; font-size: var(--step-small); color: var(--ink-soft); }
.case-clip { margin-top: 1.5rem; width: min(100%, 13rem); aspect-ratio: 9 / 16; overflow: hidden; background: var(--surface); }
.case-clip video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: rgba(8, 7, 6, 0.97); opacity: 0; transition: opacity 260ms ease; }
.lb.is-open { opacity: 1; }
.lb-stage { position: relative; overflow: hidden; touch-action: pan-y; }
.lb-media { position: absolute; display: block; object-fit: contain; background: var(--surface); transform-origin: 0 0; }
video.lb-media { background: #000; }
.lb-ui { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem 1.5rem; padding: 0.9rem var(--margin) calc(0.9rem + env(safe-area-inset-bottom)); }
.lb-caption { font-size: var(--step-small); }
.lb-caption b { font-weight: 600; }
.lb-count { color: var(--muted); font-size: var(--step-small); }
.lb-controls { display: flex; gap: 6px; }
.lb-btn { min-height: 2.9rem; padding: 0 1rem; background: var(--surface-2); font-weight: 500; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.lb-btn:active { transform: scale(0.96); }
.lb-close { background: var(--paper); color: var(--paper-ink); }
@media (hover: hover) and (pointer: fine) { .lb-btn:hover { background: var(--surface-3); } .lb-close:hover { background: #fff; } }
body.lb-lock { overflow: hidden; }

/* ---------- motion (content stays visible without JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out) calc(var(--i, 0) * 80ms), transform 900ms var(--ease-expo) calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-lines] [data-line] { display: inline-block; transform: translateY(108%); transition: transform 1000ms var(--ease-expo) calc(var(--i, var(--n, 0)) * 95ms + 80ms); }
  .js [data-lines] .line { display: block; overflow: clip; padding-bottom: 0.06em; margin-bottom: -0.06em; }
  .js [data-lines].is-in [data-line] { transform: none; }
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
  .js .hero-full .hero-media { animation: fade-in 1400ms ease both; }
  .hero-full .stage.is-active { animation: kb 7400ms linear both; }
  .js .hero-full .wordmark { animation: track-in 1400ms var(--ease-expo) 250ms both; }
  .js .hero-full .hero-line { animation: rise 900ms var(--ease-out) 500ms both; }
  .js .hero-full .hero-actions { animation: rise 900ms var(--ease-out) 650ms both; }
  .js .hero-full .hero-stages { animation: rise 900ms var(--ease-out) 800ms both; }
  .counter-tab[aria-pressed="true"] .tab-fill { animation: fill var(--hold, 5600ms) linear both; }
  .is-paused .counter-tab[aria-pressed="true"] .tab-fill { animation-play-state: paused; }
  .is-paused .stage.is-active { animation-play-state: paused; }
  .js .step-panel .step-link { clip-path: inset(100% 0 0 0); transition: clip-path 1200ms var(--ease-in-out) calc(var(--i, 0) * 140ms); }
  .js .step-panel.is-in .step-link { clip-path: inset(0); }
  .js .slips .slip-wrap { transform: translateY(70%); transition: transform 1100ms var(--ease-expo) calc(var(--i) * 85ms); }
  .js .slips.is-in .slip-wrap { transform: none; }
  .js .blockmark .blk { transform: scaleY(0.04); transition: transform 1000ms var(--ease-expo) calc(var(--i) * 55ms); }
  .js .blockmark.is-in .blk { transform: none; }
  .js .b-hero-media img { animation: settle 1800ms var(--ease-soft) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kb { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes track-in { from { letter-spacing: 0.28em; opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .menu-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claims--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slip-wrap:nth-child(n+4) { display: none; }
  .case-head { grid-column: 1 / -1; }
  .case-row { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- single column: small tablets and phones ---------- */
@media (max-width: 820px) {
  :root { --header: 3.5rem; }
  .nav { display: none; }
  .bar .button--bar { margin-left: auto; }
  .menu-btn { display: inline-flex; align-items: center; margin-left: 0; }
  .menu { position: fixed; top: var(--header); bottom: 0; overflow-y: auto; padding: 1.5rem var(--margin) 6rem; }
  .menu-services { grid-template-columns: 1fr; gap: 10px; }
  .menu-services a { grid-template-columns: 5.5rem 1fr; column-gap: 1rem; align-items: center; }
  .menu-thumb { grid-row: span 2; margin: 0; aspect-ratio: 4 / 3; }
  .menu-extra { display: grid; gap: 0.25rem; margin-top: 2rem; }
  .menu-extra a { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-statement); text-decoration: none; letter-spacing: -0.02em; }
  .menu-contact { display: flex; gap: 1.5rem; margin-top: 2rem; font-size: var(--step-lead); }

  .hero-full { min-height: 32rem; }
  .stage { object-position: var(--pos-m, 50% 50%); }
  .hero-copy, .hero-stages { grid-column: 1 / -1; }
  .hero-stages { margin-top: 1.5rem; }
  .hero-actions { gap: 0.75rem 1.5rem; }

  .intro-big { min-height: 0; }
  .intro-big-media { flex: none; aspect-ratio: 4 / 5; }
  .intro-copy { margin-top: 2.25rem; padding-top: 0; }
  .intro-pair { margin-top: 2rem; grid-template-columns: 1fr 1fr; gap: 8px; }
  .intro-pair video, .intro-pair img { height: auto; aspect-ratio: 3 / 4; }

  .showcase { height: auto; min-height: 0; padding: 4rem var(--margin) 3rem; }
  .showcase-copy { position: relative; top: auto; left: auto; margin: 0 0 2rem; padding: 1.25rem 1.25rem 1.5rem; }
  .slips { position: relative; left: auto; right: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .slip-wrap, .slip-wrap:nth-child(n+4) { display: block; height: auto; }
  .slip-wrap:nth-child(2) { rotate: -1.2deg; }
  .slip-wrap:nth-child(4), .slip-wrap:nth-child(6) { rotate: 0deg; }
  .slip-wrap:nth-child(5) { rotate: 1deg; }
  .slip { height: auto; padding: 1rem 0.9rem 1.1rem; }

  .steps-intro { margin-top: 1.25rem; }
  .steps-row { margin-top: 2.25rem; grid-template-columns: 1fr; gap: 10px; }
  .step-panel:nth-child(2), .step-panel:nth-child(3) { margin-top: 0; }
  .step-link { height: min(70svh, 34rem); }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
  .tile-tag { min-height: 0; padding: 0.6rem; }
  .tag-row { flex-wrap: wrap; gap: 0.1rem 0.5rem; }
  .tag-row > span:nth-child(n+3) { display: none; }
  .work-head, .g-group-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.75rem; }

  .coupon { grid-template-columns: 1fr; width: 100%; }
  .notch { left: auto; top: auto; bottom: auto; margin: 0; }
  .notch--t { left: -14px; top: var(--split, 13.5rem); margin-top: -14px; }
  .notch--b { right: -14px; top: var(--split, 13.5rem); margin-top: -14px; }
  .coupon-left { border-right: 0; border-bottom: 5px dotted var(--bg); padding: 1.75rem 1.25rem 1.5rem; }
  .coupon-right { padding: 1.5rem 1.25rem 1.75rem; }

  .blockmark { flex-wrap: wrap; height: auto; row-gap: 4px; }
  .blk { height: calc(var(--hn) * 9rem); min-height: 4rem; }
  .blk-break { flex: 0 0 100% !important; height: 0; }
  .blk-gap { flex: 0 0 3vw; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcol--contact { grid-column: 1 / -1; }
  .footer-last { flex-wrap: wrap; }

  .onsite, .repair-first, .s-hero, .d-hero, .w-hero, .c-hero, .why, .rent, .clip, .faq, .picker, .compare, .decals, .find, .g-hero, .intro, .steps-sec, .case, .stages-head, .stages-body { display: block; }
  .s-hero, .d-hero { min-height: 0; }
  .s-hero-media, .d-pair, .why-photos, .booth, .clip-frame, .faq-list, .picker-fig, .table-wrap, .decals-tiles, .map, .c-ways, .case-row, .filters { margin-top: 2rem; }
  .facts { margin-top: 2rem; grid-template-columns: 1fr; gap: 8px; }
  .onsite-row { margin-top: 2rem; grid-template-columns: 1fr 1fr; }
  .rf-photos { margin-top: 2rem; }
  .case-clip { display: none; }
  .frame--tall { aspect-ratio: 4 / 3; max-height: none; }
  .claims, .claims--3 { grid-template-columns: 1fr; gap: 1.5rem; }
  .b-hero-media { height: 52svh; }
  .display--xl { font-size: 9.7vw; }
  .b-hero-side { display: block; }
  .b-hero-side .s-hero-actions { margin-top: 1.5rem; justify-content: flex-start; }
  .stages-head p { margin-top: 1rem; }
  .stages-media { display: none; }
  .stage-step, .stage-step:first-child { min-height: 0; padding: 0 0 2.5rem; opacity: 1; }
  .stage-step-img { display: block; margin-bottom: 1rem; aspect-ratio: 4 / 3; overflow: hidden; }
  .stage-step-img img { width: 100%; height: 100%; object-fit: cover; }
  .w-stage { margin-top: 1.5rem; }
  .w-frame { aspect-ratio: 4 / 3; }
  .w-controls { margin-top: 1.5rem; }
  .case-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .case-shot figcaption .case-stage { display: block; }
  .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .rent { margin-top: 3rem; padding-top: 4.5rem; }
  .process-item { padding: 1rem 0 1.25rem; }
  .c-info > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .map { aspect-ratio: 3 / 4; min-height: 0; }
  .lb-ui { grid-template-columns: 1fr auto; }
  .lb-controls { grid-column: 1 / -1; }
  .lb-controls .lb-btn { flex: 1; }
}

/* ---------- phone: thumb bar with call and Viber ---------- */
@media (max-width: 640px) {
  body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
  .bar .button--bar { display: none; }
  .menu-btn { margin-left: auto; }
  .quickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; padding-bottom: env(safe-area-inset-bottom); background: var(--surface-2); }
  .quickbar a { display: grid; place-items: center; min-height: 3.5rem; font-weight: 600; text-decoration: none; }
  .quickbar a:first-child { background: var(--accent); color: var(--accent-ink); }
  .quickbar { transition: transform 320ms var(--ease-out); }
  .quickbar.is-hidden { transform: translateY(100%); }
  .toast { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .hero-full { height: calc(100svh - 3.5rem - env(safe-area-inset-bottom)); }
  .hero-stages-cap { display: none; }
  .hero-actions .hero-spec { font-size: var(--step-small); }
  .tiles { gap: 14px 8px; }
  .case-row .case-shot figcaption { font-size: var(--step-small); }
  .process-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .stage, .stages-img, .w-frame img { transition-duration: 1ms; }
  .stage.is-active { animation: none; }
}