/* New Look Hairstyles: colours from their own salon. Warm white of the painted-brick corner house, the soft black of
   their chairs and tables, the herringbone oak floor, the blush velvet of the waiting chairs, pampas beige. The lace
   oval, the round scissors badge and the two dark ribbons come from the label on their window. */
:root {
  --paper: #f7f3ee; --paper-2: #efe8df; --card: #fffdfa;
  --ink: #1d1b19; --ink-2: #34302c; --muted: #6c635a; --line: #e3d9cd;
  --oak: #b98b5e; --oak-d: #8c6641; --pampas: #d8c7a8;
  --blush: #ecd3ca; --blush-2: #f6e6e0; --blush-d: #b9786a;
  --hair: #d9c4a9; --hair-line: #a88d6e; --kleur: #a5583d;
  --serif: 'Libre Caslon Display', Georgia, serif; --sans: Outfit, system-ui, sans-serif; --script: 'Pinyon Script', cursive;
  --r: 6px; --wrap: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 300 17px/1.6 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
b, strong { font-weight: 600; }
button { font: inherit; color: inherit; cursor: pointer; }
.defs { position: absolute; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
:focus-visible { outline: 2px solid var(--blush-d); outline-offset: 3px; }

/* the window label (logo) */
.label { display: block; overflow: visible; }
.lace { fill: #fff; stroke: var(--ink-2); stroke-width: 1; }
.lace-in { fill: none; stroke: var(--ink-2); stroke-width: .7; stroke-dasharray: 1.4 2.6; }
.flourish { fill: none; stroke: var(--ink-2); stroke-width: 1.1; stroke-linecap: round; }
.ribbon { fill: var(--ink); }
.script { font-family: var(--script); font-size: 22px; fill: #fff; }
.badge { fill: #fff; stroke: var(--ink); stroke-width: 2.4; }
.badge-in { fill: none; stroke: var(--ink); stroke-width: .8; }
.scissors path, .scissors circle { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; }
.scissors .pin { fill: var(--ink); stroke: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 20px;
  border-radius: var(--r); border: 1.5px solid transparent; font: 500 15px/1.2 var(--sans); text-decoration: none;
  letter-spacing: .01em; transition: background .2s, color .2s, border-color .2s; }
.btn svg { fill: currentColor; flex: none; }
.btn-lg { min-height: 52px; padding: 12px 24px; font-size: 16px; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-blush { background: var(--blush); color: var(--ink); }
.btn-blush:hover { background: #fff; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); font-size: 15px; }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(247,243,238,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { flex: none; text-decoration: none; }
.nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 400; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-color: var(--ink); }
.top-act { display: flex; align-items: center; gap: 16px; }
.top-tel { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 400; font-size: 15px; }
.top-tel svg { fill: var(--ink); }

/* hero: their own salon, big, with a paper card over it */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); min-height: min(720px, calc(100vh - 76px)); }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.hero-card { display: flex; flex-direction: column; justify-content: center; padding: 56px 52px 56px 48px; background: var(--paper); }
.slogan { font-family: var(--script); font-size: 30px; line-height: 1.2; color: var(--oak-d); margin-bottom: 18px; }
.hero h1 { font-size: clamp(38px, 4.2vw, 58px); margin-bottom: 20px; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 30em; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 28px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.gbadge, .skbadge { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; }
.gbadge b, .skbadge b { font-size: 17px; }
.small { color: var(--muted); font-size: 14px; }

/* stars: real yellow stars, partly filled via classes (no inline styles under the CSP) */
.stars { --f: 96%; display: inline-block; width: 80px; height: 15px; vertical-align: -2px;
  background: linear-gradient(90deg, #fbbc04 var(--f), #d9d2c8 var(--f));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 15'%3E%3Cg%3E%3Cpath id='s' d='M7.5 0l2.2 4.8 5.3.6-3.9 3.6 1.1 5.2-4.7-2.7-4.7 2.7 1.1-5.2L0 5.4l5.3-.6z'/%3E%3Cuse href='%23s' x='16'/%3E%3Cuse href='%23s' x='32'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='64'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 80px 15px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 15'%3E%3Cg%3E%3Cpath id='s' d='M7.5 0l2.2 4.8 5.3.6-3.9 3.6 1.1 5.2-4.7-2.7-4.7 2.7 1.1-5.2L0 5.4l5.3-.6z'/%3E%3Cuse href='%23s' x='16'/%3E%3Cuse href='%23s' x='32'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='64'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 80px 15px no-repeat; }
.stars.r48 { --f: 96.5%; } .stars.r49 { --f: 98.5%; }

/* section rhythm */
section { padding: 96px 0; border-top: 1px solid var(--line); }
.hero { padding: 0; border-top: 0; }

/* "Wat gaan we doen?": a centred question, then the chart and the steps */
.q { font-size: clamp(36px, 4.6vw, 60px); text-align: center; }
.q-sub { text-align: center; color: var(--muted); max-width: 36em; margin: 14px auto 44px; }
.builder { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 44px; align-items: start; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 36px; }
.chart { margin: 0; text-align: center; }
.head { width: 100%; max-width: 300px; height: auto; margin: 0 auto; display: block; overflow: visible; }
.head .frame { fill: #fff; stroke: var(--ink-2); stroke-width: 1; }
.head .frame-in { fill: var(--paper-2); stroke: var(--ink-2); stroke-width: .7; stroke-dasharray: 1.4 2.8; }
.head .body { fill: #fbf8f4; stroke: #a99a88; stroke-width: 1.4; }
.head .neck { fill: #eadccb; stroke: #a99a88; stroke-width: 1.4; }
.head .ear { fill: #eadccb; stroke: #a99a88; stroke-width: 1.4; stroke-linecap: round; }
.head .hair { fill: var(--hair); stroke: var(--hair-line); stroke-width: 1.4; transition: d .5s ease; }
.head .strands path { fill: none; stroke: var(--hair-line); stroke-width: .8; opacity: .45; }
.z { opacity: 0; transition: opacity .45s ease; }
.z.on { opacity: 1; }
.z-roots { fill: url(#rootfade); }
.root-0 { stop-color: var(--kleur); stop-opacity: .72; } .root-1 { stop-color: var(--kleur); stop-opacity: 0; }
.z-all { fill: var(--kleur); fill-opacity: .55; }
.z-lengths, .z-ends { fill: url(#lenfade); } .z-ends { fill: url(#endfade); }
.len-0 { stop-color: var(--kleur); stop-opacity: 0; } .len-1 { stop-color: var(--kleur); stop-opacity: .6; }
.z-foilTop, .z-foilAll { fill: url(#foil); }
.foil-strip { fill: #f4e3c8; opacity: .95; }
.z-balayage { fill: url(#bal); }
.bal-0 { stop-color: #e9c99b; stop-opacity: 0; } .bal-1 { stop-color: #f0d6ad; stop-opacity: .95; }
.z-face { fill: #f2dcb6; fill-opacity: .9; }
.z-toner { fill: #c9b9c6; fill-opacity: .35; mix-blend-mode: multiply; }
.wefts line { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; }
.wefts circle { fill: var(--ink); } .wefts text { fill: var(--paper); font: 600 10px var(--sans); }
.cutline { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 2 4; stroke-linecap: round; }
.cut-sc path, .cut-sc circle { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.cut { opacity: 0; transition: opacity .35s; } .cut.on { opacity: 1; }
.chart-cap { margin-top: 16px; font-size: 15px; color: var(--muted); min-height: 3.2em; }

.step-tabs { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: s; }
.step-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; font-size: 14px; color: var(--muted); }
.step-tabs button span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2); font-size: 12px; font-weight: 500; }
.step-tabs button[aria-selected="true"] { border-color: var(--ink); color: var(--ink); }
.step-tabs button[aria-selected="true"] span { background: var(--ink); color: var(--paper); }
.step-tabs button.done span { background: var(--blush); color: var(--ink); }
.step-body h3 { font-size: 30px; margin-bottom: 18px; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 14px 16px; min-height: 64px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--pampas); }
.opt[aria-checked="true"] { border-color: var(--ink); background: var(--blush-2); }
.opt[aria-checked="true"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.6' fill='none' stroke='%23f7f3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.opt .o-l { font-weight: 500; font-size: 16px; padding-right: 22px; }
.opt .o-s { font-size: 13.5px; color: var(--muted); }
.opt .o-p { font-size: 14px; color: var(--ink-2); }
.hint { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
.step-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.step-nav [data-nav="-1"][disabled] { visibility: hidden; }
.sum { text-align: center; font-size: 15px; color: var(--muted); }
.sum-p { display: block; font: 400 26px/1.1 var(--sans); color: var(--ink); }

/* Jouw kaart: their window label on top, the lace edge from the label */
.kaart-wrap { display: flex; justify-content: center; margin-top: 44px; }
.kaart { position: relative; width: min(100%, 520px); background: #fff; border-radius: 4px; padding: 64px 34px 30px; text-align: center;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -22px rgba(29,27,25,.35); animation: card-in .6s ease both; }
.kaart::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 18px;
  background: radial-gradient(circle at 9px 9px, #fff 8.5px, transparent 9px) 0 0 / 18px 18px repeat-x; }
.kaart-label { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); }
.kaart h3 { font-size: 34px; }
.kaart-sub { font-size: 15px; color: var(--muted); margin: 4px 0 18px; }
.kaart-list { list-style: none; margin: 0 0 6px; padding: 0; text-align: left; border-top: 1px dashed var(--pampas); }
.kaart-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px dashed var(--pampas); }
.kaart-list .tick { width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 3px; margin-top: 3px; position: relative; }
.kaart-list .tick::after { content: ""; position: absolute; left: 4px; top: 0; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kaart-list .k-g { display: block; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kaart-list .k-n { font-weight: 500; }
.kaart-list .k-v { display: block; font-size: 14px; color: var(--muted); }
.kaart-list .k-p { text-align: right; font-weight: 500; white-space: nowrap; }
.kaart-list .k-p small { display: block; font-weight: 300; color: var(--muted); font-size: 13.5px; }
.kaart-tip { margin: 12px 0 0; padding: 10px 14px; background: var(--blush-2); border-radius: 8px; font-size: 14.5px; text-align: left; }
.kaart-sum { display: flex; align-items: baseline; gap: 12px; justify-content: flex-end; margin: 16px 0 22px; font-size: 15px; color: var(--muted); }
.kaart-sum span { margin-right: auto; }
.kaart-sum .kaart-p { font-size: 26px; color: var(--ink); font-weight: 500; }
.kaart-sum .kaart-t { color: var(--ink); font-weight: 400; }
.kaart-how { font-size: 14.5px; color: var(--muted); margin: 14px 0 6px; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) rotate(-1.2deg); } to { opacity: 1; transform: none; } }

/* price list: two doors, one open */
.prices { margin-top: 80px; }
.prices-h { font-size: 30px; margin-bottom: 18px; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; }
.door { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 18px 22px; border: 0; background: var(--paper); text-align: left; }
.door + .door { border-left: 1px solid var(--ink); }
.door b { font: 400 26px/1.1 var(--serif); }
.door span { font-size: 14px; color: var(--muted); }
.door[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.door[aria-selected="true"] span { color: var(--pampas); }
.rows { border: 1px solid var(--ink); border-radius: 0 0 10px 10px; background: var(--card); padding: 4px 22px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 16px; align-items: center; gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.row:hover .r-n { text-decoration: underline; text-underline-offset: 3px; }
.r-n { font-weight: 400; }
.r-n small { display: block; color: var(--muted); font-size: 13.5px; }
.r-m { color: var(--muted); font-size: 14px; white-space: nowrap; }
.r-p { font-weight: 500; white-space: nowrap; text-align: right; }
.row svg { color: var(--muted); }
.prices-foot { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }

/* invisible weft: the dark band, three rows like the banen themselves */
.weft { background: var(--ink); color: var(--paper); border-top: 0; }
.weft-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.weft h2 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 20px; }
.weft h2 span { display: block; font-family: var(--script); font-size: 1.15em; color: var(--blush); line-height: 1.1; }
.weft p { color: #d8d0c6; max-width: 32em; margin-bottom: 28px; }
.weft-rows { list-style: none; margin: 0; padding: 0; }
.weft-rows li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px dashed rgba(236,211,202,.45); }
.weft-rows li:first-child { border-top: 1px dashed rgba(236,211,202,.45); }
.w-n { font: 400 54px/1 var(--serif); color: var(--blush); }
.w-t { font-size: 19px; }
.w-t small { display: block; font-size: 14.5px; color: #b9afa4; }
.weft-rows b { font-size: 24px; font-weight: 400; }

/* the salon */
.salon-head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: end; margin-bottom: 36px; }
.salon-head h2 { font-size: clamp(36px, 4.4vw, 58px); }
.salon-head p { margin: 0; color: var(--ink-2); }
.mosaic { display: grid; grid-template-columns: 1.35fr 1fr .8fr; grid-template-rows: 250px 250px; gap: 12px; }
.ph { padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--paper-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ph:hover img { transform: scale(1.04); }
.ph-a { grid-row: 1 / 3; } .ph-d { grid-column: 3; grid-row: 1 / 3; }
.voices { max-width: 760px; margin: 64px auto 0; text-align: center; }
.voice-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; color: var(--muted); font-size: 14px; }
.vn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 20px; line-height: 1; }
.vn:hover { border-color: var(--ink); }
.voice { margin: 0; }
.v-q { font: 400 clamp(24px, 2.6vw, 32px)/1.3 var(--serif); margin-bottom: 12px; }
.v-q::before { content: "“"; } .v-q::after { content: "”"; }
.v-src { font-size: 14px; color: var(--muted); }
.voice-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; font-size: 14.5px; }
.voice-meta a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink-2); }
.voice-meta a:hover { text-decoration: underline; }

/* kom langs */
.kom { background: var(--paper-2); }
.kom-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
address { font-style: normal; margin-bottom: 10px; }
.street { display: block; font: 400 clamp(38px, 4.4vw, 54px)/1.08 var(--serif); }
.pc { display: block; font-size: 19px; margin-top: 6px; }
.find { color: var(--ink-2); }
.kom-btns { display: grid; gap: 10px; max-width: 360px; margin: 22px 0 28px; }
.btn-call { background: var(--card); }
.hours { max-width: 360px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; }
.now { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-weight: 500; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #b5aca2; }
.dot.open { background: #3f8f5a; box-shadow: 0 0 0 4px rgba(63,143,90,.15); }
.hours-list { display: grid; grid-template-columns: auto 1fr; gap: 3px 18px; margin: 0; font-size: 15px; }
.hours-list dt { color: var(--muted); } .hours-list dd { margin: 0; }
.hours-list .today { font-weight: 600; color: var(--ink); }
.kom-pics { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.kom-pics > * { aspect-ratio: 4 / 5; }
.kom-pics .pand { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.map { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--ink); background: var(--paper); }
.map img { width: 100%; height: 100%; object-fit: cover; }

/* footer */
.foot { background: var(--ink); color: #d8d0c6; padding: 64px 0 90px; font-size: 15px; }
.foot-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; }
.foot h4 { margin: 0 0 10px; font: 400 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pampas); }
.foot a { text-decoration: none; } .foot a:hover { color: #fff; text-decoration: underline; }
.foot .ig { display: inline-flex; align-items: center; gap: 7px; } .foot .ig svg { fill: currentColor; }
.foot-brand p { font-family: var(--script); font-size: 22px; color: var(--blush); margin-top: 12px; }
.foot-small { margin-top: 40px; font-size: 13px; color: #8f857b; }

/* photo viewer */
.viewer { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); }
.viewer::backdrop { background: rgba(20,18,16,.88); }
.viewer img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: 4px; }
.v-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 26px; }
.v-bar { display: flex; align-items: center; justify-content: center; gap: 18px; color: #eee; padding: 12px; }
.v-bar button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: none; color: #fff; font-size: 22px; }

/* concept pill */
.concept { position: fixed; left: 12px; bottom: 12px; z-index: 2147483000; background: rgba(29,27,25,.88); color: #f7f3ee; font: 400 12.5px/1 var(--sans);
  padding: 9px 13px; border-radius: 999px; text-decoration: none; max-width: calc(100vw - 24px); }

/* tablet */
@media (max-width: 1100px) {
  .nav { display: none; }
  .top-act { margin-left: auto; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-pic img { height: 52vh; min-height: 320px; }
  .hero-card { padding: 40px 28px 48px; }
  .builder { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; padding: 26px; }
  .rows { grid-template-columns: 1fr; }
}
@media (max-width: 1040px) { .top-tel span { display: none; } .top-tel { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--line); border-radius: 50%; } }

/* phone */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .top-in { height: 64px; gap: 10px; }
  .brand .label { width: 136px; height: 50px; }
  .top-act { gap: 8px; }
  .top-act > * { flex: none; }
  .top-act .btn { padding: 8px 14px; font-size: 14.5px; }
  html { scroll-padding-top: 70px; }
  section { padding: 64px 0; }
  .hero-pic img { height: 46vh; min-height: 280px; max-height: 420px; object-position: 50% 45%; }
  .hero-card { padding: 30px 18px 40px; }
  .slogan { font-size: 25px; margin-bottom: 12px; }
  .lede { font-size: 16.5px; }
  .hero-btns .btn { width: 100%; }
  .trust { flex-direction: column; gap: 8px; }
  .q-sub { margin-bottom: 26px; }
  .builder { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 20px; gap: 6px; border-radius: 12px; }
  .chart { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; }
  .head { max-width: 118px; }
  .chart-cap { margin: 0; min-height: 0; font-size: 14px; }
  .step-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 10px -16px 16px; padding: 0 16px 4px; scrollbar-width: none; }
  .step-tabs::-webkit-scrollbar { display: none; }
  .step-tabs button { white-space: nowrap; }
  .step-body h3 { font-size: 24px; margin-bottom: 12px; }
  .opts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .opt { padding: 11px 12px; min-height: 58px; }
  .opt .o-l { font-size: 15px; }
  .opt[aria-checked="true"]::after { top: 9px; right: 9px; width: 16px; height: 16px; background-size: 16px; }
  .step-nav { gap: 8px; margin-top: 18px; }
  .step-nav .btn { padding: 8px 14px; }
  .sum-p { font-size: 21px; }
  .kaart { padding: 56px 18px 24px; }
  .kaart-label { width: 170px; height: 63px; top: -24px; }
  .prices { margin-top: 60px; }
  .door { flex-direction: column; gap: 2px; padding: 14px 16px; }
  .door b { font-size: 22px; }
  .rows { padding: 2px 16px; }
  .row { grid-template-columns: minmax(0, 1fr) auto 14px; }
  .r-m { grid-column: 1; grid-row: 2; }
  .r-p { grid-row: 1 / 3; grid-column: 2; }
  .row svg { grid-row: 1 / 3; grid-column: 3; }
  .weft-in { grid-template-columns: 1fr; gap: 36px; }
  .weft-rows li { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 16px 0; }
  .w-n { font-size: 42px; }
  .salon-head { grid-template-columns: 1fr; gap: 14px; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 230px 170px 170px; gap: 8px; }
  .ph-a { grid-column: 1 / 3; grid-row: 1; } .ph-b { grid-column: 1; grid-row: 2; } .ph-c { grid-column: 1; grid-row: 3; } .ph-d { grid-column: 2; grid-row: 2 / 4; }
  .voices { margin-top: 44px; }
  .kom-in { grid-template-columns: 1fr; gap: 30px; }
  .kom-btns, .hours { max-width: none; }
  .kom-pics { grid-template-columns: 1fr; }
  .kom-pics > * { aspect-ratio: auto; }
  .foot-in { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-brand { grid-column: 1 / 3; }
  .concept { font-size: 11.5px; padding: 8px 11px; left: 8px; bottom: 8px; }
}
@media (max-width: 360px) { .brand .label { width: 118px; height: 44px; } .top-act .btn { padding: 8px 11px; font-size: 14px; } .opts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }
.head .hair.pending { fill: #e9e0d4; stroke: #c9bba9; }
.nf-in { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; max-width: 720px; }
.nf h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: 16px; }
.nf p .btn { margin: 6px 8px 0 0; }
.builder > * { min-width: 0; }
[hidden] { display: none !important; }