/* iOS-inspired surfaces, with CHECO's established charcoal and gold palette. */
:root {
  --body-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --display-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --content: 1240px;
}
html { scroll-padding-top: 126px; }
body { -webkit-font-smoothing: antialiased; }
.site-shell { background: var(--charcoal); padding-top: 1px; }
.site-header {
  top: 12px;
  width: min(1280px, calc(100% - 40px));
  margin: 12px auto 0;
  border: 1px solid rgba(234,209,155,.16);
  border-radius: 26px;
  background: rgba(24,25,24,.84);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 14px 45px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.header-inner { width: calc(100% - 32px); min-height: 86px; }
.brand { width: 194px; height: 80px; }
.primary-navigation { gap: 3px; margin-right: 15px; }
.primary-navigation a {
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.primary-navigation a:hover { background: rgba(255,255,255,.07); }
.header-call, .button { border-radius: 999px; }
.header-call { min-height: 43px; padding: 0 20px; }
.button {
  min-height: 49px;
  padding: 0 23px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.button-gold, .header-call { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 5px 16px rgba(205,164,93,.09); }
.button-outline-light { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.045); }
.hero { padding-bottom: 44px; }
.hero-intro { padding-top: 56px; padding-bottom: 34px; gap: 56px; }
.hero h1 { font-size: clamp(2.8rem,4.7vw,4.5rem); letter-spacing: -.047em; line-height: 1.04; font-weight: 700; }
.hero-actions-block p { font-size: 15px; color: #cccac3; }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .13em; }
.eyebrow-line { height: 3px; border-radius: 3px; width: 20px; }
.hero-photo-frame { border: 1px solid rgba(234,209,155,.21); border-radius: 30px; box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.hero-photo { aspect-ratio: 2.5; }
.hero-photo-frame figcaption { background: rgba(24,25,24,.9); border-color: rgba(234,209,155,.12); min-height: 43px; padding: 11px 22px; letter-spacing: .015em; }
.services, .process { background: var(--warm-white); padding-top: 64px; padding-bottom: 64px; }
.section-heading { margin-bottom: 28px; }
.section-heading h2, .contact h2 { letter-spacing: -.04em; line-height: 1.08; }
.section-note { font-size: 14px; line-height: 1.6; }
.service-list { border: 0; gap: 16px; }
.service-card, .service-card:first-child, .service-card:last-child {
  padding: 26px;
  background: var(--paper);
  border: 1px solid rgba(110,95,69,.1);
  border-radius: 24px;
  box-shadow: 0 7px 22px rgba(37,31,20,.035);
}
.service-number { width: 34px; height: 34px; border-radius: 11px; background: rgba(205,164,93,.14); color: #886527; display: grid; place-items: center; font-size: 11px; letter-spacing: 0; }
.service-number i { display: none; }
.service-card h3 { font-size: 21px; margin: 20px 0 9px; font-weight: 650; }
.service-card p { font-size: 13px; line-height: 1.7; }
.projects { padding: 64px 0; }
.finished-gallery { gap: 16px; grid-template-rows: repeat(2,minmax(200px,244px)); }
.project-card { border-radius: 25px; border-color: rgba(255,255,255,.1); box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.project-caption { left: 13px; right: 13px; bottom: 13px; padding: 13px 15px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(24,25,24,.64); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.project-caption small { font-size: 8px; letter-spacing: .13em; }
.project-caption strong, .project-card-1 .project-caption strong, .project-card-2 .project-caption strong { font-size: 15px; font-weight: 600; }
.project-image-wrap:after { inset: 68% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.38)); }
.project-zoom { border: 1px solid rgba(255,255,255,.2); background: rgba(24,25,24,.48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.process-list { gap: 16px; }
.process-card { border-radius: 24px; border-color: rgba(110,95,69,.1); box-shadow: 0 8px 24px rgba(37,31,20,.05); }
.process-image-wrap { aspect-ratio: 1.7; }
.process-number { border: 1px solid rgba(255,255,255,.14); background: rgba(24,25,24,.7); border-radius: 9px; top: 12px; left: 12px; height: 29px; min-width: 33px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.process-caption { padding: 16px 18px; min-height: 54px; font-size: 14px; font-weight: 600; }
.company-strip { background: var(--warm-white); border: 0; padding-bottom: 28px; }
.company-strip-inner { border-radius: 22px; background: #eeece5; padding: 21px 24px; min-height: 88px; gap: 17px; }
.company-accent { border-radius: 4px; }
.company-strip p { font-size: 13px; }
.company-strip a { font-size: 12px; }
.contact { background: var(--warm-white); border: 0; padding-bottom: 32px; }
.contact-inner { background: linear-gradient(125deg,#252521,#181918); border: 1px solid rgba(205,164,93,.32); border-radius: 30px; padding: 38px; min-height: 225px; gap: 34px; box-shadow: 0 12px 30px rgba(24,25,24,.09); }
.contact h2 { font-size: clamp(1.9rem,3.4vw,2.85rem); }
.contact-copy>p:last-child { font-size: 13px; }
.contact-call { min-width: 215px; min-height: 60px; padding: 0 20px; }
.site-footer { border-top: 1px solid rgba(255,255,255,.06); }
.footer-inner { padding-top: 23px; padding-bottom: 23px; min-height: 118px; }
.footer-brand { width: 165px; }
.photo-dialog::backdrop { background: rgba(9,9,9,.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.lightbox-figure img { border-radius: 20px; }
.lightbox-close,.lightbox-arrow { border-color: rgba(255,255,255,.14); background: rgba(75,75,72,.58); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
.lightbox-figure figcaption { padding: 15px 6px; }
@media(max-width:980px) {
  .brand { width: 166px; }
  .primary-navigation a { padding: 10px; font-size: 11px; }
  .primary-navigation { margin-right: 10px; }
  .hero-intro { gap: 30px; }
}
@media(max-width:720px) {
  html { scroll-padding-top: 102px; }
  .site-header { top: 9px; width: calc(100% - 24px); margin-top: 9px; border-radius: 23px; }
  .header-inner { width: calc(100% - 20px); min-height: 74px; }
  .brand { width: 139px; height: 68px; }
  .menu-toggle { border: 1px solid rgba(234,209,155,.2); background: rgba(255,255,255,.05); border-radius: 13px; width: 39px; height: 39px; }
  .header-call { min-width: 71px; padding: 0 12px; min-height: 39px; margin-left: 7px; font-size: 11px; }
  .primary-navigation { left: 0; right: 0; top: calc(100% + 11px); padding: 7px; margin: 0; border: 1px solid rgba(234,209,155,.18); border-radius: 20px; background: rgba(24,25,24,.97); box-shadow: 0 20px 40px rgba(0,0,0,.25); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  .primary-navigation a { font-size: 14px; padding: 14px; border: 0; border-radius: 13px; }
  .hero { padding-bottom: 29px; }
  .hero-intro { padding-top: 33px; padding-bottom: 25px; }
  .hero h1 { font-size: clamp(2.5rem,10.7vw,3.7rem); line-height: 1.04; letter-spacing: -.045em; }
  .hero-actions-block { margin-top: 18px; }
  .hero-actions-block p { font-size: 14px; line-height: 1.6; }
  .hero-actions { gap: 8px; margin-top: 18px; }
  .hero-actions .button { padding: 0 17px; min-height: 47px; font-size: 11px; }
  .hero-photo-frame { border-radius: 23px; }
  .hero-photo { aspect-ratio: 1.65; }
  .hero-photo-frame figcaption { font-size: 8px; padding: 9px 12px; min-height: 37px; }
  .services,.process { padding-top: 42px; padding-bottom: 42px; }
  .section-heading { margin-bottom: 22px; }
  .section-heading h2 { font-size: clamp(1.9rem,7.8vw,2.5rem); }
  .section-note { font-size: 13px; }
  .service-list { gap: 12px; }
  .service-card,.service-card:first-child,.service-card:last-child { padding: 21px; border: 1px solid rgba(110,95,69,.1); border-radius: 22px; grid-template-columns: 36px 1fr; column-gap: 16px; }
  .service-number { grid-row: 1/3; padding: 0; align-self: start; }
  .service-card h3 { font-size: 19px; margin: 0 0 6px; }
  .service-card p { font-size: 12px; }
  .projects { padding: 42px 0; }
  .finished-gallery { grid-template-rows: auto; gap: 12px; }
  .project-card { border-radius: 23px; min-height: 175px; }
  .project-card-1,.project-card-2 { min-height: 215px; }
  .project-caption { left: 10px; right: 10px; bottom: 10px; border-radius: 14px; padding: 11px 12px; }
  .project-caption strong,.project-card-1 .project-caption strong,.project-card-2 .project-caption strong { font-size: 12px; }
  .project-card-3,.project-card-4 { grid-column: 1/-1; aspect-ratio: 1.85; }
  .process-list { gap: 12px; }
  .process-card { border-radius: 21px; grid-template-columns: 43% 1fr; }
  .process-image-wrap { aspect-ratio: 1.35; }
  .process-caption { padding: 14px; font-size: 13px; }
  .company-strip { padding-bottom: 18px; }
  .company-strip-inner { padding: 20px; flex-wrap: wrap; gap: 12px; border-radius: 22px; }
  .company-strip p { flex: 1; font-size: 12px; min-width: 0; }
  .company-strip a { width: 100%; border: 0; margin: 0; padding: 0 0 0 15px; font-size: 12px; }
  .contact { padding-bottom: 25px; }
  .contact-inner { border-radius: 26px; padding: 27px 24px; gap: 22px; min-height: 0; }
  .contact h2 { font-size: 2rem; }
  .contact-call { width: 100%; min-height: 57px; }
  .footer-inner { grid-template-columns: 125px 1fr; gap: 18px 15px; padding-top: 26px; padding-bottom: 26px; }
  .footer-brand { width: 125px; }
  .footer-inner p { font-size: 9px; }
  .footer-phone { grid-area: 2/1; font-size: 10px; }
  .copyright { grid-area: 2/2; white-space: normal; font-size: 8px; margin: 0; }
}
@media(max-width:360px) {
  .brand { width: 119px; }
  .hero-actions .button { padding: 0 13px; font-size: 10px; }
}
main{background:var(--warm-white)}
@media(max-width:720px){.project-card,.project-card-1,.project-card-2,.project-card-3,.project-card-4{width:100%;min-height:0;height:auto;aspect-ratio:1.65}.primary-navigation{background:#20211f}}
.brand img{mix-blend-mode:screen}
/* Real alpha cutout: no rectangular matte or blend-mode color shift. */
.brand img,.footer-brand img{mix-blend-mode:normal;background:transparent;filter:none}

/* Kitchen project hero: retain room context. */
.hero-photo{aspect-ratio:2.05;object-position:50% 67%}
@media(max-width:720px){.hero-photo{aspect-ratio:1.25;object-position:50% 65%}.hero-actions{flex-wrap:wrap}.hero-actions .button{min-width:0}}