/* ============================================================
   Marlowe Hair Studio — concept site
   Fictional salon, Fort Worth.
   Warm blush ground, crimson accent, near-black panels.
   Standalone: shares nothing with the other concepts except
   the motion tokens in /work/_motion.css.
   ============================================================ */

:root{
  --blush:    #F7F0EA;   /* page ground, warm not pink */
  --blush-2:  #EFE5DC;   /* tinted sections */
  --paper:    #FFFFFF;
  --ink:      #1C1614;
  --ink-2:    #5A4E48;
  --mute:     #8A7C74;
  --line:     #E2D6CB;

  --red:      #B0302E;   /* the accent — buttons, chips, prices */
  --red-dk:   #8E2523;
  --sepia:    #3A2119;   /* hero overlay, dark panels */
  --sepia-2:  #241310;

  --display:  'Marcellus', Georgia, serif;   /* logo only */
  --sans:     'Outfit', system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --gut: clamp(18px, 4.5vw, 40px);
  --r: 20px;
  --r-sm: 12px;
  --pill: 999px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

/* Native controls, scrollbars and form fields follow the page, not the OS. */
html{ color-scheme: light; }

/* Removes the ~300ms wait the browser holds every tap for, in case it
   turns out to be a double-tap zoom. Straight perceived-speed win. */
a, button, input, select, textarea, label, summary{ touch-action: manipulation; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--blush); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

.skip{ position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--ink); color:#fff; padding:12px 18px; }
.skip:focus{ left:0; }
:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--red); outline-offset:2px; border-radius:6px;
}

h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.08; }

.eyebrow, .k{
  font-size:.74rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red); margin:0 0 12px;
}
.ul{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.ul:hover{ border-bottom-color:var(--red); }

/* ---------- concept banner ---------- */
.concept{ background:var(--sepia); color:#F3E7E0; }
.concept-in{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  padding-top:10px; padding-bottom:10px; }
.concept-tag{
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:3px 10px; border-radius:var(--pill); flex:none;
}
.concept p{ margin:0; font-size:.85rem; line-height:1.5; }
.concept a{ color:#fff; }

/* ---------- header ---------- */
.site-head{ position:sticky; top:0; z-index:100;
  background:rgba(247,240,234,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); }
.head-in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:16px; padding-top:14px; padding-bottom:14px; }
.brand{
  font-family:var(--display); font-size:1.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  text-align:center; white-space:nowrap;
}
.nav{ display:flex; gap:24px; }
.nav a{ font-size:.94rem; font-weight:500; color:var(--ink-2);
  text-decoration:none; padding:6px 0; }
.nav a:hover{ color:var(--red); }
.head-cta{ display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.tel{ font-weight:600; font-size:.95rem; color:var(--ink); text-decoration:none;
  white-space:nowrap; }
.tel:hover{ color:var(--red); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:.94rem;
  padding:12px 24px; min-height:46px; border:1px solid transparent;
  border-radius:var(--pill); text-decoration:none; cursor:pointer;
  transition:background var(--dur-tap) var(--ease-snap),
             color var(--dur-tap) var(--ease-snap),
             transform var(--dur-hover) var(--ease);
}
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-dk); transform:translateY(-1px); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; transform:translateY(-1px); }
.btn-clear{ background:rgba(255,255,255,.16); color:#fff;
  border-color:rgba(255,255,255,.42); backdrop-filter:blur(6px); }
.btn-clear:hover{ background:rgba(255,255,255,.26); }
.btn-lg{ padding:15px 30px; min-height:54px; font-size:1rem; }
.btn-block{ width:100%; }

/* ---------- hero ---------- */
.hero{ padding:0 var(--gut) clamp(20px,3vw,32px); }
.hero-frame{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:clamp(18px, 2.6vw, 34px);
  max-width:var(--wrap); margin:0 auto;
}
.hero-img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:64% center; z-index:-2; }
.hero-shade{ position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(96deg, rgba(36,19,16,.92) 0%, rgba(36,19,16,.76) 40%, rgba(36,19,16,.24) 74%),
    linear-gradient(to top, rgba(36,19,16,.62), transparent 50%); }
.hero-in{ padding:clamp(52px,8vw,96px) clamp(24px,5vw,64px); color:#fff; }
.hero .eyebrow{ color:#F0B9B0; }
.hero h1{ font-size:clamp(2.4rem,6vw,4.2rem); margin:0 0 20px; text-wrap:balance; }
.hero .lede{ font-size:clamp(1rem,1.9vw,1.14rem); color:rgba(255,255,255,.86);
  max-width:40ch; margin:0 0 30px; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; }

.hero-cards{ display:grid; gap:12px; grid-template-columns:1fr;
  margin-top:clamp(34px,5vw,54px); max-width:560px; }
@media (min-width:620px){ .hero-cards{ grid-template-columns:1fr 1fr; } }
.hcard{
  background:var(--paper); color:var(--ink); text-decoration:none;
  border-radius:var(--r-sm); padding:16px 18px;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:2px 12px;
  transition:transform var(--dur-hover) var(--ease);
}
.hcard:hover{ transform:translateY(-3px); }
.hcard-k{ font-size:.76rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); grid-column:1; }
.hcard-v{ grid-column:1; font-weight:500; font-size:.98rem; }
.hcard-go{ grid-row:1 / span 2; grid-column:2;
  width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.hcard-dark{ background:var(--sepia); color:#fff; }
.hcard-dark .hcard-k{ color:#F0B9B0; }
.hcard-dark .hcard-go{ background:var(--red); }

/* ---------- sections ---------- */
.sec{ padding:clamp(60px,8vw,104px) 0; }
.sec-tint{ background:var(--blush-2); }
.sec-head{ max-width:60ch; margin:0 0 clamp(32px,4.5vw,50px); }
.sec-head-row{ max-width:none; display:flex; gap:24px; flex-wrap:wrap;
  align-items:flex-end; justify-content:space-between; }
.sec-head-row > div{ max-width:56ch; }
.sec h2{ font-size:clamp(1.9rem,4.4vw,3rem); text-wrap:balance; }
.sec-lede{ color:var(--ink-2); margin:14px 0 0; }

/* ---------- services ---------- */
.svc-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:760px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc{ background:var(--paper); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); display:flex; flex-direction:column; }
.svc-img{ position:relative; }
.svc-img img{ width:100%; height:260px; object-fit:cover;
  transition:transform var(--dur-move) var(--ease); }
.svc:hover .svc-img img{ transform:scale(1.04); }
.svc-img{ overflow:hidden; }
.chip{
  position:absolute; left:14px; top:14px;
  background:var(--paper); color:var(--ink);
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  padding:6px 14px; border-radius:var(--pill);
}
.prices{ list-style:none; margin:0; padding:18px 20px 22px;
  display:flex; flex-direction:column; gap:12px; }
.prices li{ display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; border-bottom:1px solid var(--line); padding-bottom:11px; }
.prices li:last-child{ border-bottom:0; padding-bottom:0; }
.prices span{ color:var(--ink-2); font-size:.98rem; }
.prices b{ font-weight:600; color:var(--red); white-space:nowrap; }
.svc-note{ margin:clamp(26px,3.5vw,38px) 0 0; color:var(--ink-2);
  max-width:66ch; font-size:.98rem; }

/* ---------- hours + booking ---------- */
.book-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:860px){ .book-grid{ grid-template-columns:.85fr 1.15fr; } }
.card{ background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(22px,3vw,32px); }
.card h3{ font-size:1.34rem; margin-bottom:18px; }
.hours{ list-style:none; margin:0 0 24px; padding:0;
  display:flex; flex-direction:column; gap:12px; }
.hours li{ display:flex; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line); padding-bottom:11px; }
.hours li:last-child{ border-bottom:0; }
.hours span{ color:var(--ink-2); }
.hours b{ font-weight:600; }
.hours b.off{ color:var(--mute); font-weight:500; }
.hours-foot{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.hours-foot p{ margin:0 0 4px; color:var(--ink-2); }
.tel-big{ font-size:1.36rem; font-weight:600; color:var(--ink); text-decoration:none; }
.tel-big:hover{ color:var(--red); }

.book-card{ background:var(--sepia); border-color:transparent; color:#fff;
  display:flex; flex-direction:column; gap:14px; }
.book-card h3{ color:#fff; margin-bottom:2px; }
.book-sub{ margin:0 0 6px; color:rgba(255,255,255,.72); font-size:.95rem; }
.f{ display:flex; flex-direction:column; gap:6px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.book-card label{ font-size:.82rem; font-weight:500; color:rgba(255,255,255,.78); }
.book-card input, .book-card select{
  font-family:var(--sans); font-size:1rem; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm); padding:12px 14px; min-height:48px; width:100%;
}
.book-card option{ color:var(--ink); }
.b-note{ margin:0; text-align:center; font-size:.83rem; color:rgba(255,255,255,.6); }
.b-note.is-loud{ color:#F0B9B0; }
.book-card .btn-dark{ background:#fff; color:var(--ink); }
.book-card .btn-dark:hover{ background:var(--blush); }

/* ---------- work ---------- */
.work-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:720px){ .work-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.work-grid figure{ margin:0; border-radius:var(--r); overflow:hidden;
  background:var(--paper); border:1px solid var(--line); }
.work-grid img{ width:100%; height:330px; object-fit:cover;
  transition:transform var(--dur-move) var(--ease); }
.work-grid figure:hover img{ transform:scale(1.03); }
.w-tall img{ height:420px; }
.work-grid figcaption{ padding:14px 18px 18px; font-weight:500; }

/* ---------- room band ---------- */
.room{ position:relative; isolation:isolate; overflow:hidden; color:#fff; }
.room-img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2; }
.room::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(92deg, rgba(36,19,16,.90) 0%, rgba(36,19,16,.66) 52%, rgba(36,19,16,.30) 100%); }
.room-in{ padding:clamp(64px,9vw,110px) var(--gut); }
.room-copy{ max-width:44ch; }
.room h2{ font-size:clamp(1.9rem,4.4vw,3rem); margin-bottom:16px; }
.room p{ color:rgba(255,255,255,.86); margin:0; }
.room .eyebrow{ color:#F0B9B0; }

/* ---------- team ---------- */
.team-grid{ display:grid; gap:clamp(28px,4.5vw,56px); grid-template-columns:1fr;
  align-items:center; }
@media (min-width:860px){ .team-grid{ grid-template-columns:1fr 1fr; } }
.team-img{ margin:0; border-radius:var(--r); overflow:hidden; }
.team-img img{ width:100%; height:auto; }
.team-copy h2{ font-size:clamp(1.8rem,4vw,2.7rem); margin-bottom:16px; }
.team-copy > p{ color:var(--ink-2); margin:0 0 26px; max-width:42ch; }
.people{ list-style:none; margin:0 0 30px; padding:0;
  display:flex; flex-direction:column; gap:14px; }
.people li{ display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--line); padding-top:14px; }
.people b{ font-weight:600; }
.people span{ color:var(--ink-2); font-size:.95rem; }

/* ---------- footer ---------- */
.foot{ background:var(--sepia); color:#fff; padding:clamp(46px,6vw,72px) 0 30px; }
.foot-in{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; }
.brand-foot{ font-family:var(--display); font-size:1.7rem; letter-spacing:.2em;
  text-transform:uppercase; margin:0; }
.foot-cols{ display:flex; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
.foot-cols .k{ color:#F0B9B0; }
.foot-cols p{ margin:0 0 5px; color:rgba(255,255,255,.78); font-size:.95rem; }
.foot-cols a{ color:rgba(255,255,255,.78); text-decoration:none; }
.foot-cols a:hover{ color:#fff; }
.foot-legal{ margin-top:34px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16); }
.foot-legal p{ margin:0; font-size:.82rem; line-height:1.6;
  color:rgba(255,255,255,.6); max-width:78ch; }
.foot-legal strong{ color:rgba(255,255,255,.84); }
.foot-legal a{ color:#F0B9B0; }

/* ---------- narrow ---------- */
@media (max-width:900px){
  .nav-l{ display:none; }
  .head-in{ grid-template-columns:auto 1fr; }
  .brand{ text-align:left; }
}
@media (max-width:560px){
  .tel{ display:none; }
  .f2{ grid-template-columns:1fr; }
  .hero-btns .btn{ width:100%; }
  .work-grid img, .w-tall img{ height:260px; }
}

/* ============================================================
   Motion — hidden states scoped to .js so the page is complete
   without scripting. .motion-done is the hard release.
   ============================================================ */
.js:not(.no-motion) .sec-head,
.js:not(.no-motion) .svc,
.js:not(.no-motion) .svc-note,
.js:not(.no-motion) .card,
.js:not(.no-motion) .work-grid figure,
.js:not(.no-motion) .room-copy,
.js:not(.no-motion) .team-img,
.js:not(.no-motion) .team-copy,
.js:not(.no-motion) .foot-in{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease),
             transform var(--dur-reveal) var(--ease);
}
.js:not(.no-motion) .is-in{ opacity:1; transform:none; }

.js.motion-done .sec-head,
.js.motion-done .svc,
.js.motion-done .svc-note,
.js.motion-done .card,
.js.motion-done .work-grid figure,
.js.motion-done .room-copy,
.js.motion-done .team-img,
.js.motion-done .team-copy,
.js.motion-done .foot-in{
  opacity:1 !important; transform:none !important;
}

@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.js:not(.no-motion) .hero .eyebrow,
.js:not(.no-motion) .hero h1,
.js:not(.no-motion) .hero .lede,
.js:not(.no-motion) .hero-btns,
.js:not(.no-motion) .hero-cards{
  animation:rise calc(var(--dur-reveal) * 1.2) var(--ease) both;
}
.js:not(.no-motion) .hero .eyebrow{ animation-delay:.05s; }
.js:not(.no-motion) .hero h1      { animation-delay:.15s; }
.js:not(.no-motion) .hero .lede   { animation-delay:.27s; }
.js:not(.no-motion) .hero-btns    { animation-delay:.37s; }
.js:not(.no-motion) .hero-cards   { animation-delay:.47s; }

@media (prefers-reduced-motion: reduce){
  .js .sec-head, .js .svc, .js .svc-note, .js .card, .js .work-grid figure,
  .js .room-copy, .js .team-img, .js .team-copy, .js .foot-in{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .js .hero .eyebrow, .js .hero h1, .js .hero .lede,
  .js .hero-btns, .js .hero-cards{ animation:none !important; }
}