/* =========================================================================
   Sunrise Quality Painting, Inc.
   Palette derived from the supplied logo. Every section is a single
   full-height screen on desktop; below 900px sections size to content.
   ========================================================================= */

:root {
  --ink:        #0B0B0C;
  --ink-2:      #131417;
  --ink-3:      #1D1E22;
  --stone:      #EEEBE5;
  --stone-2:    #E3DFD6;
  --orange:     #F27317;
  --orange-lt:  #FF9438;
  --ember:      #C4470A;
  --accent-stone: #B84206;
  --silver:     #A9AEB4;

  --on-stone:      #17181A;
  --on-stone-mute: #55575C;
  --on-ink:        #F3F0EB;
  --on-ink-mute:   #9DA0A6;

  --rule-stone: rgba(23,24,26,.15);
  --rule-ink:   rgba(243,240,235,.15);

  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Bodoni Moda', Didot, 'Times New Roman', Georgia, serif;

  --fs-hero:  clamp(2.9rem, 7.4vw, 7.4rem);
  --fs-h2:    clamp(1.95rem, 3.5vw, 3.5rem);
  --fs-h3:    clamp(1.02rem, 1.25vw, 1.24rem);
  --fs-lead:  clamp(.96rem, 1.05vw, 1.1rem);
  --fs-body:  clamp(.92rem, .96vw, 1rem);
  --fs-micro: .7rem;

  --shell:  min(90vw, 1400px);
  --edge:   max(calc((100vw - min(90vw, 1400px)) / 2), 1.25rem);
  --pad-y:  clamp(4.5rem, 8vh, 7rem);
  --hdr:    clamp(64px, 6.4vw, 96px);

  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --d-fast: .28s;
  --d-med:  .5s;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

/* ============================= reset ============================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--on-stone);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas, picture, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 200;
  background: var(--orange); color: #16100A;
  padding: .6rem 1rem; font-weight: 600; font-size: .85rem;
  text-decoration: none; transform: translateY(-160%);
  transition: transform var(--d-fast) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); }

.shell { width: var(--shell); margin-inline: auto; }

/* scroll progress hairline */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--ember), var(--orange), var(--orange-lt));
  transform: scaleX(0); transform-origin: left;
}

/* ============================ typography ============================ */
.h2 {
  font-size: var(--fs-h2);
  font-weight: 600; font-stretch: 95%;
  line-height: 1.0;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -.012em; color: var(--accent-stone);
}
.split-ink .h2 em, .full-media .h2 em, .process .h2 em,
.work .h2 em, .contact .h2 em { color: var(--orange); }

.eyebrow {
  display: flex; align-items: center; gap: .65rem;
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--on-stone-mute); font-stretch: 108%;
}
.sec-num {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  letter-spacing: 0; text-transform: none;
  color: var(--accent-stone); line-height: 1;
}
.split-ink .sec-num, .full-media .sec-num, .process .sec-num,
.work .sec-num, .contact .sec-num { color: var(--orange); }
.split-ink .eyebrow, .full-media .eyebrow, .process .eyebrow,
.work .eyebrow, .contact .eyebrow { color: var(--on-ink-mute); }

.eyebrow-tick { width: 24px; height: 1px; background: var(--orange); flex: none; }

.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--on-stone-mute); max-width: 46ch; }
.split-ink .lead, .full-media .lead, .contact .lead { color: rgba(243,240,235,.72); }
.sec-note { font-size: .88rem; color: var(--on-stone-mute); max-width: 52ch; line-height: 1.6; }

/* ============================= buttons ============================= */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .78rem 1.3rem;
  font-size: .81rem; font-weight: 600; font-stretch: 104%;
  letter-spacing: .085em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 0;
  cursor: pointer; overflow: hidden;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.btn-lg { padding: .95rem 1.6rem; font-size: .845rem; }
.btn-block { width: 100%; }
.btn-label, .btn-arrow { position: relative; z-index: 2; }
.btn-arrow { display: inline-flex; transition: transform var(--d-med) var(--e-out); }
.btn:hover .btn-arrow { transform: translateX(6px); }

.btn-solid { background: var(--orange); color: #140D06; border-color: var(--orange); }
.btn-solid::before {
  content: ''; position: absolute; inset: 0; z-index: 1; background: var(--ember);
  transform: scaleX(0); transform-origin: left; transition: transform var(--d-med) var(--e-out);
}
.btn-solid:hover::before, .btn-solid:focus-visible::before { transform: scaleX(1); }
.btn-solid:hover { color: #fff; }

.btn-outline { border-color: rgba(243,240,235,.34); color: var(--on-ink); background: transparent; }
.btn-outline::before {
  content: ''; position: absolute; inset: 0; z-index: 1; background: var(--on-ink);
  transform: scaleX(0); transform-origin: left; transition: transform var(--d-med) var(--e-out);
}
.btn-outline:hover::before, .btn-outline:focus-visible::before { transform: scaleX(1); }
.btn-outline:hover { color: var(--ink); border-color: var(--on-ink); }

.btn-ghost { background: none; border-color: transparent; color: var(--on-ink); padding-inline: .5rem; letter-spacing: .06em; }
.btn-ghost .btn-label { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color var(--d-fast); }
.btn-ghost:hover .btn-label { border-bottom-color: var(--orange); }

/* ============================== header ============================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  background: transparent;
  transition: background-color .45s var(--e-out);
}
.site-header.is-solid {
  background: rgba(11,11,12,.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.header-inner { height: var(--hdr); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); }
.header-rule {
  height: 1px; width: var(--shell); margin-inline: auto; background: var(--rule-ink);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--e-out);
}
.site-header.is-solid .header-rule { transform: scaleX(1); }

.brand { display: block; flex: none; line-height: 0; }
.brand-logo {
  height: clamp(42px, 4.8vw, 68px); width: auto;
  -webkit-mask-image: radial-gradient(142% 134% at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(142% 134% at 50% 50%, #000 72%, transparent 100%);
}

.nav { margin-left: auto; }
.nav-list { display: flex; gap: clamp(.9rem, 1.9vw, 1.9rem); }
.nav-list a {
  position: relative; padding-block: .4rem;
  font-size: .765rem; font-weight: 500; font-stretch: 104%;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-ink); text-decoration: none; opacity: .82;
  transition: opacity var(--d-fast);
}
.nav-list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--e-out);
}
.nav-list a:hover { opacity: 1; }
.nav-list a:hover::after, .nav-list a[aria-current='true']::after { transform: scaleX(1); transform-origin: left; }
.nav-list a[aria-current='true'] { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.header-call { display: none; }
.menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
.menu-bars { display: grid; gap: 6px; width: 22px; }
.menu-bars i { display: block; height: 1.5px; background: var(--on-ink); transition: transform .4s var(--e-out); }
.menu-toggle[aria-expanded='true'] .menu-bars i:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-bars i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

@media (min-width: 1160px) { .menu-toggle { display: none; } .header-call { display: inline-flex; } }
@media (max-width: 1159px) { .nav { display: none; } .header-actions { margin-left: auto; } .header-cta { display: none; } }
@media (min-width: 560px) and (max-width: 1159px) { .header-cta { display: inline-flex; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: 85; background: var(--ink);
  padding: calc(var(--hdr) + 2rem) var(--edge) 2rem;
  display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav ul { display: grid; gap: .3rem; }
.mobile-menu nav a {
  display: flex; align-items: baseline; gap: 1rem; padding: .5rem 0;
  font-size: clamp(1.6rem, 7.5vw, 2.4rem); font-weight: 500; font-stretch: 94%;
  letter-spacing: -.025em; color: var(--on-ink); text-decoration: none;
  border-bottom: 1px solid var(--rule-ink);
}
.mm-num { font-family: var(--serif); font-style: italic; font-size: .8rem; color: var(--orange); flex: none; }
.mobile-menu-foot { display: grid; gap: .55rem; padding-top: 2rem; }
.mm-addr { font-size: .8rem; color: var(--on-ink-mute); letter-spacing: .04em; text-align: center; margin-top: .3rem; }
body.menu-open { overflow: hidden; }

html.anim .mobile-menu nav a { opacity: 0; transform: translateY(14px); }
html.anim .mobile-menu.is-open nav a { opacity: 1; transform: none; transition: opacity .5s var(--e-out), transform .5s var(--e-out); }
html.anim .mobile-menu.is-open nav li:nth-child(1) a { transition-delay: .05s; }
html.anim .mobile-menu.is-open nav li:nth-child(2) a { transition-delay: .1s; }
html.anim .mobile-menu.is-open nav li:nth-child(3) a { transition-delay: .15s; }
html.anim .mobile-menu.is-open nav li:nth-child(4) a { transition-delay: .2s; }
html.anim .mobile-menu.is-open nav li:nth-child(5) a { transition-delay: .25s; }
html.anim .mobile-menu.is-open nav li:nth-child(6) a { transition-delay: .3s; }

/* ====================== full-height section frame ====================== */
.section {
  position: relative;
  min-height: 100svh;
  display: grid; align-content: center;
  padding-block: var(--pad-y);
  overflow: hidden;
}
@media (max-width: 899px) {
  .section { min-height: 0; padding-block: clamp(3.5rem, 9vw, 5rem); }
}

/* =============================== hero =============================== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--hdr) + clamp(.75rem, 2.5vh, 2rem));
  padding-bottom: clamp(1.1rem, 2.5vh, 2rem);
  background: var(--ink); color: var(--on-ink);
  overflow: hidden; isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--ink); }
.hero-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%;
  transform: scale(1.06);
}
html.anim .hero-photo { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.05) translate3d(0,0,0); } to { transform: scale(1.13) translate3d(-1.4%, -1.2%, 0); } }

/* WebGL sunrise light, blended over the photograph */
.hero-gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: screen; opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-gl.is-live { opacity: .48; }

/* legibility scrim + grain */
.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(100deg, rgba(8,8,9,.94) 0%, rgba(8,8,9,.82) 26%, rgba(8,8,9,.44) 56%, rgba(8,8,9,.14) 82%),
    linear-gradient(0deg, rgba(8,8,9,.78) 0%, rgba(8,8,9,.18) 22%, transparent 44%),
    linear-gradient(180deg, rgba(8,8,9,.6) 0%, transparent 22%);
}
.hero-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 5;
  background-image: var(--grain); opacity: .045; mix-blend-mode: overlay;
}

.hero-paint { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.hero-paint.is-live { opacity: 1; }

.brush-cursor {
  position: fixed; top: 0; left: 0; z-index: 70; pointer-events: none; opacity: 0;
  transform: translate3d(-100px, -100px, 0); transition: opacity .22s ease;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.55));
}
.brush-cursor.is-live { opacity: 1; }
.hero.cursor-hidden { cursor: none; }

.hero-inner {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(.85rem, 1.9vh, 1.7rem);
  padding-block: clamp(.75rem, 2.5vh, 2rem);
}
.hero-eyebrow { color: var(--silver); }
.hero-title {
  font-size: var(--fs-hero); font-weight: 600; font-stretch: 92%;
  line-height: .875; letter-spacing: -.042em; max-width: 15ch;
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line-in { display: block; }
.hero-title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--orange); }
html.anim .hero-title .line-in { transform: translateY(105%); }

.hero-sub { font-size: clamp(.98rem, 1.15vw, 1.16rem); line-height: 1.56; color: rgba(243,240,235,.78); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .2rem; }

.hero-meta {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding-top: clamp(.9rem, 2vh, 1.6rem); border-top: 1px solid var(--rule-ink);
}
.meta-row { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 3.6vw, 3.5rem); }
.meta-item dt { font-size: var(--fs-micro); letter-spacing: .17em; text-transform: uppercase; color: var(--on-ink-mute); font-weight: 500; }
.meta-item dd { font-size: .96rem; font-weight: 500; letter-spacing: -.01em; color: var(--on-ink); margin-top: .15rem; }
.scroll-cue { display: flex; align-items: center; gap: .7rem; font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-mute); text-decoration: none; }
.scroll-line { display: block; width: 50px; height: 1px; background: var(--rule-ink); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; inset: 0; background: var(--orange); transform: translateX(-100%); animation: cue 2.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .scroll-line::after { animation: none; transform: none; opacity: .5; } }

@media (max-width: 760px) {
  .hero-meta .meta-item:nth-child(3) { display: none; }
  .scroll-cue { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
}


/* ---------------------------------------------------------------------------
   Media frames. <picture> is a plain block, so height:100% on the <img> had
   nothing definite to resolve against and the image collapsed to its intrinsic
   size — that was the half-empty panel. Absolute positioning fixes the box.
   --------------------------------------------------------------------------- */
/* .hero-bg and .fm-bg are already position:absolute (inset:0) — they must NOT
   be re-declared relative or they collapse to zero height. Only the in-flow
   frames need a positioning context created here. */
.split-media, .step-media, .panel-media { position: relative; }
.hero-bg > picture,
.split-media > picture,
.fm-bg > picture,
.step-media > picture,
.panel-media > picture { position: absolute; inset: 0; display: block; }
.hero-bg > picture > img,
.split-media > picture > img,
.fm-bg > picture > img,
.step-media > picture > img,
.panel-media > picture > img {
  /* absolute on the img itself: no dependence on <picture> resolving a height,
     and !important defends against plugin resets like img{height:auto!important} */
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover;
}

/* ======================= split (image | copy) ======================= */
.split {
  padding-block: 0;
  display: grid; grid-template-columns: 1fr;
  align-content: stretch;
}
@media (min-width: 900px) { .split { grid-template-columns: 44% 1fr; } }

.split-ink { background: var(--ink); color: var(--on-ink); }
.split-stone { background: var(--stone); color: var(--on-stone); }

.split-media { position: relative; overflow: hidden; background: var(--ink-2); margin: 0; min-height: 0; }
.split-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.split-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(242,115,23,.10), transparent 46%, rgba(0,0,0,.28));
}
@media (max-width: 899px) { .split-media { height: 46svh; } }
@media (min-width: 900px) {
  .split-reverse { grid-template-columns: 1fr 44%; }
  .split-reverse .split-media { order: 2; }
  .split-reverse .split-body { order: 1; }
}
html.anim .split-media img { clip-path: inset(0 0 100% 0); transform: scale(1.1); }
html.anim .split-media.is-in img {
  clip-path: inset(0 0 0 0); transform: scale(1);
  transition: clip-path 1.15s var(--e-out), transform 1.5s var(--e-out);
}

.split-body { display: grid; align-content: center; padding: var(--pad-y) 0; }
.split-inner {
  display: grid; gap: clamp(.85rem, 1.7vh, 1.5rem);
  padding-inline: clamp(1.25rem, 4vw, 4.5rem);
  padding-right: var(--edge);
}
.split-reverse .split-inner { padding-left: var(--edge); padding-right: clamp(1.25rem, 4vw, 4.5rem); }
@media (max-width: 899px) {
  .split-inner, .split-reverse .split-inner { padding-inline: var(--edge); }
  .split-body { padding-block: clamp(3rem, 8vw, 4rem); }
}

/* 1997 figure */
.std-figure { display: flex; align-items: baseline; gap: 1rem; padding-block: .3rem; }
.fig-num {
  font-family: var(--serif); font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  font-weight: 500; line-height: .8; letter-spacing: -.03em; color: var(--orange);
}
.fig-label { font-size: .84rem; font-weight: 500; color: var(--on-ink); line-height: 1.4; }
.fig-note { display: block; font-size: .72rem; color: var(--on-ink-mute); font-weight: 400; }

.pillars { display: grid; gap: clamp(.7rem, 1.4vh, 1.15rem); margin-top: .3rem; }
.pillar { display: grid; gap: .3rem; }
.pillar-rule { display: block; width: 42px; height: 2px; background: var(--orange); transform-origin: left; }
.pillar h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.018em; line-height: 1.2; }
.pillar p { color: var(--on-ink-mute); font-size: .87rem; max-width: 44ch; line-height: 1.5; }

/* residential service list */
.svc-list { border-top: 1px solid var(--rule-stone); margin-top: .4rem; }
.svc {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .1rem .8rem;
  align-items: baseline;
  padding: clamp(.62rem, 1.35vh, 1.05rem) 0;
  border-bottom: 1px solid var(--rule-stone);
}
@media (min-width: 1100px) { .svc { grid-template-columns: 1.6rem minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; } }
.svc h3, .svc p { min-width: 0; }
.svc-idx { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--accent-stone); }
.svc h3 { font-size: clamp(1.02rem, 1.5vw, 1.3rem); font-weight: 500; font-stretch: 96%; letter-spacing: -.026em; line-height: 1.15; }
.svc p { color: var(--on-stone-mute); font-size: .85rem; line-height: 1.45; }
/* Transform, not padding — padding-left resizes the grid column and rewraps
   the row, which changed the section height on hover. */
.svc > * { transition: transform .45s var(--e-out), color .35s var(--e-out); }
@media (hover: hover) {
  .svc:hover > * { transform: translateX(7px); }
  .svc:hover h3 { color: var(--accent-stone); }
}

/* ==================== full-bleed media section ==================== */
.full-media { background: var(--ink); color: var(--on-ink); }
.fm-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fm-bg img { width: 100%; height: 100%; object-fit: cover; }
.fm-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(9,9,10,.95) 0%, rgba(9,9,10,.86) 34%, rgba(9,9,10,.62) 64%, rgba(9,9,10,.5) 100%),
    linear-gradient(0deg, rgba(9,9,10,.6), transparent 40%);
}
.fm-inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 4vw, 4.5rem); grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 940px) { .fm-inner { grid-template-columns: 1.05fr .85fr; } }
.fm-copy { display: grid; gap: 1.2rem; justify-items: start; }
.comm-list { border-top: 1px solid var(--rule-ink); }
.comm-list li { display: grid; gap: .1rem; padding: clamp(.75rem, 1.6vh, 1.2rem) 0; border-bottom: 1px solid var(--rule-ink); }
@media (min-width: 640px) { .comm-list li { grid-template-columns: 42% 1fr; gap: 1.2rem; align-items: baseline; } }
.comm-k { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; color: var(--on-ink); }
.comm-v { color: var(--on-ink-mute); font-size: .87rem; }

/* ============================ 04 process ============================ */
.process { background: var(--ink); color: var(--on-ink); }
.process-inner { display: grid; gap: clamp(1.2rem, 2.6vh, 2.2rem); align-content: center; }
.process-head { display: grid; gap: .9rem; }
.process-stroke { width: 100%; height: 14px; overflow: visible; }
.pstroke-rect { fill: var(--orange); transform-origin: left center; }
html.anim .pstroke-rect { transform: scaleX(0); }

.steps { display: grid; gap: clamp(1.1rem, 2vw, 1.9rem); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { display: grid; gap: .5rem; align-content: start; }
.step-media { overflow: hidden; margin: 0 0 .35rem; background: var(--ink-2); aspect-ratio: 4 / 3; }
.step-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-out); }
@media (hover: hover) { .step:hover .step-media img { transform: scale(1.05); } }
.step-num { font-family: var(--serif); font-size: .88rem; font-style: italic; color: var(--orange); }
.step h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.18; color: var(--on-ink); }
.step p { color: var(--on-ink-mute); font-size: .86rem; line-height: 1.5; max-width: 34ch; }
@media (max-width: 699px) { .step-media { aspect-ratio: 16 / 9; } }

/* ============================= 05 the work ============================= */
.work { background: var(--ink); color: var(--on-ink); }
.pin-wrap {
  min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  align-content: center; gap: clamp(1.2rem, 3vh, 2.4rem);
  padding-block: var(--pad-y);
}
.work-head { display: grid; gap: .9rem; align-items: end; }
@media (min-width: 900px) { .work-head { grid-template-columns: 1fr auto; gap: 2rem; } }
.work-note { font-size: .78rem; color: var(--on-ink-mute); max-width: 34ch; line-height: 1.5; }

/* flex here gives the track a definite height, so each panel stretches to the
   full row and the image area (1fr) always has room to fill. */
.pin-viewport { display: flex; align-items: stretch; min-height: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pin-viewport::-webkit-scrollbar { display: none; }
.pin-track {
  display: flex; gap: clamp(.9rem, 1.4vw, 1.4rem);
  padding-inline: var(--edge);
  width: max-content; flex: none;
}
.pin-viewport { padding-block: 2px; }
.panel {
  position: relative; flex: none;
  width: clamp(258px, 30vw, 400px);
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: var(--ink-2); border: 1px solid var(--rule-ink);
  min-height: 0;
}
.panel-media { overflow: hidden; margin: 0; min-height: 0; position: relative; }
.panel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-out); }
@media (hover: hover) { .panel:hover .panel-media img { transform: scale(1.05); } }
.panel-body { padding: clamp(.9rem, 1.6vw, 1.4rem); display: grid; gap: .38rem; align-content: start; }
.panel-idx { font-family: var(--serif); font-style: italic; font-size: .8rem; color: var(--orange); }
.panel-body h3 { font-size: clamp(1.02rem, 1.4vw, 1.28rem); font-weight: 600; letter-spacing: -.024em; line-height: 1.14; }
.panel-desc { color: var(--on-ink-mute); font-size: .83rem; line-height: 1.45; }
.panel-spec { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.panel-spec li { font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--silver); border: 1px solid var(--rule-ink); padding: .26rem .5rem; }

.pin-progress { height: 2px; background: var(--rule-ink); }
.pin-progress span { display: block; height: 100%; width: 20%; background: var(--orange); transform-origin: left; }

/* ============================= 06 reviews ============================= */
.reviews { background: var(--stone); color: var(--on-stone); }
.reviews-inner { display: grid; gap: clamp(1.6rem, 3.5vh, 3rem); align-content: center; }
.reviews-head { display: grid; gap: .9rem; max-width: 62ch; }
.themes { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule-stone); }
@media (min-width: 700px)  { .themes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .themes { grid-template-columns: repeat(3, 1fr); } }
.theme {
  display: grid; gap: .7rem; align-content: start;
  padding: clamp(1.1rem, 2.2vh, 1.9rem) clamp(1rem, 2vw, 2rem) clamp(1.1rem, 2.2vh, 1.9rem) 0;
  border-bottom: 1px solid var(--rule-stone);
}
@media (min-width: 700px) { .theme:nth-child(odd) { border-right: 1px solid var(--rule-stone); } }
@media (min-width: 1060px) {
  .theme { border-right: 1px solid var(--rule-stone); padding-right: clamp(1.4rem, 2.2vw, 2.2rem); }
  .theme:nth-child(3n) { border-right: 0; }
}
.theme-mark { display: block; width: 28px; height: 3px; background: var(--accent-stone); transform-origin: left; }
.theme h3 { font-size: clamp(1rem, 1.6vw, 1.32rem); font-weight: 500; font-stretch: 96%; letter-spacing: -.026em; line-height: 1.18; max-width: 22ch; }

.review-sources { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem 1.4rem; }
.rs-label { font-size: var(--fs-micro); letter-spacing: .19em; text-transform: uppercase; color: var(--on-stone-mute); font-weight: 600; }
.review-sources ul { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; }
.review-sources a { font-size: .85rem; text-decoration: none; border-bottom: 1px solid var(--rule-stone); padding-bottom: 2px; transition: border-color var(--d-fast), color var(--d-fast); }
.review-sources a:hover { color: var(--accent-stone); border-bottom-color: var(--accent-stone); }

/* ============================= 07 contact ============================= */
.contact { background: var(--ink); color: var(--on-ink); isolation: isolate; }
.contact-bg { z-index: -3; }
.contact-bg::after {
  background:
    linear-gradient(100deg, rgba(9,9,10,.96) 0%, rgba(9,9,10,.9) 40%, rgba(9,9,10,.78) 100%),
    linear-gradient(0deg, rgba(9,9,10,.7), transparent 50%);
}
.contact-sweep { position: absolute; inset: 0; z-index: -2; }
.contact-sweep svg { width: 100%; height: 100%; }
#sweep-rect { fill: rgba(20,15,11,.85); transform-origin: left center; }
html.anim #sweep-rect { transform: scaleX(0); }

.contact-inner { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 4vw, 4.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .contact-inner { grid-template-columns: 1fr 1fr; } }
.contact-lead { display: grid; gap: 1.2rem; }
.contact-direct { display: grid; gap: 1rem; border-top: 1px solid var(--rule-ink); padding-top: 1.3rem; }
.cd-label { display: block; font-size: var(--fs-micro); letter-spacing: .19em; text-transform: uppercase; color: var(--on-ink-mute); font-weight: 600; margin-bottom: .22rem; }
.cd-value { font-size: 1.05rem; font-weight: 500; letter-spacing: -.015em; color: var(--on-ink); line-height: 1.4; }
a.cd-value, .cd-value a { text-decoration: none; border-bottom: 1px solid rgba(242,115,23,.5); transition: color var(--d-fast), border-color var(--d-fast); }
a.cd-value:hover, .cd-value a:hover { color: var(--orange-lt); border-bottom-color: var(--orange-lt); }
.cd-static { border: 0; }

.estimate-form {
  display: grid; gap: .85rem;
  background: rgba(12,12,13,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule-ink);
  padding: clamp(1.2rem, 2.6vw, 2rem);
}
.form-title { font-size: var(--fs-micro); letter-spacing: .19em; text-transform: uppercase; color: var(--orange); font-weight: 700; }
.field { display: grid; gap: .32rem; }
.field-row { display: grid; gap: .85rem; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--on-ink-mute); }
.field .opt { text-transform: none; letter-spacing: .02em; font-weight: 400; opacity: .8; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(9,9,10,.7); border: 1px solid var(--rule-ink); border-radius: 0;
  padding: .68rem .8rem; font-size: .93rem; color: var(--on-ink);
  transition: border-color var(--d-fast), background-color var(--d-fast);
}
.field textarea { resize: vertical; min-height: 84px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--silver) 50%), linear-gradient(135deg, var(--silver) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
.field select option { background: var(--ink-2); color: var(--on-ink); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(243,240,235,.3); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--orange); background: rgba(9,9,10,.9); }
.field input::placeholder, .field textarea::placeholder { color: rgba(243,240,235,.32); }
.field-error { font-size: .78rem; color: #FF9438; }
.field.has-error input, .field.has-error textarea { border-color: #FF7A4A; }
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { font-size: .82rem; color: var(--on-ink-mute); text-align: center; }
.form-foot a { color: var(--orange); text-decoration: none; border-bottom: 1px solid rgba(242,115,23,.5); }
.form-status { font-size: .85rem; color: var(--orange-lt); text-align: center; }
.form-status:empty { display: none; }

.form-fallback { display: grid; gap: .8rem; border: 1px solid var(--rule-ink); padding: clamp(1.2rem, 2.6vw, 2rem); background: rgba(12,12,13,.8); }
.form-fallback[hidden] { display: none; }
.ff-title { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.ff-copy { color: var(--on-ink-mute); font-size: .88rem; }
.ff-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.55; color: var(--on-ink); background: rgba(9,9,10,.7); border: 1px solid var(--rule-ink); padding: .9rem; white-space: pre-wrap; word-break: break-word; max-height: 190px; overflow: auto; }
.ff-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.ff-actions .btn { flex: 1 1 170px; }

/* ============================== footer ============================== */
.site-footer { background: var(--ink); color: var(--on-ink); border-top: 1px solid var(--rule-ink); padding-block: clamp(2.5rem, 5vw, 4.5rem) 1.8rem; }
.foot-top { display: grid; gap: clamp(1.8rem, 3.5vw, 3.2rem); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .foot-top { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .foot-top { grid-template-columns: 1.5fr repeat(3, .85fr); } }
.foot-logo {
  height: clamp(62px, 7vw, 86px); width: auto; margin-bottom: 1rem;
  -webkit-mask-image: radial-gradient(142% 134% at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(142% 134% at 50% 50%, #000 72%, transparent 100%);
}
.foot-blurb { color: var(--on-ink-mute); font-size: .86rem; max-width: 40ch; }
.foot-h { font-size: var(--fs-micro); letter-spacing: .19em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: .9rem; }
.foot-col ul { display: grid; gap: .5rem; }
.foot-col a, .foot-col span { font-size: .86rem; color: var(--on-ink-mute); text-decoration: none; line-height: 1.5; }
.foot-col a { transition: color var(--d-fast); }
.foot-col a:hover { color: var(--orange); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 1.3rem; border-top: 1px solid var(--rule-ink); font-size: .76rem; color: var(--on-ink-mute); }
.foot-note { max-width: 56ch; opacity: .85; }

/* ======================= reveal / motion states ======================= */
html.anim [data-reveal] { opacity: 0; transform: translateY(18px); }
html.anim [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .8s var(--e-out), transform .8s var(--e-out); }
html.anim .pillar-rule, html.anim .theme-mark { transform: scaleX(0); transition: transform .8s var(--e-out) .15s; }
html.anim [data-reveal].is-in .pillar-rule, html.anim [data-reveal].is-in .theme-mark { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html [data-reveal] { opacity: 1 !important; transform: none !important; }
  html .hero-title .line-in { transform: none !important; }
  html .pstroke-rect, html #sweep-rect, html .pillar-rule, html .theme-mark { transform: none !important; }
  html .split-media img { clip-path: none !important; transform: none !important; }
  html .hero-photo { animation: none !important; transform: scale(1.02) !important; }
  .hero-gl, .hero-paint, .brush-cursor { display: none !important; }
}

@media print {
  .site-header, .mobile-menu, .hero-bg, .hero-paint, .brush-cursor, .pin-progress, .scroll-progress { display: none !important; }
  body, .section, .hero, .work, .contact { background: #fff !important; color: #000 !important; }
  .section, .hero { min-height: 0 !important; padding-block: 1.5rem !important; }
}

/* focal points for tightly cropped frames */
.hero-photo { object-position: 62% 58%; }
#standard .split-media img { object-position: 58% 50%; }
#residential .split-media img { object-position: 52% 45%; }
#commercial .fm-bg img { object-position: 46% 42%; }
.contact-bg img { object-position: 68% 55%; }
.panel-media img { object-position: 50% 45%; }
.step-media img { object-position: 50% 42%; }