@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-300i.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/jost-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jost-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jost-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Designs by Simoni — design system
   Dark editorial. Rose-gold on ink. Single-line voice.
   ============================================================ */

:root{
  --ink:      #08080A;
  --ink-2:    #0E0E11;
  --ink-3:    #15151A;
  --ink-4:    #1D1D23;

  --rose:     #C9A38A;   /* brand accent, sampled from the monogram */
  --rose-hi:  #E3C4AC;
  --rose-lo:  #8C6A57;

  --bone:     #EFE9E3;
  --bone-2:   #A9A199;
  --bone-3:   #918A83;   /* 4.9:1 on the lightest panel — AA for small text */

  --line:     rgba(201,163,138,.16);
  --line-2:   rgba(239,233,227,.09);

  --ff-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --ff-ui:      'Jost', -apple-system, 'Segoe UI', system-ui, sans-serif;

  --pad:      clamp(1.25rem, 5vw, 4.5rem);
  --gutter:   clamp(1rem, 2.4vw, 2rem);
  --maxw:     84rem;
  --section:  clamp(5rem, 11vw, 10rem);

  --ease:     cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ff-ui);
  font-weight:300;
  font-size:clamp(.95rem,.4vw + .85rem,1.0625rem);
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
picture{ display:contents; }

/* anchors must clear the fixed header */
:target{ scroll-margin-top:7rem; }
[id]{ scroll-margin-top:7rem; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--rose); color:var(--ink); }

:focus-visible{
  outline:1px solid var(--rose);
  outline-offset:3px;
}

/* film grain — the thing that stops a dark page reading as flat black ------ */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9;
  pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- layout */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:56rem; }
.wrap--text{ max-width:44rem; }
.section{ padding-block:var(--section); position:relative; }

/* --------------------------------------------------------------- type */
.display{
  font-family:var(--ff-display);
  font-weight:300;
  line-height:.95;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
.display--xl{ font-size:clamp(2.9rem, 8.5vw, 6.75rem); }
.display--lg{ font-size:clamp(2.35rem, 5.6vw, 4.25rem); }
.display--md{ font-size:clamp(1.8rem, 3.4vw, 2.75rem); }

.display em{ font-style:italic; color:var(--rose); }

.eyebrow{
  font-family:var(--ff-ui);
  font-weight:500;
  font-size:.6875rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--rose);
  margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow::before{
  content:""; width:2.25rem; height:1px; flex:none;
  background:linear-gradient(90deg,transparent,var(--rose));
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{
  content:""; width:2.25rem; height:1px; flex:none;
  background:linear-gradient(270deg,transparent,var(--rose));
}

/* the single-line voice: one statement, generous air, nothing else */
.line{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(1.3rem, 2.5vw, 2rem);
  line-height:1.45;
  letter-spacing:.005em;
  color:var(--bone);
  margin:0;
  text-wrap:balance;
}
.line--dim{ color:var(--bone-2); }

.lede{
  color:var(--bone-2);
  max-width:38rem;
  margin:1.5rem 0 0;
  text-wrap:pretty;
}

/* ------------------------------------------------------------- ornament */
.rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.rule--glow{
  background:linear-gradient(90deg,transparent,var(--rose),transparent);
  opacity:.45;
}

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0; }
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(201,163,138,.045);
  font-size:.6875rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-2);
  white-space:nowrap;
}
.chip::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--rose); flex:none;
  box-shadow:0 0 0 3px rgba(201,163,138,.16);
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:.95rem 1.9rem;
  border-radius:999px;
  border:1px solid var(--rose);
  font-family:var(--ff-ui); font-weight:400;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rose);
  position:relative; overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--rose);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover{ color:var(--ink); }
.btn:hover::before{ transform:translateY(0); }

.btn--solid{ background:var(--rose); color:var(--ink); }
.btn--solid::before{ background:var(--rose-hi); }
.btn--solid:hover{ color:var(--ink); border-color:var(--rose-hi); }

.btn--ghost{ border-color:var(--line-2); color:var(--bone); }
.btn--ghost::before{ background:var(--bone); }

/* the phone number, treated as a designed object ------------------------- */
.tel{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:var(--ff-display);
  font-size:clamp(1.75rem,4.5vw,3.25rem);
  font-weight:300; letter-spacing:.01em;
  color:var(--bone);
  transition:color .4s var(--ease);
}
.tel svg{ width:1em; height:1em; flex:none; color:var(--rose); opacity:.9; }
.tel:hover{ color:var(--rose-hi); }
.tel--sm{ font-size:1.0625rem; letter-spacing:.02em; }

/* ------------------------------------------------------------ reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   Components — header, hero, work grid, services, footer
   ============================================================ */

/* ---------------------------------------------------------------- header */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.hdr__in{
  display:flex; align-items:center; gap:var(--gutter);
  height:clamp(5.25rem,8vw,6.75rem);
}
.brand{ display:flex; align-items:center; gap:.85rem; margin-right:auto; }
/* The client's approved mark: the scribble ring with STUDIO set inside, from
   tools/make_logo.py. No ring/border here - the artwork carries its own. */
.brand__mark{
  width:clamp(4rem,6vw,5.4rem); height:auto;
  flex:none; display:block;
}
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--ff-display); font-size:clamp(1.35rem,2vw,1.6rem); letter-spacing:.05em;
}
.brand__sub{
  font-size:.625rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--rose); margin-top:.3rem;
}

.nav{ display:flex; align-items:center; gap:clamp(1.25rem,2.5vw,2.5rem); }
.nav a{
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-2); position:relative; padding-block:.4rem;
  transition:color .35s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--rose); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--bone); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.hdr .btn{ padding:.7rem 1.4rem; font-size:.6875rem; }

.burger{ display:none; width:3rem; height:3rem; align-items:center; justify-content:center; }
.burger span{
  display:block; width:20px; height:1px; background:var(--bone); position:relative;
  transition:background .3s;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:1px; background:var(--bone);
  transition:transform .4s var(--ease);
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.is-open .burger span{ background:transparent; }
.is-open .burger span::before{ transform:translateY(6px) rotate(45deg); }
.is-open .burger span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:60rem){
  .burger{ display:flex; }
  .hdr .btn--tel{ display:none; }
  .nav{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; gap:2rem;
    background:rgba(8,8,10,.97);
    backdrop-filter:blur(20px);
    opacity:0; visibility:hidden;
    transition:opacity .45s var(--ease), visibility .45s;
  }
  .nav a{ font-size:1rem; letter-spacing:.24em; padding:.85rem 1.25rem; }
  .is-open .nav{ opacity:1; visibility:visible; }
}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative; overflow:hidden;
  min-height:clamp(34rem,92svh,54rem);
  display:flex; align-items:flex-end;
}
.hero__media{ position:absolute; inset:0; }
.hero__media picture{ display:block; width:100%; height:100%; }
/* The suite photo is 4:3 in a wide, short hero, so only ~15% crops away.
   Bias to the top so the botanical ceiling and chandelier stay in frame -
   that ceiling is the reason the client chose this room. */
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
/* The suite photo is bright and cool; left as a flat rectangle it sat ON the
   page rather than in it. Three things fix that: a long bottom ramp with an
   eased midpoint (a linear one banded and left a visible hem), a soft edge
   vignette all round, and a warm rose wash that ties the photo to the palette. */
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top,
      var(--ink) 0%, rgba(8,8,10,.99) 8%, rgba(8,8,10,.93) 16%,
      rgba(8,8,10,.80) 26%, rgba(8,8,10,.64) 38%, rgba(8,8,10,.50) 50%,
      rgba(8,8,10,.40) 64%, rgba(8,8,10,.40) 82%, rgba(8,8,10,.72) 100%),
    linear-gradient(to right,
      rgba(8,8,10,.88) 0%, rgba(8,8,10,.60) 34%, rgba(8,8,10,.26) 62%,
      rgba(8,8,10,.20) 80%, rgba(8,8,10,.46) 100%),
    radial-gradient(120% 78% at 46% 46%, transparent 20%, rgba(8,8,10,.62) 100%),
    linear-gradient(200deg, rgba(201,163,138,.10) 0%, transparent 55%);
}
/* settle the photo into the palette instead of letting it read as a bright inset */
.hero__media img{ filter:saturate(.9) contrast(1.02) brightness(.96); }

/* and let the section below start inside the same darkness */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:12rem;
  background:linear-gradient(to top, var(--ink), transparent);
  pointer-events:none; z-index:1;
}
.hero__in{
  position:relative; z-index:2; width:100%;
  padding-bottom:clamp(3.5rem,8vw,7rem); padding-top:10.5rem;
}
.hero__title{ max-width:18ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.75rem; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:1.75rem; align-items:center;
  margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--line);
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-3);
}
.hero__meta b{ color:var(--bone-2); font-weight:400; }

.scroll-cue{
  position:absolute; left:50%; bottom:1.75rem; z-index:3; translate:-50% 0;
  width:1px; height:3.5rem;
  background:linear-gradient(to bottom, transparent, var(--rose));
  opacity:.5;
}
@media (max-width:48rem){ .scroll-cue{ display:none; } }

/* ------------------------------------------------------- statement band */
.statement{ text-align:center; }
.statement .line{ font-size:clamp(1.5rem,3.6vw,2.9rem); max-width:22ch; margin-inline:auto; }
.statement .display--md{ max-width:20ch; margin-inline:auto; }

/* ------------------------------------------------------------ work grid */
.work{ display:grid; gap:var(--gutter); grid-template-columns:repeat(12,1fr); }
.work__item{
  position:relative; overflow:hidden; display:block;
  background:var(--ink-3); grid-column:span 12;
  margin:0; padding:0; border:0; text-align:left; color:inherit;
  font:inherit; appearance:none; cursor:pointer;
}
.work__item picture{ display:block; width:100%; height:100%; }
.work__item img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.94);
  transition:transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.work__item:hover img{ transform:scale(1.045); filter:saturate(1.04); }
.work__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,8,10,.92) 0%, rgba(8,8,10,.70) 22%, rgba(8,8,10,.20) 52%, transparent 78%);
  transition:opacity .6s var(--ease);
}
.work__cap{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(1.1rem,2.2vw,1.9rem);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}
/* Level-agnostic on purpose: the portfolio grid uses h2 (it sits under the page
   h1) while home and about use h3. Targeting h3 alone left every portfolio
   caption unstyled and in the wrong face. */
.work__cap :is(h1, h2, h3, h4){
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.15rem,1.8vw,1.6rem); line-height:1.2; margin:0;
}
.work__cap span{
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rose); white-space:nowrap; padding-bottom:.4rem; opacity:.95;
}
.work__cap :is(h1, h2, h3, h4){ text-shadow:0 1px 14px rgba(8,8,10,.6); }
@media (min-width:46rem){
  .work__item{ grid-column:span 6; }
  .work__item--s8{ grid-column:span 12; }
  .work__item--s12{ grid-column:span 12; }
}
@media (min-width:70rem){
  .work__item--s4{ grid-column:span 4; }
  .work__item--s6{ grid-column:span 6; }
  .work__item--s8{ grid-column:span 8; }
  .work__item--s12{ grid-column:span 12; }
}
.ar-43{ aspect-ratio:4/3; }
.ar-32{ aspect-ratio:3/2; }
.ar-34{ aspect-ratio:3/4; }
.ar-11{ aspect-ratio:1/1; }
.ar-169{ aspect-ratio:16/9; }
.ar-45{ aspect-ratio:4/5; }
.ar-219{ aspect-ratio:21/9; }

/* One item per row owns the height via aspect-ratio; its row-mates stretch to
   match. Pairing two aspect-ratios never lines up, because the column-to-gap
   ratio shifts with the viewport. Declared after .ar-* so it always wins. */
@media (min-width:46rem){
  /* Drop the ratio AND take the image out of flow, so this item contributes
     nothing to row sizing and simply stretches to the height its row-mate sets.
     Leaving the picture in flow makes the item size to the image instead. */
  .work__item.work__item--fill{ aspect-ratio:auto; min-height:16rem; }
  .work__item.work__item--fill picture{ position:absolute; inset:0; }
}

/* ------------------------------------------------------------- services */
.svc{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.svc__row{ border-bottom:1px solid var(--line); }
.svc__row > a, .svc__row > div{
  display:grid; align-items:baseline; gap:.6rem 2rem;
  grid-template-columns:auto 1fr;
  padding:clamp(1.5rem,3vw,2.4rem) 0;
  transition:padding .5s var(--ease);
}
.svc__row > a:hover{ padding-left:1rem; }
.svc__num{
  font-family:var(--ff-ui); font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; color:var(--rose); opacity:.8;
}
.svc__name{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.45rem,3vw,2.35rem); line-height:1.15; margin:0;
  transition:color .4s var(--ease);
}
.svc__row > a:hover .svc__name{ color:var(--rose-hi); }
.svc__desc{ grid-column:2; color:var(--bone-2); margin:.35rem 0 0; max-width:64ch; }

/* --------------------------------------------------------------- split */
.split{ display:grid; gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.split--top{ align-items:start; }
@media (min-width:56rem){
  .split{ grid-template-columns:1fr 1fr; }
  .split--40{ grid-template-columns:.8fr 1fr; }
}
.split__media{ position:relative; }
.split__media picture{ display:block; }
.split__media img{ width:100%; }
.split__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid var(--line);
  transform:translate(clamp(.6rem,1.4vw,1.35rem),clamp(.6rem,1.4vw,1.35rem));
}

/* ------------------------------------------------------------- quotes */
.quotes{ display:grid; gap:var(--gutter); }
@media (min-width:56rem){ .quotes{ grid-template-columns:repeat(3,1fr); } }
.quote{
  position:relative;
  padding:clamp(1.75rem,3.4vw,2.6rem);
  background:linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:1.1rem;
}
.quote::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--rose),transparent); opacity:.5;
}
.quote__stars{ color:var(--rose); letter-spacing:.28em; font-size:.75rem; }
.quote__txt{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.5; color:var(--bone); margin:0;
}
.quote__by{
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-3); margin-top:auto;
}
.quote__by b{ color:var(--rose); font-weight:400; }

/* -------------------------------------------------------------- cta band */
.cta{ text-align:center; position:relative; overflow:hidden; }
.cta::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(60% 100% at 50% 100%, rgba(201,163,138,.10), transparent 70%);
}
.cta > *{ position:relative; z-index:1; }
.cta__row{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.25rem; }

/* ---------------------------------------------------------------- footer */
.ftr{ border-top:1px solid var(--line); background:var(--ink-2); }
.ftr__grid{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  padding-block:clamp(3.5rem,7vw,5.5rem);
  grid-template-columns:1fr;
}
@media (min-width:48rem){ .ftr__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.ftr h2{
  font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--rose); margin:0 0 1.25rem; font-weight:500;
}
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.ftr a{ color:var(--bone-2); font-size:.9375rem; transition:color .3s var(--ease); }
.ftr a:hover{ color:var(--rose-hi); }
.ftr__base{
  border-top:1px solid var(--line-2);
  padding-block:1.75rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.75rem; color:var(--bone-3);
}

/* --------------------------------------------------------------- forms */
.form{ display:grid; gap:1.5rem; }
.field{ position:relative; }
.field input, .field textarea, .field select{
  width:100%; padding:1.05rem 0 .85rem;
  background:transparent; color:var(--bone);
  border:0; border-bottom:1px solid var(--line);
  font-family:var(--ff-ui); font-size:1rem; font-weight:300;
  transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:7rem; }
.field label{
  display:block; font-size:.625rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rose); margin-bottom:.15rem;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-bottom-color:var(--rose);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--bone-3); }

/* ------------------------------------------------------------- lightbox */
.lb{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,6,8,.96);
  backdrop-filter:blur(8px);
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden;
  /* visibility flips instantly on open so the dialog can take focus right
     away, and is delayed on close so the fade-out is still visible */
  transition:opacity .4s var(--ease), visibility 0s .4s;
}
.lb.is-open{
  opacity:1; visibility:visible;
  transition:opacity .4s var(--ease), visibility 0s 0s;
}
.lb img{ max-width:100%; max-height:82svh; object-fit:contain; }
.lb__cap{
  margin-top:1.25rem; text-align:center;
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-2);
}
.lb__x, .lb__nav{
  position:absolute; top:50%; translate:0 -50%;
  width:3rem; height:3rem; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  color:var(--bone); font-size:1.1rem;
  transition:border-color .3s, color .3s;
}
.lb__x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); translate:0 0; }
.lb__nav--prev{ left:clamp(.5rem,2vw,2rem); }
.lb__nav--next{ right:clamp(.5rem,2vw,2rem); }
.lb__x:hover, .lb__nav:hover{ border-color:var(--rose); color:var(--rose); }
body.lb-open{ overflow:hidden; }

/* --------------------------------------------------------------- utils */
.center{ text-align:center; }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.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;
}

/* ---------------------------------------------------- concept strip
   The 3D renders are visualisation, not photography. Shown at portfolio
   scale they compete with the real work and lose; shown as a strip they
   read as process, which is what they are. Scrolls on small screens so a
   five-item set never leaves a hole in a grid. */
.strip{
  display:grid; gap:var(--gutter);
  grid-auto-flow:column;
  grid-auto-columns:minmax(58vw,1fr);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  scrollbar-width:thin; scrollbar-color:var(--rose-lo) transparent;
}
.strip > *{ scroll-snap-align:start; }
.strip::-webkit-scrollbar{ height:3px; }
.strip::-webkit-scrollbar-thumb{ background:var(--rose-lo); }
@media (min-width:46rem){ .strip{ grid-auto-columns:minmax(30vw,1fr); } }
@media (min-width:70rem){
  .strip{
    grid-auto-flow:row; grid-template-columns:repeat(5,1fr);
    overflow:visible; padding-bottom:0;
  }
}
.strip .work__item{ grid-column:auto; }

/* The bio runs far longer than the portrait; centring left a dead gap above
   it. Pin the portrait instead so it travels with the text. */
@media (min-width:56rem){
  .split__media--sticky{ position:sticky; top:8rem; }
}

/* ------------------------------------------------- review carousel
   Six reviews, one at a time. Each carries a project title and a reviewer,
   so the card is a two-column editorial slab rather than centred text.
   Native scroll-snap does the paging: swipeable on touch, and with JS off it
   degrades to a plain horizontal scroller instead of hiding five reviews. */
.revs{ position:relative; }

.revs__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.25rem; margin-bottom:2rem;
  padding-bottom:1.5rem; border-bottom:1px solid var(--line);
}
.score{ display:flex; align-items:baseline; gap:.9rem; }
.score__n{
  font-family:var(--ff-display); font-weight:300; font-size:clamp(2.5rem,5vw,3.75rem);
  line-height:1; color:var(--bone);
}
.score__m{ display:grid; gap:.35rem; }
.score__stars{ color:var(--rose); letter-spacing:.22em; font-size:.875rem; line-height:1; }

.revs__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  gap:var(--gutter);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.revs__track::-webkit-scrollbar{ display:none; }
.revs__slide{ scroll-snap-align:center; }

.rev{
  position:relative;
  display:grid; gap:clamp(1.5rem,3vw,3rem);
  padding:clamp(1.75rem,4vw,3.25rem);
  background:linear-gradient(150deg, var(--ink-3), var(--ink-2) 65%);
  border:1px solid var(--line-2);
  min-height:20rem;
}
@media (min-width:56rem){ .rev{ grid-template-columns:15rem 1fr; align-items:start; } }
.rev::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--rose),transparent); opacity:.55;
}

.rev__who{ display:grid; gap:.9rem; align-content:start; }
.rev__avatar{
  width:3.25rem; height:3.25rem; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  background:rgba(201,163,138,.06);
  font-family:var(--ff-display); font-size:1.05rem; letter-spacing:.06em; color:var(--rose);
}
.rev__name{
  font-family:var(--ff-display); font-weight:300; font-size:1.35rem; color:var(--bone);
  line-height:1.1; margin:0;
}
.rev__meta{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-3);
  line-height:1.7;
}
.rev__project{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem; border:1px solid var(--line); border-radius:999px;
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rose);
  justify-self:start; white-space:nowrap;
}
.rev__stars{ color:var(--rose); letter-spacing:.26em; font-size:.8125rem; }

.rev__body{ position:relative; }
.rev__mark{
  font-family:var(--ff-display); font-size:5rem; line-height:.7;
  color:var(--rose); opacity:.22; height:1.6rem; display:block;
}
.rev__txt{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,1.85vw,1.5rem); line-height:1.55;
  color:var(--bone); margin:.75rem 0 0; max-width:46ch; text-wrap:pretty;
}

.revs__nav{
  display:flex; align-items:center; gap:1rem;
  margin-top:1.75rem;
}
.revs__btn{
  width:3rem; height:3rem; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  color:var(--bone-2); font-size:1.1rem; line-height:1;
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.revs__btn:hover{ border-color:var(--rose); color:var(--rose); background:rgba(201,163,138,.07); }

/* a progress rail reads better than dots once there are six of them */
.revs__rail{
  flex:1; height:1px; background:var(--line); position:relative; overflow:hidden;
}
.revs__rail i{
  position:absolute; inset:0 auto 0 0; display:block;
  background:var(--rose);
  transition:transform .5s var(--ease), width .5s var(--ease);
}
.revs__count{
  font-size:.6875rem; letter-spacing:.2em; color:var(--bone-3);
  min-width:3.5rem; text-align:right; font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------- contact page
   Was a bare two-column form. Now: a photographic hero, contact methods as
   real cards, and the form on its own raised panel. */
.chero{ position:relative; min-height:clamp(24rem,62svh,36rem); display:flex; align-items:flex-end; overflow:hidden; }
.chero__media{ position:absolute; inset:0; }
.chero__media picture{ display:block; width:100%; height:100%; }
.chero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 78%; }
.chero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(8,8,10,.90) 20%, rgba(8,8,10,.52) 56%, rgba(8,8,10,.30) 82%, rgba(8,8,10,.62) 100%),
    linear-gradient(to right, rgba(8,8,10,.74), rgba(8,8,10,.20) 62%, rgba(8,8,10,.38));
}
.chero__in{ position:relative; z-index:2; width:100%; padding-block:9rem clamp(2.5rem,5vw,4rem); }

.ways{ display:grid; gap:var(--gutter); }
@media (min-width:48rem){ .ways{ grid-template-columns:repeat(3,1fr); } }
.way{
  position:relative;
  padding:clamp(1.6rem,3vw,2.25rem);
  background:linear-gradient(165deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line-2);
  display:grid; gap:.7rem; align-content:start;
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
a.way:hover{ border-color:var(--rose); transform:translateY(-3px); }
.way__ico{
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  color:var(--rose); margin-bottom:.4rem;
}
.way__ico svg{ width:1.05rem; height:1.05rem; }
.way__k{
  font-size:.625rem; letter-spacing:.26em; text-transform:uppercase; color:var(--rose);
}
.way__v{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.25; color:var(--bone); margin:0;
  overflow-wrap:break-word;
}
/* the address is long; size it to fit and let it break only at the <wbr>
   after the @, never mid-word */
.way__v--mail{
  font-size:clamp(1rem,1.35vw,1.2rem); letter-spacing:.005em; word-break:normal;
}
.way__note{ font-size:.875rem; color:var(--bone-3); margin:0; }

.formpanel{
  padding:clamp(1.75rem,4vw,3.25rem);
  background:linear-gradient(165deg, var(--ink-3), var(--ink-2) 70%);
  border:1px solid var(--line-2);
  position:relative;
}
.formpanel{ align-self:start; }
@media (min-width:56rem){ .formpanel{ position:sticky; top:7.5rem; } }
.formpanel::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--rose),transparent); opacity:.5;
}
@media (min-width:48rem){ .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; } }

.hours{ list-style:none; margin:0; padding:0; }
.hours li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line-2);
  font-size:.9375rem;
}
.hours li:last-child{ border-bottom:0; }
.hours .d{ color:var(--bone-2); }
.hours .t{ color:var(--rose); font-size:.8125rem; letter-spacing:.1em; }
.hours .t--closed{ color:var(--bone-3); }
.hours li[data-today="1"]{ background:rgba(201,163,138,.05); padding-inline:.75rem; }

/* ------------------------------------------------- before / after slider
   Two stacked images; the top one is clipped to the handle position. The
   source halves are only 474px wide (the client's composites were 960), so
   the cards are capped near that width rather than stretched soft. */
.bas{ display:grid; gap:clamp(1.75rem,4vw,3rem); }
@media (min-width:60rem){ .bas{ grid-template-columns:repeat(2,1fr); } }

.ba{ display:grid; gap:1rem; }
.ba__frame{
  position:relative; overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--line-2);
  touch-action:pan-y;
  cursor:ew-resize;
  user-select:none; -webkit-user-select:none;
}
.ba__frame img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none; -webkit-user-drag:none;
}
/* the AFTER sits on top and is revealed from the left as the handle moves */
.ba__after{ clip-path:inset(0 0 0 var(--pos,50%)); }

.ba__line{
  position:absolute; top:0; bottom:0; left:var(--pos,50%);
  width:1px; background:var(--rose);
  box-shadow:0 0 14px rgba(201,163,138,.55);
  pointer-events:none;
}
.ba__grip{
  position:absolute; top:50%; left:var(--pos,50%);
  translate:-50% -50%;
  width:3rem; height:3rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(8,8,10,.72); backdrop-filter:blur(6px);
  border:1px solid var(--rose);
  color:var(--rose);
  pointer-events:none;
}
.ba__grip svg{ width:1.35rem; height:1.35rem; }
.ba__frame:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }

.ba__cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.ba__cap h3{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.2; margin:0;
}
.ba__cap span{
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--rose);
  white-space:nowrap;
}
/* native range input is the no-JS fallback and the keyboard control */
.ba__range{
  width:100%; accent-color:var(--rose); background:transparent;
}

/* ------------------------------------------------------ service levels
   Five progressive scopes. The number is the anchor, the hook carries the
   single-line voice, and the inclusions sit underneath as reference detail. */
.lvl{ list-style:none; margin:0; padding:0; }
.lvl__row{ border-top:1px solid var(--line); }
.lvl__row:last-child{ border-bottom:1px solid var(--line); }
.lvl__in{
  display:grid; gap:clamp(1rem,2.5vw,2.5rem);
  padding:clamp(2rem,4vw,3.25rem) 0;
}
@media (min-width:56rem){ .lvl__in{ grid-template-columns:6rem 1fr 1fr; } }

.lvl__num{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(2.75rem,5vw,4rem); line-height:.85;
  color:var(--rose); opacity:.5;
}
.lvl__num small{
  display:block; font-family:var(--ff-ui); font-size:.5625rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; opacity:.9; margin-top:.5rem;
}
.lvl__name{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.5rem,3vw,2.35rem); line-height:1.12; margin:0 0 .6rem;
}
.lvl__hook{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--rose); margin:0 0 1rem;
}
.lvl__intro{ color:var(--bone-2); margin:0; max-width:46ch; }

.lvl__inc{
  list-style:none; margin:0; padding:0;
  columns:1; column-gap:2rem;
  font-size:.9375rem; color:var(--bone-2);
}
@media (min-width:36rem){ .lvl__inc{ columns:2; } }
@media (min-width:56rem){ .lvl__inc{ columns:1; } }
@media (min-width:80rem){ .lvl__inc{ columns:2; } }
.lvl__inc li{
  break-inside:avoid; padding:.35rem 0 .35rem 1.15rem; position:relative;
}
.lvl__inc li::before{
  content:""; position:absolute; left:0; top:.95em;
  width:5px; height:1px; background:var(--rose); opacity:.75;
}
.lvl__inc-h{
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rose); margin:0 0 .5rem; font-weight:500; column-span:all;
  padding-left:0 !important;
}
.lvl__inc-h::before{ display:none; }

/* Shown in place of the contact form until FORM_ENDPOINT is configured. */
.formfallback{ display:grid; gap:.35rem; }
.formfallback .tel{ display:inline-flex; }