/* Self-hosted Jost (variable, 400-700) — the site's single webfont */
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   PhD Home Solutions — editorial design system (2026)
   Brand colors from the live site's customizer stylesheet:
     navy #1b4174 · orange #f27527
   Rules: two surfaces only (white, navy-ink). Photos sit square on the grid,
   no drop shadows, and sometimes bleed to the viewport edge. One display
   scale with real contrast; one accent word per title. Motion only where it
   carries meaning (hero crossfade, service preview, before/after tour).
   ========================================================================== */

:root {
  --navy:        #1b4174;
  --navy-dark:   #12304f;
  --navy-ink:    #0f2a4d;
  --orange:      #f27527;
  --orange-deep: #d85f14;
  --orange-text: #f27527;   /* round 13: the client wants every orange to be the brand orange (was #b04c00 for contrast) */
  --text:        #4b4f58;
  --label:       #585858;
  --line:        #e3e8ef;
  --tint:        #eef2f7;
  --wrap:        1200px;
  --gutter:      clamp(20px, 4vw, 56px);
  --radius:      0;
  --heading:     'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* type scale */
  --fs-display:  clamp(56px, 7.2vw, 108px);
  --fs-title:    clamp(38px, 4.2vw, 62px);
  --fs-sub:      clamp(26px, 2.2vw, 34px);
  --fs-body:     17px;
  --fs-micro:    12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
/* Cross-document page transitions where supported (Chromium); other browsers simply navigate */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .28s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

body {
  margin: 0;
  font-family: Jost, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--heading); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--navy); line-height: 1.1; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

/* ---------- accessibility ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy); color: #fff; padding: .8rem 1.4rem; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; }
.header :focus-visible, .hero :focus-visible, .banner :focus-visible, .band :focus-visible, .section--dark :focus-visible,
.footer :focus-visible, .post-card--featured:focus-visible, .article-cta :focus-visible, .handoff__card:focus-visible { outline-color: var(--orange); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- micro labels + section headers ---------- */
.eyebrow, .micro {
  display: block; font-family: Jost, sans-serif; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--orange-text); margin: 0 0 14px;
}
.hero .eyebrow, .section--dark .eyebrow, .band .eyebrow { color: var(--orange); }
/* Section header: title left, optional one-line sub right, baseline-aligned. Never centered. */
.sec { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin: 0 0 clamp(36px, 4vw, 56px); }
.sec__title, .section-head { font-family: var(--heading); font-size: var(--fs-title); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: var(--navy); margin: 0; text-align: left; }
.sec__title em, .section-head em, .ba-heading em, .band h2 em { font-style: normal; color: var(--orange); }
.sec__sub, .section-sub { font-size: 18px; line-height: 1.55; color: var(--text); margin: 0 0 6px; max-width: 46ch; text-align: left; }
.section--dark .sec__title, .section--dark .section-head { color: #fff; }
.section--dark .sec__sub, .section--dark .section-sub { color: rgba(255,255,255,.78); }
.section-head--solo { margin-bottom: clamp(36px, 4vw, 56px); }
.section-intro { max-width: 720px; }
@media (max-width: 760px) { .sec { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- buttons: square, decisive ---------- */
.btn {
  display: inline-block; padding: 16px 26px; border: 2px solid var(--navy);
  font-family: Jost, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none; text-align: center;
  color: #fff; background: var(--navy); border-radius: var(--radius); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover, .btn:focus-visible { background: var(--navy-ink); border-color: var(--navy-ink); transform: translateY(-2px); }
.btn:active { transform: none; }
.btn--orange { background: var(--orange); border-color: var(--orange); color: var(--navy-ink); }
.btn--orange:hover, .btn--orange:focus-visible { background: #ff8a3d; border-color: #ff8a3d; color: var(--navy-ink); }
.btn--light { background: #fff; border-color: #fff; color: var(--navy); }
.btn--light:hover, .btn--light:focus-visible { background: #eaf0f8; border-color: #eaf0f8; color: var(--navy); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(255,255,255,.1); border-color: #fff; }
/* Text link with arrow: the quiet call to action */
.arrow-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--heading); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--navy); text-decoration: none; }
.arrow-link::after { content: '\2192'; transition: transform .2s ease; }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---------- header / nav ---------- */
.header { position: sticky; top: 0; z-index: 100; background: var(--navy); }
.header__brand { display: flex; align-items: center; gap: 10px; font-family: var(--heading); font-weight: 700; font-size: 19px; color: #fff; text-decoration: none; letter-spacing: .2px; white-space: nowrap; }
.header__brand img { width: 40px; height: 40px; }
.header__brand span { color: var(--orange); }
.header__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px var(--gutter); max-width: 1440px; margin-inline: auto; }
.nav { display: flex; gap: 26px; align-items: center; }
.nav a { font-family: Jost, sans-serif; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: #fff; transition: color .2s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--orange); }
.nav__phone { font-weight: 600; color: var(--orange) !important; }
.nav__cta { background: var(--orange); color: var(--navy-ink) !important; padding: 12px 18px; font-weight: 700; transition: background .2s ease; }
.nav__cta:hover, .nav__cta:focus-visible { background: #ff8a3d; }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid currentColor; background: transparent; color: #fff; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; position: relative; width: 20px; height: 2px; margin-inline: auto; background: currentColor; transition: transform .3s ease, opacity .2s ease; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 64px; right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 18px; background: var(--navy-ink); border-top: 1px solid rgba(255,255,255,.12);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { color: #fff; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 16px; }
  .nav a:last-child { border-bottom: none; }
  .nav__cta { text-align: center; margin: 12px 0 0; padding: 16px; }
}
@media (max-width: 360px) { .header__brand span { display: none; } }

/* ---------- hero (home): editorial split, mosaic bleeds right ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--navy-ink); }
.hero__inner { width: 100%; min-height: clamp(600px, 88vh, 880px); display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); align-items: stretch; }
.hero__content { position: relative; z-index: 2; align-self: center; padding: 72px 0 96px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.hero__logo { display: block; width: 64px; height: 64px; border-radius: 50%; background: #fff; margin: 0 0 28px; }
.hero h1 {
  color: #fff; font-size: var(--fs-display); font-weight: 700; line-height: .98; letter-spacing: -.035em;
  margin: 0 0 32px; max-width: 9.5ch; margin-right: -14vw;   /* the title rides over the first photo */
  text-shadow: 0 2px 30px rgba(15,42,77,.5);
}
.hero__cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 40px; }
/* stats as one hairline row, not floating cards */
.hero__stats { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.2); max-width: 560px; }
.hero__stats div { flex: 0 1 50%; max-width: 220px; padding: 16px 24px 0 0; }
.hero__stats b { display: block; font-family: var(--heading); font-size: 24px; font-weight: 700; line-height: 1; color: #fff; letter-spacing: -.02em; }
.hero__stats b em { font-style: normal; color: var(--orange); }
.hero__stats span { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); }
/* vertical edge label */
.hero__edge { position: absolute; left: 22px; bottom: 40px; z-index: 3; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; z-index: 3; width: 1px; height: 48px; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); animation: scroll-cue 2.2s ease-in-out infinite; }
@keyframes scroll-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.mosaic { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; min-height: 100%; will-change: transform; }
.mosaic__frame { position: relative; overflow: hidden; background: var(--navy); }
.mosaic__frame--tall { grid-row: 1 / span 2; }
.mosaic::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 120px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, var(--navy-ink), rgba(15,42,77,0)); }
.mosaic__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); transition: opacity 1.1s ease, transform 7s linear; }
.mosaic__frame img.is-on { opacity: 1; transform: scale(1.07); }
.mosaic__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.mosaic__frame.has-video .mosaic__video { opacity: 1; z-index: 1; }
.mosaic__frame::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 40%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(15,42,77,.6), rgba(15,42,77,0)); }
.mosaic__label { position: absolute; left: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--heading); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; transition: opacity .5s ease; }
.mosaic__label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero__content { padding: 48px var(--gutter) 40px; }
  .hero h1 { margin-right: 0; max-width: none; text-shadow: none; }
  .hero__edge, .hero__scroll { display: none; }
  .mosaic { aspect-ratio: 4 / 3; min-height: 0; }
  .mosaic::before { content: none; }
}
@media (max-width: 640px) { .hero__cta-row .btn { flex: 1 1 100%; } .hero__stats div { flex-basis: 50%; } }
@media (prefers-reduced-motion: reduce) { .mosaic__frame img { transition: none; } .mosaic__frame img.is-on { transform: none; } .hero__scroll { animation: none; } }

/* ---------- generic section + surfaces ---------- */
.section { padding: clamp(72px, 9vw, 140px) 0; }
.section--tint { background: #fff; border-top: 1px solid var(--line); }
.section--dark { background: var(--navy-ink); color: rgba(255,255,255,.85); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--flush { padding-bottom: 0; }

/* ---------- services: numbered list with hover preview ---------- */
.svc-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 40%); gap: 0 clamp(32px, 5vw, 80px); align-items: start; }
.svc-rows { border-top: 1px solid var(--line); }
.svc-row {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 20px;
  padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--navy);
  transition: padding-left .3s ease;
}
.svc-row__num { font-family: var(--heading); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--orange-text); }
.svc-row h3 { margin: 0; font-size: clamp(28px, 3vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1; transition: color .2s ease; }
.svc-row__go { width: 44px; height: 44px; border: 1.5px solid rgba(27,65,116,.25); display: grid; place-items: center; font-size: 20px; color: var(--navy); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .3s ease; }
.svc-row__go::after { content: '\2192'; }
.svc-row:hover, .svc-row:focus-visible { padding-left: 10px; }
.svc-row:hover h3 { color: var(--orange-text); }
.svc-row:hover .svc-row__go, .svc-row:focus-visible .svc-row__go { background: var(--orange); border-color: var(--orange); color: var(--navy-ink); transform: rotate(-45deg); }
.svc-row__thumb { display: none; }
.svc-preview { position: sticky; top: 100px; aspect-ratio: 4 / 5; background: var(--navy-ink); overflow: hidden; }
.svc-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04) translateX(12px); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.svc-preview img.is-on { opacity: 1; transform: none; }
.svc-preview__label { position: absolute; left: 18px; bottom: 18px; z-index: 2; font-family: var(--heading); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
@media (max-width: 880px) {
  .svc-list { grid-template-columns: 1fr; }
  .svc-preview { display: none; }
  .svc-row { grid-template-columns: 72px 1fr auto; padding: 16px 0; gap: 16px; }
  .svc-row__num { display: none; }
  .svc-row__thumb { display: block; width: 72px; height: 72px; object-fit: cover; }
  .svc-row h3 { font-size: 22px; }
  .svc-row:hover { padding-left: 0; }
}

/* ---------- inner page banner: big left-aligned title; photo variant for service pages ---------- */
.banner { position: relative; isolation: isolate; background: var(--navy-ink); color: #fff; padding: clamp(64px, 10vw, 132px) 0 clamp(40px, 6vw, 72px); overflow: hidden; }
.banner .wrap { position: relative; z-index: 2; }
.banner h1 { font-family: var(--heading); font-size: var(--fs-display); font-weight: 700; line-height: .98; letter-spacing: -.035em; color: #fff; margin: 0; max-width: 12ch; text-align: left; }
.banner h1::after { content: none; }
.banner p { color: rgba(255,255,255,.82); margin: 22px 0 0; max-width: 48ch; font-size: 19px; text-align: left; }
.banner__meta { font-family: Jost, sans-serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); margin: 18px 0 0 !important; font-weight: 700; }
.banner--photo { min-height: clamp(460px, 62vh, 720px); display: flex; align-items: flex-end; }
.banner__img { position: absolute; inset: 0; z-index: 0; }
.banner__img img { width: 100%; height: 100%; object-fit: cover; }
.banner--photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,42,77,.25) 0%, rgba(15,42,77,.55) 55%, rgba(15,42,77,.92) 100%); }
.banner__kicker { display: block; font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin: 0 0 16px; }

/* ---------- stats (about): hairline row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin: 0 0 48px; }
.stat { padding: 22px 20px 22px 0; border-bottom: 1px solid var(--line); }
.stat b { display: block; font-family: var(--heading); font-size: clamp(30px, 3vw, 44px); font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.stat b em { font-style: normal; color: var(--orange); }
.stat span { display: block; margin-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- service cards (services index, junk page) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.svc-card { position: relative; display: block; overflow: hidden; background: var(--navy-ink); color: #fff; text-decoration: none; aspect-ratio: 4 / 5; }
.svc-card picture, .svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.svc-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,77,0) 40%, rgba(15,42,77,.9) 100%); }
.svc-card:hover img { transform: scale(1.05); }
.svc-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 22px 24px; }
.svc-card h3 { color: #fff; font-size: 24px; margin: 0 0 6px; letter-spacing: -.02em; }
.svc-card p { font-size: 15px; color: rgba(255,255,255,.8); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-card .more { font-weight: 700; color: var(--orange); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.svc-card .more::after { content: ' \2192'; }
.svc-card--text { aspect-ratio: auto; background: #fff; color: var(--navy); border: 1px solid var(--line); }
.svc-card--text .svc-card__body { position: static; }
.svc-card--text h3 { color: var(--navy); }
.svc-card--text p { color: var(--text); display: block; -webkit-line-clamp: unset; }
.svc-card--text::after { content: none; }
@media (max-width: 880px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .svc-grid { grid-template-columns: 1fr; } .svc-card { aspect-ratio: 4 / 3; } }

/* ---------- service page rows ---------- */
.srow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(28px, 4vw, 56px) 0; }
.srow h2, .srow h3 { font-family: var(--heading); font-size: var(--fs-sub); font-weight: 700; color: var(--navy); margin: 0 0 14px; letter-spacing: -.025em; }
.srow p { max-width: 52ch; }
.srow .btn { margin-top: 18px; }
.srow__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.srow--flip .srow__media { order: 2; }
@media (max-width: 880px) { .srow { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; } .srow--flip .srow__media { order: 0; } }
.checklist { padding-left: 0; list-style: none; margin: 0 0 1em; }
.checklist li { padding-left: 30px; position: relative; margin-bottom: 10px; }
.checklist li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 700; }

/* ---------- process strip: numbered columns ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.process__step { padding: 28px 28px 32px 0; border-bottom: 1px solid var(--line); }
.process__step + .process__step { padding-left: 28px; border-left: 1px solid var(--line); }
.process__num { display: block; font-family: var(--heading); font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--orange-text); margin-bottom: 14px; }
.process__step h3 { font-size: 22px; margin: 0 0 8px; letter-spacing: -.02em; }
.process__step p { font-size: 15.5px; margin: 0; }
@media (max-width: 960px) { .process { grid-template-columns: repeat(2, 1fr); } .process__step:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } .process__step + .process__step { padding-left: 0; border-left: 0; } }

/* ---------- reviews: quote wall (one big quote, avatars switch it) ---------- */
.qwall { max-width: 900px; margin-inline: auto; }
.qwall__stage { position: relative; min-height: 260px; }
.qwall__item { display: none; }
.qwall__item.is-active { display: block; animation: q-in .5s ease both; }
@keyframes q-in { from { opacity: 0; transform: translateY(10px); } }
.qwall blockquote { margin: 0; font-family: var(--heading); font-size: clamp(24px, 2.4vw + 8px, 42px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: var(--navy); }
.qwall blockquote::before { content: '\201C'; color: var(--orange); margin-right: 2px; }
.qwall blockquote::after { content: '\201D'; color: var(--orange); }
.qwall__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 22px; font-size: 14.5px; color: var(--label); }
.qwall__meta b { color: var(--navy); font-weight: 600; font-size: 16px; }
.qwall__stars { color: var(--orange-deep); letter-spacing: 2px; font-size: 13px; }
.qwall__nav { display: flex; align-items: center; gap: 10px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.qwall__btn { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--tint); cursor: pointer; opacity: .45; transform: scale(.92); transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease; }
.qwall__btn svg { display: block; width: 56px; height: 56px; }
.qwall__btn[aria-selected="true"] { opacity: 1; transform: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--orange); }
.qwall__btn:hover { opacity: 1; }
.qwall__rating { margin-left: auto; font-size: 14px; color: var(--label); }
.qwall__rating b { color: var(--navy); font-family: var(--heading); }
.qwall__count { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin-left: 8px; }
.reviews-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.reviews-cta .btn { margin: 0; }
.section--dark .qwall blockquote { color: #fff; }
.section--dark .qwall__meta, .section--dark .qwall__rating, .section--dark .qwall__count { color: rgba(255,255,255,.7); }
.section--dark .qwall__meta b, .section--dark .qwall__rating b { color: #fff; }
.section--dark .qwall__nav { border-color: rgba(255,255,255,.18); }
.section--dark .qwall__btn[aria-selected="true"] { box-shadow: 0 0 0 3px var(--navy-ink), 0 0 0 5px var(--orange); }
.platform { font-size: 13.5px; font-weight: 600; color: inherit; }
.platform::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 7px 2px 0; background: var(--orange); }
@media (max-width: 640px) { .qwall__btn { width: 48px; height: 48px; } .qwall__btn svg { width: 48px; height: 48px; } .qwall__rating { flex-basis: 100%; margin: 12px 0 0; } }

/* ---------- pull-quotes (inner pages) ---------- */
.pullquote { max-width: 820px; margin: 0 auto; padding: 0 0 0 clamp(20px, 3vw, 36px); border-left: 3px solid var(--orange); }
.pullquote blockquote { margin: 0; font-family: var(--heading); font-size: clamp(22px, 1.6vw + 12px, 30px); font-weight: 500; line-height: 1.3; color: var(--navy); letter-spacing: -.02em; }
.pullquote figcaption { margin-top: 16px; font-size: 14.5px; color: var(--label); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }
.pullquote figcaption b { color: var(--navy); font-weight: 600; }
.pullquote .stars { color: var(--orange-deep); letter-spacing: 2px; font-size: 13px; }
.pullquote--band { border-left-color: var(--orange); margin-top: 40px; text-align: left; }
.pullquote--band blockquote { color: #fff; }
.pullquote--band figcaption, .pullquote--band figcaption b { color: rgba(255,255,255,.8); }
.pullquote--band .stars { color: var(--orange); }
.quote-strip { padding: 0 0 clamp(56px, 7vw, 100px); }
.quote-strip--top { padding-top: clamp(56px, 7vw, 100px); }
.quote-strip--inset { padding: 56px 0 0; }
.srow + .svc-grid { margin-top: 40px; }

/* ---------- quote band ---------- */
.band { position: relative; background: var(--navy); padding: clamp(80px, 10vw, 150px) 0; color: #fff; }
.band__shape { display: none; }
.band .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.band h2 { font-family: var(--heading); font-size: var(--fs-title); font-weight: 700; letter-spacing: -.035em; line-height: 1; color: #fff; margin: 0 0 18px; }
.band p { max-width: 44ch; color: rgba(255,255,255,.82); font-size: 18px; margin: 0; }
.band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.band .btn { margin: 0; }
.band .pullquote--band { grid-column: 1 / -1; max-width: 820px; margin: 24px 0 0; }
@media (max-width: 880px) { .band .wrap { grid-template-columns: 1fr; } }

/* ---------- gallery: masonry, underlined word filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0 0 40px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.filter { font-family: var(--heading); font-size: 16px; font-weight: 600; letter-spacing: .02em; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--label); cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.filter:hover { color: var(--navy); }
.filter[aria-pressed="true"] { color: var(--navy); border-bottom-color: var(--orange); }
.gallery-grid { columns: 3; column-gap: 6px; }
.gallery-item { display: block; width: 100%; padding: 0; border: 0; background: var(--tint); cursor: zoom-in; overflow: hidden; margin: 0 0 6px; break-inside: avoid; }
.gallery-item picture { display: block; }
.gallery-item img { width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.03); }
.gallery-item[hidden] { display: none; }
@media (max-width: 880px) { .gallery-grid { columns: 2; } }
@media (max-width: 480px) { .gallery-grid { columns: 2; column-gap: 4px; } .gallery-item { margin-bottom: 4px; } }
.gallery-note { margin-top: 40px; }
.gallery-empty { padding: 40px 0; }
.lb { position: fixed; inset: 0; z-index: 10000; background: rgba(15,42,77,.96); display: none; align-items: center; justify-content: center; padding: 20px; }
.lb.is-open { display: flex; }
.lb img { max-width: min(92vw, 1400px); max-height: 84vh; object-fit: contain; }
.lb__cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgba(255,255,255,.85); font-size: 14px; padding: 0 70px; }
.lb__btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; transition: background .2s ease; }
.lb__btn:hover, .lb__btn:focus-visible { background: var(--orange); color: var(--navy-ink); }
.lb__close { top: 16px; right: 16px; }
.lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 16px; top: 50%; transform: translateY(-50%); }
body.lb-lock { overflow: hidden; }

/* ---------- custom cursor on photos ("View") ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 9500; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--orange); color: var(--navy-ink); display: grid; place-items: center; font-family: var(--heading); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; mix-blend-mode: normal; }
.cursor.is-on { opacity: 1; transform: none; }
@media (hover: none), (max-width: 960px) { .cursor { display: none; } }

/* ---------- FAQs ---------- */
.faq-list { max-width: 720px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { cursor: pointer; padding: 22px 48px 22px 0; font-weight: 600; color: var(--navy); font-family: var(--heading); font-size: 20px; letter-spacing: -.01em; list-style: none; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--orange); font-weight: 400; transition: transform .25s ease; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p, .faq-list details ul { padding: 0 0 22px; margin: 0; max-width: 60ch; }
.faq-list details ul { padding-left: 22px; margin-top: -8px; }
.faq-cta { max-width: 720px; margin: 48px 0 0; padding: 32px 0 0; border-top: 1px solid var(--line); }
.faq-cta h2 { font-size: var(--fs-sub); margin: 0 0 8px; letter-spacing: -.025em; }
.faq-cta p { margin: 0 0 18px; }
.faq-cta .btn { margin: 0 8px 8px 0; }

/* ---------- blog index ---------- */
.post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); padding: 32px 32px 28px; text-decoration: none; transition: background .2s ease; }
.post-card:hover, .post-card:focus-visible { background: var(--navy-ink); color: #fff; }
.post-card:hover h2, .post-card:hover .post-card__meta b { color: #fff; }
.post-card:hover p { color: rgba(255,255,255,.85); }
.post-card h2 { font-size: 26px; color: var(--navy); margin: 0 0 8px; letter-spacing: -.025em; transition: color .2s ease; }
.post-card p { font-size: 16px; margin: 0 0 16px; flex: 1; }
.post-card .more { font-weight: 700; color: var(--orange-text); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.post-card:hover .more { color: var(--orange); }
.post-card .more::after { content: ' \2192'; }
.post-card__meta { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--label); margin-bottom: 12px; }
.post-card__meta b { color: var(--navy); font-weight: 600; }
.post-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding: 44px 48px; background: var(--navy-ink); color: rgba(255,255,255,.85); border: 0; }
.post-card--featured h2 { color: #fff; font-size: var(--fs-title); line-height: 1; letter-spacing: -.03em; }
.post-card--featured p { color: rgba(255,255,255,.85); font-size: 17px; }
.post-card--featured .post-card__meta, .post-card--featured .post-card__meta b { color: rgba(255,255,255,.75); }
.post-card--featured .eyebrow { color: var(--orange); }
.post-card--featured .more { color: var(--orange); }
.post-card--featured .post-card__side { border-left: 1px solid rgba(255,255,255,.15); padding-left: 32px; font-size: 15.5px; }
.post-card--featured .post-card__side b { display: block; color: #fff; font-family: var(--heading); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.post-card--featured .post-card__side ol { margin: 0; padding-left: 20px; }
.post-card--featured .post-card__side li { margin-bottom: 6px; }
@media (max-width: 760px) { .post-list { grid-template-columns: 1fr; } .post-card--featured { grid-template-columns: 1fr; padding: 28px 24px; } .post-card--featured .post-card__side { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.15); padding-top: 20px; } }

/* ---------- blog article ---------- */
.progress { position: fixed; left: 0; top: 0; z-index: 200; height: 3px; width: 0; background: var(--orange); transition: width .1s linear; }
.article { max-width: 640px; margin-inline: auto; font-size: 18.5px; line-height: 1.7; }
.article__lead { font-size: clamp(22px, 1.4vw + 12px, 27px); line-height: 1.4; color: var(--navy); font-weight: 500; letter-spacing: -.01em; }
.article h2 { font-size: var(--fs-sub); margin-top: 2.2em; letter-spacing: -.025em; }
.article h2::before { content: ''; display: block; width: 40px; height: 3px; background: var(--orange); margin: 0 0 18px; }
.article h3 { font-size: 22px; margin-top: 1.6em; }
.article h3.article__sources { margin-top: 3em; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.article h3.article__sources + ul { font-size: 15px; color: var(--label); }
.article img { margin: 28px 0; }
.article ul, .article ol { margin: 0 0 1em; }
.article li { margin-bottom: 8px; }
.article em { font-style: normal; font-weight: 600; color: var(--navy); }
.article p + p { margin-top: -2px; }
.article .backlink { display: inline-block; margin-bottom: 28px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); font-weight: 700; text-decoration: none; }
.article .backlink:hover { text-decoration: underline; }
.toc { padding: 0 0 22px; margin: 0 0 40px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.toc b { display: block; font-family: var(--heading); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; }
.toc li { margin-bottom: 6px; break-inside: avoid; }
.toc a { color: var(--navy); text-decoration: none; font-weight: 500; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 600px) { .toc ol { columns: 1; } }
.article-cta { display: grid; grid-template-columns: 1fr auto; gap: 18px 26px; align-items: center; background: var(--navy-ink); color: #fff; padding: 28px 30px; margin: 44px 0; }
.article-cta b { display: block; font-family: var(--heading); font-size: 22px; margin-bottom: 4px; letter-spacing: -.02em; }
.article-cta p { margin: 0; font-size: 15.5px; color: rgba(255,255,255,.8); }
.article-cta .btn { white-space: nowrap; }
@media (max-width: 600px) { .article-cta { grid-template-columns: 1fr; } .article-cta .btn { width: 100%; } }
.article-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--label); }
.post-nav { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 26px; margin-top: 48px; }
.post-nav a { text-decoration: none; color: var(--navy); font-weight: 600; max-width: 48%; text-wrap: balance; }
.post-nav a:hover { text-decoration: underline; }
.post-nav small { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 4px; }
.post-nav .post-nav__next { text-align: right; margin-left: auto; }

/* ---------- fast contact block ---------- */
.fast-contact { padding: clamp(48px, 6vw, 80px) 0 0; }
.fast-contact__inner { max-width: 720px; }
.fast-contact__eyebrow { font-family: var(--heading); font-size: var(--fs-sub); font-weight: 700; color: var(--navy); margin: 0 0 20px; letter-spacing: -.025em; }
.fast-contact__buttons { display: flex; gap: 12px; }
.fast-contact__btn { flex: 1 1 0; min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 16px 14px; white-space: normal; line-height: 1.3; }
.fast-contact__note { font-size: 15px; color: var(--text); margin: 16px 0 0; }
@media (max-width: 480px) { .fast-contact__buttons { flex-direction: column; } }

/* ---------- forms ---------- */
.contact-cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 96px); padding-block: clamp(56px, 7vw, 100px); align-items: start; }
.contact-cols h2 { font-family: var(--heading); font-size: var(--fs-sub); font-weight: 700; color: var(--navy); margin: 0 0 24px; letter-spacing: -.025em; }
@media (max-width: 880px) { .contact-cols { grid-template-columns: 1fr; gap: 40px; padding-block: 44px; } }
.form-card { background: #fff; padding: 0; }
.field { display: grid; gap: 6px; margin-bottom: 20px; }
.field label, .field__label { font-weight: 600; font-size: 14px; color: var(--navy); letter-spacing: .02em; }
.field label .opt { font-weight: 400; color: var(--label); font-size: 13px; }
.field input, .field textarea, .form-card input:not(.form__hp), .form-card textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font-family: Jost, sans-serif; font-size: 16px; color: #222;
  background: #fff; border: 1.5px solid #c3cbd7; border-radius: 0; transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #9aa1ab; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,65,116,.18); }
.field textarea { min-height: 140px; resize: vertical; }
.field__hint { font-size: 13.5px; color: var(--label); }
.field__error { display: none; font-size: 14px; color: #a32620; font-weight: 500; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #c0392b; }
.form-card .btn { width: 100%; }
.form__hp { position: absolute; left: -9999px; }
.form__status { display: none; margin-top: 14px; padding: 12px 14px; font-size: 15px; }
.form__status.is-visible { display: block; }
.form__status.is-ok  { background: #e6f4ec; color: #1c6b3f; }
.form__status.is-err { background: #fdeceb; color: #a32620; }
.info h3 { font-family: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--label); text-transform: uppercase; margin: 26px 0 6px; }
.info h3:first-of-type { margin-top: 0; }
.info .val { font-size: 22px; color: var(--navy); text-decoration: none; display: inline-block; font-family: var(--heading); font-weight: 600; letter-spacing: -.01em; }
.info a.val:hover { text-decoration: underline; }
.info address.val { color: var(--text); font-style: normal; font-weight: 400; font-size: 18px; }
.info h3.info__follow { margin-bottom: 12px; }

/* ---------- 404: a slipped tile ---------- */
.notfound { padding: clamp(72px, 10vw, 140px) 0; }
.notfound .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.notfound h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -.035em; margin: 0 0 18px; }
.notfound p { font-size: 19px; max-width: 40ch; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.notfound .btn { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 1; }
.tiles i { display: block; background: var(--navy); }
.tiles i:nth-child(2n) { background: var(--navy-ink); }
.tiles i.slipped { background: var(--orange); transform: rotate(-14deg) translate(10%, 16%); transform-origin: center; }
.tiles i.mark { background: #fff url('/images/logo-mark.png') center / 70% no-repeat; }
@media (max-width: 760px) { .notfound .wrap { grid-template-columns: 1fr; } .tiles { max-width: 260px; } }

/* ---------- footer: one navy block, the wordmark as the hero of the page end ---------- */
.footer { background: var(--navy-ink); color: rgba(255,255,255,.8); font-size: 15px; padding: clamp(56px, 8vw, 112px) 0 0; border-top: 3px solid var(--orange); overflow: hidden; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__wordmark { font-family: var(--heading); font-weight: 700; font-size: clamp(44px, 9.4vw, 148px); line-height: .9; letter-spacing: -.045em; color: #fff; margin: 0 0 clamp(40px, 5vw, 72px); text-wrap: balance; }
.footer__wordmark span { color: var(--orange); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer__logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--heading); font-weight: 700; font-size: 17px; color: #fff; margin-bottom: 14px; }
.footer__logo span { color: var(--orange); }
.footer__brand p { margin: 0 0 8px; max-width: 34ch; }
.footer__license { color: #fff; font-weight: 600; }
.footer h3 { color: rgba(255,255,255,.6); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 16px; }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-content: start; }
.footer__contact a { display: block; margin-bottom: 8px; font-weight: 600; }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footer__social a { display: inline-flex; margin: 0; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding: 20px var(--gutter); display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; font-size: 13.5px; color: rgba(255,255,255,.65); }
.footer__bottom p { margin: 0; }
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- branded social buttons ---------- */
.social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.social-btn { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 999px; font-family: var(--heading); font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.2; color: var(--navy); background: #fff; border: 1.5px solid rgba(27,65,116,.25); transition: border-color .2s ease, background .2s ease; }
.social-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.social-btn--fb svg { color: #1877f2; }
.social-btn--ig svg { color: #d6249f; }
.social-btn:hover, .social-btn:focus-visible { border-color: var(--navy); background: var(--tint); text-decoration: none; }
.footer .social-btn { background: transparent; border-color: rgba(255,255,255,.25); color: #fff; }
.footer .social-btn svg { color: #fff; }
.footer .social-btn:hover { border-color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }

/* ---------- floating desktop chip ---------- */
.float-chip { position: fixed; right: 24px; bottom: 24px; z-index: 9000; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 14px 16px; background: var(--orange); color: var(--navy-ink); font-family: var(--heading); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease, background .2s ease; }
.float-chip.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.float-chip:hover { background: #ff8a3d; }
.float-chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 959px) { .float-chip { display: none; } }

/* ---------- Instagram strip: edge to edge ---------- */
.insta { padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 9vw, 140px); }
.insta__head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.insta__head h2 { font-size: var(--fs-sub); margin: 0; letter-spacing: -.025em; }
.insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.insta__grid a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--tint); position: relative; }
.insta__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.insta__grid a:hover img, .insta__grid a:focus-visible img { transform: scale(1.05); }
@media (max-width: 760px) { .insta__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- before / after: full-width dark chapter ---------- */
.ba-heading { font-family: var(--heading); font-size: var(--fs-title); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: #fff; margin: 0; text-align: left; }
.ba-layout { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 600px); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.ba-side { order: 0; }
.ba-stage { order: 1; aspect-ratio: 3 / 4; display: flex; align-items: center; }
.ba-jobs { width: 100%; position: relative; }
.ba-job { margin: 0 0 30px; }
.ba-job:last-child { margin-bottom: 0; }
html.has-js .ba-job { margin-bottom: 0; }
html.has-js .ba-job:not(.is-active):not(.is-staged) { display: none; }
html.has-js .ba-job.is-staged { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
html.has-js .ba-job.is-active { position: relative; z-index: 2; opacity: 1; visibility: visible; transition: opacity .7s ease; }
.ba-frame { display: block; position: relative; width: 100%; aspect-ratio: var(--ba-ar, 3 / 4); margin: 0 auto; overflow: hidden; background: var(--navy); }
html.has-js .ba-frame { user-select: none; -webkit-user-select: none; touch-action: none; cursor: ew-resize; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer--after { clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0); z-index: 2; }
.ba-layer--before { z-index: 1; }
.ba-layer picture { display: contents; }
.ba-layer__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%); width: 3px; z-index: 4; background: #fff; transform: translateX(-50%); cursor: ew-resize; }
html:not(.has-js) .ba-handle { display: none; }
.ba-handle__btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; display: flex; align-items: center; justify-content: center; gap: 2px; }
.ba-handle:focus-visible { outline: none; }
.ba-handle:focus-visible .ba-handle__btn { outline: 3px solid #fff; outline-offset: 3px; }
.ba-tag { position: absolute; top: 14px; z-index: 3; font-family: var(--heading); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; padding: 5px 10px; pointer-events: none; }
.ba-tag--before { right: 14px; background: rgba(15,42,77,.8); }
.ba-tag--after { left: 14px; background: var(--orange); color: var(--navy-ink); }
.ba-caption { font-family: var(--heading); font-weight: 600; color: #fff; font-size: 16px; margin-top: 12px; }
html.has-js .ba-caption { display: none; }
.ba-side .ba-intro { color: rgba(255,255,255,.75); margin: 18px 0 28px; max-width: 40ch; }
.ba-heading { margin-bottom: 28px; }
.reviews-link { margin-top: 32px; }
.ba-side__kicker { font-family: var(--heading); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 6px; }
.ba-tabs { display: none; }
html.has-js .ba-tabs { display: block; }
.ba-tab { display: block; width: 100%; font: inherit; font-family: var(--heading); font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -.02em; text-align: left; padding: 16px 0 16px 56px; border: 0; border-bottom: 1px solid rgba(255,255,255,.15); background: none; color: rgba(255,255,255,.45); cursor: pointer; position: relative; transition: color .25s ease; counter-increment: ba; }
.ba-tab::before { content: '0' counter(ba); position: absolute; left: 0; top: 22px; font-size: 12px; letter-spacing: .14em; color: var(--orange); }
.ba-tabs { counter-reset: ba; }
.ba-tab:hover { color: #fff; }
.ba-tab[aria-selected="true"] { color: #fff; }
.ba-tab.is-playing::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--orange); animation: ba-progress var(--dur, 5s) linear forwards; }
@keyframes ba-progress { to { width: 100%; } }
.ba-tour { margin: 0; }
html:not(.has-js) .ba-tour { display: none; }
.ba-tour { margin-top: 18px; }
.ba-tour__btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-family: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.ba-tour__btn:hover { color: #fff; }
.ba-tour__btn svg { width: 11px; height: 11px; fill: var(--orange); flex: none; }
.ba-cta { margin: 28px 0 0; }
@media (max-width: 880px) {
  .ba-layout { grid-template-columns: 1fr; gap: 24px; }
  .ba-side { display: contents; }
  .ba-heading { order: -4; }
  .ba-side .ba-intro { order: -3; margin: 0; }
  .ba-tour { order: -3; }
  .ba-side__kicker { order: -2; }
  html.has-js .ba-tabs { order: -1; display: flex; flex-wrap: wrap; gap: 8px; }
  .ba-tab { width: auto; font-size: 14px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.3); }
  .ba-tab::before { content: none; }
  .ba-tab[aria-selected="true"] { background: #fff; color: var(--navy-ink); border-color: #fff; }
  .ba-stage { order: 0; width: 100%; }
  .ba-cta { order: 1; margin: 8px 0 0; }
}
@media (max-width: 480px) { .ba-handle__btn { width: 40px; height: 40px; } }

/* ---------- junk removal hand-off ---------- */
.handoff { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.handoff__body h2 { font-size: var(--fs-title); letter-spacing: -.03em; line-height: 1.02; margin: 0 0 16px; }
.handoff__body > p { font-size: 17px; max-width: 52ch; }
.handoff__contact { margin-top: 18px !important; font-size: 15.5px; }
.handoff__contact a { color: var(--navy); font-weight: 600; }
.handoff__card { display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; padding: 32px; background: var(--navy-ink); color: #fff; text-decoration: none; transition: background .2s ease; }
.handoff__card:hover { background: var(--navy); }
.handoff__brand { font-family: var(--heading); font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.handoff__brand b { color: var(--orange); font-weight: 700; }
.handoff__url { font-size: 14px; font-weight: 700; color: var(--orange); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 880px) { .handoff { grid-template-columns: 1fr; } .handoff__card { min-height: 0; gap: 20px; } }

/* ---------- about ---------- */
.about-lead { font-family: var(--heading); font-size: var(--fs-title); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: var(--navy); margin: 0 0 20px; }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: clamp(48px, 6vw, 80px) 0 0; border-top: 1px solid var(--line); }
.team__card { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.team__card + .team__card { padding-left: 28px; border-left: 1px solid var(--line); }
.team__avatar { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin-bottom: 16px; }
.team__avatar svg { display: block; width: 84px; height: 84px; }
.team__card h3 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.02em; }
.team__card p { font-size: 15.5px; color: var(--text); margin: 0; line-height: 1.45; flex: 1; }
.team__rel { margin-top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin: clamp(48px, 6vw, 80px) 0 0; }
.note { padding: 22px 0 0; border-top: 2px solid var(--navy); }
.note p { font-size: 16.5px; }
.note .btn { margin-top: 4px; }
.follow { margin: clamp(48px, 6vw, 80px) 0 0; max-width: 640px; }
.follow p { font-size: 20px; color: var(--navy); font-weight: 500; }
@media (max-width: 960px) { .team { grid-template-columns: repeat(2, 1fr); } .team__card:nth-child(3) { padding-left: 0; border-left: 0; } .notes { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 480px) { .team { grid-template-columns: 1fr; } .team__card + .team__card { padding-left: 0; border-left: 0; } }

/* ---------- utilities ---------- */
.review--placeholder { display: none; }
p.eyebrow, .post-card--featured p.eyebrow, .handoff__body > p.eyebrow, .note p.eyebrow { font-size: var(--fs-micro); line-height: 1.5; margin: 0 0 14px; }
.article a:not(.backlink):not(.btn), .faq-list a:not(.btn), .srow a:not(.btn), .section-intro a:not(.btn), .gallery-note a, .handoff__contact a, .fast-contact__note a, .article-foot a, .faq-cta p a:not(.btn), .follow p a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .band .btn, .reviews-cta .btn, .faq-cta .btn, .notfound .btn, .fast-contact__btn { display: block; width: 100%; margin: 0; }
  .band__actions, .reviews-cta, .notfound__actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media print { .header, .footer, .band, .lb, .float-chip, .cursor { display: none !important; } }

/* ---------- round 3: proof line, platform glyphs, mobile primary action, two-step form ---------- */
.proof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--label); letter-spacing: .01em; }
.proof b { color: var(--navy); font-weight: 700; }
.proof > span + span::before { content: '\00B7'; margin-right: 12px; opacity: .55; }
[hidden] { display: none !important; }
.proof .stars { color: var(--orange-deep); letter-spacing: 1px; font-size: 12px; }
.band .proof, .section--dark .proof, .hero .proof { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }
.band .proof b, .section--dark .proof b, .hero .proof b { color: #fff; }
.band .proof .stars, .hero .proof .stars { color: var(--orange); }
.band .proof { grid-column: 1 / -1; margin-top: 8px; max-width: none; }
.hero__area { margin-top: 14px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.hero__area b { color: #fff; font-weight: 600; }
/* platform glyph: a lettered mark, not the word doing the work */
.platform::before { content: 'G'; width: 16px; height: 16px; border-radius: 50%; margin: 0 6px -3px 0; background: var(--navy); color: #fff; font-family: var(--heading); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; letter-spacing: 0; }
.platform--facebook::before { content: 'f'; background: #1877f2; }
.section--dark .platform--google::before, .pullquote--band .platform--google::before { background: #fff; color: var(--navy); }
/* mobile: the same two buttons as desktop (round 13); the bottom bar repeats them once the page scrolls */
.hero__cta-text { display: none; }
@media (max-width: 959px) {
  .hero__cta-text { display: inline-block; order: -1; }
  .hero__cta-quote { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
  .hero__cta-call { display: none; }
}
/* two-step quote form */
.form-step { display: block; }
.form-step[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.field .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 10px 14px; border: 1.5px solid #c3cbd7; font-family: var(--heading); font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.chips input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--orange-deep); outline-offset: 2px; }
.form-next { font-size: 14px; color: var(--label); margin: 14px 0 0; }
.form-next b { color: var(--navy); font-weight: 600; }

/* ---------- round 4: badges, review track, compact before/after, photo services, entrance motion, blog ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: #fff; color: var(--navy); font-family: var(--heading); font-size: 17px; font-weight: 500; line-height: 1; white-space: nowrap; }
.badge b { font-weight: 700; }
.badge__stars { color: var(--orange); letter-spacing: 2px; font-size: 18px; }
.badge svg { width: 20px; height: 20px; fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero__logo { width: 120px; height: 120px; margin-bottom: 26px; }
.hero__cta-row { margin-bottom: 26px; }
.hero__stats, .mosaic__label { display: none; }
@media (max-width: 640px) { .badge { font-size: 15px; padding: 10px 16px; } .hero__logo { width: 96px; height: 96px; } }
/* entrance: the hero assembles itself on load */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.hero__content > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero__content > :nth-child(1) { animation-delay: .05s; } .hero__content > :nth-child(2) { animation-delay: .15s; }
.hero__content > :nth-child(3) { animation-delay: .25s; } .hero__content > :nth-child(4) { animation-delay: .38s; } .hero__content > :nth-child(5) { animation-delay: .5s; }
.mosaic__frame { animation: settle .9s cubic-bezier(.2,.7,.2,1) both; }
.mosaic__frame:nth-child(2) { animation-delay: .15s; } .mosaic__frame:nth-child(3) { animation-delay: .3s; }
/* reviews: three across, a scroll-snap track, cards stay short */
.section--reviews { padding: clamp(56px, 6vw, 88px) 0; }
.rev-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rev-track::-webkit-scrollbar { display: none; }
.review { scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--line); padding: 24px 24px 22px; background: #fff; }
.review__stars { color: var(--orange-deep); letter-spacing: 2px; font-size: 13px; margin: 0 0 10px; }
.review__text { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review.is-open .review__text { display: block; -webkit-line-clamp: unset; }
.review__more { align-self: flex-start; margin: -10px 0 16px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-text); cursor: pointer; }
.review__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.review__avatar svg { display: block; width: 40px; height: 40px; }
.review__who > div > b { display: block; color: var(--navy); font-weight: 600; font-size: 15px; }
.review__meta { font-size: 13px; color: var(--label); display: flex; gap: 10px; flex-wrap: wrap; }
.rev-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.rev-head .sec__title { font-size: clamp(30px, 3vw, 44px); }
.rev-nav { display: flex; gap: 8px; }
.rev-nav button { width: 44px; height: 44px; border: 1.5px solid rgba(27,65,116,.3); background: #fff; color: var(--navy); font-size: 18px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.rev-nav button:hover { background: var(--navy); color: #fff; }
@media (max-width: 960px) { .rev-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .rev-track { grid-auto-columns: 86%; gap: 12px; } }
/* before/after: fits one viewport */
.section--ba { padding: clamp(48px, 5vw, 72px) 0; }
@media (min-width: 881px) { .section--ba .ba-layout { grid-template-columns: minmax(260px, 1fr) minmax(0, 520px); gap: 24px clamp(32px, 5vw, 80px); } }
.section--ba .ba-stage { aspect-ratio: auto; }
.section--ba .ba-frame { max-width: min(460px, calc((100vh - 240px) * .75)); }
.section--ba .ba-heading { margin-bottom: 20px; font-size: clamp(32px, 3.4vw, 50px); }
@media (max-width: 880px) { .section--ba .ba-frame { max-width: min(100%, calc((100vh - 320px) * .75)); } .section--ba .ba-heading { margin-bottom: 4px; } }
/* services on the home page: every photo visible */
.svc-grid--home .svc-card { aspect-ratio: 4 / 3; }
.svc-grid--home .svc-card h3 { margin: 0; font-size: 22px; }
.svc-grid--home .svc-card__body { padding: 18px 20px 20px; display: flex; align-items: center; justify-content: space-between; }
.svc-grid--home .svc-card__body::after { content: '\2192'; color: var(--orange); font-size: 20px; }
@media (max-width: 520px) { .svc-grid--home { grid-template-columns: 1fr 1fr; } .svc-grid--home .svc-card { aspect-ratio: 1; } .svc-grid--home .svc-card h3 { font-size: 16px; } .svc-grid--home .svc-card__body { padding: 12px 12px 14px; } }
/* blog index: an editorial list */
.post-index { max-width: 860px; }
.post-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px 28px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); }
.post-row:last-child { border-bottom: 1px solid var(--line); }
.post-row__meta { font-family: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.post-row h2 { grid-column: 2; margin: 0 0 6px; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.025em; color: var(--navy); transition: color .2s ease; }
.post-row p { grid-column: 2; margin: 0; font-size: 16px; max-width: 58ch; }
.post-row .arrow-link { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.post-row:hover h2 { color: var(--orange-text); }
.post-row:hover .arrow-link::after { transform: translateX(4px); }
@media (max-width: 640px) { .post-row { grid-template-columns: 1fr; gap: 6px; } .post-row h2, .post-row p, .post-row .arrow-link { grid-column: 1; grid-row: auto; } }
/* article: keep reading */
.more-posts { border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0; }
.more-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 28px; }
.more-post { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: background .2s ease, color .2s ease; }
.more-post span { font-family: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 10px; }
.more-post h3 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.02em; }
.more-post p { font-size: 14.5px; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.more-post:hover { background: var(--navy-ink); color: rgba(255,255,255,.85); }
.more-post:hover h3 { color: #fff; }
.more-post:hover span { color: var(--orange); }
@media (max-width: 760px) { .more-posts__grid { grid-template-columns: 1fr; } }
/* article rhythm */
.article { font-size: 18px; }
.article__lead { margin-bottom: 1.4em; }
.toc { border: 0; padding: 22px 26px; background: #f6f8fb; }
/* about: quieter */
.about-lead { font-size: clamp(30px, 3.2vw, 46px); }
.team { gap: 0; }
.notes { margin-top: clamp(40px, 5vw, 64px); }
.follow { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); }
.follow p { margin: 0; font-size: 17px; font-weight: 500; }
.footer__wordmark { display: none; }

/* ---------- round 5: hero refinement, Google logotype, rating highlight, review cards, trust badges ---------- */
.hero .eyebrow { display: none; }
.hero__logo { margin-bottom: 30px; }
/* mosaic: a taller left frame and two offset right frames, each photo drifting slowly in its own direction */
.mosaic { grid-template-columns: 1.2fr 1fr; gap: 6px; padding: 6px 0 6px 6px; }
.mosaic__frame:nth-child(2) { margin-top: 6vh; }
.mosaic__frame:nth-child(3) { margin-bottom: 6vh; }
.mosaic__frame img { transition: opacity 1.4s ease, transform 9s linear; transform: scale(1.02); }
.mosaic__frame img.is-on { transform: scale(1.1) translate(-1.5%, -1%); }
.mosaic__frame:nth-child(2) img.is-on { transform: scale(1.1) translate(1.5%, 1%); }
.mosaic__frame:nth-child(3) img.is-on { transform: scale(1.1) translate(-1%, 1.5%); }
.mosaic__frame::after { height: 0; }
.mosaic__frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mosaic::before { width: 160px; }
@keyframes frame-in { from { opacity: 0; transform: translateX(40px) scale(1.04); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.mosaic__frame { animation: frame-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
.mosaic__frame:nth-child(1) { animation-delay: .25s; } .mosaic__frame:nth-child(2) { animation-delay: .45s; } .mosaic__frame:nth-child(3) { animation-delay: .65s; }
.hero__content > * { animation-duration: .9s; }
@media (max-width: 960px) { .mosaic { padding: 0; gap: 4px; } .mosaic__frame:nth-child(2), .mosaic__frame:nth-child(3) { margin: 0; } }
@media (prefers-reduced-motion: reduce) { .mosaic__frame, .hero__content > * { animation: none; } .mosaic__frame img.is-on, .mosaic__frame:nth-child(2) img.is-on, .mosaic__frame:nth-child(3) img.is-on { transform: none; } }
/* Google logotype in its brand colours */
.g-logo { font-family: 'Product Sans', 'Google Sans', Arial, Helvetica, sans-serif; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.g-logo b, .review__who .g-logo b { display: inline; font-weight: inherit; color: inherit; font-size: inherit; }
.g-logo b:nth-child(1) { color: #4285f4; } .g-logo b:nth-child(2) { color: #ea4335; } .g-logo b:nth-child(3) { color: #fbbc05; }
.g-logo b:nth-child(4) { color: #4285f4; } .g-logo b:nth-child(5) { color: #34a853; } .g-logo b:nth-child(6) { color: #ea4335; }
.platform--google::before { content: 'G'; font-family: Arial, Helvetica, sans-serif; background: #fff; color: #4285f4; box-shadow: inset 0 0 0 1px rgba(27,65,116,.2); }
/* rating highlight under the hero */
.rating-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 28px; }
.rating-hero__num { font-family: var(--heading); font-size: clamp(56px, 6vw, 84px); font-weight: 700; line-height: .9; letter-spacing: -.04em; color: var(--navy); }
.rating-hero__stars { color: var(--orange); font-size: clamp(26px, 2.6vw, 36px); letter-spacing: 3px; line-height: 1; }
.rating-hero__text { font-family: var(--heading); font-size: 17px; color: var(--label); margin: 6px 0 0; }
.rating-hero__text b { color: var(--navy); font-weight: 600; }
.rating-hero .rev-nav { margin-left: auto; }
/* review cards: tinted, quoted, quick to scan */
.review { background: #f4f6fa; border: 0; border-top: 3px solid var(--orange); padding: 26px 24px 22px; position: relative; }
.review::before { content: '\201C'; position: absolute; right: 18px; top: 4px; font-family: var(--heading); font-size: 84px; line-height: 1; color: rgba(242,117,39,.18); font-weight: 700; }
.review__stars { font-size: 15px; letter-spacing: 3px; color: var(--orange); }
.review__text { font-size: 16px; line-height: 1.5; -webkit-line-clamp: 5; }
.review__who b { font-size: 16px; }
.review__meta { font-size: 13px; }
/* trust badges under every CTA band */
.trust { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; margin-top: 16px; }
.trust .badge { font-size: 15.5px; padding: 11px 18px; }
.trust .badge .badge__stars { font-size: 16px; }
.section--dark .badge, .band .badge { background: #fff; color: var(--navy); }
/* about: follow block with large social buttons; placeholder team photo */
.follow { display: block; border-top: 0; padding-top: 0; }
.follow .sec__title { margin-bottom: 18px; }
.social-row--lg .social-btn { font-size: 18px; padding: 16px 26px 16px 20px; }
.social-row--lg .social-btn svg { width: 26px; height: 26px; }
.team-placeholder { aspect-ratio: 4 / 3; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
.team-placeholder img { width: 96px; height: 96px; border-radius: 50%; background: #fff; }
.team-placeholder p { color: #fff; font-family: var(--heading); font-weight: 500; font-size: 16px; letter-spacing: .02em; margin: 0; }

/* ---------- round 6: Google review badge, service photo lightbox, junk logo mark, about FAQ ---------- */
.gbadge { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 18px 10px 14px; border-radius: 12px; background: #fff; color: #202124; text-decoration: none; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.gbadge__g { grid-row: 1 / span 2; width: 38px; height: 38px; }
.gbadge__label { font-size: 12.5px; color: #5f6368; line-height: 1.2; }
.gbadge__row { display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.gbadge__num { font-size: 20px; font-weight: 700; color: #202124; }
.gbadge__stars { color: #fbbc05; font-size: 17px; letter-spacing: 1px; }
.gbadge__count { font-size: 12.5px; color: #5f6368; }
.gbadge--lg .gbadge__g { width: 48px; height: 48px; } .gbadge--lg .gbadge__num { font-size: 26px; } .gbadge--lg .gbadge__stars { font-size: 22px; }
.g-mark { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .3em; }
.platform--google::before { content: none; }
.rating-hero { gap: 16px 28px; }
.rating-hero__num, .rating-hero__stars { display: none; }
.rating-hero__text { margin: 0; }
.trust .gbadge, .badges .gbadge { padding: 8px 16px 8px 12px; }
.trust .gbadge .gbadge__g, .badges .gbadge .gbadge__g { width: 34px; height: 34px; }
/* project photos open a lightbox */
.has-photo-open { position: relative; }
.photo-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: zoom-in; padding: 0; }
.photo-open::after { content: '\2922'; position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; display: grid; place-items: center; background: rgba(15,42,77,.85); color: #fff; font-size: 18px; opacity: 0; transition: opacity .2s ease; }
.has-photo-open:hover .photo-open::after, .photo-open:focus-visible::after { opacity: 1; }
.banner__img .photo-open { z-index: 1; }
.banner .wrap { pointer-events: none; }
.banner .wrap a, .banner .wrap button { pointer-events: auto; }
/* junk-removal service photo carries the sister brand's mark */
.srow__media { position: relative; }
.srow__media img.srow__mark { position: absolute; left: 14px; top: 14px; z-index: 2; width: 64px; height: 64px; aspect-ratio: 1; object-fit: contain; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; }
/* about: questions as an accordion */
.about-faq { margin-top: clamp(40px, 5vw, 64px); }
.about-faq .faq-list { max-width: none; }
.about-faq details p:last-child { padding-bottom: 22px; }

/* ---------- round 7: nav matched to phdjunkremoval.com, triptych hero, Facebook badge, slider edges, smooth FAQ ---------- */
.header { box-shadow: 0 1px 0 rgba(255,255,255,.06); transition: box-shadow .25s ease; }
.header.is-stuck { box-shadow: 0 2px 14px rgba(0,0,0,.22); }
.header__inner { padding: 14px 20px; max-width: 1290px; }
.nav { gap: 26px; }
.nav a { position: relative; font-size: 15px; letter-spacing: .5px; padding-bottom: 2px; }
.nav a:not(.nav__phone)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav a:not(.nav__phone):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav__phone { font-weight: 600 !important; color: #fff !important; background: var(--orange); padding: 8px 14px !important; border-radius: 999px; margin-left: 6px; transition: background .25s ease, transform .25s ease; }
.nav__phone:hover { background: var(--orange-deep); transform: translateY(-1px); }
@media (max-width: 960px) {
  .header__inner { padding: 8px 16px; }
  .nav { top: 56px; right: 12px; left: 12px; background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); border-top: 0; padding: 8px 18px; }
  .nav a { color: var(--navy); padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .nav a::after { content: none !important; }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--orange-text) !important; }
  .nav__phone { margin: 10px 0 4px; text-align: center; color: #fff !important; }
}
/* hero: three equal panels, full height */
.mosaic { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: 4px; padding: 0; }
.mosaic__frame--tall { grid-row: auto; }
.mosaic__frame:nth-child(2), .mosaic__frame:nth-child(3) { margin: 0; }
.mosaic::before { width: 200px; }
@media (max-width: 960px) { .mosaic { aspect-ratio: 3 / 2; } }
/* Facebook rating badge, same shape as the Google one */
.gbadge--fb .gbadge__g { color: #1877f2; }
.gbadge--fb .gbadge__stars { color: #1877f2; }
.rating-hero .gbadge { margin-right: 4px; }
/* FAQ */
.faq-cta { border-top: 0; padding-top: 0; }
.faq-body { will-change: height; }
.faq-list summary::after { transition: transform .3s cubic-bezier(.2,.7,.2,1); }

/* ---------- round 8: single-frame hero ---------- */
.mosaic--single { grid-template-columns: 1fr; gap: 0; }
.mosaic--single .mosaic__frame { animation: frame-in 1.2s cubic-bezier(.2,.7,.2,1) .2s both; }
.mosaic--single .mosaic__frame img { transition: opacity 1.6s ease, transform 11s linear; }
.mosaic--single .mosaic__frame img.is-on { transform: scale(1.08) translate(-1%, -.5%); }
.mosaic--single::before { width: 260px; }
.hero h1 { margin-right: 0; text-shadow: none; }
@media (max-width: 960px) { .mosaic--single { aspect-ratio: 4 / 3; } }

/* ---------- round 8b: large photo with an inset second photo ---------- */
.mosaic--inset { grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 0; }
.mosaic--inset .mosaic__frame--main { grid-area: 1 / 1; }
.mosaic--inset .mosaic__frame--inset { grid-area: 1 / 1; align-self: end; justify-self: start; width: 32%; aspect-ratio: 4 / 5; margin: 0 0 48px 40px; z-index: 4; box-shadow: 0 24px 60px rgba(0,0,0,.45); outline: 6px solid var(--navy-ink); animation-delay: .6s; }
.mosaic--inset .mosaic__frame--inset::before { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.mosaic--inset .mosaic__frame img { transition: opacity 1.6s ease, transform 11s linear; }
.mosaic--inset .mosaic__frame img.is-on { transform: scale(1.08) translate(-1%, -.5%); }
.mosaic--inset::before { width: 260px; }
@media (max-width: 960px) { .mosaic--inset { aspect-ratio: 4 / 3; } .mosaic--inset .mosaic__frame--inset { width: 34%; margin: 0 0 16px 16px; outline-width: 4px; } }

/* ---------- round 8c: full-bleed photo behind the whole hero, navy scrim, slow rotation ---------- */
.hero--bleed .hero__inner { grid-template-columns: 1fr; min-height: clamp(620px, 90vh, 900px); }
.hero--bleed .hero__content { max-width: 720px; padding-right: var(--gutter); }
.hero--bleed .mosaic { position: absolute; inset: 0; z-index: -1; display: block; padding: 0; min-height: 0; }
.hero--bleed .mosaic::before { content: none; }
.hero--bleed .mosaic__frame { position: absolute; inset: 0; animation: none; }
.hero--bleed .mosaic__frame::before { content: none; }
.hero--bleed .mosaic__frame img { transition: opacity 1.8s ease, transform 14s linear; object-position: 60% 50%; }
.hero--bleed .mosaic__frame img.is-on { transform: scale(1.08) translate(-1%, 0); }
.hero--bleed .mosaic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,42,77,.96) 0%, rgba(15,42,77,.88) 38%, rgba(15,42,77,.45) 70%, rgba(15,42,77,.2) 100%), linear-gradient(0deg, rgba(15,42,77,.6) 0%, rgba(15,42,77,0) 45%); }
.hero--bleed .hero__logo, .hero--bleed h1, .hero--bleed .hero__cta-row, .hero--bleed .badges { position: relative; z-index: 2; }
.hero--bleed h1 { max-width: 11ch; }
@media (max-width: 960px) {
  .hero--bleed .hero__inner { min-height: 0; }
  .hero--bleed .hero__content { padding: 56px var(--gutter) 60px; }
  .hero--bleed .mosaic { aspect-ratio: auto; }
  .hero--bleed .mosaic::after { background: linear-gradient(180deg, rgba(15,42,77,.92) 0%, rgba(15,42,77,.86) 100%); }
}

/* ---------- round 8d: photo on the right half only, no wash over it ---------- */
.hero--bleed .mosaic { left: 50%; width: 50%; inset: 0 0 0 50%; }
.hero--bleed .mosaic::after { background: linear-gradient(90deg, var(--navy-ink) 0%, rgba(15,42,77,0) 22%); }
.hero--bleed .hero__content { max-width: 50%; padding-right: 32px; }
.hero--bleed h1 { max-width: 9.5ch; }
@media (max-width: 960px) {
  .hero--bleed .mosaic { position: relative; inset: auto; left: auto; width: 100%; aspect-ratio: 4 / 3; z-index: 0; }
  .hero--bleed .mosaic::after { background: linear-gradient(180deg, var(--navy-ink) 0%, rgba(15,42,77,0) 18%); }
  .hero--bleed .hero__content { max-width: none; padding: 48px var(--gutter) 40px; }
}

/* ---------- round 9 (client notes, Sept 7) ---------- */
/* 1. hero fits the first screen under the 69px header */
.hero--bleed .hero__inner { min-height: min(calc(100vh - 69px), 780px); min-height: min(calc(100svh - 69px), 780px); }
.hero--bleed .hero__content { padding-top: 40px; padding-bottom: 48px; }
.hero--bleed .hero__logo { width: 96px; height: 96px; margin-bottom: 22px; }
.hero--bleed h1 { font-size: clamp(44px, 5.6vw, 84px); margin-bottom: 26px; }
.hero--bleed .hero__cta-row { margin-bottom: 22px; }
/* 5. photo blends into the navy over a longer run */
.hero--bleed .mosaic::after { background: linear-gradient(90deg, var(--navy-ink) 0%, rgba(15,42,77,.9) 10%, rgba(15,42,77,.6) 24%, rgba(15,42,77,.25) 38%, rgba(15,42,77,.06) 50%, rgba(15,42,77,0) 60%); }
@media (max-width: 960px) {
  .hero--bleed .hero__content { padding-top: 40px; padding-bottom: 36px; }
  .hero--bleed .mosaic::after { background: linear-gradient(180deg, var(--navy-ink) 0%, rgba(15,42,77,.7) 12%, rgba(15,42,77,.25) 26%, rgba(15,42,77,0) 40%); }
}
/* 4. Facebook mark in Facebook blue wherever it appears */
.gbadge--fb .gbadge__g { fill: #1877f2; }
/* 2, 3, 6. reviews: plain centred "Reviews" title, arrows to the right, both review links side by side */
.section-head--center { text-align: center; }
.rev-head--center { position: relative; display: block; text-align: center; margin-bottom: clamp(28px, 3vw, 40px); }
.rev-head--center .section-head { font-size: var(--fs-title); }
.rev-head--center .rev-nav { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.reviews-link--pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
@media (max-width: 760px) {
  .rev-head--center .rev-nav { position: static; transform: none; justify-content: center; margin-top: 14px; }
}
.footer__license { color: rgba(255,255,255,.55); font-weight: 400; font-size: 13.5px; }
/* 9, 10. service page header photo fills the banner again (the lightbox no longer claims it) */
.banner__img, .banner__img.has-photo-open { position: absolute; }
/* 11. FAQ and blog content centred on the page */
.faq-list, .faq-cta, .post-index { margin-inline: auto; }
.banner--center h1, .banner--center p { margin-inline: auto; text-align: center; }
.banner--center h1 { max-width: 16ch; }
.banner--center p { max-width: 56ch; }
.rev-head--center .section-head { text-align: center; }
.banner--center .banner__meta { margin-inline: auto !important; }

/* ---------- round 10 (client notes, Sept 7) ---------- */
/* 2. "Licensed & insured" as the junk site's glass pill; the closing block repeats the hero's badge row */
.fact { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); color: #fff; font-family: var(--heading); font-size: 16px; font-weight: 500; line-height: 1.3; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fact svg { width: 19px; height: 19px; color: #fff; flex: none; }
/* 3. before/after: the junk site's photo window (rounded frame, shadow, orange divider, glass tags) inside the original side-panel layout */
html.has-js .section--ba .ba-jobs { display: grid; align-items: center; }
html.has-js .section--ba .ba-job { grid-area: 1 / 1; margin: 0; position: relative; inset: auto; }
html.has-js .section--ba .ba-job.is-staged { position: relative; inset: auto; opacity: 0; visibility: hidden; transition: opacity .7s cubic-bezier(.2,.7,.2,1), visibility 0s linear .7s; }
html.has-js .section--ba .ba-job.is-active { opacity: 1; visibility: visible; transition: opacity .7s cubic-bezier(.2,.7,.2,1); }
.section--ba .ba-frame { max-width: min(460px, calc((100vh - 240px) * .75)); border-radius: 12px; }
html.has-js .section--ba .ba-frame { box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.section--ba .ba-handle { width: 4px; background: var(--orange); }
.section--ba .ba-handle__btn { width: 44px; height: 44px; box-shadow: 0 2px 10px rgba(0,0,0,.35); transition: transform .15s cubic-bezier(.2,.7,.2,1); }
.section--ba .ba-handle:hover .ba-handle__btn { transform: translate(-50%, -50%) scale(1.06); }
.section--ba .ba-handle:focus-visible .ba-handle__btn { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--navy); }
.section--ba .ba-tag { top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 1px; padding: 5px 12px; color: #fff; background: rgba(20,40,70,.35); border: 1px solid rgba(255,255,255,.45); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.section--ba .ba-tag--before { right: 12px; }
.section--ba .ba-tag--after { left: 12px; }
.section--ba .ba-tag--after::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin-right: 7px; vertical-align: 1px; }
@keyframes tab-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 880px) {
  .section--ba .ba-frame { max-width: min(100%, calc((100vh - 320px) * .75)); }
}
@media (max-width: 480px) { .section--ba .ba-handle__btn { width: 38px; height: 38px; } }

/* ---------- round 11: badge rows — Google + Facebook side by side, licence pill on its own line beneath ---------- */
.badges, .trust { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px; justify-content: start; align-items: stretch; }
.badges .fact, .trust .fact { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
.badges { margin-top: 10px; }
.trust { margin-top: 18px; }
@media (max-width: 480px) { .badges, .trust { grid-template-columns: max-content; } .badges .fact, .trust .fact { grid-column: 1; } }

/* ---------- round 12: every page title centred; review cards without avatars; junk page intro shortened ---------- */
.banner--center .wrap { text-align: center; }
.banner--center .banner__kicker { text-align: center; }
.banner--center h1 { max-width: 14ch; }
.banner--photo.banner--center { align-items: center; }
.review__who { gap: 0; }

/* ---------- round 13 (client notes, Sept 7) ---------- */
/* 1-2. before/after: one centred label at the top of the photo. "Before" sits on the before layer and "After" on the
   after layer, so the divider unveils "After" as it sweeps past the middle. Orange dot removed. */
.section--ba .ba-layer .ba-tag { position: absolute; z-index: 3; top: 12px; left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
.section--ba .ba-tag--after::before { content: none; }
.section--ba .ba-layer .ba-tag--after { background: var(--orange); border-color: var(--orange); color: var(--navy-ink); }
/* 6. the coloured Instagram pill carries the official gradient glyph as an image */
.social-btn img { width: 20px; height: 20px; flex: none; }
.social-row--lg .social-btn img { width: 26px; height: 26px; }
/* 7. call-or-text choice sits beside its sentence */
.pref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 2px; }
.chips--sm span { padding: 7px 12px; font-size: 13px; }
/* 12. contact page: "Reach out to us" on the left, the form on the right */
.contact-cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 880px) { .contact-cols { grid-template-columns: 1fr; } }
.contact-cols__sub { margin: -14px 0 22px; color: var(--label); }
.info__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
@media (max-width: 480px) { .info__actions { flex-direction: column; } .info__actions .btn { width: 100%; } }
/* 14. the same two buttons in every call-to-action */
.article-cta__actions { display: flex; flex-direction: column; gap: 10px; }
.cta-pair { display: flex; flex-wrap: wrap; gap: 10px; }
.notfound__home { margin: 22px 0 0; }
.hero__cta-text, .hero__cta-call { display: inline-block; }
@media (max-width: 600px) { .article-cta__actions { width: 100%; } .cta-pair .btn { width: 100%; } }
/* 16. nav phone number: solid brand orange with square corners, styled like every other button */
.nav__phone { border-radius: 0; color: var(--navy-ink) !important; font-weight: 700 !important; padding: 11px 16px !important; letter-spacing: .08em; }
.nav__phone:hover, .nav__phone:focus-visible { background: #ff8a3d; transform: none; }
@media (max-width: 960px) { .nav__phone { color: var(--navy-ink) !important; } }

/* ---------- round 14 (client notes, Sept 7) ---------- */
/* 1-2. nav + footer logo in the same white disc as the hero logo; brand text keeps a normal word space */
.header__brand img, .footer__logo img { border-radius: 50%; background: #fff; padding: 2px; }
.header__brand b, .footer__logo b { font-weight: inherit; }
/* 4. gallery filters centred */
.filters { justify-content: center; }
/* 7, 11. review cards: rounded, orange rule on the bottom; rounded arrow buttons */
.review { border-top: 0; border-bottom: 3px solid var(--orange); border-radius: 12px; overflow: hidden; }
.rev-nav button { border-radius: 10px; }
/* 10. quiet outline button for "See all … projects" */
.btn--outline { background: transparent; border-color: rgba(27,65,116,.35); color: var(--navy); font-weight: 600; }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--tint); border-color: var(--navy); color: var(--navy); }

/* ---------- round 15 (client notes, Sept 7) ---------- */
/* 1. no oversized quotation mark on review cards */
.review::before { content: none; }
/* 3. "Keep reading" as a quiet grey label, centred; bottom "All posts" on the right */
.more-posts .section-head--solo { text-align: center; font-size: 28px; letter-spacing: .18em; text-transform: uppercase; color: #9aa1ab; font-weight: 700; margin-bottom: 44px; }   /* #9aa1ab is the form placeholder grey */
.more-posts { border-top: 0; margin-top: clamp(24px, 4vw, 56px); }
.more-posts .section-head--solo em { color: inherit; font-style: normal; }
.more-posts__all { text-align: right; margin: 0; }
/* 4. room above the top "All posts" link */
.article .backlink { margin-top: clamp(36px, 5vw, 64px); }
/* 5. the form sits in its own card */
.form-card { border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 14px 40px rgba(27,65,116,.07); }
.form-card .form-next { margin-top: 18px; }

/* ---------- motion layer: scroll reveals, hover lift, banner entrance (js/motion.js sets html.has-motion) ---------- */
.has-motion .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--rv-delay, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--rv-delay, 0ms); }
.has-motion .rv.is-in { opacity: 1; transform: none; }
.has-motion .rv.rv--now { transition-duration: .5s; }
.has-motion .rv.is-in.rv--settled { transition: none; }
/* inner page titles rise in */
.has-motion .banner .wrap > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.has-motion .banner .wrap > :nth-child(2) { animation-delay: .12s; }
.has-motion .banner .wrap > :nth-child(3) { animation-delay: .24s; }
.has-motion .banner--photo .banner__img img { will-change: transform; transform: scale(1.08); }
/* hover lift on cards and badges */
.has-motion .review, .has-motion .more-post, .has-motion .post-card, .has-motion .gbadge, .has-motion .social-btn, .has-motion .svc-card, .has-motion .fact { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1), background .2s ease, color .2s ease, border-color .2s ease; }
.has-motion .review:hover, .has-motion .more-post:hover, .has-motion .post-card:hover, .has-motion .gbadge:hover, .has-motion .social-btn:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,42,77,.12); }
.has-motion .svc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,42,77,.22); }
.has-motion .svc-card img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.has-motion .gallery-item:hover { transform: translateY(-3px); }
.has-motion .gallery-item { transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .8s cubic-bezier(.2,.7,.2,1) var(--rv-delay, 0ms); }
/* buttons press */
.has-motion .btn:active, .has-motion .nav__phone:active { transform: scale(.97); }
.has-motion .btn--orange:hover, .has-motion .btn--light:hover { box-shadow: 0 10px 24px rgba(15,42,77,.18); }
/* header compacts once the page scrolls */
.has-motion .header__inner { transition: padding .3s ease; }
.has-motion .header.is-stuck .header__inner { padding-top: 8px; padding-bottom: 8px; }
/* form fields glow into focus */
.has-motion .field input, .has-motion .field textarea { transition: border-color .2s ease, box-shadow .25s ease; }
.has-motion .chips span { transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.has-motion .chips input:checked + span { transform: scale(1.04); }
/* footer links slide */
.has-motion .footer__nav a { transition: transform .25s ease; display: inline-block; }
.has-motion .footer__nav a:hover { transform: translateX(3px); text-decoration: none; }

/* ---------- round 16 ---------- */
/* 1. contact page: the section already carries its own padding, so the columns add none */
.contact-cols { padding-block: 0; }
/* 2. the menu bar drops in and the page background fades in on load; titles follow */
@keyframes fade-in { from { opacity: 0; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } }
.has-motion .header__inner { animation: drop-in .7s cubic-bezier(.2,.7,.2,1) .1s both; }   /* the bar itself stays put, so no gap opens under it */
/* the page arrives from behind a navy curtain that fades away (no white flash: the curtain is the brand navy) */
.has-motion body::before { content: ''; position: fixed; inset: 0; z-index: 2000; background: var(--navy-ink); pointer-events: none; animation: curtain .6s ease both; }
@keyframes curtain { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
.has-motion .banner .wrap > * { animation-delay: .25s; }
.has-motion .banner .wrap > :nth-child(2) { animation-delay: .37s; }
.has-motion .banner .wrap > :nth-child(3) { animation-delay: .49s; }
/* hero: more air between the two buttons and the rating badges */
.hero--bleed .hero__cta-row { margin-bottom: 40px; }
@media (max-width: 640px) { .hero--bleed .hero__cta-row { margin-bottom: 32px; } }
/* hero + closing block: Google / Facebook badges as frosted glass, slightly see-through */
.badges .gbadge, .trust .gbadge { background: rgba(255,255,255,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.55); }
.badges .gbadge:hover, .trust .gbadge:hover { background: rgba(255,255,255,.96); }
/* hero + closing block: badges as dark glass on the navy, content flipped to light so it stays legible */
.badges .gbadge, .trust .gbadge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); color: #fff; box-shadow: none; }
.badges .gbadge:hover, .trust .gbadge:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); }
.badges .gbadge__label, .trust .gbadge__label, .badges .gbadge__count, .trust .gbadge__count { color: rgba(255,255,255,.78); }
.badges .gbadge__num, .trust .gbadge__num { color: #fff; }
.badges .gbadge--fb .gbadge__g, .trust .gbadge--fb .gbadge__g { fill: #4d9bff; }
.badges .gbadge--fb .gbadge__stars, .trust .gbadge--fb .gbadge__stars { color: #6fb0ff; }
/* review cards: the scrolling track gets breathing room so the hover shadow is never clipped at its edges */
.rev-track { padding: 16px 12px 36px; margin: -16px -12px -36px; scroll-padding-inline: 12px; }
.rev-track > .review:first-child { scroll-margin-left: 12px; }
.has-motion .review:hover { box-shadow: 0 12px 26px rgba(15,42,77,.12); }
/* menu: labels never wrap; tighten spacing on narrow laptops so "Contact for Estimate" and the number fit on one line */
.nav a { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1180px) {
  .nav { gap: 16px; }
  .nav a { font-size: 13.5px; letter-spacing: .3px; }
  .nav__phone { padding: 10px 12px !important; margin-left: 2px; }
  .header__brand { font-size: 17px; }
}

/* ---------- round 22: phone layouts centred (desktop untouched) ---------- */
@media (max-width: 760px) {
  /* hero */
  .hero__content { text-align: center; }
  .hero__logo { margin-inline: auto; }
  .hero h1, .hero--bleed h1 { margin-inline: auto; }
  .hero__cta-row { justify-content: center; }
  .badges, .trust { justify-content: center; }
  .badges .fact, .trust .fact { justify-self: center; }
  .hero__area { text-align: center; }
  /* before & after */
  .ba-heading { text-align: center; }
  html.has-js .ba-tabs { justify-content: center; }
  .ba-caption { text-align: center; }
  /* closing block */
  .band .wrap { text-align: center; }
  .band h2, .band p { margin-inline: auto; }
  .band__actions { justify-content: center; }
  /* FAQ + blog prompts, about buttons */
  .faq-cta { text-align: center; }
  .faq-cta p { margin-inline: auto; }
  .article-cta { text-align: center; }
  .cta-pair { justify-content: center; }
  .more-posts__all { text-align: center; }
  /* contact page left column */
  .contact-cols .info { text-align: center; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .contact-cols { gap: 48px; }
  .info__actions { align-items: center; }
  .info .social-row { justify-content: center; }
  /* 404 */
  .notfound { text-align: center; }
  .notfound p { margin-inline: auto; }
  .notfound__actions { align-items: stretch; }
  .contact-cols > div:not(.info) h2, .contact-cols__sub { text-align: center; }
  /* footer stays left-aligned on phones (round 24) */
  /* rating badges keep their internal left alignment when the block around them is centred */
  .gbadge { text-align: left; }
  /* FAQ prompt: stacked buttons get a gap */
  .faq-cta .btn + .btn { margin-top: 10px; }
  /* service pages: button row under the review */
  .hero__cta-row--after-review { margin-top: 28px; justify-content: center; }
  .hero__cta-row--after-review .btn { flex: 1 1 100%; }
}
/* before/after on touch screens: the photo scrolls with the page; only the knob drags */
html .section--ba .ba-frame, html .ba-frame { touch-action: pan-y; }
html .section--ba .ba-handle, html .ba-handle { touch-action: none; }

/* ---------- round 25: phone-only ---------- */
@media (max-width: 760px) {
  /* 1. service pages: more air between the review and the button row */
  .hero__cta-row--after-review { margin-top: 48px; }
  /* 2. rating badges: content centred as a group inside equal-width pills */
  .badges .gbadge, .trust .gbadge { justify-content: center; }
  /* 3. hero photo first, so it is on screen without scrolling; the photo fades down into the navy text block */
  .hero--bleed .mosaic { order: -1; aspect-ratio: 16 / 10; }
  .hero--bleed .mosaic::after { background: linear-gradient(0deg, var(--navy-ink) 0%, rgba(15,42,77,.55) 26%, rgba(15,42,77,0) 60%); }
  .hero--bleed .hero__content { padding-top: 8px; padding-bottom: 44px; }
  .hero--bleed .hero__logo { width: 208px; height: 208px; margin-bottom: 20px; }
}
@media (max-width: 760px) {
  /* hero photos crop to each photo's tile focal point on phones (desktop keeps 60% 50%) */
  .hero--bleed .mosaic__frame img { object-position: var(--focus-m, 60% 50%); }
  /* rating badge icon centred against all three text rows */
  .gbadge__g { grid-row: 1 / span 3; align-self: center; }
}
@media (max-width: 760px) {
  /* review arrows sit dead centre in their boxes */
  .rev-nav button { display: inline-flex; align-items: center; justify-content: center; padding: 0 0 2px; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
}
/* phones: no blue flash on tap (the browser's default tap highlight); keyboard focus outlines are unaffected */
@media (max-width: 760px), (hover: none) {
  a, button, summary, label, .chips span, .btn, .ba-handle, .ba-tab, .gallery-item, .review__more, .filter { -webkit-tap-highlight-color: transparent; }
}
@media (max-width: 760px) {
  /* hero content pulled up: shorter photo, and the logo overlaps the photo's bottom edge */
  .hero--bleed .mosaic { aspect-ratio: 16 / 9; }
  .hero--bleed .hero__content { padding-top: 0; }
  .hero--bleed .hero__logo { margin-top: -96px; position: relative; z-index: 3; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
  .hero--bleed .mosaic::after { background: linear-gradient(0deg, var(--navy-ink) 0%, rgba(15,42,77,.45) 22%, rgba(15,42,77,0) 55%); }
}
@media (max-width: 760px) {
  /* review cards: bigger five stars */
  .review__stars { font-size: 26px; letter-spacing: 3px; line-height: 1; margin-bottom: 14px; }
}
@media (max-width: 760px) {
  /* page titles never break out of the screen: smaller display size on phones, long words may hyphenate */
  .banner h1, .banner--center h1 { font-size: clamp(34px, 10.5vw, 52px); max-width: 100%; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
}
/* review cards: while one is expanded the others keep their height instead of stretching with it */
.rev-track.has-open { align-items: start; }
.rev-track.has-open .review.is-open { height: auto; }
/* rating badges: the Google G / Facebook f is centred against all three text rows on every screen size */
.gbadge__g { grid-row: 1 / span 3; align-self: center; }
/* service pages (desktop): the three buttons always stack one per line, like the other service pages */
@media (min-width: 761px) {
  .srow .hero__cta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .srow .hero__cta-row .btn { margin: 0; }
}
/* moving between pages of the site: no curtain, no header replay — just the quick crossfade and a brisk title rise */
.has-motion.is-internal body::before { display: none; }
.has-motion.is-internal .header__inner { animation: none; }
.has-motion.is-internal .banner .wrap > * { animation-duration: .5s; animation-delay: 0s; }
.has-motion.is-internal .banner .wrap > :nth-child(2) { animation-delay: .08s; }
.has-motion.is-internal .banner .wrap > :nth-child(3) { animation-delay: .16s; }
.has-motion.is-internal .hero__content > * { animation-duration: .55s; }
.has-motion.is-internal .hero__content > :nth-child(1) { animation-delay: 0s; } .has-motion.is-internal .hero__content > :nth-child(2) { animation-delay: .06s; }
.has-motion.is-internal .hero__content > :nth-child(3) { animation-delay: .12s; } .has-motion.is-internal .hero__content > :nth-child(4) { animation-delay: .18s; } .has-motion.is-internal .hero__content > :nth-child(5) { animation-delay: .24s; }
/* gallery filter: photos reset to hidden instantly before fading back in */
.has-motion .rv-reset { transition: none !important; }

/* ---------- round 31 (client edits, Sept 8) ---------- */
/* 4. wordmark fully orange */
.header__brand b, .footer__logo b { color: var(--orange); }
/* 5. hero: no fade over the photo; a thin orange rule separates photo from content */
.hero--bleed .mosaic::after { content: none; }
.hero--bleed .mosaic { border-left: 3px solid var(--orange); }
@media (max-width: 960px) { .hero--bleed .mosaic { border-left: 0; border-bottom: 3px solid var(--orange); } }
@media (max-width: 760px) { .hero--bleed .mosaic::after { content: none; } }
/* 5. service-page headers: the title sits on the photo, so a light scrim stays for legibility; orange rule beneath */
.banner--photo::before { background: linear-gradient(180deg, rgba(15,42,77,.1) 0%, rgba(15,42,77,.35) 55%, rgba(15,42,77,.8) 100%); }
.banner--photo { border-bottom: 3px solid var(--orange); }
/* 5. service tiles: label sits on the photo, so a light bottom scrim stays */
.svc-card::after { background: linear-gradient(180deg, rgba(15,42,77,0) 55%, rgba(15,42,77,.78) 100%); }
/* 9. "Sister company" tag on the Junk Removal tile */
.svc-card__tag { display: inline-block; margin-left: 10px; padding: 3px 8px; border-radius: 999px; background: var(--orange); color: var(--navy-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
/* 3. capitalised headline keeps to two lines on desktop */
@media (min-width: 961px) { .hero--bleed h1 { max-width: 15ch; font-size: clamp(44px, 5vw, 76px); } }
/* phones: headline breaks as "Beautiful Tile," / "Installed Right." */
@media (max-width: 760px) { .hero h1 .nb { white-space: nowrap; } .hero--bleed h1 { font-size: clamp(34px, 10vw, 48px); max-width: none; } }