/* ==========================================================================
   PhD Junk Removal — stylesheet
   One ordered system: 1 tokens · 2 base · 3 layout · 4 components ·
   5 pages · 6 motion · 7 media. Later sections only override earlier ones on
   purpose; there are no "round" patches. Brand: navy + orange, Jost only.
   ========================================================================== */

@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. tokens ---------- */
:root {
  color-scheme: light;
  --navy: #1b4174;
  --navy-deep: #12304f;
  --navy-ink: #0f2a4d;
  --orange: #f27527;
  --orange-deep: #d85f14;
  --text: #4b4f58;
  --label: #585858;
  --muted: #6b7280;
  --off: #f6f8fb;
  --tint: #eef2f7;
  --line: #e3e8ef;
  --line-strong: rgba(27, 65, 116, .25);
  --orange-soft: rgba(242, 117, 39, .12);
  --navy-soft: rgba(27, 65, 116, .06);
  --on-navy: rgba(255, 255, 255, .84);
  --on-navy-line: rgba(255, 255, 255, .35);

  --heading: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* type scale */
  --fs-display: clamp(48px, 5.4vw, 84px);
  --fs-page:    clamp(38px, 4.2vw, 62px);
  --fs-h2:      clamp(38px, 4.2vw, 62px);
  --fs-h3:      22px;
  --fs-card:    18.5px;
  --fs-body:    17px;
  --fs-lead:    17.5px;
  --fs-small:   15px;
  --fs-micro:   13px;
  --lh-body: 1.65;

  /* spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: clamp(64px, 7vw, 120px);
  --section-m: 56px;
  --head-gap: 36px;

  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 56px);   /* the phdhomesolutions.com side margin, so both sites' pages sit in the same column */

  /* corner rule, from phdhomesolutions.com: buttons, photos and inputs square;
     white content cards (reviews, form, Google card, before/after frame) 12px. */
  --radius: 0;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --pill: 999px;

  --shadow-sm: 0 2px 10px rgba(27, 65, 116, .08);
  --shadow-md: 0 12px 32px rgba(27, 65, 116, .14);
  --shadow-lg: 0 30px 60px rgba(0, 0, 0, .28);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .15s;
  --t-base: .25s;
  --t-slow: .6s;
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  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); text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 700; }
button { font: inherit; }

.display {
  font-family: var(--heading); font-size: var(--fs-display); line-height: 1.04;
  font-weight: 700; letter-spacing: -.03em;
}
.num { font-variant-numeric: tabular-nums lining-nums; }

/* 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; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* One focus ring for every surface: white core + navy halo reads on white, navy and orange. */
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--navy); border-radius: 4px; }
.btn:focus-visible, .gbadge:focus-visible, .nav__phone:focus-visible, .ba-tab:focus-visible,
.pick__add:focus-visible, .est-toggle:focus-visible { border-radius: inherit; }
.form-card input:focus-visible, .form-card textarea:focus-visible { outline: 3px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 5px var(--navy); }

/* ---------- 3. layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: var(--section) 0; }
.section--tint, .section--off { background: var(--off); }
/* two white sections meet here: shorter seam so the reviews button and the next heading read as neighbours */
.section--reviews { padding-bottom: clamp(40px, 4vw, 64px); }
.section--reviews + .section { padding-top: clamp(32px, 3.5vw, 56px); }
.section--soft { background: #fff; }
.section--navy { background: var(--navy); color: #fff; }
.section--navy .sec-head h2, .section--navy .ba-heading { color: #fff; }
.section--navy .sec-head h2 em { color: var(--orange); }

.sec-head { text-align: left; margin: 0 0 var(--head-gap); }
.sec-head h2, .reviews-head, .ba-heading, .band h2 {
  font-family: var(--heading); font-size: var(--fs-h2); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--navy); text-transform: none; margin: 0;
}
.sec-head h2 em { font-style: normal; color: var(--orange); }
.sec-head__lead { margin: var(--s-3) 0 0; max-width: 54ch; font-size: var(--fs-lead); color: var(--text); }
.sec-head--center { text-align: center; }
.sec-head--center .sec-head__lead { margin-inline: auto; }
.sec-head__eyebrow { display: none; }

/* ---------- 4. components ---------- */

/* buttons — square, uppercase, tracked: the phdhomesolutions.com button system */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 16px 26px; border: 2px solid var(--navy); border-radius: var(--radius);
  font-family: var(--heading); 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); cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--navy-ink); border-color: var(--navy-ink); transform: translateY(-2px); }
.btn:active { transform: none; transition-duration: var(--t-fast); }
.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); }
/* text buttons: navy on plain white, no edge (they only ever sit on navy); call buttons: navy on orange */
.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; border-color: rgba(255,255,255,.6); color: #fff; }
.btn--outline { background: transparent; border-color: var(--line-strong); color: var(--navy); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--navy-soft); border-color: var(--navy); color: var(--navy); transform: translateY(-2px); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(255,255,255,.1); border-color: #fff; }
.srow__ctas .btn, .est-sms-btn { padding: 14px 18px; white-space: normal; line-height: 1.4; }
/* the text button keeps "Text pics for a quick estimate" on one line everywhere, with room either side of the label;
   a touch smaller and tighter on narrow phones so it still fits a 312px column */
.btn[href^="sms:"] { white-space: nowrap; letter-spacing: .1em; padding-inline: 24px; }
@media (max-width: 400px) { .btn[href^="sms:"] { font-size: 13px; letter-spacing: .08em; padding-inline: 16px; } }

/* pills, tags, labels */
/* Google rating card — same component as phdhomesolutions.com */
.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); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.gbadge:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.gbadge__g { grid-row: 1 / span 3; align-self: center; width: 38px; height: 38px; }
.gbadge__label { justify-self: start; text-align: left; 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 { grid-column: 2; justify-self: start; text-align: left; font-size: 12.5px; color: #5f6368; }
.gbadge__count:empty { display: none; }

/* Google brand mark wherever Google reviews are referenced */
.google { display: inline-flex; vertical-align: -.12em; margin-right: .3em; }
.google svg { width: 1em; height: 1em; }
.review__src { display: inline-flex; align-items: center; }
.review__src .google { margin-right: .35em; }
.btn--google .google { margin-right: .1em; }
.btn--google .google svg { width: 1.15em; height: 1.15em; }

.kicker { font-family: var(--heading); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin: 0 0 10px; }
.ba-side__kicker, .est-widget__label { font-family: var(--heading); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin: 0 0 10px; }

/* checklist */
.check { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.check li { position: relative; padding-left: 26px; line-height: 1.45; }
.check li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 19px; height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8.5' fill='none' stroke='%23f27527' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* service title + icon */
.svc-title { display: flex; align-items: center; gap: 12px; }

/* cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.glass-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* header / nav */
.header { position: sticky; top: 0; left: 0; right: 0; z-index: 100; background: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.06); transition: box-shadow var(--t-base) var(--ease); }
.header.is-stuck { box-shadow: 0 2px 14px rgba(0,0,0,.22); }
.header__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; max-width: 1290px; margin-inline: auto; }
.header__brand { display: inline-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; border-radius: 50%; background: #fff; padding: 2px; flex: none; }
.header__brand b, .footer__logo b { font-weight: inherit; color: var(--orange); }
/* nav — same rules as phdhomesolutions.com: small caps links with an orange underline on hover, phone as a square orange button */
.nav { display: flex; gap: 26px; align-items: center; }
.nav a { position: relative; font-family: var(--body); font-size: 15px; letter-spacing: .5px; text-transform: uppercase; text-decoration: none; color: #fff; padding-bottom: 2px; white-space: nowrap; transition: color .2s ease; }
.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.nav__phone { background: var(--orange); color: var(--navy-ink) !important; font-weight: 700; padding: 11px 16px; border-radius: 0; margin-left: 6px; transition: background .25s ease; }
.nav a.nav__phone:hover, .nav a.nav__phone: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 var(--ease), opacity .2s var(--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); }

/* footer — shared pattern with phdhomesolutions.com: brand blurb, link grid, contact column, sister-site line */
.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__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 img { width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 2px; }
.footer__logo span { color: var(--orange); }
.footer__brand p { margin: 0 0 8px; max-width: 34ch; }
.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; }
.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 var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.social-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.social-btn--fb svg { color: #1877f2; }
.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; }

/* reviews */
.rating-hero { text-align: center; margin: 0 0 var(--head-gap); }
.rating-hero__stars { display: inline-flex; gap: 6px; margin: 0 0 10px; }
.rating-hero__stars svg { width: 38px; height: 38px; fill: var(--orange); }
.has-js .rating-hero__stars svg { opacity: 0; transform: scale(.3) rotate(-25deg); }
.has-js .rating-hero.is-visible .rating-hero__stars svg { animation: star-in .55s var(--ease-bounce) forwards; }
.rating-hero.is-visible .rating-hero__stars svg:nth-child(2) { animation-delay: .12s; }
.rating-hero.is-visible .rating-hero__stars svg:nth-child(3) { animation-delay: .24s; }
.rating-hero.is-visible .rating-hero__stars svg:nth-child(4) { animation-delay: .36s; }
.rating-hero.is-visible .rating-hero__stars svg:nth-child(5) { animation-delay: .48s; }
.rating-hero .reviews-head { text-align: center; margin: 0; }
.rating-hero__count { display: inline-flex; align-items: baseline; gap: 6px; margin: 14px auto 0; padding: 7px 16px; border-radius: var(--pill); background: var(--tint); font-family: var(--heading); font-size: 15px; font-weight: 600; color: var(--navy); }
.rating-hero__count:empty { display: none; }
.rating-hero__count b { color: var(--orange); font-size: 1.25em; line-height: 1; }
.rating-hero__num { display: inline-block; min-width: 1ch; color: var(--orange); font-size: 1.3em; line-height: 1; font-variant-numeric: tabular-nums; }
/* reviews — the phdhomesolutions.com review track: three cards in view, arrows, long reviews expand */
.rev-wrap { position: relative; }
.rev-head--center { position: relative; margin-bottom: clamp(28px, 3vw, 40px); }
.rev-head--center .rev-nav { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.rev-nav { display: none; gap: 8px; }
.rev-wrap.has-overflow .rev-nav { display: flex; }
.rev-nav button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 2px; line-height: 1; border: 1.5px solid rgba(27,65,116,.3); border-radius: 10px; background: #fff; color: var(--navy); font: inherit; font-size: 18px; cursor: pointer; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.rev-nav button:hover { background: var(--navy); color: #fff; }
.rev-nav button:disabled { opacity: .35; cursor: default; }
.rev-nav button:disabled:hover { background: #fff; color: var(--navy); }
.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: 16px 12px 36px; margin: -16px -12px -36px; scroll-padding-inline: 12px; }
.rev-track::-webkit-scrollbar { display: none; }
.rev-track > .review:first-child { scroll-margin-left: 12px; }
.rev-track.has-open { align-items: start; }
.rev-track.has-open .review.is-open { height: auto; }
.review { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; position: relative; background: #f4f6fa; border: 0; border-bottom: 3px solid var(--orange); border-radius: 12px; overflow: hidden; padding: 26px 24px 22px; }
.review__stars { color: var(--orange); letter-spacing: 3px; font-size: 15px; margin: 0 0 10px; }
.review__text { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 5; -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-family: var(--heading); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); cursor: pointer; }
.review__who { display: flex; align-items: center; gap: 0; margin-top: auto; }
.review__who > div > b { display: block; color: var(--navy); font-weight: 600; font-size: 16px; }
.review__meta { font-size: 13px; color: var(--label); display: flex; gap: 10px; flex-wrap: wrap; }
.platform { font-size: 13.5px; font-weight: 600; color: inherit; }
.g-mark { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .3em; }
.review--placeholder { display: none; }
.reviews-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.reviews-cta .btn { white-space: nowrap; letter-spacing: .1em; padding-inline: 14px; }
@media (max-width: 640px) { .reviews-cta .btn { width: 100%; } }   /* stacked at one width on phones */
@media (max-width: 400px) { .reviews-cta .btn { font-size: 13px; letter-spacing: .08em; } }

/* before / after */
.section--dark { background: var(--navy-ink); color: rgba(255,255,255,.85); }
.section--ba { padding: clamp(48px, 5vw, 72px) 0; }
.ba-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 520px); gap: 24px clamp(32px, 5vw, 80px); align-items: center; padding-inline: 32px; }   /* same split as phdhomesolutions.com, so the job list (and its divider lines) is the same width */
.ba-side { order: 0; }
.ba-stage { order: 1; display: flex; align-items: center; justify-content: center; }
.ba-stage .ba-frame { max-width: min(100%, calc((100vh - 150px) * .75)); }   /* the photo still fits a short window; the column stays put */
.ba-heading { font-family: var(--heading); font-size: clamp(32px, 3.4vw, 50px); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: #fff; margin: 0 0 20px; text-align: left; }
.ba-heading em { font-style: normal; color: var(--orange); }
.ba-jobs { width: 100%; }
html.has-js .ba-jobs { display: grid; align-items: center; }
html.has-js .ba-job { grid-area: 1 / 1; margin: 0; }
html.has-js .ba-job:not(.is-active):not(.is-staged) { display: none; }
html.has-js .ba-job.is-staged { opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s linear .7s; }
html.has-js .ba-job.is-active { position: relative; z-index: 2; opacity: 1; visibility: visible; transition: opacity .7s var(--ease); }
.ba-job { margin: 0 0 30px; }
.ba-job:last-child { margin-bottom: 0; }
.ba-frame {
  display: block; position: relative; width: 100%; max-width: min(600px, calc((100vh - 150px) * .75)); aspect-ratio: var(--ba-ar, 3 / 4);
  margin: 0 auto; overflow: hidden; background: var(--navy); border-radius: 12px;
}
html.has-js .ba-frame { user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.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__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba-layer picture { display: contents; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%); width: 4px; z-index: 4; background: var(--orange); transform: translateX(-50%); cursor: ew-resize; touch-action: none; }
.ba-handle__btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--orange); border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 2px 10px rgba(0,0,0,.35);
  transition: transform var(--t-fast) var(--ease);
}
.ba-handle:hover .ba-handle__btn { transform: translate(-50%, -50%) scale(1.06); }
.ba-handle:focus-visible { outline: none; box-shadow: none; }
.ba-handle:focus-visible .ba-handle__btn { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--navy); }
html:not(.has-js) .ba-handle { display: none; }
.ba-tag {
  position: absolute; top: 12px; z-index: 3; font-family: var(--heading); font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: #fff; padding: 5px 12px; pointer-events: none;
  background: rgba(20,40,70,.35); border: 1px solid rgba(255,255,255,.45); border-radius: var(--pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ba-tag--before { right: 12px; }
.ba-tag--after { left: 12px; }
.ba-layer .ba-tag { top: 12px; left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
.ba-layer .ba-tag--after { background: var(--orange); border-color: var(--orange); color: var(--navy-ink); }
.ba-caption { text-align: center; font-family: var(--heading); font-weight: 600; color: #fff; font-size: 16px; margin-top: 12px; }
html.has-js .ba-caption { display: none; }
.ba-tabs { display: none; counter-reset: ba; }
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-tab:hover, .ba-tab[aria-selected="true"] { color: #fff; }
.ba-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.ba-tab.is-playing::after { animation: tab-progress var(--dur, 5s) linear forwards; }
.ba-cta { display: inline-grid; gap: 12px; margin: 28px 0 0; }   /* stacked, both as wide as the wider one */

/* home pricing: copy left, demo right */
.pricing-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }   /* start, not center: the copy must not shift when the simulator list expands */
.pricing-split__copy { margin: 0; }
.pricing-points { margin: 18px 0 0; font-size: 17px; gap: 10px; max-width: 46ch; }
.pricing-points li { line-height: 1.4; }
.pricing-split__copy .sec-head__lead { margin: 10px 0 0; max-width: 34ch; }
.pricing-split__copy .pricing-split__note { margin-top: 14px; }
/* the simulator explainer sits in its own tinted card so it reads apart from the price line */
.pricing-split__how { margin: 22px 0 0; padding: 18px 22px 20px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pricing-split__how .sec-head__lead:first-child { margin-top: 0; }
.pricing-split__how .sec-head__lead { max-width: none; margin: 10px 0 0; }
.pricing-explain .pricing-split__how { margin: 4px 0 18px; }
/* the on-site price disclaimer: big enough to be read, in the card's own voice */
.pricing-fine { margin: -6px 0 16px; padding: 0 16px; font-size: 14px; line-height: 1.45; color: var(--label); }
.pricing-disclaimer { margin: 0 0 16px; padding: 14px 16px; border-left: 4px solid var(--orange); background: var(--navy-soft); font-family: var(--heading); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--navy); }
.inline-link { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color var(--t-base) var(--ease); }
.inline-link:hover { color: var(--orange); }
/* the link makes the panel pulse twice so the eye lands on it */
/* the Trailer Simulator link fades the panel's stroke to orange and back (main.js adds is-glow for a moment) */
.pricing-stage { transition: border-color .45s ease; }
.pricing-stage.is-glow { border-color: var(--orange); }
.pricing-split__link { margin: 36px 0 0; }
.pricing-split .pricing-demo { display: grid; justify-items: center; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: color var(--t-base) var(--ease), gap var(--t-base) var(--ease);
}
.link-arrow svg { width: 18px; height: 18px; color: var(--orange); transition: transform var(--t-base) var(--ease); }
.link-arrow:hover { color: var(--orange); }
.link-arrow:hover svg { transform: translateX(4px); }

/* the framed simulator panel (home + pricing page; the widget inside is built by js/estimator.js) */
.pricing-stage {
  position: relative; display: block; width: 100%; max-width: 820px; margin: 0 auto; padding: 14px 24px 14px;
  color: var(--navy); border-radius: var(--radius-xl); background: var(--tint); border: 4px solid #c3cbd7;
}
.trailer { display: block; width: 100%; height: auto; }
#est-fill { transition: width .55s cubic-bezier(.34, 1.3, .64, 1); }
/* trailer pricing guide (pricing page) */
.tpg { max-width: 900px; margin: 0 auto 8px; }
.tpg svg { display: block; width: 100%; height: auto; }

/* estimator widget */
.est-widget { max-width: 1040px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.est-head { margin: 0; color: #fff; text-align: left; font-family: var(--heading); font-size: clamp(20px, 1.2vw + 12px, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.est-widget .tpg { max-width: 440px; margin: 0 auto; container-type: inline-size; }
.est-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.est-items--collapsed .pick:nth-child(n+7):not(.is-on) { display: none; }   /* six items (three rows) until "Show more" so the whole panel fits one screen */
.est-items--collapsed:empty { min-height: 132px; }
.pick { position: relative; display: flex; }
.pick__add {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 42px;
  padding: 6px 40px 6px 12px; border: 1.5px solid #d6dde8; border-radius: var(--radius);
  background: #fff; color: var(--navy); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pick__add svg { width: 22px; height: 22px; flex: none; }
.pick__add:hover { border-color: var(--navy); }
.pick__add:active { transform: scale(.985); }
.pick.is-on .pick__add { background: var(--navy); border-color: var(--navy); color: #fff; }
.pick.is-on .pick__add svg { filter: brightness(0) invert(1); }
.pick__count {
  position: absolute; right: 40px; top: 0; bottom: 0; margin: auto 0;   /* margin-centred, not translated: the bump animates transform */
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--pill);
  background: var(--orange); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: none; align-items: center; justify-content: center;
}
.pick.is-on .pick__count { display: inline-flex; }
.pick__minus {
  position: absolute; right: 8px; top: 0; bottom: 0; margin: auto 0;
  width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18);
  color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: none; transition: background var(--t-fast) var(--ease);
}
.pick.is-on .pick__minus { display: block; }
.pick__minus:hover { background: rgba(255,255,255,.3); }
.est-toggle {
  display: block; width: 100%; margin: 10px 0 0; padding: 8px 16px; background: none;
  border: 1px solid var(--navy); color: var(--navy); font-size: 15px; border-radius: var(--radius); cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.est-toggle:hover { background: var(--navy); color: #fff; }
.est-detail { margin: 0; font-size: 14px; min-height: 1.2em; text-align: center; color: var(--label); }
.est-clear { visibility: hidden; display: inline-block; margin: 4px auto 0; padding: 6px 14px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--label); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.est-clear.is-ready { visibility: visible; }
.est-clear:hover, .est-clear:focus-visible { color: var(--navy); }
.est-sms-btn { margin: 12px 0 0; display: flex; width: 100%; padding: 14px 16px; font-size: 15.5px; }
.est-sms-btn[hidden] { display: none; }
.est-widget.is-static .est-items, .est-widget.is-static .est-toggle, .est-widget.is-static .sim-invite, .est-widget.is-static .est-sms-btn, .est-widget.is-static .est-detail { display: none; }

.est-head--home { margin: 0 0 8px; text-align: center; color: var(--navy); font-size: clamp(22px, 1.4vw + 12px, 26px); }
.est-widget--home { max-width: none; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; text-align: center; }
.sim-invite { margin: -6px 0 16px; text-align: center; font-family: var(--heading); font-size: 16px; font-weight: 600; color: var(--orange); text-wrap: pretty; }
.pick.is-tapped::after { content: ''; position: absolute; inset: -4px; border-radius: var(--radius); border: 2px solid var(--orange); pointer-events: none; animation: tap-ring .6s ease-out forwards; }
/* fixed two-column grid: a tap changes colour and shows the count, never the row layout */
.est-widget--home .est-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 6px; }
.est-widget--home .est-items--collapsed:empty { min-height: 132px; }
.est-widget--home .pick__add { min-height: 40px; padding: 6px 76px 6px 12px; gap: 8px; font-family: var(--heading); font-size: 14px; font-weight: 600; }
.est-widget--home .pick__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-widget--home .pick__add svg { width: 20px; height: 20px; }
.est-widget--home .pick__add:active { transform: none; }
.est-widget--home .pick__count { right: 42px; min-width: 24px; height: 24px; font-size: 12px; }
.est-widget--home .pick__minus { right: 8px; width: 28px; height: 28px; font-size: 18px; }
.est-widget--home .est-toggle { display: inline-block; width: auto; margin: 0 auto 4px; padding: 4px 10px; min-height: 0; border: 0; background: none; font-family: var(--heading); font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.est-widget--home .est-toggle:hover, .est-widget--home .est-toggle:focus-visible { background: none; color: var(--orange); }
/* demo hand-off: the demo's picks fade back to white under the visitor's first tap */
.pick.is-fading .pick__add { background: #fff; border-color: #d6dde8; color: var(--navy); transition-duration: .45s; }
.pick.is-fading .pick__add svg { filter: none; transition: filter .45s var(--ease); }
.pick.is-fading .pick__count, .pick.is-fading .pick__minus { opacity: 0; transition: opacity .3s var(--ease); }
.est-widget--home .est-stage { margin-top: 4px; padding-top: 6px; background: var(--tint); }
.est-widget--home .tpg { max-width: 360px; margin: 0 auto; }
.est-widget--home .est-result { margin: 8px 0 0; min-height: 1.25em; font-family: var(--heading); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--label); font-variant-numeric: tabular-nums; transform-origin: center; transition: color var(--t-base) var(--ease); }
.est-widget--home .est-result.has-value { color: var(--navy); }

/* pricing explanation card (pricing page) */
.pricing-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }   /* same split as the home pricing section */
.pricing-explain { padding: 26px 28px 24px; position: sticky; top: 76px; }
.pricing-explain__title { font-family: var(--heading); font-size: var(--fs-h3); font-weight: 700; color: var(--navy); margin: 0 0 8px; text-align: left; line-height: 1.2; }
.pricing-explain > p { margin: 0 0 16px; max-width: 46ch; }
.tiers { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--line); }
.tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 16px; }
.tiers li:first-child span { color: var(--label); }
.tiers b { font-family: var(--heading); font-size: 20px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.pricing-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--navy-soft); border: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--navy);
}
.pricing-note svg { width: 20px; height: 20px; flex: none; color: var(--navy); margin-top: 2px; }
.pricing-faq { margin-top: 4px; font-size: 15px; }
.pricing-faq { overflow-anchor: none; }
.pricing-faq details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 10px; overflow: hidden; transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.pricing-faq details:hover { border-color: var(--line-strong); }
.pricing-faq details[open] { box-shadow: var(--shadow-sm); }
.pricing-faq summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--navy); font-family: var(--heading); list-style: none; user-select: none; transition: background var(--t-fast) var(--ease); }
.pricing-faq summary::-webkit-details-marker { display: none; }
.pricing-faq summary:hover { background: var(--navy-soft); }
.pricing-faq summary::before {
  content: ''; flex: none; width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231b4174' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 22px; background-position: center; background-repeat: no-repeat; transition: transform .3s var(--ease);
}
.pricing-faq details[open]:not(.is-closing) summary::before { transform: rotate(180deg); }
.pricing-faq details[data-lightbox] summary::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h8l5 5v13H6zM14 3v5h5M9 13h6M9 17h6' fill='none' stroke='%231b4174' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pricing-faq details[data-lightbox][open] summary::before { transform: none; }
.pricing-faq details p { padding: 0 16px 14px 50px; margin: 0; }
.pricing-faq details p:first-of-type { padding-top: 12px; }   /* breathing room under the summary band */
.pricing-faq details p:last-of-type { padding-bottom: 24px; }   /* and under the last line of the answer */
.details__body { overflow: hidden; }
.pricing-faq .tpg-print picture { display: block; padding: 0 16px 16px; }
.pricing-faq .tpg-print img { display: block; max-width: 560px; margin: 0 auto; border-radius: var(--radius); }


/* crew photo slot (about page): same team-photo placeholder as the home page */

/* contact form */
/* contact form — the phdhomesolutions.com two-step quote form */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 14px 40px rgba(27,65,116,.07); }
.form-step { display: block; }
.form-step[hidden] { display: none; }
.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, .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: var(--body); 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%; }
.pref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 2px; }
.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 .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.chips input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; transform: scale(1.04); }
.chips input:focus-visible + span { outline: 3px solid var(--orange-deep); outline-offset: 2px; }
.chips--sm span { padding: 7px 12px; font-size: 13px; }
.form__hp { position: absolute; left: -9999px; }
.form__status { display: none; margin-top: 14px; padding: 12px 14px; font-size: 15px; border-radius: 0; }
.form__status.is-visible { display: block; }
.form__status.is-ok  { background: #e6f4ec; color: #1c6b3f; }
.form__status.is-err { background: #fdeceb; color: #a32620; }

/* lightbox (printable price chart) */
.lightbox { border: 0; padding: 0; margin: auto; width: min(96vw, calc(94vh - 96px), 1000px); height: auto; max-height: 94vh; background: transparent; color: #fff; }
.lightbox::backdrop { background: rgba(9, 22, 42, .88); }
.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 10px; animation: lightbox-in .28s var(--ease-out); }   /* minmax(0,1fr): the column never grows to the toolbar's width and pushes the chart past the dialog */
.lightbox.is-loading .lightbox__img { opacity: 0; }
.lightbox__img { opacity: 1; transition: opacity .25s var(--ease), transform .18s var(--ease); }
.lightbox__bar { display: flex; align-items: center; gap: 12px; }
.lightbox__title { flex: 1; font-family: var(--heading); font-weight: 600; font-size: 16px; }
.lightbox__controls { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); }
.lightbox__btn, .lightbox__close {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: var(--pill);
  background: transparent; color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.lightbox__btn--text { font-size: 14px; font-variant-numeric: tabular-nums; min-width: 64px; }
.lightbox__btn--print { display: inline-flex; align-items: center; width: auto; height: 48px; padding: 0 16px; gap: 8px; font-family: var(--heading); font-size: 14px; font-weight: 600; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); }
.lightbox__btn--print svg { width: 18px; height: 18px; }
.lightbox__btn:hover, .lightbox__close:hover { background: rgba(255,255,255,.18); }
.lightbox__close { width: 48px; height: 48px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); }   /* same height as the zoom group (40px buttons + 4px padding) */
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__stage { position: relative; width: 100%; min-width: 0; aspect-ratio: 1 / 1; min-height: 0; max-height: calc(94vh - 130px); overflow: hidden; border-radius: 0; background: transparent; touch-action: none; cursor: zoom-in; display: grid; place-items: center; contain: strict; }
.lightbox__stage.is-zoomed { cursor: grab; }
.lightbox__stage.is-zoomed:active { cursor: grabbing; }
.lightbox__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: center; user-select: none; will-change: transform; }
.lightbox__hint { margin: 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.7); }
body.has-lightbox { overflow: hidden; }
/* phones: the viewer's toolbar wraps — title on its own line, zoom group left, Print and Close right */
@media (max-width: 640px) {
  .lightbox { width: 96vw; }
  .lightbox__bar { flex-wrap: wrap; gap: 8px 10px; }
  .lightbox__title { flex: 1 1 100%; font-size: 15px; }
  .lightbox__btn--print { margin-left: auto; padding: 0 12px; }
  .lightbox__hint { font-size: 12px; }
}
@media (max-width: 360px) {   /* the smallest phones: icon-only Print and a tighter zoom group so the toolbar stays on one row */
  .lightbox__btn--print span { display: none; }
  .lightbox__btn--print { padding: 0 12px; }
  .lightbox__btn--print svg { margin: 0; }
  .lightbox__btn--text { min-width: 54px; }
}

/* ---------- 5. pages ---------- */

/* home: hero — the phdhomesolutions.com split, mirrored: photo and logo left, copy right, thin orange rule between */
.hero { --hero-gutter: clamp(20px, 4vw, 56px); position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--navy-ink); }
.hero__inner { width: 100%; display: grid; grid-template-columns: 1fr; min-height: min(calc(100vh - 69px), 780px); min-height: min(calc(100svh - 69px), 780px); align-items: stretch; }
.hero__content { position: relative; z-index: 2; align-self: center; justify-self: end; width: 50%; max-width: 50%; padding: 40px max(var(--hero-gutter), calc((100vw - var(--wrap)) / 2 + var(--hero-gutter))) 48px clamp(48px, 6.5vw, 96px); }
.hero h1 { color: #fff; font-size: clamp(40px, 4.6vw, 68px); font-weight: 700; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 18px; max-width: none; }
.hero h1 span { display: block; }
.hero__area { margin: 0 0 34px; font-family: var(--heading); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.hero__cta-row { display: grid; width: max-content; max-width: 100%; gap: 12px; margin: 0 0 40px; }   /* stacked at every width, both buttons as wide as the wider one: the hero copy column is ~450px on any desktop, too narrow for the pair side by side (the text label used to spill past its white box above 1280px) */
.hero__cta-row .btn { width: 100%; padding-inline: 24px; letter-spacing: .1em; white-space: nowrap; }
.badges { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px; justify-content: start; align-items: stretch; margin-top: 10px; }
.badges .gbadge { padding: 8px 16px 8px 12px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.35); color: #fff; box-shadow: none; }
.badges .gbadge:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); transform: none; box-shadow: none; }
.badges .gbadge .gbadge__g { width: 34px; height: 34px; grid-row: 1 / span 3; align-self: center; }
.badges .gbadge__label, .badges .gbadge__count { color: rgba(255,255,255,.78); }
.badges .gbadge__num { color: #fff; }
.badges .fact { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
.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; }
.mosaic { position: absolute; inset: 0 50% 0 0; width: 50%; z-index: -1; overflow: hidden; background: var(--navy-ink); border-right: 3px solid var(--orange); display: grid; place-items: center; }
.mosaic__frame { position: absolute; inset: 0; }
.mosaic__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.02); animation: hero-drift 14s linear .2s both; }
/* navy wash so the logo reads over the photo */
.mosaic__frame::after { content: ''; position: absolute; inset: 0; background: rgba(15,42,77,.5); }
.hero__brand { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; width: 100%; padding: 24px; text-align: center; animation: pop .9s var(--ease-out) .2s both; }
.hero__mark { width: min(420px, 66%); height: auto; filter: drop-shadow(0 24px 44px rgba(0,0,0,.45)); }
.hero__tag { margin: 0; font-family: var(--heading); font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); text-wrap: balance; }
@keyframes hero-drift { to { transform: scale(1.08) translate(-1%, 0); } }

/* home: services */
/* home services — photo tiles: the photo on top, the name and link on a solid navy band beneath so the
   text never fights the picture (junk photos are far busier than tile photos) */
/* service cards: white body under the photo for legible titles; four across on wide screens as before */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1181px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .svc-grid .svc-card h3 { font-size: 19px; white-space: nowrap; text-wrap: nowrap; } }
.svc-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--navy); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.svc-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,42,77,.18); border-color: transparent; }
.svc-card:hover img { transform: scale(1.05); }
.svc-card__body { position: relative; z-index: 2; background: #fff; padding: 14px 18px 16px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.svc-card h3 { color: var(--navy); font-size: 22px; margin: 0 0 6px; letter-spacing: -.02em; text-wrap: balance; }
.svc-card .more { display: block; font-family: var(--heading); font-weight: 700; color: var(--orange-deep); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.svc-card .more::after { content: '\00a0\2192'; }

/* home: about */
/* about (home section + About page): the phdhomesolutions.com/about/ row — big lead line, copy, navy 4:3 team placeholder */
.about-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.about-row p { max-width: 52ch; }
.about-row .inline-link, .footer__bottom a { white-space: nowrap; }   /* "PhD Home Solutions" is the full business name: never split across lines */
.about-lead { scroll-margin-top: 80px; font-family: var(--heading); font-size: clamp(30px, 3.2vw, 46px); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: var(--navy); margin: 0 0 20px; max-width: none; text-wrap: balance; }
.team-placeholder { position: relative; 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; margin: 0; overflow: hidden; }
.team-placeholder__mark { width: 96px; height: 96px; }   /* the mark carries its own white disc and a clear margin, so nothing is clipped or haloed */
.team-placeholder p { color: #fff; font-family: var(--heading); font-weight: 500; font-size: 16px; letter-spacing: .02em; margin: 0; }
.team-placeholder__photo { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-placeholder.has-photo .team-placeholder__photo { display: block; }
.team-placeholder.has-photo .team-placeholder__mark, .team-placeholder.has-photo p { display: none; }

/* contact block (home + services) */
.band { background: var(--navy); padding: clamp(64px, 7vw, 112px) 0; text-align: center; color: #fff; }
.band h2 { color: #fff; margin: 0 0 14px; }
.band p { max-width: 620px; margin-inline: auto; font-size: 17px; color: var(--on-navy); }
.band__actions { display: grid; width: max-content; max-width: 100%; margin: 26px auto 0; gap: 12px; }   /* stacked, equal width, centred as a group */
.band__actions .btn { width: 100%; }
.band .btn { margin: 0; }
.band__proof { margin: 26px 0 0; }
.band .badges { grid-template-columns: max-content; justify-content: center; }   /* one column: no phantom gap pulling the card off centre */
.band__shape { display: none; }

/* inner pages: banner */
/* same block as phdhomesolutions.com's .banner--center: navy-ink, tall top padding, display-size title */
.banner { background: var(--navy-ink); padding: clamp(64px, 10vw, 132px) 0 clamp(40px, 6vw, 72px); text-align: center; }
.banner h1 { font-family: var(--heading); font-size: clamp(56px, 7.2vw, 108px); font-weight: 700; letter-spacing: -.035em; line-height: .98; color: #fff; margin: 0 auto; max-width: 16ch; }
.banner__sub { margin: 12px auto 0; max-width: 52ch; font-size: 18px; color: rgba(255,255,255,.85); }

/* services page */
.srow { --srow-photo: min(480px, 46%, calc((100vh - 140px) * .8)); display: grid; grid-template-columns: minmax(0, 1fr) var(--srow-photo); gap: 56px; align-items: center; padding: 46px 0; scroll-margin-top: 46px; }   /* the photo column is exactly the photo's width: photos hug the outer edges, copy columns line up */
.srow--flip { grid-template-columns: var(--srow-photo) minmax(0, 1fr); } /* 68px header + 24px breathing room, minus the row's own top padding: a card link lands with heading and photo together just under the nav */
.srow:first-child { padding-top: 0; scroll-margin-top: 92px; }
.srow:last-child { padding-bottom: 0; }
.srow h2, .srow h3 { font-family: var(--heading); font-size: 24px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.srow .svc-icon { width: 48px; height: 48px; }
.srow .svc-icon svg { width: 26px; height: 26px; }
.srow__media img { aspect-ratio: 4 / 5; object-fit: cover; display: block; width: 100%; height: auto; margin-inline: 0; border-radius: 0; box-shadow: var(--shadow-sm); }   /* left-aligned in its cell so photo and copy share a left edge in either column; width follows the viewport height (4:5 photo) so the whole photo stays in view under the 70px header when a service card link lands here; an explicit width keeps the lazy image sized before it loads */
.srow__ctas { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 18px 0 0; width: max-content; max-width: 100%; }   /* text button with the call button beneath, both as wide as the wider one */
.srow__signoff { font-family: var(--heading); font-weight: 700; color: var(--navy); font-size: 19px; margin: 4px 0 0; }

/* about page */

/* contact page — same layout as phdhomesolutions.com/contact/ */
.section--contact { padding: clamp(64px, 9vw, 130px) 0; }   /* the tile site's contact section spacing */
.contact-cols { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); padding-block: 0; padding-inline: 32px; align-items: start; }
.contact-cols h2 { font-family: var(--heading); font-size: clamp(26px, 2.2vw, 34px); font-weight: 700; color: var(--navy); margin: 0 0 24px; letter-spacing: -.025em; text-align: left; }
.contact-cols__sub { margin: -14px 0 22px; color: var(--label); }
.info__actions { display: grid; width: max-content; max-width: 100%; gap: 10px; margin-bottom: 30px; }   /* stacked, both as wide as the wider one (side by side the text label had no room either side) */
.info__actions .btn { width: 100%; padding: 16px 24px; font-size: 13px; letter-spacing: .08em; white-space: nowrap; }
.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 h3.info__follow { margin-bottom: 12px; }
.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; text-underline-offset: 3px; }
.info address.val { color: var(--text); font-style: normal; font-weight: 400; font-size: 18px; }
.info .fb { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.info .fb:hover { background: var(--navy); transform: translateY(-2px); }

/* photography: one grade for the client's mixed phone photos */
.svc-card picture, .srow__media picture { display: contents; }   /* the WebP/JPG wrapper adds no box of its own */
.svc-card img, .srow__media img { filter: saturate(.94) contrast(1.04) brightness(1.01); }

/* ---------- 6. motion ---------- */
/* page to page: the content fades out on a click and fades in on arrival while the navigation bar and
   phone thumb-bar hold still (main.js adds html.is-leaving before it follows a link) */
.has-js main, .has-js .footer { transition: opacity .28s ease-out; }
html.is-arriving main, html.is-arriving .footer { opacity: .01; transition: none; }   /* .01, not 0: Chrome ignores opacity-0 paints for LCP, so Lighthouse/PageSpeed could not score the page */   /* set in the head, cleared by main.js on the second frame */
html.is-leaving main, html.is-leaving .footer { opacity: 0; transition: opacity .16s ease-in; }
@keyframes rise     { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop      { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes star-in  { to { opacity: 1; transform: none; } }
@keyframes blink    { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tap-ring { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
@keyframes tab-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes sheen    { from { transform: translate3d(-18%, 0, 0); } to { transform: translate3d(18%, 0, 0); } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bump     { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } }
.is-bump { animation: bump .38s var(--ease-out); }

.has-js [data-reveal] { opacity: 0; }
/* a one-shot animation with a backwards fill: it plays once, then leaves the element's own transitions (card hover, etc.) alone */
.has-js [data-reveal].is-visible { opacity: 1; animation: reveal-in var(--t-slow) var(--ease) var(--reveal-delay, 0ms) backwards; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.is-home .header__brand { animation: rise .5s ease .3s both; }
.is-home .nav a         { animation: rise .5s ease both; }
.is-home .nav a:nth-child(1) { animation-delay: .36s; }
.is-home .nav a:nth-child(2) { animation-delay: .42s; }
.is-home .nav a:nth-child(3) { animation-delay: .48s; }
.is-home .nav a:nth-child(4) { animation-delay: .54s; }
.is-home .nav a:nth-child(5) { animation-delay: .60s; }
.is-home .nav a:nth-child(6) { animation-delay: .68s; }
.hero__content > * { animation: rise .9s var(--ease) both; }
.hero__content > :nth-child(1) { animation-delay: .15s; } .hero__content > :nth-child(2) { animation-delay: .25s; }
.hero__content > :nth-child(3) { animation-delay: .38s; } .hero__content > :nth-child(4) { animation-delay: .5s; }

@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; } .rev-head--center .rev-nav { position: static; transform: none; justify-content: center; margin-top: 14px; } }
@media (max-width: 480px) { .ba-handle__btn { width: 38px; height: 38px; } }
/* ---------- 7. media ---------- */
@media (max-width: 1000px) {
}
@media (max-width: 900px) {
  .pricing-split { grid-template-columns: 1fr; gap: 26px; }
  .pricing-split .sec-head { text-align: center; }
  .pricing-split .sec-head__lead { margin-inline: auto; }
  .pricing-grid { grid-template-columns: 1fr; gap: 18px; }
  .pricing-explain { position: static; padding: 20px 18px; }
}
/* narrow desktops: the tile site tightens the header between 961 and 1180px */
@media (min-width: 961px) and (max-width: 1180px) {
  .nav { gap: 16px; }
  .nav a { font-size: 13.5px; letter-spacing: .3px; }
  .nav a.nav__phone { padding: 10px 12px; margin-left: 2px; }
  .header__brand { font-size: 17px; }
}
@media (max-width: 960px) {
  .hero__inner { min-height: 0; }
  .mosaic { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; z-index: 0; border-right: 0; border-bottom: 3px solid var(--orange); }
  .hero__mark { width: min(280px, 46%); }
  .hero__content { width: auto; max-width: none; justify-self: stretch; padding: 40px var(--hero-gutter) 36px; }
}
@media (max-width: 760px) {
  .hero__content { text-align: center; padding-top: 36px; padding-bottom: 44px; }
  .hero h1 { margin-inline: auto; font-size: clamp(34px, 9.6vw, 46px); line-height: 1.16; max-width: none; }
  .hero__area { font-size: 13.5px; }
  .hero h1 .nb { white-space: nowrap; }
  .hero__sub { margin-inline: auto; }
  .hero__cta-row { margin: 0 auto 32px; }
  .badges { grid-template-columns: max-content; justify-content: center; }   /* one column: the card and the fact each centred, no phantom column */
  .badges .fact { grid-column: auto; justify-self: center; }
  .badges .gbadge { justify-self: center; justify-content: center; }   /* its own width, centred, not stretched to the fact's */
  .mosaic { aspect-ratio: auto; }
  .hero__brand { padding: 32px 24px 32px; gap: 8px; }
  .hero__mark { width: min(270px, 72%); }
  .hero__tag { font-size: clamp(19px, 7vw, 34px); white-space: nowrap; text-wrap: nowrap; margin-inline: auto; text-align: center; hanging-punctuation: first last; }   /* one line on phones: the size follows the screen width */
}
@media (max-width: 640px) { .hero__cta-row { width: 100%; } .ba-cta { display: grid; } }
@media (max-width: 880px) {
  .section { padding: var(--section-m) 0; }
  .header__inner { padding: 8px 16px; }
  .header__brand { font-size: 17px; }
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; right: 12px; left: 12px; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 18px; background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .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) !important; }
  .nav a:last-child { border-bottom: none; }
  .nav a.nav__phone { margin: 10px 0 4px; text-align: center; color: var(--navy-ink) !important; }
  .is-home .nav a { animation: none; }


  .ba-layout { grid-template-columns: 1fr; gap: 24px; padding-inline: 0; }
  .ba-stage .ba-frame { max-width: min(100%, calc((100vh - 320px) * .75)); }
  .ba-side { display: contents; }
  .ba-heading { order: -4; margin-bottom: 4px; text-align: center; }
  html.has-js .ba-tabs { order: -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .ba-tab { width: auto; font-size: 14px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.3); counter-increment: none; }
  .ba-tab::before { content: none; }
  .ba-tab[aria-selected="true"] { background: #fff; color: var(--navy-ink); border-color: #fff; }
  .ba-tab::after { left: 10px; right: 10px; }
  .ba-stage { order: 0; width: 100%; }
  .ba-cta { order: 1; margin: 8px 0 0; }

  .about-row { grid-template-columns: 1fr; gap: 24px; }
  /* phones: every service is one block — full-width photo on top, then the name, copy, sign-off and buttons;
     a hairline between services (desktop alternates photo left/right beside the text) */
  .srow, .srow--flip { grid-template-columns: 1fr; gap: 18px; padding: 34px 0; scroll-margin-top: 62px; }
  .srow + .srow { border-top: 1px solid var(--line); }
  .srow__media { order: -1; }
  .srow__media img { width: 100%; max-width: none; aspect-ratio: 4 / 3; }
  .srow__ctas { width: 100%; }
  .srow:first-child { scroll-margin-top: 92px; }
  .contact-cols { grid-template-columns: 1fr; gap: 48px; }
  .contact-cols .info { text-align: center; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .contact-cols { padding-inline: var(--gutter); }   /* the page gutter, as on phdhomesolutions.com/contact/ */
  .contact-cols .info h2 { text-align: center; }
  .contact-cols > div:not(.info) h2, .contact-cols__sub { text-align: center; }
  .band__actions { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .review__stars { font-size: 26px; letter-spacing: 3px; line-height: 1; margin-bottom: 14px; }
}
@media (max-width: 900px) {
  /* phones: the trailer sits under the heading, above the item list, and scrolls with the page (no pinning).
     Same tinted styling as the desktop stage, with a hairline underneath so the list reads as its own block. */
  .est-widget--home { display: flex; flex-direction: column; }
  .est-widget--home .est-head--home, .est-widget--home .sim-invite { order: 0; }
  .est-widget--home .est-stage { order: 1; margin: 0 -14px 10px; padding: 6px 14px 8px; background: var(--tint); border-bottom: 1px solid rgba(27, 65, 116, .14); }
  .est-widget--home .est-items, .est-widget--home .est-toggle { order: 2; }
  .est-widget--home .tpg { max-width: 300px; }
  .est-widget--home .est-result { margin-top: 2px; }
  .est-widget--home .est-clear { margin-top: 0; padding-top: 2px; padding-bottom: 2px; }
}
@media (max-width: 640px) {
  .pricing-split { grid-template-columns: 1fr; gap: 26px; }
  .pricing-split .sec-head { text-align: center; }
  .pricing-split .sec-head__lead { margin-inline: auto; }
  .pricing-stage { padding: 18px 14px 16px; }
}
@media (max-width: 360px) { .header__brand span { display: none; } }
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .svc-card h3 { font-size: 16px; }
  .svc-card .more { font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
  .svc-card__body { padding: 12px 12px 14px; }
}
@media (max-width: 480px) {
  .est-widget--home .est-items { grid-template-columns: 1fr; }
  .est-widget--home .pick__add { font-size: 15px; }
  .ba-handle__btn { width: 38px; height: 38px; }
  .rating-hero__stars svg { width: 30px; height: 30px; }
  .est-items { grid-template-columns: 1fr; }
  .est-items--collapsed:empty { min-height: 270px; }
  .info__actions { width: 100%; }
}
@media (min-width: 1000px) {
}
@media (prefers-reduced-motion: reduce) {
  html.is-arriving main, html.is-arriving .footer { opacity: 1; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .has-js [data-reveal] { opacity: 1; }
  .has-js [data-reveal].is-visible { animation: none; }
  .hero__content > *, .hero__brand, .mosaic__frame img { animation: none; }
}
@media print {
  .header, .footer, .band { display: none !important; }
  /* Print from the chart pop-up: only the chart goes to paper */
  body.has-lightbox > *:not(.lightbox) { display: none !important; }
  body.has-lightbox .lightbox, body.has-lightbox .lightbox[open] { display: block; position: static; width: auto; height: auto; max-height: none; margin: 0; }
  body.has-lightbox .lightbox__bar, body.has-lightbox .lightbox__hint { display: none !important; }
  body.has-lightbox .lightbox__stage { aspect-ratio: auto; height: auto; contain: none; overflow: visible; display: block; }
  body.has-lightbox .lightbox__img { position: static; width: 100%; max-width: 7.5in; height: auto; margin: 0 auto; transform: none !important; }
}

/* ---------- phones and other touch screens (phdhomesolutions.com rounds 24–27): no blue tap flash, and a
   tapped control does not stay lit in its hover colour ---------- */
@media (max-width: 760px), (hover: none) {
  a, button, summary, label, .chips span, .btn, .ba-handle, .ba-tab, .pick__add, .pick__minus, .review__more, .gbadge, .svc-card { -webkit-tap-highlight-color: transparent; }
}
@media (hover: none) {
  .btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: none; }
  .btn--orange:hover { background: var(--orange); border-color: var(--orange); color: var(--navy-ink); }
  .btn--light:hover { background: #fff; border-color: #fff; color: var(--navy); }
  .btn--outline:hover { background: transparent; border-color: var(--line-strong); color: var(--navy); }
  .btn--ghost:hover { background: transparent; border-color: rgba(255,255,255,.6); }
  .gbadge:hover { transform: none; box-shadow: none; }
  .badges .gbadge:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
  .social-btn:hover { border-color: var(--line-strong); background: #fff; }
  .footer .social-btn:hover { background: transparent; border-color: rgba(255,255,255,.25); }
  .rev-nav button:hover { background: #fff; color: var(--navy); }
  .ba-tab:hover:not([aria-selected="true"]) { color: rgba(255,255,255,.45); }
  .pick__add:hover { border-color: #d6dde8; }
  .pick.is-on .pick__add:hover { border-color: var(--navy); }
  .pick__minus:hover { background: rgba(255,255,255,.18); }
  .est-toggle:hover { background: none; color: var(--navy); }
  .est-widget--home .est-toggle:hover { color: var(--navy); }
  .svc-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .svc-card:hover img { transform: none; }
  .pricing-faq details:hover { border: 1px solid var(--line); }
  .pricing-faq summary:hover { background: transparent; }
}

@media (max-width: 400px) { .svc-card .more { font-size: 9.5px; letter-spacing: .03em; } }

/* ---------- home About on phones: first paragraph, then "Read more" (js/main.js); desktop shows it all ---------- */
.about-more-btn { display: none; margin: 4px 0 0; padding: 4px 0; border: 0; background: none; font-family: var(--heading); font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 760px) { .about-more-btn { display: inline-block; } }