/* ==========================================================================
   The Marketing Outlet Group
   One stylesheet. Mobile first. Tokens from the spec, §4.
   ========================================================================== */

/* --- Fonts -----------------------------------------------------------------
   Self-hosted, per §5 — never Google Fonts. Two weights, no more.
   The files aren't in the repo yet, so these rules are commented out to keep the
   page from firing two 404s on every load. Drop InterTight-Regular.woff2 and
   InterTight-SemiBold.woff2 into /fonts, uncomment, and they take over from the
   system stack in --font below.

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*/

/* --- Tokens --------------------------------------------------------------- */
:root {
  --teal: #165C7D;
  --teal-deep: #0E3D54;
  --teal-tint: #E8F1F5;
  --ink: #14232B;
  --ink-soft: #5A6B74;
  --paper: #FBFAF8;
  --line: #DDE4E8;
  --accent: #E0A03C;        /* non-text only */
  --accent-text: #9A5F0C;   /* the accent when it is actual text */

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --radius: 10px;
  --shadow: 0 2px 4px rgba(20, 35, 43, .04), 0 12px 32px rgba(20, 35, 43, .08);

  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --wrap: 1120px;
  --gutter: 20px;
  --section-y: 56px;
}

@media (min-width: 760px) {
  :root { --gutter: 32px; --section-y: 96px; }
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.25rem, 6vw, 4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; }
p  { margin: 0; }

a { color: var(--teal); }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal);
  color: #fff;
  padding: var(--s3) var(--s4);
  z-index: 100;
}
.skip:focus { left: var(--s3); top: var(--s3); }

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow { max-width: 760px; }

/* scroll-margin keeps the sticky nav from sitting on top of a section heading
   when someone taps an anchor link. */
section { padding-block: var(--section-y); scroll-margin-top: 64px; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 14px var(--s5);
  border-radius: var(--radius);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-deep); }
.btn-ghost { background: transparent; color: var(--teal); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); }
.btn-sm { padding: 10px var(--s4); font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

/* --- Nav ------------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 248, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--s3) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
}
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-word { font-size: 1rem; white-space: nowrap; }

.nav-links {
  display: none;
  margin-left: auto;
  gap: var(--s5);
}
.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 1rem;
}
.nav-links a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.nav-login {
  display: none;
  color: var(--ink-soft);
  font-size: 0.875rem;
  text-decoration: none;
}
.nav-login:hover { color: var(--teal); text-decoration: underline; }

@media (max-width: 479px) {
  .brand-word { display: none; }
}
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-right { margin-left: 0; }
  .nav-login { display: inline; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-block: var(--s7) var(--s8); }

.hero-grid { display: grid; gap: var(--s7); align-items: center; }

.hero-copy .sub {
  margin-top: var(--s5);
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 34ch;
}
.cta-row {
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.cta-row .btn { flex: 1 1 auto; }

.trust {
  margin-top: var(--s4);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  font-weight: 600;
}

@media (min-width: 900px) {
  .hero { padding-block: var(--s9); }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: var(--s8); }
  .hero-copy .sub { font-size: 1.25rem; max-width: 40ch; }
  .cta-row .btn { flex: 0 0 auto; }
}

/* Phone frame + sample post ------------------------------------------------ */
.hero-visual { display: flex; justify-content: center; }

.phone {
  width: 260px;
  max-width: 100%;
  border: 10px solid var(--ink);
  border-radius: 34px;
  background: var(--ink);
  box-shadow: var(--shadow);
}
.phone-screen {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  padding-bottom: var(--s3);
}
.phone-caption {
  padding: var(--s3) var(--s3) 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.post {
  position: relative;
  aspect-ratio: 1 / 1;
  /* top padding clears the Sample badge, so copy never runs underneath it */
  padding: 44px var(--s4) var(--s4);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s1);
  background: var(--teal);
  color: #fff;
  overflow: hidden;
}
.post-badge {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.post-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}
.post-head {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.post-foot {
  font-size: 0.8125rem;
  opacity: .8;
  margin-top: var(--s1);
}

/* Each sample gets its own ground so the grid doesn't read as one template. */
.post-salon    { background: var(--teal-deep); }
.post-barber   { background: var(--ink); }
.post-gym      { background: var(--accent); color: var(--ink); }
.post-gym .post-badge { background: rgba(20, 35, 43, .88); color: #fff; }
.post-cafe     { background: var(--teal-tint); color: var(--ink); }
.post-cafe .post-badge { background: rgba(20, 35, 43, .88); color: #fff; }
.post-boutique { background: #7A3B52; }
.post-studio   { background: #2C5E4F; }
.post-kitchen  { background: #8A4A1E; }

/* --- Problem -------------------------------------------------------------- */
.problem { background: var(--teal-tint); }

.beat {
  font-size: clamp(1.375rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}
.beat-note {
  margin-top: var(--s6);
  color: var(--ink-soft);
  max-width: 62ch;
}
.thesis {
  margin-top: var(--s5);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: 34ch;
  padding-top: var(--s5);
  border-top: 3px solid var(--accent);
  display: inline-block;
}

/* --- Services ------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: var(--s7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
}
.steps li {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.step-word {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--teal);
}
.step-line { color: var(--ink-soft); }

@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .steps { grid-template-columns: repeat(6, 1fr); gap: var(--s4); } }

/* --- Who ------------------------------------------------------------------ */
.who { background: var(--teal-tint); }

.labels {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
}
.labels li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: var(--s2) var(--s4);
  font-weight: 600;
  font-size: 0.9375rem;
}
.who-line { margin-top: var(--s5); color: var(--ink-soft); max-width: 60ch; }

/* --- Pricing -------------------------------------------------------------- */
.cards {
  margin-top: var(--s7);
  display: grid;
  gap: var(--s5);
}
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
}
.card h3 { font-size: 1.125rem; color: var(--ink-soft); font-weight: 600; }
.price { margin-top: var(--s2); display: flex; align-items: baseline; gap: var(--s2); }
.amount { font-size: 3rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.per { color: var(--ink-soft); font-size: 1rem; }

.ticks { list-style: none; margin: var(--s5) 0 var(--s6); padding: 0; display: grid; gap: var(--s3); }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--teal);
  border-bottom: 2.5px solid var(--teal);
  transform: rotate(-45deg);
}
.card .btn { margin-top: auto; }

.steer { margin-top: var(--s5); color: var(--ink-soft); font-size: 0.9375rem; }
.addon { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.fine { margin-top: var(--s3); font-size: 0.875rem; color: var(--ink-soft); }
.fine-label { font-weight: 600; color: var(--ink); }

.terms-line { margin-top: var(--s6); font-size: 1.125rem; font-weight: 600; }
.compare { margin-top: var(--s3); color: var(--accent-text); max-width: 60ch; }

/* --- How ------------------------------------------------------------------ */
.how { background: var(--teal-tint); }

.how-steps {
  list-style: none;
  counter-reset: step;
  margin: var(--s7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s6);
}
@media (min-width: 860px) { .how-steps { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }

.how-steps li { counter-increment: step; }
.how-steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  margin-bottom: var(--s4);
}
.how-steps h3 { margin-bottom: var(--s2); }
.how-steps p { color: var(--ink-soft); }

/* --- Work ----------------------------------------------------------------- */
.work-note { margin-top: var(--s4); color: var(--ink-soft); max-width: 60ch; }

.grid {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(4, 1fr); } }

/* 4:5 portrait, the shape a feed post actually is, and tall enough that two
   lines of headline plus the shop name never crowd the badge. */
.grid .post { border-radius: var(--radius); aspect-ratio: 4 / 5; }
.grid .post-head { font-size: 1rem; }
.grid .post-kicker { font-size: 0.6875rem; }
.grid .post-foot { font-size: 0.75rem; }

/* --- About ---------------------------------------------------------------- */
.about { background: var(--teal-tint); }

.founders { margin: var(--s7) 0 0; display: grid; gap: var(--s6); }
@media (min-width: 860px) { .founders { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s8); } }

.photo-slot {
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.people li { display: flex; flex-direction: column; }
.people strong { font-weight: 600; }
.people span { color: var(--ink-soft); font-size: 0.9375rem; }

.about-copy { margin-top: var(--s7); display: grid; gap: var(--s4); max-width: 68ch; }

/* --- FAQ ------------------------------------------------------------------ */
.faq h2 { margin-bottom: var(--s6); }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s4) 40px var(--s4) 0;
  font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 0 var(--s5); color: var(--ink-soft); max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* --- Book ----------------------------------------------------------------- */
.book { background: var(--teal); color: #fff; }
.book h2 { max-width: 20ch; }
.book-sub { margin-top: var(--s4); max-width: 54ch; color: rgba(255, 255, 255, .88); }

#cal-embed {
  margin-top: var(--s7);
  background: #fff;
  border-radius: var(--radius);
  min-height: 520px;
  overflow: hidden;
}
/* Before the embed loads, the block still reads as a box rather than a hole. */
#cal-embed:empty::after {
  content: "Loading the calendar…";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 520px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* If the calendar can't load at all, collapse it rather than leave a white slab,
   and send the visitor to the phone and email underneath. */
/* !important because Cal sets inline styles on the element it injects, and an
   inline style beats anything declared here without it. */
#cal-embed.is-unavailable {
  min-height: 0 !important;
  height: auto !important;
  background: transparent;
}
#cal-embed.is-unavailable > * { display: none !important; }
#cal-embed.is-unavailable::after {
  content: "The calendar isn’t loading right now. Call or email us and we’ll put the fifteen minutes in ourselves.";
  display: block;
  color: rgba(255, 255, 255, .88);
  max-width: 54ch;
}

.book-fallback { margin-top: var(--s6); }
.book-fallback p { color: rgba(255, 255, 255, .88); }
.book-contact { margin-top: var(--s2); font-size: 1.125rem; font-weight: 600; }
.book-contact a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* --- Footer --------------------------------------------------------------- */
.footer {
  background: var(--teal-deep);
  color: rgba(255, 255, 255, .88);
  padding-block: var(--s7);
  font-size: 0.9375rem;
}
.footer-inner { display: grid; gap: var(--s3); }
.footer-brand { color: #fff; font-weight: 600; }
.footer a { color: #fff; }
.footer-legal { color: rgba(255, 255, 255, .7); font-size: 0.875rem; margin-top: var(--s3); }

/* --- Motion --------------------------------------------------------------- */
.reveal > * { opacity: 1; }

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Legal pages ---------------------------------------------------------- */
.doc { padding-block: var(--s8); }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); }
.doc h2 { font-size: 1.375rem; margin-top: var(--s7); }
.doc p, .doc li { max-width: 68ch; color: var(--ink); }
.doc p { margin-top: var(--s4); }
.doc ul { margin-top: var(--s4); padding-left: 1.2em; }
.doc li { margin-bottom: var(--s2); }
.doc .updated { color: var(--ink-soft); font-size: 0.9375rem; }
.doc .back { display: inline-block; margin-top: var(--s7); font-weight: 600; }