/* Dress Hire Websites */
:root {
  --magenta: #c6007a;
  --magenta-dark: #a30065;
  --black: #0e0e0e;
  --white: #fff;
  --soft: #f7f5f2;
  --line: #e4e0da;
  --muted: #5a5753;
  --head: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(72px, 11vw, 150px);
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; text-transform: uppercase; line-height: 0.98; letter-spacing: 0.005em; margin: 0 0 0.5em; }
h1 { font-size: clamp(3.4rem, 10.5vw, 8rem); }
h2 { font-size: clamp(2.5rem, 6.4vw, 5rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.05; }
h4 { font-size: 1.25rem; }

:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible, .card--featured :focus-visible { outline-color: #fff; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--black); color: #fff; padding: 10px 16px; z-index: 200; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--soft { background: var(--soft); }
.section__head { max-width: 900px; margin-bottom: clamp(36px, 6vw, 72px); }
.section__head h2 { margin-bottom: 0.35em; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 40em; }
.on-dark .lede { color: rgba(255,255,255,0.78); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 28px; font: 600 0.9rem/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--magenta); background: var(--magenta); color: #fff; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; text-align: center; }
.btn:hover { background: var(--magenta-dark); border-color: var(--magenta-dark); }
.btn--ghost { background: transparent; color: var(--black); border-color: var(--black); }
.btn--ghost:hover { background: var(--black); border-color: var(--black); color: #fff; }
.btn--light { background: #fff; border-color: #fff; color: var(--black); }
.btn--light:hover { background: var(--black); border-color: var(--black); color: #fff; }
.btn--ghost-light { background: transparent; border-color: #fff; color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--black); border-color: #fff; }
.btn--sm { min-height: 44px; padding: 11px 20px; font-size: 0.8rem; }
.btn--block { width: 100%; }
.btn.is-disabled { opacity: 0.35; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.text-link { font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--magenta); }
.text-link:hover { color: var(--magenta); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.97); border-bottom: 1px solid var(--line); }
.header-in { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; }
.brand { display: block; line-height: 0; flex: none; }
.brand img { height: 38px; width: auto; }
.menu-btn { display: none; width: 48px; height: 48px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; margin-right: -10px; }
.menu-btn span.bar, .menu-btn span.bar::before, .menu-btn span.bar::after { display: block; position: absolute; left: 12px; width: 24px; height: 2px; background: var(--black); content: ""; transition: transform 0.2s, top 0.2s, background 0.2s; }
.menu-btn span.bar { top: 23px; }
.menu-btn span.bar::before { top: -7px; left: 0; }
.menu-btn span.bar::after { top: 7px; left: 0; }
.menu-btn[aria-expanded="true"] span.bar { background: transparent; }
.menu-btn[aria-expanded="true"] span.bar::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span.bar::after { top: 0; transform: rotate(-45deg); }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); }
.nav-list { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 24px); }
.nav-item { height: var(--header-h); display: flex; align-items: center; }
.nav-link, .nav-trigger { font: 500 0.92rem/1 var(--body); color: var(--black); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0; margin: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.nav-trigger::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.nav-trigger[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }
.nav-link:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"], .nav-trigger.is-current, .nav-link[aria-current="page"] { border-bottom-color: var(--magenta); }

/* Mega menu */
.mega { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 28px 40px -20px rgba(14,14,14,0.14); padding: 36px 0 44px; }
.mega[hidden] { display: none; }
.mega__grid { display: grid; gap: 28px 56px; align-items: start; }
@media (min-width: 1061px) {
  .mega__grid--sites { grid-template-columns: 1.3fr 1fr 0.6fr; }
  .mega__grid--app { grid-template-columns: 1fr 1.4fr; }
}
.mega a { text-decoration: none; }
.mega-feature { display: block; background: var(--soft); padding: 28px 30px; border: 1px solid var(--line); }
.mega-feature:hover { border-color: var(--black); }
.mega-feature__name { display: block; font-family: var(--head); text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; margin-bottom: 10px; }
.mega-feature__price { display: block; font-family: var(--head); font-size: 2.6rem; line-height: 1; margin-bottom: 10px; }
.mega-feature__price small { font-family: var(--body); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.mega-feature__desc { display: block; color: var(--muted); font-size: 0.98rem; margin-bottom: 14px; }
.mega-feature__cta { font-weight: 600; font-size: 0.9rem; border-bottom: 2px solid var(--magenta); padding-bottom: 2px; }
.mega-list li { border-top: 1px solid var(--line); }
.mega-list li:last-child { border-bottom: 1px solid var(--line); }
.mega-list a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 16px 0; }
.mega-list a:hover .mega-list__t { color: var(--magenta); }
.mega-list__t { font-weight: 600; font-size: 1rem; }
.mega-list__p { font-family: var(--head); font-size: 1.3rem; line-height: 1.2; }
.mega-list__d { flex: 1 1 100%; color: var(--muted); font-size: 0.9rem; }
.mega-list--cols { display: grid; column-gap: 40px; }
@media (min-width: 1061px) { .mega-list--cols { grid-template-columns: 1fr 1fr; } .mega-list--cols li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 1060px) { .mega-list--cols li:last-child { border-bottom: 1px solid var(--line); } }
.mega__grid--res .mega-list--cols { grid-column: 1 / -1; }
.mega-links li a { display: block; padding: 8px 0; font-weight: 600; }
.mega-links li a:hover { color: var(--magenta); }
.mega-intro__t { font-family: var(--head); text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; margin: 0 0 10px; }
.mega-intro p:last-child { color: var(--muted); margin: 0; max-width: 28em; }

.no-js .header-in { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
.no-js .nav-list { flex-wrap: wrap; align-items: flex-start; }
.no-js .nav-item { height: auto; flex-direction: column; align-items: flex-start; }
.no-js .nav-trigger { pointer-events: none; }
.no-js .mega[hidden] { display: block; position: static; box-shadow: none; border: 0; padding: 4px 0 8px; }

@media (max-width: 1060px) {
  .js .menu-btn { display: block; }
  .js .site-nav { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: #fff; border-top: 1px solid var(--line); flex-direction: column; align-items: stretch; justify-content: space-between; gap: 24px; padding: 8px var(--gutter) 28px; overflow-y: auto; overscroll-behavior: contain; z-index: 99; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  .js .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { height: auto; display: block; border-bottom: 1px solid var(--line); }
  .nav-link, .nav-trigger { width: 100%; justify-content: space-between; font-size: 1.15rem; padding: 16px 0; border-bottom: 0; }
  .nav-link[aria-current="page"], .nav-trigger[aria-expanded="true"], .nav-trigger.is-current { color: var(--magenta); }
  .mega { position: static; box-shadow: none; border: 0; padding: 0 0 16px; }
  .mega__grid { padding: 0; gap: 16px; }
  .mega-feature { padding: 20px; }
  .mega-feature__name { font-size: 1.35rem; }
  .mega-feature__price { font-size: 2rem; }
  .mega-intro { display: none; }
  .site-nav > .btn { flex: none; }
}

/* Hero */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); overflow-x: hidden; }
.hero__grid { display: grid; gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 0.3em; }
.hero h1 em { font-style: normal; color: var(--magenta); }
.hero .lede { margin-bottom: 32px; }
.trust { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 36px; font-size: 0.88rem; font-weight: 500; color: var(--muted); }
.trust li + li::before { content: ""; display: inline-block; width: 1px; height: 0.9em; background: var(--line); margin: 0 14px; vertical-align: -0.1em; background: #bdb8b0; }
.fan { position: relative; aspect-ratio: 1 / 0.92; width: 100%; }
.fan__card { position: absolute; top: 4%; width: 36%; height: 88%; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(14,14,14,0.16); transform: translateY(var(--y)) rotate(var(--r)); overflow: hidden; display: flex; flex-direction: column; }
.fan__card::before { content: ""; flex: none; height: 16px; background: #efece7 radial-gradient(circle at 9px 8px, #c9c4bc 2.5px, transparent 3px) no-repeat; background-size: 40px 16px; border-bottom: 1px solid var(--line); }
.fan__card img { width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top; }
.fan__card:nth-child(1) { left: 0; --r: -9deg; --y: 6%; z-index: 1; }
.fan__card:nth-child(2) { left: 16%; --r: -4.5deg; --y: 2%; z-index: 2; }
.fan__card:nth-child(3) { left: 32%; --r: 0deg; --y: 0%; z-index: 3; }
.fan__card:nth-child(4) { left: 48%; --r: 4.5deg; --y: 2%; z-index: 2; }
.fan__card:nth-child(5) { left: 64%; --r: 9deg; --y: 6%; z-index: 1; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 5fr 7fr; gap: 24px; }
}
@media (max-width: 599px) {
  .fan { aspect-ratio: 1 / 0.95; }
  .fan__card { display: none; width: 52%; height: 90%; }
  .fan__card:nth-child(3), .fan__card:nth-child(4) { display: flex; }
  .fan__card:nth-child(3) { left: 0; --r: -3deg; --y: 0%; z-index: 2; }
  .fan__card:nth-child(4) { left: 46%; --r: 3deg; --y: 4%; z-index: 1; }
}

/* Floating official logos (Shopify bag + The Dress Rental App icon) */
.hero__media { position: relative; padding: 36px 32px 44px; }
.float-badges { display: flex; align-items: center; gap: 14px; }
.float-badge { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(14,14,14,0.10); text-decoration: none; color: inherit; z-index: 6; }
.float-badge__bob { display: grid; place-items: center; width: 100%; height: 100%; animation: float-badge 5.6s ease-in-out infinite; }
.float-badge--app .float-badge__bob { animation-duration: 6.6s; animation-delay: 0.9s; }
.float-badge img { width: 62%; height: auto; max-height: 62%; object-fit: contain; }
.float-badge--app img { width: 72%; height: 72%; max-height: 72%; border-radius: 18%; }
@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (min-width: 700px) {
  .float-badge { width: 80px; height: 80px; }
}
.hero__media .float-badges { position: static; }
.hero__media .float-badge { position: absolute; }
.hero__media .float-badge--shopify { top: 4px; left: 2%; }
.hero__media .float-badge--app { right: 6%; bottom: 10%; }
@media (min-width: 900px) {
  .hero__media { padding: 24px 20px 32px 8px; }
  .hero__media .float-badge--shopify { top: 0; left: 6%; }
  .hero__media .float-badge--app { right: 10%; bottom: 12%; }
}
@media (max-width: 599px) {
  .hero__media { padding: 24px 14px 20px; }
  .hero__media .float-badge { width: 58px; height: 58px; }
  .hero__media .float-badge--shopify { top: 2px; left: 0; }
  .hero__media .float-badge--app { right: 0; bottom: 18%; }
}

/* Packages (and other) page-head badge cluster */
.page-head--badges .wrap { position: relative; }
@media (min-width: 800px) {
  .page-head--badges .lede { padding-right: 200px; }
  .page-head--badges .float-badges {
    position: absolute;
    right: var(--gutter);
    top: 8px;
  }
}
@media (max-width: 799px) {
  .page-head--badges .float-badges { margin-top: 16px; }
  .page-head--badges .float-badge { width: 58px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .float-badge__bob { animation: none; }
}

/* Marquee */
.clients { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; overflow: hidden; background: #fff; }
.clients__title { text-align: center; font-size: 1.05rem; color: var(--muted); margin: 0 0 28px; }
.marquee { display: flex; width: max-content; animation: scroll 60s linear infinite; }
.marquee:hover, .marquee:focus-within { animation-play-state: paused; }
.marquee ul { display: flex; align-items: center; flex: none; }
.marquee li { padding: 0 clamp(32px, 4.5vw, 64px); }
.marquee img { height: 84px; width: auto; max-width: 220px; object-fit: contain; }
@media (max-width: 599px) { .marquee li { padding: 0 28px; } .marquee img { height: 64px; max-width: 160px; } }
@keyframes scroll { to { transform: translateX(-50%); } }

/* What we build */
.split { display: grid; gap: 40px; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; gap: 80px; } .split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; } }
.rows li { display: grid; gap: 4px 32px; padding: 22px 0; border-top: 1px solid var(--black); }
.rows li:last-child { border-bottom: 1px solid var(--black); }
.rows h3 { margin: 0; font-size: 1.5rem; }
.rows p { margin: 0; color: var(--muted); }
@media (min-width: 640px) { .rows li { grid-template-columns: 1fr 1.3fr; align-items: baseline; } }

/* Cards / packages */
.card { background: #fff; border: 1px solid var(--line); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--muted); }
.card .price { font-family: var(--head); font-size: 3rem; line-height: 1; margin: 6px 0 18px; }
.price s { font-size: 1.4rem; color: var(--muted); margin-left: 10px; }
.card .btn { margin-top: auto; }
.card__img { margin: -6px 0 20px; border: 1px solid var(--line); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.card--featured { background: var(--black); color: #fff; border-color: var(--black); }
.card--featured p { color: rgba(255,255,255,0.78); }
.pkg-grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pkg-grid--4 { grid-template-columns: repeat(4, 1fr); } .pkg-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.feature-card { display: grid; gap: 32px; margin-bottom: 20px; }
.feature-card .card__main .price { font-size: clamp(4rem, 8vw, 6rem); color: #fff; }
.feature-card .price span { color: var(--magenta); }
.tick { display: grid; gap: 0; }
.tick li { padding: 12px 0 12px 30px; position: relative; border-top: 1px solid rgba(255,255,255,0.18); }
.tick li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 12px; height: 7px; border-left: 2px solid var(--magenta); border-bottom: 2px solid var(--magenta); transform: rotate(-45deg); }
.tick--light li { border-top-color: var(--line); }
.tick--light li:last-child { border-bottom: 1px solid var(--line); }
.tick li:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }
.tick--light li:last-child { border-bottom-color: var(--line); }
@media (min-width: 900px) { .feature-card { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }

/* Work */
/* Work showcase (full width) */
.wcard { display: block; color: inherit; text-decoration: none; min-width: 0; }
.wcard__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.wcard__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.6s ease; }
.wcard:hover .wcard__shot img, .wcard:focus-visible .wcard__shot img { transform: scale(1.025); }
.wcard__name { display: block; font-family: var(--head); text-transform: uppercase; font-size: 1.25rem; line-height: 1.15; letter-spacing: 0.01em; padding-top: 12px; transition: color 0.2s ease; }
.wcard:hover .wcard__name, .wcard:focus-visible .wcard__name { color: var(--magenta); }
.wcard__domain { display: block; font-family: var(--body); font-size: 0.8125rem; color: #77736e; padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcard:focus-visible { outline: 2px solid var(--magenta); outline-offset: 4px; }

.section--work { padding-top: 0; }
.wgrid { display: grid; grid-template-columns: 1fr; gap: 24px 12px; padding: 0 12px; }
@media (min-width: 700px) { .wgrid { grid-template-columns: repeat(2, 1fr); gap: 32px 14px; padding: 0 14px; } }
@media (min-width: 1100px) { .wgrid { grid-template-columns: repeat(3, 1fr); gap: 36px 16px; padding: 0 16px; } }
@media (min-width: 1440px) { .wgrid { grid-template-columns: repeat(4, 1fr); } }

.work-group__title { margin: 0 0 20px; padding: 0 12px; }
.work-group__title--next { margin-top: clamp(56px, 7vw, 96px); }
.work-group__intro { margin: -8px 0 24px; padding: 0 12px; color: var(--muted); }
.work-note { margin: clamp(48px, 6vw, 80px) 0 0; padding: 0 12px; font-size: 0.8125rem; line-height: 1.5; color: #77736e; }
.work-note a, .showcase__note a { color: inherit; text-decoration: underline; }
.work-note a:hover, .showcase__note a:hover { color: var(--magenta); }
.showcase__note { margin-top: 24px; margin-bottom: 0; font-size: 0.8125rem; line-height: 1.5; color: #77736e; }
@media (min-width: 700px) { .work-group__title, .work-group__intro, .work-note { padding: 0 14px; } }
@media (min-width: 1100px) { .work-group__title, .work-group__intro, .work-note { padding: 0 16px; } }

.showcase { overflow: hidden; }
.showcase__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.showcase__head h2 { margin: 0; }
.showcase__rows { display: grid; gap: 20px; }
.mrow { overflow: hidden; }
.mrow__track { display: flex; width: max-content; animation: mrow-left 90s linear infinite; }
.mrow--b .mrow__track { animation-name: mrow-right; animation-duration: 100s; }
.mrow .wcard { flex: 0 0 auto; width: clamp(250px, 24vw, 360px); padding-right: 14px; box-sizing: border-box; }
.mrow:hover .mrow__track, .mrow:focus-within .mrow__track { animation-play-state: paused; }
@keyframes mrow-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mrow-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .mrow { overflow-x: auto; padding: 0 12px 8px; scrollbar-width: thin; scrollbar-color: var(--magenta) var(--line); }
  .mrow__track { animation: none !important; }
  .mrow .wcard[aria-hidden="true"] { display: none; }
}

/* App */
.app { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .app { grid-template-columns: 1fr 1fr; gap: 80px; } }
.app__img img { width: 100%; height: auto; mix-blend-mode: multiply; }
.plan { border-left: 4px solid var(--magenta); padding: 4px 0 4px 20px; margin: 28px 0; }
.plan p { margin: 0; font-size: 1.1rem; }
.plan strong { font-weight: 700; }

/* Reviews: full-bleed auto-scrolling row of even-height cards */
.section--reviews { overflow: hidden; }
.section--reviews .section__head { margin-bottom: clamp(28px, 4vw, 48px); }
.reviews-marquee { overflow: hidden; }
.reviews { display: flex; width: max-content; animation: reviews-scroll 70s linear infinite; }
.reviews__set { display: flex; }
.review { --review-w: min(340px, 82vw); box-sizing: border-box; position: relative; display: flex; flex-direction: column; flex: 0 0 auto; width: var(--review-w); height: 452px; margin: 0 20px 0 0; padding: clamp(22px, 3vw, 28px); border: 1px solid var(--line); background: #fff; }
.review::before { content: "\201C"; display: block; flex: none; height: 0.55em; margin-bottom: 14px; font: 400 2.5rem/1 var(--head); color: var(--magenta); }
.review blockquote { flex: 1 1 auto; min-height: 0; margin: 0 0 18px; font-size: 1.0625rem; line-height: 1.55; overflow: hidden; mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }
.review blockquote p { margin: 0 0 0.7em; }
.review blockquote p:last-child { margin-bottom: 0; }
.review__meta { flex: none; padding-top: 16px; border-top: 1px solid var(--line); }
.stars { color: var(--magenta); letter-spacing: 0.15em; font-size: 0.8rem; line-height: 1; margin: 0 0 10px; }
.review figcaption { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.review__name { display: block; font-weight: 600; color: var(--black); }
.review__date { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
.review__source { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 0.8125rem; font-weight: 500; color: var(--muted); text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.2s, text-decoration-thickness 0.2s; }
.review__source:hover { color: var(--magenta); text-decoration-thickness: 2px; }
.review__source:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.reviews__summary { margin: 0; max-width: 40em; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); }
.reviews__summary a { color: var(--black); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--magenta); }
.reviews__summary a:hover { color: var(--magenta); }
.reviews__summary a:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
@keyframes reviews-scroll { to { transform: translateX(-50%); } }
.reviews-marquee:hover .reviews,
.reviews-marquee:focus-within .reviews,
.reviews-marquee.is-paused .reviews { animation-play-state: paused; }
@media (max-width: 599px) {
  .review { height: 428px; }
  .review blockquote { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .section--reviews { overflow: visible; }
  .reviews-marquee { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--magenta) var(--line); padding: 0 var(--gutter) 8px; }
  .reviews { animation: none !important; }
  .reviews__set[aria-hidden="true"] { display: none; }
  .review__source { transition: none; }
}

/* Booking box optional extras */
.pk-extras { border-top: 1px solid var(--line); border-bottom: 1px solid var(--black); padding: 16px 0 10px; }
.pk-extras__label { margin: 0; font: 600 1rem/1.3 var(--body); color: var(--black); letter-spacing: 0; text-transform: none; }
.pk-extras__note { margin: 4px 0 8px; font: 400 0.88rem/1.4 var(--body); color: var(--muted); }
.pk-extras > .check { border-top: 0; }
.pk-opt { border-top: 1px solid var(--line); }
.pk-opt .check { border-top: 0; padding-bottom: 0; }
.pk-opt__include { margin: 0 0 6px 36px; padding-top: 2px; padding-bottom: 8px; }
.check--terms { border-top: 0; padding-top: 18px; }
@media (max-width: 599px) {
  .pk-opt__include { min-height: 44px; }
}

/* Process */
.steps { position: relative; max-width: 860px; }
.steps li { position: relative; padding: 0 0 44px 44px; border-left: 2px solid var(--black); margin-left: 8px; }
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before { content: ""; position: absolute; left: -9px; top: 0.35em; width: 16px; height: 16px; background: var(--magenta); }
.steps h3 { margin-bottom: 0.3em; }
.steps p { color: var(--muted); max-width: 40em; margin: 0; }

/* FAQ */
.faq { max-width: 900px; border-bottom: 1px solid var(--black); }
.faq details { border-top: 1px solid var(--black); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 56px 24px 0; font-weight: 600; font-size: 1.15rem; line-height: 1.35; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 20px; height: 2px; background: var(--magenta); transition: transform 0.2s; }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq summary:hover { color: var(--magenta); }
.faq .answer { padding: 0 56px 26px 0; color: var(--muted); }
.faq .answer p:last-child { margin-bottom: 0; }

/* CTA band */
.cta-band { background: var(--magenta); color: #fff; padding: clamp(64px, 9vw, 120px) 0; }
.cta-band h2 { font-size: clamp(3rem, 9vw, 7rem); }
.cta-band p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 36em; margin-bottom: 32px; }

/* Footer */
.site-footer { background: var(--black); color: #fff; padding: clamp(56px, 8vw, 96px) 0 32px; }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; } }
.site-footer img { height: 64px; width: auto; margin-bottom: 20px; }
.site-footer h4 { font-size: 1rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); margin-bottom: 14px; font-family: var(--body); font-weight: 600; text-transform: uppercase; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { text-decoration: none; color: rgba(255,255,255,0.9); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; }
.site-footer p { color: rgba(255,255,255,0.7); font-size: 0.95rem; }
.legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.18); font-size: 0.85rem; color: rgba(255,255,255,0.6); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.legal p { margin: 0; font-size: 0.85rem; }

/* Page heads (inner pages) */
.page-head { position: relative; padding: clamp(48px, 8vw, 112px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(3.4rem, 10vw, 7.5rem); margin-bottom: 0.25em; }
.page-head .lede { margin-bottom: 0; }

/* Checkout */
.checkout { display: grid; gap: 40px; }
.checkout__panel { background: #fff; color: var(--black); padding: clamp(24px, 3vw, 40px); }
.check { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); cursor: pointer; font-size: 0.98rem; line-height: 1.45; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--magenta); }
.check a { color: var(--magenta); font-weight: 600; }
.check small { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.hint { font-size: 0.9rem; color: var(--magenta-dark); margin: 4px 0 14px; font-weight: 600; }
.hint.is-hidden { display: none; }
.checkout .total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--black); padding: 16px 0; font-weight: 600; }
.checkout .total strong { font-family: var(--head); font-size: 2.6rem; font-weight: 400; line-height: 1; }
.card--featured .checkout__panel .hint { color: var(--magenta-dark); }
.card--featured .checkout__panel .fine { color: var(--muted); }
.checkout .btn + .btn { margin-top: 12px; }
.fine { font-size: 0.85rem; color: var(--muted); margin: 16px 0 0; }
@media (min-width: 900px) { .checkout { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }

/* Cost breakdown */
.costs li { display: grid; gap: 8px 40px; padding: 28px 0; border-top: 1px solid var(--black); }
.costs li:last-child { border-bottom: 1px solid var(--black); }
.costs h3 { margin: 0; font-size: 1.3rem; }
.costs .amount { font-family: var(--head); text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; margin: 0; }
.costs p { margin: 0; color: var(--muted); }
@media (min-width: 800px) { .costs li { grid-template-columns: 1.1fr 1fr 1.6fr; align-items: start; } }
.notes li { padding: 18px 0; border-top: 1px solid var(--line); }
.notes li:last-child { border-bottom: 1px solid var(--line); }

/* Contact */
.contact-list { display: grid; gap: 0; max-width: 900px; }
.contact-list > div { padding: 28px 0; border-top: 1px solid var(--black); display: grid; gap: 8px 40px; }
.contact-list > div:last-child { border-bottom: 1px solid var(--black); }
.contact-list h3 { margin: 0; }
.contact-list p { margin: 0 0 8px; color: var(--muted); }
.contact-list .big { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 600; color: var(--black); word-break: break-word; }
@media (min-width: 760px) { .contact-list > div { grid-template-columns: 1fr 2fr; } }

.center-page { min-height: 70vh; display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .marquee { animation: none; width: auto; overflow-x: auto; max-width: 100%; }
  .marquee ul[aria-hidden="true"] { display: none; }
  .marquee ul { flex-wrap: wrap; justify-content: center; row-gap: 20px; }
  .wcard:hover .wcard__shot img { transform: none; }
}

/* Round 2 additions */
.more { margin: 32px 0 0; }
.h1--md { font-size: clamp(3rem, 7vw, 5.5rem); }
.card--quiet .price { font-size: 2.4rem; }
.card--quiet .tick { margin-bottom: 20px; }
.card--quiet .fine { margin: 0 0 24px; }
.feature-card + .pkg-grid { margin-top: 20px; }
.card--featured .price span { font-size: 1.1rem; letter-spacing: 0.06em; }

/* Packages hero */
.pk-hero { display: grid; gap: 48px; grid-template-areas: "intro" "card" "details"; }
.pk-intro { grid-area: intro; min-width: 0; }
.pk-card { grid-area: card; background: #fff; border: 1px solid var(--black); padding: clamp(22px, 3vw, 36px); min-width: 0; }
.pk-details { grid-area: details; min-width: 0; }
.pk-intro h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
.pk-price { font-family: var(--head); font-size: clamp(4rem, 8vw, 6.5rem); line-height: 1; margin: 0 0 12px; }
.pk-price span { font-size: 1.1rem; letter-spacing: 0.06em; color: var(--magenta); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); margin-top: 32px; }
.facts > div { min-width: 0; padding: 18px 16px 18px 0; }
.facts > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.facts strong { display: block; font-family: var(--head); font-weight: 400; font-size: clamp(1.85rem, 4vw, 2.6rem); line-height: 1; }
.facts span { display: block; color: var(--muted); font-size: 0.92rem; line-height: 1.35; }
@media (max-width: 639px) {
  .facts { margin-top: 24px; }
  .facts > div { padding: 14px 8px 14px 0; }
  .facts > div + div { padding-left: 12px; }
  .facts strong { font-size: clamp(1.55rem, 8vw, 2rem); }
  .facts span { font-size: 0.78rem; }
}
.pk-card__row { display: flex; justify-content: space-between; font-weight: 600; padding-bottom: 14px; }
.pk-card .total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--black); padding: 16px 0; font-weight: 600; }
.pk-card .total strong { font-family: var(--head); font-size: 2.6rem; font-weight: 400; line-height: 1; }
.pk-card .btn + .btn { margin-top: 12px; }
@media (min-width: 960px) {
  .pk-hero { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); grid-template-areas: "intro card" "details card"; column-gap: clamp(40px, 6vw, 88px); row-gap: 56px; align-items: start; }
  .pk-card { position: sticky; top: calc(var(--header-h) + 24px); }
}
.block + .block { border-top: 1px solid var(--black); margin-top: 48px; padding-top: 44px; }
.block h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 20px; }
.block .steps { max-width: none; }
.incl { border-bottom: 1px solid var(--line); }
.incl li { padding: 12px 0 12px 30px; position: relative; border-top: 1px solid var(--line); }
.incl li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 12px; height: 7px; border-left: 2px solid var(--magenta); border-bottom: 2px solid var(--magenta); transform: rotate(-45deg); }
@media (min-width: 640px) { .incl:not(.incl--one) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; } }

/* Cost table */
.cost-table { width: 100%; border-collapse: collapse; }
.cost-table th, .cost-table td { text-align: left; vertical-align: top; padding: 20px 24px 20px 0; border-top: 1px solid var(--line); }
.cost-table thead th { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-top: 0; border-bottom: 1px solid var(--black); padding-top: 0; }
.cost-table tbody th { font-weight: 600; width: 22%; }
.cost-table td { color: var(--muted); }
.cost-table td:nth-child(3) { color: var(--black); font-weight: 600; width: 24%; }
.cost-table tbody tr:last-child > * { border-bottom: 1px solid var(--black); }
@media (max-width: 799px) {
  .cost-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cost-table, .cost-table tbody, .cost-table tr, .cost-table th, .cost-table td { display: block; width: auto !important; }
  .cost-table tr { padding: 18px 0; border-top: 1px solid var(--line); }
  .cost-table tbody tr:first-child { border-top: 1px solid var(--black); }
  .cost-table tbody tr:last-child { border-bottom: 1px solid var(--black); }
  .cost-table th, .cost-table td, .cost-table tbody tr:last-child > * { border: 0; padding: 3px 0; }
  .cost-table td::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; }
}

/* Work page grid */
.page-head--app { padding-bottom: clamp(40px, 6vw, 72px); }

/* Website care plans */
.care-grid .price { font-size: 2.4rem; }
.care-grid .price span { font-family: var(--body); font-size: 1rem; letter-spacing: 0.04em; color: var(--muted); }
.care-grid .tick { margin-bottom: 24px; }
.care-card--alt { border-top: 3px solid var(--magenta); background: #f1ece6; }
.care-note { margin: 16px 0 0; color: var(--muted); font-size: 0.9rem; }
.care-compact { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }

/* Not yet live work cards */
.wcard--soon { cursor: default; }
.wcard--soon:hover img { transform: none; }
.wcard__shot--name { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: #F7F5F2; border: 1px solid #ECE8E3; padding: 24px; text-align: center; }
.wcard__shot--name span { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.05; color: #C6007A; letter-spacing: .01em; }
.wcard__status { display: inline-block; margin-left: 6px; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; border: 1px solid #d9d4ce; padding: 1px 6px; border-radius: 2px; }
.wcard__domain .wcard__status:first-child { margin-left: 0; }


/* Support ticket form */
.ticket-form { max-width: 760px; }
.ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.ticket-field { display: flex; flex-direction: column; gap: 8px; font: 600 0.78rem/1.3 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ticket-field--wide { grid-column: 1 / -1; }
.ticket-field input, .ticket-field select, .ticket-field textarea {
  width: 100%; font: 400 1.05rem/1.45 var(--body); letter-spacing: 0; text-transform: none; color: var(--black);
  border: 1px solid var(--line); background: #fff; padding: 13px 14px; border-radius: 0;
}
.ticket-field textarea { resize: vertical; min-height: 160px; }
.ticket-field input:focus, .ticket-field select:focus, .ticket-field textarea:focus { outline: 3px solid var(--magenta); outline-offset: 0; border-color: var(--magenta); }
.ticket-hint { font: 400 0.95rem/1.5 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0; }
.ticket-drop { position: relative; border: 1px dashed var(--line); background: #fff; padding: 28px 18px; text-align: center; cursor: pointer; }
.ticket-drop p { margin: 0; font: 400 1rem/1.5 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.ticket-drop span { color: var(--magenta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ticket-drop.is-over { border-color: var(--magenta); background: #fff7fb; }
.ticket-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ticket-thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ticket-thumbs li { position: relative; width: 92px; }
.ticket-thumbs img { width: 92px; height: 92px; object-fit: cover; border: 1px solid var(--line); background: #fff; }
.ticket-thumbs button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; background: var(--black); color: #fff; cursor: pointer; font: 600 0.85rem/1 var(--body); }
.ticket-turnstile { min-height: 70px; }
.ticket-status { margin: 22px 0 0; padding: 14px 16px; font-size: 1rem; }
.ticket-status.is-ok { background: #f3f8f4; }
.ticket-status.is-error { background: #f8f3f1; }
.ticket-care { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 0; }
.ticket-care .card { padding: 22px 22px 20px; }
.ticket-care .price { margin: 0 0 14px; }
@media (max-width: 700px) {
  .ticket-grid, .ticket-care { grid-template-columns: 1fr; }
}

/* Package add-ons and inclusion dialogs
   Suggested classes:
   .pkg-addons        wrapper under the featured card (use with .pkg-grid)
   .card--addon       add to .card.card--quiet for the two extras
   .addon-tag         quiet "Add-on" word, inside .price or after the h3
   .addon-actions     row holding .addon-include and the existing Buy now .btn
   .addon-include     "What's included" text button (use a real <button>)
   .dhw-dialog        overlay (a <div role="dialog" aria-modal="true"> or <dialog>)
   .dhw-dialog__panel, __head, __kicker, __title, __close, __body, __foot
   .mega-list__d.mega-list__d--addon   quiet hint in the mega menu */

.pkg-addons { margin-top: 36px; }
.pkg-addons > h3 { margin: 0 0 18px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.pkg-addons__label { margin: 0 0 14px; font: 600 0.78rem/1.3 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card--addon { border-style: solid; border-color: var(--line); background: #fff; }
.card--addon h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.card--addon .price { font-size: 2.1rem; margin-bottom: 14px; }
.card--addon .fine { margin: 0 0 20px; }

/* Add-on marker: one quiet word in the body font */
.addon-tag { font: 500 0.95rem/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.card .price .addon-tag { font-size: 1rem; margin-left: 8px; }
h3 .addon-tag { display: inline-block; margin-left: 10px; vertical-align: 0.15em; }

/* Actions row: What's included sits beside Buy now */
.addon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: auto; }
.card .addon-actions .btn { margin-top: 0; }
.addon-include { appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; margin: 0; padding: 10px 2px; min-height: 44px; display: inline-flex; align-items: center; font: 600 0.9rem/1.2 var(--body); color: var(--black); cursor: pointer; text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.addon-include:hover { color: var(--magenta); }
.addon-include[aria-expanded="true"] { color: var(--magenta); }
@media (max-width: 599px) {
  .addon-actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .addon-actions .btn { width: 100%; }
  .addon-include { justify-content: center; min-height: 48px; }
}

/* Dialog */
.dhw-dialog { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; padding: 0; margin: 0; border: 0; max-width: none; max-height: none; width: 100%; height: 100%; background: rgba(14,14,14,0.55); color: var(--black); overscroll-behavior: contain; }
.dhw-dialog[hidden], .dhw-dialog:not([open]):is(dialog) { display: none; }
.dhw-dialog::backdrop { background: rgba(14,14,14,0.55); }
.dhw-dialog__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 100vh; max-height: 100dvh; background: #fff; color: var(--black); border: 1px solid var(--line); overflow: hidden; }
.dhw-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 8px 16px var(--gutter); background: #fff; border-bottom: 1px solid var(--line); border-top: 4px solid var(--black); }
.dhw-dialog__kicker { margin: 0 0 6px; font: 500 0.9rem/1.2 var(--body); color: var(--muted); }
.dhw-dialog__title { margin: 0; font-size: clamp(1.6rem, 5vw, 2.25rem); line-height: 1.02; }
.dhw-dialog__price { margin: 8px 0 0; font: 600 0.95rem/1.3 var(--body); color: var(--black); }
.dhw-dialog__close { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--black); border: 1px solid var(--line); border-radius: 0; cursor: pointer; font: 400 1.6rem/1 var(--body); }
.dhw-dialog__close:hover { background: var(--black); border-color: var(--black); color: #fff; }
.dhw-dialog__close:focus-visible { outline-offset: -3px; }
.dhw-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 20px var(--gutter) 28px; }
.dhw-dialog__body > p { color: var(--muted); }
.dhw-dialog__body h4 { margin: 24px 0 8px; font-size: 1.1rem; }
.dhw-dialog__body h4:first-child { margin-top: 0; }
.dhw-dialog__body .tick { margin-bottom: 8px; }
.dhw-dialog__foot { position: relative; z-index: 1; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.dhw-dialog__foot .fine { margin: 0; }
.dhw-dialog-open { overflow: hidden; }
@media (min-width: 700px) {
  .dhw-dialog { align-items: center; padding: 16px 32px; }
  .dhw-dialog__panel { max-width: 680px; max-height: min(calc(100vh - 32px), 900px); }
  .dhw-dialog__head { padding: 24px 16px 20px 36px; }
  .dhw-dialog__body { padding: 28px 36px 36px; }
  .dhw-dialog__foot { padding: 16px 36px; }
}

/* Mega menu hint: stays inside the existing description slot */
.mega-list__d--addon::before { content: "Optional extra. "; font-weight: 600; color: var(--black); }

@media (prefers-reduced-motion: reduce) {
  .dhw-dialog, .dhw-dialog__panel, .addon-include, .dhw-dialog__close { animation: none !important; transition: none !important; }
}

/* Sitewide mobile polish */
@media (max-width: 699px) {
  :root { --section: clamp(56px, 15vw, 88px); }
  body { font-size: 1rem; }
  .hero { padding: 32px 0 44px; }
  .hero h1 { font-size: clamp(3rem, 13.5vw, 4.25rem); }
  .hero .lede { margin-bottom: 22px; font-size: 1.08rem; }
  .hero .btn-row { gap: 10px; }
  .hero .btn-row .btn { flex: 1 1 160px; }
  .trust { margin-top: 26px; font-size: 0.84rem; }
  .page-head { padding: 32px 0 22px; }
  .page-head h1 { font-size: clamp(3.05rem, 14.5vw, 4.2rem); }
  .page-head .lede { font-size: 1.05rem; }
  .card { padding: 22px 20px 24px; }
  .card .price { font-size: 2.5rem; }
  .pk-intro h2 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .pk-price { font-size: clamp(3.5rem, 18vw, 5rem); margin-bottom: 10px; }
  .pk-card { padding: 22px 20px 24px; }
  .pk-hero { gap: 32px; }
  .pkg-addons { margin-top: 28px; }
  .section__head { margin-bottom: 32px; }
  .rows li { padding: 18px 0; }
  .costs li { padding: 22px 0; }
  .contact-list > div { padding: 22px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .float-badge__bob { animation: none !important; }
}