/* MYBEAUTY — shared stylesheet.
   Palette sampled from Myesa's own photographs: the teal is the dress in her
   profile portrait, the cream is the archway behind her, the ink is the wall
   at the salon. Type ladder is 12 / 14 / 17 / 21 / 30 / 44 / 64, nothing between. */

:root{
  --blush:#e9dcd5;
  --cream:#f6f0ea;
  --white:#fffdfb;
  --ink:#1c1712;
  --muted:#6d5f55;
  --teal:#04736e;        /* fill only, white text on it */
  --teal-ink:#0a5c58;    /* same hue, dark enough to be text */
  --teal-soft:rgba(4,115,110,.09);
  --line:#d8c6bc;
  --radius:14px;
  --pill:999px;
  --base:clamp(66px,9vw,118px);
  --shadow:0 10px 34px rgba(63,40,28,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;background:var(--blush);color:var(--ink);
  font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;line-height:1.06;font-weight:800;letter-spacing:-0.025em}
p{margin:0 0 1em}
img{max-width:100%;display:block;height:auto}
a{color:var(--teal-ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:96px}

.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
@media(max-width:640px){.wrap{width:min(1200px,100% - 30px)}}
.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}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--teal);color:#fff;
  padding:12px 18px;border-radius:var(--pill);text-decoration:none;transition:top .16s ease}
.skip:focus{top:12px}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 26px;
  background:var(--teal);color:#fff;text-decoration:none;font-weight:600;border:0;border-radius:var(--pill);
  font-size:17px;font-family:inherit;cursor:pointer;transition:transform .16s ease,background .16s ease}
.btn:hover{background:#065f5b;transform:translateY(-1px)}
.btn:active{transform:none;background:#04524e}
.btn-ghost{background:transparent;color:var(--teal-ink);border:1.5px solid var(--teal-ink)}
.btn-ghost:hover{background:var(--teal-ink);color:#fff}
.btn-lg{min-height:56px;padding:16px 34px;font-size:21px}
.btn-block{width:100%}

/* ---------------- header ---------------- */
.top{position:sticky;top:0;z-index:60;background:rgba(233,220,213,.95);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:14px;padding:11px 0;min-height:70px}
.mark{font-weight:800;font-size:21px;letter-spacing:.05em;text-decoration:none;color:var(--ink);white-space:nowrap}
.mark span{color:var(--teal)}
.nav{display:flex;align-items:center;gap:2px;margin-left:22px}
.nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:17px;
  padding:10px 13px;border-radius:var(--pill);min-height:44px;display:inline-flex;align-items:center;
  background-color:transparent;transition:background-color .24s ease,color .24s ease}
.nav a:hover{background:var(--teal-soft);color:var(--teal-ink)}
.nav a[aria-current="page"]{color:var(--teal-ink);background:var(--teal-soft)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.tel{text-decoration:none;color:var(--ink);font-weight:600;padding:11px 13px;min-height:44px;
  display:inline-flex;align-items:center;border-radius:var(--pill);white-space:nowrap;
  background-color:transparent;transition:background-color .24s ease,color .24s ease}
.tel:hover{background:var(--teal-soft);color:var(--teal-ink)}
.navtoggle{display:none;background:none;border:1.5px solid var(--line);border-radius:var(--pill);
  min-height:44px;padding:10px 16px;font-family:inherit;font-size:17px;font-weight:600;color:var(--ink);cursor:pointer}
@media(max-width:900px){
  .navtoggle{display:inline-flex;align-items:center;gap:8px}
  .nav{position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--cream);border-bottom:1px solid var(--line);padding:8px 24px 18px;
    box-shadow:var(--shadow)}
  .nav[hidden]{display:none}
  .nav a{border-radius:var(--radius);padding:14px}
  .top-in{position:relative;flex-wrap:wrap}
  .tel{display:none}
}

/* ---------------- generic section furniture ---------------- */
.eyebrow{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-ink);
  font-weight:600;margin:0 0 14px}
.section{padding:var(--base) 0}
.section-head{max-width:58ch}
.section-head h2{font-size:clamp(30px,3.3vw,44px)}
.section-head p{color:var(--muted);margin-top:14px}
.section-cream{background:var(--cream);border-block:1px solid var(--line)}
.section-ink{background:var(--ink);color:var(--cream)}
.section-ink .eyebrow{color:#7fd0ca}
.section-ink .section-head p{color:#b7a696}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline;text-underline-offset:4px}

/* page hero used by the interior pages */
.phero{padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,52px)}
.phero h1{font-size:clamp(30px,3.6vw,44px);max-width:20ch}
.phero p{color:var(--muted);max-width:52ch;margin-top:18px;font-size:clamp(17px,1.5vw,21px)}
/* Two columns so the right half of the first screen is not dead ground. */
.phero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(26px,4vw,54px);align-items:end}
.phero-aside{background:var(--cream);border-radius:var(--radius);padding:24px 26px}
.phero-aside h2{font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--teal-ink);font-weight:600;margin-bottom:14px}
.phero-aside dl{margin:0;display:grid;gap:2px}
.phero-aside dt{font-size:14px;color:var(--muted);margin-top:10px}
.phero-aside dt:first-child{margin-top:0}
.phero-aside dd{margin:0;font-weight:600}
.phero-aside dd a{font-weight:600}
@media(max-width:900px){.phero-grid{grid-template-columns:1fr;gap:26px}}

/* ---------------- cards / grids ---------------- */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.card{background:var(--cream);border-radius:var(--radius);overflow:hidden}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover}
.card-body{padding:18px 20px 22px}
.card-body h3{font-size:21px;margin-bottom:7px}
.card-body p{margin:0;color:var(--muted);font-size:17px}

/* A work card that books. Button reset first, then the same card look. */
.card-book{padding:0;border:1.5px solid transparent;font-family:inherit;color:var(--ink);
  text-align:left;width:100%;display:block;cursor:pointer;
  transition:transform .2s ease,border-color .2s ease}
.card-book:hover{transform:translateY(-3px);border-color:var(--teal)}
.card-book img{transition:transform .35s ease}
.card-book:hover img{transform:scale(1.03)}
.card-book .card-body{display:block}
.card-book .card-h{display:block;font-size:21px;font-weight:800;letter-spacing:-.025em;
  line-height:1.06;margin-bottom:7px}
.card-book .card-sub{display:block;color:var(--muted);font-size:17px}
/* Scoped past `.card-body p` and friends so the affordance keeps its accent.
   Visible is the DEFAULT: a device with no hover must always see the cue, and
   that is the state we do not want depending on a media query going our way.
   Hiding it is the enhancement, applied only where a hover actually exists. */
.card-book .card-body .card-go{display:block;color:var(--teal-ink);font-weight:600;margin-top:10px;
  transition:opacity .2s ease,transform .2s ease}
@media (hover:hover) and (min-width:901px){
  .card-book .card-body .card-go{opacity:0;transform:translateY(4px)}
  .card-book:hover .card-body .card-go,
  .card-book:focus-visible .card-body .card-go{opacity:1;transform:none}
}

/* ---------------- footer ---------------- */
footer{background:var(--cream);border-top:1px solid var(--line);padding:var(--base) 0 42px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:34px}
footer h3{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
  margin-bottom:13px;font-weight:600}
footer p,footer li{margin:0 0 5px;color:var(--muted);font-size:17px}
footer ul{list-style:none;padding:0;margin:0}
footer li a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0}
.foot-mark{font-size:30px;font-weight:800;letter-spacing:.05em;color:var(--ink);margin-bottom:10px}
.foot-mark span{color:var(--teal)}
.foot-end{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.foot-end a{display:inline-flex;align-items:center;min-height:44px}

/* ================= booking widget ================= */
.bk-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bk-error{background:#7a2020;color:#fff;padding:13px 18px;border-radius:var(--radius);margin:0 0 20px}
.bk-loading{color:var(--muted)}
.bk-step-title{font-size:21px;display:flex;align-items:baseline;gap:12px;margin-bottom:22px}
.bk-step-title:focus{outline:none}
.bk-step-num{font-size:12px;color:var(--teal-ink);font-weight:600;letter-spacing:.1em}
.bk-back{background:none;border:0;color:var(--muted);font-family:inherit;font-size:14px;cursor:pointer;
  padding:8px 0;margin-bottom:8px;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.bk-back:hover{color:var(--ink)}

.bk-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:10px}
.bk-service{display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:left;
  background:var(--white);border:1.5px solid transparent;border-radius:var(--radius);padding:17px 19px;
  font-family:inherit;font-size:17px;color:var(--ink);cursor:pointer;min-height:62px;
  transition:border-color .16s ease,transform .16s ease}
.bk-service:hover{border-color:var(--teal);transform:translateY(-2px)}
.bk-service-name{font-weight:600}
.bk-service-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.bk-service-price{font-weight:800;font-variant-numeric:tabular-nums}
.bk-service-dur{font-size:14px;color:var(--muted)}

/* photo picker, used on the Book page */
.bk-groups{display:grid;gap:clamp(30px,4vw,48px)}
.bk-group h4{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-ink);
  font-weight:600;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.bk-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
.bk-photo{position:relative;padding:0;border:0;background:var(--cream);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink);display:block;
  transition:transform .18s ease,box-shadow .18s ease}
.bk-photo:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bk-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bk-photo-plain{aspect-ratio:4/5;background:var(--white);display:flex;align-items:center;justify-content:center;
  color:var(--teal);font-size:64px;font-weight:800;letter-spacing:-.04em;
  border-bottom:2px solid var(--teal)}
.bk-photo-cap{padding:14px 16px 16px}
.bk-photo-cap b{display:block;font-weight:600;font-size:17px;margin-bottom:3px}
.bk-photo-cap span{display:block;color:var(--muted);font-size:14px}
.bk-photo-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bk-photo-meta .du{color:var(--muted)}
.bk-photo-cap .pr{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

.bk-chosen{color:var(--muted);font-size:14px;margin-bottom:26px}
.bk-days{display:grid;gap:22px;max-height:min(52vh,460px);overflow-y:auto;padding-right:6px}
.bk-day-label{font-size:14px;margin:0 0 10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.bk-slots{display:flex;flex-wrap:wrap;gap:8px}
.bk-slot{background:var(--white);border:1px solid var(--line);border-radius:var(--pill);padding:11px 17px;
  font-family:inherit;font-size:17px;cursor:pointer;min-height:44px;color:var(--ink);
  font-variant-numeric:tabular-nums;transition:background .16s ease,color .16s ease}
.bk-slot:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.bk-none{color:var(--muted);max-width:48ch}

.bk-form{max-width:520px}
.bk-field{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.bk-field label{font-weight:600;font-size:17px}
.bk-req{font-weight:400;color:var(--muted);font-size:14px}
.bk-hint{font-size:14px;color:var(--muted)}
.bk-field input,.bk-field textarea{font-family:inherit;font-size:17px;padding:13px 15px;
  border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);min-height:48px}
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-submit{background:var(--teal);color:#fff;border:0;border-radius:var(--pill);padding:15px 34px;
  font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;min-height:52px;transition:background .16s ease}
.bk-submit:hover:not(:disabled){background:#065f5b}
.bk-submit:disabled{opacity:.65;cursor:progress}

.bk-done-title{font-size:clamp(30px,3.4vw,44px);margin-bottom:24px}
.bk-done-title:focus{outline:none}
.bk-done-dl{margin:0 0 24px;max-width:520px;background:var(--cream);border-radius:var(--radius);padding:8px 22px}
.bk-done-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
.bk-done-row:last-child{border-bottom:0}
.bk-done-row dt{color:var(--muted);font-size:14px}
.bk-done-row dd{margin:0;font-weight:600;text-align:right}
.bk-done-note,.bk-done-where{color:var(--muted);font-size:17px;max-width:52ch}

/* ---------------- the modal ---------------- */
.bk-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}
.bk-modal[hidden]{display:none}
.bk-modal-scrim{position:absolute;inset:0;background:rgba(28,23,18,.55);animation:bkFade .2s ease}
.bk-modal-panel{position:relative;background:var(--blush);width:min(760px,100%);
  max-height:92vh;overflow-y:auto;border-radius:var(--radius) var(--radius) 0 0;
  padding:clamp(22px,3vw,34px);box-shadow:0 -18px 60px rgba(28,23,18,.3);animation:bkRise .24s ease}
@media(min-width:700px){
  .bk-modal{align-items:center;padding:24px}
  .bk-modal-panel{border-radius:var(--radius);max-height:88vh}
}
@keyframes bkFade{from{opacity:0}to{opacity:1}}
@keyframes bkRise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.bk-modal-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.bk-modal-head h2{font-size:30px}
.bk-modal-head p{margin:6px 0 0;color:var(--muted);font-size:14px}
.bk-close{margin-left:auto;background:var(--cream);border:1px solid var(--line);border-radius:var(--pill);
  min-width:44px;min-height:44px;font-size:21px;line-height:1;cursor:pointer;color:var(--ink);
  font-family:inherit;display:inline-flex;align-items:center;justify-content:center;flex:none}
.bk-close:hover{background:var(--white)}
body.bk-locked{overflow:hidden}

/* ---------------- gallery ---------------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.gal-item{padding:0;border:0;background:var(--cream);border-radius:var(--radius);overflow:hidden;
  cursor:zoom-in;font-family:inherit;text-align:left;color:var(--ink);display:block;
  transition:transform .18s ease,box-shadow .18s ease}
.gal-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gal-item img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gal-cap{display:block;padding:17px 19px 21px}
.gal-cap b{display:block;font-weight:600;font-size:17px}
.gal-cap span{display:block;color:var(--muted);font-size:14px;margin-top:2px}

.lb{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:20px}
.lb[hidden]{display:none}
.lb-scrim{position:absolute;inset:0;background:rgba(28,23,18,.86)}
.lb-fig{position:relative;margin:0;max-width:min(920px,100%);max-height:92vh;display:flex;
  flex-direction:column;align-items:center;gap:14px}
.lb-fig img{max-height:76vh;width:auto;border-radius:var(--radius);background:var(--ink)}
.lb-cap{color:var(--cream);text-align:center;font-size:17px;margin:0}
.lb-cap span{display:block;color:#b7a696;font-size:14px;margin-top:3px}
.lb-close{position:absolute;top:-8px;right:-8px;background:var(--cream);border:0;border-radius:var(--pill);
  min-width:44px;min-height:44px;font-size:21px;cursor:pointer;color:var(--ink);font-family:inherit}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(246,240,234,.92);border:0;
  border-radius:var(--pill);min-width:48px;min-height:48px;font-size:21px;cursor:pointer;color:var(--ink);
  font-family:inherit}
.lb-prev{left:-64px}
.lb-next{right:-64px}
@media(max-width:900px){
  .lb-prev{left:4px}
  .lb-next{right:4px}
  .lb-close{top:4px;right:4px}
}

/* ---------------- price board ---------------- */
/* min() so the track can shrink below its preferred width on a 320px phone;
   a bare minmax(320px,1fr) forces the grid wider than the screen. */
.board-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(26px,4vw,56px)}
.board h3{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-ink);
  font-weight:600;margin:0 0 15px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.price-row{display:flex;align-items:baseline;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}
.price-row .n{font-weight:600}
.price-row .dots{flex:1;border-bottom:1px dotted rgba(109,95,85,.42);transform:translateY(-4px)}
.price-row .t{color:var(--muted);font-size:14px;white-space:nowrap}
.price-row .p{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:52px;text-align:right}

/* ---------------- the consultation ---------------- */
.ask{margin-top:clamp(26px,3vw,40px)}
.ask-label{font-size:17px;font-weight:600;margin:0 0 14px;color:var(--ink)}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.pick{text-align:left;background:var(--cream);border:1.5px solid transparent;border-radius:var(--radius);
  padding:17px 18px;font-family:inherit;font-size:17px;color:var(--ink);cursor:pointer;min-height:82px;
  transition:border-color .16s ease,transform .16s ease}
.pick:hover{border-color:var(--teal);transform:translateY(-2px)}
.pick[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-soft)}
.pick b{display:block;font-weight:600;margin-bottom:5px}
.pick span{color:var(--muted);font-size:14px;line-height:1.45;display:block}
.answer{margin-top:20px;background:var(--cream);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,34px);border-left:5px solid var(--teal)}
.answer[hidden]{display:none}
.answer h3{font-size:clamp(21px,2.4vw,30px);margin-bottom:12px}
.answer .say{font-size:17px;color:var(--muted);max-width:56ch;margin-bottom:20px}
.answer-meta{display:flex;gap:26px;flex-wrap:wrap;align-items:baseline;margin-bottom:22px}
.answer-meta b{font-size:30px;font-weight:800}
.answer-meta span{color:var(--muted);font-size:14px}

/* ---------------- home hero ---------------- */
.hero{padding:clamp(24px,3vw,44px) 0 var(--base)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,58px);align-items:center}
.hero h1{font-size:clamp(30px,4.6vw,64px);max-width:16ch}
.hero h1 .hi{color:var(--teal)}
.hero-sub{font-size:clamp(17px,1.5vw,21px);color:var(--muted);max-width:47ch;margin-top:20px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center}
.hero-photo{position:relative}
.hero-photo img{width:100%;height:clamp(430px,74vh,680px);object-fit:cover;object-position:52% 30%;
  border-radius:var(--radius)}
.tag{position:absolute;left:-14px;bottom:22px;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--pill);padding:10px 18px;font-size:17px;font-weight:600;box-shadow:var(--shadow)}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-photo{order:-1}
  .hero-photo img{height:clamp(340px,52vh,470px)}
  .tag{left:12px}
}

/* quotes */
.said-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:16px;margin-top:38px}
.said-list blockquote{margin:0;background:rgba(246,240,234,.06);border-radius:var(--radius);padding:23px 24px}
.said-list p{margin:0;font-size:17px}
.said-list cite{display:block;font-style:normal;font-size:14px;color:#b7a696;margin-top:13px}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;margin-top:38px}
.contact-card{background:var(--cream);border-radius:var(--radius);padding:26px 28px}
.contact-card h3{font-size:21px;margin-bottom:10px}
.contact-card p{margin:0 0 6px;color:var(--muted)}
.contact-card a{font-weight:600;word-break:break-word}


/* --------------- late overrides ---------------
   `.phero p` and `.section-head p` are (0,1,1) and were beating the (0,1,0)
   `.eyebrow` rule, so every eyebrow rendered in the muted brown instead of the
   teal. Restated here, last and scoped, rather than by bumping specificity. */
.phero .eyebrow,
.section-head .eyebrow,
.section .eyebrow,
.hero .eyebrow{color:var(--teal-ink)}
.section-ink .eyebrow,
.section-ink .section-head .eyebrow{color:#7fd0ca}

/* On a phone a single column of 19 tall cards is a very long scroll, so go
   two-up with square crops. */
@media(max-width:700px){
  .bk-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bk-photo img{aspect-ratio:1/1}
  .bk-photo-plain{aspect-ratio:1/1;font-size:44px}
  .bk-photo-cap{padding:11px 12px 13px}
  .bk-photo-cap b{font-size:14px}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gal-cap{padding:14px 15px 17px}
}

/* A footer link on its own line is a standalone target, not an inline one. */
footer p > a{display:inline-flex;align-items:center;min-height:44px}

/* Services opens straight on the prices now, so its heading is just the page
   name. Kept as an h1 so the page still has one. Scoped under .phero because
   `.phero h1` is (0,1,1) and would otherwise win the font-size. */
.phero .eyebrow-h1{font-size:30px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-ink);font-weight:700;margin:0;line-height:1.2}
/* No headline or standfirst beside it, so the row stops being two columns and
   the summary runs across instead of leaving half the width empty. */
.phero-bare{grid-template-columns:minmax(0,1fr);align-items:start;gap:22px}
.phero-bare .phero-aside{max-width:none}
/* dt and dd are separate grid items, so a plain auto-fit grid splits the pairs
   across rows. Two fixed rows with column flow keeps each label above its own
   value. */
@media(min-width:760px){
  .phero-bare .phero-aside dl{display:grid;gap:2px 36px;
    grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .phero-bare .phero-aside dt{margin-top:0}
}

/* The hero headline is the brand name alone, so it is set larger than the
   sentence it replaced. The floor is 28px rather than the hero's usual 30px
   because the word is one long token: at 375px it needs to clear the gutter,
   and on anything narrower it is allowed to break rather than overflow. */
.hero h1.hero-mark{font-size:clamp(28px,6.4vw,88px);max-width:none;
  letter-spacing:-.035em;line-height:1.02}

/* Home lists what she offers rather than what she charges, and each row books.
   Button reset first, then the same dot-leader rhythm as the price board. */
.offer-row{display:flex;align-items:baseline;gap:9px;width:100%;padding:11px 0;
  border:0;border-bottom:1px solid var(--line);background:none;font-family:inherit;
  font-size:17px;color:var(--ink);text-align:left;cursor:pointer;
  transition:color .16s ease}
.offer-row .n{font-weight:600}
.offer-row::after{content:"";flex:1;border-bottom:1px dotted rgba(109,95,85,.42);
  transform:translateY(-4px)}
.offer-row .go{color:var(--teal-ink);font-weight:600;white-space:nowrap;
  opacity:0;transform:translateX(-4px);transition:opacity .16s ease,transform .16s ease}
.offer-row:hover{color:var(--teal-ink)}
.offer-row:hover .go,.offer-row:focus-visible .go{opacity:1;transform:none}
/* No hover on touch, so the cue is the resting state there. */
@media (hover:none),(max-width:900px){
  .offer-row .go{opacity:1;transform:none}
}

/* Gallery tiles book the service they show. */
.gal-item{cursor:pointer;border:1.5px solid transparent;transition:transform .18s ease,border-color .18s ease}
.gal-item:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--shadow)}
.gal-item img{transition:transform .35s ease}
.gal-item:hover img{transform:scale(1.03)}
.gal-cap .gal-go{display:block;color:var(--teal-ink);font-weight:600;font-size:14px;margin-top:6px;
  opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}
.gal-item:hover .gal-go,.gal-item:focus-visible .gal-go{opacity:1;transform:none}
@media (hover:none),(max-width:900px){
  .gal-cap .gal-go{opacity:1;transform:none}
}

/* The four work cards on the home page sit in a stretched grid, so a card whose
   caption wraps to two lines was leaving a taller cream foot than its
   neighbours. Pin the body to the bottom so every card reads the same. */
.grid-4 .card-book{display:flex;flex-direction:column}
.grid-4 .card-book .card-body{flex:1;display:flex;flex-direction:column}
.grid-4 .card-book .card-go{margin-top:auto;padding-top:10px}

/* Gallery tiles are stretched to the tallest card in their row; let the photo
   absorb that slack instead of leaving cream bands above and below it. */
.gal-item{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.gal-item img{flex:1 1 auto;min-height:0}

/* One long title must not shrink its photo. The image keeps its 3/4 crop at
   every card width, so photos align across a row; the row's leftover height is
   absorbed inside the caption, which drops the Book cue to a shared baseline. */
.gal-item img{flex:0 0 auto}
.gal-cap{display:flex;flex-direction:column;flex:1 1 auto}
.gal-cap .gal-go{margin-top:auto;padding-top:6px}

/* Services board: every row books its service, the price stays put. */
.price-row{width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  font:inherit;color:inherit;text-align:left;cursor:pointer;transition:color .18s ease}
.price-row .go{color:var(--teal-ink);font-weight:600;font-size:14px;white-space:nowrap;
  opacity:0;transform:translateY(2px);transition:opacity .18s ease,transform .18s ease}
.price-row:hover{color:var(--teal-ink)}
.price-row:hover .go,.price-row:focus-visible .go{opacity:1;transform:none}
@media (hover:none){.price-row .go{opacity:1;transform:none}}

/* The header rule thins once you scroll. Painted as a shadow, not a border, so
   the header's height never changes and the page below cannot jitter. */
.top{border-bottom-color:transparent;box-shadow:0 2px 0 var(--line);
  transition:box-shadow .2s ease}
.top.is-scrolled{box-shadow:0 1px 0 var(--line)}

/* A service with no truthful photograph gets a short text tile, not a tall
   empty panel. Cards sit to the top of the row so the mix reads deliberate. */
.bk-photos{align-items:start}
.bk-photo-text{background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.bk-photo-text .bk-photo-cap{padding-top:17px}

/* The hero photo is a strong enough edge that the full section rhythm below it
   reads as dead space on a wide screen. Tighten only this one junction. */
.hero{padding-bottom:clamp(24px,3vw,44px)}
.hero + .section{padding-top:clamp(40px,5vw,72px)}

/* Send the Book cue to the far end of the row, past the dotted leader,
   where the price sits on the Services board. */
.offer-row::after{order:1}
.offer-row .go{order:2}