/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── TOKENS ── */
:root{
  --c-cream:#F7F1E3;
  --c-cream-soft:#F4EBD2;
  --c-cream-warm:#EEDBC3;
  --c-greige:#D9C9A2;
  --c-brown:#4A3B2A;
  --c-brown2:#6B4F3A;
  --c-text:#1C1A17;
  --c-muted:#7A6A58;
  --c-border:#E2D8C8;
  --c-white:#FFFFFF;
  --nav-h:64px;
  --r:12px;
  --r-sm:8px;
  --shadow:0 8px 48px rgba(74,59,42,.09);
  --shadow-sm:0 2px 16px rgba(74,59,42,.07);
}

/* ── BASE ── */
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',sans-serif;background:var(--c-cream);color:var(--c-text);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4{font-family:'Playfair Display',serif;line-height:1.1;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.5vw,3.6rem);font-weight:900}
h2{font-size:clamp(1.7rem,3vw,2.8rem);font-weight:700}
h3{font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:700}
h4{font-size:.95rem;font-weight:700}
em{font-style:italic;color:var(--c-brown2)}
p{line-height:1.78;color:var(--c-muted)}

/* ── LAYOUT ── */
.container{max-width:1200px;margin:0 auto;padding:0 40px}
@media(max-width:768px){.container{padding:0 20px}}
.section{padding:96px 0}
@media(max-width:768px){.section{padding:64px 0}}

/* ── EYEBROW ── */
.eyebrow{display:block;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--c-brown2);margin-bottom:12px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:4px;font-size:.9rem;font-weight:500;letter-spacing:.03em;transition:all .22s ease;white-space:nowrap}
.btn-dark{background:var(--c-brown);color:#fff;box-shadow:0 2px 16px rgba(74,59,42,.22)}
.btn-dark:hover{background:var(--c-brown2);transform:translateY(-2px);box-shadow:0 6px 28px rgba(74,59,42,.3)}
.btn-outline{background:transparent;color:var(--c-brown);border:1.5px solid var(--c-brown)}
.btn-outline:hover{background:var(--c-brown);color:#fff}
.btn-light{background:#fff;color:var(--c-brown)}
.btn-light:hover{background:var(--c-cream);transform:translateY(-2px)}
.btn-sm{padding:11px 24px;font-size:.84rem}
.btn-lg{padding:17px 42px;font-size:.98rem}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .3s,box-shadow .3s}
.nav.at-top{background:var(--c-cream);border-bottom:none}
.nav.scrolled{background:var(--c-cream);box-shadow:0 1px 20px rgba(74,59,42,.10);border-bottom:none}
.nav-inner{position:relative;width:100%;height:64px;display:flex;align-items:center;box-sizing:border-box}
.nav-brand-mark{display:flex;align-items:center;flex-shrink:0;opacity:.82;transition:opacity .18s;padding:8px 10px;border-radius:4px;margin-left:56px}
.nav-brand-mark img{width:24px;height:auto;display:block}
.logo{margin-left:56px;display:flex;align-items:center;flex-shrink:0}
.logo img{height:56px;width:auto;display:block}
.nav-brand-mark:hover{opacity:1;background:rgba(74,59,42,.07)}
.nav-links{list-style:none;display:flex;align-items:center;gap:0;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{padding:8px 10px;border-radius:4px;font-size:.86rem;font-weight:400;color:var(--c-brown);transition:background .18s}
.nav-links a:hover{background:rgba(74,59,42,.07)}
.nav-links a.nav-phone{font-weight:500;color:var(--c-text);letter-spacing:.02em}
.nav-cta-standalone{position:absolute;right:56px;top:50%;transform:translateY(-50%);display:flex;align-items:center;background:var(--c-brown);color:#fff!important;font-size:.86rem;font-weight:500;padding:10px 22px;border-radius:4px;transition:background .18s;white-space:nowrap;letter-spacing:.04em}
.nav-cta-standalone:hover{background:var(--c-brown2)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--c-brown);border-radius:2px;transition:all .25s}
.mobile-menu{display:none;flex-direction:column;background:var(--c-cream);border-top:1px solid var(--c-border);padding:12px 20px 20px;gap:2px}
.mobile-menu a{padding:10px 12px;border-radius:4px;color:var(--c-brown);font-size:.92rem}
.mobile-menu a:hover{background:rgba(74,59,42,.07)}
.mobile-menu.open{display:flex}
.mobile-menu a.mobile-menu-cta{background:var(--c-brown);color:#fff;font-weight:500;text-align:center;padding:12px;border-radius:4px;margin-top:8px;letter-spacing:.04em}
.mobile-menu a.mobile-menu-cta:hover{background:var(--c-brown2)}
@media(max-width:800px){.nav-links{display:none}.nav-cta-standalone{display:none}.hamburger{display:flex}.nav-inner{padding:0 20px;grid-template-columns:auto 1fr auto}.logo{margin-left:12px}}
/* Logo/CTA alignment: nudged toward hero content edge while keeping left/right header margins symmetric for optical balance */
@media(min-width:961px){.logo{margin-left:64px}.nav-cta-standalone{right:64px}}
@media(min-width:801px) and (max-width:960px){.logo{margin-left:32px}.nav-cta-standalone{right:32px}}

/* ── TRUST BAR ── */
.trust-bar{background:var(--c-brown);padding:13px 0}
.trust-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:7px;padding:3px 22px;color:rgba(255,255,255,.88);font-size:.82rem;font-weight:400;letter-spacing:.02em}
.trust-check{color:var(--c-greige)}
.trust-sep{width:1px;height:14px;background:rgba(255,255,255,.18)}
@media(max-width:600px){.trust-sep{display:none}.trust-item{padding:3px 10px;font-size:.76rem}}

/* ════════════════════════════════════════
   HOME HERO - 40/60 asymmetric split
════════════════════════════════════════ */

/* Horizontal scroll prevention - hero can bleed visually, page cannot scroll */
html,body{max-width:100%;overflow-x:hidden}

.home-hero{
  display:grid;
  grid-template-columns:2fr 3fr;
  min-height:100svh;
  background:var(--c-cream);
  overflow:hidden;
  position:relative;
  width:100%;
}

.home-hero-text{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:calc(var(--nav-h) + 36px) 54px 56px 72px;
  position:relative;
  z-index:2;
  width:100%;
  margin-right:0;
  background:var(--c-cream);
}

.home-hero-text::before{display:none;content:none}

/* Image: no padding-top gap - aligns flush with cream panel top.
   Nav breathing room handled by hero-image inner padding instead. */
.home-hero-image{
  position:relative;
  overflow:hidden;
  background:var(--c-cream);
  z-index:1;
}
.home-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:20% top;
  display:block;
  margin-top:0;
  vertical-align:top;
  /* Mask dissolve - no cream added, image simply fades at left edge */
  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.96) 1%,
    black 4%
  );
  mask-image:linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.96) 1%,
    black 4%
  );
}

/* No pseudo overlays needed - mask handles the transition */
.home-hero-text::after{display:none}
.home-hero-image::after{display:none}

/* Logo: 280×104 max, anchored top-left */
.hero-logo{display:block;margin-bottom:36px}
.hero-logo img{
  display:block;
  width:auto;
  height:auto;
  max-width:280px;
  max-height:104px;
}

.hero-loc{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c-brown2);margin-top:38px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.home-hero h1{color:var(--c-text);margin-bottom:16px}
.home-hero .sub{font-size:.96rem;color:var(--c-muted);max-width:380px;margin-bottom:52px;line-height:1.82}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.hero-proof{display:flex;align-items:stretch;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-sm);overflow:hidden;width:fit-content;box-shadow:var(--shadow-sm)}
.proof-item{padding:14px 22px;display:flex;flex-direction:column;gap:3px}
.proof-num{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--c-brown);line-height:1}
.proof-lbl{font-size:.64rem;color:var(--c-muted);letter-spacing:.07em;text-transform:uppercase}
.proof-sep{width:1px;background:var(--c-border);align-self:stretch}
.hero-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:3;color:var(--c-brown2);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.scroll-bar{width:1px;height:44px;background:linear-gradient(to bottom,var(--c-brown2),transparent);animation:sb 2s ease-in-out infinite}
@keyframes sb{0%,100%{opacity:.3}50%{opacity:1}}
@media(max-width:960px){
  .home-hero{grid-template-columns:1fr;min-height:auto}
  .home-hero-text{justify-content:center;padding:calc(var(--nav-h) + 20px) 32px 48px;margin-right:0}
  .home-hero-image{padding-top:0;height:60vw;min-height:320px}
  .home-hero-image img{height:100%}
  .hero-loc{margin-top:0}
  .hero-proof{margin-bottom:0}
}
@media(max-width:600px){
  .home-hero-text{padding:calc(var(--nav-h) + 12px) 20px 40px;text-align:center}
  .hero-logo{display:flex;justify-content:center;margin-bottom:28px}
  .hero-logo img{max-width:210px}
  .hero-btns{justify-content:center}
  .hero-proof{margin:0 auto}
  .hero-loc{justify-content:center}
  .home-hero .sub{margin-left:auto;margin-right:auto}
}
@media(min-width:1360px){
  .hero-loc{margin-top:48px}
  .home-hero .sub{margin-bottom:64px}
}

/* ════════════════════════════════════════
   HOMEPAGE SERVICES - featured hierarchy
════════════════════════════════════════ */
.svc-section{background:#fff}
.svc-featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.svc-featured-main{grid-row:span 2;border-radius:var(--r);overflow:hidden;position:relative;cursor:pointer;min-height:540px}
.svc-featured-main img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.svc-featured-main:hover img{transform:scale(1.03)}
.svc-featured-label{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;background:linear-gradient(to top,rgba(26,20,12,.72) 0%,transparent 60%)}
.svc-featured-label h3{color:#fff;font-size:1.6rem;margin-bottom:6px}
.svc-featured-label p{color:rgba(255,255,255,.78);font-size:.88rem;margin-bottom:16px}
.svc-featured-label a{color:#fff;font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.svc-featured-label a::after{content:'→'}
/* mid-tier cards - extra gap from featured block */
.svc-featured-grid{margin-bottom:28px}
.svc-small-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;align-items:stretch}
/* mid-tier cards: warm left-border accent + slightly more interior room */
.svc-small-card{background:var(--c-cream);border-radius:var(--r);padding:32px 28px;border:1px solid var(--c-border);border-left:3px solid var(--c-brown2);transition:box-shadow .25s,transform .25s,border-color .25s;opacity:0;transform:translateY(16px);height:100%;display:flex;flex-direction:column}
.svc-small-card.visible{opacity:1;transform:translateY(0)}
.svc-small-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
/* icons: demote to supporting detail */
.svc-icon{margin-bottom:16px;color:var(--c-brown);opacity:.68}
.svc-small-card h3{font-size:1rem;color:var(--c-text);margin-bottom:8px;min-height:2.2em;display:flex;align-items:flex-end}
.svc-small-card p{font-size:.84rem;margin-bottom:18px}
.svc-link{font-size:.8rem;font-weight:500;color:var(--c-brown);display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.svc-link:hover{gap:10px;color:var(--c-brown2)}
/* compact list - more breathing, softer text hierarchy */
.svc-list-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:4px;align-items:stretch}
.svc-list-item{background:var(--c-cream);border:1px solid var(--c-border);border-radius:var(--r-sm);padding:22px 22px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .2s,transform .2s;opacity:0;transform:translateY(14px);height:100%}
.svc-list-item.visible{opacity:1;transform:translateY(0)}
.svc-list-item:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.svc-list-item h4{font-size:.88rem;color:var(--c-text);font-weight:600;min-height:2.2em;display:flex;align-items:flex-end}
/* compact description text softened - recedes behind label */
.svc-list-item p{font-size:.78rem;color:var(--c-muted);opacity:.72}
.svc-list-item a{font-size:.76rem;font-weight:500;color:var(--c-brown2)}
@media(max-width:900px){.svc-featured-grid{grid-template-columns:1fr}.svc-featured-main{min-height:300px;grid-row:span 1}.svc-small-grid{grid-template-columns:1fr}.svc-list-row{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.svc-list-row{grid-template-columns:1fr}}

/* ════════════════════════════════════════
   PORTFOLIO (homepage)
════════════════════════════════════════ */
.port-section{background:var(--c-cream-soft)}

/* ── Grid layout - explicit placement, no gaps ── */
/* Row heights are no longer uniform. Each row height is calculated from the
   actual aspect ratios of the images placed in it (at the real column width),
   so the box shape matches the photo instead of forcing a crop. See row-by-row
   notes on the markup below. */
.port-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:432px 445px 370px 283px;
  gap:10px;
}

.port-note{text-align:center;margin-top:36px;font-size:.88rem;color:var(--c-muted)}
.port-note a{color:var(--c-brown2);font-weight:500;text-decoration:underline;text-underline-offset:3px}

@media(min-width:561px) and (max-width:900px){
  /* Column-flow instead of row-paired grid: pairing two auto-placed grid
     items of different aspect ratios in the same row track left a large
     empty gap under the shorter item, since the row's height follows the
     tallest item in the pair. A 2-column flow lets each column stack
     independently by its own image heights, closing those gaps. */
  .port-grid{
    display:block;
    column-count:2;
    column-gap:10px;
  }
  .port-grid .port-item{
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    margin-bottom:10px;
  }
  /* Let each image keep its natural aspect ratio instead of being forced
     to fill a stretched cell (which is what was cropping it). */
  .port-grid .port-item img{height:auto}
}
@media(max-width:560px){
  /* Single column: items stack in normal flow, so the desktop inline
     grid-column/grid-row placements no longer apply (grid placement is
     only meaningful inside a grid container) and can't fragment the
     layout into stray implicit columns against the fixed desktop row
     heights, which is what was forcing the crop here too. */
  .port-grid{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .port-grid .port-item img{height:auto}
  /* Portfolio items are sequenced in the markup for tablet column-balance,
     not in the 1-9 viewing order (see the comment at the top of .port-grid
     in index.html). Flex respects `order`, so this restores the original
     1-9 sequence here on mobile. Position numbers below are DOM position,
     not the visual/item order -- e.g. nth-child(3) is the item placed 3rd
     in the markup (item 4), restored to visual position 4. */
  .port-grid .port-item:nth-child(1){order:1}
  .port-grid .port-item:nth-child(2){order:2}
  .port-grid .port-item:nth-child(3){order:4}
  .port-grid .port-item:nth-child(4){order:7}
  .port-grid .port-item:nth-child(5){order:8}
  .port-grid .port-item:nth-child(6){order:3}
  .port-grid .port-item:nth-child(7){order:5}
  .port-grid .port-item:nth-child(8){order:6}
  .port-grid .port-item:nth-child(9){order:9}
}

/* ── Portfolio Item Base ─────────────────────── */
.port-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  cursor: pointer;
  background: var(--sand); /* fallback while image loads */
}

/* ── Image ───────────────────────────────────── */
.port-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 520ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Subtle warmth pass - pulls blue-cast images toward warm palette.
     Adjust saturate() down to 1.03 if images are already well-balanced. */
  filter: saturate(1.07) brightness(1.01);
}

.port-item:hover img {
  transform: scale(1.04);
}

/* ── Gradient Scrim - warm, hover-only ───────── */
/* Appears on hover to create reading surface for caption.
   Bottom-weighted so the image reads clearly at top. */
.port-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28, 24, 20, 0.74) 0%,
    rgba(28, 24, 20, 0.22) 42%,
    transparent 68%
  );
  opacity: 0;
  transition: opacity 340ms ease;
  pointer-events: none;
  border-radius: var(--r-sm);
}

.port-item:hover::after {
  opacity: 1;
}

/* ── Caption - service + location ────────────── */
/* Appears on hover, slides up 6px on reveal.
   Anchored bottom-left, above the scrim (z-index: 2). */
.port-caption {
  position: absolute;
  bottom: 20px;
  left: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 340ms ease,
    transform 340ms ease;
  pointer-events: none;
}

.port-item:hover .port-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Service type label - small uppercase, warm cream */
.port-caption__eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(244, 235, 210, 0.85); /* --cream-soft at 85% */
  line-height: 1;
}

/* Location - Playfair italic, white, reads as the headline */
.port-caption__location {
  font-family: 'Playfair Display', serif;
  font-size: 1.08rem;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  line-height: 1.2;
}

/* ── Featured Item: CTA overlay ──────────────── */
/* Only .port-item.featured gets the CTA button overlay.
   Appears bottom-right. Transitions with the scrim. */
.port-overlay {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 3;
  opacity: 0;
  transition: opacity 340ms ease;
  pointer-events: none;
}

.port-item.featured:hover .port-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Ghost CTA - white variant for dark scrim surface */
.port-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 3px;
  padding: 9px 16px;
  text-decoration: none;
  background: transparent;
  transition:
    color 220ms ease,
    border-color 220ms ease;
  white-space: nowrap;
}

.port-cta:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.70);
}

/* Arrow within CTA */
.port-cta::after {
  content: '→';
  display: inline-block;
  transition: transform 220ms ease;
  font-style: normal;
}

.port-cta:hover::after {
  transform: translateX(4px);
}

/* ── Hard-kill legacy labels ─────────────────── */
/* Belt-and-suspenders: hides any .port-label that
   may have been missed in the HTML pass. */
.port-label {
  display: none !important;
}

/* ── Responsive ──────────────────────────────── */
/* On touch devices, show captions permanently (no hover state) */
@media (hover: none) {
  .port-item::after {
    opacity: 0.55;
  }

  .port-caption {
    opacity: 1;
    transform: translateY(0);
  }

  .port-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Reduce caption font size slightly on mobile */
@media (max-width: 600px) {
  .port-caption__location {
    font-size: 0.92rem;
  }

  .port-caption__eyebrow {
    font-size: 0.63rem;
  }

  .port-caption {
    bottom: 14px;
    left: 16px;
  }

  .port-overlay {
    bottom: 14px;
    right: 16px;
  }
}

/* ════════════════════════════════════════
   REVIEWS
════════════════════════════════════════ */
.reviews-section{background:#FAF7F2;padding-top:104px;padding-bottom:104px}
.rev-source{font-size:.82rem;color:var(--c-muted);font-style:italic;margin-top:6px}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px}
@media(max-width:860px){.rev-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.rev-grid{grid-template-columns:1fr}}

/* base card */
.rev-card{
  padding:32px 0 36px;
  border-bottom:1px solid var(--c-border);
  display:flex;
  flex-direction:column;
  gap:18px;
}
/* anchor card gets slightly more visual presence */
.rev-card--anchor blockquote{font-size:.93rem}

/* thin warm rule replaces star widget */
.rev-rule{
  width:32px;
  height:2px;
  background:var(--c-brown2);
  opacity:.55;
  flex-shrink:0;
}

.rev-card blockquote{
  font-size:.87rem;
  color:var(--c-muted);
  line-height:1.84;
  font-style:italic;
  flex:1;
  quotes:none;
}

.rev-person{margin-top:4px}
.rev-name-block{display:flex;flex-direction:column;gap:4px}
.rev-name-block strong{font-size:.88rem;color:var(--c-text);font-family:'Playfair Display',serif;font-weight:700;font-style:normal}
.rev-project{font-size:.72rem;color:var(--c-muted);letter-spacing:.04em}

/* CTA row */
.rev-cta{text-align:center;margin-top:48px;font-size:.88rem;color:var(--c-muted)}
.rev-cta a{color:var(--c-brown2);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ════════════════════════════════════════
   ABOUT (homepage)
════════════════════════════════════════ */
/* Conversion band */
.conversion-section{background:var(--c-brown);padding:58px 0}
.conversion-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px}
.conversion-copy h2{color:#fff;font-size:clamp(1.5rem,2.4vw,2.15rem);margin-bottom:10px}
.conversion-copy p{color:rgba(255,255,255,.70);font-size:.92rem}
.conversion-points{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px}
.conversion-points span{color:rgba(255,255,255,.82);font-size:.78rem;letter-spacing:.03em}
.conversion-phone{color:#fff;font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700}
.conversion-actions{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media(max-width:720px){.conversion-actions{align-items:flex-start}.conversion-inner{grid-template-columns:1fr;align-items:flex-start}}

.about-section{background:var(--c-cream-warm)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-text h2{color:var(--c-text);margin-bottom:18px}
.about-text p{margin-bottom:14px}
.emblems{display:flex;gap:20px;align-items:center;margin:18px 0}
.emblem{display:flex;flex-direction:column;align-items:center;gap:5px}
.emblem img{width:54px;height:54px;object-fit:contain}
.emblem span{font-size:.64rem;color:var(--c-muted);text-align:center;font-weight:500;letter-spacing:.03em}
.area-tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 24px}
.area-tag{font-size:.76rem;font-weight:500;background:rgba(74,59,42,.08);color:var(--c-brown);padding:5px 13px;border-radius:3px;border:1px solid rgba(74,59,42,.12)}
.about-right{display:flex;flex-direction:column;gap:14px}
.about-img{border-radius:var(--r);overflow:hidden}
.about-img img{width:100%;height:220px;object-fit:contain}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--c-border);border-radius:var(--r);overflow:hidden}
.stat{padding:24px 18px;background:#fff;display:flex;flex-direction:column;gap:4px;transition:background .2s}
.stat:hover{background:var(--c-cream)}
.stat-num{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;color:var(--c-brown);line-height:1}
.stat-lbl{font-size:.68rem;color:var(--c-muted);letter-spacing:.05em}
@media(max-width:800px){.about-grid{grid-template-columns:1fr;gap:40px}}

/* ════════════════════════════════════════
   CONTACT
════════════════════════════════════════ */
.contact-section{background:#fff}
/* invitational header variant - no h2, lead with large italic line */
.contact-hd-alt{text-align:center;margin-bottom:52px}
.contact-hd-alt .eyebrow{display:block;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--c-brown2);margin-bottom:14px}
.contact-intro-line{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;font-style:italic;color:var(--c-text);margin-bottom:10px;line-height:1.2}
.contact-hd-alt > p{font-size:.93rem;color:var(--c-muted);max-width:420px;margin:0 auto}
/* contact grid */
.contact-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
.cform{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:.8rem;font-weight:500;color:var(--c-text)}
.fg input,.fg select,.fg textarea{padding:12px 15px;border:1.5px solid var(--c-border);border-radius:4px;font:inherit;font-size:.9rem;color:var(--c-text);background:var(--c-cream);transition:border-color .2s,box-shadow .2s;outline:none;appearance:none;-webkit-appearance:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--c-brown);box-shadow:0 0 0 3px rgba(74,59,42,.08)}
/* textarea taller - signals message is the priority field */
.fg textarea{resize:vertical;min-height:160px}
.fg input.error,.fg textarea.error{border-color:#c0392b}
/* reassurance microcopy */
.form-reassurance{font-size:.76rem;color:var(--c-muted);text-align:center;margin-top:2px;opacity:.8}
.form-ok{padding:13px 16px;background:#f0faf4;border:1px solid #27ae60;border-radius:4px;color:#1e8449;font-size:.88rem}
.form-err{padding:13px 16px;background:#fef9f9;border:1px solid #e74c3c;border-radius:4px;color:#c0392b;font-size:.88rem}
.form-err a{color:var(--c-brown);text-decoration:underline}
/* right column - considered presentation */
.cinfo h3{font-size:1.15rem;color:var(--c-text);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--c-border)}
.ci{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--c-border)}
.ci-ico{font-size:1.1rem;flex-shrink:0;margin-top:2px}
/* eyebrow-style labels: Direct Line, Email, Studio Hours, Service Area */
.ci strong{display:block;font-size:.68rem;color:var(--c-muted);font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:3px}
.ci a,.ci span{font-size:.9rem;color:var(--c-text)}
.ci a:hover{color:var(--c-brown)}
.social-row{display:flex;gap:10px;margin-top:20px}
.soc{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:4px;font-size:.82rem;font-weight:500;border:1.5px solid var(--c-border);color:var(--c-text);transition:all .2s}
.soc svg{width:14px;height:14px}
.soc:hover{background:var(--c-brown);color:#fff;border-color:var(--c-brown)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:540px){.form-row{grid-template-columns:1fr}}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer{background:var(--c-greige);padding:52px 0;border-top:1px solid var(--c-border)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.footer-logo{height:44px;width:auto}
.footer-tagline{font-family:'Playfair Display',serif;font-size:.98rem;color:var(--c-brown);font-weight:600}
.footer-sub{font-size:.8rem;color:var(--c-muted)}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.footer-links a{color:var(--c-brown);font-size:.82rem;transition:color .2s}
.footer-links a:hover{color:var(--c-text)}
.footer-copy{color:var(--c-muted);font-size:.72rem;margin-top:4px}

/* ════════════════════════════════════════
   SERVICE PAGE HERO - split cinematic
════════════════════════════════════════ */
.svc-hero{display:grid;grid-template-columns:1fr 1fr;min-height:90vh;padding-top:var(--nav-h);background:var(--c-cream);overflow:hidden}
.svc-hero-text{display:flex;flex-direction:column;justify-content:center;padding:72px 52px 72px 72px}
.svc-hero-img{position:relative;overflow:hidden}
.svc-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.breadcrumb{font-size:.7rem;color:var(--c-muted);margin-bottom:18px;display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--c-brown2)}
.breadcrumb a:hover{text-decoration:underline}
.svc-hero-text h1{color:var(--c-text);margin-bottom:16px;font-size:clamp(1.9rem,3.5vw,3rem)}
.svc-hero-text .sub{font-size:.96rem;max-width:400px;margin-bottom:28px;line-height:1.82}
.hero-trust-row{display:flex;align-items:center;gap:18px;margin-top:24px;padding-top:24px;border-top:1px solid var(--c-border);flex-wrap:wrap}
.hero-trust-row span{font-size:.78rem;color:var(--c-muted);display:flex;align-items:center;gap:5px}
.hero-trust-row span::before{content:'✓';color:var(--c-brown2);font-weight:600}
@media(max-width:900px){.svc-hero{grid-template-columns:1fr;min-height:auto}.svc-hero-text{padding:52px 24px 40px}.svc-hero-img{height:56vw;min-height:280px}}
@media(max-width:600px){.svc-hero-text{padding:40px 20px 36px}}

/* ════════════════════════════════════════
   BEFORE / AFTER
════════════════════════════════════════ */
.ba-wrap{background:#fff;padding:88px 0}
.ba-header{max-width:580px;margin-bottom:40px}
.ba-header h2{color:var(--c-text)}
/* Base container for before/after galleries. All current pages use the
   CSS-only .ba-fill system below; below 640px the media query forces a
   single stacked column. */
.ba-grid{position:relative;border-radius:var(--r);overflow:hidden;background:var(--c-cream-soft)}
.ba-item,.ba-fit,.ba-grid>img{display:block;width:100%;min-width:0}
.ba-item{position:relative}
.ba-item img,.ba-fit img,.ba-grid>img{width:100%;height:auto;object-fit:cover;object-position:center;display:block}
.ba-badge{position:absolute;top:14px;left:14px;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:rgba(26,20,12,.80);color:#fff;padding:5px 11px;border-radius:3px;backdrop-filter:blur(4px)}
.ba-badge.after{background:var(--c-brown)}
.ba-single{border-radius:var(--r);overflow:hidden;background:var(--c-cream-soft);display:flex;align-items:center;justify-content:center}
.ba-single img{width:100%;height:auto;max-height:760px;object-fit:contain;object-position:center}
@media(max-width:640px){.ba-grid{height:auto !important}.ba-grid>*{position:static !important;width:100% !important;margin-bottom:4px}.ba-grid>*:last-child{margin-bottom:0}}

/* .ba-fill: CSS-only 2-column gallery, no JS required. Row height is set by
   whichever image in that row is naturally taller (native CSS Grid auto-row
   sizing); the shorter image in the row is stretched to match and cropped
   with object-fit:cover. Requires direct <img> children (no wrapper div). */
.ba-grid.ba-fill{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.ba-grid.ba-fill>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:640px){
  .ba-grid.ba-fill{grid-template-columns:1fr}
  .ba-grid.ba-fill>img{height:auto;margin-bottom:0}
}

/* Tablet-only cap for .ba-fill-stack galleries (Kitchen, Flooring, Trim
   Carpentry). Below the 901px desktop rule these portrait images (e.g. a
   1600x2617 close-up) render at full container width with no height limit,
   producing an oversized gallery block on tablet. Mirrors the desktop cap
   at a slightly shorter max-height suited to tablet viewport height. Mobile
   (<=640px) is unaffected and already renders correctly. */
@media (min-width: 641px) and (max-width: 900px) {
  .ba-grid.ba-fill.ba-fill-stack {
    justify-items: center;
    background: #fff;
  }
  .ba-grid.ba-fill.ba-fill-stack > img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 560px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* .ba-fill-diagram: page-scoped opt-in modifier for architectural/diagram
   images inside .ba-grid.ba-fill that contain drawings and text (e.g.
   Countertops' planning + fabrication graphics). The two diagrams have very
   different aspect ratios (one portrait, one landscape); forcing them into
   equal-height grid columns left large empty side gutters around the
   landscape diagram. Stacked to a single column at full width so each
   diagram renders at its natural aspect ratio with no cropping and no
   gutters; .ba-fill itself is untouched, so every other .ba-fill gallery
   keeps its existing cover/crop behavior. */
.ba-grid.ba-fill.ba-fill-diagram{grid-template-columns:1fr}
.ba-grid.ba-fill.ba-fill-diagram>img{height:auto;object-fit:contain;background:var(--c-cream-soft)}

/* .ba-fill-stack: page-scoped opt-in modifier for .ba-grid.ba-fill galleries
   whose two images have very different aspect ratios and cannot share a
   cropped two-column row without losing important content (e.g. Kitchen
   Interior Updates' wide transformation collage + tall close-up shot; Flooring's
   before/after collage + tall room shot). Stacks images into a single
   column at full width and natural aspect ratio, so nothing is cropped;
   .ba-fill itself is untouched, so every other .ba-fill gallery keeps its
   existing cover/crop behavior. */
.ba-grid.ba-fill.ba-fill-stack{grid-template-columns:1fr}
.ba-grid.ba-fill.ba-fill-stack>img{height:auto;object-fit:contain;border-radius:var(--r)}

/* .ba-single-doc: page-scoped opt-in modifier for single-image informational
   graphics with a narrower/portrait aspect ratio (e.g. Home Watch's
   observation map). Removes the forced full-width box so the image renders
   at its natural proportion instead of being letterboxed with large empty
   margins inside a full-width container. .ba-single itself is untouched for
   every other page using a full-width single photo. */
.ba-single.ba-single-doc{max-width:640px;margin:0 auto}
.ba-single.ba-single-doc img{width:100%;height:auto;max-height:none}

/* ════════════════════════════════════════
   QUALITY / TRUST
════════════════════════════════════════ */
.quality-wrap{background:var(--c-cream-soft);padding:88px 0}
.quality-header{text-align:center;max-width:560px;margin:0 auto 52px}
.quality-header h2{color:var(--c-text);margin-top:8px}
.quality-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
@media(max-width:860px){.quality-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.quality-grid{grid-template-columns:1fr}}
.quality-card{background:#fff;border-radius:var(--r);padding:24px 22px 22px;border:1px solid var(--c-border);text-align:center;transition:box-shadow .25s,transform .25s;height:100%;display:flex;flex-direction:column}
.quality-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.quality-icon{width:40px;height:40px;border-radius:9px;background:var(--c-cream-warm);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--c-brown)}
.quality-card h4{color:var(--c-text);margin-bottom:7px;min-height:2.2em;display:flex;align-items:flex-end;justify-content:center}
.quality-card p{font-size:.83rem;line-height:1.62}

/* ════════════════════════════════════════
   MATERIALS / OPTIONS
════════════════════════════════════════ */
.materials-wrap{background:#fff;padding:88px 0}
.materials-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px;align-items:stretch}
@media(max-width:860px){.materials-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.materials-grid{grid-template-columns:1fr}}
.mat-card{border-radius:var(--r);overflow:hidden;border:1px solid var(--c-border);transition:box-shadow .25s,transform .25s;height:100%;display:flex;flex-direction:column}
.mat-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.mat-card-body{padding:17px 18px;background:var(--c-cream);height:100%;display:flex;flex-direction:column}
.mat-card-body h4{color:var(--c-text);margin-bottom:5px;font-size:.9rem;min-height:2.2em;display:flex;align-items:flex-end}
.mat-card-body p{font-size:.8rem;line-height:1.58}

/* ════════════════════════════════════════
   PROCESS
════════════════════════════════════════ */
.process-wrap{background:var(--c-cream-warm);padding:88px 0}
.process-header{max-width:520px;margin-bottom:48px}
.process-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0;position:relative}
.process-steps::before{content:'';position:absolute;top:22px;left:0;right:0;height:1px;background:var(--c-border);z-index:0}
.step{position:relative;z-index:1;padding:0 20px 0 0;text-align:left}
.step-num{width:44px;height:44px;border-radius:50%;background:var(--c-brown);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;margin-bottom:18px}
.step h4{color:var(--c-text);margin-bottom:6px}
.step p{font-size:.82rem;line-height:1.7}
@media(max-width:700px){.process-steps{grid-template-columns:1fr 1fr}.process-steps::before{display:none}.step{padding:20px;background:#fff;border-radius:var(--r-sm);border:1px solid var(--c-border)}}
@media(max-width:400px){.process-steps{grid-template-columns:1fr}}

/* ════════════════════════════════════════
   SERVICE PAGE NAVIGATION
════════════════════════════════════════ */
.svc-nav{background:var(--c-cream-soft);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:0}
.svc-nav-inner{display:grid;grid-template-columns:1fr 1fr;max-width:1200px;margin:0 auto;padding:0 40px}
.svc-nav-link{display:flex;flex-direction:column;gap:5px;padding:28px 0;transition:background .2s,color .2s;text-decoration:none}
.svc-nav-link:first-child{padding-right:32px;border-right:1px solid var(--c-border)}
.svc-nav-link:last-child{padding-left:32px;align-items:flex-end;text-align:right}
.svc-nav-direction{font-size:.65rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);display:flex;align-items:center;gap:7px}
.svc-nav-link:first-child .svc-nav-direction::before{content:'←';font-size:.8rem;color:var(--c-brown2)}
.svc-nav-link:last-child .svc-nav-direction::after{content:'→';font-size:.8rem;color:var(--c-brown2)}
.svc-nav-label{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--c-text);transition:color .2s}
.svc-nav-link:hover .svc-nav-label{color:var(--c-brown)}
.svc-nav-link:hover{background:rgba(74,59,42,.03)}
@media(max-width:768px){
  .svc-nav-inner{padding:0 20px}
  .svc-nav-link{padding:22px 0}
  .svc-nav-link:first-child{padding-right:20px}
  .svc-nav-link:last-child{padding-left:20px}
  .svc-nav-label{font-size:.95rem}
}
@media(max-width:420px){
  .svc-nav-inner{grid-template-columns:1fr;gap:0}
  .svc-nav-link:first-child{border-right:none;border-bottom:1px solid var(--c-border);padding-right:0;padding-bottom:18px}
  .svc-nav-link:last-child{padding-left:0;padding-top:18px;align-items:flex-start;text-align:left}
  .svc-nav-link:last-child .svc-nav-direction{flex-direction:row-reverse}
  .svc-nav-link:last-child .svc-nav-direction::after{order:-1}
}

/* ════════════════════════════════════════
   CTA BANNER
════════════════════════════════════════ */
/* Service FAQs */
.faq-wrap{background:#fff;padding:88px 0}
.faq-header{max-width:560px;margin-bottom:40px}
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-cream);padding:0 22px}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;color:var(--c-text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{font-size:.88rem;padding:0 0 20px}

.cta-banner{background:var(--c-brown);padding:72px 0}
.cta-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px}
.cta-banner h2{color:#fff;font-size:clamp(1.5rem,2.5vw,2.2rem)}
.cta-banner p{color:rgba(255,255,255,.68);margin-top:7px;font-size:.92rem}
.cta-right{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.cta-phone{color:#fff;font-family:'Playfair Display',serif;font-size:1.08rem;font-weight:700}
.cta-note{color:rgba(255,255,255,.45);font-size:.74rem;text-align:right}
@media(max-width:680px){.cta-inner{grid-template-columns:1fr}.cta-right{align-items:flex-start}.cta-note{text-align:left}}

/* ════════════════════════════════════════
   SECTION HEADER
════════════════════════════════════════ */
.sec-hd{text-align:center;margin-bottom:52px}
.sec-hd h2{color:var(--c-text);margin-top:8px}
.sec-hd p{max-width:500px;margin:12px auto 0;font-size:.95rem}

/* ════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════ */
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ════════════════════════════════════════
   PACING - section breathing room
════════════════════════════════════════ */
/* Extra bottom breath on Services → Portfolio transition */
.svc-section{padding-bottom:112px}
/* Extra top breath on Portfolio section entry */
.port-section{padding-top:112px}
/* Softer secondary hero CTA - ghost demoted visually */
.btn-ghost-soft{
  background:transparent;
  color:var(--c-brown);
  border:1px solid rgba(74,59,42,.38);
  font-weight:400;
  opacity:.82;
}
.btn-ghost-soft:hover{
  opacity:1;
  background:rgba(74,59,42,.06);
  border-color:var(--c-brown);
}
/* Desktop-only sizing for .ba-fill-stack galleries (Kitchen, Flooring, Trim
   Carpentry): images render at natural aspect ratio, centered, capped so a
   tall portrait image can't dominate the section height. Consolidated from
   prior iterative test rules (previously 4 separate overlapping blocks). */
@media (min-width: 901px) {
  .ba-grid.ba-fill.ba-fill-stack {
    justify-items: center;
    background: #fff;
  }
  .ba-grid.ba-fill.ba-fill-stack > img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 760px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: var(--r);
  }
}
/* Desktop-only width cap for regular 2-col .ba-fill galleries (Interior Updates,
   Painting, Bathroom, etc.) so the grid doesn't stretch full container width. */
@media (min-width: 901px) {
  .ba-grid.ba-fill:not(.ba-fill-stack) {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Desktop-only sizing for .ba-fill-diagram galleries (Countertops): fixed
   centered width, natural aspect ratio, no crop. Consolidated from prior
   iterative test rules (previously 4 separate overlapping blocks). */
@media (min-width: 901px) {
  .ba-grid.ba-fill.ba-fill-diagram {
    display: block;
    width: 831px;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    background: transparent;
  }
  .ba-grid.ba-fill.ba-fill-diagram img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 1250px;
    margin: 0 auto;
    object-fit: contain;
  }
}
/* meta description cleanup - not visible, but preserves semantic tag */

/* Doors gallery: Architectural Door Details spans both grid columns. */
.ba-grid .ba-wide{grid-column:1 / -1;width:100%;}