/* ==========================================================================
   The Aly Touch — site styles

   Palette and type are taken from the logo: navy lettering and a copper rule
   on ivory. Ivory/beige/white dominate; copper is an accent only.
   ========================================================================== */

:root {
  /* ---- brand tokens ---- */
  --ivory:      #fffaf2;
  --beige:      #f4eadf;
  --white:      #ffffff;
  --ink:        #17202b;   /* dark ink — body text */
  --navy:       #0b2341;   /* headings, footer */
  --navy-deep:  #07182d;
  --copper:     #b97845;   /* accent only */
  --copper-dk:  #8f5326;   /* accessible copper for text/links on light */

  /* ---- derived surface tokens ---- */
  --paper:      var(--ivory);
  --surface:    var(--white);
  --wash:       var(--beige);
  --ink-soft:   #4a5563;
  --line:       #e5d8c8;
  --line-soft:  #efe5d8;

  --display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --radius:     14px;
  --radius-lg:  26px;
  --shadow:     0 1px 2px rgba(11,35,65,.04), 0 10px 26px -18px rgba(11,35,65,.20);
  --shadow-lg:  0 4px 10px rgba(11,35,65,.06), 0 26px 50px -30px rgba(11,35,65,.26);
  --maxw:       1180px;
  --gutter:     clamp(20px, 5vw, 44px);
  --focus:      0 0 0 3px var(--ivory), 0 0 0 6px var(--copper-dk);
  --focus-ring: var(--copper-dk);

  /* Aliases. The services and quote-flow rules were written against these
     names; without them every property using one was silently dropped. */
  --muted:      var(--ink-soft);
  --cream:      var(--beige);
  --serif:      var(--display);
  --shadow-sm:  var(--shadow);
}

/* The hidden attribute must beat component display rules. Several buttons and
   panels are toggled with [hidden]; .btn sets display:inline-flex, which won
   the cascade and left the quote form showing Back, Continue and Finish at
   once. */
[hidden] { display: none !important; }

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--copper-dk); }
a:hover { color: var(--navy); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--navy);
  line-height: 1.12;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.22rem; line-height: 1.28; }
h4 { font-size: 1.02rem; letter-spacing: .01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(56px, 8vw, 108px) 0; }
.section--tight { padding: clamp(40px, 5vw, 68px) 0; }
.section--wash { background: var(--wash); }

.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }

.section-head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper-dk);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--copper);
  border-radius: 2px;
}
.section-head--center .eyebrow::before { display: none; }

/* --------------------------------------------------------- buttons ------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Navy on ivory: contrast ~13:1. Copper is used as a hairline, not as a bg. */
.btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--navy-deep); color: #fff; }

.btn--light { background: var(--white); color: var(--navy); border-color: var(--line); }
.btn--light:hover { border-color: var(--copper); color: var(--navy-deep); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--copper); color: var(--navy-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------------------------------------------------------- header ------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,250,242,.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 78px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy);
  margin-right: auto;
}
.logo__image {
  width: 54px; height: 54px;
  border-radius: 50%;
  flex: none;
}
.logo__text {
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: .97rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--navy); border-bottom-color: var(--copper); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 650; border-bottom-color: var(--copper); }
.nav .btn { display: none; }

.header-cta { display: flex; align-items: center; gap: 16px; }
.header-phone {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-decoration: none;
  color: var(--navy);
  font-weight: 650;
  white-space: nowrap;
}
.header-phone span:first-child {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 20px; height: 2px;
  background: var(--navy);
  transform: translateX(-50%);
  border-radius: 2px;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -6px; left: 0; transform: none; }
.nav-toggle span::after  { top: 6px;  left: 0; transform: none; }

@media (max-width: 940px) {
  .header-cta { display: none; }
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 20px;
    box-shadow: var(--shadow);
  }
  .site-header.is-open .nav { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--line-soft); }
  .nav .btn { display: inline-flex; margin-top: 14px; }
}

/* ------------------------------------------------------------ hero ------ */

/* Hero. The photograph returns as a full-bleed background, but washed with
   warm ivory instead of the old dark-navy scrim: the room stays visible on
   the right while the copy sits on a near-solid ivory field on the left, so
   dark ink text keeps full WCAG contrast and the page stays beige-led. */
.hero {
  position: relative;
  background-image:
    linear-gradient(100deg,
      rgba(255,250,242,.97) 0%,
      rgba(255,250,242,.94) 34%,
      rgba(255,250,242,.72) 56%,
      rgba(244,234,223,.42) 76%,
      rgba(244,234,223,.28) 100%),
    url("../img/hero.jpg");
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat, no-repeat;
  border-bottom: 1px solid var(--line-soft);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
}
.hero__copy { max-width: 40rem; }

/* Phone shown as a light card so it reads against the photograph. */
.hero__phone {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 22px;
  text-decoration: none;
  color: var(--navy);
  box-shadow: var(--shadow);
}
.hero__phone span {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}
.hero__phone strong { font-size: 1.16rem; }
.hero__phone:hover { border-color: var(--copper); }
.hero__phone:focus-visible { outline: none; box-shadow: var(--focus); }

/* Narrow screens: no room for the photo to breathe beside the copy, so make
   the wash near-opaque across the full width and stack to one column. */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  /* The full-size hero is ~350KB. Phones and small tablets get the resized
     copies that already exist in img/sized/. */
  .hero {
    background-image:
      linear-gradient(180deg,
        rgba(255,250,242,.96) 0%,
        rgba(255,250,242,.92) 62%,
        rgba(244,234,223,.72) 100%),
      url("../img/sized/hero-900.jpg");
  }
}

@media (max-width: 560px) {
  .hero {
    background-image:
      linear-gradient(180deg,
        rgba(255,250,242,.96) 0%,
        rgba(255,250,242,.92) 62%,
        rgba(244,234,223,.72) 100%),
      url("../img/sized/hero-480.jpg");
  }
}
.hero__copy .lede, .hero__lede { color: var(--ink-soft); font-size: 1.12rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 0; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.hero__proof span {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: .86rem;
  font-weight: 550;
  color: var(--navy);
}

.hero__booking {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-lg);
}

.hero__booking h2 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
.hero__booking-kicker {
  display: block;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-dk);
  margin-bottom: 12px;
}
.hero__booking-phone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--navy);
  background: var(--beige);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 18px 0 14px;
}
.hero__booking-phone span {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.hero__booking-phone strong { font-size: 1.2rem; }

.text-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; text-decoration: none; color: var(--copper-dk);
}
.text-link:hover { color: var(--navy); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------- intro strip ------ */

.intro-strip { background: var(--navy); color: #fff; }
.intro-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 34px;
  padding-block: 20px;
}
.intro-strip p { margin: 0; font-weight: 600; }
.intro-strip__mark { color: var(--copper); margin-right: 6px; }
.intro-strip ul {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  list-style: none; margin: 0; padding: 0;
  color: rgba(255,255,255,.86); font-size: .94rem;
}

/* ------------------------------------------------------------ grid ------ */

.grid { display: grid; gap: clamp(18px, 2.4vw, 26px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card h2, .card h3 { margin: 0; }
.card p { color: var(--ink-soft); margin: 0; }
.card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--beige);
  color: var(--copper-dk);
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.card--link { text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.price { color: var(--copper-dk); font-weight: 650; }

/* ------------------------------------------- before / after sliders ----- */

.ba-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 30px);
}
@media (max-width: 820px) { .ba-gallery { grid-template-columns: 1fr; } }

.ba-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 14px 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.ba-card h3 { margin: 18px 4px 6px; }
.ba-card p { margin: 0 4px; color: var(--ink-soft); font-size: .96rem; }
.ba-card__note { margin-top: 8px !important; }

.ba {
  --ba-pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
  cursor: ew-resize;
  touch-action: pan-y;
  background: var(--beige);
  user-select: none;
  -webkit-user-select: none;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Reveal the after image with clip-path rather than by shrinking a wrapper.

   The previous approach sized the wrapper to --ba-pos and the image inside to
   200% OF THAT WRAPPER, so the image rescaled and slid sideways during the
   drag: it looked like a second photo being pushed in rather than one photo
   being wiped across. Both layers now always fill the card at identical size
   and position, and only the visible region is clipped, so the divider reads
   as a single continuous image. */
.ba__after-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}
.ba__after-wrap img { width: 100%; height: 100%; }
.ba:focus-visible { outline: none; box-shadow: var(--focus); }

.ba__label {
  position: absolute;
  bottom: 12px;
  z-index: 3;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(7,24,45,.82);
  color: #fff;
  pointer-events: none;
}
.ba__label--before { right: 12px; }
.ba__label--after  { left: 12px; }

.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos);
  width: 3px;
  background: var(--white);
  transform: translateX(-1.5px);
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(11,35,65,.16);
}
.ba__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  grid-auto-flow: column;
  gap: 9px;
  place-items: center;
  place-content: center;
  box-shadow: 0 3px 12px rgba(11,35,65,.28);
  border: 1px solid var(--line);
  font-size: 0;                 /* glyph-free: arrows are drawn below */
}
/* Chevrons drawn with borders so they never depend on a font glyph. */
.ba__grip::before,
.ba__grip::after {
  content: "";
  width: 7px; height: 7px;
  border-top: 2px solid var(--navy);
  border-right: 2px solid var(--navy);
}
.ba__grip::before { transform: rotate(-135deg); margin-left: 2px; }
.ba__grip::after  { transform: rotate(45deg);   margin-right: 2px; }

.ba-disclaimer {
  margin-top: 18px;
  font-size: .92rem;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
}

/* ----------------------------------------------------------- steps ------ */

.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps--grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .steps--grid { grid-template-columns: 1fr; } }
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--ink-soft); margin: 0; }
.step__num {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  margin-bottom: 14px;
}

/* ------------------------------------------------------------- faq ------ */

.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 20px;
  margin-bottom: 12px;
}
.faq summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--navy);
  padding: 16px 0;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--copper-dk); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 18px; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------- cta band ----- */

.cta-band {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 64px);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.86); max-width: 60ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 26px; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.10); color: #fff; border-color: #fff; }

/* ------------------------------------------------------------ form ------ */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .93rem; color: var(--navy); }
.field input, .field textarea, .field select {
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  box-shadow: var(--focus);
  border-color: var(--copper-dk);
}
.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 700px) { .checkbox-grid { grid-template-columns: 1fr; } }
.checkbox {
  display: flex; align-items: center; gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 15px;
  font-size: .95rem;
}
.checkbox input { width: 18px; height: 18px; accent-color: var(--navy); }

/* On-page quote flow */
.quote-flow { max-width: 760px; }
.quote-flow__steps { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quote-flow__steps li { color: var(--muted); font-size: .78rem; line-height: 1.2; font-weight: 700; display: grid; gap: 6px; }
.quote-flow__steps span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--navy); }
.quote-flow__steps [aria-current="step"] { color: var(--navy); }
.quote-flow__steps [aria-current="step"] span { background: var(--navy); color: #fff; }
.quote-flow__progress { color: var(--muted); margin: 0 0 20px; font-weight: 600; }
.quote-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.quote-step legend { color: var(--navy); font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 600; margin-bottom: 8px; }
.quote-flow__actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.quote-flow__actions [data-quote-next], .quote-flow__actions [data-quote-submit] { margin-left: auto; }
.quote-summary { display: grid; gap: 10px; margin: 20px 0; }
.quote-summary > div { display: grid; grid-template-columns: minmax(120px, .45fr) 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.quote-summary dt { font-weight: 700; color: var(--navy); }
.quote-summary dd { margin: 0; overflow-wrap: anywhere; }
.quote-consent { margin-top: 20px; }

/* Services: curated, compact card rhythm */
.service-group + .service-group { margin-top: 56px; }
.service-group__intro { max-width: 620px; margin-bottom: 26px; }
.service-group__intro .eyebrow { margin-bottom: 8px; }
.service-group__intro h2 { margin: 0 0 8px; }
.service-group__intro p { margin: 0; color: var(--muted); }
.service-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-card { border: 1px solid var(--line); background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.service-card > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.service-card__body { padding: 20px; }
.service-card h2, .service-card h3 { margin: 0 0 9px; font-size: 1.28rem; }
.service-card p { margin: 0 0 16px; color: var(--muted); }
.service-card .service-card__fit { color: var(--ink-soft); font-size: .9rem; margin-top: -6px; }
.service-card a { color: var(--navy); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.service-quote { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--cream); padding: 24px; border-radius: var(--radius); margin: 40px 0; }
.service-quote p { margin: 0; font-family: var(--serif); font-size: 1.3rem; color: var(--navy); }
.service-steps { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .quote-flow__steps { gap: 5px; }
  .quote-flow__steps li { font-size: .68rem; }
  .quote-flow__steps span { width: 24px; height: 24px; }
  .quote-flow__actions { align-items: stretch; }
  .quote-flow__actions .btn { flex: 1; }
  .quote-summary > div { grid-template-columns: 1fr; gap: 3px; }
  .service-cards { grid-template-columns: 1fr; gap: 16px; }
  .service-group + .service-group { margin-top: 42px; }
  .service-quote { align-items: flex-start; flex-direction: column; margin: 30px 0; }
  .service-steps { grid-template-columns: 1fr; }
}
.form-note { font-size: .9rem; color: var(--ink-soft); }
.form-status {
  grid-column: 1 / -1;
  background: var(--beige);
  border: 1px solid var(--line);
  border-left: 4px solid var(--copper);
  border-radius: var(--radius);
  padding: 15px 18px;
  font-weight: 550;
  color: var(--navy);
}

/* ---------------------------------------------------------- footer ------ */

.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.80);
  padding: clamp(48px, 6vw, 78px) 0 30px;
  margin-top: 0;
}
.site-footer .logo { color: #fff; margin-bottom: 14px; }
.site-footer h4 { color: #fff; font-family: var(--body); font-weight: 700; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: rgba(255,255,255,.80); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: clamp(30px, 4vw, 50px);
  padding-top: 22px;
  font-size: .9rem;
  color: rgba(255,255,255,.66);
}
.social-row { display: flex; gap: 14px; margin-top: 26px; }
.social-link { font-size: .9rem; }

/* -------------------------------------------------------- editorial ---- */

.post__date, .byline { color: var(--ink-soft); font-size: .93rem; }
.byline { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.byline__pic { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.protip {
  background: var(--beige);
  border-left: 4px solid var(--copper);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 26px 0;
}
.photo-img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.about-logo-panel {
  display: grid;
  place-items: center;
  background: var(--beige);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 48px);
}
.about-logo-panel img { width: min(280px, 70%); border-radius: 50%; }

.job-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 0 0 24px; padding: 0;
}
.job-meta li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: .88rem;
}

/* -------------------------------------------------------- to top ------- */

.to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  box-shadow: var(--shadow);
  z-index: 60;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------- utility ------ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Additions — pricing, reassurance, portrait, next steps
   ========================================================================== */

/* ---------------------------------------------------------- pricing ----- */

.pricing {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: stretch;
}
@media (max-width: 860px) { .pricing { grid-template-columns: 1fr; } }

.pricing__figure {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}
.pricing__figure .eyebrow { color: #e6b98f; margin-bottom: 12px; }
.pricing__figure .eyebrow::before { background: #e6b98f; }
.pricing__amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  color: #fff;
  line-height: 1;
  margin: 4px 0 14px;
}
.pricing__amount b { font-size: clamp(3rem, 6.5vw, 4.4rem); font-weight: 600; letter-spacing: -.02em; }
.pricing__amount span { font-size: 1.02rem; font-weight: 500; color: rgba(255,255,255,.82); font-family: var(--body); }
.pricing__note { color: rgba(255,255,255,.82); font-size: .95rem; margin: 0; }
.pricing__figure .btn-row { margin-top: 24px; }

.pricing__detail {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.2vw, 40px);
  box-shadow: var(--shadow);
}
.pricing__detail h3 { font-size: 1.3rem; margin-bottom: 14px; }
.pricing__list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 13px; }
.pricing__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink-soft);
  font-size: .99rem;
}
.pricing__list li::before {
  content: "";
  width: 20px; height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--beige);
  border: 1px solid var(--line);
  background-image: linear-gradient(45deg, transparent 42%, var(--copper-dk) 42%, var(--copper-dk) 56%, transparent 56%);
  background-size: 9px 2px;
  background-repeat: no-repeat;
  background-position: 5px 9px;
}
.pricing__list strong { color: var(--navy); font-weight: 650; }
.pricing__small { margin-top: 18px; font-size: .89rem; color: var(--ink-soft); }

/* ------------------------------------------------------ reassurance ----- */

.assure {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) { .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .assure { grid-template-columns: 1fr; } }

.assure__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow);
}
.assure__item h3 { font-size: 1.08rem; margin-bottom: 7px; }
.assure__item p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.assure__mark {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--beige);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  margin-bottom: 15px;
  color: var(--copper-dk);
}
.assure__mark svg { width: 20px; height: 20px; }

/* --------------------------------------------------------- portrait ----- */

.portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--beige);
  box-shadow: var(--shadow-lg);
}
.portrait > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait__caption {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 18px 22px;
}
.portrait__caption strong { display: block; color: var(--navy); font-family: var(--display); font-size: 1.16rem; }
.portrait__caption span { font-size: .88rem; color: var(--ink-soft); }

/* ------------------------------------------------------ next steps ------ */

.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.next-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--ink-soft);
  font-size: .96rem;
}
.next-steps li b { display: block; color: var(--navy); font-weight: 650; font-size: 1rem; margin-bottom: 2px; }
.next-steps li::before {
  content: counter(step);
  counter-increment: step;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid; place-items: center;
  font-size: .84rem; font-weight: 700;
  font-family: var(--body);
}
.next-steps { counter-reset: step; }

/* -------------------------------------------------------- area chip ----- */

.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.area-chip svg { width: 15px; height: 15px; color: var(--copper-dk); flex: none; }

/* ------------------------------------------------------- refinements ---- */

/* Was a dashed box, which reads as an unfinished dev note. */
.ba-disclaimer {
  margin-top: 22px;
  font-size: .93rem;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius);
  padding: 15px 20px;
  max-width: 74ch;
  margin-inline: auto;
  text-align: center;
}

/* Match the rest of the card family rather than sitting at a tighter radius. */
.service-card { border-radius: var(--radius-lg); }
.service-card:hover { box-shadow: var(--shadow-lg); }
.service-card { transition: box-shadow .16s ease, transform .16s ease; }
.service-card:hover { transform: translateY(-3px); }

.service-quote {
  border: 1px solid var(--line);
  padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 34px);
  border-radius: var(--radius-lg);
}
.service-quote .btn { flex: none; white-space: nowrap; }

/* The quote flow's Back / Continue pair. */
.quote-flow__steps li { color: var(--ink-soft); }
.quote-flow__steps span { border: 1px solid var(--line); }
.quote-flow__steps [aria-current="step"] span { border-color: var(--navy); }

/* Buttons that pair a word with a phone number were rendering with the flex
   gap on top of a trailing space. */


.footer-note { max-width: 34ch; font-size: .93rem; color: rgba(255,255,255,.66); }

/* Page intros that would otherwise leave half the row empty. */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 900px) { .page-head { grid-template-columns: 1fr; } }
.page-head .section-head { margin-bottom: 0; }

.head-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow);
}
.head-panel h2 { font-size: 1.2rem; margin-bottom: 14px; }
.head-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.head-panel > ul > li {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px;
  align-items: start; color: var(--ink-soft); font-size: .96rem;
}
.head-panel > ul > li::before {
  content: "";
  width: 7px; height: 7px; margin-top: 9px; margin-left: 5px;
  border-radius: 50%; background: var(--copper);
}
.head-panel__foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }


/* Three steps across the full width. The old 2x2 grid beside a text column
   left an empty cell and a tall gap under the button. */
.steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 26px); }
@media (max-width: 900px) { .steps--row { grid-template-columns: 1fr; } }
.steps--row .step { padding: clamp(24px, 2.8vw, 32px); }

/* The tick in front of each pricing point, drawn with borders so it never
   depends on a font glyph. */
.pricing__list li::before {
  background: var(--beige);
  background-image: none;
  position: relative;
}
.pricing__list li { position: relative; }
.pricing__list li::after {
  content: "";
  position: absolute;
  left: 6px; top: 9px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--copper-dk);
  border-bottom: 2px solid var(--copper-dk);
  transform: rotate(-45deg);
}

/* A quiet line of context, not a boxed notice. */
.ba-disclaimer {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 26px;
  font-size: .95rem;
}

/* Footer: the brand column was the tallest but ended in white space. */
.footer-contact {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 20px;
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius);
  text-decoration: none;
}
.footer-contact span {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); font-weight: 700;
}
.footer-contact strong { color: #fff; font-size: 1.1rem; }
.site-footer a.footer-contact:hover { text-decoration: none; border-color: rgba(255,255,255,.5); }


/* The list items were grid containers, so a bare text node and an inline
   <span> became two grid items and "Across Guernsey" split across two rows.
   Use a marker and padding instead, which never splits inline content. */
.head-panel > ul > li { display: block; padding-left: 18px; position: relative; }
.head-panel > ul > li::before { position: absolute; left: 0; top: .62em; margin: 0; }

/* Cards in a row are equal height, so the call to action should line up too. */
.service-card { display: flex; flex-direction: column; }
.service-card__body { display: flex; flex-direction: column; flex: 1; }
.service-card__body > a { margin-top: auto; padding-top: 4px; }

/* "Call" + number: the flex gap alone was reading as a double space. */
.btn > span + span { margin-left: -3px; }

/* Card titles were inheriting the full page-level h2 scale and swamping the
   card. Cards carry their own, smaller heading step. */
.card h2 { font-size: 1.42rem; line-height: 1.2; }
.card .eyebrow { margin-bottom: 2px; }
.card__media + .eyebrow { margin-top: 4px; }

/* Pricing card without a figure: the lead line takes the place the number had. */
.pricing__lead {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  color: #fff;
  margin: 6px 0 14px;
}

/* Cards for services with no photograph of their own. Rather than borrow an
   unrelated image, they carry a copper rule and more breathing room, so they
   read as a deliberate second tier rather than a card with a missing picture. */
.service-card--plain { border-top: 3px solid var(--copper); }
.service-card--plain .service-card__body { padding: clamp(22px, 2.6vw, 28px); }
.service-card--plain h3 { font-size: 1.34rem; }

.service-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .service-cards--2 { grid-template-columns: 1fr; } }

/* Add-on cards sit in their own row so they size against each other, not
   against a photographed card three times their height. */
.service-subhead {
  margin: 26px 0 14px;
  font-weight: 650;
  color: var(--navy);
  font-size: .95rem;
}
.service-cards--addons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .service-cards--addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .service-cards--addons { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- photo field ---- */

.checkbox-heading {
  margin: 20px 0 9px;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--copper-dk);
}
.checkbox-heading:first-of-type { margin-top: 4px; }

.photo-field {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.photo-field h3 { font-size: 1.12rem; margin-bottom: 6px; }
.photo-field .form-note { margin: 0 0 14px; }

.photo-add {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px dashed var(--copper);
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
}
.photo-add:hover { border-style: solid; background: var(--beige); }
.photo-add span { font-size: 1.1rem; color: var(--copper-dk); line-height: 1; }
/* The native control is hidden but still focusable and still labelled. */
.photo-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-add:focus-within { box-shadow: var(--focus); }

.photo-grid {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px;
}
.photo-grid li {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--beige);
}
.photo-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.photo-remove {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border: 0;
  background: rgba(7,24,45,.86);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 7px 0;
  cursor: pointer;
}
.photo-remove:hover { background: var(--navy-deep); }
.photo-caution { margin-top: 14px !important; font-size: .86rem; }