*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.my-3{margin-top:.75rem;margin-bottom:.75rem}.mb-10{margin-bottom:2.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-32{margin-top:8rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}.min-w-0{min-width:0}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-20>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(5rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.object-cover{-o-object-fit:cover;object-fit:cover}.p-5{padding:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-28{padding-top:7rem;padding-bottom:7rem}.py-32{padding-top:8rem;padding-bottom:8rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-7{padding-top:1.75rem;padding-bottom:1.75rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pl-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pt-10{padding-top:2.5rem}.pt-2{padding-top:.5rem}.pt-32{padding-top:8rem}.pt-5{padding-top:1.25rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.capitalize{text-transform:capitalize}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.opacity-60{opacity:.6}.blur{--tw-blur:blur(8px)}.blur,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.sepia{--tw-sepia:sepia(100%)}.filter,.sepia{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:opacity-100:hover{opacity:1}.disabled\:opacity-20:disabled{opacity:.2}@media (min-width:768px){.md\:mt-40{margin-top:10rem}.md\:block{display:block}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:gap-8{gap:2rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:py-32{padding-top:8rem;padding-bottom:8rem}.md\:py-36{padding-top:9rem;padding-bottom:9rem}.md\:py-40{padding-top:10rem;padding-bottom:10rem}.md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.md\:pt-40{padding-top:10rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:1024px){.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:col-start-7{grid-column-start:7}.lg\:col-start-8{grid-column-start:8}.lg\:block{display:block}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:gap-8{gap:2rem}}
/* ---------- Tefi Nail Art — base styles ---------- */
:root {
  /* Botanical (default) */
  --cream: #F1E9D6;
  --bone: #E2D8BE;
  --sage: #8B9D7F;
  --sage-deep: #4D5C45;
  --clay: #C97456;
  --clay-deep: #9F543A;
  --ink: #2A241B;
  --ink-soft: #5A4F3F;
  --accent: var(--clay);
  --accent-deep: var(--clay-deep);
  --label-color: var(--sage-deep);
  --error: #b3506e;

  /* Display + body fonts (overridable per direction) */
  --font-display: 'Prata', Georgia, serif;
  --font-body: 'Albert Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Prata', Georgia, serif;
}

/* Direction: blush-chrome — soft pink, pearly, mirrored */
.dir-blush {
  --cream: #F4ECE6;
  --bone: #E8D8D2;
  --sage: #C9B8C9;          /* dusty mauve */
  --sage-deep: #6B5468;
  --clay: #D49AA0;          /* blush */
  --clay-deep: #9C5E66;
  --ink: #2A2128;
  --ink-soft: #5C4D54;
  --accent: var(--clay);
  --accent-deep: var(--clay-deep);
  --label-color: var(--sage-deep);
}

/* Direction: ink — dark editorial, neon-edge */
.dir-ink {
  --cream: #15130F;
  --bone: #1F1B16;
  --sage: #3B4A37;
  --sage-deep: #B5C4AC;
  --clay: #E8B6A0;
  --clay-deep: #F4D4BE;
  --ink: #F2EADD;
  --ink-soft: #B4A99A;
  --accent: var(--clay);
  --accent-deep: var(--clay-deep);
  --label-color: var(--sage-deep);
}

/* Direction: lilac — matches the Tefi logo (lilac brand) */
.dir-lilac {
  --cream: #F6F1F7;
  --bone: #E8DEEC;
  --sage: #C7B0D6;          /* lilac mid */
  --sage-deep: #6E4F84;
  --clay: #C58CE0;          /* signature lilac */
  --clay-deep: #8A4BB0;
  --ink: #1F1828;
  --ink-soft: #5A4E66;
  --accent: var(--clay);
  --accent-deep: var(--clay-deep);
  --label-color: var(--sage-deep);
}

/* Direction: porcelain — milky, near-white, cool minimal */
.dir-porcelain {
  --cream: #F4F2EE;
  --bone: #E5E1D9;
  --sage: #B8C2C0;          /* dove */
  --sage-deep: #5C6967;
  --clay: #C0A595;          /* warm taupe */
  --clay-deep: #806454;
  --ink: #1C1C1C;
  --ink-soft: #5A5854;
  --accent: var(--clay);
  --accent-deep: var(--clay-deep);
  --label-color: var(--sage-deep);
}

/* Direction: terracotta — sunbaked, warm clay & cream */
.dir-terracotta {
  --cream: #F5E7D6;
  --bone: #E5CDB4;
  --sage: #B5876A;          /* sand */
  --sage-deep: #7E4F35;
  --clay: #C24B27;          /* terracotta */
  --clay-deep: #862E14;
  --ink: #2B1A10;
  --ink-soft: #6B4A36;
  --accent: var(--clay);
  --accent-deep: var(--clay-deep);
  --label-color: var(--sage-deep);
}

/* Direction: jade — emerald studio, soft & rich */
.dir-jade {
  --cream: #F1EEDF;
  --bone: #DCD8C4;
  --sage: #4F7C6A;          /* jade */
  --sage-deep: #1F4438;
  --clay: #C58A5C;          /* honey */
  --clay-deep: #8E5A30;
  --ink: #1A2520;
  --ink-soft: #4D5C55;
  --accent: var(--clay);
  --accent-deep: var(--clay-deep);
  --label-color: var(--sage-deep);
}

/* Direction: midnight-lilac — dark mode with the lilac brand colour */
.dir-midnight {
  --cream: #15131A;
  --bone: #1F1B26;
  --sage: #3B2F46;
  --sage-deep: #C9B0DC;
  --clay: #D9A8F0;          /* glowing lilac */
  --clay-deep: #EFD1FF;
  --ink: #F2EAF5;
  --ink-soft: #B0A2BA;
  --accent: var(--clay);
  --accent-deep: var(--clay-deep);
  --label-color: var(--sage-deep);
}

/* Direction: butter — soft buttery yellow & olive */
.dir-butter {
  --cream: #F6EFD5;
  --bone: #E8DDB0;
  --sage: #9CA66B;          /* olive */
  --sage-deep: #4F5A2A;
  --clay: #D89A4A;          /* amber */
  --clay-deep: #9C661F;
  --ink: #2A2410;
  --ink-soft: #5E5430;
  --accent: var(--clay);
  --accent-deep: var(--clay-deep);
  --label-color: var(--sage-deep);
}

html, body { background: var(--cream); margin: 0; }
html {
  /* Smooth in-page anchor scrolling, with room reserved for the fixed nav. */
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Stop horizontal scroll-chaining from triggering a back-swipe on iOS. */
  overscroll-behavior-y: none;
}

/* Skip link — visible only on keyboard focus, lets keyboard users jump past the nav. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  transition: top 0.2s ease-out;
}
.skip-link:focus { top: 16px; }

/* Visible focus ring for keyboard users only. Hidden for mouse clicks. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible { outline-offset: 4px; }

/* Don't focus-ring the <main> wrapper — it's only there as a skip-link target. */
main:focus { outline: none; }
main:focus-visible { outline: none; }

.font-display { font-family: var(--font-display); font-feature-settings: 'ss01' on; }
.font-body { font-family: var(--font-body); }
.font-script { font-family: var(--font-script); }

/* Type scale */
.hero-h1 { font-size: clamp(4rem, 13vw, 11rem); line-height: 0.88; letter-spacing: -0.04em; font-weight: 400; }
.section-h { font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 0.95; letter-spacing: -0.03em; font-weight: 400; }
.cta-h { font-size: clamp(3.25rem, 9.5vw, 8rem); line-height: 0.9; letter-spacing: -0.04em; font-weight: 400; }
.label-tiny { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; }

/* Layout helpers */
.layout-asymmetric .hero-italic { padding-left: 12% !important; }
.layout-centered .hero-block { text-align: center; padding-left: 0 !important; }
.layout-centered .hero-italic { padding-left: 0 !important; }
.layout-stack .hero-italic { padding-left: 0 !important; }

/* Reveal animations */
.reveal { opacity: 1; transform: none; transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1); }
.reveal.reveal-pending { opacity: 0; transform: translateY(40px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hover line */
.hover-line { position: relative; display: inline-block; }
.hover-line::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0%; background: currentColor;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}
.hover-line:hover::after { width: 100%; }

/* Service rows */
.service-row { transition: padding-left 0.6s cubic-bezier(0.16,1,0.3,1); cursor: pointer; }
.service-row:hover { padding-left: 1rem; }
.service-row:hover .service-arrow { transform: translateX(8px); opacity: 1; }
.service-row:hover .service-name { color: var(--accent-deep); }
.service-arrow { transition: all 0.6s cubic-bezier(0.16,1,0.3,1); opacity: 0; }
.service-name { transition: color 0.4s; }

/* Gallery carousel: an editorial contact sheet that stays swipe-native on mobile. */
.gallery-carousel-shell { position: relative; }
.gallery-carousel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.gallery-carousel-hint {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.gallery-carousel-controls { display: flex; align-items: center; gap: 10px; }
.gallery-carousel-count {
  min-width: 78px;
  margin-right: 8px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}
.gallery-carousel-button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  transition: color 280ms ease, background 280ms ease, border-color 280ms ease, transform 280ms ease, opacity 280ms ease;
}
.gallery-carousel-button:hover:not(:disabled) {
  color: var(--cream);
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.gallery-carousel-button:focus-visible,
.gallery-carousel:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }
.gallery-carousel-button:disabled { opacity: 0.28; cursor: not-allowed; }
.gallery-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 390px);
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 1px 12px;
  touch-action: pan-x pinch-zoom;
}
.gallery-carousel::-webkit-scrollbar { display: none; }
.gallery-carousel-slide {
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: opacity 600ms ease, transform 800ms cubic-bezier(0.16,1,0.3,1);
}
.gallery-carousel-image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bone);
  box-shadow: 0 20px 44px -34px color-mix(in srgb, var(--ink) 58%, transparent);
}
.gallery-carousel-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.gallery-carousel-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter, sepia(0.12) saturate(0.9) brightness(0.97));
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1), filter 0.5s ease;
}
.gallery-carousel-slide:hover img { transform: scale(1.025); }
.gallery-carousel-progress {
  height: 1px;
  margin-top: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}
.gallery-carousel-progress span {
  display: block;
  height: 100%;
  min-width: 2.5%;
  background: var(--accent-deep);
  transition: width 450ms cubic-bezier(0.16,1,0.3,1);
}
@media (min-width: 768px) {
  .gallery-carousel { grid-auto-columns: min(35vw, 420px); }
}
@media (min-width: 1280px) {
  .gallery-carousel { grid-auto-columns: calc((100% - 48px) / 3); }
}
@media (max-width: 520px) {
  .gallery-section { padding-top: 6rem; padding-bottom: 6rem; }
  .gallery-carousel-toolbar { margin-bottom: 14px; }
  .gallery-carousel {
    grid-auto-columns: min(82vw, 330px);
    gap: 12px;
    margin-right: -24px;
    padding-right: 24px;
    scroll-padding-inline: 0;
  }
  .gallery-carousel-image-wrap {
    border-radius: 3px;
    box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--ink) 68%, transparent);
  }
  .gallery-carousel-hint { font-size: 0.85rem; }
  .gallery-carousel-count { min-width: 66px; margin-right: 2px; font-size: 0.82rem; }
  .gallery-carousel-button { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-carousel { scroll-behavior: auto; }
  .gallery-carousel-slide,
  .gallery-carousel-image-wrap img,
  .gallery-carousel-progress span { transition: none; }
}

/* ---------- Animation styles (controlled by .anim-*) ---------- */
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
.floaty { animation: float 9s ease-in-out infinite; }
@keyframes float2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(18px) rotate(-2deg); } }
.floaty2 { animation: float2 11s ease-in-out infinite; }

/* Still — disable shape motion entirely */
.anim-still .floaty,
.anim-still .floaty2 { animation: none !important; }
.anim-still .reveal { transition-duration: 0.6s !important; }

/* Soft is the default — no overrides needed */

/* Lively — faster, larger drift */
@keyframes lively-1 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(8deg); } }
@keyframes lively-2 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(34px) rotate(-6deg); } }
.anim-lively .floaty  { animation: lively-1 5s ease-in-out infinite; }
.anim-lively .floaty2 { animation: lively-2 6s ease-in-out infinite; }

/* Breathe — pulsing scale */
@keyframes breathe-1 { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.12) rotate(2deg); } }
@keyframes breathe-2 { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(0.9) rotate(-3deg); } }
.anim-breathe .floaty  { animation: breathe-1 6s ease-in-out infinite; transform-origin: center; }
.anim-breathe .floaty2 { animation: breathe-2 7.5s ease-in-out infinite; transform-origin: center; }

/* Orbit — slow rotation */
@keyframes orbit-1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.anim-orbit .floaty  { animation: orbit-1 40s linear infinite; transform-origin: center; }
.anim-orbit .floaty2 { animation: orbit-2 55s linear infinite; transform-origin: center; }

/* Spring — bouncy reveal entrance */
.anim-spring .reveal { transition: opacity 0.9s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) !important; transform: translateY(60px) scale(0.96); }
.anim-spring .reveal.is-visible { transform: translateY(0) scale(1); }
@keyframes spring-1 { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-22px) rotate(4deg); } 50% { transform: translateY(-14px) rotate(2deg); } 70% { transform: translateY(-22px) rotate(4deg); } }
.anim-spring .floaty  { animation: spring-1 4s cubic-bezier(0.5, 1.5, 0.5, 1) infinite; }
.anim-spring .floaty2 { animation: spring-1 5s cubic-bezier(0.5, 1.5, 0.5, 1) infinite reverse; }

/* Service row hover — already animated; spring gives extra push */
.anim-spring .service-row:hover { padding-left: 1.5rem; }
.anim-lively .service-row:hover { padding-left: 1.5rem; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .floaty, .floaty2 { animation: none !important; }
}

/* Selection */
::selection { background: var(--accent); color: var(--cream); }

/* Grain */
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.dir-ink .grain { mix-blend-mode: screen; opacity: 0.15; }

/* ---------- Services backgrounds ---------- */
a, button { cursor: pointer; }

/* The inner content sits above the absolutely-positioned background. */
#services > :not(.absolute) { position: relative; z-index: 1; }
#services > .relative { position: relative; z-index: 1; }

/* Text inversion for dark variants */
.services-bg-ink h2, .services-bg-ink h3, .services-bg-ink .service-name,
.services-bg-ink .service-row .font-display { color: var(--cream); }
.services-bg-ink p, .services-bg-ink span { color: color-mix(in srgb, var(--cream) 80%, transparent); }
.services-bg-ink .service-row { border-color: color-mix(in srgb, var(--cream) 18%, transparent) !important; }
.services-bg-ink .service-row:first-child { border-top-color: color-mix(in srgb, var(--cream) 18%, transparent); }
.services-bg-ink .service-row:hover .service-name { color: var(--accent); }

.services-bg-sage h2, .services-bg-sage h3, .services-bg-sage .service-name,
.services-bg-sage .service-row .font-display { color: var(--cream); }
.services-bg-sage p, .services-bg-sage .service-row span { color: color-mix(in srgb, var(--cream) 85%, transparent); }
.services-bg-sage .service-row { border-color: color-mix(in srgb, var(--cream) 24%, transparent) !important; }

/* Logo (transparent PNG, sometimes invert for dark) */
.logo-img { height: var(--logo-size, 38px); width: auto; display: block; transition: height 0.4s cubic-bezier(0.16,1,0.3,1); }
.dir-ink .logo-img,
.dir-midnight .logo-img { filter: brightness(1.6) contrast(0.9); }
.logo-img-large { height: 110px; width: auto; }

/* Booking modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 16, 12, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadein 0.3s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--cream);
  color: var(--ink);
  width: 100%; max-width: 720px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* internal scroll lives in .modal-body */
  border-radius: 6px;
  position: relative;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4);
  animation: pop 0.5s cubic-bezier(0.16,1,0.3,1);
}
/* The scrolling viewport. min-height:0 is the magic — without it, a flex child
   with overflow won't actually shrink, and content punches the modal taller. */
.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 200px;
  -webkit-overflow-scrolling: touch;
}
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }

.step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(42,36,27,0.18); transition: all 0.4s; }
.step-dot.active { background: var(--accent); width: 24px; border-radius: 99px; }
.step-dot.done { background: var(--accent-deep); }

.option-tile {
  border: 1px solid rgba(42,36,27,0.15);
  border-radius: 4px;
  padding: 18px 20px;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  background: transparent;
  text-align: left;
  width: 100%;
}
.option-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.option-tile.selected { border-color: var(--accent); background: rgba(201,116,86,0.08); }
.dir-ink .option-tile.selected { background: rgba(232,182,160,0.12); }

.time-pill {
  border: 1px solid rgba(42,36,27,0.18);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  background: transparent;
  color: var(--ink);
  transition: all 0.3s;
  cursor: pointer;
}
.time-pill:hover { border-color: var(--accent); }
.time-pill.selected { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.time-pill[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Nail-count stepper (booking extras) */
.stepper-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(42,36,27,0.22);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 18px; line-height: 1;
  transition: all 0.25s;
  cursor: pointer;
}
.stepper-btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent-deep); }
.stepper-btn[disabled] { opacity: 0.3; cursor: not-allowed; }

.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s;
  font-family: var(--font-display);
  position: relative;
}
.cal-day.dim { opacity: 0.25; cursor: default; pointer-events: none; }
.cal-day.unavail { color: var(--ink-soft); opacity: 0.4; cursor: not-allowed; }
.cal-day.avail:hover { background: rgba(201,116,86,0.12); }
.cal-day.selected { background: var(--ink); color: var(--cream); }
.cal-day.today::after {
  content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.cal-day.selected.today::after { background: var(--cream); }

.input-bare {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(42,36,27,0.25);
  padding: 10px 0;
  font: inherit;
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s;
}
.input-bare:focus { border-color: var(--accent); }
.input-bare::placeholder { color: var(--ink-soft); opacity: 0.6; }
.input-bare[aria-invalid="true"] { border-color: #b3506e; }
.field-hint {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.field-hint-error { color: #9f3f5d; }

.booking-verification-note {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 22%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 5px;
}
.booking-verification-note-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--cream);
  background: var(--accent-deep);
}
.booking-verification-note p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.verification-mailmark {
  position: relative;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--cream);
  background: var(--accent-deep);
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--ink) 75%, transparent);
}
.verification-mailmark::after {
  content: '';
  position: absolute;
  right: 1px;
  top: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--label-color);
  border: 3px solid var(--cream);
}
.pending-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
}
.pending-steps > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--cream) 75%, var(--bone) 25%);
}
.pending-steps span {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font: 500 11px/1 var(--font-body);
  color: var(--cream);
  background: var(--accent-deep);
}
.pending-steps p {
  margin: 1px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pending-help {
  max-width: 440px;
  margin: 18px auto 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pending-help a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-deep) 40%, transparent);
}
@media (max-width: 520px) {
  .pending-steps { grid-template-columns: 1fr; }
}

.btn-primary {
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.4s;
}
.btn-primary:hover:not(:disabled) { transform: scale(1.03); }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-ghost {
  background: transparent; color: var(--ink-soft); border: none; font-size: 13px;
  padding: 14px 4px;
}
.btn-ghost:hover { color: var(--ink); }

/* Tweaks panel polish (overrides over starter) */
.tefi-tweaks { font-family: var(--font-body); }


/* Top bar.
   Mobile: flex with logo on the left + actions on the right (the centered
   logo from the desktop layout cramps the contact buttons under 768px).
   Desktop ≥768px: 3-col grid with centered logo. */
.nav-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav-left {
  display: none;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
.nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.nav-center .logo-img { display: block; }
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
@media (min-width: 768px) {
  .nav-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; }
  .nav-left { display: flex; }
  .nav-right { gap: 12px; }
}

/* Quick-contact icon buttons in the nav (Phone + WhatsApp) */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--ink-soft);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: transparent;
  transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
  text-decoration: none;
}
.nav-icon-btn:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateY(-1px);
}
.nav-icon-btn-wa:hover { color: var(--accent-deep); }
.dir-ink .nav-icon-btn,
.dir-midnight .nav-icon-btn { border-color: color-mix(in srgb, var(--cream) 22%, transparent); }

/* Compact lang switcher + slightly tighter contact buttons on phones. */
@media (max-width: 540px) {
  .lang-switcher { font-size: 10px; padding: 2px; }
  .lang-switcher .lang-btn { padding: 3px 6px; }
  .nav-icon-btn { width: 32px; height: 32px; }
}

/* Language switcher pill */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 999px;
  padding: 3px;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
}
.lang-switcher .lang-btn {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 999px;
  font: inherit;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
}
.lang-switcher .lang-btn:hover { opacity: 0.85; }
.lang-switcher .lang-btn.active {
  background: var(--ink);
  color: var(--cream);
  opacity: 1;
}
.dir-ink .lang-switcher .lang-btn.active { background: var(--cream); color: var(--ink); }

/* Service badges */
.badge-popular,
.badge-free {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-popular {
  background: var(--accent);
  color: var(--cream);
}
.badge-free {
  background: transparent;
  color: var(--accent-deep);
  border: 1px solid color-mix(in srgb, var(--accent-deep) 55%, transparent);
}
.services-bg-ink .badge-free,
.services-bg-sage .badge-free {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 50%, transparent);
}
.services-bg-ink .badge-popular,
.services-bg-sage .badge-popular {
  background: var(--accent);
  color: var(--cream);
}


/* Hero ping-pong video background */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(var(--hero-sat, 1)) brightness(1.02);
  opacity: 1;
  /* Force GPU compositing for smoother playback */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
/* Soft cream wash so type stays legible. Vignette at edges, lighter in center. */
.hero-video-tint {
  position: absolute;
  inset: 0;
  opacity: var(--tint-opacity, 1);
  background:
    radial-gradient(ellipse at 30% 40%, transparent 0%, color-mix(in srgb, var(--cream) var(--tint-mid, 55%), transparent) var(--tint-inner, 60%), color-mix(in srgb, var(--cream) var(--tint-edge, 100%), transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--cream) var(--tint-top, 25%), transparent) 0%, transparent 30%, color-mix(in srgb, var(--cream) var(--tint-bottom, 70%), transparent) 100%);
  pointer-events: none;
}
/* Make sure hero content sits above the video */
section.relative > .max-w-7xl { position: relative; z-index: 1; }

/* Dark direction: invert the wash so video stays visible against ink */
.dir-ink .hero-video {
  mix-blend-mode: screen;
  opacity: 0.7;
  filter: saturate(0.9) brightness(0.95);
}
.dir-ink .hero-video-tint {
  background:
    radial-gradient(ellipse at 30% 40%, transparent 0%, color-mix(in srgb, var(--ink) 50%, transparent) 60%, var(--ink) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 30%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--ink) 70%, transparent) 100%);
}

/* ---------- Soft paper grain (warmer than the SVG turbulence)
   Used on darker accent blocks where the cream texture would otherwise feel digital. */
.paper-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.dir-ink .paper-grain,
.dir-midnight .paper-grain { mix-blend-mode: soft-light; opacity: 0.35; }

/* ---------- Hand-written eyebrow (replaces the tracked-out caps for personal sections) */
.eyebrow-script {
  font-family: var(--font-script);
  font-size: 1.55rem;
  letter-spacing: 0.005em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  transform: rotate(-1.2deg);
  transform-origin: left center;
}
.eyebrow-script::before {
  content: '';
  display: inline-block;
  width: 1.3em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transform: translateY(-0.35em);
}

/* ---------- Portrait frame in About: deckled photo with a real letterpress stamp */
.portrait-frame {
  border-radius: 2px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent),
    0 30px 40px -30px color-mix(in srgb, var(--ink) 35%, transparent);
  outline: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: visible;
}
.portrait-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Atelier card (replaces "05 / 1:1 / NL" stat block) */
.atelier-card {
  position: relative;
  padding: clamp(20px, 2.4vw, 32px) clamp(22px, 2.8vw, 38px);
  background: color-mix(in srgb, var(--cream) 55%, var(--bone) 45%);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 2px;
  /* Slightly rotated to feel pinned, not snapped to the grid */
  transform: rotate(-0.25deg);
  box-shadow:
    -1px 1px 0 color-mix(in srgb, var(--ink) 10%, transparent),
    0 24px 40px -28px color-mix(in srgb, var(--ink) 35%, transparent);
}
.atelier-card::before {
  /* a small ceramic plate / pin in the top-right */
  content: '';
  position: absolute;
  top: -10px; right: 28px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent-deep) 70%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ink) 25%, transparent);
}
.atelier-card-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.atelier-card-eyebrow { font-weight: 500; }
.atelier-card-rule { flex: 1; height: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.atelier-card-num {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  text-transform: none;
}
.atelier-card-title {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 18px;
  color: var(--ink);
}
.atelier-card-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 22px;
  row-gap: 8px;
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.45;
}
.atelier-card-list dt {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-deep);
  white-space: nowrap;
}
.atelier-card-list dd {
  margin: 0;
  color: var(--ink-soft);
}
.atelier-card-foot {
  display: flex; align-items: baseline; gap: 14px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.atelier-sign {
  font-size: clamp(2.4rem, 4vw, 3rem);
  line-height: 1;
  color: var(--accent-deep);
  transform: translateY(2px) rotate(-2deg);
  transform-origin: left center;
}
.atelier-sign-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Services category header — typographic only */
.cat-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 18px);
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid currentColor;
  border-color: rgba(42, 36, 27, 0.18);
}
.cat-head-name {
  letter-spacing: -0.015em;
  margin: 0;
}
.cat-head-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.005em;
  text-transform: none;
  position: relative;
  padding-left: 14px;
}
.cat-head-tag::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1px;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}
.services-bg-ink .cat-head,
.services-bg-sage .cat-head { border-color: color-mix(in srgb, var(--cream) 24%, transparent); }
.services-bg-ink .cat-head-tag::before,
.services-bg-sage .cat-head-tag::before { background: color-mix(in srgb, var(--cream) 50%, transparent); }

/* ---------- Reviews — drifting marquee on the sage block */
.reviews-section { isolation: isolate; }
.reviews-head {
  text-align: center;
  margin-bottom: clamp(36px, 6vw, 56px);
}
.reviews-eyebrow-script {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 1.55rem;
  line-height: 1;
  color: color-mix(in srgb, var(--cream) 80%, transparent);
  margin-bottom: 18px;
  transform: rotate(-1.2deg);
}
.reviews-headline {
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0;
  color: var(--cream);
  text-wrap: balance;
}

/* horizontal infinite ticker, drifting left → right */
.reviews-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.reviews-track {
  display: flex;
  align-items: stretch;
  gap: 22px;
  width: max-content;
  padding: 4px 0;          /* room for card shadow */
  animation: reviews-scroll-x 110s linear infinite;
  will-change: transform;
}
@keyframes reviews-scroll-x {
  /* track holds the set twice; start with the second copy in view, drift right
     until the first copy is in view → cards appear to move left → right */
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; transform: translate3d(-50%, 0, 0); }
}

.reviews-card {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  border-radius: 4px;
  padding: 22px 24px 18px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent),
    0 18px 30px -22px color-mix(in srgb, var(--ink) 50%, transparent);
}
.reviews-card-quote { flex: 1; }   /* push the byline to the bottom */
@media (max-width: 640px) { .reviews-card { flex-basis: 280px; } }
.reviews-card-quote {
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.45;
  margin: 0 0 18px;
  color: var(--ink);
  text-wrap: pretty;
}
.reviews-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.reviews-card-byline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reviews-card-name {
  font-size: 13px; font-weight: 500; letter-spacing: 0.005em;
  color: var(--ink);
}
.reviews-card-city {
  font-size: 12px; color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reviews-card-tag {
  flex: none;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-deep);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 22%, transparent);
}

/* Visit section — tappable phone/email + WhatsApp button */
.visit-link {
  color: inherit;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, color 0.3s;
}
.visit-link:hover { border-bottom-color: var(--accent); }
.visit-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: all 0.3s;
  text-decoration: none;
  white-space: nowrap;
}
.visit-whatsapp:hover {
  background: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}

/* SR-only utility */
.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;
}

/* ---------- Invitation card (replaces the BookingCta blob) */
.invitation-section { isolation: isolate; background: var(--cream); }
.invitation-card {
  position: relative;
  padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px);
  text-align: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 92%, var(--bone) 8%), color-mix(in srgb, var(--cream) 78%, var(--bone) 22%));
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 3px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    0 50px 80px -50px color-mix(in srgb, var(--ink) 35%, transparent);
}
.invitation-card::before,
.invitation-card::after {
  /* deckled inner border — two thin rules instead of a card outline */
  content: '';
  position: absolute;
  left: 18px; right: 18px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.invitation-card::before { top: 18px; }
.invitation-card::after  { bottom: 18px; }
.invitation-head {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 28px;
}
.invitation-rule-long {
  flex: 0 1 120px; height: 1px;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}
.invitation-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  white-space: nowrap;
}
.invitation-h {
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 400;
  margin: 0 0 24px;
  text-wrap: balance;
}
.invitation-lead {
  margin: 0 auto 32px;
  max-width: 36rem;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.invitation-flourish {
  display: block;
  margin: 0 auto 32px;
  width: clamp(180px, 32vw, 260px);
  height: auto;
  color: var(--accent-deep);
}
.invitation-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.invitation-foot {
  display: flex; align-items: baseline; justify-content: center; gap: 18px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.invitation-kicker {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
}
.invitation-signed {
  font-family: var(--font-script);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent-deep);
  letter-spacing: 0;
  transform: translateY(2px) rotate(-2deg);
  transform-origin: left center;
}

/* Dark direction: invitation card sits on ink */
.dir-ink .invitation-card,
.dir-midnight .invitation-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 8%, var(--ink)), color-mix(in srgb, var(--cream) 4%, var(--ink)));
  border-color: color-mix(in srgb, var(--cream) 18%, transparent);
}
.dir-ink .invitation-card::before,
.dir-ink .invitation-card::after,
.dir-midnight .invitation-card::before,
.dir-midnight .invitation-card::after { background: color-mix(in srgb, var(--cream) 16%, transparent); }
.dir-ink .invitation-foot,
.dir-midnight .invitation-foot { border-top-color: color-mix(in srgb, var(--cream) 20%, transparent); }

/* ---------- Legal pages (privacy, voorwaarden) — minimal serif column */
.legal-page {
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 56px) clamp(40px, 8vw, 96px);
  font-family: var(--font-body);
}
.legal-page-header {
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  padding-bottom: 16px;
}
.legal-back,
.legal-back-foot a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.legal-back:hover,
.legal-back-foot a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.legal-page-title-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
  font-size: 14px;
}
/* Lang switcher on legal pages — same compact pill as the main nav */
.legal-langs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
  padding: 3px;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
}
.legal-langs a {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.75;
  transition: all 0.3s;
}
.legal-langs a:hover { opacity: 1; }
.legal-langs a.active {
  background: var(--ink);
  color: var(--cream);
  opacity: 1;
}
.legal-content {
  max-width: 680px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.65;
}
.legal-content h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.legal-content .lead-date {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 36px;
}
.legal-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 36px 0 12px;
  color: var(--ink);
}
.legal-content p,
.legal-content ul {
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.legal-content ul {
  padding-left: 22px;
}
.legal-content ul li {
  margin-bottom: 6px;
}
.legal-content strong {
  color: var(--ink);
  font-weight: 500;
}
.legal-content a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.legal-content a:hover {
  color: var(--ink);
}
.legal-back-foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Mobile tweaks */
@media (max-width: 700px) {
  .atelier-card-list { grid-template-columns: 1fr; row-gap: 4px; }
  .atelier-card-list dt { padding-top: 6px; }
  .invitation-card { padding-left: 18px; padding-right: 18px; }
  .invitation-card::before, .invitation-card::after { left: 10px; right: 10px; }
  .reviews-pullquote { max-width: none; }
}

/* ---------- 2026 brand refresh: direct, personal and conversion-led ---------- */
.font-display,
.font-display em,
.hero-italic,
.section-h em {
  font-style: normal !important;
}
.hero-h1,
.section-h { letter-spacing: -0.025em; }
.label-tiny { font-weight: 650; letter-spacing: 0.22em; }

/* Official social marks and recognisable brand colours. */
.brand-social {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(25, 16, 32, 0.75);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
a.brand-social:hover,
.brand-social:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 24px -12px rgba(25, 16, 32, 0.9);
  filter: saturate(1.08);
}
.brand-social-instagram { background: linear-gradient(145deg, #833ab4 5%, #c13584 40%, #e1306c 66%, #f77737 100%); }
.brand-social-tiktok { background: #111; }
.brand-social-whatsapp { background: #25d366; }
.nav-socials,
.footer-socials { display: flex; align-items: center; gap: 7px; }

/* Navigation: the booking action remains the strongest element. */
.nav-grid {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: 0 12px 35px -30px color-mix(in srgb, var(--ink) 50%, transparent);
}
.nav-book-button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--ink);
  color: var(--cream);
  font: 650 13px/1 var(--font-body);
  box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--ink) 80%, transparent);
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.nav-book-button:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -17px color-mix(in srgb, var(--accent-deep) 88%, transparent);
}
.hero-primary-cta {
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--cream);
  font: 650 15px/1 var(--font-body);
  box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--ink) 78%, transparent);
  transition: transform 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.hero-primary-cta:hover {
  background: var(--accent-deep);
  transform: translateY(-3px);
  box-shadow: 0 22px 38px -18px color-mix(in srgb, var(--accent-deep) 85%, transparent);
}
@media (max-width: 1023px) {
  html {
    scroll-padding-top: 125px;
  }

  .nav-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 10px 14px;
  }
  .nav-left { display: none; }
  .nav-center { grid-row: 1 / span 2; align-self: center; }
  .nav-center .logo-img { height: 46px !important; max-width: 74px; object-fit: contain; }
  .nav-right {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "socials book" "language book";
    align-items: center;
    gap: 6px 9px;
  }
  .nav-socials { grid-area: socials; justify-self: end; }
  .nav-right .lang-switcher { grid-area: language; justify-self: end; }
  .nav-book-button { grid-area: book; align-self: stretch; padding: 0 13px; }
  .brand-social { width: 32px; height: 32px; }
}
@media (min-width: 1024px) {
  .nav-grid { grid-template-columns: 1fr auto 1fr; }
  .nav-right { gap: 10px; }
}
@media (max-width: 370px) {
  .nav-grid { padding-left: 10px; padding-right: 10px; }
  .nav-center .logo-img { width: 52px; }
  .nav-socials { gap: 4px; }
  .brand-social { width: 29px; height: 29px; }
  .nav-book-button { padding: 0 10px; font-size: 12px; }
  .lang-switcher .lang-btn { padding-left: 5px; padding-right: 5px; }
}

/* The archive glides continuously. Manual swipe, wheel and buttons pause it. */
.gallery-carousel { scroll-snap-type: none; scroll-behavior: auto; }
.gallery-carousel-slide { scroll-snap-align: none; scroll-snap-stop: normal; }
.gallery-carousel-progress span { transition: width 650ms cubic-bezier(0.22, 1, 0.36, 1); }
.gallery-instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.gallery-instagram-link .brand-social { width: 34px; height: 34px; }

/* Reviews are presented as a straightforward client grid. */
.reviews-section {
  isolation: isolate;
  color: var(--ink);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bone) 52%, #fff), color-mix(in srgb, var(--cream) 78%, #fff));
}
.reviews-head {
  max-width: 780px;
  margin: 0 0 clamp(34px, 5vw, 58px);
  text-align: left;
}
.reviews-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--accent-deep);
}
.reviews-headline {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.55rem, 6vw, 5.25rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.reviews-card {
  position: relative;
  min-height: 260px;
  padding: 30px 28px 24px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #fff 86%, var(--cream));
  box-shadow: 0 22px 45px -38px color-mix(in srgb, var(--ink) 65%, transparent);
}
.reviews-quote-mark {
  display: block;
  height: 34px;
  color: var(--accent-deep);
  font: 400 54px/0.8 var(--font-display);
}
.reviews-card-quote {
  flex: 1;
  margin: 12px 0 26px;
  color: var(--ink);
  font: 400 15px/1.65 var(--font-body);
}
.reviews-card-tag { background: color-mix(in srgb, var(--accent) 14%, #fff); }
@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .reviews-grid {
    display: flex;
    gap: 12px;
    margin-right: -24px;
    padding-right: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-card { flex: 0 0 min(84vw, 330px); min-height: 245px; scroll-snap-align: start; }
}

/* High-intent booking panel. */
.conversion-section { background: var(--cream); }
.conversion-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.72fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 46px 90px -56px color-mix(in srgb, var(--ink) 70%, transparent);
}
.conversion-copy { padding: clamp(38px, 7vw, 86px); }
.conversion-label {
  display: inline-flex;
  margin-bottom: 22px;
  padding: 8px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  color: var(--accent-deep);
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.conversion-title {
  max-width: 760px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(3rem, 7vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.conversion-title span { display: block; color: var(--accent-deep); }
.conversion-lead {
  max-width: 610px;
  margin: 28px 0 34px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}
.conversion-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.conversion-primary {
  min-height: 58px;
  padding: 0 25px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  font: 700 14px/1.2 var(--font-body);
  box-shadow: 0 18px 32px -17px color-mix(in srgb, var(--ink) 78%, transparent);
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.conversion-primary:hover {
  transform: translateY(-3px);
  background: var(--accent-deep);
  box-shadow: 0 22px 38px -18px color-mix(in srgb, var(--accent-deep) 86%, transparent);
}
.conversion-microcopy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 12.5px;
}
.conversion-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.conversion-whatsapp .brand-social { width: 34px; height: 34px; }
.conversion-steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 60px);
  background: var(--ink);
  color: var(--cream);
}
.conversion-step {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 15%, transparent);
}
.conversion-step > span { color: var(--accent); font: 400 14px/1.5 var(--font-display); }
.conversion-step p { margin: 0; font-size: 15px; line-height: 1.55; }
.conversion-location {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 820px) {
  .conversion-card { grid-template-columns: 1fr; }
  .conversion-copy { padding: 42px 24px; }
  .conversion-steps { padding: 24px; }
  .conversion-step { padding: 16px 0; }
  .conversion-primary { width: 100%; justify-content: center; }
  .conversion-microcopy { width: 100%; justify-content: center; }
}

/* Contact details and an interactive Google map share equal visual weight. */
.visit-section { background: var(--ink); color: var(--cream); }
.visit-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr); gap: clamp(38px, 7vw, 90px); align-items: stretch; }
.visit-copy { display: flex; flex-direction: column; }
.visit-label { color: color-mix(in srgb, var(--cream) 58%, transparent); }
.visit-copy .section-h span { color: var(--accent); }
.visit-lead { max-width: 600px; margin: 0 0 38px; color: color-mix(in srgb, var(--cream) 72%, transparent); line-height: 1.7; }
.visit-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 30px; }
.visit-detail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.visit-detail-value { color: var(--cream); font: 400 17px/1.55 var(--font-body); text-decoration: none; }
.visit-muted { color: color-mix(in srgb, var(--cream) 52%, transparent); }
.visit-social-block { margin-top: 38px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent); }
.visit-social-title { display: block; margin-bottom: 15px; color: color-mix(in srgb, var(--cream) 58%, transparent); font-size: 11px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }
.visit-social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.visit-social-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 7px;
  border: 1px solid color-mix(in srgb, var(--cream) 15%, transparent);
  border-radius: 999px;
  color: var(--cream);
  font-size: 12px;
  text-decoration: none;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}
.visit-social-link:hover { border-color: color-mix(in srgb, var(--cream) 35%, transparent); background: color-mix(in srgb, var(--cream) 7%, transparent); transform: translateY(-2px); }
.visit-social-link .brand-social { width: 32px; height: 32px; }
.visit-map-card {
  min-height: 620px;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  border-radius: 16px;
  background: var(--bone);
  box-shadow: 0 34px 70px -45px #000;
}
.visit-map-card iframe { width: 100%; height: 100%; min-height: 620px; display: block; border: 0; }
.visit-directions {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 16px 30px -15px rgba(0,0,0,.6);
}
@media (max-width: 900px) {
  .visit-layout { grid-template-columns: 1fr; }
  .visit-map-card,
  .visit-map-card iframe { min-height: 460px; }
}
@media (max-width: 520px) {
  .visit-details { grid-template-columns: 1fr; gap: 24px; }
  .visit-social-links { flex-direction: column; align-items: stretch; }
  .visit-social-link { width: 100%; }
  .visit-map-card,
  .visit-map-card iframe { min-height: 410px; }
}

/* Footer logo sits on a light tile so the untouched official artwork remains legible. */
.site-footer { background: var(--ink); color: color-mix(in srgb, var(--cream) 65%, transparent); border-top: 1px solid color-mix(in srgb, var(--cream) 10%, transparent); }
.site-footer-inner { display: grid; grid-template-columns: auto auto 1fr auto; gap: 24px; align-items: center; font-size: 13px; }
.footer-brandmark {
  width: 104px;
  height: 60px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
}
.footer-brandmark img { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; }
.footer-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: inherit; }
.footer-rights { font-size: 11px; text-align: right; }
@media (max-width: 760px) {
  .site-footer-inner { grid-template-columns: 1fr auto; }
  .footer-socials { justify-self: end; }
  .footer-links { justify-content: flex-start; }
  .footer-rights { text-align: right; }
}

/* Searchable copy follows the studio's existing editorial typography. */
.hero-search-title { font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.45; max-width: 36rem; margin-bottom: 1.75rem; color: var(--ink-soft); font-weight: 400; }
.gallery-caption { font-size: .8rem; line-height: 1.5; color: var(--ink-soft); padding-top: .85rem; max-width: 34ch; }
.faq-section { background: var(--bone); border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 7vw, 8rem); }
.faq-intro { margin: 1.5rem 0; max-width: 32ch; line-height: 1.75; color: var(--ink-soft); }
.faq-item { border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.faq-item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.faq-item summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; cursor: pointer; font-size: 1.05rem; line-height: 1.55; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { color: var(--accent-deep); font-size: 1.35rem; flex-shrink: 0; }
.faq-item[open] summary span { transform: rotate(45deg); }
.faq-item p { padding: 0 2rem 1.5rem 0; color: var(--ink-soft); line-height: 1.8; }
.faq-item summary:focus-visible, .lang-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 5px; }
@media (max-width: 767px) { .faq-layout { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.reveal-pending { opacity: 1 !important; transform: none !important; transition: none !important; } }