/* ============================================================
   stellasharp.com — shared stylesheet
   Linked by index.html and commission.html. Every colour is a token
   in :root; nothing below hardcodes a hex.
   ============================================================ */
/* ============================================================
   TOKENS — every colour lives here.
   Maps 1:1 onto the M3 seed-driven custom properties later:
   no component below hardcodes a hex.
   ============================================================ */
:root{
  --wall:        #F8F6ED;   /* wall — hsl(49,44%,95%), kin to the band */
  --wall-deep:   #EFEBDD;   /* recessed band                     */
  --wall-lit:    #FDFCF6;   /* lit surface / mount               */
  --ink:         #1B1917;
  --ink-soft:    #5F5952;
  --ink-faint:   #9A938B;
  --hairline:    rgba(27,25,23,.13);
  --hairline-soft: rgba(27,25,23,.07);
  --accent:      #A34760;   /* focus rings — matches the rose    */
  --scrim:       rgba(248,246,237,.94);

  --mount-shadow: 0 1px 2px rgba(27,25,23,.05), 0 8px 24px -8px rgba(27,25,23,.14);
  --mount-shadow-lift: 0 2px 6px rgba(27,25,23,.07), 0 20px 48px -12px rgba(27,25,23,.22);

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --rose:      #B4526E;   /* wordmark — 4.29:1 on the wall */
  --rose-soft: #C4677F;   /* the lighter "Sharp" tone       */
  --rose-deep: #A34760;   /* wordmark over band; button fill */
  --rose-press:#943D55;   /* button hover                    */
  --footer-bg: #F3C2D2;   /* softened from her star fill     */
  --footer-ink:#7A2F44;   /* plum on it — 5.81:1             */

  /* Hero band — colour + type sampled straight from IMG_1496 */
  --hero-bg:   #EFE6BB;   /* her flat ground, stddev 0        */
  --hair-deep: #4F4B1F;   /* her hair, deepest — 7.08:1       */
  --hair-mid:  #757537;   /* her hair, mid     — 3.84:1       */
  --nav-h: 64px;          /* re-measured at runtime           */

  /* Grid tuning — the two dials for tile size and tightness */
  --tile: clamp(132px, 12.5vw, 196px);
  --grid-gap: clamp(.5rem, .9vw, 1rem);

  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--wall);
  color:var(--ink);
  font-family:var(--ui);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1.15rem var(--gutter);
  background:rgba(248,246,237,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--hairline-soft)}
/* Squarespace-style: no bar at all while sitting on the hero band */
.nav.is-over-hero{
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
.nav.is-over-hero .wordmark{color:var(--rose-deep)}
.nav.is-over-hero .wordmark .surname{color:var(--rose)}
.nav.is-over-hero .nav-link{color:var(--hair-deep)}
.nav.is-over-hero .nav-login{color:var(--hair-deep); border-color:rgba(79,75,31,.32)}
.nav.is-over-hero .nav-login:hover{background:rgba(255,255,255,.4); border-color:var(--hair-deep)}
.wordmark{
  display:inline-flex; align-items:center;
  gap:.42em;
  font-family:var(--display);
  font-size:clamp(1.25rem,1.8vw,1.6rem);
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
  color:var(--rose);
  transition:opacity .25s var(--ease);
}
.wordmark-star{
  width:.92em; height:.92em;
  flex:none;
  /* nudge onto the optical baseline of the caps */
  transform:translateY(-.04em);
}
.wordmark .surname{color:var(--rose-soft)}
.wordmark:hover{opacity:.75}
.nav-right{display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.25rem)}
.nav-link{
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:400; color:var(--ink-soft); text-decoration:none;
  padding:.4rem 0; position:relative; white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-link:hover{color:var(--ink)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-login{
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:.5rem 1.1rem;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.nav-login:hover{border-color:var(--ink); color:var(--ink); background:var(--wall-lit)}
/* Work and About are same-page anchors — reachable by scrolling, so they
   can go on narrow screens. Commission is a separate page and the only
   route to it, so it always stays. */
@media (max-width:620px){
  .nav-link.is-optional{display:none}
  .nav{padding-left:1rem; padding-right:1rem}
  .nav-right{gap:.75rem}
  .nav-link{font-size:.72rem; letter-spacing:.1em}
  .nav-login{padding:.45rem .8rem; font-size:.66rem; letter-spacing:.08em}
  .wordmark{font-size:1.05rem}
  .wordmark-star{width:.85em; height:.85em}
}
@media (max-width:380px){
  .nav-right{gap:.5rem}
  .nav-login{padding:.4rem .65rem; font-size:.62rem}
}

/* ============================================================
   THE MOUNT — hairline + lift, so white-ground work does not
   dissolve into the off-white wall.
   ============================================================ */
.piece{
  position:relative;
  display:block; width:100%;
  padding:0; margin:0;
  background:var(--wall-lit);
  border:1px solid var(--hairline-soft);
  box-shadow:var(--mount-shadow);
  cursor:zoom-in;
  overflow:hidden;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.piece::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(27,25,23,.045);
  pointer-events:none;
}
.piece img{
  width:100%; height:100%;
  object-fit:cover;              /* -> 'contain' to stop cropping */
  transition:transform .7s var(--ease);
}
.piece:hover{
  box-shadow:var(--mount-shadow-lift);
  transform:translateY(-3px);
  border-color:var(--hairline);
}
.piece:hover img{transform:scale(1.03)}
.piece:focus-visible{outline:2px solid var(--accent); outline-offset:4px}

/* ============================================================
   1. HERO BAND — full-bleed colour field lifted from the art.
   The nav sits on top of it with no background until you
   scroll past; the band carries the same mount shadow as
   every piece on the wall.
   ============================================================ */
.hero-band{
  position:relative;
  background:var(--hero-bg);
  padding-top:var(--nav-h);
  min-height:clamp(330px, 48vh, 520px);
  display:flex; align-items:center;
  box-shadow:var(--mount-shadow);
  overflow:hidden;
}
.hero-band-inner{
  width:100%;
  padding:clamp(1.25rem,3vh,2.25rem) var(--gutter);
  display:flex;
  align-items:center;
  justify-content:center;      /* the pair reads as one composed unit */
  gap:clamp(.25rem,1.4vw,1.75rem);
}
.hero-copy h1{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(2.1rem,5.2vw,4.3rem);
  line-height:1.06;
  letter-spacing:-.008em;   /* italics need a touch more room */
  margin:0;
  max-width:17ch;
  color:var(--hair-deep);
}
.hero-copy h1 .tail{color:var(--hair-mid)}
.hero-figure{flex:none; line-height:0}
.hero-figure img{
  width:auto; max-width:100%;
  max-height:clamp(200px,34vh,400px);
}
@media (max-width:820px){
  .hero-band{min-height:0}
  .hero-band-inner{
    flex-direction:column;
    text-align:center;
    gap:1.25rem;
  }
  .hero-copy h1{max-width:none}
  .hero-figure img{max-height:min(34vh,240px)}
}

/* 2. LEAD LINE — the descriptor, under the hero image */
.lead{
  padding:clamp(2rem,5vh,3.5rem) var(--gutter) clamp(2.5rem,6vh,4rem);
  max-width:1100px;
}
.lead p{
  margin:0;
  max-width:52ch;
  font-size:clamp(1.02rem,1.4vw,1.22rem);
  color:var(--ink-soft);
}
/* the services line supports the lead rather than matching it */
.lead p + p{
  margin-top:1.1rem;
  font-size:clamp(.94rem,1.1vw,1.04rem);
}
.lead-meta{
  margin-top:clamp(1.4rem,3vw,2rem);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose-deep);
}

/* ============================================================
   3. GRID — small, tight, uniform, square
   ============================================================ */
.gallery{
  padding:0 var(--gutter) clamp(4rem,9vh,7rem);
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--tile), 1fr));
  gap:var(--grid-gap);
}
.art{margin:0; min-width:0}

/* fixed bar means anchor targets need clearance */
#work, #about, #top{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
.art .piece{aspect-ratio:1 / 1}

@media (max-width:520px){
  :root{ --tile: clamp(104px, 28vw, 150px); }
}

/* ============================================================
   5. BIO + COMMISSION
   ============================================================ */
.bio{
  padding:clamp(1rem,3vh,2rem) var(--gutter) clamp(4rem,10vh,7rem);
}
.bio-inner{
  max-width:1250px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,7vw,6rem);
  align-items:start;
}
@media (max-width:900px){ .bio-inner{grid-template-columns:1fr} }
.bio h2{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose-deep); font-weight:400;
  margin:0 0 1.5rem;
}
.bio p{
  color:var(--ink-soft);
  font-size:clamp(.98rem,1.2vw,1.08rem);
  max-width:58ch;
  margin:0 0 1.15rem;
}
.bio dl{
  margin:0; display:grid;
  grid-template-columns:auto 1fr;
  gap:.75rem 1.75rem;
  font-size:.88rem;
}
.bio dt{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose-deep); padding-top:.15rem;
}
.bio dd{margin:0; color:var(--ink-soft)}
.bio dd a{
  color:var(--rose-deep);
  text-decoration:none;
  border-bottom:1px solid rgba(163,71,96,.28);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.bio dd a:hover{color:var(--rose-press); border-bottom-color:var(--rose-press)}

.cta{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-top:2.25rem;
  background:var(--rose-deep); color:var(--wall);
  padding:.95rem 1.9rem; border-radius:999px;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.cta:hover{background:var(--rose-press); transform:translateY(-2px)}
.cta svg{width:14px;height:14px;flex:none}

/* ============================================================
   6. FOOTER
   ============================================================ */
.foot{
  padding:clamp(3rem,7vw,4.5rem) var(--gutter);
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--footer-bg);
  color:var(--footer-ink);
}

/* ============================================================
   LIGHTBOX — warm scrim, wordmark stays top-left
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:100;
  display:none;
  background:var(--scrim);
  backdrop-filter:blur(28px) saturate(1.15);
  -webkit-backdrop-filter:blur(28px) saturate(1.15);
}
.lb.is-open{
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  animation:fadeIn .3s var(--ease);
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

.lb-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem var(--gutter);
}
.lb-count{
  font-size:.75rem; letter-spacing:.18em; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.lb-close{
  display:flex; align-items:center; gap:.6rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--hairline); border-radius:999px;
  padding:.5rem 1rem;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.lb-close:hover{border-color:var(--ink); color:var(--ink); background:var(--wall-lit)}
@media (max-width:560px){ .lb-count{display:none} }

.lb-stage{
  position:relative;
  display:grid; place-items:center;
  padding:0 clamp(1rem,7vw,6rem);
  min-height:0;
}
.lb-frame{
  position:relative; margin:0;
  max-width:100%; max-height:100%;
  background:var(--wall-lit);
  border:1px solid var(--hairline-soft);
  box-shadow:var(--mount-shadow-lift);
  transition:opacity .22s var(--ease);
  line-height:0;
}
.lb-frame.is-swapping{opacity:0}
.lb-frame img{
  max-width:100%;
  max-height:calc(100vh - 15rem);
  width:auto; height:auto;
  object-fit:contain;
}

.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:clamp(2.75rem,4.5vw,3.5rem); height:clamp(2.75rem,4.5vw,3.5rem);
  display:grid; place-items:center;
  border-radius:999px;
  color:var(--ink-soft);
  background:rgba(251,250,247,.7);
  border:1px solid var(--hairline-soft);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.lb-nav:hover{background:var(--wall-lit); color:var(--ink); border-color:var(--hairline)}
.lb-nav[disabled]{opacity:.22; pointer-events:none}
.lb-prev{left:clamp(.35rem,2vw,1.75rem)}
.lb-next{right:clamp(.35rem,2vw,1.75rem)}
.lb-nav svg{width:17px;height:17px}

.lb-cap{
  padding:1.25rem var(--gutter) clamp(1.5rem,4vh,2.5rem);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  min-height:5.5rem;
}
.lb-cap h3{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.9rem);
  margin:0 0 .3rem; letter-spacing:0;
}
.lb-cap .meta{
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint);
}
.lb-hint{
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}
@media (max-width:760px){
  .lb-frame img{max-height:calc(100vh - 13rem)}
  .lb-hint{display:none}
  .lb-cap{padding-bottom:1.25rem; min-height:0}
}

/* ============================================================
   CLIENT LOGIN — mock of the v1 code-entry flow
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:110;
  display:none; place-items:center;
  padding:1.5rem;
  background:rgba(27,25,23,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.modal.is-open{display:grid; animation:fadeIn .25s var(--ease)}
.card{
  position:relative;
  width:min(29rem,100%);
  background:var(--wall-lit);
  border:1px solid var(--hairline-soft);
  box-shadow:0 40px 90px -30px rgba(27,25,23,.4);
  padding:clamp(2rem,5vw,3rem);
}
.card h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,3vw,2.1rem);
  margin:0 0 .6rem; letter-spacing:-.01em;
}
.card p{color:var(--ink-soft); font-size:.94rem; margin:0 0 1.75rem}
.field{display:block; margin-bottom:1.25rem}
.field span{
  display:block; font-size:.71rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.6rem;
}
.field input{
  width:100%; font:inherit; font-size:1.05rem; letter-spacing:.22em;
  padding:.85rem 1rem;
  background:var(--wall);
  border:1px solid var(--hairline);
  color:var(--ink);
  text-transform:uppercase;
  transition:border-color .25s var(--ease);
}
.field input:focus{outline:none; border-color:var(--ink)}
.card .cta{width:100%; justify-content:center; margin-top:.25rem}
.card-close{
  position:absolute; top:1rem; right:1rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important; transform:none !important}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ============================================================
   SUBPAGE SHELL — pages without the hero band still sit under
   the fixed bar, so they reserve --nav-h themselves.
   ============================================================ */
.page-head{
  padding:calc(var(--nav-h) + clamp(3rem,8vh,5.5rem)) var(--gutter) clamp(2rem,5vh,3rem);
  max-width:calc(70rem + 2 * var(--gutter));
  margin-left:auto; margin-right:auto;
}
.page-head h1{
  font-family:var(--display);
  font-weight:400; font-style:italic;
  font-size:clamp(2.2rem,5.4vw,4rem);
  line-height:1.06; letter-spacing:-.008em;
  margin:0 0 clamp(1rem,2.5vw,1.5rem);
  color:var(--ink);
  max-width:18ch;
}
.page-head p{
  margin:0; max-width:54ch;
  font-size:clamp(1rem,1.3vw,1.14rem);
  color:var(--ink-soft);
}
.back-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose-deep); text-decoration:none;
  margin-bottom:1.5rem;
  transition:opacity .25s var(--ease);
}
.back-link:hover{opacity:.7}
.back-link svg{width:13px;height:13px}

/* ============================================================
   COMMISSION FORM
   ============================================================ */
.form-wrap{
  padding:0 var(--gutter) clamp(4rem,10vh,7rem);
  max-width:calc(70rem + 2 * var(--gutter));
  margin-left:auto; margin-right:auto;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem clamp(1.5rem,3vw,2.5rem);
}
@media (max-width:680px){
  .form-grid{grid-template-columns:1fr}
}

.field{display:block; margin:0}
.field > span{
  display:block;
  font-size:.71rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--rose-deep); margin-bottom:.6rem;
}
.field .opt{color:var(--ink-faint); letter-spacing:.1em}
.field input[type=text],
.field input[type=email],
.field textarea,
.field select{
  width:100%; font:inherit; font-size:1rem; letter-spacing:0;
  padding:.8rem 1rem;
  background:var(--wall-lit);
  border:1px solid var(--hairline);
  border-radius:0;
  color:var(--ink);
  text-transform:none;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{min-height:9.5rem; resize:vertical; line-height:1.6}
.field select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
                   linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:2.75rem;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--rose-deep); background:var(--wall);
}
.field input:user-invalid, .field textarea:user-invalid{border-color:#B3403F}

/* multi-select pills */
.pills{display:flex; flex-wrap:wrap; gap:.55rem}
.pills input{position:absolute; opacity:0; width:1px; height:1px}
.pills label{
  display:inline-block; cursor:pointer;
  padding:.5rem 1rem;
  border:1px solid var(--hairline);
  border-radius:999px;
  font-size:.82rem;
  color:var(--ink-soft);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.pills label:hover{border-color:var(--ink-soft)}
.pills input:checked + label{
  background:var(--rose-deep); border-color:var(--rose-deep); color:var(--wall);
}
.pills input:focus-visible + label{outline:2px solid var(--rose-deep); outline-offset:3px}


/* interim: no backend yet, so submission opens a prefilled email */
.form-fallback{
  display:none;
  margin-top:2rem;
  padding:clamp(1.25rem,3vw,1.75rem);
  background:var(--wall-lit);
  border:1px solid var(--hairline-soft);
  box-shadow:var(--mount-shadow);
}
.form-fallback.is-shown{display:block}
.form-fallback h3{
  font-family:var(--display); font-weight:400;
  font-size:1.35rem; margin:0 0 .5rem;
}
.form-fallback p{margin:0 0 1rem; font-size:.92rem; color:var(--ink-soft)}
.form-fallback textarea{
  width:100%; min-height:11rem; font:inherit; font-size:.86rem;
  line-height:1.55; padding:.9rem 1rem;
  background:var(--wall); color:var(--ink-soft);
  border:1px solid var(--hairline); resize:vertical;
}
.form-fallback .row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; align-items:center}
.copy-btn{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--rose-deep);
  border:1px solid var(--hairline); border-radius:999px;
  padding:.55rem 1.1rem; cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.copy-btn:hover{border-color:var(--rose-deep)}

/* ============================================================
   COMMISSION WIZARD
   ============================================================ */
.wizard{max-width:none}

/* progress */
.steps{
  display:flex; flex-wrap:wrap; gap:.4rem 1.25rem;
  margin-bottom:clamp(1.75rem,4vw,2.75rem);
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--hairline-soft);
}
.steps li{
  list-style:none;
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
  transition:color .3s var(--ease);
}
.steps li .n{
  width:1.55rem; height:1.55rem; flex:none;
  display:grid; place-items:center;
  border-radius:999px;
  border:1px solid var(--hairline);
  font-size:.7rem; letter-spacing:0;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.steps li.is-done{color:var(--ink-soft)}
.steps li.is-done .n{background:var(--rose-soft); border-color:var(--rose-soft); color:var(--wall)}
.steps li.is-current{color:var(--rose-deep)}
.steps li.is-current .n{background:var(--rose-deep); border-color:var(--rose-deep); color:var(--wall)}
@media (max-width:820px){
  .steps li .label{display:none}
  .steps{gap:.5rem}
}

/* panels */
.wizard-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 15.5rem;
  gap:clamp(1.5rem,3vw,2.75rem);
  align-items:start;
}
@media (max-width:900px){
  .wizard-body{grid-template-columns:1fr}
  .estimate-rail{order:-1}
}
.estimate-rail{position:sticky; top:calc(var(--nav-h) + 1.5rem)}

.step{display:none}
.step.is-active{display:block; animation:stepIn .32s var(--ease)}
@keyframes stepIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.step h2{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.5rem,3vw,2.15rem);
  line-height:1.15; margin:0 0 .5rem; color:var(--ink);
}
.step .step-note{
  margin:0 0 clamp(1.4rem,3vw,2rem);
  max-width:52ch; font-size:.98rem; color:var(--ink-soft);
}

/* option cards */
.choices{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.7rem;
}
.choices input{position:absolute; opacity:0; width:1px; height:1px}
.choices label{
  display:block; cursor:pointer;
  padding:.95rem 1.1rem;
  background:var(--wall-lit);
  border:1px solid var(--hairline);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.choices label:hover{border-color:var(--ink-faint); transform:translateY(-1px)}
.choices label .t{display:block; font-size:.98rem; color:var(--ink)}
.choices label .d{display:block; margin-top:.2rem; font-size:.8rem; color:var(--ink-faint); line-height:1.45}
.choices input:checked + label{
  border-color:var(--rose-deep);
  background:var(--wall);
  box-shadow:inset 0 0 0 1px var(--rose-deep);
}
.choices input:checked + label .t{color:var(--rose-deep)}
.choices input:focus-visible + label{outline:2px solid var(--rose-deep); outline-offset:3px}

/* wizard controls */
.wiz-foot{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--hairline-soft);
}
/* three tracks so Continue is centred on the page whether or not
   Back is present, rather than drifting with it */
.wiz-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
}
.wiz-nav .wiz-back{grid-column:1; justify-self:start}
.wiz-nav .cta{grid-column:2; justify-self:center}
.wiz-back{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); cursor:pointer;
  transition:color .25s var(--ease), opacity .25s var(--ease);
}
.wiz-back:hover{color:var(--ink)}
.wiz-back[hidden]{visibility:hidden}
.wiz-back svg{width:13px;height:13px}
.wiz-nav .cta{margin-top:0; border:0; cursor:pointer}
.wiz-error{
  display:none;
  margin:0 0 1.1rem;
  text-align:center;
  font-size:.92rem;
  color:#A33F3E;
}
.wiz-error.is-shown{display:block}

/* review */
.review{margin:0 0 1.75rem; display:grid; grid-template-columns:auto 1fr; gap:.7rem 1.5rem}
.review dt{
  font-size:.71rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose-deep); padding-top:.15rem;
}
.review dd{margin:0; color:var(--ink-soft); font-size:.95rem}

/* ============================================================
   ESTIMATE — shown on the review step only
   ============================================================ */
/* Stated plainly on the wall, like the bio list on the home page —
   no box. A boxed price reads as an aside; the number that decides
   whether someone commissions her should read as confident. */
.estimate{
  padding:1.1rem 0 0;
  border-top:1px solid var(--hairline);
}
.estimate .lbl{
  display:block;
  font-size:.71rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--rose-deep); margin-bottom:.45rem;
}
.estimate .fig{
  display:block;
  font-family:var(--display); font-weight:400;
  font-size:1.85rem; line-height:1.1; color:var(--ink);
}
.estimate .cav{
  margin:.6rem 0 0; font-size:.79rem; line-height:1.5; color:var(--ink-soft);
}
.estimate.is-quote .fig{font-style:italic; font-size:1.2rem; line-height:1.25}
.estimate.is-empty{opacity:.6}
.estimate.is-empty .fig{color:var(--ink-faint); font-size:1.15rem; font-style:italic}

/* loud, unmissable while the rates are still placeholders */
.rate-warning{
  margin:0 0 .75rem; padding:.7rem .9rem;
  background:#7A2F44; color:#F8F6ED;
  font-size:.72rem; line-height:1.45; letter-spacing:.03em;
}
.rate-warning strong{letter-spacing:.12em; text-transform:uppercase}

/* honeypot: off-screen rather than display:none — some bots skip
   hidden inputs, and none of them read aria-hidden */
.field.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.form-sent{
  display:none;
  margin-top:2rem;
  padding:clamp(1.5rem,3vw,2rem);
  background:var(--wall-lit);
  border:1px solid var(--hairline-soft);
  box-shadow:var(--mount-shadow);
}
.form-sent.is-shown{display:block}
.form-sent h3{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:1.6rem; margin:0 0 .5rem; color:var(--ink);
}
.form-sent p{margin:0 0 1rem; color:var(--ink-soft); font-size:.95rem}

/* ============================================================
   TIMELAPSE — badge on the tile, player in the viewer
   ============================================================ */
.piece .badge{
  position:absolute; right:.5rem; bottom:.5rem; z-index:2;
  display:flex; align-items:center; gap:.3rem;
  padding:.28rem .5rem .28rem .42rem;
  border-radius:999px;
  background:rgba(27,25,23,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#F8F6ED;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  pointer-events:none;
  transition:background .3s var(--ease);
}
.piece:hover .badge{background:var(--rose-deep)}
.piece .badge svg{width:9px; height:9px; flex:none}
@media (max-width:520px){ .piece .badge span{display:none} .piece .badge{padding:.3rem} }

.lb-watch{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:.7rem;
  padding:.5rem 1rem;
  border:1px solid var(--hairline); border-radius:999px;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--rose-deep); cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.lb-watch:hover{border-color:var(--rose-deep); background:var(--wall-lit)}
.lb-watch svg{width:12px;height:12px}
.lb-watch[hidden]{display:none}

.lb-frame video{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 15rem);
  width:auto; height:auto;
  background:var(--wall-lit);
}
@media (max-width:760px){ .lb-frame video{max-height:calc(100vh - 13rem)} }

/* ============================================================
   TESTIMONIALS — quiet band between the work and the bio.
   Set on the wall, no cards, no star graphics: the point is
   that real people said this, not that a widget is displaying it.
   ============================================================ */
.voices{
  padding:clamp(3rem,8vh,5.5rem) var(--gutter) clamp(2rem,5vh,3rem);
  border-top:1px solid var(--hairline-soft);
}
.voices h2{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose-deep); font-weight:400;
  margin:0 0 clamp(1.75rem,4vw,2.5rem);
}
.voices-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:clamp(1.75rem,4vw,3rem);
  max-width:1250px;
}
.voices blockquote{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.45;
  letter-spacing:-.004em;   /* italics need a touch more room */
  color:var(--ink);
}
.voices blockquote cite{
  display:block;
  margin-top:.7rem;
  font-family:var(--ui); font-style:normal;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint);
}
.voices-note{
  margin:clamp(1.75rem,4vw,2.5rem) 0 0;
  font-size:.8rem; color:var(--ink-faint); max-width:60ch;
}