@font-face {
  font-family:Cormorant;
  src:url('../images/branding/cormorant-garamond.woff2') format('woff2');
  font-style:normal;
  font-weight:300 700;
  font-display:swap
}

@font-face {
  font-family:Jost;
  src:url('../images/branding/jost.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap
}

/* Theme tokens */
:root {
  --ivory:#f5f2ef;
  --card:#efebe7;
  --ink:#262620;
  --dark:#141413;
  --gold:#b99a6d;
  --muted:#6d6a62;
  --line:#d2cbc3;
  --serif:Cormorant,Georgia,'Times New Roman',serif;
  --sans:Jost,'Helvetica Neue',Arial,sans-serif;
  /* Functional pricing · every service price speaks in the clean UI sans
     (Jost) rather than the editorial Cormorant serif. Prices are information:
     a light regular weight so they stay quiet beneath the service name, tabular
     figures for tidy list alignment, one currency unit on a shared baseline.
     Display and editorial headings keep the serif. */
  --price-font:var(--sans);
  --price-weight:300;
  --price-numeric:tabular-nums lining-nums;
  --page-width:1272px;
  --header-height:120px
}

/* Shared elements and accessible controls */
* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
  touch-action:manipulation
}

body {
  touch-action:manipulation;
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-transform:uppercase
}

/* The brand typography system is intentionally ALL CAPS for every visible
   surface. Native controls carry a UA `text-transform:none`, so they are
   re-asserted explicitly here rather than via per-component patches. */
button,
input,
textarea,
select,
option {
  text-transform:uppercase
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button,input {
  font:inherit
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

button {
  color:inherit
}

img {
  display:block;
  max-width:100%
}

h1,h2,h3,p {
  margin:0
}

h1,h2 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.06
}

button {
  border-radius:0
}

button:focus-visible,a:focus-visible {
  outline:2px solid #8a6c44;
  outline-offset:5px
}

.anywhere-close:focus-visible {
  outline:2px solid #8a6c44;
  outline-offset:2px
}

button:disabled {
  cursor:default;
  opacity:.35
}

.container {
  width:88.2%;
  max-width:var(--page-width);
  margin-inline:auto
}

.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.icon {
  width:32px;
  height:32px;
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

.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;
  text-transform:none
}

.skip-link {
  position:fixed;
  z-index:100;
  top:12px;
  left:12px;
  padding:10px 18px;
  background:var(--ivory);
  color:var(--ink);
  transform:translateY(-200%)
}

.skip-link:focus {
  transform:translateY(0)
}

.eyebrow {
  font-size:11px;
  letter-spacing:1.7px;
  font-weight:500;
  line-height:1.5
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:54px;
  padding:15px 30px;
  border:1px solid transparent;
  font-family:var(--sans);
  font-weight:500;
  font-size:12px;
  line-height:1.3;
  letter-spacing:1.1px;
  text-transform:uppercase;
  text-align:center;
  transition:background .2s,color .2s,border-color .2s
}

.button-gold {
  background:#ad8c60;
  color:var(--dark)
}

@media (hover:hover) and (pointer:fine) {
.button-gold:hover {
  background:#987949
}
}

.button-outline {
  border-color:#aaa197;
  background:transparent
}

@media (hover:hover) and (pointer:fine) {
.button-outline:hover {
  background:#e7e0d8
}
}

.button-outline-light {
  background:transparent;
  border-color:#9a9184;
  color:#f6f2eb
}

@media (hover:hover) and (pointer:fine) {
.button-outline-light:hover {
  background:#ffffff12;
  border-color:#e8d6ba
}
}

.button-small {
  min-height:45px;
  padding:11px 23px
}

.section-light {
  background:var(--ivory)
}

.section-dark {
  background:var(--dark);
  color:#f4eee5
}

.section-intro h2 {
  font-size:42px;
  letter-spacing:-1.1px
}

.section-intro>.eyebrow {
  margin-bottom:20px
}

.section-intro>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.8;
  margin-top:25px
}

.section-intro>.button {
  margin-top:26px
}

/* Announcement, overlaid header, and portrait hero */
.announcement {
  min-height:44px;
  padding:14px 20px 12px;
  background:#10100f;
  color:#e0d5c2;
  border-bottom:1px solid #443b2f;
  text-align:center;
  font-size:11px;
  letter-spacing:1.55px;
  font-weight:500;
  line-height:1.6
}

.announcement span {
  padding-inline:3px
}

.announcement-cta {
  color:inherit;
  cursor:pointer
}

.announcement-cta:focus-visible {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px
}

@media (hover:hover) and (pointer:fine) {
  .announcement-cta:hover {
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px
  }
}

.hero {
  position:relative;
  isolation:isolate;
  height:clamp(620px,50.7vw,790px);
  margin-top:calc(-1 * var(--header-height));
  padding-top:var(--header-height);
  color:#fffaf1;
  background:#524739;
  overflow:hidden
}

.hero-image {
  position:absolute;
  inset:0 0 0 auto;
  width:89%;
  height:100%;
  object-fit:cover;
  object-position:right 47%;
  mask-image:linear-gradient(to right,transparent,#000 16%);
  z-index:-3
}

.hero-shade {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(29,25,20,.76) 0%,rgba(37,32,27,.4) 35%,rgba(30,27,23,.06) 64%,rgba(0,0,0,.1) 100%)
}

.header-shell {
  position:relative;
  z-index:1
}

.site-header {
  width:91%;
  max-width:1310px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:76px;
  /* The header overlays the dark hero image, so its brand and navigation
     share the hero's approved off-white text colour. */
  color:#fffaf1
}

.brand {
  display:inline-flex;
  flex-direction:column;
  text-align:center;
  line-height:1.2;
  flex-shrink:0
}

.brand-name {
  font-size:26px;
  font-weight:300;
  letter-spacing:8px;
  margin-right:-8px
}

.site-header .brand {
  width:228px
}

.brand-by {
  font-size:12px;
  letter-spacing:4px;
  margin-top:3px;
  margin-right:-4px
}

.brand-tagline {
  font-size:11px;
  letter-spacing:1.9px;
  margin-top:8px
}

.main-navigation {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:1;
  gap:24px;
  margin-left:30px
}

.main-navigation a {
  font-size:13px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  font-weight:500;
  position:relative;
  padding:12px 0
}

.main-navigation a:after {
  content:'';
  position:absolute;
  bottom:6px;
  left:0;
  width:100%;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transition:transform var(--duration-normal) var(--ease-premium)
}

.main-navigation a[aria-current]:after {
  transform:scaleX(1)
}

.header-cta {
  width:234px;
  flex-shrink:0;
  min-height:54px;
  padding:14px 28px;
  white-space:nowrap;
  font-size:12px
}

.menu-toggle {
  display:none
}

.hero-content {
  padding-top:106px
}

.hero-content .eyebrow {
  font-size:12px;
  letter-spacing:1.6px;
  margin-bottom:24px
}

.hero h1 {
  font-size:86px;
  line-height:1.07;
  letter-spacing:-1.7px
}

.hero-description {
  font-size:18px;
  line-height:1.8;
  margin-top:25px;
  color:#eee7dc
}

.hero-actions {
  display:flex;
  gap:30px;
  margin-top:49px
}

.hero-actions .button:first-child {
  min-width:272px
}

.hero-actions .button:last-child {
  min-width:188px
}

/* Charcoal studio strip */
.trust-strip {
  background:#141413;
  color:#f1e9db
}

.trust-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-height:182px;
  align-items:center
}

.trust-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-inline:18px;
  border-right:1px solid #63584540;
  min-height:86px
}

.trust-item:last-child {
  border:0
}

.icon-ring {
  width:74px;
  height:74px;
  border:0;
  padding:1px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#c8b58e;
  flex-shrink:0;
  position:relative;
  background:
    radial-gradient(120% 82% at 50% 2%,rgba(255,246,226,.045),rgba(255,246,226,0) 58%) padding-box,
    radial-gradient(circle at 50% 42%,#1e1c17 0%,#131210 56%,#090807 100%) padding-box,
    conic-gradient(from 0deg,
      #9a855c 0deg,
      #c2ac7e 14deg,
      #a18b5d 40deg,
      #7d6b48 78deg,
      #5c4e35 122deg,
      #3a3226 158deg,
      #26221b 196deg,
      #332c22 232deg,
      #4e4230 262deg,
      #7d6b48 292deg,
      #a89167 318deg,
      #8d7850 342deg,
      #9a855c 360deg
    ) border-box;
  box-shadow:
    0 8px 16px -10px rgba(0,0,0,.75),
    0 0 0 .5px rgba(88,74,50,.55)
}

.icon-ring:before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:
    inset 0 0 0 1px rgba(236,224,198,.13),
    inset 0 0 0 1.5px rgba(236,224,198,.05),
    inset 0 1px 1px rgba(255,255,255,.035),
    inset 0 -4px 8px -4px rgba(0,0,0,.55);
  pointer-events:none
}

.icon-ring:after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(ellipse 78% 40% at 50% 13%,rgba(255,248,232,.11),rgba(255,248,232,.035) 48%,rgba(255,248,232,0) 74%),
    radial-gradient(ellipse 60% 32% at 50% 92%,rgba(255,248,232,.04),rgba(255,248,232,0) 70%);
  pointer-events:none
}

.icon-ring .icon {
  width:36px;
  height:36px
}

.trust-value {
  font-family:var(--sans);
  font-size:clamp(19px,1.7vw,23px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:1.6px;
  text-transform:uppercase;
  white-space:normal;
  text-wrap:balance;
  color:#f1e9db;
  margin:24px 0 0
}

.trust-label {
  font-family:var(--sans);
  font-size:10px;
  line-height:1.5;
  letter-spacing:2.2px;
  margin-top:9px;
  font-weight:500;
  text-transform:uppercase;
  color:#a89b86
}

.icon-ring-text {
  color:#c8b58e;
  font-family:var(--sans);
  font-size:24px;
  font-weight:500;
  letter-spacing:.5px;
  line-height:1
}

.icon-ring .icon.icon-google {
  width:30px;
  height:30px
}

/* Trust icons: sizes are ring-relative so they scale across all six ring widths (74/72/64/57/43/36px); the wide 2:1 lash fan gets a larger box so its optical ink height sits level with the other icons */
.icon-ring .icon.icon-premium {
  width:55%;
  height:55%
}

.icon-ring .icon.icon-lash-art {
  width:66.7%;
  height:66.7%
}

/* Services and studio experience */
.services {
  padding:75px 0 58px
}

.services-layout {
  display:grid;
  grid-template-columns:300px 1fr;
  gap:78px
}

.services .section-intro h2 {
  font-size:43px;
  line-height:1.08
}

.services .section-intro {
  padding-top:1px
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  padding-right:16px
}

.service-card {
  background:var(--card)
}

.service-image {
  display:block;
  position:relative;
  aspect-ratio:1.34;
  overflow:hidden;
  background:#c39e85
}

.after-crop img {
  max-width:none;
  width:200%;
  height:100%;
  object-fit:cover;
  transform:translateX(-50%);
}

.price {
  margin-top:25px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.3px
}

.price span {
  font-size:10px;
  color:#776d61
}

.experience-grid {
  border-top:1px solid var(--line);
  margin-top:58px;
  padding-top:35px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  scroll-margin-top:30px
}

/* Benefits · icon-free: the text column is the only content now. */
.experience-item {
  display:flex;
  align-items:center
}

.experience-item h3 {
  font-size:12px;
  font-weight:500;
  letter-spacing:1.5px;
  text-transform:uppercase;
  line-height:1.5
}

.experience-item p {
  font-size:13px;
  margin-top:8px;
  white-space:nowrap
}

/* Before-and-after comparisons */
.gallery {
  padding:55px 0 49px
}

.transformation-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  position:relative
}

.transformation {
  position:relative;
  display:block;
  padding:0;
  border:0;
  overflow:hidden;
  aspect-ratio:1.23;
  background:#ac886e
}

.transformation img {
  width:100%;
  height:100%;
  object-fit:cover;
}



.transformation:after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:#f8efe38a
}

/* Client stories */
.reviews {
  padding:57px 0 28px
}

.reviews-layout {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:73px;
  align-items:start
}

.reviews .section-intro {
  padding-top:25px
}

.reviews .section-intro>.eyebrow {
  margin-bottom:17px
}

.reviews .section-intro h2 {
  font-size:36px
}

.review-rating {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:36px
}

.stars {
  color:#967144;
  letter-spacing:3px;
  font-size:14px;
  line-height:1.5
}

.review-rating>span:last-child {
  font-size:10px;
  letter-spacing:.5px
}

.section-intro .review-disclaimer {
  font-size:12px!important;
  line-height:1.7!important;
  margin-top:9px!important;
  color:#696359
}

.review-card {
  flex:0 0 calc((100% - 54px)/3);
  min-width:0;
  border:1px solid #e4ddd5;
  border-radius:9px 9px 0 0;
  overflow:hidden;
  background:#f7f4f1;
  scroll-snap-align:start
}

.review-image {
  width:100%;
  display:block;
  position:relative;
  aspect-ratio:1.62;
  border:0;
  background:#988576;
  padding:0;
  overflow:hidden
}

.review-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 39%;
}



.review-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(#17130c38,transparent 60%);
  pointer-events:none
}

.image-caption {
  position:absolute;
  top:14px;
  left:14px;
  right:10px;
  text-align:left;
  color:#faf4eb;
  font-size:10px;
  font-weight:500;
  letter-spacing:1px;
  z-index:1
}

.story-icon {
  position:absolute;
  left:50%;
  top:63%;
  transform:translate(-50%,-50%);
  width:53px;
  height:53px;
  display:grid;
  place-items:center;
  padding-left:4px;
  background:#fffaf5;
  border-radius:50%;
  color:#8b735a;
  font-size:20px;
  box-shadow:0 2px 9px #0002;
  z-index:1
}

.review-copy {
  padding:17px 24px 19px
}

.review-copy>.stars {
  font-size:12px;
  letter-spacing:2px
}

.review-copy blockquote {
  font-size:14px;
  line-height:1.55;
  margin:5px 0 16px
}

.review-author {
  font-size:10px;
  color:#71695e;
  letter-spacing:.35px
}

.review-author span {
  font-size:10px
}

.carousel-arrow {
  position:absolute;
  top:111px;
  z-index:2;
  padding:0;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid #dfd6cb;
  border-radius:50%;
  background:#f7f4ef;
  color:#7a6a52;
  transition:background .2s
}

@media (hover:hover) and (pointer:fine) {
.carousel-arrow:hover {
  background:#e9e0d5
}
}

.carousel-arrow .icon {
  width:20px;
  height:20px;
  stroke-width:1.3
}

.carousel-arrow.previous {
  left:-62px;
  border-color:transparent;
  background:#eee9e3aa
}

.carousel-arrow.previous .icon {
  transform:rotate(180deg)
}

.carousel-arrow.next {
  right:-25px
}

/* Welcome offer and appointment information */
.booking {
  min-height:420px;
  position:relative;
  overflow:hidden;
  padding:48px 0;
  isolation:isolate
}

.booking-image {
  position:absolute;
  z-index:-2;
  right:0;
  top:0;
  height:100%;
  width:36%;
  object-fit:cover;
  object-position:70% center
}

.booking:after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,#141413 0%,#141413 69%,#14141325 85%,transparent)
}

.booking-layout {
  display:grid;
  grid-template-columns:414px 1fr;
  gap:58px;
  min-height:324px
}

.offer .eyebrow {
  color:#cfc0a6;
  font-size:11px;
  letter-spacing:1.4px
}

.offer h2 {
  font-size:44px;
  line-height:1.04;
  margin-top:14px;
  letter-spacing:-.9px
}





.offer-note {
  font-size:12px;
  color:#d7d0c5;
  margin-top:30px
}

.booking-panel {
  border:1px solid #88735035;
  box-shadow:inset 0 0 0 5px #141413,inset 0 0 0 6px #88735015;
  max-width:514px;
  min-height:308px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px 46px 30px;
  align-self:center;
  background:#141413e0
}

.booking-heading {
  font-size:17px;
  letter-spacing:1.6px;
  color:#d9c6a4
}

.booking-subtitle {
  font-size:14px;
  margin-top:8px
}

.booking-panel>.button {
  width:100%;
  max-width:390px;
  min-height:62px
}

/* Footer */
.site-footer {
  padding:41px 0 0;
  color:#756f66
}

.footer-grid {
  display:grid;
  grid-template-columns:25.2% 16.4% 16.8% 21% 20.6%;
  gap:0;
  padding-bottom:25px
}

.footer-grid>div {
  padding-right:22px
}

.footer-grid>div:last-child {
  padding-right:0
}

.footer-brand .brand-name {
  font-size:24px;
  letter-spacing:6px
}

.footer-brand .brand-by {
  font-size:10px
}

.footer-brand .brand-tagline {
  font-size:10px;
  letter-spacing:1.4px;
  margin-top:4px
}

.footer-brand>p {
  font-size:12px;
  line-height:1.8;
  margin-top:23px
}

.social-coming {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  margin-top:15px
}

.social-coming .icon {
  width:19px;
  height:19px;
  stroke-width:1.1
}

.footer-heading {
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  font-weight:500;
  color:#4c4943;
  line-height:1.6;
  margin-bottom:15px
}

.footer-grid ul {
  list-style:none;
  padding:0;
  margin:0
}

.footer-grid li,.footer-grid address,.footer-hours {
  font-size:12.5px;
  line-height:1.9;
  font-style:normal
}

.footer-grid address a[href^="tel:"] {
  display:inline-block;
  padding-block:3px
}

.footer-grid li button,.footer-text-button,.footer-bottom button {
  border:0;
  padding:0;
  background:none;
  text-align:left;
  font:inherit
}

.footer-grid li button {
  text-transform:uppercase
}

@media (hover:hover) and (pointer:fine) {
.footer-grid a:hover,.footer-grid button:hover,.footer-bottom button:hover {
  color:#6e4e28;
  text-decoration:underline;
  text-underline-offset:4px
}
}

.footer-bottom {
  border-top:1px solid #e4ddd5;
  padding:13px 0 15px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  font-size:10px;
  color:#8c857b
}

.footer-bottom>div {
  display:flex;
  gap:29px
}

.footer-bottom button {
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.5px
}

/* Native detail dialogs */
.detail-dialog {
  width:min(650px,calc(100% - 40px));
  max-height:90dvh;
  border:1px solid #c4b295;
  padding:49px;
  color:var(--ink);
  background:var(--ivory);
  overflow:auto
}

.detail-dialog::backdrop {
  background:#0d0c0ad6
}
@media (min-width:801px) {
  .detail-dialog::backdrop {
    backdrop-filter:blur(4px)
  }
}
@media (max-width:800px) {
  .detail-dialog::backdrop {
    background:#0d0c0ae0;
    backdrop-filter:none
  }
}

.dialog-close {
  position:absolute;
  right:16px;
  top:9px;
  font-family:var(--sans);
  border:0;
  background:none;
  font-size:30px;
  font-weight:300;
  line-height:1;
  padding:8px;
  color:#665d51
}

.detail-dialog .eyebrow {
  color:#7a5e3a;
  margin-bottom:14px
}

/* Reserve the close-button column so the dialog header text never runs under the X. */
.detail-dialog #dialog-content > .eyebrow:first-child,
.detail-dialog #dialog-content > h2:first-child {
  padding-right:58px
}

.detail-dialog h2 {
  font-size:43px;
  padding-right:15px;
  margin-bottom:24px
}

.detail-dialog p:not(.eyebrow) {
  margin-top:18px;
  line-height:1.8
}

.detail-dialog .dialog-image {
  width:100%;
  max-height:360px;
  object-fit:cover;
  margin-bottom:25px
}

.detail-dialog .dialog-caption {
  font-size:12px;
  color:#766b5e
}

.detail-dialog .dialog-contact {
  font-style:normal;
  margin-top:18px;
  line-height:1.8
}

.detail-dialog .dialog-map-link {
  display:inline-block;
  padding-block:2px
}

.detail-dialog .dialog-phone {
  display:block;
  margin-top:12px;
  padding-block:2px;
  font-weight:500
}

.detail-dialog .dialog-hours-title {
  margin-top:30px
}

.detail-dialog .button {
  margin-top:25px
}

.dialog-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:24px
}

.dialog-controls button {
  border:1px solid #b8aa96;
  background:transparent;
  padding:8px 16px
}

.dialog-pagination {
  font-size:13px
}

.detail-dialog ul {
  padding-left:20px
}

.detail-dialog li+li {
  margin-top:10px
}

.dialog-open {
  overflow:hidden
}

.noscript-message {
  text-align:center;
  font-size:13px;
  padding:18px;
  background:#e5d9c7
}

/* Desktop alignment and final section-proportion corrections. */
@media(min-width:1051px) {
  .booking .offer {
    padding-top:16px
  }
  .services {
    padding-block:87px 72px
  }
  .reviews {
    padding-block:69px 40px
  }
  .site-footer {
    padding-top:20px
  }
  .footer-grid {
    padding-bottom:12px
  }
  .footer-heading {
    margin-bottom:9px
  }
  .footer-grid li {
    line-height:1.6
  }
  .footer-brand>p {
    margin-top:14px
  }
  .social-coming {
    margin-top:10px
  }
  .footer-bottom {
    padding-block:8px 9px
  }
}

/* Wide desktop */
@media(min-width:1600px) {
  .hero-content {
    padding-top:120px
  }
}

/* Compact desktop */
@media(max-width:1300px) {
  .site-header .brand { width:194px }
  .main-navigation { margin-left:10px }
  .header-cta { width:208px }
  .services .section-intro h2 { font-size:38px }
  .booking { min-height:390px; padding:40px 0 }
  .booking-layout { min-height:310px }
  .booking-panel { min-height:290px }
  .footer-grid { grid-template-columns:1.4fr .78fr .85fr 1.13fr 1.17fr }
  .footer-grid>div { padding-right:0 }

  .site-header {
    gap:25px
  }
  .brand-name {
    font-size:20px;
    letter-spacing:5px
  }
  .main-navigation {
    gap:21px
  }
  .main-navigation a {
    font-size:10px
  }
  .header-cta {
    padding-inline:22px
  }
  .hero-content {
    padding-top:75px
  }
  .hero h1 {
    font-size:76px
  }
  .trust-item {
    gap:14px;
    padding-inline:19px
  }
  .icon-ring {
    width:72px;
    height:72px
  }
  .icon-ring-text {
    font-size:23px
  }
  .trust-value {
    font-size:19px
  }
  .trust-label {
    font-size:10px
  }
  .services-layout {
    grid-template-columns:255px 1fr;
    gap:55px
  }
  .section-intro h2 {
    font-size:38px
  }
  .service-grid {
    gap:24px
  }
  .experience-grid {
    gap:18px
  }
  .experience-item h3 {
    font-size:10px
  }
  .experience-item p {
    font-size:11px;
    white-space:normal
  }
  .transformation-grid {
    gap:25px
  }
  .reviews-layout {
    grid-template-columns:260px 1fr;
    gap:55px
  }
  .reviews .section-intro h2 {
    font-size:34px
  }
  .review-card {
    flex-basis:calc((100% - 44px)/3)
  }
  .review-copy {
    padding:15px 20px 20px
  }
  .review-copy blockquote {
    font-size:12px
  }
  .review-author {
    font-size:10px
  }
  .review-author span {
    display:block;
    font-size:10px
  }
  .image-caption {
    font-size:10px
  }
  .carousel-arrow {
    width:40px;
    height:40px;
    top:95px
  }
  .carousel-arrow.previous {
    left:-48px
  }
  .carousel-arrow.next {
    right:-15px
  }
  .booking-layout {
    grid-template-columns:375px 1fr;
    gap:40px
  }
  .booking-panel {
    max-width:490px;
    padding-inline:43px
  }
  .offer h2 {
    font-size:39px
  }
  .footer-grid {
    gap:30px
  }
}

/* Small desktop and landscape tablet */
@media(max-width:1050px) {
  :root { --header-height:110px }
  .site-header .brand { width:160px }
  .header-cta { width:170px }
  .main-navigation { margin-left:0 }
  .services .section-intro h2 { font-size:33px }
  .service-grid { padding-right:0 }
  .booking-layout { min-height:280px }
  .booking-panel { min-height:272px }

  .container {
    width:89%
  }
  .hero {
    height:auto;
    min-height:650px
  }
  .site-header {
    height:110px;
    gap:20px
  }
  .main-navigation {
    gap:15px
  }
  .main-navigation a {
    font-size:10px;
    letter-spacing:.7px
  }
  .header-cta {
    padding-inline:15px
  }
  .brand-name {
    font-size:17px;
    letter-spacing:4px
  }
  .brand-tagline {
    font-size:10px
  }
  .hero-content {
    padding-top:90px
  }
  .hero h1 {
    font-size:70px
  }
  .hero-description {
    font-size:16px
  }
  .hero-actions {
    gap:20px;
    margin-top:35px
  }
  .hero-actions .button:first-child {
    min-width:240px
  }
  .hero-actions .button:last-child {
    min-width:170px
  }
  .button {
    font-size:11px;
    padding-inline:22px
  }
  .trust-grid {
    min-height:150px
  }
  .trust-item {
    padding-inline:13px;
    gap:12px
  }
  .icon-ring {
    width:57px;
    height:57px
  }
  .icon-ring .icon {
    width:30px;
    height:30px
  }
  .icon-ring .icon.icon-google {
    width:25px;
    height:25px
  }
  .icon-ring-text {
    font-size:18px
  }
  .trust-value {
    font-size:16px
  }
  .trust-label {
    font-size:10px
  }
  .services {
    padding:60px 0 43px
  }
  .services-layout {
    grid-template-columns:215px 1fr;
    gap:35px
  }
  .section-intro h2 {
    font-size:33px
  }
  .section-intro>p:not(.eyebrow) {
    font-size:12px
  }
  .service-grid {
    gap:20px
  }
  .price {
    font-size:10px;
    margin-top:20px
  }
  .price span {
    font-size:10px
  }
  .experience-grid {
    margin-top:45px;
    padding-top:30px
  }
  .experience-item p {
    font-size:10px;
    white-space:normal
  }
  .experience-item h3 {
    font-size:10px;
    letter-spacing:1px
  }
  .gallery {
    padding:46px 0 43px
  }
  .transformation-grid {
    gap:20px
  }
  .reviews {
    padding:45px 0 27px
  }
  .reviews-layout {
    grid-template-columns:220px 1fr;
    gap:43px
  }
  .reviews .section-intro h2 {
    font-size:30px
  }
  .reviews .section-intro>.eyebrow {
    font-size:10px
  }
  .review-card {
    flex-basis:calc((100% - 36px)/3)
  }
  .review-copy {
    padding:12px 14px 16px
  }
  .review-copy blockquote {
    font-size:11px
  }
  .review-rating {
    margin-top:28px;
    gap:6px
  }
  .review-rating>span:last-child {
    font-size:10px
  }
  .review-rating .stars {
    font-size:12px
  }
  .section-intro .review-disclaimer {
    font-size:10px!important
  }
  .story-icon {
    width:43px;
    height:43px;
    font-size:16px
  }
  .carousel-arrow {
    width:33px;
    height:33px;
    top:85px
  }
  .carousel-arrow.previous {
    left:-38px
  }
  .image-caption {
    top:9px;
    left:9px;
    font-size:10px
  }
  .booking {
    min-height:310px;
    padding:32px 0
  }
  .booking-layout {
    grid-template-columns:320px 1fr;
    gap:35px
  }
  .offer h2 {
    font-size:34px
  }
  .booking-panel {
    padding:24px 30px 20px;
    max-width:420px
  }
  .booking-heading {
    font-size:14px
  }
  .booking-subtitle {
    font-size:12px
  }
  .booking-panel>.button {
    min-height:52px
  }
  .offer-note {
    font-size:10px;
    margin-top:25px
  }
  .footer-grid {
    gap:25px;
    grid-template-columns:1.2fr .7fr .8fr 1fr 1fr
  }
  .footer-brand .brand-name {
    font-size:20px;
    letter-spacing:4px
  }
  .footer-brand>p,.footer-grid li,.footer-grid address,.footer-hours,.footer-text-button {
    font-size:10px
  }
  .footer-heading {
    font-size:10px
  }
  .social-coming {
    font-size:10px
  }
  .footer-bottom {
    font-size:10px
  }
  .footer-bottom button {
    font-size:10px
  }
}

/* Tablet and mobile navigation */
@media(max-width:800px) {
  :root { --header-height:104px }
  .site-header { width:89% }
  .site-header .brand { width:auto }
  .header-cta { width:auto }
  .hero-image { width:100%; object-position:62% center; mask-image:none }
  .main-navigation { flex:none; margin-left:0 }
  .booking-layout { min-height:0 }
  .booking-panel { min-height:0 }

  .announcement {
    font-size:10px;
    min-height:37px;
    padding:11px 15px;
    letter-spacing:1px
  }
  .hero {
    height:auto;
    min-height:700px;
    /* Bottom breathing room so the CTA row never collides with the trust strip.
       Inside the min-height it is a no-op where the hero already has slack, and
       it only adds space when content makes the hero grow. */
    padding-bottom:36px
  }
  .site-header {
    height:104px;
    justify-content:space-between
  }
  .brand-name {
    font-size:20px;
    letter-spacing:5px
  }
  .brand-tagline {
    font-size:10px
  }
  .header-cta {
    margin-left:auto
  }
  .enhanced .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    width:44px;
    height:44px;
    padding:9px;
    border:1px solid #ddccaf66;
    background:#17141030;
    order:3;
    z-index:6
  }
  .menu-toggle span {
    height:1px;
    width:24px;
    background:#f5ede0;
    transition:transform var(--duration-normal) var(--ease-premium)
  }
  .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)
  }
  .main-navigation {
    display:grid;
    grid-template-columns:1fr;
    gap:2px;
    background:var(--dark);
    padding:24px 6%;
    border-block:1px solid rgba(185,154,109,.22)
  }
  /* The sheet and the header weld into one dark surface while the menu is
     open, the mobile counterpart of the desktop `.header-shell.services-open`.
     The open header always reads light, including on the light service pages
     whose header is dark ink by default. */
  .header-shell:has(.main-navigation.is-open) {
    background:var(--dark);
    transition:background-color var(--duration-normal) var(--ease-premium)
  }
  .header-shell:has(.main-navigation.is-open) .site-header {
    color:var(--ivory)
  }
  .header-shell:has(.main-navigation.is-open) .menu-toggle {
    border-color:#ddccaf66;
    background:#17141030
  }
  .header-shell:has(.main-navigation.is-open) .menu-toggle span {
    background:#f5ede0
  }
  .main-navigation.is-open {
    display:grid;
    grid-template-columns:1fr;
    gap:2px
  }
  /* No-JS mobile: the navigation sits in normal flow. The header grows to
     contain it so it pushes page content down instead of overlaying the hero. */
  html:not(.enhanced) .site-header {
    height:auto;
    min-height:var(--header-height);
    flex-wrap:wrap;
    row-gap:0;
    /* No-JS mobile: the header sits in normal flow over the page background,
       not over the hero image, so the brand copy keeps the dark ink contrast. */
    color:var(--ink)
  }
  html:not(.enhanced) .main-navigation {
    flex-basis:100%;
    order:4
  }
  html:not(.enhanced) .hero {
    margin-top:0;
    padding-top:0
  }
  /* No-JS mobile: the in-flow navigation panel is dark, so its links need a
     light tone for readable contrast (matches the mobile header light accent). */
  html:not(.enhanced) .main-navigation a {
    color:#f5ede0
  }
  .main-navigation a {
    font-size:12px;
    letter-spacing:1px;
    padding-block:16px;
    text-align:left
  }
  .hero-image {
    object-position:62% center
  }
  .hero-shade {
    background:linear-gradient(90deg,#241f1bc9,#241f1b55 55%,#0000000a)
  }
  .hero-content {
    padding-top:130px
  }
  .hero h1 {
    font-size:70px
  }
  .hero-content .eyebrow {
    font-size:11px
  }
  .trust-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    padding-block:21px;
    gap:16px 0
  }
  /* Mobile trust strip: four instances of one card component.
     Shared zone -> gap -> zone rhythm; every element stays on the cell's centre axis. */
  .trust-item {
    --trust-gap-icon:17px;
    --trust-gap-label:8px;
    --trust-zone-value:26px;
    --trust-zone-label:34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
    padding-inline:14px;
    min-height:0
  }
  .trust-item:nth-child(2) {
    border:0
  }
  .trust-value {
    font-size:17px;
    line-height:1.25;
    letter-spacing:-.3px;
    white-space:nowrap;
    text-wrap:nowrap;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:var(--trust-gap-icon) 0 0;
    min-height:var(--trust-zone-value)
  }
  .trust-label {
    font-size:11px;
    line-height:1.45;
    letter-spacing:1px;
    color:#b8ab92;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:var(--trust-gap-label) 0 0;
    min-height:var(--trust-zone-label)
  }
  .icon-ring {
    width:75px;
    height:75px
  }
  /* Optical, not geometric, parity: each artwork is sized so its ink weight
     reads level with the others inside the identical rings. */
  .icon-ring .icon.icon-google {
    width:35px;
    height:35px
  }
  .icon-ring .icon.icon-premium {
    width:59.5%;
    height:59.5%
  }
  .icon-ring .icon.icon-lash-art {
    width:71%;
    height:71%
  }
  .icon-ring-text {
    font-size:24px
  }
  .services-layout {
    grid-template-columns:1fr;
    gap:32px
  }
  .services .section-intro h2 br {
    display:none
  }
  .services .section-intro h2 {
    max-width:490px;
    font-size:43px
  }
  .section-intro>p:not(.eyebrow) {
    font-size:14px;
    max-width:460px
  }
  .section-intro>.eyebrow {
    margin-bottom:14px
  }
  .section-intro>.button {
    margin-top:20px
  }
  .price {
    font-size:11px
  }
  .experience-grid {
    grid-template-columns:repeat(2,1fr);
    gap:25px 30px
  }
  .experience-item h3 {
    font-size:11px
  }
  .experience-item p {
    font-size:12px
  }
  .gallery {
    padding:45px 0 55px
  }
  .transformation-grid {
    gap:20px
  }
  .reviews {
    padding:45px 0
  }
  .reviews-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .reviews .section-intro {
    padding-top:0
  }
  .reviews .section-intro h2 {
    font-size:40px
  }
  .review-rating {
    margin-top:20px
  }
  .review-rating>span:last-child {
    font-size:10px
  }
  .section-intro .review-disclaimer {
    font-size:12px!important
  }
  .review-card {
    flex-basis:calc((100% - 36px)/3)
  }
  .review-copy blockquote {
    font-size:12px
  }
  .review-author {
    font-size:10px
  }
  .review-author span {
    font-size:10px
  }
  .carousel-arrow.previous {
    left:-15px
  }
  .carousel-arrow.next {
    right:-15px
  }
  .image-caption {
    font-size:10px
  }
  .booking-layout {
    grid-template-columns:1fr 1.1fr;
    gap:25px
  }
  .offer h2 {
    font-size:33px
  }
  .booking-panel {
    padding:25px
  }
  .booking-subtitle {
    font-size:12px
  }
  .offer .eyebrow {
    font-size:10px
  }
  .offer-note {
    max-width:230px
  }
  .booking-image {
    width:50%;
    opacity:.5
  }
  .footer-grid {
    grid-template-columns:1.2fr 1fr 1fr;
    gap:35px
  }
  .footer-brand {
    grid-row:span 2
  }
  .footer-grid li,.footer-grid address,.footer-hours,.footer-text-button,.footer-brand>p {
    font-size:12px
  }
  .footer-heading {
    font-size:11px
  }
  .footer-bottom {
    font-size:10px;
    align-items:start
  }
  .footer-bottom>div {
    gap:20px
  }
}

/* Narrow desktop / tablet: keep trust headings clear of hairline dividers */
@media(min-width:801px) and (max-width:940px) {
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .trust-item:nth-child(2){border-right:1px solid transparent}
  .trust-item:last-child{border-right:1px solid transparent}
}

/* Just above the mobile breakpoint the primary navigation runs tightest. A
   slightly narrower gap keeps the full row (including the FAQ destination)
   inside the header without changing its structure or order. */
@media(min-width:801px) and (max-width:830px) {
  .main-navigation { gap:9px }
}

/* Mobile */
@media(max-width:540px) {
  :root { --header-height:96px }
  .site-header { width:86% }
  .hero-image {
    height:82%;
    object-position:61% 44%;
    mask-image:linear-gradient(to bottom,#000 72%,transparent)
  }
  .booking-panel { min-height:268px }

  .container {
    width:86%
  }
  .announcement {
    font-size:10px;
    letter-spacing:.7px;
    padding-inline:20px
  }
  .hero {
    min-height:690px
  }
  .site-header {
    height:96px;
    gap:14px
  }
  .brand-name {
    font-size:18px;
    letter-spacing:4px
  }
  .brand-by {
    font-size:10px;
    letter-spacing:3px
  }
  .brand-tagline {
    font-size:10px;
    letter-spacing:1.4px;
    margin-top:6px
  }
  .header-cta {
    display:none
  }
  .enhanced .main-navigation {
    top:96px
  }
  .hero-image {
    object-position:65% center
  }
  .hero-shade {
    background:linear-gradient(0deg,#201b16e8 0%,#251d1699 38%,#261b1020 76%,#17120b55)
  }
  .hero-content {
    padding-top:244px
  }
  .hero-content .eyebrow {
    font-size:10px;
    letter-spacing:1.3px;
    margin-bottom:17px
  }
  .hero h1 {
    font-size:55px;
    letter-spacing:-1px
  }
  .hero-description {
    font-size:14px;
    line-height:1.75;
    margin-top:18px
  }
  .hero-actions {
    gap:12px;
    margin-top:28px
  }
  .hero-actions .button:first-child {
    min-width:0;
    flex:1.35
  }
  .hero-actions .button:last-child {
    min-width:0;
    flex:1
  }
  .hero-actions .button {
    font-size:12px;
    font-weight:500;
    letter-spacing:1px;
    white-space:nowrap;
    padding:13px 9px;
    min-height:50px
  }
  .button {
    font-size:12px;
    font-weight:500;
    letter-spacing:1px
  }
  .trust-grid {
    gap:14px 0;
    padding-block:20px
  }
  .trust-item {
    --trust-gap-icon:16px;
    --trust-gap-label:7px;
    --trust-zone-value:22px;
    --trust-zone-label:32px;
    padding:0 12px
  }
  .icon-ring {
    width:51px;
    height:51px
  }
  .icon-ring .icon.icon-google {
    width:25px;
    height:25px
  }
  .icon-ring-text {
    font-size:17.5px
  }
  .services {
    padding:43px 0 35px
  }
  .services .section-intro h2 {
    font-size:42px;
    max-width:320px
  }
  .eyebrow {
    font-size:11px
  }
  .section-intro>p:not(.eyebrow) {
    margin-top:20px;
    font-size:14px
  }
  .service-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .service-card {
    display:grid;
    grid-template-columns:47% 1fr;
    min-height:200px
  }
  .service-image {
    height:100%;
    aspect-ratio:auto
  }
  .price {
    margin-top:20px;
    font-size:11px
  }
  .price span {
    font-size:10px
  }
  .experience-grid {
    gap:24px 18px;
    margin-top:35px;
    padding-top:29px
  }
  .experience-item h3 {
    font-size:10px;
    letter-spacing:.8px
  }
  .experience-item p {
    font-size:11px;
    line-height:1.6;
    margin-top:6px
  }
  .gallery {
    padding:39px 0 49px
  }
  .transformation-grid {
    gap:12px;
    grid-template-columns:1fr
  }
  .transformation {
    aspect-ratio:1.7
  }
  .reviews {
    padding:40px 0
  }
  .reviews .section-intro h2 {
    font-size:38px
  }
  .review-card {
    flex-basis:100%
  }
  .review-image {
    aspect-ratio:1.66
  }
  .image-caption {
    font-size:10px;
    top:16px;
    left:16px
  }
  .story-icon {
    width:52px;
    height:52px;
    font-size:19px
  }
  .review-copy {
    padding:19px 23px 23px
  }
  .review-copy blockquote {
    font-size:15px;
    margin:8px 0 17px
  }
  .review-copy>.stars {
    font-size:13px
  }
  .review-author {
    font-size:10px
  }
  .review-author span {
    font-size:10px;
    display:inline
  }
  .carousel-arrow {
    top:105px
  }
  .carousel-arrow.previous {
    left:-14px
  }
  .carousel-arrow.next {
    right:-14px
  }
  .booking {
    padding:38px 0
  }
  .booking-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .offer h2 {
    font-size:40px
  }
  .offer .eyebrow {
    font-size:10px
  }
  .offer-note {
    max-width:none;
    font-size:11px;
    margin-top:20px
  }
  .booking-image {
    width:100%;
    height:60%;
    opacity:.6
  }
  .booking:after {
    background:linear-gradient(90deg,#141413ec,#14141380),linear-gradient(0deg,#141413 30%,transparent)
  }
  .booking-panel {
    width:100%;
    max-width:none;
    padding:29px
  }
  .booking-heading {
    font-size:16px
  }
  .booking-subtitle {
    font-size:14px
  }
  .booking-panel>.button {
    min-height:54px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:31px 25px;
    padding-bottom:30px
  }
  .footer-brand {
    grid-row:auto;
    grid-column:1/-1
  }
  .footer-brand .brand-name {
    font-size:24px;
    letter-spacing:6px
  }
  .footer-brand>p {
    margin-top:17px
  }
  .social-coming {
    font-size:10px
  }
  .footer-grid li,.footer-grid address,.footer-hours,.footer-text-button {
    font-size:12px
  }
  .footer-bottom {
    flex-direction:column;
    gap:11px;
    padding:20px 0 23px
  }
  .footer-bottom button {
    font-size:10px
  }
  .detail-dialog {
    padding:40px 25px 30px
  }
  .detail-dialog h2 {
    font-size:36px
  }
  .detail-dialog p,.detail-dialog .dialog-contact {
    font-size:14px
  }
}

/* Narrow mobile */
@media(max-width:360px) {
  .hero h1 {
    font-size:49px
  }
  .hero-content {
    padding-top:257px
  }
  .trust-value {
    font-size:16px
  }
  .icon-ring {
    width:42px;
    height:42px
  }
  .icon-ring-text {
    font-size:14px
  }
  .experience-item h3 {
    font-size:10px
  }
  .booking-panel {
    padding-inline:22px
  }
}


/* Shared, restrained interaction motion; no continuous scroll effects. */
:root {
  --duration-fast: 140ms;
  --duration-normal: 260ms;
  --duration-slow: 560ms;
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --ease-soft: cubic-bezier(.32,.72,0,1);
  /* Reveal-scoped deceleration curves. Kept separate from --ease-premium so the
     certified hover/press transitions stay untouched. */
  --ease-reveal: cubic-bezier(.22,1,.36,1);
  --ease-reveal-image: cubic-bezier(.18,.98,.32,1);
  /* Home reveal tiers: ui, hero copy, headings, section copy, image blocks,
     hero image. Desktop values; mobile overrides follow. */
  --duration-reveal-ui: 680ms;
  --duration-reveal-hero: 700ms;
  --duration-reveal-heading: 820ms;
  --duration-reveal-image: 1000ms;
  --duration-reveal-section: 780ms;
  --duration-reveal-gallery: 900ms;
  --reveal-rise-ui: 14px;
  --reveal-rise-hero: 14px;
  --reveal-rise-heading: 20px;
  --reveal-rise-section: 22px;
  --reveal-rise-image: 10px;
  --reveal-scale: 1.02;
  --stagger-hero: 80ms;
  --stagger-group: 90ms;
  --stagger-child: 55ms;
}
/* Compact viewports: refined mobile cadence. Tiers spread far enough apart to
   read as hierarchy, travel is doubled so text visibly decelerates into place,
   and section images settle a touch richer than text. No layout changes, and
   the same easing curves as desktop — only the tokens move. */
@media (max-width:800px) {
  :root {
    --duration-reveal-ui: 600ms;
    --duration-reveal-hero: 620ms;
    --duration-reveal-heading: 700ms;
    --duration-reveal-image: 800ms;
    --duration-reveal-section: 660ms;
    --duration-reveal-gallery: 800ms;
    --reveal-rise-ui: 13px;
    --reveal-rise-hero: 15px;
    --reveal-rise-heading: 17px;
    --reveal-rise-section: 16px;
    --reveal-rise-image: 8px;
    --reveal-scale: 1.018;
    --stagger-hero: 55ms;
    --stagger-group: 75ms;
    --stagger-child: 50ms;
  }
}
/* Pre-hidden start state for the Home reveal system. `motion-armed` is set by an
   inline head script only when JS runs and reduced motion is not requested, so
   no-JS and reduced-motion visitors always see fully rendered content. Opacity
   only: no geometry changes before the reveal begins. */
html.motion-armed .hero-image,
html.motion-armed .hero-content > *,
html.motion-armed .site-header,
html.motion-armed .trust-grid,
html.motion-armed .signature-head,
html.motion-armed .signature-item,
html.motion-armed .experience-grid,
html.motion-armed .about-portrait,
html.motion-armed .about-copy,
html.motion-armed .result-head,
html.motion-armed .result-item,
html.motion-armed .reviews .section-intro,
html.motion-armed .review-feature,
html.motion-armed .offer {
  opacity: 0;
}
.button, .carousel-arrow, .menu-toggle, .dialog-close, .dialog-controls button {
  transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
}
.button:active, .carousel-arrow:active, .menu-toggle:active, .dialog-close:active, .dialog-controls button:active { transform: scale(.985); }
.after-crop img, .transformation img, .review-image img { transition: transform var(--duration-slow) var(--ease-premium); }
.after-crop img { transform-origin: 75% 50%; }
@media (hover:hover) and (pointer:fine) {
  .service-card .after-crop:hover img { transform: translateX(-50%) scale(1.025); }
  .transformation:hover img, .review-image:hover img { transform: scale(1.025); }
}
.carousel-arrow::after { content: ''; position: absolute; inset: -6px; }
.detail-dialog { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.dialog-close { min-width: 44px; min-height: 44px; }
.detail-dialog .service-image { height: auto; aspect-ratio: 1.5; }
@media(max-width:800px) {
  .enhanced .main-navigation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--dark);
    max-height: calc(100vh - var(--header-height) - 37px);
    max-height: calc(100dvh - var(--header-height) - 37px);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-premium), transform var(--duration-normal) var(--ease-premium), visibility 0s var(--duration-normal);
  }
  .enhanced .main-navigation.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  #main-navigation a,
  .menu-toggle {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  #main-navigation a {
    transition: transform var(--press-out) var(--ease-premium), background-color var(--press-out) var(--ease-premium), color var(--press-out) var(--ease-premium);
  }
  #main-navigation a.is-pressed,
  #main-navigation a:active {
    transform: scale(.97);
    background: #c4b29514;
    transition-duration: var(--press-in);
  }
  #main-navigation a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #main-navigation a.is-pressed,
  #main-navigation a:active {
    transform: none;
    transition-duration: 0ms;
  }
}

/* Final scoped details: approved section and card geometry is preserved. */
.story-icon { width:36px; height:36px; padding:0; font-size:19px; box-shadow:none; background:#fffaf5e6; }
.offer { align-self:center; }
.offer-support { margin-top:24px; font-size:14px; line-height:1.65; color:#ddd4c4; }
@media (hover:hover) and (pointer:fine) {
  .button:hover { transform:translateY(-1px); }
  .button:active { transform:scale(.985); }
}
@media (max-width:540px) {
  .announcement { font-size:10px; }
  .site-header .brand-name { font-size:19px; }
  .experience-item h3 { font-size:10px; line-height:1.5; }
  }
@media (max-width:360px) {
  .experience-item h3 { font-size:10px; }
  }

/* Scoped touch surfaces and owned native-dialog transitions. */
:root { --press-in:70ms; --press-out:200ms; --press-release:220ms; }
@media (hover:hover) and (pointer:fine) {
  .main-navigation a:hover:after { transform:scaleX(1); }
  .dialog-close:hover { background:#c4b2951a; border-color:#a68c6a; color:#4b4338; box-shadow:0 0 0 4px #c4b29514; transform:scale(1.03); }
}
:is(.service-image[data-service], .transformation, .review-image) {
  position:relative;
  touch-action:manipulation;
  transition:scale var(--press-release) var(--ease-premium);
}
:is(.service-image[data-service], .transformation, .review-image)::before {
  content:''; position:absolute; inset:0; z-index:3;
  background:#17130c; opacity:0; pointer-events:none;
  transition:opacity var(--press-release) var(--ease-premium);
}
:is(.service-image[data-service], .transformation, .review-image).is-pressed {
  scale:.988; transition-duration:var(--press-in);
}
:is(.service-image[data-service], .transformation, .review-image).is-pressed::before {
  opacity:.055; transition-duration:var(--press-in);
}
:is(.button[data-service], .button[data-gallery], [data-dialog], .dialog-controls button, .dialog-close, .menu-toggle) {
  touch-action:manipulation;
  transition:transform var(--press-out) var(--ease-premium), background-color var(--press-out) var(--ease-premium), border-color var(--press-out) var(--ease-premium);
}
:is(.button[data-service], .button[data-gallery], [data-dialog], .dialog-controls button).is-pressed {
  transform:translateY(1px) scale(.985); transition-duration:var(--press-in);
}
:is(.dialog-controls button, .menu-toggle).is-pressed { transform:translateY(1px) scale(.975); transition-duration:var(--press-in); }
.button-gold.is-pressed { background:#987949; }
.button-outline.is-pressed, .dialog-controls button.is-pressed { background:#c4b2951a; }
.detail-dialog { --dialog-inset:49px; }
.detail-dialog[open]::backdrop { animation:dialog-backdrop-in 240ms var(--ease-soft) both; }
.detail-dialog[open].is-closing::backdrop { animation:dialog-backdrop-out 240ms var(--ease-in) 70ms both; }
@keyframes dialog-backdrop-in { from { opacity:var(--backdrop-from,0); } to { opacity:1; } }
@keyframes dialog-backdrop-out { from { opacity:var(--backdrop-from,1); } to { opacity:0; } }
.dialog-toolbar {
  position:sticky; top:calc(9px - var(--dialog-inset)); height:0; z-index:5;
  margin-top:calc(9px - var(--dialog-inset)); margin-bottom:calc(var(--dialog-inset) - 9px);
}
.dialog-close {
  top:0; right:calc(16px - var(--dialog-inset));
  width:44px; height:44px; padding:11px; display:grid; place-items:center;
  border:1px solid #c4b29580; background:var(--ivory);
}
.detail-dialog .dialog-close {
  transition:background 220ms var(--ease-premium), color 220ms var(--ease-premium), border-color 220ms var(--ease-premium), transform 200ms var(--ease-premium), box-shadow 220ms var(--ease-premium);
}
.dialog-close.is-pressed { transform:scale(.93); background:#e9e1d6; border-color:#a68c6a; transition-duration:var(--press-in); }
.menu-toggle.is-pressed { background:#c4b29526; }
html[data-input=keyboard] .dialog-close:focus-visible { outline:2px solid #7a5e3a; outline-offset:2px; }
html[data-input=pointer] .detail-dialog button:focus-visible { outline:none; }
@media (prefers-reduced-motion: no-preference) {
  .detail-dialog.is-closing .dialog-close svg { transform:rotate(90deg); transition:transform 260ms cubic-bezier(.4,0,1,1); }
}
@media(max-width:540px) {
  .detail-dialog { --dialog-inset:40px; }
  .dialog-close { right:-9px; }
}

/* Respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after,.detail-dialog::backdrop {
    transition:none!important;
    animation:none!important
  }
  }

/* ==========================================================================
   HOME · Signature services, About Riri, Real Results, Client Love, and the
   final booking CTA. Scoped to the Home page; reuses the existing
   tokens (--ivory, --card, --ink, --dark, --gold, --muted, --line) and the
   approved Cormorant / Jost pairing.
   ========================================================================== */

/* SIGNATURE SERVICES ---------------------------------------------------- */
.signature-head {
  margin-bottom:58px
}
.signature-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,310px);
  align-items:end;
  gap:22px 56px;
  margin-top:20px
}
.signature-heading h2 {
  font-size:44px;
  letter-spacing:-1.1px
}
.signature-lead {
  font-size:14px;
  line-height:1.85;
  color:var(--muted);
  padding-bottom:6px
}
.signature-list {
  list-style:none;
  margin:0;
  padding:0
}
.signature-item {
  position:relative;
  border-top:1px solid var(--line);
  padding-top:22px
}
.signature-item + .signature-item {
  margin-top:34px
}
.signature-media {
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:1.5;
  background:var(--ivory)
}
.signature-media:not(.after-crop) img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  transition:transform var(--duration-slow) var(--ease-premium)
}
.signature-body {
  margin-top:20px
}
.signature-title {
  display:flex;
  align-items:baseline;
  gap:15px
}
.signature-name {
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:1.9px;
  line-height:1.35;
  text-transform:uppercase
}
.signature-trigger {
  border:0;
  padding:0;
  background:none;
  font:inherit;
  letter-spacing:inherit;
  color:inherit;
  text-align:left
}
.signature-trigger:after {
  content:'';
  position:absolute;
  inset:0
}
.signature-note {
  margin-top:12px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  max-width:40ch
}
.signature-action {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  font-size:11px;
  font-weight:500;
  letter-spacing:1.4px;
  color:#3d3a33
}
.signature-arrow {
  width:15px;
  height:15px;
  stroke-width:1.4;
  color:#a9987d
}
@media (hover:hover) and (pointer:fine) {
  .signature-item:hover .signature-media:not(.after-crop) img {
    transform:scale(1.025)
  }
  .signature-item:hover .signature-action {
    color:#7a5e3a
  }
  .signature-item:hover .signature-name {
    color:#89683b
  }
}
@media (min-width:801px) {
  /* Intro aligned to the same 12-column frame as the service modules */
  .signature-heading {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:56px;
    align-items:end;
    margin-top:20px
  }
  .signature-heading h2 {
    grid-column:1/8
  }
  .signature-lead {
    grid-column:9/13;
    align-self:end;
    padding-bottom:0
  }
  /* Uniform 2 x 2 editorial grid: equal columns, equal row gap */
  .signature-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:56px;
    row-gap:62px
  }
  .signature-item {
    display:flex;
    flex-direction:column;
    padding-top:24px
  }
  .signature-item + .signature-item {
    margin-top:0
  }
  .signature-body {
    flex:1;
    display:flex;
    flex-direction:column
  }
  .signature-note {
    margin-top:12px;
    min-height:3.6em
  }
  .signature-action {
    margin-top:auto;
    padding-top:18px
  }
}

/* ABOUT RIRI ------------------------------------------------------------ */
.about {
  padding:112px 0
}
.about-layout {
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:0 56px;
  align-items:center
}
.about-portrait {
  margin:0;
  overflow:hidden;
  background:#1d1b18
}
.about-portrait img {
  width:100%;
  height:100%;
  aspect-ratio:.88;
  object-fit:cover;
  object-position:center 30%
}
.about-copy {
  max-width:560px
}
.about-copy .eyebrow {
  color:#cfc0a6
}
.about-copy h2 {
  font-size:46px;
  letter-spacing:-1.1px;
  margin-top:20px
}
.about-copy p:not(.eyebrow) {
  font-size:15px;
  line-height:1.9;
  color:#d8d0c4;
  margin-top:22px;
  max-width:46ch
}

/* REAL RESULTS ---------------------------------------------------------- */
.transformation-tag {
  position:absolute;
  top:13px;
  left:15px;
  z-index:1;
  font-size:10px;
  font-weight:500;
  letter-spacing:1.8px;
  color:#fdf8f0;
  text-shadow:0 1px 8px rgba(0,0,0,.45)
}
.gallery {
  padding:70px 0 72px
}
.result-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:24px 40px;
  margin-bottom:34px
}
.result-head .eyebrow {
  color:#7a5e3a
}
.result-head h2 {
  font-size:78px;
  letter-spacing:-1.1px;
  margin-top:14px
}
.result-lead {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin-top:18px
}
.result-explore {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  align-self:end;
  padding:0 0 8px;
  border:0;
  background:none;
  font-size:12px;
  font-weight:500;
  letter-spacing:1.6px;
  white-space:nowrap;
  color:var(--ink)
}
.result-explore:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--duration-normal) var(--ease-premium)
}
.result-arrow {
  width:16px;
  height:16px;
  stroke-width:1.2;
  color:#7a5e3a;
  transition:transform var(--duration-normal) var(--ease-premium)
}
.result-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:26px;
  row-gap:22px
}
.result-item {
  margin:0
}
.result-media {
  position:relative;
  overflow:hidden;
  aspect-ratio:1.55;
  background:#ac886e
}
.result-media img {
  width:100%;
  height:100%;
  object-fit:cover
}
.result-caption {
  margin-top:18px
}
.result-title {
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:1.6px;
  line-height:1.4;
  text-transform:uppercase
}
.result-note {
  margin-top:10px;
  font-size:14px;
  letter-spacing:1.4px;
  line-height:1.7;
  color:var(--muted)
}
.result-action {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding:0;
  border:0;
  background:none;
  font-size:11px;
  font-weight:500;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--ink)
}
:is(.result-action, .result-explore) {
  touch-action:manipulation;
  transition:transform var(--press-out) var(--ease-premium), color var(--press-out) var(--ease-premium)
}
:is(.result-action, .result-explore).is-pressed {
  transform:translateY(1px);
  transition-duration:var(--press-in)
}
@media (hover:hover) and (pointer:fine) {
  .result-explore:hover:after {
    transform:scaleX(1)
  }
  .result-explore:hover .result-arrow,
  .result-action:hover .result-arrow {
    transform:translateX(4px)
  }
  .result-action:hover {
    color:#7a5e3a
  }
  .result-thumb:hover {
    border-color:#a9987d
  }
  .result-nav button:hover {
    background:#ece5da
  }
  .result-pager button:not(:disabled):hover {
    color:#7a5e3a
  }
  .result-social:not(.is-unavailable):hover {
    border-color:#a9987d;
    color:#7a5e3a
  }
}
.dialog--results {
  width:min(1120px,calc(100% - 40px));
  padding:44px;
  --dialog-inset:44px
}
.dialog--results p.result-progress {
  margin-top:0;
  margin-bottom:24px;
  padding-right:58px;
  font-size:11px;
  letter-spacing:1.6px;
  line-height:1.8;
  color:var(--muted)
}
.result-layout {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  column-gap:56px;
  align-items:start
}
.result-stage {
  position:relative;
  overflow:hidden;
  aspect-ratio:1.55;
  background:#ac886e
}
.result-stage img {
  width:100%;
  height:100%;
  object-fit:cover
}
.result-nav {
  position:absolute;
  inset:0;
  pointer-events:none
}
.result-nav button {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid #c4b29580;
  border-radius:50%;
  background:var(--ivory);
  color:#4d463c;
  pointer-events:auto
}
.result-nav-previous {
  left:18px
}
.result-nav-next {
  right:18px
}
.result-nav .icon {
  width:18px;
  height:18px;
  stroke-width:1.4
}
.result-nav-previous .icon {
  transform:rotate(180deg)
}
.result-info .eyebrow {
  color:#7a5e3a;
  margin-bottom:14px
}
.dialog--results .result-info h2 {
  font-size:46px;
  letter-spacing:-1.1px;
  padding-right:0;
  margin-bottom:0
}
.result-rule {
  display:block;
  width:40px;
  height:1px;
  background:var(--line);
  margin-top:20px
}
.dialog--results p.result-copy {
  margin-top:20px;
  min-height:calc(2 * 1.8em);
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  animation:result-copy-in var(--duration-normal) var(--ease-premium) both
}
@keyframes result-copy-in {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
.result-pager {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:34px
}
.result-pager button {
  padding:0;
  border:0;
  background:none;
  font-size:11px;
  font-weight:500;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--ink)
}
.result-pager button:disabled {
  color:var(--muted)
}
.result-pager-divider {
  width:1px;
  height:14px;
  background:var(--line)
}
.result-more {
  margin-top:34px
}
.result-more-actions {
  margin-top:34px
}
.dialog--results p.result-more-label {
  margin-top:0;
  font-size:10px;
  letter-spacing:2px;
  line-height:1.6;
  color:var(--muted)
}
.result-socials {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px
}
.result-social {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:44px;
  min-width:0;
  padding:0 14px;
  border:1px solid var(--line);
  background:transparent;
  font-size:11px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:1.6px;
  text-align:center;
  text-transform:uppercase;
  color:var(--ink);
  touch-action:manipulation;
  transition:transform var(--press-out) var(--ease-premium), border-color var(--press-out) var(--ease-premium), color var(--press-out) var(--ease-premium)
}
.result-social .icon {
  width:16px;
  height:16px
}
.result-social.is-unavailable {
  color:var(--muted);
  cursor:default
}
.result-social.is-pressed {
  transform:translateY(1px);
  transition-duration:var(--press-in)
}
.result-thumbs {
  display:flex;
  gap:10px;
  margin-top:14px
}
.result-thumb {
  width:64px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  background:#ac886e;
  overflow:hidden
}
.result-thumb img {
  width:100%;
  height:100%;
  object-fit:cover
}
.result-thumb[aria-current] {
  border-color:var(--ink)
}
@media (min-width:801px) and (max-width:1099px) {
  .result-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:30px;
    row-gap:40px
  }
}
@media (max-width:800px) {
  .gallery {
    padding:52px 0 58px
  }
  .result-head {
    grid-template-columns:minmax(0,1fr);
    gap:0;
    margin-bottom:30px
  }
  .result-head h2 {
    font-size:44px
  }
  .result-lead {
    margin-top:16px
  }
  .result-explore {
    align-self:start;
    margin-top:18px
  }
  .result-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:16px;
    row-gap:26px
  }
  .result-item {
    position:relative;
    display:flex;
    flex-direction:column
  }
  .result-media {
    aspect-ratio:1.5
  }
  .result-caption {
    margin-top:12px;
    display:flex;
    flex-direction:column;
    flex:1
  }
  .result-title {
    font-size:11px;
    letter-spacing:1.2px
  }
  /* Description shown on mobile like desktop, sized for the narrow columns.
     var(--muted) on ivory ≈ 4.6:1 — passes WCAG AA. */
  .result-note {
    margin-top:8px;
    font-size:12px;
    line-height:1.6;
    letter-spacing:.6px
  }
  .result-action {
    margin-top:auto;
    padding-top:12px
  }
  .result-action:after {
    content:'';
    position:absolute;
    inset:0
  }
  .result-action.is-pressed {
    transform:none
  }
  .dialog--results {
    width:calc(100% - 24px);
    padding:24px;
    --dialog-inset:24px;
    max-height:92dvh
  }
  .dialog--results p.result-progress {
    margin-bottom:20px
  }
  .result-layout {
    grid-template-columns:minmax(0,1fr);
    column-gap:0;
    row-gap:26px
  }
  .result-stage {
    aspect-ratio:1.4
  }
  .result-nav-previous {
    left:10px
  }
  .result-nav-next {
    right:10px
  }
  .dialog--results .result-info h2 {
    font-size:36px
  }
  .result-pager {
    margin-top:26px
  }
  .result-more-actions {
    margin-top:26px
  }
  .result-socials {
    grid-template-columns:1fr
  }
  .result-thumbs {
    overflow-x:auto;
    scrollbar-width:none
  }
  .result-thumbs::-webkit-scrollbar {
    display:none
  }
}

/* CLIENT LOVE ----------------------------------------------------------- */
.reviews.section-dark {
  padding:96px 0 104px
}
.reviews.section-dark .reviews-layout {
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  column-gap:56px;
  align-items:center
}
.reviews.section-dark .section-intro h2 {
  color:#f4eee5
}
.reviews.section-dark .stars {
  color:#c8b58e
}
.reviews.section-dark .review-rating>span:last-child {
  color:#cfc0a6
}
.reviews.section-dark .section-intro .review-disclaimer {
  color:#a79e91
}
.review-feature {
  margin:0;
  border-left:1px solid #3a352c;
  padding-left:56px;
  min-width:0
}
html.enhanced .review-feature {
  display:flex;
  flex-direction:column
}
.review-slides {
  display:block
}
html.enhanced .review-slides {
  display:grid;
  order:1
}
.review-slide {
  margin:0
}
.review-slide + .review-slide {
  margin-top:38px
}
html.enhanced .review-slide {
  grid-area:1/1;
  margin:0;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .54s var(--ease-premium), transform .54s var(--ease-premium)
}
html.enhanced .review-slide.is-active {
  opacity:1;
  transform:none;
  pointer-events:auto
}
.review-feature blockquote {
  font-family:var(--serif);
  font-size:clamp(26px,2.9vw,40px);
  font-weight:400;
  line-height:1.28;
  letter-spacing:-.4px;
  color:#f6f0e6;
  margin:0
}
.review-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 16px;
  margin-top:28px
}
.review-name {
  font-size:11px;
  letter-spacing:1px;
  color:#e7dfd1
}
.review-service {
  font-size:10px;
  letter-spacing:1.4px;
  color:#968c7d
}
.review-source {
  position:relative; /* anchor for the expanded tap area below */
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  padding-bottom:3px;
  border-bottom:1px solid #474135;
  font-size:10px;
  letter-spacing:1.3px;
  color:#a79d8d;
  transition:color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium)
}
/* Expand the hit area to >= 44px tall without changing the visual layout. */
.review-source:before {
  content:'';
  position:absolute;
  inset:-14px -6px
}
/* Monochrome inline SVG arrow (replaces the Unicode ↗ iOS rendered as emoji).
   Colour follows the link via currentColor, including the existing hover. */
.review-source-arrow-icon {
  display:block;
  width:1em;
  height:1em;
  font-size:13px;
  color:inherit;
  pointer-events:none;
  flex:0 0 auto
}
@media (hover:hover) and (pointer:fine) {
.review-source:hover {
  color:#e8d6ba;
  border-color:#c8b58e
}
}
.review-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:40px
}
html.enhanced .review-nav {
  order:2
}
html:not(.enhanced) .review-nav {
  display:none
}
.review-dots {
  display:flex;
  align-items:center;
  gap:6px;
  order:-1
}
.review-dot {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  background:none
}
.review-dot span {
  display:block;
  width:20px;
  height:1px;
  background:#4a4438;
  transition:background var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium)
}
.review-dot.is-active span {
  background:#c8b58e;
  transform:scaleY(2)
}
@media (hover:hover) and (pointer:fine) {
.review-dot:hover span {
  background:#8d8474
}
}
.review-arrows {
  display:flex;
  align-items:center;
  gap:10px
}
.review-arrow {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #3a352c;
  border-radius:50%;
  background:transparent;
  color:#c4b699;
  transition:background var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium)
}
.review-arrow .icon {
  width:18px;
  height:18px;
  stroke-width:1.3
}
.review-toggle .review-play-icon,
.review-toggle.is-paused .review-pause-icon {
  display:none
}
.review-toggle.is-paused .review-play-icon {
  display:block
}
.review-prev .icon {
  transform:rotate(180deg)
}
@media (hover:hover) and (pointer:fine) {
.review-arrow:hover {
  background:#ffffff0f;
  border-color:#6b6355;
  color:#f0e7d8
}
}
@media (prefers-reduced-motion: reduce) {
  html.enhanced .review-slide,
  .review-dot span,
  .review-arrow,
  .review-source {
    transition:none
  }
  .review-slide {
    transform:none
  }
}

/* FINAL BOOKING CTA ----------------------------------------------------- */
.booking-final {
  padding:96px 0
}
.booking-final:after {
  content:none
}
.booking-final .offer {
  max-width:720px;
  margin-inline:auto;
  text-align:center
}
.booking-final .offer h2 {
  font-size:44px
}
.booking-final .offer-support {
  margin-top:26px
}
.booking-final .offer>.button {
  margin-top:38px
}

/* Home responsive tuning */
@media (max-width:1050px) {
  .signature-heading h2 {
    font-size:36px
  }
  .about-layout {
    gap:0 56px
  }
  .about-copy h2 {
    font-size:38px
  }
  .booking-final {
    padding:80px 0
  }
  .booking-final .offer h2 {
    font-size:38px
  }
}
@media (max-width:800px) {
  .signature-head {
    margin-bottom:38px
  }
  .signature-heading {
    grid-template-columns:minmax(0,1fr);
    gap:18px
  }
  .signature-heading h2 {
    font-size:40px;
    max-width:340px
  }
  .signature-lead {
    padding-bottom:0
  }
  .signature-list {
    display:block
  }
  .signature-item {
    padding-top:22px
  }
  .signature-item + .signature-item {
    margin-top:34px
  }
  .signature-item:nth-child(even) {
    margin-top:34px
  }
  .signature-item .signature-media {
    aspect-ratio:1.5
  }
  .signature-note {
    max-width:46ch
  }
  .about {
    padding:76px 0 80px
  }
  .about-layout {
    grid-template-columns:minmax(0,1fr);
    gap:36px
  }
  .about-portrait img {
    aspect-ratio:1.15;
    object-position:center 26%
  }
  .about-copy {
    max-width:none
  }
  .about-copy h2 {
    font-size:40px
  }
  .about-copy p:not(.eyebrow) {
    font-size:14px
  }
  .transformation-grid {
    grid-template-columns:minmax(0,1fr);
    gap:18px
  }
  .transformation-grid .transformation {
    aspect-ratio:1.6
  }
  .transformation-grid .transformation:first-child {
    aspect-ratio:1.6
  }
  .reviews.section-dark {
    padding:72px 0 78px
  }
  .reviews.section-dark .reviews-layout {
    grid-template-columns:minmax(0,1fr);
    gap:34px
  }
  .review-feature {
    border-left:0;
    border-top:1px solid #3a352c;
    padding-left:0;
    padding-top:34px
  }
  .booking-final {
    padding:72px 0
  }
}
@media (max-width:540px) {
  .signature-heading h2 {
    font-size:38px;
    max-width:300px
  }
  .signature-note {
    font-size:14px
  }
  .about-copy h2 {
    font-size:36px
  }
  .review-feature blockquote {
    font-size:24px
  }
  .review-nav {
    gap:8px
  }
  .review-dots {
    gap:2px
  }
  .review-dot {
    width:24px
  }
  .review-arrows {
    gap:6px
  }
  .booking-final {
    padding:64px 0
  }
  .booking-final .offer h2 {
    font-size:34px
  }
}

/* ==========================================================================
   Service navigation (dropdown / accordion)
   ========================================================================== */

.nav-services {
  position:relative;
  height:var(--header-height);
  display:flex;
  align-items:center
}

.nav-trigger {
  background:none;
  border:0;
  padding:0;
  font:inherit;
  cursor:pointer;
  position:relative;
  display:inline-flex;
  align-items:center;
  color:inherit;
  font-family:var(--sans);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1.1px;
  font-weight:500;
  line-height:1
}

.nav-trigger:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:5px
}

.nav-trigger-chevron {
  width:9px;
  height:5px;
  margin-left:7px;
  stroke:currentColor;
  stroke-width:1.25;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform var(--duration-fast) var(--ease-soft)
}

.nav-services.is-open .nav-trigger-chevron {
  transform:rotate(180deg)
}

.nav-dropdown-panel {
  list-style:none;
  margin:0;
  padding:0
}

/* Layout-transparent on desktop so the panel keeps its absolute band; the
   mobile block turns this into the animated accordion clip. */
.nav-accordion-clip {
  display:contents
}

.nav-dropdown-panel li {
  position:relative
}

/* service information | arrow — one shared grid for all four rows */
.nav-dropdown-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  align-items:center;
  text-decoration:none;
  color:var(--ink)
}

.nav-dropdown-item:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:-2px
}

.nav-dropdown-content {
  display:block;
  min-width:0
}

.nav-dropdown-label {
  display:block;
  font-family:var(--serif);
  font-size:21px;
  line-height:1.12;
  font-weight:500;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--ink);
  transition:transform var(--duration-fast) var(--ease-soft)
}

.nav-dropdown-desc {
  display:block;
  margin-top:7px;
  font-family:var(--sans);
  font-size:10.5px;
  line-height:1;
  font-weight:400;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--muted)
}

.nav-dropdown-arrow {
  width:18px;
  height:18px;
  flex:none;
  color:var(--ink);
  opacity:.82;
  stroke-width:1.5;
  transition:opacity var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft)
}

/* current service — restrained: heavier title, champagne arrow */
.nav-dropdown-item[aria-current="page"] .nav-dropdown-label {
  font-weight:600
}

.nav-dropdown-item[aria-current="page"] .nav-dropdown-arrow {
  color:var(--gold);
  opacity:1
}

.nav-services.is-active-parent .nav-trigger,
.nav-services.is-open .nav-trigger {
  color:var(--gold)
}

@media (min-width: 801px) {
  /* One header surface. The nested list uses the header shell as its
     containing block, preserving source/tab order and the mobile accordion. */
  .nav-services { position:static }
  .nav-trigger-chevron { width:12px; height:12px; transform:rotate(90deg) }
  .nav-services.is-open .nav-trigger-chevron { transform:rotate(270deg) }

  .header-shell.services-open { background:var(--dark) }
  .header-shell.services-open .site-header { color:var(--ivory) }

  .nav-dropdown-panel {
    position:absolute;
    top:100%;
    inset-inline:0;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    padding:22px max(4.5%, calc((100% - 1310px) / 2));
    background:var(--dark);
    border-block:1px solid rgba(185,154,109,.22);
    clip-path:inset(0 0 100%);
    visibility:hidden;
    pointer-events:none;
    /* Closing is immediate: no lingering panel over the restored hero. */
    transition:none
  }

  .nav-services.is-open .nav-dropdown-panel {
    clip-path:inset(0);
    visibility:visible;
    pointer-events:auto;
    transition:clip-path 180ms var(--ease-premium)
  }

  .nav-dropdown-panel li { min-width:0 }
  .nav-dropdown-panel li + li { border-left:1px solid rgba(185,154,109,.22) }

  .nav-services .nav-dropdown-item {
    grid-template-columns:minmax(0,1fr) 16px;
    gap:12px;
    height:100%;
    min-height:56px;
    padding:4px 24px;
    color:var(--ivory)
  }
  .nav-dropdown-panel li:first-child .nav-dropdown-item { padding-left:0 }
  .nav-dropdown-panel li:last-child .nav-dropdown-item { padding-right:0 }
  .nav-services .nav-dropdown-item::after { content:none }

  .nav-dropdown-label {
    font-family:var(--sans);
    font-size:13px;
    line-height:1.4;
    font-weight:500;
    letter-spacing:1.1px;
    color:var(--ivory)
  }
  .nav-dropdown-desc {
    margin-top:6px;
    font-size:10px;
    line-height:1.5;
    letter-spacing:1.4px;
    color:rgba(245,242,239,.62)
  }
  .nav-dropdown-arrow {
    width:16px;
    height:16px;
    color:var(--gold);
    opacity:.8
  }
  .nav-dropdown-item:hover .nav-dropdown-label,
  .nav-dropdown-item:focus-visible .nav-dropdown-label { transform:translateX(2px) }
  .nav-dropdown-item:hover .nav-dropdown-arrow,
  .nav-dropdown-item:focus-visible .nav-dropdown-arrow {
    opacity:1;
    transform:translateX(3px)
  }
  .nav-dropdown-item[aria-current="page"] .nav-dropdown-label { color:var(--gold) }
  .nav-trigger::after { content:none }
}

/* Desktop hover highlight for the Services dropdown. Scoped to true hover
   devices so a tap on touch hardware never leaves a sticky state. The :not()
   keeps the active destination (gold + heavier label, solid arrow) distinct
   from an item that is merely hovered. */
@media (hover: hover) and (pointer: fine) and (min-width: 801px) {
  .nav-dropdown-item:not([aria-current="page"]):hover .nav-dropdown-label {
    color:var(--gold)
  }
  .nav-dropdown-item:not([aria-current="page"]):hover .nav-dropdown-arrow {
    color:var(--gold);
    opacity:1;
    transform:translateX(3px)
  }
}

/* Give longer service names real space on landscape tablets. */
@media (min-width:801px) and (max-width:1100px) {
  .nav-dropdown-panel { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:6px; padding-block:8px }
  .nav-services .nav-dropdown-item { min-height:46px }
  .nav-dropdown-panel li:nth-child(3) { border-left:0 }
  .nav-dropdown-panel li:nth-child(3) .nav-dropdown-item { padding-left:0 }
  .nav-dropdown-panel li:nth-child(2) .nav-dropdown-item { padding-right:0 }
}
@media (min-width:801px) and (max-width:1050px) {
  .nav-dropdown-panel { padding-inline:5.5% }
}

@media (max-width: 800px) {
  .nav-services {
    position:static;
    height:auto;
    display:block;
    width:100%
  }

  .nav-trigger {
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    min-height:52px;
    /* 52px keeps the label ink clear of the 24px-inset affordance */
    padding:0 52px 0 0;
    font-size:12px;
    color:#f5ede0;
    letter-spacing:1.1px;
    text-transform:uppercase
  }

  /* +/− affordance: both strokes are absolutely positioned on the SAME centre
     point at the right edge of the full-width row (24px inset, 12px long) */
  .nav-trigger::before {
    content:"";
    position:absolute;
    top:50%;
    right:24px;
    width:12px;
    height:1px;
    background:var(--gold);
    transform:translateY(-50%);
    pointer-events:none
  }

  .nav-trigger::after {
    content:"";
    position:absolute;
    top:50%;
    right:29.5px;
    width:1px;
    height:12px;
    background:var(--gold);
    transform:translateY(-50%);
    transform-origin:center;
    transition:transform var(--duration-normal) var(--ease-premium);
    pointer-events:none
  }

  .nav-services.is-open .nav-trigger::after {
    transform:translateY(-50%) scaleY(0)
  }

  .nav-trigger-chevron {
    display:none
  }

  /* Accordion clip: animating the row from 0fr to 1fr unfolds the band from
     the header in one restrained motion instead of snapping. */
  .nav-accordion-clip {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 340ms var(--ease-premium)
  }

  .nav-services.is-open .nav-accordion-clip {
    grid-template-rows:1fr
  }

  .nav-accordion-panel {
    min-height:0;
    overflow:hidden;
    list-style:none;
    margin:0;
    padding:0;
    /* Transparent while collapsed so the border cannot bleed through at 0fr. */
    border-top:1px solid transparent;
    border-bottom:1px solid transparent;
    transition:border-color 240ms var(--ease-soft)
  }

  .nav-services.is-open .nav-accordion-panel {
    border-color:rgba(185,154,109,.22)
  }

  /* Rows settle in after the band starts opening; closing keeps no delay so the
     list clears before the height collapses. */
  .nav-accordion-panel > li {
    opacity:0;
    transform:translateY(-6px);
    transition:opacity 200ms var(--ease-soft), transform 260ms var(--ease-premium)
  }

  .nav-services.is-open .nav-accordion-panel > li {
    opacity:1;
    transform:none
  }

  .nav-services.is-open .nav-accordion-panel > li:nth-child(1) { transition-delay:40ms }
  .nav-services.is-open .nav-accordion-panel > li:nth-child(2) { transition-delay:70ms }
  .nav-services.is-open .nav-accordion-panel > li:nth-child(3) { transition-delay:100ms }
  .nav-services.is-open .nav-accordion-panel > li:nth-child(4) { transition-delay:130ms }

  /* subtle hairline between rows only (no per-row borders) */
  .nav-accordion-panel li + li::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:rgba(185,154,109,.22)
  }

  .nav-accordion-panel .nav-dropdown-item {
    grid-template-columns:minmax(0,1fr) 16px;
    column-gap:16px;
    min-height:58px;
    padding:15px 0;
    color:#f0e9dd
  }

  .nav-accordion-panel .nav-dropdown-label {
    font-family:var(--sans);
    font-size:12.5px;
    line-height:1.3;
    letter-spacing:1.2px;
    font-weight:400;
    color:#f0e9dd
  }

  .nav-accordion-panel .nav-dropdown-desc {
    margin-top:6px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:1.5px;
    color:rgba(245,242,239,.5)
  }

  .nav-accordion-panel .nav-dropdown-arrow {
    width:15px;
    height:15px;
    color:var(--gold);
    opacity:.68;
    transition:opacity var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft)
  }

  .nav-accordion-panel .nav-dropdown-item:active .nav-dropdown-arrow {
    opacity:1;
    transform:translateX(2px)
  }

  .nav-accordion-panel .nav-dropdown-item[aria-current="page"] .nav-dropdown-label {
    color:var(--gold);
    font-weight:500
  }

  .nav-accordion-panel .nav-dropdown-item[aria-current="page"] .nav-dropdown-arrow {
    color:var(--gold);
    opacity:1
  }

  /* No-JS: the band sits open in normal flow and the affordance is removed. */
  html:not(.enhanced) .nav-accordion-clip {
    grid-template-rows:1fr
  }

  html:not(.enhanced) .nav-accordion-panel > li {
    opacity:1;
    transform:none
  }

  html:not(.enhanced) .nav-trigger::before,
  html:not(.enhanced) .nav-trigger::after {
    content:none
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-trigger-chevron,
  .nav-trigger::before,
  .nav-trigger::after,
  .nav-dropdown-panel,
  .nav-dropdown-item,
  .nav-dropdown-label,
  .nav-dropdown-arrow {
    transition-duration:1ms !important;
    transition-delay:0s !important
  }

  .nav-dropdown-panel {
    transform:none !important
  }

  .nav-services.is-open .nav-dropdown-panel {
    transform:none !important
  }
}