/* =========================================================
   REFRESH LAYER (loaded last). Brand navy / blue / gold unchanged.
   Principles: colorful product-first commerce with readable shared UI.
   Printing = coral, Marketing = teal. Sentence-case labels, no fake numbering.
   ========================================================= */

/* ---------- Type ---------- */
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
h1 { line-height: 1.1; }
h2 { line-height: 1.18; }
h3, h4 { letter-spacing: -0.005em; }
body { font-size: 1rem; line-height: 1.65; }
p { max-width: 72ch; }
.cta-band h2, .home-why-section h2 { color: var(--color-white); }

/* Labels: sentence case with a short rule instead of tracked ALL CAPS */
.page-eyebrow, .section-eyebrow, .cta-band__eyebrow, .home-cta-band__eyebrow, .portfolio-cta-band__eyebrow,
.home-path-card__kicker, .home-nail-service-group > span, .home-portfolio-card__visual span,
.product-summary__category, .product-visual__kicker, .portfolio-digital-card__body > span,
.portfolio-proof-card__top > span {
  text-transform: none; letter-spacing: 0; white-space: normal;
  font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--font-weight-semibold);
}
.page-eyebrow, .section-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-secondary); }
.page-eyebrow::before, .section-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent-marketing); flex: none; }
.home-path-card--printing .home-path-card__kicker { color: var(--color-gold-deep); }
.home-why-section .page-eyebrow, .cta-band__eyebrow, .home-cta-band__eyebrow, .portfolio-cta-band__eyebrow { color: var(--color-gold-light); }
.home-why-section .page-eyebrow::before { background: var(--color-gold-light); }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.home-why-section :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--color-gold-light); }
.skip-link:not(:focus) { opacity: 0; pointer-events: none; }
.btn { min-height: var(--control-height); }

/* ---------- Section rhythm ---------- */
.section-heading { margin-bottom: var(--space-10); }
.section-heading h2 + p, .section-heading > div > p { margin-top: var(--space-3); }
.section-heading > p { color: var(--color-text-muted); }
.page-section--soft { background: var(--color-background); }
.process-step h3 { margin-top: var(--space-2); }
.process-step p { margin-top: var(--space-3); }
.process-step__number { color: var(--color-gold-deep); font-family: var(--font-display); font-size: var(--text-h4); }

/* Cards: no lift on hover (answers the action, not decoration) */
.product-card:hover, .home-service-card:hover, .home-portfolio-card:hover { transform: none; }
.product-card, .home-service-card, .home-portfolio-card { transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.product-card:hover, .home-service-card:hover, .home-portfolio-card:hover { border-color: var(--color-secondary); box-shadow: var(--shadow-sm); }
.product-card__price { font-family: var(--font-heading); font-weight: var(--font-weight-bold); }
.text-link { color: var(--color-secondary); font-weight: var(--font-weight-semibold); }

/* ---------- Home: two paths ---------- */
.home-path-card--printing { border-top-color: var(--accent-print); background: linear-gradient(180deg, var(--color-gold-tint) 0, var(--color-white) 38%); }
.home-path-card--marketing { border-top-color: var(--accent-marketing); }
.home-path-card__media { border-radius: var(--radius-md); }
.home-path-card__links a { font-weight: var(--font-weight-semibold); }
.home-path-card--printing .home-path-card__links a:hover { color: var(--color-gold-deep); }

/* Wider UI font: keep price + link rows tidy */
.product-card__bottom { flex-wrap: wrap; row-gap: var(--space-3); }
.product-card__bottom .text-link, .product-card__bottom a { white-space: nowrap; }
.product-card__price { white-space: normal; }

/* ---------- Home: capabilities as one ruled row, not five boxes ---------- */
.home-proof-grid { gap: 0; border-top: 2px solid var(--color-primary); }
.home-proof-card { border: 0; border-radius: 0; background: transparent; padding: var(--space-6) var(--space-6) var(--space-2) 0; }
.home-proof-card + .home-proof-card { border-left: 1px solid var(--color-border); padding-left: var(--space-6); }
.home-proof-card h3 { margin-top: 0; font-size: var(--text-body-lg); font-weight: var(--font-weight-bold); }

/* ---------- Home: marketing service cards ---------- */
.home-service-card { min-height: 0; padding: var(--space-5); }
.home-service-card__media, .home-path-card__media { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.home-service-card__media { margin-bottom: var(--space-5); border-radius: var(--radius-md); }
.home-service-card h3 { margin-top: 0; font-size: var(--text-body-lg); font-weight: var(--font-weight-bold); }
.home-service-card .text-link { padding-top: var(--space-5); }

/* ---------- Home: dark "why" section ---------- */
.home-why-section { position: relative; background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-ink) 100%); }
.home-why-section::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient-foil); }
.home-why-grid { align-items: center; }
.home-why-points article { display: block; padding: var(--space-6) 0 var(--space-6) var(--space-6); border-top: 0; border-left: 2px solid var(--color-gold); margin-bottom: var(--space-4); background: rgba(255, 255, 255, 0.03); }
.home-why-points article:first-child { padding-top: var(--space-6); }
.home-why-points h3 { color: var(--color-white); font-size: var(--text-body-lg); font-weight: var(--font-weight-bold); }

/* ---------- Home: nail salon panel ---------- */
.home-nail-panel { align-items: center; background: var(--color-gold-tint); border-color: var(--color-gold-border); }
.home-nail-service-group { background: var(--color-white); }
.home-nail-service-group > span { color: var(--color-gold-deep); }

/* ---------- CTA bands ---------- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--color-primary), var(--color-ink)); }
.cta-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient-foil); }
.cta-band .btn--primary { background: var(--color-gold); color: var(--color-ink); border-color: var(--color-gold); }
.cta-band .btn--primary:hover { background: var(--color-gold-light); color: var(--color-ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink); }

/* ---------- Product page ---------- */
.product-page--premium .product-visual { min-height: 0; aspect-ratio: 4 / 3; padding: 0; background: var(--color-surface-soft); }
.product-page--premium .product-visual[data-product-gallery="true"] { aspect-ratio: auto; }
.product-visual img { width: 100%; height: 100%; object-fit: cover; }
.product-summary__category { color: var(--color-gold-deep); }
.product-summary h1 { font-size: clamp(2rem, 2.2vw + 1rem, 2.75rem); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .home-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-proof-card:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 720px) {
  .home-proof-grid { grid-template-columns: 1fr; }
  .home-proof-card, .home-proof-card + .home-proof-card { padding: var(--space-4) 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .home-proof-card:first-child { border-top: 0; }
  .section-heading { margin-bottom: var(--space-6); }
  .home-why-points article { padding-left: var(--space-4); }
}

/* Reserve image space before lazy-load (prevents layout shift) */
.home-portfolio-card__visual img, .product-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; min-height: 0; }
.home-portfolio-card__visual { min-height: 0; }

/* Sentence-case for every remaining ALL-CAPS label (generated from a full scan) */
.quote-summary__row span,
.site-footer__heading,
.page-eyebrow,
.section-eyebrow,
.cta-band__eyebrow,
.website-card-kicker,
.website-package-card__topline span,
.website-package-card__topline em,
.website-package-notes span,
.website-why-card > span,
.website-pricing-table__feature-head span,
.local-map-visual__topline span,
.geo-grid-stage__head span,
.social-showcase-card > div:last-child > span,
.social-package-card__topline span,
.social-local-goal > span,
.social-reporting-cards article > span,
.social-proof__panel > span,
.portfolio-digital-card__body > span,
.portfolio-proof-card__top > span,
.portfolio-cta-band__eyebrow,
.real-work-project-card__service,
.website-project-card__service,
.mega-menu__eyebrow,
.product-summary__category,
.option-preview__label,
.spec-item__label,
.product-configurator__eyebrow,
.product-key-spec span,
.product-visual__kicker {
  text-transform: none;
  letter-spacing: 0;
}

/* Product page: image stays in view while the configurator scrolls */
@media (min-width: 1024px) {
  .product-page--premium .product-visual { position: sticky; top: var(--space-6); align-self: start; }
}

/* Vietnamese runs longer: slightly smaller display size */
html[lang="vi"] .home-hero__content h1 { font-size: clamp(2.4rem, 3.2vw + 1rem, 4.2rem); }
html[lang="vi"] h2 { line-height: 1.25; }

/* =========================================================
   Contact + new components
   ========================================================= */
.icon { flex: none; }

/* Header: click-to-call */
.site-header__call { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); color: var(--color-primary); font-weight: var(--font-weight-bold); white-space: nowrap; border: 1px solid var(--color-border-strong); background: var(--color-white); }
.site-header__call:hover { border-color: var(--color-gold); background: var(--color-gold-tint); }
.site-header__call .icon { color: var(--color-gold-deep); }
@media (max-width: 1100px) { .site-header__call span { display: none; } .site-header__call { padding: var(--space-3); } }

/* Mobile menu contact */
.mobile-nav__contact { display: grid; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.mobile-nav__contact a { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.mobile-nav__contact .icon { color: var(--color-gold-deep); }

/* Footer contact */
.site-footer__contact { list-style: none; margin: var(--space-6) 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.site-footer__contact a, .site-footer__place { display: flex; align-items: flex-start; gap: var(--space-3); color: rgba(255, 255, 255, 0.86); font-size: var(--text-small); line-height: 1.5; }
.site-footer__contact a:hover { color: var(--color-gold-light); }
.site-footer__contact .icon { color: var(--color-gold-light); margin-top: 2px; }

/* Sticky call / quote bar (phones only) */
.mobile-cta-bar { display: none; }
@media (max-width: 720px) {
  .mobile-cta-bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-2); padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background: var(--color-white); border-top: 1px solid var(--color-border); box-shadow: 0 -6px 20px rgba(12, 22, 39, 0.08); }
  .mobile-cta-bar a { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 46px; border-radius: var(--radius-md); font-weight: var(--font-weight-bold); }
  .mobile-cta-bar__call { color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.mobile-cta-bar__quote, .mobile-cta-bar__facebook { color: var(--color-white); background: var(--color-primary); }
  body { padding-bottom: 66px; }
}

/* Contact page */
.contact-side { display: grid; min-width: 0; gap: var(--space-4); align-content: start; }
.contact-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.contact-card h2 { font-size: var(--text-h4); margin-bottom: var(--space-4); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.contact-list a, .contact-list__item { display: flex; gap: var(--space-4); align-items: flex-start; color: var(--color-text); }
.contact-list a > span, .contact-list__item > span { min-width: 0; }
.contact-list .icon { color: var(--color-gold-deep); margin-top: 3px; }
.contact-list small { display: block; font-size: var(--text-small); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.contact-list strong { display: block; overflow-wrap: anywhere; font-weight: var(--font-weight-bold); color: var(--color-primary); line-height: 1.45; }
.contact-list a:hover strong { color: var(--color-secondary); text-decoration: underline; }
.contact-card--quote { background: var(--color-gold-tint); border-color: var(--color-gold-border); }
.contact-card--quote p { margin-bottom: var(--space-4); }
.info-card--call a { color: var(--color-primary); }
.info-card--call a:hover { color: var(--color-secondary); }

/* Home: audience cards */
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.audience-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.audience-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.audience-card__body { padding: var(--space-6); display: grid; gap: var(--space-3); }
.audience-card h3 { font-size: var(--text-h4); }
.audience-card p { color: var(--color-text-muted); }
.audience-card ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.audience-card li a { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); font-size: var(--text-small); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.audience-card li a:hover { border-color: var(--color-gold); background: var(--color-gold-tint); }
@media (max-width: 900px) { .audience-grid { grid-template-columns: 1fr; } .audience-card { flex-direction: row; } .audience-card img { width: 42%; aspect-ratio: auto; object-fit: cover; } }
@media (max-width: 560px) { .audience-card { flex-direction: column; } .audience-card img { width: 100%; aspect-ratio: 4 / 3; } }

/* Home: process icons + CTA contact */
.process-step__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-gold-tint); color: var(--color-gold-deep); margin-bottom: var(--space-3); }
.process-step__number { display: block; margin-bottom: var(--space-1); }
.home-cta-band__contact { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); font-weight: var(--font-weight-semibold); }
.home-cta-band__contact a { color: var(--color-gold-light); text-decoration: underline; text-underline-offset: 3px; }
.home-cta-band__contact span { color: rgba(255, 255, 255, 0.5); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
@media (max-width: 720px) { .site-header__call { display: none; } }

/* Footer logo sits on a light badge so the dark lettering stays readable */
.site-footer__logo { background: var(--color-white); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }

/* Shorter path-card images keep the first screens tight */
.home-path-card__media { aspect-ratio: 16 / 10; }

/* Phase 1: predictable contact controls and comfortable independent targets. */
.btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.no-script-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-3); }
.no-script-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.site-footer__links a, .site-footer__social a, .site-footer__contact a,
.mobile-nav__contact a, .mega-menu__link, .mega-menu__group-title a {
  display: flex; align-items: center; min-height: 44px;
}
.language-switcher__option { min-width: 44px; min-height: 44px; }
.site-footer__credit a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.contact-actions a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.forms-unavailable { margin-bottom: var(--space-6); padding: var(--space-4); border: 1px solid var(--color-gold-border); border-radius: var(--radius-md); background: var(--color-gold-tint); }
.forms-unavailable p { margin: 0; }
@media (max-width: 767px) {
  .site-brand { max-width: 100%; }
  .site-brand__logo { max-width: 100%; height: auto; }
  .language-switcher__option { min-width: 44px; min-height: 44px; }
  .mobile-nav__group-links a, .mobile-nav__group-summary, .mobile-nav__primary > a { min-height: 44px; }
  .text-link, .home-path-card__links a, .audience-card li a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .mobile-cta-bar a { font-size: var(--text-small); line-height: 1.3; }
}