/* Theme 06: Scandinavian Minimalism.
   Soft white and grey, light oak and sage in small doses, charcoal for actions.
   One family (Albert Sans, drawn in Copenhagen) set light. Rounded shapes, wide margins, one arched window. */

:root {
  /* Re-skin here: the first six colours and the font carry the brand. */
  --paper: #FAFAF9;     /* page: soft neutral white */
  --ink: #2A2E2D;       /* charcoal text and main actions (13.2:1 on paper) */
  --stone: #5C6260;     /* secondary text (6.0:1 on paper) */
  --accent: #C9A97C;    /* light oak: the arch frame, step rings, rules (decorative only) */
  --leaf: #56684F;      /* deep sage: check marks and icons (5.3:1 on mist) */
  --tint: #E6EBE4;      /* pale sage: the contact panel */

  --font: "Albert Sans", "Helvetica Neue", Arial, sans-serif;

  --radius: 22px;       /* photos and cards */
  --radius-lg: 32px;    /* big panels */
  --gut: 20px;          /* side margin */
  --gap: 88px;          /* space between sections */

  /* Supporting neutrals; adjust only if the paper colour changes a lot. */
  --white: #FFFFFF;
  --mist: #F0F1EF;      /* quiet grey band */
  --line: #E1E3E0;      /* hairlines */
  --line-strong: #B9BEBB;
}
@media (min-width: 760px) { :root { --gut: 40px; --gap: 128px; } }
@media (min-width: 1200px) { :root { --gut: 64px; --gap: 168px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; }

.wrap { width: 100%; max-width: 1312px; margin-inline: auto; padding-inline: var(--gut); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 5; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--white); text-decoration: none; }
.skip:focus { top: 12px; }

.demo-bar p {
  padding: 7px 16px;
  background: var(--mist); color: var(--stone);
  font-size: .8125rem; line-height: 1.4; text-align: center;
}

/* Type */
h1 { font-size: clamp(2.75rem, 10.5vw, 5.5rem); line-height: 1.04; letter-spacing: -.03em; }
h2 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: 1.3125rem; line-height: 1.3; font-weight: 400; letter-spacing: -.005em; }
.lede { margin-top: 28px; font-size: 1.1875rem; line-height: 1.65; color: var(--stone); max-width: 30em; }
.intro { margin-top: 20px; color: var(--stone); max-width: 34em; }

/* Pills */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 26px;
  border-radius: 999px; border: 1px solid var(--ink);
  font: 500 1rem/1.2 var(--font); text-decoration: none; text-align: center;
  transition: background-color .2s ease, color .2s ease;
}
.pill-dark { background: var(--ink); color: var(--white); }
.pill-dark:hover { background: color-mix(in srgb, var(--ink) 85%, var(--white)); }
.pill-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.pill-line:hover { border-color: var(--ink); background: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* Brand mark: an arched window, the page's one shape */
.mark { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* ---------- Header ---------- */
.head { background: var(--paper); }
.head-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding-top: 14px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; font-weight: 500; font-size: 1.0625rem; letter-spacing: -.005em; }
.head-cta { display: flex; align-items: center; gap: 8px; grid-row: 1; grid-column: 2; }
.head-tel {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 64px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  font-weight: 500; text-decoration: none;
}
.head-tel .long { display: none; }
.head-btn { display: none; }

.nav {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.nav a {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 2px;
  font-size: .9375rem; color: var(--stone); text-decoration: none;
}
.nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; text-decoration-thickness: 2px; }

@media (min-width: 560px) {
  .head-tel .long { display: inline; }
  .head-tel .short { display: none; }
}
@media (min-width: 1000px) {
  .head-row { grid-template-columns: auto 1fr auto; padding-block: 18px; }
  .head-cta { grid-column: 3; }
  .nav { grid-column: auto; justify-content: center; gap: 36px; margin: 0; border: 0; }
  .nav a { font-size: 1rem; }
  .head-tel { border-color: transparent; }
  .head-btn { display: inline-flex; min-height: 46px; padding: 10px 22px; }
}

/* ---------- Hero with the arched window ---------- */
.hero {
  display: grid;
  gap: 56px;
  padding-top: 48px;
}
.hero-text h1 { max-width: 9em; }
.arch { margin: 0; padding: 12px; }
.arch img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* semicircular head: horizontal radius half the width, vertical radius 40% of a 4:5 height */
  border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
  background: var(--mist);
  /* the window frame: a thin oak line that follows the arch */
  outline: 1.5px solid var(--accent);
  outline-offset: 10px;
}
.arch figcaption { margin-top: 24px; font-size: .9375rem; color: var(--stone); text-align: center; }

/* The one ambient moment: the window fills with daylight on load */
@media (prefers-reduced-motion: no-preference) {
  .arch img { animation: daylight 1.8s cubic-bezier(.2, .7, .2, 1) .1s both; }
}
@keyframes daylight {
  from { opacity: 0; transform: scale(1.03); filter: brightness(1.08); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(48px, 7vw, 120px);
    padding-top: 72px;
  }
}

/* ---------- Trust band ---------- */
.trust { margin-top: 88px; background: var(--white); border-radius: var(--radius); }
.stats { display: grid; grid-template-columns: 1fr 1fr; }
.stats li { display: flex; flex-direction: column; gap: 4px; padding: 22px 20px; border-bottom: 1px solid var(--line); }
.stats li:nth-child(odd) { border-right: 1px solid var(--line); }
.stats b { font-weight: 400; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.01em; }
.stats li:first-child b { font-size: 2rem; font-weight: 300; line-height: 1.05; }
.stats span { font-size: .9375rem; line-height: 1.45; color: var(--stone); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding: 20px; }
.badges li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 12px; border-radius: 999px;
  background: var(--mist); font-size: .9375rem; font-weight: 500;
}
.badges svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--leaf); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1000px) {
  .trust { margin-top: 120px; border-radius: var(--radius-lg); }
  .stats { grid-template-columns: repeat(4, 1fr); padding: 12px 0; }
  .stats li { padding: 24px 32px; border-bottom: 0; border-right: 1px solid var(--line); }
  .stats li:last-child { border-right: 0; }
  .badges { justify-content: flex-start; padding: 20px 32px 24px; border-top: 1px solid var(--line); }
}

/* ---------- Services and prices ---------- */
.services { margin-top: var(--gap); display: grid; gap: 48px; }
.svc-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; border-radius: var(--radius); }
.price-list { margin-top: 40px; border-top: 1px solid var(--line); }
.price-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline;
  padding: 22px 0 24px; border-bottom: 1px solid var(--line);
}
.price { font-size: 1.375rem; font-weight: 300; letter-spacing: -.01em; white-space: nowrap; }
.price small { font-size: .875rem; color: var(--stone); font-weight: 400; letter-spacing: 0; }
.price-list .desc { grid-column: 1 / -1; margin-top: 6px; color: var(--stone); max-width: 32em; }
.fineprint { margin-top: 24px; font-size: .9375rem; color: var(--stone); max-width: 36em; }
@media (min-width: 900px) {
  .services { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 7vw, 120px); align-items: start; }
  .svc-media { position: sticky; top: 40px; }
  .svc-media img { aspect-ratio: 4 / 5; }
}

/* ---------- Checklist ---------- */
.check-sec { margin-top: var(--gap); padding-block: clamp(72px, 9vw, 128px); background: var(--mist); }
.sec-head { max-width: 40rem; }
.check-head { display: grid; gap: 32px; align-items: end; }
.check-img { width: 100%; max-width: 220px; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% var(--radius) var(--radius) / 50% 50% var(--radius) var(--radius); }
.checklist { margin-top: 56px; display: grid; gap: 40px; }
.ck-group h3 { padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.ck-group ul { margin-top: 8px; }
.ck-group li { position: relative; padding: 9px 0 9px 32px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.ck-group li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 12px; height: 7px;
  border-left: 1.75px solid var(--leaf); border-bottom: 1.75px solid var(--leaf);
  transform: rotate(-45deg);
}
.ck-extra { padding: 24px; margin-inline: -4px; border-radius: var(--radius); background: var(--white); }
.ck-extra li:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .check-head { grid-template-columns: minmax(0, 1fr) auto; }
  .check-img { width: 200px; }
  .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
}
@media (min-width: 1100px) {
  .check-img { width: 240px; }
  .checklist { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; align-items: start; }
  .ck-extra { margin: -24px 0 0; }
}

/* ---------- How booking works ---------- */
.booking { margin-top: var(--gap); }
.steps { counter-reset: s; margin-top: 56px; display: grid; gap: 40px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; }
.steps li::before {
  content: counter(s);
  grid-row: 1 / 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--accent);
  font-weight: 400; font-size: 1.0625rem; color: var(--ink);
}
.steps h3 { padding-top: 6px; }
.steps p { margin-top: 6px; color: var(--stone); max-width: 26em; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; } }
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
  .steps li { grid-template-columns: 1fr; }
  .steps li::before { grid-row: auto; margin-bottom: 22px; }
  .steps h3 { padding-top: 0; }
}

/* ---------- Recent organizing ---------- */
.work { margin-top: var(--gap); display: grid; gap: 40px; }
.work-rail { display: contents; }
.work img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.work figcaption { margin-top: 12px; font-size: .9375rem; color: var(--stone); }
@media (min-width: 900px) {
  .work { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(32px, 5vw, 80px); row-gap: 48px; align-items: end; }
  .work-head { grid-column: 1; grid-row: 1; }
  .work .w1 { grid-column: 1; grid-row: 2; }
  .work .w2 { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 96px; }
  .work .w2 img { aspect-ratio: 4 / 5; }
}

/* ---------- Reviews ---------- */
.reviews { margin-top: var(--gap); }
.rv-top { display: grid; gap: 48px; }
.rv-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% 50%; border-radius: var(--radius); }
.sources { margin-top: 12px; color: var(--stone); }
.quote-big { margin-top: 44px; padding-top: 32px; border-top: 2px solid var(--accent); max-width: 30em; }
.quote-big blockquote { font-size: clamp(1.375rem, 3.2vw, 1.875rem); line-height: 1.4; font-weight: 300; letter-spacing: -.01em; }
.quote-big figcaption, .quotes figcaption { margin-top: 18px; display: flex; flex-direction: column; color: var(--stone); font-size: .9375rem; }
.quote-big figcaption small, .quotes figcaption small { font-size: .8125rem; }
.quote-big blockquote p::before, .quotes blockquote p::before { content: "\201C"; }
.quote-big blockquote p::after, .quotes blockquote p::after { content: "\201D"; }
.quotes { margin-top: 72px; display: grid; gap: 40px; }
.quotes figure { padding-top: 24px; border-top: 1px solid var(--line); }
.quotes blockquote { font-size: 1.125rem; line-height: 1.6; }
@media (min-width: 900px) {
  .rv-top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 7vw, 120px); align-items: center; }
  .rv-photo img { aspect-ratio: 4 / 5; }
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 96px; padding-left: calc(5 / 11 * 100% + clamp(48px, 7vw, 120px) * 6 / 11); }
}

/* ---------- About ---------- */
.about { margin-top: var(--gap); display: grid; gap: 48px; }
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.sign { margin-top: 28px; padding-top: 16px; border-top: 2px solid var(--accent); display: inline-block; font-weight: 500; }
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(48px, 7vw, 120px); align-items: center; }
}

/* ---------- Contact ---------- */
.contact { margin-top: var(--gap); }
.panel {
  display: grid; gap: 48px;
  padding: 48px 24px;
  border-radius: var(--radius-lg);
  background: var(--tint);
}
.panel .intro, .area p { color: color-mix(in srgb, var(--ink) 82%, var(--tint)); }
.area { padding-top: 32px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.area h3 { font-size: 1rem; font-weight: 500; }
.area p { margin-top: 4px; max-width: 26em; }
.area p + h3 { margin-top: 20px; }
@media (min-width: 760px) { .panel { padding: 72px 64px; } }
@media (min-width: 1000px) {
  .panel { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 96px; align-items: end; padding: 96px; }
  .area { border-top: 0; padding-top: 0; padding-left: 40px; border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
}

/* ---------- Footer ---------- */
.foot { margin-top: var(--gap); padding-block: 64px 40px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; gap: 36px; }
.foot h2 { font-size: .9375rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--ink); margin-bottom: 8px; }
.foot p, .foot address { color: var(--stone); font-style: normal; font-size: .9375rem; line-height: 1.7; }
.foot .brand { color: var(--ink); min-height: 0; }
.foot a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--accent); overflow-wrap: anywhere; }
.foot-links { display: grid; justify-items: start; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-brand p + p { margin-top: 12px; max-width: 24em; }
.fine { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--stone); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; } }

/* ---------- Phones (Oct 8 2026): strict phone checks (column >= 78%, <= 10 screens) ----------
   Step text runs the full column under its numeral; the contact panel's side padding is trimmed; the checklist
   groups, the organizing photos and the two short reviews become swipe rails; the round towel photo and the
   review and brush photos (decorative repeats of the palette) are held back on phones; sections sit a little closer. */
@media (max-width: 759.98px) {
  :root { --gap: 64px; }
  .steps { gap: 32px; }
  .steps li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .steps li::before { grid-row: 1; }
  .steps h3 { padding-top: 0; }
  .steps p { grid-column: 1 / -1; max-width: none; margin-top: 10px; }
  .panel { padding: 44px 16px; }
  .panel .intro, .area p { max-width: none; }

  .checklist, .work-rail, .quotes {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut);
  }
  .checklist::-webkit-scrollbar, .work-rail::-webkit-scrollbar, .quotes::-webkit-scrollbar { display: none; }
  .checklist { gap: 16px; margin-top: 40px; align-items: start; }
  .ck-group { flex: 0 0 84%; scroll-snap-align: start; }
  .ck-extra { margin-inline: 0; }
  .check-head .check-img, .rv-photo, .about-photo { display: none; }
  .check-sec { padding-block: 64px; }

  .work { gap: 28px; }
  .work-rail { gap: 14px; }
  .work-rail figure { flex: 0 0 86%; scroll-snap-align: start; }

  .rv-top { gap: 0; }
  .quote-big { margin-top: 32px; }
  .quotes { gap: 16px; margin-top: 48px; }
  .quotes figure { flex: 0 0 84%; scroll-snap-align: start; }

  .foot { padding-block: 48px 32px; }
  .foot-grid { grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 28px 20px; }
  .foot-brand, .foot-grid > div:nth-child(3) { grid-column: 1 / -1; }
  .fine { margin-top: 32px; }
}

/* One Call on the entry screen (Ethan, Oct 7 2026; applied Oct 8). Extra Calls are held back, not deleted: they
   join after the first scroll (a CSS scroll timeline); where scroll timelines are missing they stay hidden and the
   contact block and footer carry Call. */
@keyframes call-held-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@supports (animation-timeline: scroll()) {
  .hero a[href^="tel:"] { animation: call-held-in linear both; animation-timeline: scroll(root); animation-range: 40px 140px; }
  @media (prefers-reduced-motion: reduce) { .hero a[href^="tel:"] { animation: call-held-in steps(1, end) both !important; animation-timeline: scroll(root) !important; animation-range: 40px 140px !important; } }
}
@supports not (animation-timeline: scroll()) { .hero a[href^="tel:"] { display: none; } }