/*
 * Natural Essence Massage, Bellevue WA — concept preview.
 *
 * Brief: a relaxed, safe place. Warm, modern, professional. Feminine and
 * gentle without being girlish; East Asian in restraint rather than in motif —
 * no bamboo, no lotus clip-art, no dragons. What carries that here is space,
 * a slow serif, and a palette taken from clay and warm paper.
 *
 * The harder half of the brief is legitimacy. Massage is a trade where a vague
 * website reads as evasive, so the design does the opposite of coy: licensed,
 * private, by appointment, a real suite number, one named practitioner, prices
 * on the page. Clarity is the reassurance.
 *
 * Performance: no webfonts, no framework, one stylesheet. Bellevue is a phone
 * market and a slow page is a closed tab.
 */

:root {
  --clay:     #A5613C;   /* the warm accent, used sparingly */
  --gold:     #C08A3E;   /* from her business card: gold type on dark */
  --clay-dk:  #8A4E2E;   /* text-on-cream; the lighter clay fails contrast */
  --espresso: #3A2A22;   /* headings and the dark band */
  --ink:      #4A3A31;   /* body text — warm, never pure grey */
  --mute:     #7B6A5F;
  --cream:    #FBF7F1;
  --sand:     #F3EADE;
  --line:     #E6D9C9;
  --white:    #FFFFFF;

  --shell: min(1120px, 100% - 2.4rem);
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --r: 4px;              /* barely rounded: softness comes from color, not corners */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section[id] { scroll-margin-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

body {
  background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
.wrap { width: var(--shell); margin-inline: auto; }

h1, h2, h3 { font-family: var(--serif); color: var(--espresso); font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(2.15rem, 5.4vw, 3.5rem); letter-spacing: -0.01em; }
h1 em { font-style: italic; color: var(--clay-dk); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.35rem); }
h3 { font-size: 1.18rem; }
a { color: var(--clay-dk); }

.kicker {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--clay-dk);
  margin-bottom: .85rem;
}
.kicker.light { color: var(--gold); }
.sub { color: var(--mute); margin-top: .7rem; max-width: 52ch; }
.fine { font-size: .89rem; color: var(--mute); margin-top: 1.2rem; }
.note { font-size: .89rem; color: var(--mute); margin-top: 1rem; }
.note.light { color: rgba(255,255,255,.6); }
.lede { font-size: clamp(1.05rem, 2.1vw, 1.2rem); margin-top: 1.3rem; max-width: 46ch; }
.lede-sm { font-size: 1.06rem; margin-top: .8rem; }

/* ── preview banner ─────────────────────────────────────────────────────── */
.preview-bar {
  background: var(--espresso); color: #E6D5C4;
  font-size: .8rem; line-height: 1.55; text-align: center; padding: .6rem 1.1rem;
}
.preview-bar b { color: #E8B98D; }

/* ── header ─────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .85rem clamp(1.1rem, 4vw, 2.4rem);
  background: rgba(251,247,241,.93);
  backdrop-filter: saturate(140%) blur(9px);
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--espresso); }
.brand-mark svg { width: 34px; height: 34px; color: var(--clay); }
.brand-txt { font-family: var(--serif); font-size: 1.12rem; line-height: 1.15; }
.brand-txt i {
  display: block; font-family: var(--sans); font-style: normal;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
.nav { margin-left: auto; display: flex; gap: 1.7rem; }
.nav a { color: var(--ink); text-decoration: none; font-size: .93rem; }
.nav a:hover { color: var(--clay-dk); }
@media (max-width: 900px) { .nav { display: none; } }
.top-cta { margin-left: auto; }
@media (min-width: 901px) { .top-cta { margin-left: 1.6rem; } }
@media (max-width: 460px) { .top-cta { display: none; } }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; text-decoration: none; text-align: center; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: .78em 1.6em; border: 1px solid transparent; border-radius: var(--r);
  transition: background-color .18s, border-color .18s, color .18s;
}
.btn-lg { font-size: 1.02rem; padding: .9em 1.9em; }
.btn-solid { background: var(--clay); color: #fff; }
.btn-solid:hover { background: var(--clay-dk); }
.btn-quiet { background: transparent; color: var(--espresso); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--clay); color: var(--clay-dk); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* ── hero ─────────────────────────────────────────────────────────────────
   Full-bleed photograph with the words over it, the same pattern as the QIVU
   and Doner Group sites: one image per ten minutes of the hour, swapped as a
   background rather than an <img>. Darkened hard, because cream display type
   over an undarkened photograph is the fastest way to make a page look
   amateur — and her own business card is gold on near-black, so a dark hero
   is continuous with the stationery she already hands out. */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: min(78vh, 640px);
  padding: clamp(3rem, 8vw, 6rem) 0;
  background-color: var(--espresso);
  background-size: cover; background-position: center;
  color: #F2E7DA;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(30,20,15,.86) 0%, rgba(30,20,15,.66) 48%, rgba(30,20,15,.34) 100%);
}
.hero-inner { position: relative; z-index: 1; width: var(--shell); margin-inline: auto; max-width: min(1120px, 92vw); }
.hero h1 { color: #FCF6EE; }
.hero h1 em { color: #E9B77E; }
.hero .lede { color: #E7DACB; max-width: 44ch; }
.hero .eyebrow { color: #E9B77E; }

/* Sits over the photograph, so it needs its own contrast rather than the
   pale border that works on cream. */
.btn-onphoto { background: rgba(255,255,255,.1); color: #FCF6EE; border-color: rgba(255,255,255,.42); }
.btn-onphoto:hover { background: rgba(255,255,255,.2); border-color: #fff; }

.hero-credit {
  position: absolute; right: .9rem; bottom: .7rem; z-index: 2;
  font-size: .68rem; letter-spacing: .04em; color: rgba(255,255,255,.55);
}

.cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* ── the four assurances ────────────────────────────────────────────────── */
.assure {
  list-style: none; width: var(--shell); margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr);
  background: var(--line); border-block: 1px solid var(--line);
}
@media (min-width: 820px) { .assure { grid-template-columns: repeat(4, 1fr); } }
.assure li { background: var(--cream); padding: 1.25rem 1.3rem; }
.assure b { display: block; font-family: var(--serif); font-size: 1.08rem; color: var(--espresso); }
.assure span { font-size: .87rem; color: var(--mute); }

/* ── sections ───────────────────────────────────────────────────────────── */
.sec { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.sec-tint { background: var(--sand); }
.sec-dark { background: var(--espresso); color: #E4D6C8; }
.sec-dark h2 { color: #FBF3EA; }
.sec-dark .lede-sm { color: #E4D6C8; }
.sec-dark .fine { color: rgba(255,255,255,.5); }

.two { display: grid; gap: clamp(1.8rem, 5vw, 3.6rem); align-items: center; }
@media (min-width: 880px) {
  .two { grid-template-columns: 1fr 1fr; }
  .two-rev > .fig { order: -1; }
}
.two p + p { margin-top: 1rem; }
/* Headings were sitting directly on the paragraph beneath them, which reads as
   cramped in a design whose whole argument is unhurriedness. */
h2 + p, h2 + .lede-sm, h3 + p { margin-top: 1rem; }
.sub + .cards { margin-top: 2.2rem; }

.fig { margin: 0; }
.fig img { width: 100%; border-radius: var(--r); }
.portrait img { max-height: 620px; object-fit: cover; }

/* ── treatment cards ────────────────────────────────────────────────────── */
.cards { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
/* auto-fit: three treatments became four when pregnancy massage was added,
   and it should not need a rewrite the next time that changes. */
.cards { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.8rem 1.6rem;
}
.card h3 { margin-bottom: .6rem; }
.card p { font-size: .97rem; }
.price { margin-top: 1.1rem; font-weight: 600; color: var(--clay-dk); }

/*
 * Anything still awaiting Yamin is marked, not disguised. A placeholder that
 * looks like finished copy is how invented prices reach a live site.
 */
[data-tbc] > span,
.price [data-tbc],
dd[data-tbc] {
  background: rgba(165,97,60,.11);
  box-shadow: 0 0 0 1px rgba(165,97,60,.25) inset;
  border-radius: 3px; padding: .05em .35em;
}
.tbc-note { font-style: italic; }

/* ── find us ────────────────────────────────────────────────────────────── */
.facts { margin-top: 1.6rem; }
.facts > div {
  display: grid; grid-template-columns: 7rem 1fr; gap: .8rem;
  padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.13);
}
.facts dt { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); }
.facts dd { margin: 0; }
.sec-dark a { color: #E7B473; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { background: var(--sand); padding: 2.6rem 0 3rem; text-align: center; }
.foot p + p { margin-top: .45rem; }
.foot-brand { font-family: var(--serif); font-size: 1.25rem; color: var(--espresso); }
.foot .fine { margin-top: .8rem; }

/* Gift certificates — a real part of her trade, so it gets a line of its own
   rather than a footnote nobody reads. */
.gift {
  margin-top: 1.6rem; padding: 1.2rem 1.4rem;
  background: var(--white); border-left: 3px solid var(--gold); border-radius: var(--r);
  font-size: .99rem;
}
.gift b { font-family: var(--serif); font-weight: 400; font-size: 1.08rem; color: var(--espresso); }