/* 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 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; } }