@font-face { font-family: Manrope; src: url(/assets/manrope-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(/assets/source-sans-3-latin.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --paper: #fbf8f3;
  --paper-deep: #f1e8da;
  --cream: #f1e8da;
  --white: #fff;
  --ink: #15363a;
  --ink-soft: #3a5254;
  --muted: #5f6967;
  --line: rgba(21, 54, 58, 0.14);
  --orange: #d56427;
  --action: #b84717;
  --teal: #56b4b5;
  --display: Manrope, "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(36px, 4.4vw, 54px); font-weight: 800; }
h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; background: var(--white); padding: 10px 16px; }
.skip:focus { left: 8px; }
.eyebrow { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--action); margin-bottom: 14px; }
.lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; margin-top: 20px; max-width: 34em; }
.lede--ink { color: var(--ink-soft); }
.fineprint { margin-top: 18px; font-size: 15px; color: var(--muted); max-width: 46em; }
.fineprint a { color: var(--ink); }
.arrow { flex: none; transition: transform 0.2s; }
a:hover .arrow { transform: translateX(3px); }

/* ------------------------------------------------------------- buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 32px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 0; background: var(--action); color: var(--white); font: 700 16px/1 var(--display);
  text-decoration: none; cursor: pointer; transition: background 0.2s;
}
.button:hover { background: #9c3b12; }
.button--small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.button--ink { background: var(--ink); }
.button--ink:hover { background: #0c2427; }
.button--ghost { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); backdrop-filter: blur(6px); }
.button--ghost:hover { background: rgba(255, 255, 255, 0.24); }
.button--light { background: var(--paper); color: var(--ink); }
.button--light:hover { background: var(--white); }
.textlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 15px/1 var(--display); text-decoration: none; border-bottom: 1.5px solid currentColor; }

/* ------------------------------------------------------------- header */
.preview { background: var(--ink); color: #d9e3e1; font: 600 13px/1.3 var(--display); text-align: center; padding: 8px 16px; }
.header { position: sticky; top: 0; z-index: 20; background: rgba(247, 244, 238, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.header__logo { text-decoration: none; margin-right: auto; }
@media (max-width: 920px) { .header__inner { min-height: 66px; } }
/* Nov 12, 2026: the "Art of Comfort Services" wordmark and the main navigation, the current page underlined.
   Below 1180px the links take their own row, wrapping on phones, and the header scrolls with the page. */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; font: 800 21px/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.nav ul { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 700 15px/1 var(--display); color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 7px; }
@media (max-width: 1179px) {
  .header { position: relative; }
  .header__inner { flex-wrap: wrap; column-gap: 16px; row-gap: 0; min-height: 0; padding-top: 10px; }
  .nav { order: 3; flex: 1 0 100%; padding-bottom: 6px; }
  .nav ul { margin-left: -12px; }
}
@media (max-width: 560px) {
  .header__inner { padding-top: 6px; }
  .wordmark { font-size: 17px; }
  .nav ul { margin-left: -10px; }
  .nav a { padding: 0 10px; }
}


/* Layout follows starbucks.com/rewards: a cream hero band, short centered sections, few words,
   lots of space, small pill buttons. Colors and type stay HomeAssist's. */

/* --------------------------------------------------------------- hero */
.hero { background: var(--cream); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero__copy { text-align: center; display: grid; justify-items: center; }
.hero__copy h1 { max-width: 11em; }
.hero__sub { margin-top: 18px; max-width: 26em; font-size: 18px; color: var(--ink-soft); }
.hero__price { margin-top: 26px; display: grid; gap: 2px; justify-items: center; }
.actions--center { justify-content: center; margin-top: 22px; }
.price { font: 600 18px/1.1 var(--display); color: var(--ink-soft); }
.price strong { font-size: 40px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.price__note { font-size: 15px; color: var(--muted); }

/* The Starbucks-style crop: a tall rounded oval. */
.hero__art { position: relative; width: min(100%, 520px); justify-self: center; padding-bottom: 8%; }
.oval { aspect-ratio: 5 / 6; border-radius: 50% / 42%; overflow: hidden; background: var(--ink); }
.oval__image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__art .member-card { position: absolute; left: -6%; bottom: 0; width: 64%; }
.hero__art--card .oval { background: radial-gradient(120% 90% at 50% 20%, #24525a 0%, var(--ink) 70%); }
.hero__art--card .member-card { left: 50%; top: 50%; bottom: auto; width: 82%; transform: translate(-50%, -50%) rotate(-7deg); }
.hero__art--app .phone { position: absolute; left: -4%; bottom: 0; width: 40%; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { width: min(100%, 420px); }
  .hero__art .member-card { left: 0; width: 66%; }
}

/* ------------------------------------------------------- member card */
/* Option 8's card from the logo canvas, at credit-card proportions. Type scales with the card. */
.member-card { container-type: inline-size; }
.member-card__face { position: relative; aspect-ratio: 1.586; border-radius: 5.2cqi; background: linear-gradient(135deg, #de7034 0%, var(--orange) 45%, #c4561d 100%); color: var(--white); box-shadow: 0 18px 40px rgba(21, 54, 58, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25); overflow: hidden; font-family: var(--display); }
.member-card__face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 45%, transparent 60%); pointer-events: none; }
.member-card--tilt { transform: rotate(-6deg); }
.member-card__brand { position: absolute; left: 8cqi; top: 8cqi; display: flex; align-items: center; gap: 3.5cqi; font-size: 8cqi; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.member-card__brand svg { width: 11cqi; height: auto; }
.member-card__line { position: absolute; left: 8cqi; bottom: 21cqi; display: grid; gap: 1.6cqi; font-size: 7.4cqi; font-weight: 700; letter-spacing: 0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.member-card__line small { font-size: 3.3cqi; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.member-card__foot { position: absolute; left: 8cqi; right: 8cqi; bottom: 7.5cqi; display: flex; justify-content: space-between; align-items: flex-end; font-size: 4cqi; font-weight: 600; line-height: 1; }
.member-card__foot span:first-child { font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }

/* ------------------------------------------------------------ sections */
.section { padding: clamp(64px, 8vw, 104px) 0; }
.section--tight { padding: clamp(24px, 4vw, 48px) 0; }
.head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 56px); }
.head p { margin-top: 10px; color: var(--ink-soft); }
.wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.fineprint--center { text-align: center; margin-left: auto; margin-right: auto; }
.phero { padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 64px); }
.phero h1 { max-width: 14em; }
.section--topless { padding-top: 0; }
.prose { display: grid; gap: 1em; font-size: 18px; color: var(--ink-soft); }
.prose--narrow { max-width: 680px; }

/* ------------------------------------------------------- what's included */
/* As on amazon.com/amazonprime: round pictures, a short title, one line. */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); text-align: center; }
.benefit { display: grid; justify-items: center; align-content: start; gap: 8px; }
.benefit__image { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; box-shadow: 0 0 0 6px var(--cream); }
.benefit p { color: var(--ink-soft); max-width: 22em; font-size: 16px; }
.extras { margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(36px, 5vw, 52px); border-top: 1px solid var(--line); }
.extras__title { text-align: center; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.extras ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); text-align: center; }
.extra { display: grid; justify-items: center; align-content: start; gap: 8px; }
.extra__icon { color: var(--action); margin-bottom: 4px; }
.extra h4 { margin: 0; font: 700 17px/1.25 var(--display); letter-spacing: -0.01em; }
.extra p { font-size: 15.5px; color: var(--ink-soft); max-width: 22em; }
@media (max-width: 820px) { .benefits, .extras ul { grid-template-columns: 1fr; gap: 40px; } .benefit__image { width: 132px; height: 132px; } }

/* --------------------------------------------------- rounded panels */
.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding: clamp(32px, 5vw, 64px); border-radius: 28px; background: var(--cream); }
.panel__art { display: grid; place-items: center; }
.panel__art .member-card { width: min(100%, 420px); }
.panel__copy { display: grid; gap: 12px; justify-items: start; }
.panel__copy .eyebrow { margin: 0; }
.panel__copy > p:not(.eyebrow):not(.fineprint):not(.panel__phone) { color: var(--ink-soft); max-width: 30em; }
.panel__phone { display: grid; gap: 2px; margin-top: 6px; }
.panel__phone a { font: 800 30px/1.1 var(--display); letter-spacing: -0.02em; color: var(--action); text-decoration: none; }
.panel__phone span { font-size: 14px; color: var(--muted); }
.panel .fineprint { margin-top: 2px; font-size: 14px; }
.panel--cta .panel__copy { justify-items: center; text-align: center; }
.panel--cta .panel__art .member-card { width: min(100%, 340px); }
@media (max-width: 820px) { .panel { grid-template-columns: 1fr; } .panel--line .panel__art { order: -1; } .panel--cta .panel__art { order: -1; } }

/* ------------------------------------------------------------ app band */
.app-band { background: var(--ink); color: var(--paper); overflow: hidden; }
.app-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.app-band__copy { display: grid; gap: 14px; justify-items: start; }
.app-band__copy > p { color: #d9e3e1; max-width: 30em; }
.app-band__brand { display: flex; align-items: center; gap: 14px; }
.app-band__brand img { border-radius: 13px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.app-band__brand span { display: grid; font: 800 18px/1.2 var(--display); letter-spacing: -0.01em; color: var(--white); }
.app-band__brand small { font-weight: 600; font-size: 14px; color: #b9c9c6; letter-spacing: 0; }
.app-band h2 { color: var(--white); }
.app-band__phones { position: relative; display: flex; justify-content: center; padding: 8px 18% 8px 0; }
.phone { width: min(100%, 270px); aspect-ratio: 390 / 844; padding: 2.6%; border-radius: 15% / 7%; background: #0b0b0b; box-shadow: 0 0 0 1.5px #3a3a3a, 0 30px 60px rgba(0, 0, 0, 0.4); position: relative; z-index: 1; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 12.5% / 5.8%; }
.phone--back { position: absolute; right: 4%; top: 12%; width: min(46%, 230px); z-index: 0; transform: rotate(6deg); opacity: 0.96; }
@media (max-width: 900px) { .app-band__grid { grid-template-columns: 1fr; } .app-band__phones { padding-right: 22%; } .app-band__phones .phone:not(.phone--back) { width: min(62%, 250px); } .phone--back { width: min(44%, 200px); right: 6%; } }

/* --------------------------------------------------------------- teams */
/* Each owner's circular headshot with a script signature, as on artofcomfort.com and
   betterwaterheaters.com, then that company's ratings. */
/* Each team spans six rows of a shared subgrid, so every background ends, and every ratings block
   starts, at the same height across the three columns. */
.teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: clamp(28px, 4vw, 56px); row-gap: 0; }
.team { grid-row: span 6; display: grid; grid-template-rows: subgrid; justify-items: center; text-align: center; }
.team__photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 3px solid var(--white); box-shadow: 0 6px 18px rgba(21, 54, 58, 0.18); margin-bottom: 14px; }
.team__name { font-size: 21px; }
.team__company { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; font: 700 16px/1.2 var(--display); color: inherit; text-decoration: none; }
.team__company .tile { width: 28px; height: 28px; }
.team__trade { font: 600 13px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--action); margin-top: 10px; }
.team__note { margin-top: 10px; font-size: 15.5px; color: var(--ink-soft); max-width: 22em; }
/* Ratings stack in one left-aligned column, centered under the team, so the stars line up. */
.team .review-badges { display: grid; justify-content: center; justify-items: start; align-content: start; gap: 10px; width: 100%; margin-top: 18px; padding-top: 18px; }
@media (max-width: 820px) {
  .teams { grid-template-columns: 1fr; }
  .team .review-badges { border-top: 0; padding-top: 0; }
  .team + .team { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 40px; }
}

/* ----------------------------------------------------------------- faq */
.faq-contact { margin-top: 32px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; }
.faq-contact h3 { margin: 0 0 12px; }
.faq-contact p { margin: 0; color: var(--ink-soft); }
.faq-contact a { white-space: nowrap; text-decoration: underline; }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font: 700 17.5px/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 0.9; color: var(--action); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--ink-soft); max-width: 40em; }

/* --------------------------------------------------------------- terms */
.terms { background: #efede9; padding: 40px 0; font-size: 14px; color: var(--muted); }
.terms h2 { font-size: 15px; letter-spacing: 0; margin-bottom: 8px; color: var(--ink); }
.terms p { max-width: 64em; }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--ink); color: #d9e3e1; padding: 64px 0 32px; }
.footer a { text-decoration: none; }
/* Nov 12, 2026: the doc's footer: the name and motto, then Our Companies, Explore and Legal. */
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer__grid > div { display: grid; gap: 10px; align-content: start; }
.footer__grid ul { display: grid; gap: 10px; }
.footer h2 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #f0a070; margin-bottom: 4px; }
.footer__grid a:hover { color: var(--white); text-decoration: underline; }
.footer__name { font: 800 22px/1.1 var(--display); letter-spacing: -0.03em; color: var(--white); }
.footer__motto { font: 700 16px/1.3 var(--display); color: #f0a070; }
.footer__tag { max-width: 26em; color: #b9c9c6; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 14px; color: #b9c9c6; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* --------------------------------------------------------------- logo */
/* Option 8: the A° app mark on the orange tile beside "HomeAssist / by Art of Comfort". */
.hc-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.hc-tile { flex: none; display: block; }
.hc-words { display: flex; flex-direction: column; line-height: 1; }
.hc-name { font: 800 22px/1 var(--display); letter-spacing: -0.035em; }
.hc-by { font: 600 12px/1 var(--display); color: var(--muted); margin-top: 4px; }
.footer .hc-logo { color: var(--paper); }
.footer .hc-by { color: #b9c9c6; }
.footer__logo { text-decoration: none; }
@media (max-width: 920px) { .header .hc-tile { width: 38px; height: 38px; } .header .hc-name { font-size: 20px; } }
@media (max-width: 380px) { .header .hc-by { display: none; } }

/* ------------------------------------------------------------ buttons */
.button--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.button--quiet:hover { background: var(--white); }
.button--block { width: 100%; }
.button .button__label { font: inherit; }
.button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* --------------------------------------------------- rating badges */
/* As on artofcomfort.com and chaseelectric.com. */
.review-badges { display: flex; flex-wrap: wrap; gap: 9px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.review-badge { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font: 700 13px/1 var(--display); letter-spacing: 0.02em; color: var(--ink); }
.review-badge > span:last-child:not(.badge-shimmer) { color: var(--muted); font-weight: 600; }
.review-badge:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.review-badge svg, .review-badge img { flex: none; display: block; }
.stars-row { display: inline-flex; gap: 1px; color: #f6b21b; }
.badge-shimmer { position: relative; display: inline-block; flex: none; }
.badge-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%); background-size: 300% 300%; background-position: 120% 0; animation: badge-sweep 3.8s ease-in-out infinite; -webkit-mask-image: url(/assets/diamond-certified-badge.png); mask-image: url(/assets/diamond-certified-badge.png); -webkit-mask-size: contain; mask-size: contain; }
@keyframes badge-sweep { 0% { background-position: 120% 0; } 55%, 100% { background-position: -120% 0; } }

/* ------------------------------------------------------------- reviews */
/* Two carousel rows, edge to edge across the page. */
.reviews-section { overflow: hidden; }
.review-rows { display: grid; gap: 16px; min-width: 0; }
.review-stage { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; padding: 4px 0 8px; }
.review-stage::-webkit-scrollbar { display: none; }
.review-stage:focus-visible { outline-offset: -3px; }
.review-group { display: flex; flex: none; gap: 16px; padding-right: 16px; align-items: stretch; }
.review-group[hidden] { display: none; }
.review-slide { flex: 0 0 300px; width: 300px; margin: 0; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: var(--white); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(21, 54, 58, 0.06); overflow-wrap: anywhere; }
.section--deep .review-slide { box-shadow: none; }
.review-slide figcaption { display: flex; align-items: center; gap: 11px; }
.review-slide .tile { width: 36px; height: 36px; }
.review-slide cite { display: block; font: 700 16px/1.25 var(--display); font-style: normal; }
.review-company { display: block; font-size: 14px; color: var(--muted); }
/* Every review is cut to five lines and every card is the same height, so both rows match. */
.review-slide blockquote { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); height: calc(5 * 1.55em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.reviews-section > .wrap:last-child .fineprint { margin-top: 22px; }
@media (max-width: 520px) { .review-slide { flex-basis: min(300px, calc(100vw - 56px)); width: min(300px, calc(100vw - 56px)); } }
@media (prefers-reduced-motion: reduce) { .review-group[data-review-clone] { display: none !important; } .badge-shimmer::after { animation: none; } }

/* ------------------------------------------------------- Join today */
/* Laid out like the artofcomfort.com request form: a dark intro panel beside the form. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.terms-dialog { width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 64px 28px 28px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 80px rgba(0,0,0,.3); overflow: auto; }
.terms-dialog::backdrop { background: rgba(9,24,27,.55); }
.jcheck [data-terms-open] { display: inline-block; }
.terms-dialog h2 { font-size: 24px; margin: 0 0 16px; }
.terms-dialog p { font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.terms-dialog .dialog-close { position: absolute; }
.join-dialog { width: min(1000px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 28px; color: var(--ink); background: var(--paper); box-shadow: 0 32px 110px rgba(0, 0, 0, 0.32); overflow: auto; }
.join-dialog::backdrop { background: rgba(9, 24, 27, 0.7); backdrop-filter: blur(5px); }
.dialog-close-form { position: sticky; top: 0; z-index: 4; height: 0; margin: 0; }
.dialog-close { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.92); font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; }
.join-shell { display: grid; grid-template-columns: 0.78fr 1.22fr; min-height: 600px; }
.join-shell [hidden] { display: none !important; }
.join-page .join-shell { border-radius: 28px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.join-intro { padding: clamp(28px, 4vw, 52px); background: var(--ink); color: var(--paper); display: flex; flex-direction: column; gap: 16px; }
.join-intro__brand { display: flex; align-items: center; gap: 10px; font: 800 18px/1.1 var(--display); letter-spacing: -0.02em; }
.join-intro__brand small { display: block; font-weight: 600; font-size: 12px; letter-spacing: 0; color: #b9c9c6; }
.join-intro h1, .join-intro h2 { margin: 0; font-size: clamp(36px, 4vw, 52px); color: var(--white); }
.join-intro > p { margin: 0; color: #d9e3e1; }
.join-price { font: 600 18px/1.1 var(--display); }
.join-price strong { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; margin-right: 4px; }
.join-price span { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; color: #b9c9c6; }
.join-includes { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 16px; }
.join-includes span { display: inline-block; width: 34px; font: 800 15px/1 var(--display); color: #f0a070; }
.join-proof { margin-top: auto !important; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--display); letter-spacing: 0.03em; }
.join-main { padding: clamp(28px, 4vw, 52px); min-width: 0; }
.join-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.join-form legend { width: 100%; padding: 0 52px 0 0; margin-bottom: 20px; font: 800 24px/1.2 var(--display); letter-spacing: -0.025em; }
.jgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jf { display: grid; gap: 7px; margin: 0; }
.jf--wide { grid-column: 1 / -1; }
.jf > span:first-child { font: 700 14px/1.2 var(--display); }
.jf .opt { font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); margin-left: 4px; }
.jf input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #c9cfcb; border-radius: 12px; background: var(--white); font: 400 17px/1.3 var(--body); color: var(--ink); }
.jf input:focus { outline: none; border-color: var(--ink); }
.jf [aria-invalid="true"] { border-color: #b3261e; }
.addr-field { position: relative; display: block; }
.addr-sug { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 100%; max-width: min(480px, 82vw); padding: 5px; background: var(--white); border-radius: 12px; box-shadow: 0 16px 40px rgba(21, 54, 58, 0.18); }
.addr-sug li { padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1.3; }
.addr-sug li:hover, .addr-sug li[aria-selected="true"] { background: var(--paper); }
.step-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.form-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.form-note--preview { padding: 11px 14px; border-radius: 10px; background: #fbefc8; color: #5c4400; }
.join-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 18px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.join-summary strong { display: block; font-family: var(--display); }
.join-summary span { font-size: 14px; color: var(--muted); }
.join-summary__total { font-size: 24px; letter-spacing: -0.03em; }
.stripe-box { padding: 18px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 16px; }
.stripe-box .jgrid + .jcheck, .stripe-box [data-billing-address] { margin-top: 16px; }
.stripe-note { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.jcheck { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15.5px; line-height: 1.45; }
.jcheck input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ink); }
.jcheck input[aria-invalid="true"] { outline: 2px solid #b3261e; }
.join-success { display: grid; gap: 12px; justify-items: start; }
.join-success h2 { margin-top: 4px; font-size: clamp(30px, 3.4vw, 40px); }
.join-success > p { color: var(--ink-soft); }
.join-success h3 { margin-top: 16px; }
.join-book { display: grid; gap: 10px; width: 100%; }
.join-book li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.join-book img { flex: none; border-radius: 23%; }
.join-book li > span { flex: 1; min-width: 0; }
.join-book strong { display: block; font: 700 16px/1.3 var(--display); }
.join-book small { color: var(--muted); }
.button.is-sending { cursor: progress; opacity: 0.75; }
@media (max-width: 860px) {
  .join-shell { grid-template-columns: 1fr; min-height: 0; }
  .join-includes, .join-proof { display: none; }
  .join-dialog { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  /* After step 1 the offer has been read: keep just the brand on the dark band to save height. */
  .join-shell:not([data-at="1"]) .join-intro > :not(.join-intro__brand) { display: none; }
  .join-shell:not([data-at="1"]) .join-intro { padding-block: 20px; }
}
@media (max-width: 520px) { .jgrid { grid-template-columns: 1fr; } .join-book li { flex-wrap: wrap; } .join-book .button { width: 100%; } }


/* --------------------------------------------------------------- value */
/* What membership is worth against its price: a seal on the hero photo, a price tag on each
   included service and "Included" pills on the other benefits. The asterisk's basis is in the terms. */
.value-line { margin-top: 10px; font: 600 16px/1.3 var(--display); color: var(--ink-soft); }
.value-line strong { color: var(--action); font-weight: 800; }
.value-seal { position: absolute; right: 2%; top: 4%; width: 34%; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; text-align: center; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5), 0 14px 30px rgba(21, 54, 58, 0.3); transform: rotate(-8deg); }
.value-seal::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px dashed var(--orange); }
.value-seal strong { font: 800 clamp(24px, 3vw, 38px)/1 var(--display); letter-spacing: -0.03em; color: var(--action); margin: 4px 0; }
.value-seal small { font: 700 11px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.benefits--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 1000px) { .benefits--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .benefits--4 { grid-template-columns: 1fr; } }
.benefit__pic { position: relative; display: inline-block; }
.value-tag { position: absolute; right: -14px; top: 6px; display: grid; justify-items: center; padding: 8px 12px 7px 22px; background: var(--orange); color: var(--white); border-radius: 6px 10px 10px 6px; transform: rotate(8deg); box-shadow: 0 6px 14px rgba(21, 54, 58, 0.22); clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
.value-tag::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--paper); }
.value-tag span { font: 800 19px/1 var(--display); letter-spacing: -0.02em; }
.value-tag small { font: 700 10px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2px; opacity: 0.9; }
.value-pill { display: inline-flex; align-items: center; margin-top: 6px; padding: 5px 11px; border-radius: 999px; background: #e3f1ef; color: #1f6b56; font: 700 12.5px/1 var(--display); letter-spacing: 0.04em; text-transform: none; }
.value-pill--money { background: #fbe4d5; color: var(--action); }
.value-pill--inline { margin: 0 0 0 8px; vertical-align: middle; }
.app-band__brand .value-pill--on-dark { display: inline-flex; margin: 0 0 0 4px; color: #1f6b56; font: 700 12.5px/1 var(--display); letter-spacing: 0.04em; }
@media (max-width: 560px) { .value-seal { width: 38%; } .value-seal small { font-size: 8.5px; letter-spacing: 0.1em; } }

/* ---------------------------------------------- Art of Comfort Services */
/* Nov 12, 2026: the pages from KG's "Website Structure & Final Copy" doc. They reuse the membership page's
   pieces (cream hero band, centered heads, rounded panels, pill buttons, round headshots, trade labels)
   with the companies' own photos. */
.section--cream { background: var(--cream); }
.hero__sub + .hero__sub { margin-top: 10px; }
.head .eyebrow { margin-bottom: 12px; }

/* Home hero: one photo from each company in tall pills, the middle one lower, each with its tile. */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); align-items: start; width: min(100%, 520px); justify-self: center; padding-bottom: 22px; }
.trio__item { position: relative; margin: 0; }
.trio__item:nth-child(2) { margin-top: 28%; }
.trio__item > img:first-child { width: 100%; height: auto; aspect-ratio: 3 / 5; object-fit: cover; border-radius: 999px; background: var(--paper-deep); }
.trio__item .tile { position: absolute; left: 50%; bottom: -18px; width: 46px; height: 46px; transform: translateX(-50%); border-radius: 22%; box-shadow: 0 0 0 4px var(--cream), 0 8px 18px rgba(21, 54, 58, 0.2); }
@media (max-width: 900px) { .trio { width: min(100%, 420px); } .trio__item .tile { width: 38px; height: 38px; bottom: -14px; } }

/* Company cards (home, contact): photo, tile and name, trade, the doc's lines, a link out. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(21, 54, 58, 0.06), 0 12px 32px rgba(21, 54, 58, 0.07); }
.card__photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(22px, 2.4vw, 30px); }
.card__brand { display: flex; align-items: center; gap: 11px; }
.card__brand .tile { flex: none; width: 32px; height: 32px; border-radius: 22%; }
.card__brand h2, .card__brand h3 { font-size: 21px; }
.card__trade { font: 600 13px/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--action); }
.card__body > p:not(.card__trade) { font-size: 16px; color: var(--ink-soft); }
.card__body > p.card__area { color: var(--muted); font-size: 15px; }
.card .textlink, .card .button { margin-top: auto; }
@media (max-width: 900px) { .cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; } }

/* Two sections side by side (home: why we came together, how we work together). */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; }
.split > section { display: grid; gap: 14px; justify-items: start; }
.split .eyebrow { margin: 0; }
.split > section > p:not(.eyebrow):not(.split__action) { color: var(--ink-soft); max-width: 32em; }
.split__action { margin-top: 10px; }
@media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Panels: one column, the AOC1 panel's company tiles, and the dark closing panel. */
.panel--single { grid-template-columns: minmax(0, 1fr); }
.panel--single .panel__copy > p:not(.eyebrow) { max-width: 36em; }
.tiles { display: flex; justify-content: center; gap: clamp(12px, 2vw, 20px); padding-bottom: 18px; }
.tiles .tile { width: clamp(72px, 8vw, 96px); height: auto; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 12px 28px rgba(21, 54, 58, 0.18); }
.tiles .tile:nth-child(2) { transform: translateY(18px); }
.panel--ink { background: var(--ink); color: var(--paper); }
.panel--ink h2 { color: var(--white); }
.panel--ink .panel__copy > p:not(.eyebrow):not(.fineprint):not(.panel__phone) { color: #d9e3e1; }
@media (max-width: 820px) { .panel--aoc1 .panel__art { order: -1; } }

/* Inner pages open on the cream band, headline and lines centered. */
.hero--page .hero__copy { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.hero--page .hero__copy h1 { max-width: 15em; }
.hero--page .hero__sub { max-width: 36em; }

/* Our Story: the three beginnings with round headshots, the why in a narrow column, what stays the same. */
.founders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.founder { display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; }
.founder .team__photo { margin-bottom: 6px; }
.founder h3 { font-size: 21px; }
.founder p { font-size: 16px; color: var(--ink-soft); max-width: 24em; }
.story .prose { max-width: 640px; margin: 0 auto; }
.focus { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; }
.focus li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font: 700 17px/1.35 var(--display); }
.focus .tile { flex: none; width: 40px; height: 40px; border-radius: 22%; }
.prose--center { max-width: 36em; margin: 32px auto 0; text-align: center; }
@media (max-width: 820px) {
  .founders { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .founder + .founder { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 36px; }
}

/* Our Companies: each company's team photo beside its story, alternating sides. */
.features { display: grid; gap: clamp(56px, 8vw, 104px); }
.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.feature--flip .feature__photo { order: 2; }
.feature__photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 28px; }
.feature__copy { display: grid; gap: 12px; justify-items: start; }
.feature__copy .card__brand h2 { font-size: clamp(26px, 2.6vw, 34px); }
.feature__copy .card__brand .tile { width: 40px; height: 40px; }
.feature__copy > p:not(.card__trade) { color: var(--ink-soft); max-width: 32em; }
.feature__copy .actions { margin-top: 12px; }
@media (max-width: 820px) { .feature { grid-template-columns: minmax(0, 1fr); } .feature--flip .feature__photo { order: 0; } }

/* Services: one card per service with its company, the AOC1 card across the bottom. */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.service { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(21, 54, 58, 0.06), 0 12px 32px rgba(21, 54, 58, 0.07); }
.service__photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.service__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(22px, 2.6vw, 32px); }
.service__by { display: flex; align-items: center; gap: 10px; font: 700 15px/1.3 var(--display); color: var(--ink-soft); }
.service__by .tile { flex: none; width: 28px; height: 28px; border-radius: 22%; }
.service__list { display: grid; gap: 8px; margin: 2px 0 6px; color: var(--ink-soft); }
.service__list li { position: relative; padding-left: 20px; }
.service__list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.service .textlink { margin-top: auto; }
.service--aoc1 { grid-column: 1 / -1; background: var(--cream); box-shadow: none; }
.service--aoc1 .service__body { align-items: center; text-align: center; }
.service--aoc1 .service__body > p:not(.service__by) { max-width: 36em; color: var(--ink-soft); }
.service--aoc1 .button { margin-top: 8px; }
@media (max-width: 760px) { .services { grid-template-columns: minmax(0, 1fr); } }

/* Contact: each company's phone, website and contact page. */
.contact-card__line { overflow-wrap: anywhere; }
.contact-card__line a { color: var(--ink); font-weight: 700; }
.contact-card__phone { font: 800 20px/1.2 var(--display); text-decoration: none; }

/* Privacy Policy and Terms of Use. */
.legal h2 { margin-top: 0.8em; font-size: 22px; color: var(--ink); }
.legal a { color: var(--ink); }