/* ==========================================================================
   MIRA HAIRCUTS — /strizhki-kirov/ «Ателье формы»
   One page for all haircuts (the former /strizhka-kaskad-kirov/ lives at #kaskad).
   Chrome (island nav, menu, footer, sticky bar, tabs, lightbox, directions) comes
   from /home.css + /css/mira-motion.css. Language of the page: a tailor's tape,
   pattern pieces («лекала»), tags and the cut line. Obsidian / gold / cream only.
   ========================================================================== */

.page-haircuts {
  --paper: #f3ead9;
  --paper-ink: #1b140f;
  --tape: #e9d8b4;
  --tape-ink: #3a2a17;
}

.text-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.88rem; font-weight: 500; color: var(--gold-light); text-decoration: none;
}
.text-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; opacity: 0.55;
  transform-origin: 0 50%; transition: transform var(--dur-ui) var(--ease-silk), opacity var(--dur-ui) var(--ease-silk);
}
.text-link:hover::after { transform: scaleX(0.35); opacity: 1; }
.hx-note { margin-top: 1.6rem; font-size: 0.9rem; color: var(--cream-muted); }
.hx-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* СРЕЗ (diagonal): the photo is uncovered along a diagonal, a gold glint rides the edge */
.js-motion .rv-cut.hx-diag { clip-path: polygon(0 0, 0 0, 0 0); }
.js-motion .rv-cut.hx-diag.is-in {
  clip-path: polygon(0 0, 220% 0, 0 220%);
  transition: clip-path 1.25s var(--ease-comb) calc(var(--i, 0) * var(--stagger));
}
.hx-diag { position: relative; }
.hx-diag::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, transparent 47%, rgba(255, 238, 200, 0.75) 49.5%, transparent 52%);
  transform: translate(-60%, -60%);
}
.js-motion .hx-diag.is-in::after { animation: hx-glint 1.25s var(--ease-comb) calc(var(--i, 0) * var(--stagger)) both; }
@keyframes hx-glint { 0% { opacity: 0; transform: translate(-60%, -60%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(30%, 30%); } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hx-hero { position: relative; padding-block: 112px clamp(3.5rem, 7vw, 6rem); overflow: clip; }
.hx-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hx-hero-copy { display: grid; gap: clamp(1.1rem, 2.2vh, 1.6rem); justify-items: start; max-width: 40rem; }
.hx-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; font-size: 0.78rem; color: var(--cream-faint); }
.hx-crumbs li + li::before { content: "/"; margin-right: 0.6rem; color: var(--gold-dark); }
.hx-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-light); text-decoration: none; }
.hx-crumbs span { display: inline-flex; align-items: center; min-height: 44px; }
.hx-title {
  font-family: var(--font-heading); font-weight: 400; color: var(--cream-primary);
  font-size: clamp(2.8rem, min(5.6vw, 10vh), 5.4rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance;
}
.hx-title em {
  font-style: italic; color: var(--gold-light);
  background: linear-gradient(100deg, var(--gold-dark) 0%, var(--gold-light) 40%, #f6e3b8 50%, var(--gold-light) 60%, var(--gold-primary) 100%);
  background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-right: 0.06em;
}
.hx-title-line { display: inline-block; }
.hx-lead { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.7; color: var(--cream-muted); max-width: 46ch; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.hx-chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; text-decoration: none;
  font-size: 0.8rem; color: var(--cream-secondary); box-shadow: inset 0 0 0 1px var(--hair);
  transition: color var(--dur-ui) var(--ease-silk), box-shadow var(--dur-ui) var(--ease-silk), background var(--dur-ui) var(--ease-silk);
}
.hx-chips a:hover, .hx-chips a:focus-visible { color: var(--obsidian); background: var(--gold-light); box-shadow: none; }
.hx-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; }
.hx-price-value { font-family: var(--font-heading); font-size: clamp(2rem, 3.2vw, 2.8rem); color: var(--gold-light); line-height: 1; }
.hx-price-note { font-size: 0.82rem; color: var(--cream-muted); }
.hx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.6rem; }
.hero-link {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--cream-primary); text-decoration: none;
  border-bottom: 1px solid var(--hair-strong); font-size: 0.9rem; transition: color var(--dur-ui) var(--ease-silk), border-color var(--dur-ui) var(--ease-silk);
}
.hero-link:hover { color: var(--gold-light); border-color: var(--gold-light); }
.hx-trust { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; padding-top: 0.4rem; }
.hx-trust div { display: flex; flex-direction: column-reverse; gap: 0.15rem; }
.hx-trust dt { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-faint); }
.hx-trust dd { font-family: var(--font-heading); font-size: 1.7rem; color: var(--cream-primary); line-height: 1; }
.hx-trust .metric-star { color: var(--gold-light); font-size: 0.8em; }

/* the photo, sliced by the cut line */
.hx-hero-visual { position: relative; justify-self: center; width: min(100%, 470px); }
.hx-cutframe { position: relative; padding-left: 46px; }
.hx-cut-photo { --bezel-r: 2.2rem; position: relative; }
.hx-cut-core { position: relative; aspect-ratio: 4 / 5.2; }
.hx-cut-half { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* without JS the photo is whole: half b and the line are only used by the entrance */
.hx-cut-half--b, .hx-cut-line { display: none; }
.js-motion .hx-cut-half--a { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 62%); }
.js-motion .hx-cut-half--b { display: block; clip-path: polygon(0 62%, 100% 38%, 100% 100%, 0 100%); }
.js-motion .hx-cut-line {
  /* the cut runs from 62% (left) to 38% (right) of a 4:5.2 frame: atan(0.24 * 1.3) = 17.3deg */
  display: block; position: absolute; left: -10%; width: 120%; top: 50%; height: 1.5px; margin-top: -0.75px; pointer-events: none;
  transform: rotate(-17.3deg);
}
.hx-cut-line i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--gold-light) 15%, #fff6e0 50%, var(--gold-light) 85%, transparent);
  box-shadow: 0 0 18px rgba(230, 200, 139, 0.9);
  transform-origin: 0 50%; transform: scaleX(0);
}
.hx-cutframe.is-cut .hx-cut-half--a, .hx-cutframe.is-cut .hx-cut-half--b { clip-path: none; }
.hx-cutframe.is-cut .hx-cut-half--b { display: none; }
.hx-cut-cap {
  position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.95rem; border-radius: 999px;
  background: rgba(12, 9, 7, 0.78); box-shadow: inset 0 0 0 1px var(--hair); font-size: 0.72rem; color: var(--cream-secondary);
}
.hx-cut-cap-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 10px var(--gold-light); }

/* tailor's tape along the photo */
.hx-tape {
  position: absolute; left: 0; top: 6%; bottom: 6%; width: 30px; border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, rgba(58, 42, 23, 0.85) 0 1px, transparent 1px calc(100% / 60)) left top / 7px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(58, 42, 23, 0.95) 0 1.4px, transparent 1.4px calc(100% / 12)) left top / 13px 100% no-repeat,
    linear-gradient(90deg, #d9c294, var(--tape) 40%, #f6ead0 70%, #d4bc8c);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(90, 67, 32, 0.35);
  transform-origin: 50% 0;
}
.hx-tape-unit { position: absolute; top: -1.4rem; left: 50%; translate: -50% 0; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); }
.hx-tape-num {
  position: absolute; right: 3px; top: calc(var(--t) * 100% / 6); translate: 0 -50%;
  font-size: 0.56rem; font-weight: 600; color: var(--tape-ink); font-variant-numeric: tabular-nums;
}
.hx-tape-num:first-of-type { translate: 0 10%; }
.hx-tape-num:last-of-type { translate: 0 -110%; }

/* tags on threads (links to the forms) */
.hx-tags { position: absolute; right: -18px; top: 9%; display: grid; gap: 1.1rem; justify-items: end; }
.hx-tag { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.hx-tag-thread { width: 1px; height: calc(18px + var(--i) * 10px); background: linear-gradient(180deg, rgba(230, 200, 139, 0.1), var(--gold-light)); }
.hx-tag-card {
  position: relative; display: grid; gap: 0.05rem; justify-items: center; min-width: 118px; min-height: 64px; padding: 1.25rem 0.9rem 0.65rem;
  border-radius: 6px 6px 10px 10px; text-decoration: none; color: var(--paper-ink);
  background: linear-gradient(180deg, #fbf4e6, var(--paper) 60%, #e5d6b8);
  clip-path: polygon(18% 0, 82% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.85);
  transition: transform var(--dur-ui) var(--ease-silk);
}
.hx-tag-hole { position: absolute; top: 6px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--obsidian); box-shadow: 0 0 0 1.5px var(--gold-dark); }
.hx-tag-name { font-family: var(--font-heading); font-size: 1.12rem; line-height: 1.1; }
.hx-tag-price { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: #6b4f22; }
.hx-tag-card:hover, .hx-tag-card:focus-visible { transform: translateY(3px) rotate(-2deg); }
.hx-tag-card:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.js-motion .hx-tag { animation: hx-swing 6.5s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--i) * -1.7s) infinite; }
.js-motion .hx-tags.is-offscreen .hx-tag { animation-play-state: paused; }
@keyframes hx-swing { 0%, 100% { rotate: -2.2deg; } 50% { rotate: 2.2deg; } }

/* ==========================================================================
   LENGTH PICKER
   ========================================================================== */
.hx-length-grid { display: grid; grid-template-columns: minmax(240px, 3.3fr) minmax(0, 8.7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.hx-bust-wrap { position: sticky; top: 104px; display: grid; grid-template-columns: 1fr 92px; gap: 0.8rem; align-items: stretch; }
.hx-bust { --cut: 300; position: relative; aspect-ratio: 240 / 400; color: rgba(250, 247, 242, 0.32); }
.hx-bust-lines, .hx-bust-hair { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-bust-hair {
  clip-path: inset(0 0 calc((400 - var(--cut)) / 400 * 100%) 0);
  transition: clip-path 700ms var(--ease-silk);
}
.hx-bust-track, .hx-ruler-track { position: absolute; inset: 0; pointer-events: none; transform: translateY(calc(var(--cut) / 400 * 100%)); transition: transform 700ms var(--ease-silk); }
.hx-bust-cut {
  position: absolute; left: -4%; right: -4%; top: 0; height: 0; border-top: 1px dashed var(--gold-light);
  filter: drop-shadow(0 0 6px rgba(230, 200, 139, 0.65));
}
.hx-bust-cut-blade { position: absolute; right: -6px; top: -12px; width: 24px; height: 24px; color: var(--gold-light); }
.hx-bust-cut-blade svg { width: 100%; height: 100%; }

.hx-ruler { --cut: 300; position: relative; }
.hx-ruler-tape {
  position: absolute; left: 0; top: 0; bottom: 0; width: 22px; border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, rgba(58, 42, 23, 0.85) 0 1px, transparent 1px 2.5%) left top / 6px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(58, 42, 23, 0.95) 0 1.4px, transparent 1.4px 10%) left top / 11px 100% no-repeat,
    linear-gradient(90deg, #d9c294, var(--tape) 40%, #f6ead0 70%, #d4bc8c);
  box-shadow: inset 0 0 0 1px rgba(90, 67, 32, 0.35);
}
.hx-ruler-stop {
  position: absolute; left: 0; right: -6px; top: calc(var(--y) / 400 * 100%); translate: 0 -50%;
  display: flex; align-items: center; min-height: 44px; padding: 0 0 0 30px; border: 0; background: none; cursor: pointer; text-align: left;
}
.hx-ruler-stop::before { content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 1px; background: var(--gold-dark); }
.hx-ruler-stop-label { font-size: 0.7rem; line-height: 1.2; color: var(--cream-muted); transition: color var(--dur-ui) var(--ease-silk); }
.hx-ruler-stop:hover .hx-ruler-stop-label, .hx-ruler-stop.is-active .hx-ruler-stop-label { color: var(--gold-light); }
.hx-ruler-stop:focus-visible { outline-offset: 0; }
.hx-ruler-knob {
  position: absolute; left: -11px; top: 0; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; cursor: grab; touch-action: none; pointer-events: auto;
}
.hx-ruler-knob::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6e0, var(--gold-light) 45%, var(--gold-primary));
  box-shadow: 0 0 0 5px rgba(230, 200, 139, 0.16), 0 10px 22px -8px rgba(0, 0, 0, 0.8);
}
.hx-length-grid.is-dragging .hx-ruler-track, .hx-length-grid.is-dragging .hx-bust-track, .hx-length-grid.is-dragging .hx-bust-hair { transition: none; }
.hx-length-grid.is-dragging .hx-ruler-knob { cursor: grabbing; }
.hx-ruler-knob:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
html:not(.js) .hx-ruler-knob { display: none; }

.hx-choose-wrap { min-width: 0; }
.hx-len-status { margin-bottom: 1rem; font-size: 0.86rem; color: var(--gold-light); min-height: 1.5em; }
.hx-choose { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.hx-choose th, .hx-choose td { padding: 1rem 0.8rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--hair); }
.hx-choose thead th { padding-top: 0; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-faint); }
.hx-choose tbody th { font-weight: 400; }
.hx-choose tbody th a { font-family: var(--font-heading); font-size: 1.45rem; color: var(--cream-primary); text-decoration: none; white-space: nowrap; }
.hx-choose tbody th a:hover { color: var(--gold-light); }
.hx-choose td { color: var(--cream-muted); }
.hx-choose td[data-label="Когда выбрать"] { min-width: 14rem; }
.hx-choose-price { color: var(--gold-light) !important; font-weight: 500; }
.hx-choose tbody tr { transition: opacity var(--dur-ui) var(--ease-silk); }
.hx-choose tbody tr.is-dim { opacity: 0.28; }
.hx-choose tbody tr.is-match th a { color: var(--gold-light); }
.hx-choose-book {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 0.95rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.78rem; font-weight: 500; color: var(--gold-light); text-decoration: none; box-shadow: inset 0 0 0 1px var(--hair-strong);
  transition: background var(--dur-ui) var(--ease-silk), color var(--dur-ui) var(--ease-silk);
}
.hx-choose-book svg { width: 15px; height: 15px; }
.hx-choose-book:hover, .hx-choose-book:focus-visible { background: var(--gold-light); color: var(--obsidian); }

/* ==========================================================================
   LOOKBOOK «ЛЕКАЛА»
   ========================================================================== */
.hx-forms { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hx-forms-pin { position: relative; }
.hx-forms-bar { display: none; }
.hx-forms-track { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding-inline: clamp(16px, 4vw, 48px); max-width: 1320px; margin-inline: auto; }
.hx-form {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: center;
  padding: clamp(1.2rem, 2.4vw, 2rem); border-radius: 2rem;
  background: linear-gradient(180deg, rgba(32, 24, 18, 0.72), rgba(16, 12, 9, 0.72));
  box-shadow: inset 0 0 0 1px var(--hair), var(--inner-hi);
  scroll-margin-top: 96px;
}
.hx-form-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: stretch; }
.hx-form--nophoto .hx-form-visual { grid-template-columns: 1fr; }
.hx-form-photo { --bezel-r: 1.4rem; --bezel-pad: 0.3rem; }
.hx-form-photo .mm-bezel-core { aspect-ratio: 3 / 4.2; height: 100%; }
.hx-form-photo img { width: 100%; height: 100%; object-fit: cover; }
.hx-lek {
  position: relative; overflow: hidden; border-radius: 1.2rem; aspect-ratio: 240 / 300;
  background:
    linear-gradient(rgba(230, 200, 139, 0.06) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(230, 200, 139, 0.06) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(120% 80% at 50% 0%, #1f1812, #0e0b08);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.hx-form--nophoto .hx-lek { aspect-ratio: auto; height: 100%; min-height: 360px; }
.hx-lek-hair, .hx-lek-ov { position: absolute; inset: 6% 4% 4% 10%; width: 86%; height: 90%; }
.hx-form--nophoto .hx-lek-hair, .hx-form--nophoto .hx-lek-ov { inset: 5% 18% 5% 22%; width: 60%; height: 90%; }
.hx-lek-ruler {
  position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background:
    repeating-linear-gradient(180deg, rgba(230, 200, 139, 0.5) 0 1px, transparent 1px 10px) right top / 6px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(230, 200, 139, 0.8) 0 1px, transparent 1px 50px) right top / 12px 100% no-repeat;
  border-right: 1px solid rgba(230, 200, 139, 0.25);
}
.hx-lek-ov { overflow: visible; fill: none; }
.hx-lek-line { stroke: var(--gold-light); stroke-width: 1.7; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(230, 200, 139, 0.8)); }
.hx-lek-line--layer { stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.85; filter: none; }
.hx-lek-line--tick { stroke-width: 1; opacity: 0.8; filter: none; }
.hx-lek-line--guide { stroke-width: 0.8; stroke-dasharray: 2 3; opacity: 0.6; filter: none; }
.hx-lek-leader { stroke: rgba(250, 247, 242, 0.45); stroke-width: 0.6; }
.hx-lek-note { font-family: var(--font-body); font-size: 7.4px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--cream-secondary); stroke: none; }
/* the cut line draws itself when the card comes into view */
.js-motion .hx-lek-line--main { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
.js-motion .hx-form.is-drawn .hx-lek-line--main { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-silk) 0.2s; }
.js-motion .hx-lek-note, .js-motion .hx-lek-leader, .js-motion .hx-lek-line:not(.hx-lek-line--main) { opacity: 0; }
.js-motion .hx-form.is-drawn .hx-lek-note, .js-motion .hx-form.is-drawn .hx-lek-leader { opacity: 1; transition: opacity 0.8s var(--ease-silk) 1.1s; }
.js-motion .hx-form.is-drawn .hx-lek-line:not(.hx-lek-line--main) { opacity: 0.85; transition: opacity 0.8s var(--ease-silk) 0.9s; }

.hx-form-body { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.hx-form-kicker { display: flex; align-items: baseline; gap: 0.8rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
.hx-form-num { font-family: var(--font-heading); font-size: 1.1rem; letter-spacing: 0; color: var(--cream-primary); }
.hx-form-num span { color: var(--cream-faint); font-size: 0.85rem; }
.hx-form-name { font-family: var(--font-heading); font-weight: 400; font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.02; color: var(--cream-primary); letter-spacing: -0.015em; }
.hx-form-tag { font-family: var(--font-heading); font-style: italic; font-size: 1.25rem; color: var(--gold-light); line-height: 1.3; }
.hx-form-text { color: var(--cream-muted); max-width: 56ch; }
.hx-form-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100%; border-top: 1px solid var(--hair); }
.hx-form-facts div { display: grid; gap: 0.2rem; padding: 0.75rem 0.8rem 0.75rem 0; border-bottom: 1px solid var(--hair); }
.hx-form-facts dt { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-faint); }
.hx-form-facts dd { font-size: 0.9rem; color: var(--cream-secondary); }
.hx-form-facts .hx-form-price { font-family: var(--font-heading); font-size: 1.6rem; color: var(--gold-light); line-height: 1.1; }
.hx-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; padding-top: 0.4rem; }
.hx-form-more { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.hx-form-subs { grid-column: 1 / -1; display: grid; gap: 0.8rem; }
.hx-subs-h { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
.hx-subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; width: 100%; }
.hx-sub { display: grid; gap: 0.6rem; align-content: start; }
.hx-sub-photo { overflow: hidden; border-radius: 1rem; aspect-ratio: 4 / 5; box-shadow: inset 0 0 0 1px var(--hair); }
.hx-sub-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-silk); }
.hx-sub:hover .hx-sub-photo img { transform: scale(1.04); }
.hx-sub-name { font-family: var(--font-heading); font-weight: 400; font-size: 1.2rem; line-height: 1.15; color: var(--cream-primary); }
.hx-sub-text { font-size: 0.8rem; line-height: 1.55; color: var(--cream-muted); }

/* desktop + GSAP: the spreads ride sideways while the section is pinned */
@media (min-width: 1024px) {
  .hx-forms.is-horizontal .hx-forms-bar {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 1.2rem; margin-bottom: 1.2rem;
    font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-faint);
  }
  .hx-forms.is-horizontal .hx-forms-count { font-variant-numeric: tabular-nums; color: var(--gold-light); }
  .hx-forms.is-horizontal .hx-forms-name { font-family: var(--font-heading); font-size: 1.25rem; letter-spacing: 0; text-transform: none; color: var(--cream-primary); min-width: 10ch; }
  .hx-forms.is-horizontal .hx-forms-line { position: relative; height: 1px; background: var(--hair); }
  .hx-forms.is-horizontal .hx-forms-fill { position: absolute; inset: 0; background: var(--gold-light); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .hx-forms.is-horizontal .hx-forms-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .hx-forms.is-horizontal .hx-forms-track {
    display: flex; flex-wrap: nowrap; gap: 2rem; width: max-content; max-width: none; margin: 0;
    padding-inline: max(clamp(16px, 4vw, 48px), calc((100vw - 1320px) / 2 + 48px));
  }
  .hx-forms.is-horizontal .hx-form {
    --card-h: min(700px, calc(100vh - 170px));
    width: min(1080px, 80vw); height: var(--card-h); align-items: stretch;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    transition: opacity 600ms var(--ease-silk);
  }
  .hx-forms.is-horizontal .hx-form--wide { width: min(1340px, 90vw); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.58fr); }
  .hx-forms.is-horizontal .hx-form:not(.is-current) { opacity: 0.5; }
  .hx-forms.is-horizontal .hx-form-visual { height: 100%; min-height: 0; }
  .hx-forms.is-horizontal .hx-form-photo { height: 100%; }
  .hx-forms.is-horizontal .hx-form-photo .mm-bezel-core { aspect-ratio: auto; height: 100%; }
  .hx-forms.is-horizontal .hx-lek { aspect-ratio: auto; height: 100%; min-height: 0; }
  .hx-forms.is-horizontal .hx-form-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; min-height: 0; overflow: hidden; }
  .hx-forms.is-horizontal .hx-form-body > * { flex-shrink: 0; }
  .hx-forms.is-horizontal .hx-form-facts { align-self: stretch; }
  .hx-forms.is-horizontal .hx-form-subs { grid-column: auto; align-content: center; min-height: 0; overflow: hidden; padding-left: 1.2rem; border-left: 1px solid var(--hair); }
  .hx-forms.is-horizontal .hx-subs { grid-template-columns: 1fr; gap: 1rem; }
  .hx-forms.is-horizontal .hx-sub { grid-template-columns: 72px minmax(0, 1fr); gap: 0.8rem; align-items: start; }
  .hx-forms.is-horizontal .hx-sub-photo { aspect-ratio: 4 / 5; }
  .hx-forms.is-horizontal .hx-sub-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hx-forms.is-horizontal .hx-form--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 200px; }
  .hx-forms.is-horizontal .hx-form-subs { padding-left: 0.9rem; }
  .hx-forms.is-horizontal .hx-sub { grid-template-columns: 56px minmax(0, 1fr); align-items: center; }
  .hx-forms.is-horizontal .hx-sub-text { display: none; }
  .hx-forms.is-horizontal .hx-sub-name { font-size: 1.05rem; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hx-forms.is-horizontal .hx-form-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hx-forms.is-horizontal .hx-sub-text { -webkit-line-clamp: 2; }
  .hx-forms.is-horizontal .hx-form-name { font-size: clamp(2rem, 3vw, 2.8rem); }
  .hx-forms.is-horizontal .hx-form-body { gap: 0.7rem; }
  .hx-forms.is-horizontal .hx-form-facts div { padding-block: 0.55rem; }
  .hx-forms.is-horizontal .hx-form-facts div:first-child { display: none; }
  .hx-forms.is-horizontal .hx-form-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .hx-forms.is-horizontal .hx-form-tag, .hx-forms.is-horizontal .hx-form-more { display: none; }
}

/* ==========================================================================
   CASCADE WITHOUT STEPS
   ========================================================================== */
.hx-layers-stage {
  --wipe: 50%;
  position: relative; aspect-ratio: 480 / 300; max-width: 960px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); border-radius: 2rem; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1f1812, #0d0a08); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-float);
}
.hx-layers-img { position: absolute; inset: 4% 3% 0; width: 94%; height: 96%; }
.hx-layers-img--smooth { clip-path: inset(0 calc(100% - var(--wipe)) 0 0); }
.hx-layers-blade { position: absolute; inset: 0; pointer-events: none; transform: translateX(var(--wipe)); }
.hx-layers-blade::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--gold-light) 30%, var(--gold-light) 70%, transparent); }
.hx-layers-blade-icon { position: absolute; top: 50%; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; border-radius: 50%; color: var(--obsidian); background: radial-gradient(circle at 35% 30%, #fff6e0, var(--gold-light) 45%, var(--gold-primary)); box-shadow: 0 0 0 6px rgba(230, 200, 139, 0.14); }
.hx-layers-blade-icon svg { width: 20px; height: 20px; transform: rotate(90deg); }
.hx-layers-label { position: absolute; top: 1rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; background: rgba(12, 9, 7, 0.82); box-shadow: inset 0 0 0 1px var(--hair); }
.hx-layers-label--a { left: 1rem; color: var(--gold-light); }
.hx-layers-label--b { right: 1rem; color: var(--cream-muted); }
.hx-layers-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
.hx-col { padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 1.6rem; }
.hx-col--muted { box-shadow: inset 0 0 0 1px var(--hair); }
.hx-col--gold { padding: var(--bezel-pad); }
.hx-col-core { padding: clamp(1.4rem, 3vw, 2.2rem); height: 100%; background: linear-gradient(180deg, rgba(48, 36, 22, 0.75), rgba(22, 17, 12, 0.85)); }
.hx-col-h { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; color: var(--cream-primary); margin-bottom: 1rem; }
.hx-col-list { display: grid; gap: 0.75rem; }
.hx-col-list li { position: relative; padding-left: 1.5rem; color: var(--cream-muted); font-size: 0.95rem; }
.hx-col-list li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.8rem; height: 1px; background: var(--cream-faint); }
.hx-col-list--gold li { color: var(--cream-secondary); }
.hx-col-list--gold li::before { background: var(--gold-light); }

/* ==========================================================================
   FIT (face / hair)
   ========================================================================== */
.hx-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
.hx-fit-group { display: grid; gap: 1.2rem; align-content: start; padding: clamp(1.4rem, 3vw, 2rem); border-radius: 1.8rem; box-shadow: inset 0 0 0 1px var(--hair); background: rgba(20, 16, 12, 0.5); }
.hx-fit-h { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
.hx-fit-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.hx-fit-tab {
  display: grid; justify-items: center; gap: 0.5rem; min-height: 44px; padding: 0.9rem 0.5rem; border: 0; border-radius: 1.1rem; cursor: pointer;
  background: rgba(250, 247, 242, 0.03); box-shadow: inset 0 0 0 1px var(--hair); color: var(--cream-muted); font-size: 0.76rem; line-height: 1.3; text-align: center;
  transition: background var(--dur-ui) var(--ease-silk), color var(--dur-ui) var(--ease-silk), box-shadow var(--dur-ui) var(--ease-silk);
}
.hx-fit-tab:hover { color: var(--cream-primary); }
.hx-fit-tab.is-active { color: var(--cream-primary); background: rgba(230, 200, 139, 0.1); box-shadow: inset 0 0 0 1px rgba(230, 200, 139, 0.55); }
.hx-face { display: block; width: 46px; height: 58px; }
.hx-face svg { width: 100%; height: 100%; fill: none; stroke: var(--cream-faint); stroke-width: 1.3; stroke-linecap: round; transition: stroke var(--dur-ui) var(--ease-silk); }
.hx-face .hx-face-cut { stroke: var(--gold-dark); stroke-width: 1.6; }
.hx-fit-tab.is-active .hx-face svg { stroke: var(--cream-secondary); }
.hx-fit-tab.is-active .hx-face .hx-face-cut { stroke: var(--gold-light); }
.hx-fit-panels { display: grid; }
.hx-fit-panel { display: grid; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.hx-fit-panel + .hx-fit-panel { margin-top: 1rem; }
.js .hx-fit-panels { grid-template-areas: "p"; }
.js .hx-fit-panel { grid-area: p; margin-top: 0; }
.js .hx-fit-panel:not(.is-active) { visibility: hidden; opacity: 0; }
.js .hx-fit-panel { transition: opacity 500ms var(--ease-silk), visibility 0s linear 500ms; }
.js .hx-fit-panel.is-active { transition: opacity 500ms var(--ease-silk), visibility 0s; }
.hx-fit-title { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; color: var(--cream-primary); }
.hx-fit-text { color: var(--cream-muted); font-size: 0.95rem; }
.hx-fit-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--cream-faint); }
.hx-fit-links span { margin-right: 0.3rem; }
.hx-fit-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.9rem; border-radius: 999px; color: var(--gold-light); text-decoration: none; box-shadow: inset 0 0 0 1px var(--hair-strong); }
.hx-fit-link:hover { background: var(--gold-light); color: var(--obsidian); }

/* ==========================================================================
   BEFORE / AFTER (diagonal cut)
   ========================================================================== */
.hx-ba-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hx-ba-frame { --bezel-r: 2.2rem; justify-self: center; width: min(100%, calc(76vh * 0.75 + 0.75rem)); }
.hx-ba { --x: 50%; --k: 12%; position: relative; aspect-ratio: 3 / 4; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.hx-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hx-ba-before { clip-path: polygon(0 0, calc(var(--x) + var(--k)) 0, calc(var(--x) - var(--k)) 100%, 0 100%); }
.hx-ba-line {
  position: absolute; left: var(--x); top: 50%; width: 1.5px; height: 110%; pointer-events: none;
  background: linear-gradient(180deg, rgba(230, 200, 139, 0.2), var(--gold-light) 50%, rgba(230, 200, 139, 0.2));
  box-shadow: 0 0 12px rgba(230, 200, 139, 0.6);
  transform: translate(-50%, -50%) rotate(10.2deg);
}
.hx-ba-handle { position: absolute; left: var(--x); top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; cursor: ew-resize; outline: none; }
.hx-ba-bead {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--obsidian);
  background: radial-gradient(circle at 35% 30%, #fff6e0, var(--gold-light) 45%, var(--gold-primary));
  box-shadow: 0 0 0 6px rgba(230, 200, 139, 0.14), 0 14px 30px -10px rgba(0, 0, 0, 0.7);
  transition: scale var(--dur-ui) var(--ease-silk);
}
.hx-ba-bead svg { width: 24px; height: 24px; transform: rotate(90deg); }
.hx-ba:hover .hx-ba-bead, .hx-ba-handle:focus-visible .hx-ba-bead, .hx-ba.is-dragging .hx-ba-bead { scale: 1.08; }
.hx-ba-handle:focus-visible .hx-ba-bead { outline: 2px solid var(--cream-primary); outline-offset: 4px; }
.hx-case-dl { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.hx-case-dl div { display: grid; gap: 0.2rem; padding: 0.75rem 0.6rem 0.75rem 0; border-bottom: 1px solid var(--hair); }
.hx-case-dl dt { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-faint); }
.hx-case-dl dd { font-size: 0.92rem; color: var(--cream-primary); }

/* ==========================================================================
   PRICES — tape strips
   ========================================================================== */
.hx-tape-scale {
  display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 4fr) 5.5rem 7rem 9rem; gap: 1.2rem; padding-bottom: 0.8rem;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-faint);
}
.hx-tape-ticks { grid-column: 2; display: flex; justify-content: space-between; }
.hx-tape-list { border-top: 1px solid var(--hair); }
.hx-tape-row {
  display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 4fr) 5.5rem 7rem 9rem; gap: 1.2rem; align-items: center;
  min-height: 88px; padding-block: 1rem; border-bottom: 1px solid var(--hair);
}
.hx-tape-name { font-family: var(--font-heading); font-size: clamp(1.3rem, 1.9vw, 1.7rem); color: var(--cream-primary); line-height: 1.15; }
.hx-tape-name small { display: block; margin-top: 0.2rem; font-family: var(--font-body); font-size: 0.76rem; color: var(--cream-faint); }
.hx-tape-bar { position: relative; height: 18px; border-radius: 3px; background: rgba(230, 200, 139, 0.05); box-shadow: inset 0 0 0 1px rgba(230, 200, 139, 0.12); overflow: hidden; }
.hx-tape-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--dur) / 90 * 100%); border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(58, 42, 23, 0.9) 0 1px, transparent 1px calc(100% / (var(--dur) / 5))) left bottom / 100% 6px no-repeat,
    linear-gradient(180deg, #f6ead0, var(--tape) 55%, #cdb27f);
  transform-origin: 0 50%;
}
.js-motion .hx-tape-row .hx-tape-fill { transform: scaleX(0); }
.js-motion .hx-tape-row.is-in .hx-tape-fill { transform: scaleX(1); transition: transform 1.2s var(--ease-silk) calc(var(--i, 0) * var(--stagger) + 0.15s); }
.hx-tape-time { font-size: 0.85rem; color: var(--cream-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-tape-price { font-family: var(--font-heading); font-size: 1.55rem; color: var(--gold-light); white-space: nowrap; text-align: right; }
.hx-tape-book {
  justify-self: end; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.8rem; font-weight: 500; color: var(--gold-light); text-decoration: none; box-shadow: inset 0 0 0 1px var(--hair-strong);
  transition: background var(--dur-ui) var(--ease-silk), color var(--dur-ui) var(--ease-silk);
}
.hx-tape-book svg { width: 14px; height: 14px; }
.hx-tape-book:hover, .hx-tape-book:focus-visible { background: var(--gold-light); color: var(--obsidian); }

/* ==========================================================================
   WORKS
   ========================================================================== */
.hx-works-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; grid-auto-flow: dense; }
.hx-work:nth-child(5n + 1) { grid-row: span 2; }
.hx-work[hidden] { display: none; }
.hx-work-btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 1.2rem; overflow: hidden; background: var(--obsidian-raise); cursor: zoom-in; }
.hx-work-img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; }
.hx-work:nth-child(5n + 1) .hx-work-img { aspect-ratio: auto; min-height: 100%; }
.hx-work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-silk); }
.hx-work-btn:hover .hx-work-img img, .hx-work-btn:focus-visible .hx-work-img img { transform: scale(1.05); }
.hx-work-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem 0.9rem; text-align: left;
  font-family: var(--font-heading); font-size: 1.1rem; color: var(--cream-primary);
  background: linear-gradient(0deg, rgba(8, 6, 5, 0.85), transparent);
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur-ui) var(--ease-silk), transform var(--dur-ui) var(--ease-silk);
}
.hx-work-btn:hover .hx-work-cap, .hx-work-btn:focus-visible .hx-work-cap { opacity: 1; transform: none; }

/* ==========================================================================
   VISIT
   ========================================================================== */
.hx-visit-line { position: relative; }
.hx-visit-axis { position: relative; height: 26px; margin-bottom: 2rem; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(58, 42, 23, 0.9) 0 1px, transparent 1px calc(100% / 18)) left bottom / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(58, 42, 23, 0.95) 0 1.4px, transparent 1.4px calc(100% / 6)) left bottom / 100% 13px no-repeat,
    linear-gradient(180deg, rgba(246, 234, 208, 0.12), rgba(233, 216, 180, 0.08));
  box-shadow: inset 0 0 0 1px rgba(230, 200, 139, 0.18);
}
.hx-visit-fill { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(180deg, #f6ead0, var(--tape) 55%, #cdb27f); opacity: 0.9; transform-origin: 0 50%; }
.hx-visit-axis::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(58, 42, 23, 0.9) 0 1px, transparent 1px calc(100% / 18)) left bottom / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(58, 42, 23, 0.95) 0 1.4px, transparent 1.4px calc(100% / 6)) left bottom / 100% 13px no-repeat;
}
.js-motion .hx-visit-fill { transform: scaleX(var(--fill, 0)); }
.hx-visit-start, .hx-visit-end { position: absolute; top: calc(100% + 0.5rem); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-faint); }
.hx-visit-start { left: 0; }
.hx-visit-end { right: 0; }
.hx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); padding-top: 1.4rem; }
.hx-step { position: relative; display: grid; gap: 0.6rem; align-content: start; padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.hx-step-mark { position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6e0, var(--gold-light) 50%, var(--gold-primary)); box-shadow: 0 0 14px rgba(230, 200, 139, 0.6); transition: transform var(--dur-ui) var(--ease-silk), opacity var(--dur-ui) var(--ease-silk); }
.js-motion .hx-step:not(.is-lit) .hx-step-mark { opacity: 0.35; transform: scale(0.7); }
.hx-step-num { font-family: var(--font-heading); font-size: 2.6rem; line-height: 1; color: var(--gold-dark); }
.hx-step-title { font-family: var(--font-heading); font-weight: 400; font-size: 1.45rem; line-height: 1.15; color: var(--cream-primary); }
.hx-step-text { font-size: 0.9rem; color: var(--cream-muted); }

/* ==========================================================================
   REVIEW
   ========================================================================== */
.hx-quote { position: relative; display: grid; gap: 1.6rem; max-width: 1040px; padding: clamp(1.8rem, 5vw, 3.6rem); border-radius: 0.4rem; background: linear-gradient(180deg, rgba(30, 23, 17, 0.6), rgba(14, 11, 8, 0.6)); box-shadow: inset 0 0 0 1px var(--hair); }
.hx-quote-corner { position: absolute; width: 34px; height: 34px; border-color: var(--gold-light); border-style: solid; }
.hx-quote-corner--tl { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.hx-quote-corner--br { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }
.hx-quote-text { font-family: var(--font-heading); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.24; color: var(--cream-primary); text-wrap: pretty; }
.hx-quote-all { margin-top: 1.4rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.hx-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.hx-faq-head { position: sticky; top: 110px; margin-bottom: 0; }
.faq-list { border-top: 1px solid var(--hair); }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; min-height: 72px; padding: 1.1rem 0; cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.25; color: var(--cream-primary); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--gold-light); }
.faq-icon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair-strong); transition: transform var(--dur-ui) var(--ease-silk), background var(--dur-ui) var(--ease-silk); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; margin-left: -6px; background: var(--gold-light); }
.faq-icon::after { transform: rotate(90deg); transition: transform var(--dur-ui) var(--ease-silk); }
.faq-item.is-open .faq-icon, html:not(.js) .faq-item[open] .faq-icon { background: rgba(230, 200, 139, 0.1); }
.faq-item.is-open .faq-icon::after, html:not(.js) .faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 1fr; }
.js .faq-a { grid-template-rows: 0fr; transition: grid-template-rows 430ms var(--ease-silk); }
.js .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { padding: 0 3.4rem 1.4rem 0; color: var(--cream-muted); }

/* ==========================================================================
   FINALE — the scissors cut the lock
   ========================================================================== */
.hx-finale .finale-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hx-snip { --lock-cut: 268; display: grid; justify-items: center; user-select: none; }
.hx-snip-stage { position: relative; width: 320px; height: 470px; }
.hx-snip-thread { position: absolute; left: 90px; top: -8vh; width: 1px; height: calc(8vh + 24px); background: linear-gradient(180deg, rgba(230, 200, 139, 0), var(--gold-light)); transform-origin: 50% 0; }
.hx-lock { position: absolute; left: 30px; top: 18px; width: 120px; height: 440px; transform-origin: 60px 16px; }
.hx-lock img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.hx-lock-end { transform-origin: 60px calc(var(--lock-cut) * 1px); }
.hx-lock-flash {
  position: absolute; left: -16px; right: -16px; top: calc(var(--lock-cut) * 1px); height: 1.5px; margin-top: -0.75px; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff6e0, transparent); box-shadow: 0 0 16px rgba(255, 240, 200, 0.95);
}
.hx-flyhair { position: absolute; left: 50px; top: calc(var(--lock-cut) * 1px - 10px); width: 20px; height: 30px; opacity: 0; pointer-events: none; }
.hx-flyhair svg { width: 100%; height: 100%; fill: none; stroke: #e7cf9f; stroke-width: 1; stroke-linecap: round; }
.hx-flyhair--1 { left: 62px; }
.hx-flyhair--2 { left: 74px; }

.hx-scissors {
  position: absolute; left: 120px; top: calc(18px + var(--lock-cut) * 1px - 54px); width: 200px; height: 108px;
  display: block; text-decoration: none; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.6));
}
.hx-scissors-svg { width: 200px; height: 108px; overflow: visible; }
/* --open (deg) is the gap between the blades; JS tweens it while cutting */
.hx-scissors { --open: 13; }
.hx-scissors:hover, .hx-scissors:focus-visible { --open: 19; }
.hx-blade { transform-box: view-box; transform-origin: 136px 65px; transition: transform 500ms var(--ease-silk); }
.hx-blade--a { transform: rotate(calc(var(--open) * 1deg)); }
.hx-blade--b { transform: rotate(calc(var(--open) * -1deg)); }
.js-motion .hx-snip.is-onscreen:not(.is-touched) .hx-scissors:not(:hover):not(:focus-visible) .hx-blade--a { animation: hx-snip-a 3.4s var(--ease-silk) 1s infinite; }
.js-motion .hx-snip.is-onscreen:not(.is-touched) .hx-scissors:not(:hover):not(:focus-visible) .hx-blade--b { animation: hx-snip-b 3.4s var(--ease-silk) 1s infinite; }
@keyframes hx-snip-a { 0%, 70%, 100% { transform: rotate(13deg); } 78% { transform: rotate(3deg); } 86% { transform: rotate(15deg); } 92% { transform: rotate(5deg); } }
@keyframes hx-snip-b { 0%, 70%, 100% { transform: rotate(-13deg); } 78% { transform: rotate(-3deg); } 86% { transform: rotate(-15deg); } 92% { transform: rotate(-5deg); } }
.hx-snip.is-cutting .hx-blade { transition: none; }
.hx-scissors-label {
  position: absolute; right: -2px; top: calc(100% + 0.4rem); display: grid; place-items: center; min-height: 40px; padding: 0 1.1rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--obsidian);
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.55), transparent 55%), linear-gradient(135deg, var(--gold-light), var(--gold-primary) 55%, var(--gold-dark));
  box-shadow: 0 0 0 1px rgba(255, 244, 220, 0.35) inset, 0 12px 26px -12px rgba(201, 169, 110, 0.7);
  transition: scale var(--dur-ui) var(--ease-silk);
}
.hx-scissors:hover .hx-scissors-label, .hx-scissors:focus-visible .hx-scissors-label { scale: 1.05; }
.hx-scissors:focus-visible { outline: none; }
.hx-scissors:focus-visible .hx-scissors-label { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.hx-snip.is-dragging .hx-scissors { cursor: grabbing; }
.hx-snip-hint { margin-top: 1rem; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--cream-muted); text-align: center; }

/* ==========================================================================
   MOTION GATE (hero entrance)
   ========================================================================== */
.js-motion [data-hero-title] .hx-title-line { opacity: 0; }
.js-motion .hx-tape { transform: scaleY(0); }
.js-motion .hx-tag { opacity: 0; }
.js-motion .hx-cutframe.is-in .hx-tag { opacity: 1; transition: opacity 0.8s var(--ease-silk) calc(0.9s + var(--i) * 0.12s); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .hx-tape-row, .hx-tape-scale { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) 4.8rem 6rem 8.5rem; }
}


/* the choice table turns into cards until there is room for six columns */
@media (max-width: 1279px) {
  .hx-choose thead { display: none; }
  .hx-choose, .hx-choose tbody, .hx-choose tr, .hx-choose th, .hx-choose td { display: block; }
  .hx-choose tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--hair); }
  .hx-choose th, .hx-choose td { padding: 0; border: 0; }
  .hx-choose tbody th { grid-column: 1; }
  .hx-choose td[data-label="Когда выбрать"] { grid-column: 1 / -1; font-size: 0.86rem; }
  .hx-choose td[data-label="Длина"] { grid-column: 1; font-size: 0.8rem; }
  .hx-choose td[data-label="Длина"]::before { content: "Длина: "; color: var(--cream-faint); }
  .hx-choose td[data-label="Время"] { grid-column: 2; grid-row: 3; justify-self: end; font-size: 0.8rem; }
  .hx-choose td[data-label="Цена"] { grid-column: 2; grid-row: 1; justify-self: end; font-family: var(--font-heading); font-size: 1.35rem; }
  .hx-choose-act { grid-column: 1 / -1; padding-top: 0.5rem !important; }
  .hx-choose tbody tr.is-dim { opacity: 0.32; }
}

@media (max-width: 1023px) {
  .hx-hero { padding-block: 104px 64px; }
  .hx-hero-grid { grid-template-columns: 1fr; }
  .hx-hero-visual { width: min(100%, 440px); }
  .hx-length-grid { grid-template-columns: 1fr; }
  .hx-bust-wrap { position: relative; top: 0; width: min(100%, 360px); margin-inline: auto; }

  /* lookbook: swipe */
  .hx-forms-track {
    display: flex; gap: 0.8rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(16px, 4vw, 48px); padding-bottom: 1rem; scrollbar-width: none;
  }
  .hx-forms-track::-webkit-scrollbar { display: none; }
  .hx-form { flex: 0 0 min(86vw, 640px); grid-template-columns: 1fr; align-items: start; scroll-snap-align: start; }
  .hx-forms-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; margin-bottom: 1rem; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
  .hx-forms-name { display: none; }
  .hx-forms-line { position: relative; height: 1px; background: var(--hair); }
  .hx-forms-fill { position: absolute; inset: 0; background: var(--gold-light); transform-origin: 0 50%; transform: scaleX(var(--p, 0.1667)); transition: transform 400ms var(--ease-silk); }
  .hx-form--nophoto .hx-lek { min-height: 300px; }

  .hx-layers-cols, .hx-fit-grid, .hx-ba-grid, .hx-faq-grid { grid-template-columns: 1fr; }
  .hx-faq-head { position: static; }
  .hx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .hx-works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-finale .finale-grid { grid-template-columns: 1fr; }
  .hx-snip-thread { top: -40px; height: 64px; }

  .hx-tape-scale { display: none; }
  .hx-tape-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name price book" "bar time time"; row-gap: 0.7rem; }
  .hx-tape-name { grid-area: name; }
  .hx-tape-bar { grid-area: bar; }
  .hx-tape-time { grid-area: time; justify-self: end; }
  .hx-tape-price { grid-area: price; }
  .hx-tape-book { grid-area: book; }
}

@media (max-width: 767px) {
  .hx-hero { padding-block: 96px 56px; }
  .hx-title { font-size: clamp(2.5rem, 11.6vw, 3.4rem); }
  .hx-actions .mm-cta { width: 100%; justify-content: space-between; }
  .hx-cutframe { padding-left: 34px; }
  .hx-tape { width: 24px; }
  .hx-tags { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.2rem; }
  .hx-tag-thread { height: 14px; }
  .hx-tag-card { min-width: 104px; }
  .hx-trust { gap: 0.8rem 1.8rem; }
  .hx-trust dd { font-size: 1.45rem; }


  .hx-subs { grid-template-columns: 1fr; }
  .hx-sub { grid-template-columns: 84px minmax(0, 1fr); gap: 0.8rem; align-items: start; }
  .hx-form-facts { grid-template-columns: 1fr 1fr; }
  .hx-form-visual { grid-template-columns: 1fr 1fr; }
  .hx-form-foot .mm-cta { width: 100%; justify-content: space-between; }

  .hx-layers-stage { border-radius: 1.2rem; }
  .hx-layers-label { font-size: 0.56rem; padding: 0.3rem 0.6rem; top: 0.6rem; }
  .hx-layers-label--a { left: 0.6rem; }
  .hx-layers-label--b { right: 0.6rem; }
  .hx-fit-tabs { grid-template-columns: 1fr; }
  .hx-fit-tab { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; padding: 0.6rem 0.8rem; }
  .hx-face { width: 36px; height: 44px; }

  .hx-steps { grid-template-columns: 1fr; }
  .hx-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .hx-work-cap { opacity: 1; transform: none; font-size: 0.95rem; padding: 2rem 0.7rem 0.6rem; }
  .faq-a-inner p { padding-right: 0; }

  .hx-tape-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "bar time" "book book"; }
  .hx-tape-book { justify-self: stretch; justify-content: space-between; }
  .hx-snip-stage { transform: scale(0.9); transform-origin: 50% 0; margin-bottom: -40px; }
}

@media (max-width: 380px) {
  .hx-snip-stage { transform: scale(0.84); margin-bottom: -70px; }
  .hx-chips a { padding: 0 0.8rem; }
}

/* Reduced motion: nothing moves, everything is visible */
@media (prefers-reduced-motion: reduce) {
  .hx-tag, .hx-blade { animation: none !important; }
  .hx-bust-hair, .hx-bust-cut, .hx-ruler-knob, .hx-blade { transition: none; }
}