/* Atelier Lash Hawaiʻi
   Mobile-first: base styles are for phones; wider screens add to them.
   Brand: espresso, olive, burnt orange, butter and linen from the logo. Two fonts: Marcellus for
   headings, Instrument Sans for text. One gold crystal per page, under its first heading. Things you tap are
   rounded (buttons, chips, tags); boxes that hold content stay crisp. The only arches are
   the hero's (framing the logo icon) and Makani's photo. */
:root {
  --shell: #FBF7EE;        /* linen */
  --shell-deep: #EBE0CB;   /* sand: tinted sections, so they stand apart from the linen */
  --line: #E6DCC8;
  --line-strong: #D9C8AA;  /* edge where a sand section meets linen */
  --lava: #2B2422;         /* ink */
  --muted: #6E5F59;
  --koa: #4E2F23;          /* espresso */
  --koa-dark: #33201A;
  --sage: #5F6630;         /* olive */
  --sage-deep: #4A5027;
  --butter: #F3E1A6;
  --butter-soft: #F7EBC3;
  --wood: #C9A27E;
  --gold: #A98257;         /* champagne gold for the crystal dividers */
  --burnt: #B4572A;
  --on-dark: #EFE6D6;      /* body text on espresso and olive */

  --display: "Marcellus", "Didot", Georgia, serif;
  --body: "Instrument Sans", system-ui, -apple-system, sans-serif;

  --gutter: 20px;
  --max: 1160px;
  --header-h: 64px;
  --radius: 4px;           /* boxes and cards */
  --radius-sm: 2px;        /* form fields and small panels */
  --pill: 999px;           /* everything you tap: buttons, chips, tags */
  --lift: 0 1px 2px rgba(43, 36, 34, .04), 0 10px 28px -16px rgba(78, 47, 35, .28);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--shell);
  color: var(--lava);
  font: 400 1.125rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--koa); outline-offset: 3px; border-radius: var(--radius-sm); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3, h4 { font-weight: 400; margin: 0; }
h3 { font: 400 1.4rem/1.2 var(--display); letter-spacing: 0.01em; }
p { margin: 0; }
address { font-style: normal; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lava); color: #fff; padding: 10px 14px; border-radius: var(--radius-sm); z-index: 50; }
.skip:focus { left: 8px; }
section { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Section headings: one line, centered */
:is(h2, .page-h) { font: 400 2rem/1.15 var(--display); text-align: center; text-wrap: balance; color: var(--lava); }
.section-head { text-align: center; max-width: 40em; margin: 0 auto 32px; }
.section-head p { margin: 14px auto 0; max-width: 34em; color: var(--muted); }
/* A small faceted crystal with a few twinkles, once per page: under the first section heading */
.section-head::after { display: none; }
:is(main > section:first-child, main > .hero + section) .section-head::after {
  content: ""; display: block; width: 120px; height: 28px; margin: 16px auto 0; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28'%3E%3Cg fill='none' stroke='black' stroke-width='0.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 14H42M78 14H112'/%3E%3Cpath d='M50 9.5L54.5 5H65.5L70 9.5L60 23Z'/%3E%3Cpath d='M50 9.5H70M54.5 5L57.5 9.5L60 5L62.5 9.5L65.5 5M57.5 9.5L60 23L62.5 9.5'/%3E%3C/g%3E%3Cpath fill='black' d='M33 6.5Q33.4 9.6 35.5 10Q33.4 10.4 33 13.5Q32.6 10.4 30.5 10Q32.6 9.6 33 6.5ZM87 15.5Q87.3 17.7 89 18Q87.3 18.3 87 20.5Q86.7 18.3 85 18Q86.7 17.7 87 15.5ZM74.5 3Q74.7 4.3 75.8 4.5Q74.7 4.7 74.5 6Q74.3 4.7 73.2 4.5Q74.3 4.3 74.5 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28'%3E%3Cg fill='none' stroke='black' stroke-width='0.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 14H42M78 14H112'/%3E%3Cpath d='M50 9.5L54.5 5H65.5L70 9.5L60 23Z'/%3E%3Cpath d='M50 9.5H70M54.5 5L57.5 9.5L60 5L62.5 9.5L65.5 5M57.5 9.5L60 23L62.5 9.5'/%3E%3C/g%3E%3Cpath fill='black' d='M33 6.5Q33.4 9.6 35.5 10Q33.4 10.4 33 13.5Q32.6 10.4 30.5 10Q32.6 9.6 33 6.5ZM87 15.5Q87.3 17.7 89 18Q87.3 18.3 87 20.5Q86.7 18.3 85 18Q86.7 17.7 87 15.5ZM74.5 3Q74.7 4.3 75.8 4.5Q74.7 4.7 74.5 6Q74.3 4.7 73.2 4.5Q74.3 4.3 74.5 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.section { padding: 64px 0; }
.sub { margin-top: 64px; text-align: center; scroll-margin-top: calc(var(--header-h) + 24px); }
.sub > h2 { font: 400 1.6rem/1.15 var(--display); }
.sub > p { margin: 10px auto 0; max-width: 36em; color: var(--muted); font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 1.6em; border-radius: var(--pill);
  font: 500 1rem/1 var(--body); letter-spacing: 0.01em; text-decoration: none;
  border: 1px solid var(--koa); transition: background-color .15s, color .15s, border-color .15s;
}
.btn-solid { background: var(--koa); color: #fff; }
.btn-solid:hover { background: var(--koa-dark); border-color: var(--koa-dark); }
.btn-line { color: var(--koa); background: transparent; }
.btn-line:hover { background: var(--koa); color: #fff; }
.btn-cream { background: var(--shell); border-color: var(--shell); color: var(--koa-dark); }
.btn-cream:hover { background: #fff; border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.end-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.tag {
  display: inline-block; justify-self: center; align-self: center; margin-top: 2px;
  padding: 4px 10px; border-radius: var(--pill); background: var(--butter);
  font: 600 0.76rem/1.2 var(--body); font-style: normal; letter-spacing: 0.02em; color: var(--koa-dark);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--shell) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mark { display: block; margin-right: auto; padding: 4px 0; }
.mark svg { width: auto; height: 44px; overflow: visible; }
.mark-arch { fill: none; stroke: var(--koa); stroke-width: 11; }
.mark-a { fill: var(--koa); stroke: var(--koa); stroke-width: 5; stroke-linejoin: round; }
.header-book { min-height: 42px; padding: 0 1.4em; font-size: 0.95rem; }
.header-book[aria-current="page"] { background: var(--koa-dark); border-color: var(--koa-dark); }
.nav { display: none; }

/* Menu button: three thin lines that turn into an X */
.menu-btn { position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--koa); cursor: pointer; }
.menu-lines, .menu-lines::before, .menu-lines::after { position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor; transition: transform .2s, background-color .2s; }
.menu-lines { top: 21px; }
.menu-lines::before, .menu-lines::after { content: ""; left: 0; }
.menu-lines::before { top: -7px; }
.menu-lines::after { top: 7px; }
.menu-btn[aria-expanded="true"] .menu-lines { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-lines::before { transform: translateY(7px) rotate(45deg); background: var(--koa); }
.menu-btn[aria-expanded="true"] .menu-lines::after { transform: translateY(-7px) rotate(-45deg); background: var(--koa); }

/* Menu: a full-screen linen sheet under the header */
#menu { display: block; position: fixed; z-index: 19; inset: var(--header-h) 0 0; margin: 0; overflow-y: auto; background: var(--shell); border-top: 1px solid var(--line); }
#menu[hidden] { display: none; }
#menu:not([hidden]) { animation: menu-in .2s ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { #menu:not([hidden]) { animation: none; } }
.menu-links { display: grid; padding: 20px 0 8px; }
.menu-links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 1.6rem/1.2 var(--display); color: var(--lava); text-decoration: none; }
.menu-links a[aria-current="page"] { color: var(--burnt); }
.menu-foot { display: grid; gap: 10px; padding: 24px 0 40px; text-align: center; }
.menu-foot .status:empty { display: none; }
.menu-insta { color: var(--koa); padding: 8px 0; }
html.menu-open { overflow: hidden; }
html.menu-open .site-header { background: var(--shell); border-bottom-color: var(--line); }

/* ---------- Hero ---------- */
.hero { padding: 22px 0 56px; text-align: center; }
/* The logo's arch, drawn as a thin wood-tone line around the lash and title */
.hero-arch {
  max-width: 520px; margin: 0 auto; padding: 132px 14px 26px;
  border: 1px solid var(--wood); border-bottom: 0; border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(243, 225, 166, .42), rgba(243, 225, 166, 0) 88%);
}
.hero h1 { margin: 0; }
.hero-logo { width: 100%; max-width: 290px; height: auto; margin: 0 auto; }
.hero-place { text-wrap: balance; margin-top: 14px; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.hero .btn-row .btn { flex: 1 1 100%; }
.status { margin-top: 16px; font-size: 0.98rem; color: var(--muted); }
.status strong { color: var(--lava); font-weight: 500; }

.item .price s { margin-left: 4px; color: var(--muted); font-weight: 400; font-size: 0.85em; }

svg[data-style] .lid { stroke: var(--lava); stroke-width: 1.6; fill: none; stroke-linecap: round; }
svg[data-style] .lash { stroke: var(--lava); fill: none; stroke-linecap: round; }

/* ---------- Meet the artist ---------- */
picture { display: block; }
picture img { display: block; width: 100%; height: auto; }
/* Her photo keeps the logo's arch (Kauila liked it here) */
.portrait { max-width: 300px; margin: 0 auto 32px; border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; border: 1px solid var(--line); padding: 8px; background: #fff; box-shadow: var(--lift); }
.portrait img { border-radius: 999px 999px 2px 2px; aspect-ratio: 3 / 4; object-fit: cover; }
.meet-text { text-align: center; }
.meet-text .section-head { margin-bottom: 18px; }
.meet-text > p { max-width: 32em; margin: 0 auto; font-size: 1.1rem; }
.meet-text > p + p { margin-top: 1em; }

/* ---------- House calls teaser: olive card with a thin butter frame ---------- */
/* Home: the three kinds of service, each a card that opens its prices */
.price-strip { background: var(--shell-deep); }
/* Sand sections get a crisp edge top and bottom */
:is(.price-strip, .insta, #faq) { border-block: 1px solid var(--line-strong); }
.service-cards { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; gap: 12px; }
.service-cards li { display: flex; }
.service-card { flex: 1; display: grid; grid-template-rows: auto 1fr auto auto; gap: 4px; justify-items: center; padding: 26px 20px 24px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--lava); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.service-card:hover { border-color: var(--wood); box-shadow: var(--lift); }
.service-card b { font: 400 1.45rem/1.2 var(--display); }
.service-card span { color: var(--muted); }
.service-card strong { margin-top: 8px; font-weight: 500; color: var(--koa); font-size: 1.1rem; }
.service-card strong span { color: inherit; }
.service-card s { margin-left: 4px; font-weight: 400; font-size: 0.85em; color: var(--muted); }
.service-card em { margin-top: 10px; font-style: normal; font-size: 0.95rem; color: var(--koa); text-decoration: underline; text-underline-offset: 3px; }
.house-teaser { padding-top: 8px; padding-bottom: 48px; }
.ht-card {
  position: relative; isolation: isolate; max-width: 900px; margin: 0 auto;
  padding: 60px 26px 52px; border-radius: var(--radius); overflow: hidden;
  background: var(--sage-deep); color: var(--on-dark); text-align: center;
}
.ht-card::before {
  content: ""; position: absolute; z-index: -1; inset: 12px;
  border: 1px solid rgba(243, 225, 166, .45);
}
.ht-card h2 { color: var(--shell); }
.ht-card p { margin: 18px auto 0; max-width: 30em; }
.ht-price { font: 400 1.4rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--butter); }
.ht-card .btn { color: var(--sage-deep); }

/* ---------- Instagram ---------- */
.insta { background: var(--shell-deep); }
.insta-card {
  max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px;
  padding: 20px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.insta-card:hover { border-color: var(--wood); box-shadow: var(--lift); }
.insta-card svg { width: 40px; height: 40px; fill: none; stroke: var(--burnt); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.insta-text { display: grid; }
.insta-text b { font: 400 1.3rem/1.2 var(--display); }
.insta-text span { color: var(--muted); font-size: 0.95rem; line-height: 1.4; }
.insta-handle { grid-column: 2; font-weight: 500; color: var(--koa); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Visit the studio (home) ---------- */
.visit-grid { display: grid; gap: 36px; text-align: center; }
.visit address { font-size: 1.1rem; line-height: 1.6; }
.visit .status:empty { display: none; }
.hours caption { caption-side: top; text-align: left; padding-bottom: 8px; font: 600 0.8rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.hours { width: 100%; max-width: 440px; margin: 0 auto; border-collapse: collapse; font-size: 1.05rem; text-align: left; }
.hours td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; }
.hours tr.closed td { color: var(--muted); }
.hours tr.today td { color: var(--koa); font-weight: 600; }
.today-tag { font-weight: 400; font-size: 0.82rem; margin-left: 6px; }

/* ---------- Footer ---------- */
footer {
  background: var(--koa-dark); color: #CDBFB2; font-size: 1rem; line-height: 1.6;
  padding: 48px 0 calc(28px + env(safe-area-inset-bottom));
}
footer a { color: var(--shell); text-underline-offset: 3px; }
.nowrap { white-space: nowrap; }
.foot-grid { display: grid; gap: 28px; }
.foot-brand img { width: 180px; height: auto; }

footer .foot-h { display: block; text-align: left; margin-bottom: 8px; font: 600 0.78rem/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--butter); }
.foot-bottom { margin-top: 36px; padding-top: 18px; background: linear-gradient(rgba(251, 247, 238, .14), rgba(251, 247, 238, .14)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 0.92rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; margin: 0; padding: 0; }
.foot-links a { display: inline-block; padding: 10px 0; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

/* ---------- Services ---------- */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -8px auto 48px; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; text-decoration: none; font-size: 0.98rem; color: var(--koa); }
.jump a:hover { border-color: var(--koa); }
.scale-label { display: flex; justify-content: space-between; font-size: 0.98rem; color: var(--muted); margin-bottom: 8px; text-align: left; }
.scale-label span:last-child { color: var(--lava); }
.spectrum { display: grid; border-top: 1px solid var(--wood); text-align: left; }
.style { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; align-items: center; padding: 22px 0; }
.style + .style { border-top: 1px solid var(--line); }
.style svg { grid-column: 1; grid-row: 1 / span 2; width: 112px; height: 56px; overflow: visible; }
.style h3 { grid-column: 2; grid-row: 1; align-self: end; font: 400 1.6rem/1.1 var(--display); }
.other-fills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin: 28px auto 0; color: var(--muted); scroll-margin-top: calc(var(--header-h) + 24px); }
.other-fills span { text-wrap: balance; }
.other-fills b { margin-right: 6px; font-weight: 500; color: var(--lava); }
.style .best { grid-column: 2; grid-row: 2; align-self: start; margin-top: 4px; font: 600 0.76rem/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }

.prices { grid-column: 1 / -1; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.prices div { padding-top: 10px; border-top: 1px solid var(--line); }
.prices dt { color: var(--muted); font-size: 0.95rem; }
.prices dd { margin: 0; font-size: 1.15rem; }
.prices dd small { margin-left: 6px; color: var(--muted); font-size: 0.92rem; }

/* Fill timing chart. Track spans week 0–5; each week is 20%. */

/* Service list */
.price-list { margin-top: 16px; text-align: left; }
.item { padding: 20px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.item:last-child, .item:has(+ .btn-row) { border-bottom: 1px solid var(--line); }
.item h3 { font: 400 1.4rem/1.2 var(--display); }
.item .price { font: 400 1.4rem/1.2 var(--display); text-align: right; white-space: nowrap; }
.item .time { grid-column: 1 / -1; color: var(--muted); font-size: 0.98rem; }
.item .tag { grid-column: 1 / -1; justify-self: start; }
.item p { grid-column: 1 / -1; margin-top: 4px; color: var(--muted); font-size: 1.05rem; max-width: 36em; }

/* Coming soon: UV lashes. Tap the card to open the details. */
.uv { padding: 0 0 56px; }
.uv-card { max-width: 860px; margin: 0 auto; border-radius: var(--radius); background: var(--butter-soft); border: 1px solid #EAD38C; text-align: center; }
.uv-card summary { list-style: none; cursor: pointer; padding: 34px 22px 28px; border-radius: var(--radius); }
.uv-card summary::-webkit-details-marker { display: none; }
.uv-card summary p { margin: 14px auto 0; max-width: 32em; font-size: 1.05rem; }
.uv-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; min-height: 44px; padding: 0 20px; border-radius: var(--pill); border: 1px solid var(--koa); color: var(--koa); font-weight: 500; font-size: 1rem; }
.uv-more::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .2s, margin .2s; }
.uv-card summary:hover .uv-more { background: var(--koa); color: #fff; }
.uv-card[open] .uv-more::after { transform: rotate(225deg); margin-top: 4px; }
.uv-body { padding: 0 22px 30px; text-align: left; }
.uv-points { display: grid; gap: 10px; }
.uv-points > div { background: rgba(255, 255, 255, .6); border-radius: var(--radius-sm); padding: 16px 18px; }
.uv-points h3 { font-size: 1.2rem; margin-bottom: 4px; }
.uv-points p, .uv-safety { color: var(--muted); font-size: 1rem; }
.uv-safety { margin: 18px auto 0; max-width: 40em; }
.uv-safety b { color: var(--lava); font-weight: 600; }

/* ---------- House calls page ---------- */
.house { background: var(--sage-deep); color: var(--on-dark); }
.house :is(h2, .page-h) { color: var(--shell); }
.house .section-head p { color: var(--on-dark); }
main > section.house .section-head::after { display: none; }
.house dl { margin: 24px 0 0; }
.house dl div { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.22); }
.house dl div:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.house dt { font: 400 1.35rem/1.2 var(--display); color: var(--shell); }
.house dd { margin: 0; font-size: 1.02rem; text-align: right; }
.house dd.note { grid-column: 1 / -1; text-align: left; opacity: .9; }
.house .btn-cream { color: var(--sage-deep); }

/* Numbered cards: first-visit steps and the wedding plan */
.steps, .plan { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 14px; }
.steps > li, .plan > li { counter-increment: step; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 22px; }
.steps h2, .plan b { display: flex; align-items: baseline; gap: 10px; font: 400 1.45rem/1.2 var(--display); }
.steps h2::before, .plan b::before { content: counter(step, decimal-leading-zero); font: 600 0.95rem/1 var(--body); letter-spacing: 0.06em; font-variant-numeric: lining-nums tabular-nums; color: var(--burnt); flex: none; }
.plan > li { color: var(--muted); font-size: 1.05rem; }
.plan b { color: var(--lava); margin-bottom: 8px; }
.steps ul { margin: 12px 0 0; padding-left: 1.1em; color: var(--muted); font-size: 1.05rem; }
.steps ul li { margin-top: 6px; }
.after-label { margin: 16px 0 0; font: 600 0.76rem/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.after-label + ul { margin-top: 4px; }
.area { margin-top: 56px; text-align: center; }
.area h3 { font: 400 1.5rem/1.15 var(--display); margin-bottom: 12px; }
.area p { font-size: 1.05rem; }
.area .range { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px; font: 400 1.35rem/1.2 var(--display); color: var(--lava); }
.range-line { flex: 0 1 140px; height: 1px; background: var(--wood); position: relative; }
.range-line::before, .range-line::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.range-line::before { left: 0; }
.range-line::after { right: 0; }

/* ---------- FAQ ---------- */
#faq { background: var(--shell-deep); }
.faq { border-top: 1px solid var(--wood); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 14px 0; font-size: 1.12rem; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
/* Chevron: points down when closed, up when open. */
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -5px 6px 0 0; border-right: 1.6px solid var(--koa); border-bottom: 1.6px solid var(--koa); transform: rotate(45deg); transition: transform .2s, margin .2s; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 5px; }
.faq .answer { padding: 0 0 18px; color: var(--muted); max-width: 40em; font-size: 1.05rem; }
.faq .answer p + p { margin-top: 10px; }
.faq .answer a, .faq-wrap .section-head a { color: var(--koa); }

/* ---------- Booking ---------- */
.good-to-know { list-style: none; margin: 0 auto 20px; padding: 0; max-width: 760px; display: grid; gap: 8px; font-size: 0.98rem; color: var(--muted); }
.good-to-know li { position: relative; padding-left: 28px; }
.good-to-know li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 14px; height: 8px; border-left: 1.8px solid var(--sage); border-bottom: 1.8px solid var(--sage); transform: rotate(-45deg); }
.good-to-know a { color: var(--koa); }
.booker { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px 24px; margin: 0 auto; scroll-margin-top: calc(var(--header-h) + 12px); box-shadow: var(--lift); }
.booker.is-embed { padding: 0; overflow: hidden; }
.bk-embed { display: block; width: 100%; height: min(760px, 80vh); min-height: 520px; border: 0; }
.bk-wait { color: var(--muted); padding: 24px 0; text-align: center; }
.bk-mock { margin: 0 0 14px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--shell-deep); font-size: 0.85rem; color: var(--muted); }
.bk-progress { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: bk; }
.bk-progress li { counter-increment: bk; font-size: 0.88rem; color: var(--muted); padding-top: 8px; border-top: 3px solid var(--line); }
.bk-progress li.is-done { border-top-color: var(--koa); }
.bk-progress li.is-current { border-top-color: var(--koa); color: var(--lava); font-weight: 600; }
.bk-title { font: 400 1.6rem/1.2 var(--display); outline: none; }
.bk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bk-link { background: none; border: 0; padding: 10px 0; min-height: 44px; font: 500 0.95rem/1 var(--body); color: var(--koa); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bk-hint { margin-top: 8px; font-size: 0.98rem; color: var(--muted); }
.bk-hint a { color: var(--koa); }
.bk-summary { display: grid; gap: 6px; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--shell); font-size: 1.02rem; }
.bk-summary div { display: flex; justify-content: space-between; gap: 12px; }
.bk-summary span { color: var(--muted); }
.bk-summary b { font-weight: 500; text-align: right; }
.bk-chips { display: flex; gap: 8px; overflow-x: auto; margin: 14px -16px 4px; padding: 2px 40px 6px 16px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.bk-chips::-webkit-scrollbar { display: none; }
.bk-chip { flex: none; min-height: 40px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; font: 500 1rem/1 var(--body); color: var(--lava); cursor: pointer; }
.bk-chip[aria-pressed="true"] { background: var(--lava); border-color: var(--lava); color: #fff; }
.bk-group { margin: 22px 0 0; font: 500 0.95rem/1.3 var(--body); color: var(--muted); }
.bk-services { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.bk-service { width: 100%; text-align: left; display: grid; gap: 2px; padding: 14px 40px 14px 14px; min-height: 64px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; font: inherit; color: inherit; cursor: pointer; position: relative; }
.bk-service::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid var(--koa); border-top: 1.6px solid var(--koa); transform: translateY(-50%) rotate(45deg); }
.bk-service:hover { border-color: var(--koa); }
.bk-service-name { font-weight: 500; font-size: 1.08rem; }
.bk-service-meta { font-size: 0.98rem; color: var(--muted); }
.bk-days { display: flex; gap: 6px; overflow-x: auto; margin: 14px -16px 0; padding: 2px 16px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.bk-day { flex: none; scroll-snap-align: start; width: 56px; display: grid; justify-items: center; gap: 1px; padding: 6px 0 8px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; font: inherit; color: var(--lava); cursor: pointer; }
.bk-day small { font-size: 0.68rem; color: var(--koa); font-weight: 600; min-height: 1em; }
.bk-day span { font-size: 0.85rem; color: var(--muted); }
.bk-day b { font: 500 1.25rem/1.1 var(--body); }
.bk-day:disabled { opacity: 0.35; cursor: default; border-style: dashed; }
.bk-day[aria-pressed="true"] { background: var(--koa); border-color: var(--koa); color: #fff; }
.bk-day[aria-pressed="true"] span, .bk-day[aria-pressed="true"] small { color: #fff; }
.bk-dayline { margin-top: 14px; font-weight: 500; }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.bk-time { min-height: 48px; border-radius: var(--pill); border: 1px solid var(--koa); background: #fff; color: var(--koa); font: 500 1.05rem/1 var(--body); cursor: pointer; }
.bk-time:hover { background: var(--koa); color: #fff; }
.bk-more { margin-top: 10px; }
.bk-empty { padding: 8px 0; }
.bk-empty p { color: var(--muted); }
.bk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bk-form { display: grid; gap: 14px; margin-top: 14px; }
.bk-two { display: grid; gap: 14px; }
.bk-field label, .bk-fieldset legend { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 6px; }
.bk-field input, .bk-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid #D6C8B0; background: #fff; font: 400 1.05rem/1.4 var(--body); color: var(--lava); }
.bk-field textarea { resize: vertical; }
.bk-field input:focus, .bk-field textarea:focus { outline: 2px solid var(--koa); outline-offset: 0; border-color: var(--koa); }
.bk-field.has-error input { border-color: #A3352A; }
.bk-err { margin-top: 6px; color: #A3352A; font-size: 0.88rem; }
.bk-optional { color: var(--muted); font-weight: 400; }
.bk-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.bk-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-submit { width: 100%; min-height: 54px; font-size: 1.05rem; }
.bk-submit:disabled { opacity: 0.7; cursor: progress; }
.bk-banner { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: #F6E1DC; color: #7A2A20; font-size: 0.95rem; }
.bk-done { text-align: center; }
.bk-done > p { color: var(--muted); margin: 6px 0 18px; }
.bk-done .bk-summary { text-align: left; }
.bk-done .bk-actions { justify-content: center; }
.bk-check { width: 56px; height: 56px; margin: 4px auto 12px; border-radius: 50%; background: var(--koa); display: grid; place-items: center; }
.bk-check svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.book-alt { margin-top: 16px; font-size: 1rem; color: var(--muted); text-align: center; }
.book-alt a { color: var(--koa); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 36px; }
.contact-grid h2 { font: 400 1.4rem/1.2 var(--display); text-align: left; margin-bottom: 12px; }
.contact-grid address { font-size: 1.08rem; }
.actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.actions a {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; font-size: 1.05rem;
}
.actions a:hover { border-color: var(--koa); }
.actions svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--koa); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.actions small { margin-left: auto; min-width: 0; overflow-wrap: anywhere; text-align: right; color: var(--muted); font-size: 0.85rem; }
.contact-grid .hours { max-width: none; }

/* Sub-pages: the first section sits close to the header */
.page-h { margin: 0; }
.subpage main > .section:first-child:not(.house) { padding-top: 28px; }

/* ---------- Larger phones ---------- */
@media (min-width: 480px) {
  .hero .btn-row .btn { flex: 0 0 auto; }
  .bk-two { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tablets ---------- */
@media (min-width: 720px) {
  :root { --gutter: 40px; }
  :is(h2, .page-h) { font-size: 2.4rem; }
  .hero-arch { max-width: 600px; padding: 190px 24px 30px; }
  .hero-logo { max-width: 440px; }
  .service-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ht-card { padding: 76px 48px 68px; }
  .uv-card summary { padding: 44px 40px 34px; }
  .uv-body { padding: 0 40px 40px; }
  .uv-points { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ht-card::before { inset: 16px; }
  .insta-card { grid-template-columns: auto 1fr auto; padding: 18px 30px 18px 24px; }
  .insta-handle { grid-column: 3; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .spectrum { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .style:nth-child(2) { border-top: 0; }
  .price-list { max-width: 600px; margin: 16px auto 0; }
  #lift .btn-row { justify-content: center; }
  .plan { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps > li:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-content: start; }
  .steps > li:last-child > h2 { grid-column: 1 / -1; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .contact-grid > :first-child { grid-row: span 2; }
  .good-to-know { grid-template-columns: 1fr 1fr; gap: 10px 24px; }
  .booker:not(.is-embed) { padding: 28px 28px 32px; max-width: 760px; }
  .bk-chips, .bk-days { margin-inline: 0; padding-inline: 0; }
  .bk-chips { -webkit-mask-image: none; mask-image: none; }
  .bk-services { grid-template-columns: 1fr 1fr; }
}

/* ---------- Desktop: top navigation replaces the tab bar ---------- */
@media (min-width: 960px) {
  :root { --header-h: 80px; --gutter: 56px; }
  .mark svg { height: 50px; }
  .menu-btn, #menu { display: none; }
  .nav { display: flex; align-items: center; gap: 30px; }
  .header-row { gap: 30px; }
  .nav a:not(.btn) { text-decoration: none; font-size: 0.98rem; color: var(--muted); padding: 10px 0; position: relative; }
  .nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--lava); }
  .nav a[aria-current="page"]:not(.btn)::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--burnt); }
  .header-book { min-height: 44px; font-size: 0.98rem; }

  :is(h2, .page-h) { font-size: 2.75rem; }
  .section { padding: 104px 0; }
  .section-head { margin-bottom: 52px; }
  .sub { margin-top: 88px; }

  .hero { padding: 40px 0 72px; }
  .hero-arch { max-width: 760px; padding: 230px 40px 34px; }
  .hero-logo { max-width: 560px; }

  .meet-grid { display: grid; grid-template-columns: 400px 1fr; gap: 80px; align-items: center; max-width: 1080px; }
  .portrait { max-width: none; margin: 0; }
  .meet-text { text-align: left; }
  .meet-text .section-head { text-align: left; margin: 0 0 22px; }
  .meet-text h2 { justify-items: start; text-align: left; }
  .meet-text .section-head::after { margin-left: 0; }
  .meet-text > p { margin-left: 0; }

  .visit-grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; text-align: left; max-width: 1000px; }
  .visit .section-head { text-align: left; margin: 0 0 22px; }
  .visit h2 { justify-items: start; text-align: left; }
  .visit .section-head::after { margin-left: 0; }
  .visit .btn-row { justify-content: flex-start; }
  .hours { margin: 0; }

  .house-teaser { padding-bottom: 72px; }
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }

  .spectrum { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .style { display: flex; flex-direction: column; align-items: stretch; padding: 28px 24px 32px; border-right: 1px solid var(--line); }
  .style + .style { border-top: 0; }
  .style:first-child { padding-left: 0; }
  .style:last-child { border-right: 0; padding-right: 0; }
  .style svg { width: 100%; height: 96px; margin-bottom: 18px; }

  .style h3, .style .best { align-self: stretch; }
  .prices dd { white-space: nowrap; }
  .prices dd small { display: block; margin: 2px 0 0; }

  .house .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 80px; align-items: start; }
  .house .section-head { display: block; margin: 0; text-align: left; }
  .house :is(h2, .page-h) { justify-items: start; text-align: left; }
  .house .section-head p { margin-left: 0; }
  .house .section-head .btn-row { justify-content: flex-start; }
  .house-menu > dl:first-child { margin: 0; }
  .house .end-cta { display: none; }

  .faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; }
  .faq-wrap .section-head { text-align: left; margin: 0; }
  .faq-wrap :is(h2, .page-h) { justify-items: start; text-align: left; }
  .faq-wrap .section-head::after { margin-left: 0; }
  .faq-wrap .section-head p { margin-left: 0; }
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
  .contact-grid > :first-child { grid-row: auto; }
  .subpage main > .section:first-child:not(.house) { padding-top: 56px; }
}