/* Presentation layer. Brand tokens, logo geometry and generated content stay in their sources. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 5px;
}
main { overflow-wrap: break-word; }
main p { text-wrap: pretty; }
main h1, main h2, main h3 { text-wrap: balance; }
.ch-page-intro { padding: 64px 48px 48px !important; }
.ch-page-intro h1 > span {
  font-size: clamp(38px, 5vw, 72px) !important;
  line-height: 1.08 !important;
  letter-spacing: .025em !important;
}
h1 .c-outline, .ch-convert .c-outline {
  color: var(--gold) !important;
  -webkit-text-stroke: 0;
}
.ch-page-intro p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--white) !important;
  margin-top: 24px !important;
}
main p[style*="var(--text-muted)"] { color: var(--text) !important; }
main section > .r-reveal[style*="margin-bottom: 44px"] { margin-bottom: 32px !important; }
.c-hero-top { align-items: center !important; }
.c-hero-top p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
  max-width: 520px !important;
  color: var(--white) !important;
}
.c-hero-grid { gap: 14px !important; padding-bottom: 48px !important; }
.c-hero-ctas a, main a[style*="border-bottom"], .ch-convert a, .ch-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.c-hero-ctas a { min-height: 48px; transition: background .2s, color .2s, border-color .2s; }
.c-hero-ctas a:first-child { background: var(--white) !important; color: var(--green-dark) !important; }
.c-hero-ctas a:hover { background: var(--gold) !important; color: var(--green-dark) !important; }
main a[style*="overflow: hidden"], .ch-convert a[style*="overflow: hidden"] {
  min-height: 48px;
  max-width: 100%;
  white-space: normal !important;
  text-align: center;
  line-height: 1.5 !important;
}
.ch-main-nav > div:not([role="dialog"]) > a, .ch-main-nav > div:not([role="dialog"]) > div > button { min-height: 44px; display: inline-flex; align-items: center; }
.ch-main-nav > div:not([role="dialog"]) > div > div a { min-height: 44px; display: flex !important; align-items: center; }
.ch-menu-toggle { position: relative; }
.ch-menu-toggle::before { content: ''; position: absolute; width: 44px; height: 44px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
[role="dialog"] a:not([aria-label]), [role="dialog"] button { min-height: 44px; }
.ch-gallery, .ch-portfolio-grid { gap: 20px !important; }
.ch-gallery > .r-reveal { transform: none !important; }
.ch-gallery .c-tile, .ch-portfolio-grid .c-tile { width: 100%; }
.ch-photo-button { padding: 0; border: 0; background: none; display: block; text-align: left; }
.ch-image-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 48px 18px 18px; background: var(--scrim-card); color: var(--white); font: 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .25s; }
.c-tile:focus-visible .ch-image-caption, .c-tile:hover .ch-image-caption { opacity: 1; }
.ch-filters { gap: 8px 22px !important; }
.ch-filters button { min-height: 44px; color: var(--text) !important; }
.ch-filters button[aria-pressed="true"] { color: var(--green-dark) !important; border-bottom-color: var(--green-dark) !important; font-weight: 700; }
.ch-split-row { padding-top: 48px !important; padding-bottom: 48px !important; }
.ch-split-row img { aspect-ratio: 4/3; object-fit: cover; }
.ch-split-row h2 { font-size: clamp(26px, 2.5vw, 36px) !important; line-height: 1.16 !important; letter-spacing: .03em !important; }
.ch-brand-card { height: 100%; padding: 30px !important; }
.ch-brand-card [style*="var(--gold)"] { color: var(--green-dark) !important; }
.ch-brand-card:focus-visible { box-shadow: 0 12px 32px rgba(31,42,36,.12); }
.ch-image-section > .r-reveal > div { height: clamp(280px, 34vw, 490px) !important; }
.ch-convert { padding: 88px 48px !important; }
.ch-convert p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 12px; }
.ch-footer { padding: 32px 48px 28px !important; gap: 12px 28px !important; }
.ch-footer > div { gap: 8px 28px !important; padding-bottom: 20px !important; }
.ch-footer a, .ch-footer span { color: var(--white) !important; line-height: 1.7; }
.ch-footer a:hover { color: var(--gold) !important; }
.ch-footer > span:last-child { flex-basis: 100%; }
main[data-screen-label="faq"] button h3 { font-size: 21px !important; line-height: 1.35 !important; letter-spacing: .015em !important; text-transform: none !important; }
main[data-screen-label="faq"] button:hover h3 { color: var(--green) !important; }
main[data-screen-label="faq"] p { color: var(--text) !important; }
main[data-screen-label="faq"] .ch-page-intro p { color: var(--white) !important; }
main[data-screen-label="contact"] form :is(input:not([type="checkbox"]), select, textarea) { min-height: 48px; }
main[data-screen-label="contact"] form input[type="checkbox"] { width: 44px !important; height: 44px !important; margin-top: 0 !important; }
main[data-screen-label="contact"] form button { min-height: 48px; }
main[data-screen-label="contact"] form { scroll-margin-top: 90px; }
@media (max-width: 860px) {
  .ch-page-intro { padding: 42px 20px 36px !important; }
  .ch-page-intro h1 > span { font-size: clamp(34px, 9.7vw, 56px) !important; line-height: 1.08 !important; }
  .ch-page-intro p { font-size: 15px !important; line-height: 1.75 !important; margin-top: 20px !important; }
  .c-hero-top { padding: 28px 20px 24px !important; }
  .c-hero-top p { font-size: 14px !important; line-height: 1.65 !important; }
  .c-hero-grid { padding: 0 20px 40px !important; gap: 10px !important; }
  .c-hero-ctas { width: 100%; }
  .c-hero-ctas a { padding: 13px 16px !important; }
  .ch-image-section { padding: 0 20px 48px !important; }
  .ch-image-section > .r-reveal > div { height: 280px !important; }
  .ch-image-section [style*="right: 0"][style*="bottom: 0"] { padding: 12px 16px !important; max-width: 100%; }
  .ch-image-section [style*="right: 0"][style*="bottom: 0"] span { font-size: 10px !important; line-height: 1.6; }
  .ch-story { gap: 26px !important; }
  .ch-story > .r-reveal { flex: auto !important; width: 100%; }
  .ch-gallery { gap: 16px !important; }
  main .ch-portfolio-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  main .ch-process { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 32px 24px !important; }
  main .ch-facts { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 0 !important; }
  .ch-facts > .r-reveal { padding: 28px 20px !important; border-bottom: 1px solid var(--line); }
  .ch-facts > .r-reveal:nth-child(2n) { border-right: 0 !important; }
  .ch-split-row { gap: 26px !important; padding: 32px 20px !important; flex-direction: column !important; }
  .ch-split-row > .r-reveal { flex: auto !important; width: 100%; }
  .ch-split-row > .r-reveal:has(img) { order: 2; }
  .ch-split-row img { aspect-ratio: 4/3; }
  .ch-product-lines { padding: 32px 20px 56px !important; }
  .ch-product-lines [style*="minmax"] { grid-template-columns: minmax(0,1fr) !important; }
  main[data-screen-label="products"] section > div[style*="padding: 54px"] { padding: 36px 20px 20px !important; }
  .ch-convert { padding: 64px 20px 48px !important; }
  .ch-convert p { gap: 0 8px; }
  .ch-footer { padding: 24px 20px !important; gap: 4px 18px !important; }
  .ch-footer > div { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 0 12px !important; }
  .ch-footer > span { width: 100%; }
  main[data-screen-label="contact"] > div > section:first-child { padding-top: 44px !important; }
  main[data-screen-label="contact"] form [style*="minmax"] { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 700px) {
  main > section:not(.ch-page-intro):not(.ch-image-section) { padding-top: 48px !important; padding-bottom: 48px !important; }
  .ch-home-hero + section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .ch-story + .ch-gallery { margin-top: 40px !important; }
  .ch-gallery + .r-reveal { margin-top: 36px !important; }
  .ch-home-hero + section > .r-reveal:last-child { margin-top: 36px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .c-tile:hover img { transform: none; }
}
@media (max-width: 860px) {
  main:is([data-screen-label="kitchens"], [data-screen-label="bathrooms"], [data-screen-label="outdoor"], [data-screen-label="closets"]) .ch-gallery { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  main .ch-gallery:has(> :only-child) { grid-template-columns: 1fr !important; max-width: 760px; }
}
[role="dialog"] button { min-height: 0; position: relative; }
[role="dialog"] button::before { content: ''; position: absolute; inset: -5px; min-width: 44px; min-height: 44px; }
main[data-screen-label="contact"] :is(p, label, span, a)[style*="rgba(74, 102, 87, 0."] { color: var(--green-dark) !important; }
main[data-screen-label="contact"] :is(a, span)[style*="color: var(--gold)"]:not(h1 span) { color: var(--green-dark) !important; }
main[data-screen-label="contact"] form :is(input, select, textarea):focus-visible { outline: 2px solid var(--green) !important; outline-offset: 4px; }
main[data-screen-label="contact"] form input::placeholder, main[data-screen-label="contact"] form textarea::placeholder { color: var(--text); opacity: 1; }
main[data-screen-label="contact"] form select { color: var(--green-dark) !important; }
/* Keep small button labels readable against the existing palette. */
#root > a[style*="position: fixed"], [role="dialog"] a[target="_blank"] { background: var(--white) !important; color: var(--green-dark) !important; }
main[data-screen-label="contact"] form button[style*="background: var(--gold)"] { background: var(--green-dark) !important; color: var(--white) !important; }