/* ==========================================================================
   Layout: header, nav, mega panel, mobile drawer, footer, hero
   ========================================================================== */

/* ================================================================== header */

/* White header with the logo on white, the way the brand already presents.
   The live site's swoosh now lives under the hero and page headers instead. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--white);
  border-bottom: var(--hair) solid var(--line);
  transition: box-shadow var(--t) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 24px -8px rgb(31 33 36 / .22); }

/* utility strip: phone, location and hours */
.utilbar {
  background: var(--charcoal);
  color: #B9BEC4;
  font-size: var(--fs-xs);
}
.utilbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 36px;
  padding-block: var(--s-1);
}
.utilbar__left { display: flex; align-items: center; gap: var(--s-6); }
.utilbar__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.utilbar__item svg { width: 13px; height: 13px; color: var(--gold); flex: none; }
.utilbar a:hover { color: #fff; }
.utilbar__phone {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: var(--wt-bold); color: #fff; letter-spacing: 0.01em;
}
.utilbar__phone svg { width: 13px; height: 13px; color: var(--red-bright); }

@media (max-width: 899px) { .utilbar { display: none; } }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}

/* --------------------------------------------------------------- brand */

.brand { display: flex; align-items: center; flex: none; }
.brand__logo { height: 40px; width: auto; }
@media (min-width: 900px) { .brand__logo { height: 56px; } }

/* --------------------------------------------------------------- nav */

.nav { display: none; }

@media (min-width: 1100px) {
  .nav { display: block; margin-left: auto; }
  .nav__list { display: flex; align-items: center; gap: 2px; }
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--s-3) var(--s-4);
  font-family: var(--ff-head);
  font-size: 0.9375rem;
  font-weight: var(--wt-med);
  color: var(--ink);
  border-radius: var(--radius-sm);
  position: relative;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
  white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--red-text); }

/* red underline marks the active trail */
.nav__link.is-current { color: var(--red-text); }
.nav__link.is-current::after {
  content: '';
  position: absolute;
  left: var(--s-4); right: var(--s-4);
  bottom: 2px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
}

.nav__caret {
  width: 8px; height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t) var(--ease);
  opacity: .6;
}
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(225deg) translateY(-1px); }

/* ----------------------------------------------------------- mega panel */

.megapanel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-panel);
  background: var(--white);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-lg);
  width: max-content;
  max-width: min(94vw, 1040px);
  overflow: hidden;
  animation: panelIn 180ms var(--ease) both;
}
.megapanel[hidden] { display: none; }

@keyframes panelIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.megapanel__inner { display: flex; gap: var(--s-7); padding: var(--s-6); }
.megapanel__col { min-width: 196px; }

.megapanel__heading {
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  font-weight: var(--wt-bold);
  color: var(--ink);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--slate-3);
}

.megapanel__list a {
  display: block;
  padding: var(--s-2) var(--s-3);
  margin-left: calc(var(--s-3) * -1);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.megapanel__list a:hover { color: var(--red-text); background: var(--grey-50); }
.megapanel__list a.is-current { color: var(--red-text); font-weight: var(--wt-semi); }

.megapanel__cta {
  background: var(--slate-wash);
  border-radius: var(--radius);
  padding: var(--s-5);
  max-width: 262px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.megapanel__ctaLabel {
  font-size: var(--fs-sm);
  font-weight: var(--wt-black);
  color: var(--red-text);
  margin: 0;
}
.megapanel__ctaText { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; margin: 0 0 var(--s-2); }

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

.header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.header__cta { display: none; }
@media (min-width: 1100px) { .header__cta { display: inline-flex; } }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.burger:hover { border-color: var(--red); background: var(--red-tint); }
.burger span {
  display: block;
  width: 19px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1100px) { .burger { display: none; } }

/* --------------------------------------------------------- mobile drawer */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--white);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-9);
  animation: drawerIn 220ms var(--ease) both;
}
.drawer[hidden] { display: none; }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: var(--hair) solid var(--line);
  position: sticky; top: 0;
  background: var(--white);
  z-index: 2;
}
.drawer__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.drawer__close svg { width: 15px; height: 15px; }
.drawer__close:hover { border-color: var(--red); background: var(--red-tint); color: var(--red); }

.drawer__body { padding: var(--s-4) var(--gutter) 0; }

.mnav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-family: var(--ff-head);
  font-size: 1.0625rem;
  font-weight: var(--wt-semi);
  letter-spacing: var(--ls-h3);
  border-bottom: var(--hair) solid var(--line);
  color: var(--ink);
  text-align: left;
}
.mnav__top.is-current { color: var(--red-text); }

.mnav__plus {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--red-tint);
  flex: none;
}
.mnav__plus::before, .mnav__plus::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  background: var(--red);
  border-radius: 1px;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.mnav__plus::before { width: 11px; height: 2px; margin: -1px 0 0 -5.5px; }
.mnav__plus::after { width: 2px; height: 11px; margin: -5.5px 0 0 -1px; }
.mnav__top[aria-expanded="true"] .mnav__plus::after { opacity: 0; }

.mnav__panel { padding: var(--s-3) 0 var(--s-5); }
.mnav__panel[hidden] { display: none; }

.mnav__heading {
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  font-weight: var(--wt-bold);
  color: var(--ink-3);
  margin: var(--s-4) 0 var(--s-2);
}
.mnav__heading:first-child { margin-top: 0; }

.mnav__sub a {
  display: block;
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  border-left: 2px solid var(--line);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.mnav__sub a:hover, .mnav__sub a.is-current { color: var(--red-text); border-left-color: var(--red); }

.mnav__all {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: var(--wt-semi);
  color: var(--red-text);
}

.drawer__foot {
  margin-top: var(--s-6);
  padding: var(--s-6) var(--gutter) 0;
  border-top: var(--hair) solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.drawer__contact { font-size: var(--fs-sm); color: var(--ink-3); }
.drawer__contact a { color: var(--ink); font-weight: var(--wt-semi); }

/* ============================================================ sticky mobile CTA */

.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  background: var(--white);
  border-top: var(--hair) solid var(--line);
  transform: translateY(102%);
  transition: transform var(--t-slow) var(--ease);
}
.mobile-cta.is-up { transform: none; }
.mobile-cta .btn { --btn-h: 48px; padding: 0 var(--s-3); box-shadow: none; }
/* Belt and braces: an unsized inline SVG in this bar renders at its container
   width, which once blew the phone icon up to fill the screen. */
.mobile-cta svg { width: 16px; height: 16px; flex: none; }
.mobile-cta a { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); }

@media (min-width: 900px) { .mobile-cta { display: none; } }
@media (max-width: 899px) { .site-footer { padding-bottom: 84px; } }

/* ================================================================== hero */

/* Full-bleed photograph with a readable scrim and copy on the left, echoing
   the live site's hero but with controlled contrast and no text shadow. */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--charcoal);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

/* Slides stack and crossfade. Only opacity and transform animate, both of which
   the compositor handles without repainting. */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1400ms var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide, .hero__slide picture { display: block; width: 100%; height: 100%; }

/* Slow drift on the active slide, so a still photograph does not sit dead on
   screen for six seconds. Reset when the slide is not showing. */
.hero__slide img { transform: scale(1.06); transition: transform 8s linear; }
.hero__slide.is-active img { transform: scale(1); }
/* The hero band is far wider than the source photograph, so the crop has to
   choose. Favour the lower part of the frame: the sofa and floor give the room
   its scale, while the ceiling above the treatment carries no information. */
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 72%; }
@media (max-width: 899px) { .hero__bg img { object-position: 60% 64%; } }

/* Scrim: enough on the left to hold white text at AA, clearing quickly to the
   right so the photography actually reads. Two layers: a horizontal wash for
   legibility and a soft vertical one to seat the header and the base band. */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    /* The copy column runs to roughly 50% of the container, so the wash has to
       hold to there for AA contrast, then clear fast so the room still reads. */
    linear-gradient(96deg,
      rgb(18 20 23 / .90) 0%,
      rgb(18 20 23 / .84) 28%,
      rgb(18 20 23 / .64) 44%,
      rgb(18 20 23 / .30) 58%,
      rgb(18 20 23 / .06) 76%,
      rgb(18 20 23 / .00) 100%),
    linear-gradient(to bottom,
      rgb(20 22 25 / .22) 0%,
      rgb(20 22 25 / .00) 24%,
      rgb(20 22 25 / .00) 78%,
      rgb(20 22 25 / .14) 100%);
}
@media (max-width: 899px) {
  .hero::before {
    background: linear-gradient(to bottom, rgb(20 22 25 / .74) 0%, rgb(20 22 25 / .86) 100%);
  }
}

.hero__inner {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px) clamp(120px, 12vw, 190px);
  min-height: clamp(560px, 66vw, 780px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__copy { max-width: 44rem; }
.hero h1 {
  color: #fff;
  margin-bottom: var(--s-5);
  font-size: clamp(2.4rem, 1.3rem + 3.9vw, 4.1rem);
  font-weight: var(--wt-bold);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.hero .hero__sub { color: rgb(255 255 255 / .92); font-size: var(--fs-lead); max-width: 46ch; margin-bottom: var(--s-6); }
.hero .eyebrow {
  color: #fff;
  font-size: 1.0625rem;
  margin-bottom: var(--s-3);
}

/* red keyword highlight, matching the brand's use of red for emphasis */
.hero h1 .hl { color: #FF4B52; }

.hero__ticks { margin-bottom: var(--s-6); }
.hero__ticks .tick { color: rgb(255 255 255 / .92); }

/* ------------------------------------------------------------- swoosh */

/* The live site's layered slate curves, closing the hero and page headers.
   The fill takes the colour of whatever follows so the curve reads as the
   page rising into the photograph. */
.swoosh {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: clamp(54px, 8vw, 120px);
  z-index: 1;
  pointer-events: none;
  --swoosh-fill: var(--white);
}
.swoosh__l1 { fill: var(--slate-2); opacity: .55; }
.swoosh__l2 { fill: var(--slate); opacity: .9; }
.swoosh__fill { fill: var(--swoosh-fill); }
.swoosh__line { fill: none; stroke: var(--red); stroke-width: 3; vector-effect: non-scaling-stroke; }
.pagehead:has(+ .on-grey) .swoosh,
.pagehead:has(+ .specbar + .on-grey) .swoosh,
.hero:has(+ .on-grey) .swoosh { --swoosh-fill: var(--slate-wash); }

/* -------------------------------------------------------- swoosh, top */

/* Charcoal bands open with the same curve, turned over. The fill is the colour
   of the section above. */
.swoosh--top {
  top: -1px; bottom: auto;
  transform: scaleY(-1);
}
.on-grey + .has-swoosh .swoosh--top { --swoosh-fill: var(--slate-wash); }
.has-swoosh { padding-top: calc(var(--section-y) + clamp(40px, 6vw, 96px)); }

/* ---------------------------------------------------- interior page head */

.pagehead {
  position: relative;
  isolation: isolate;
  background: var(--charcoal);
  overflow: hidden;
  text-align: center;
  padding-block: clamp(36px, 5vw, 72px) clamp(96px, 11vw, 168px);
}
.pagehead__bg { position: absolute; inset: 0; z-index: -2; }
.pagehead__bg, .pagehead__bg picture { display: block; width: 100%; height: 100%; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 62%; }
.pagehead::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 80% at 50% 45%, rgb(24 26 29 / .55), rgb(24 26 29 / .80)),
    linear-gradient(rgb(24 26 29 / .35), rgb(24 26 29 / .35));
}
.pagehead--plain { background: var(--charcoal); }

/* The page header always sits on dark, so breadcrumbs need the reversed
   treatment regardless of whether a photograph is behind them. */
.pagehead .crumbs { margin-bottom: var(--s-5); color: rgb(255 255 255 / .62); justify-content: center; }
.pagehead .crumbs a { color: rgb(255 255 255 / .78); display: inline-flex; align-items: center; min-height: 32px; }
.pagehead .crumbs a:hover { color: #fff; }
.pagehead .crumbs [aria-current] { color: #fff; font-weight: var(--wt-med); }
.pagehead h1 {
  color: #fff;
  margin: 0 auto var(--s-5);
  max-width: 24ch;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  font-weight: var(--wt-bold);
  line-height: 1.08;
}
.pagehead .eyebrow { color: #fff; font-size: 1.0625rem; }
.pagehead .lead { color: rgb(255 255 255 / .88); margin-inline: auto; }
/* One centred column: title, then the supporting line and the two actions */
.pagehead__grid { display: grid; gap: 0; justify-items: center; }
.pagehead__grid .btn-row { justify-content: center; }

/* ================================================================ footer */

.site-footer {
  background: #2B2E33;
  color: #B9BEC4;
  position: relative;
}
/* red keyline at the top of the footer */
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red-bright), var(--red-dark));
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  padding-block: var(--section-y-sm);
}
@media (min-width: 780px) {
  .footer__top { grid-template-columns: minmax(230px, 1fr) minmax(0, 2.3fr); gap: var(--s-9); }
}

.footer__brand .brand__logo { height: 52px; margin-bottom: var(--s-5); }
.footer__blurb { font-size: var(--fs-sm); color: #B9BEC4; margin-bottom: var(--s-5); max-width: 34ch; }

.footer__nap { font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--s-5); }
.footer__nap p { margin-bottom: var(--s-3); }
.footer__nap a { color: #fff; font-weight: var(--wt-med); }
.footer__nap a:hover { color: var(--red-bright); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--s-6) var(--s-5);
}

.fcol__heading {
  font-family: var(--ff-head);
  font-size: 1rem;
  font-weight: var(--wt-bold);
  color: #fff;
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: var(--hair) solid var(--charcoal-line);
}
.fcol__list a {
  font-size: var(--fs-sm);
  color: #B9BEC4;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 2px 0;
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}
.fcol__list a:hover { color: #fff; }

.footer__social { display: flex; gap: var(--s-3); }
.footer__social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: var(--hair) solid var(--charcoal-line);
  border-radius: 50%;
  color: #B9BEC4;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.footer__social a:hover { border-color: var(--red); background: var(--red); color: #fff; }
.footer__social svg { width: 16px; height: 16px; }

.footer__bottom {
  border-top: var(--hair) solid var(--charcoal-line);
  padding-block: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: #8B9199;
}
.footer__bottom a:hover { color: #fff; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }


/* ============================================================ motion */

/* Retired in v2: the staggered hero entrance and the sliding header read as a
   template effect. Only the slider's crossfade remains. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide img { transform: none; transition: none; }
  .hero__slide { transition: none; }
}