@font-face {
  font-family:Unbounded;
  src:url('assets/unbounded.ttf') format('truetype');
  font-weight:200 900;
  font-display:swap
}
@font-face {
  font-family:Golos;
  src:url('assets/golos.ttf') format('truetype');
  font-weight:400 900;
  font-display:swap
}
:root {
  --ink:#0c0d0f;
  --panel:#191a1d;
  --silver:#eeefed;
  --muted:#b9bbbf;
  --red:#d71425;
  --deep-red:#b60f1e;
  --display:Unbounded,sans-serif;
  --body:Golos,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --space:clamp(22px,4.45vw,80px);
  --header-height:96px;
  --type-display:clamp(32px,5.3vw,80px);
  --type-heading:clamp(26px,3.1vw,48px);
  --type-lead:20px;
  --type-body:16px;
  --type-small:13px;
  --section-space:clamp(72px,9vw,144px);
  --radius:6px;
  --radius-small:4px;
  --control-line:#414349;
  --control-hover:#27292e;
  --duration:180ms
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  scroll-padding-top:calc(var(--header-height) + 24px);
  scrollbar-color:#696c70 var(--ink)
}
body {
  margin:0;
  background:var(--ink);
  color:var(--silver);
  font-family:var(--body);
  font-size:var(--type-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased
}
::selection {
  color:white;
  background:var(--deep-red)
}
button,input,select {
  font:inherit
}
a,button,input,select,summary {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer;
  color:inherit
}
a {
  color:inherit;
  text-decoration:none
}
svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
img {
  max-width:100%;
  display:block
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible {
  outline:2px solid var(--red);
  outline-offset:4px
}
.care :focus-visible,.closing :focus-visible {
  outline-color:var(--silver)
}
h1,h2,h3,p {
  margin:0
}
h1,h2 {
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.15;
  text-wrap:balance
}
h2 {
  font-size:var(--type-heading)
}
h3 {
  font-size:var(--type-lead);
  font-weight:600;
  line-height:1.3
}
p {
  max-width:65ch
}
button,input,select {
  border-radius:var(--radius)
}
input {
  caret-color:var(--red)
}
.icons {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
[hidden] {
  display:none!important
}
.skip {
  position:fixed;
  top:12px;
  left:22px;
  padding:12px 20px;
  z-index:500;
  background:var(--silver);
  color:var(--ink);
  transform:translateY(-200%)
}
.skip:focus {
  transform:none
}
/* Brand frame */
.header {
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--space);
  gap:28px;
  background:var(--ink);
  position:sticky;
  top:0;
  z-index:100
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0
}
.brand .shield {
  width:35px;
  height:51px;
  object-fit:contain
}
.wordmark {
  width:188px;
  height:auto
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-family:var(--display);
  font-size:var(--type-small);
  font-weight:650;
  letter-spacing:-.025em
}
.desktop-nav a {
  display:flex;
  align-items:center;
  min-height:48px
}
.desktop-nav a:hover {
  color:white
}
.header-actions {
  display:flex;
  align-items:center;
  gap:20px
}
.header-contact {
  display:flex;
  gap:12px;
  align-items:center;
  min-height:48px;
  font-size:var(--type-small);
  font-weight:600
}
.header-contact svg {
  width:20px;
  height:20px
}
.city-picker {
  position:relative;
  min-width:0
}
.city-picker>.city-trigger {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  min-height:48px;
  min-width:145px;
  padding:12px 16px;
  background:var(--panel);
  border:1px solid var(--control-line);
  border-radius:var(--radius);
  font-size:var(--type-small);
  font-weight:500;
  transition:background var(--duration),border-color var(--duration)
}
.city-picker>.city-trigger:hover,.city-picker>.city-trigger[aria-expanded=true] {
  background:var(--control-hover);
  border-color:#777a82
}
.city-trigger>span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.city-picker>.city-trigger>svg {
  width:16px;
  height:16px;
  transition:transform var(--duration) var(--ease)
}
.city-trigger[aria-expanded=true]>svg:last-child {
  transform:rotate(180deg)
}
.city-popover {
  position:absolute;
  inset:auto 0 auto auto;
  top:calc(100% + 10px);
  margin:0;
  width:344px;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - var(--header-height) - 28px);
  padding:8px;
  border:1px solid var(--control-line);
  border-radius:var(--radius);
  background:var(--panel);
  color:var(--silver);
  box-shadow:0 16px 40px #0006;
  overflow:auto;
  z-index:105
}
.city-popover[open] {
  animation:city-enter var(--duration) var(--ease)
}
.city-popover-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:4px 4px 12px 12px
}
.city-popover-heading h2 {
  font-family:var(--body);
  font-size:var(--type-small);
  font-weight:500;
  letter-spacing:0;
  color:var(--muted)
}
.icon-button {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:12px;
  flex-shrink:0;
  border:1px solid var(--control-line);
  border-radius:var(--radius-small);
  background:transparent;
  color:var(--silver);
  transition:background var(--duration),border-color var(--duration)
}
.icon-button svg {
  width:18px;
  height:18px
}
.icon-button:hover {
  background:var(--control-hover);
  border-color:#777a82
}
.city-options:not([hidden]) {
  display:grid;
  gap:4px
}
.city-options>button {
  display:grid;
  gap:6px;
  position:relative;
  min-height:76px;
  padding:16px 44px 16px 16px;
  text-align:left;
  border:1px solid transparent;
  border-radius:var(--radius-small);
  background:transparent;
  color:var(--silver);
  transition:background var(--duration),border-color var(--duration)
}
.city-options>button>span {
  font-size:var(--type-body);
  font-weight:600
}
.city-options small {
  font-size:var(--type-small);
  color:var(--muted)
}
.city-options>button>svg {
  position:absolute;
  right:16px;
  top:20px;
  width:20px;
  height:20px;
  display:none
}
.city-options>button[aria-selected=true] {
  background:#303237;
  border-color:#5b5e66
}
.city-options>button[aria-selected=true]>svg {
  display:block
}
.city-options>button:hover {
  background:var(--control-hover)
}
.city-options>button:focus-visible {
  outline-color:var(--silver);
  outline-offset:-3px
}
html.city-selecting {
  overflow:hidden
}
@keyframes city-enter {
  from {opacity:0;transform:translateY(-4px)}
  to {opacity:1;transform:translateY(0)}
}
.menu-toggle,.mobile-nav {
  display:none
}
/* The vehicle is the opening's main visual; the brand stays in the header. */
.hero {position:relative;isolation:isolate;overflow:hidden;min-height:740px;height:calc(100svh - var(--header-height));padding:64px var(--space) 72px}
.hero-media {position:absolute;inset:0;z-index:-2}
.hero-camera {position:absolute;inset:0;transform-origin:65% 65%}
.hero-camera>picture {display:block;width:100%;height:100%}
.hero-camera img {width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:brightness(.92)}
.paint-light {position:absolute;top:-15%;bottom:-15%;left:-40%;width:40%;background:linear-gradient(110deg,transparent 18%,#ffffff08 35%,#ffffff35 50%,#ffffff08 65%,transparent 82%);mix-blend-mode:soft-light;opacity:.5;pointer-events:none}
/* taste-skill-ignore: neutral photographic scrims provide text contrast over the actual hero photo. */ .hero-shade {position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#08090bdd,transparent 85%),linear-gradient(180deg,#0c0d0f70,transparent 65%,#0c0d0f60)}
.hero-content {max-width:900px}
.hero h1 {font-size:var(--type-display);line-height:1.08;letter-spacing:-.055em}
.hero-content>p {font-size:var(--type-lead);margin-top:28px;max-width:38ch}
.hero-content .hero-location {font-size:var(--type-small);margin-top:16px;color:var(--muted)}
.hero-buttons {display:flex;align-items:center;gap:28px;margin-top:28px}
@media(max-width:850px) {
.hero {padding-top:48px;min-height:780px}
.hero h1 {font-size:clamp(42px,7vw,64px)}
.hero-camera {top:auto;aspect-ratio:1}
.hero-camera>picture {mask-image:linear-gradient(180deg,transparent,#000 18%)}
.paint-light {top:30%;bottom:0}
.hero-camera img {object-fit:contain;object-position:center bottom}
}
@media(max-width:600px) {
.hero {padding-top:36px;min-height:768px;height:calc(100svh - var(--header-height));max-height:980px}
.hero h1 {font-size:clamp(28px,9.3vw,48px)}
.hero-content>p {margin-top:22px;font-size:18px;max-width:31ch}
.hero-content .hero-location {font-size:var(--type-small);margin-top:16px}
.hero-buttons {flex-direction:column;align-items:flex-start;gap:8px;margin-top:24px}
.hero-buttons .text-link {font-size:var(--type-small)}
.hero-media {inset:285px 0 0}
.hero-camera img {object-fit:contain;object-position:center bottom;filter:none}
/* taste-skill-ignore: neutral photographic scrim, not a decorative gradient. */ .hero-shade {background:linear-gradient(180deg,#0c0d0f 0,#0c0d0f 37%,#0c0d0f90 47%,transparent 65%,#0c0d0f50)}
}
@media(max-width:370px) {.hero {min-height:760px}.hero-content>p {font-size:16px}.hero-media {inset:330px 0 0}}

/* Controls */
.button {
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:15px 22px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:var(--panel);
  color:var(--silver);
  font-size:var(--type-body);
  font-weight:600;
  line-height:1.4;
  text-align:left;
  transition:background var(--duration),border-color var(--duration),color var(--duration),transform var(--duration) var(--ease)
}
.button svg {
  width:20px;
  height:20px;
  transition:transform var(--duration) var(--ease)
}
.button:hover {
  background:var(--control-hover)
}
.button:active {
  transform:translateY(1px)
}
.button-red {
  background:var(--red);
  color:white
}
.button-red:hover {
  background:var(--deep-red)
}
.button-light {
  background:var(--silver);
  color:var(--ink)
}
.button-light:hover {
  background:white
}
.button-outline {
  background:transparent;
  border-color:var(--control-line)
}
.button-outline:hover {
  background:var(--panel);
  border-color:#777a82
}
.header-contact.button {
  min-height:48px;
  padding:12px 16px;
  font-size:var(--type-small);
  font-weight:500;
  gap:12px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:48px;
  font-size:var(--type-body)
}
.text-link svg {
  width:18px;
  height:18px
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.brand-strip {
  padding:30px var(--space);
  background:var(--panel)
}
.brand-strip-track {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-family:var(--display);
  font-size:var(--type-lead);
  font-weight:500;
  letter-spacing:-.03em
}
/* Sections share the same frame and five type roles. */
.section-pad {
  padding:var(--section-space) var(--space)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:48px;
  margin-bottom:56px
}
.section-heading h2 {
  max-width:17ch
}
.section-heading>p {
  max-width:35ch;
  font-size:var(--type-body)
}
.services,.studios {
  background:var(--silver);
  color:var(--ink)
}
.service-explorer {
  display:grid;
  grid-template-columns:minmax(230px,.7fr) minmax(0,2fr);
  gap:40px;
  align-items:start
}
.service-tabs {
  display:none
}
.ui-ready .service-tabs {
  display:flex;
  flex-direction:column;
  gap:0
}
.service-tab {
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  gap:18px;
  padding:24px 16px;
  min-height:72px;
  border:0;
  border-radius:0;
  position:relative;
  transition:background var(--duration),color var(--duration);
  /* taste-skill-ignore: retain the original restrained separators in service and branch lists. */ border-top:1px solid #c7c9c9;
  background:transparent;
  font-size:var(--type-body);
  font-weight:600
}
.service-tab:hover {
  background:#e3e4e2;
  color:var(--deep-red)
}
.service-tab svg {
  width:18px;
  height:18px
}
.service-tab[aria-selected=true],.service-tab[aria-expanded=true] {
  background:#e3e4e2;
  color:var(--deep-red)
}
.service-tab[aria-selected=true]:before,.service-tab[aria-expanded=true]:before {
  content:"";
  position:absolute;
  left:0;
  top:22px;
  bottom:22px;
  width:3px;
  border-radius:2px;
  background:var(--red)
}
.service-tab svg {
  transition:transform var(--duration) var(--ease)
}
.service-panels {
  min-width:0
}
.service-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:center;
  gap:30px;
  padding:0;
  background:transparent;
  color:var(--ink)
}
.service-panel+.service-panel {
  margin-top:24px
}
.service-details {
  min-width:0
}
.service-details h3 {
  font-family:var(--display);
  font-size:var(--type-lead);
  letter-spacing:-.03em
}
.service-details>p {
  font-size:var(--type-body);
  margin-top:24px;
  color:var(--ink)
}
.service-tags {
  margin:24px 0 28px;
  padding-left:18px;
  color:#4e5358;
  font-size:var(--type-small)
}
.service-tags li+li {
  margin-top:8px
}
.service-request {
  width:100%;
  font-size:var(--type-body);
  gap:12px
}
.service-request[data-added=true] {
  background:var(--ink);
  color:var(--silver)
}
.service-request[data-added=true]:hover {
  background:#303237
}
.service-visual {
  position:relative;
  min-width:0;
  background:#090a0b
}
.service-visual img {
  width:100%;
  height:auto;
  aspect-ratio:2/3;
  object-fit:contain
}
.service-panels:empty {
  display:none
}
/* The request is both the form's summary and its WhatsApp payload. */
.care {
  background:var(--deep-red);
  color:white
}
.care .section-heading h2 {
  max-width:18ch
}
.care-form {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:64px;
  align-items:start
}
.care-form fieldset {
  border:0;
  padding:0;
  margin:0
}
.care-form legend {
  font-size:var(--type-lead);
  font-weight:600;
  margin-bottom:24px
}
.care-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.care-options label {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  padding:18px 16px;
  border:1px solid #ffffff55;
  border-radius:var(--radius);
  background:#930d19;
  gap:12px;
  cursor:pointer;
  font-size:var(--type-body);
  isolation:isolate;
  transition:background var(--duration),border-color var(--duration),color var(--duration)
}
.care-options input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  appearance:none;
  border:0;
  border-radius:var(--radius);
  cursor:pointer
}
.care-options span,.care-options svg {
  pointer-events:none
}
.care-options svg {
  width:20px;
  height:20px;
  padding:2px;
  border:1px solid #ffffff99;
  border-radius:var(--radius-small);
  transition:background var(--duration),border-color var(--duration)
}
.care-options svg use {
  opacity:0
}
.care-options label:has(input:checked) {
  background:var(--silver);
  border-color:var(--silver);
  color:var(--ink)
}
.care-options label:has(input:checked) svg {
  background:var(--ink);
  border-color:var(--ink);
  color:white
}
.care-options label:has(input:checked) svg use {
  opacity:1
}
.care-options label:hover {
  background:#7b0b15;
  border-color:#ffffff99
}
.care-options label:has(input:checked):hover {
  background:white;
  border-color:white
}
.form-fields {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:end;
  gap:24px;
  margin-top:32px
}
.form-fields label {
  display:block;
  min-width:0;
  font-size:var(--type-small);
  font-weight:500
}
.form-fields label>span {
  display:inline;
  margin-left:4px;
  color:#f2ccd0;
  font-weight:400
}
.form-fields input,.form-fields select,.care-city-picker>.city-trigger {
  display:block;
  width:100%;
  min-height:56px;
  background:#930d19;
  color:white;
  border:1px solid #ffffff66;
  border-radius:var(--radius);
  padding:14px 16px;
  margin-top:12px;
  font-size:var(--type-body);
  font-weight:400;
  transition:background var(--duration),border-color var(--duration)
}
.form-fields input:hover,.form-fields select:hover,.care-city-picker>.city-trigger:hover,.care-city-picker>.city-trigger[aria-expanded=true] {
  border-color:#ffffffaa;
  background:#7b0b15
}
.form-fields input:focus-visible {
  background:#7b0b15
}
.form-fields input::placeholder {
  color:#f2ccd0;
  opacity:1
}
.form-fields input {
  caret-color:white
}
.form-fields select {
  color-scheme:dark;
  cursor:pointer
}
.form-fields select option {
  background:var(--ink)
}
.care-city-picker>.city-trigger {
  display:flex;
  gap:10px;
  text-align:left
}
.care-city-picker>.city-trigger>span {
  flex:1
}
.care-city-picker>.city-trigger>.city-pin {
  width:18px;
  height:18px
}
.care-city-picker .city-popover {
  top:auto;
  bottom:calc(100% + 10px);
  max-height:min(420px,70dvh)
}
.care-review {
  padding:32px;
  background:var(--silver);
  color:var(--ink);
  min-width:0;
  border-radius:var(--radius)
}
.care-review :focus-visible {outline-color:var(--red)}
.care-review h3 {
  font-family:var(--display);
  font-size:var(--type-lead);
  letter-spacing:-.03em
}
#care-selected {
  list-style:none;
  margin:24px 0;
  padding:0
}
#care-selected li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:48px;
  font-size:var(--type-body)
}
#care-selected li+li {
  margin-top:8px
}
#care-selected button {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:44px;
  height:44px;
  background:transparent;
  border-radius:var(--radius-small);
  color:var(--ink);
  border:0
}
#care-selected button:hover {
  background:#dde0da;
  color:var(--deep-red)
}
#care-selected svg {
  width:18px;
  height:18px
}
.care-empty {
  max-width:28ch
}
.care-context {
  margin:28px 0;
  display:grid;
  gap:20px
}
.care-context dt {
  font-size:var(--type-small);
  color:#52575c
}
.care-context dd {
  margin:6px 0 0;
  font-size:var(--type-body);
  overflow-wrap:anywhere
}
.care-review>#care-count {
  display:block;
  font-size:var(--type-small);
  margin-bottom:18px;
  color:#52575c
}
.care-review>.button {
  width:100%
}
.care-review noscript a {
  text-decoration:underline
}
/* Consultation, branch details and close. */
.approach {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:80px;
  align-items:center
}
.approach-photo {
  position:relative;
  overflow:hidden;
  aspect-ratio:3/4
}
.approach-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 66%
}
.approach h2 {
  max-width:16ch
}
.approach-lead {
  margin-top:28px;
  color:var(--silver);
  font-size:var(--type-body)
}
.approach-points {
  display:grid;
  gap:32px;
  margin-top:40px
}
.approach-points h3 {
  font-size:var(--type-lead)
}
.approach-points p {
  font-size:var(--type-body);
  color:var(--muted);
  margin-top:12px
}
.studio-layout {
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:48px;
  align-items:start
}
.studio-tabs {
  display:flex;
  flex-direction:column;
  gap:0
}
.studio-tabs>button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:transparent;
  border:0;
  /* taste-skill-ignore: retain the original restrained separators in service and branch lists. */ border-top:1px solid #c7c9c9;
  text-align:left;
  padding:28px 16px;
  border-radius:0;
  position:relative;
  transition:background var(--duration),color var(--duration);
  font-family:var(--display);
  font-size:var(--type-lead);
  font-weight:500;
  letter-spacing:-.03em;
  min-height:72px
}
.studio-tabs svg {
  width:20px;
  height:20px
}
.studio-tabs>button[aria-selected=true] {
  background:#e3e4e2;
  color:var(--deep-red)
}
.studio-tabs>button:hover {
  background:#e3e4e2;
  color:var(--deep-red)
}
.studio-panel {
  padding:40px;
  background:transparent;
  min-width:0
}
.studio-line {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:var(--type-body);
  margin-bottom:24px
}
.studio-line svg {
  color:var(--deep-red);
  width:20px;
  height:20px
}
.studio-panel h3 {
  font-family:var(--display);
  font-size:var(--type-lead);
  letter-spacing:-.03em;
  line-height:1.4;
  max-width:30ch
}
.studio-phone {
  display:inline-flex;
  align-items:center;
  min-height:48px;
  margin-top:16px;
  font-size:var(--type-lead);
  font-variant-numeric:tabular-nums
}
.studio-actions {
  display:flex;
  align-items:center;
  gap:16px 24px;
  flex-wrap:wrap;
  margin-top:24px
}
.studio-actions>.button {
  width:100%
}
.faq {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:64px
}
.faq h2 {
  max-width:16ch
}
.faq-list {
  display:grid;
  gap:0;
  min-width:0
}
.faq-list details {
  /* taste-skill-ignore: retain the original FAQ separators. */ border-top:1px solid #343538;
  padding:0
}
.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 0;
  min-height:72px;
  font-size:var(--type-body);
  cursor:pointer;
  list-style:none
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary svg {
  width:32px;
  height:32px;
  padding:7px;
  border:1px solid var(--control-line);
  border-radius:var(--radius-small);
  transition:transform .25s
}
.faq-list details[open] summary svg {
  transform:rotate(180deg);
  background:var(--control-hover)
}
.faq-list p {
  font-size:var(--type-body);
  color:var(--muted);
  padding-bottom:24px
}
.closing {
  background:var(--red);
  color:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:48px;
  padding-top:80px;
  padding-bottom:80px
}
.closing h2 {
  max-width:17ch
}
.closing-link {
  background:var(--ink);
  flex-shrink:0
}
.closing-link:hover {
  background:#303237
}
.footer {
  padding:64px var(--space) 32px;
  background:#151618
}
.footer-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  margin-bottom:48px
}
.footer-intro {
  display:flex;
  gap:24px;
  align-items:center
}
.footer-intro>.shield {
  width:48px;
  height:72px;
  object-fit:contain
}
.footer-intro h2 {
  font-size:var(--type-lead);
  letter-spacing:-.03em
}
.footer-nav {
  display:flex;
  gap:28px;
  font-size:var(--type-body)
}
.footer-nav a {
  display:flex;
  align-items:center;
  min-height:48px
}
.footer-branches {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px
}
.footer-branch h3 {
  font-family:var(--display);
  font-size:var(--type-lead);
  letter-spacing:-.03em
}
.footer-branch p {
  font-size:var(--type-body);
  color:var(--muted);
  margin-top:20px;
  max-width:26ch
}
.footer-phone {
  display:inline-flex;
  align-items:center;
  min-height:48px;
  margin-top:8px;
  font-variant-numeric:tabular-nums
}
.footer-branch-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 24px
}
.footer-branch-actions a {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  font-size:var(--type-small)
}
.footer-branch-actions svg {
  width:16px;
  height:16px
}
.footer-signature {
  display:block;
  margin:56px 0 32px
}
.footer-signature img {
  width:100%;
  height:auto
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:var(--type-small);
  color:var(--muted)
}
.footer-bottom>a {
  display:flex;
  gap:12px;
  align-items:center;
  min-height:48px
}
.footer-bottom svg {
  width:18px;
  height:18px
}
.mobile-bottom {
  display:none
}
@media(max-width:1360px) {
  .header {
    gap:20px
  }
  .wordmark {
    width:165px
  }
  .desktop-nav {
    gap:20px
  }
  .header-actions {
    gap:16px
  }
  .header-contact {
    font-size:var(--type-small)
  }
  .city-picker>button {
    min-width:135px
  }
  .service-explorer {
    gap:28px
  }
  .service-panel {
    gap:24px;
    padding:24px
  }
  .care-form {
    gap:40px
  }
}
@media(max-width:1180px) {
  .header-contact {
    display:none
  }
  .approach {
    gap:48px
  }
  .footer-branches {
    gap:24px
  }
}
@media(max-width:1100px) {
  .desktop-nav {
    display:none
  }
  .menu-toggle {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    width:44px;
    height:48px;
    padding:10px;
    background:none;
    border:0
  }
  .menu-toggle span {
    width:24px;
    height:2px;
    background:var(--silver);
    transition:transform .25s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(4px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-4px) rotate(-45deg)
  }
  .mobile-nav:not([hidden]) {
    display:flex;
    position:fixed;
    z-index:99;
    top:var(--header-height);
    bottom:0;
    left:0;
    right:0;
    max-height:calc(100dvh - var(--header-height));
    overflow:auto;
    background:#151618;
    padding:32px var(--space) max(32px,env(safe-area-inset-bottom));
    flex-direction:column;
    gap:12px
  }
  .mobile-nav a {
    font-family:var(--display);
    font-size:var(--type-heading);
    padding:20px 0;
    line-height:1.3
  }
  .service-explorer {
    display:block
  }
  .service-tabs {
    gap:0!important
  }
  .service-tab {
    font-size:var(--type-lead);
    min-height:76px;
    padding:22px 0
  }
  .service-panel {
    margin:0 0 14px!important;
    grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
    padding:4px 0 28px;
    gap:40px
  }
  .service-details h3 {
    display:none
  }
  .service-details>p {
    margin-top:0
  }
  .care-form {
    gap:32px
  }
  .care-options {
    grid-template-columns:1fr
  }
  .form-fields {
    grid-template-columns:1fr
  }
  .faq {
    grid-template-columns:1fr;
    gap:40px
  }
  .faq h2 {
    max-width:none
  }
  .footer-nav {
    gap:20px
  }
}
@media(max-width:850px) {
  :root {
    --header-height:82px
  }
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:24px;
    margin-bottom:36px
  }
  .section-heading>p {
    max-width:50ch
  }
  .care-form {
    grid-template-columns:1fr
  }
  .care-options {
    grid-template-columns:1fr 1fr
  }
  .form-fields {
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)
  }
  .care-review {
    margin-top:4px
  }
  .approach {
    gap:32px
  }
  .approach h2 {
    font-size:var(--type-heading)
  }
  .studio-layout {
    gap:28px
  }
  .studio-tabs>button {
    padding:20px 16px
  }
  .studio-panel {
    padding:28px
  }
  .footer-head {
    align-items:flex-start;
    flex-direction:column;
    gap:28px
  }
  .footer-branches {
    grid-template-columns:1fr;
    gap:36px
  }
  .footer-branch p {
    max-width:none;
    margin-top:12px
  }
  .footer-branch-actions {
    gap:32px
  }
  .closing {
    flex-direction:column;
    align-items:flex-start;
    gap:32px
  }
  .closing h2 {
    max-width:20ch
  }
}
@media(max-width:600px) {
  :root {
    --header-height:76px;
    --type-display:clamp(29px,7.7vw,44px);
    --type-heading:clamp(25px,6.6vw,36px);
    --type-lead:20px;
    --section-space:72px
  }
  .header {
    gap:8px
  }
  .brand {
    gap:8px
  }
  .brand .shield {
    width:27px;
    height:42px
  }
  .wordmark {
    width:135px
  }
  .header-actions {
    gap:8px
  }
  .header .city-picker>.city-trigger {
    min-width:0;
    gap:6px;
    padding:10px 4px;
    max-width:130px;
    background:none;
    border-color:transparent;
    font-size:var(--type-small)
  }
  .city-picker>button svg {
    width:13px;
    height:13px
  }
  .menu-toggle {
    width:44px;
    min-width:44px;
    padding:10px
  }
  .menu-toggle span {
    width:22px
  }
  .brand-strip {
    padding:24px var(--space)
  }
  .brand-strip-track {
    font-family:var(--body);
    font-size:var(--type-body);
    gap:12px 22px
  }
  .section-heading h2 {
    max-width:none
  }
  .service-tab {
    min-height:72px;
    font-family:var(--body);
    font-size:var(--type-body);
    padding:20px 16px
  }
  .service-panel {
    grid-template-columns:1fr;
    padding:0 0 28px;
    gap:28px
  }
  .service-details>p {
    font-size:var(--type-body)
  }
  .service-visual {
    margin:0 -24px -24px
  }
  .service-visual img {
    aspect-ratio:2/3
  }
  .care-options {
    grid-template-columns:1fr;
    gap:10px
  }
  .care-options label {
    min-height:64px;
    padding:16px 18px
  }
  .form-fields {
    grid-template-columns:1fr;
    gap:24px
  }
  .care-review {
    padding:24px
  }
  .care-review>.button {
    padding:16px;
    gap:12px
  }
  .care-context dd {
    line-height:1.6
  }
  .approach {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:36px
  }
  .approach-photo {
    aspect-ratio:4/5
  }
  .approach-points {
    gap:28px
  }
  .studio-layout {
    grid-template-columns:1fr;
    gap:24px
  }
  .studio-tabs {
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px
  }
  .studio-tabs>button {
    font-family:var(--body);
    font-size:var(--type-small);
    letter-spacing:0;
    min-height:48px;
    padding:12px;
    flex:1;
    justify-content:center
  }
  .studio-tabs svg {
    display:none
  }
  .studio-panel {
    padding:28px 24px
  }
  .studio-panel h3 {
    font-size:var(--type-lead);
    max-width:none
  }
  .studio-phone {
    font-size:var(--type-lead)
  }
  .studio-actions {
    gap:12px 20px
  }
  .studio-actions>.button {
    padding:16px;
    gap:12px
  }
  .studio-actions>.text-link {
    font-size:var(--type-small)
  }
  .faq-list details {
    padding:0 20px
  }
  .faq-list summary {
    gap:16px
  }
  .closing {
    padding-top:64px;
    padding-bottom:64px
  }
  .closing h2 {
    max-width:none
  }
  .closing-link {
    width:100%;
    gap:16px
  }
  .footer {
    padding:48px var(--space) 112px
  }
  .footer-intro {
    gap:20px
  }
  .footer-intro>.shield {
    width:42px;
    height:64px
  }
  .footer-intro h2 {
    font-size:var(--type-lead)
  }
  .footer-nav {
    gap:12px 24px;
    flex-wrap:wrap;
    font-size:var(--type-small)
  }
  .footer-head {
    margin-bottom:36px
  }
  .footer-signature {
    margin:40px 0 24px
  }
  .footer-bottom {
    align-items:flex-start;
    gap:12px;
    flex-direction:column
  }
  .footer-bottom>a {
    min-height:44px
  }
  .mobile-bottom {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:90;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:#191a1d;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    font-size:var(--type-small)
  }
  .mobile-bottom>span {
    max-width:95px
  }
  .mobile-bottom>a {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:48px;
    padding:12px 16px;
    background:var(--red);
    color:white;
    font-weight:600
  }
  .mobile-bottom svg {
    width:18px;
    height:18px
  }
  .mobile-bottom.is-hidden {
    visibility:hidden;
    transform:translateY(110%)
  }
  body {
    padding-bottom:0
  }
}
@media(max-width:370px) {
  .wordmark {
    width:88px
  }
  .brand .shield {
    width:23px;
    height:36px
  }
  .header-actions {
    gap:2px
  }
  .city-picker>button {
    max-width:115px
  }
  .service-panel {
    padding:20px
  }
  .service-visual {
    margin:0 -20px -20px
  }
  .care-review {
    padding:20px
  }
  .care-review>.button {
    font-size:var(--type-small)
  }
  .studio-tabs>button {
    padding:12px 9px
  }
  .studio-panel {
    padding:24px 20px
  }
  .studio-actions>.button {
    font-size:var(--type-small)
  }
  .studio-actions>.text-link {
    font-size:var(--type-small)
  }
  .mobile-bottom {
    gap:8px;
    padding-left:12px;
    padding-right:12px
  }
  .mobile-bottom>a {
    padding:12px;
    gap:8px
  }
  .mobile-bottom>span {
    max-width:85px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
.ui-ready .service-panel {
  margin-top:0
}


/* Full service photographs remain available without extending the initial accordion. */
.service-visual>summary {display:none}
.service-visual[open]>img {display:block}
@media(max-width:1100px) {
  .service-panel {
    grid-template-columns:1fr;
    gap:24px;
  }
  .service-visual {
    margin:0;
    padding:0;
    background:#24262a;
  }
  .service-visual>summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:52px;
    padding:14px 18px;
    font-size:var(--type-body);
    cursor:pointer;
    list-style:none;
  }
  .service-visual>summary::-webkit-details-marker {
    display:none;
  }
  .service-visual>summary svg {
    width:18px;
    height:18px;
    transition:transform .2s;
  }
  .service-visual[open]>summary svg {
    transform:rotate(180deg);
  }
  .service-visual>img {
    width:100%;
    height:auto;
    max-height:720px;
    aspect-ratio:auto;
    object-fit:contain;
    background:#090a0b;
  }
}

@media(max-width:1100px) {
.service-visual {background:transparent}
/* taste-skill-ignore: this disclosure belongs to the same original service list. */ .service-visual>summary {border-top:1px solid #c7c9c9;padding:16px 0}
}
@media(max-width:600px) {
.header {position:relative}
html {scroll-padding-top:24px}
.service-visual {margin:0}
}
.service-tab[aria-selected=true] svg {transform:none}
.service-tab[aria-expanded=true] svg {transform:rotate(180deg)}

/* Keep every service and its native photo disclosure usable without scripting. */
html:not(.ui-ready) .service-explorer {display:block}
html:not(.ui-ready) .service-visual>summary {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:14px 18px;cursor:pointer;background:var(--silver);color:var(--ink)}

/* Two thumb-sized choices per row shorten the phone form without hiding its summary. */
@media(min-width:360px) and (max-width:600px) {
.care-options {grid-template-columns:repeat(2,minmax(0,1fr))}
.care-options label {min-height:76px;padding:14px 12px;gap:8px}
.care-options svg {width:20px;height:20px}
}

/* Precision controls on compact screens. */
@media(max-width:600px) {
  .city-picker>.city-trigger {min-width:0}
  .city-popover,.care-city-picker .city-popover {
    position:fixed;
    inset:auto 0 0;
    width:100%;
    max-width:none;
    max-height:calc(100dvh - 20px);
    margin:0;
    padding:16px 16px max(20px,env(safe-area-inset-bottom));
    border-radius:12px 12px 0 0;
    border-bottom:0
  }
  .city-popover:before {
    content:"";
    display:block;
    width:32px;
    height:3px;
    border-radius:2px;
    margin:0 auto 12px;
    background:#64676e
  }
  .city-popover[open] {animation:city-sheet-enter 220ms var(--ease)}
  .city-popover::backdrop {background:#000b}
  .city-popover-heading {padding:0 0 16px 8px}
  .city-popover-heading h2 {font-size:var(--type-body);color:var(--silver)}
  .city-options>button {min-height:80px}
  .care-city-picker>.city-trigger {max-width:none;padding:14px 16px;font-size:var(--type-body)}
  .menu-toggle {border:1px solid var(--control-line);border-radius:var(--radius)}
  .studio-tabs>button {border:1px solid #c7c9c9;border-radius:var(--radius-small)}
  .studio-tabs>button[aria-selected=true] {border-color:var(--deep-red)}
  .mobile-bottom>a {border-radius:var(--radius)}
}
@media(max-width:370px) {
  .header .city-picker>.city-trigger {max-width:115px}
  .care-options svg {width:20px;height:20px}
}
@keyframes city-sheet-enter {
  from {opacity:0;transform:translateY(16px)}
  to {opacity:1;transform:translateY(0)}
}
@media(hover:hover) and (pointer:fine) {
  .button-red:hover svg:has(use[href="#arrow"]) {transform:translate(2px,-2px)}
  .text-link:hover svg:has(use[href="#down"]) {transform:translateY(2px)}
}