/* ===========================================================
   EVERHOME RESULTS — design system
   Palette: charcoal + brass gold + warm sand (client-specified)
   Signature motifs: the "measure line" (ruler ticks) and the
   "window frame" photo treatment — both drawn from the actual
   product (precision measurement, divided-lite glazing).
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,340;0,9..144,440;0,9..144,560;0,9..144,620;1,9..144,440;1,9..144,500&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  --charcoal: #150f0a;
  --charcoal-2: #1e1710;
  --charcoal-3: #2b2115;
  --hairline-dark: rgba(246,240,224,0.14);
  --gold: #c2933a;
  --gold-bright: #eec27a;
  --gold-vivid: #f0a83e;
  --gold-deep: #8a6420;
  --gold-glow: rgba(238,194,122,0.35);
  --gold-soft: rgba(194,147,58,0.14);
  --sand: #f5ecd9;
  --sand-dim: #ecdfbd;
  --hairline-light: rgba(23,20,15,0.14);
  --ink: #1a140d;
  --ink-soft: #5c5041;
  --ink-faint: #8b7f6c;
  --radius: 3px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body{
  background: var(--sand);
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  position: relative;
}
/* subtle film-grain overlay for tactile, printed-paper depth */
body::before{
  content:"";
  position: fixed; inset:0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
::selection{ background: var(--gold); color: var(--charcoal); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
.wrap{ max-width: 1220px; margin: 0 auto; padding: 0 40px; }

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--ink);
}
h1 i, h2 i, h3 i{ font-style: italic; font-weight: 440; }
p{ color: var(--ink-soft); }

/* -------- ruler / measure-line motif -------- */
.measure-line{
  height: 9px;
  background-image: repeating-linear-gradient(to right, var(--gold) 0 1.5px, transparent 1.5px 14px);
  opacity: 0.55;
}
.measure-line.on-dark{ background-image: repeating-linear-gradient(to right, var(--gold-bright) 0 1.5px, transparent 1.5px 14px); opacity:0.4; }
.measure-line.tight{ background-image: repeating-linear-gradient(to right, var(--gold) 0 1.5px, transparent 1.5px 9px); }

/* -------- buttons -------- */
.btn{
  font-family:'Archivo', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn-gold::after{
  content:"";
  position:absolute; top:0; left:-70%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
}
.btn-gold:hover::after{ left: 130%; }
.btn-gold{
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 65%);
  color: var(--charcoal);
  box-shadow: 0 6px 22px -6px rgba(194,147,58,0.55);
}
.btn-gold:hover{ background: linear-gradient(135deg, #f4d29a, var(--gold-bright) 65%); transform: translateY(-2px); box-shadow: 0 10px 30px -6px rgba(238,194,122,0.65); }
.btn-line{ background: transparent; color: var(--sand); border: 1px solid var(--hairline-dark); }
.btn-line:hover{ border-color: var(--gold-bright); color: var(--gold-bright); background: var(--gold-soft); }
.btn-line-dark{ background: transparent; color: var(--ink); border: 1px solid var(--hairline-light); }
.btn-line-dark:hover{ border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft); }

/* -------- header / nav -------- */
header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(21,15,10,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline-dark);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}
header.scrolled{ box-shadow: 0 8px 24px -12px rgba(0,0,0,0.5); }
header.scrolled nav{ padding: 12px 40px; }
header.scrolled .logo-mark{ height: 30px; }
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 40px; max-width: 1220px; margin: 0 auto;
  transition: padding 0.25s ease;
}
.logo{
  font-family:'Fraunces', serif; font-size: 1.22rem; color: var(--sand);
  letter-spacing: 0.005em; display:flex; align-items:center; gap: 10px;
  flex-shrink: 0; white-space: nowrap;
  transition: color 0.2s ease;
}
.logo:hover{ color: var(--gold-bright); }
.logo-mark{ height: 36px; width:auto; transition: height 0.25s ease, filter 0.25s ease; }
.logo:hover .logo-mark{ filter: drop-shadow(0 0 10px rgba(238,194,122,0.55)); }
.navlinks{ display:flex; gap: 30px; align-items:center; }
.navlinks a{ color: var(--ink-faint); color: #a89e8c; font-size: 0.92rem; font-weight: 500; transition: color 0.2s; }
.navlinks a:hover, .navlinks a.active{ color: var(--sand); }
.navlinks a.active{ color: var(--gold-bright); }
.nav-right{ display:flex; align-items:center; gap: 18px; flex-shrink: 0; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap: 5px;
  width: 40px; height: 40px; background: transparent; border: 1px solid var(--hairline-dark);
  border-radius: var(--radius); padding: 0; flex-shrink: 0;
}
.nav-toggle-bar{ width: 18px; height: 1.5px; background: var(--sand); transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu{ display:none; flex-direction:column; background: var(--charcoal-2); border-top: 1px solid var(--hairline-dark); padding: 16px 24px 24px; }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ color: var(--sand); font-size: 1rem; font-weight: 500; padding: 14px 4px; border-bottom: 1px solid var(--hairline-dark); }
.mobile-menu a.active{ color: var(--gold-bright); }
.mobile-menu a.btn{ border-bottom:none; margin-top:10px; justify-content:center; }

/* -------- window-frame photo device (signature motif) -------- */
.window-frame{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--charcoal-2);
}
.window-frame img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(1.14) contrast(1.05); transition: filter 0.4s ease, transform 0.5s cubic-bezier(.2,.8,.2,1); }
.window-frame video{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(1.1) contrast(1.03); transition: filter 0.4s ease, transform 0.5s cubic-bezier(.2,.8,.2,1); }
.window-frame:hover video{ filter: saturate(1.2) contrast(1.05); transform: scale(1.035); }
.window-frame:hover img{ filter: saturate(1.24) contrast(1.07); transform: scale(1.035); }
.window-frame{ transition: box-shadow 0.3s ease; }
.window-frame:hover{ box-shadow: 0 0 0 2px var(--gold-bright), 0 18px 38px -8px rgba(0,0,0,0.55); }
.window-frame::before{
  content:"";
  position:absolute; inset: 0;
  border: 10px solid var(--charcoal);
  pointer-events:none;
  z-index:2;
}
.window-frame::after{
  content:"";
  position:absolute; left:50%; top:0; bottom:0; width: 3px;
  background: var(--charcoal);
  transform: translateX(-50%);
  pointer-events:none;
  z-index:2;
  box-shadow: 0 0 0 3px transparent;
}
.window-frame .muntin-h{
  position:absolute; left:0; right:0; top:50%; height:3px;
  background: var(--charcoal);
  transform: translateY(-50%);
  pointer-events:none;
  z-index:2;
}
.window-frame.on-light::before{ border-color: var(--sand); }
.window-frame.on-light::after{ background: var(--sand); }
.window-frame.on-light .muntin-h{ background: var(--sand); }
.window-frame.no-muntin::before{ border-width: 0; }
.window-frame.no-muntin::after{ display:none; }
.window-frame.no-muntin .muntin-h{ display:none; }
.window-frame .frame-tag{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  color: var(--sand);
  font-size: 0.82rem;
  font-weight:600;
  padding: 34px 20px 16px;
  background: linear-gradient(0deg, rgba(23,20,15,0.88), transparent);
}
.window-frame .frame-tag span{ display:block; font-size:0.72rem; font-weight:600; color: var(--gold-bright); margin-bottom:3px; }
.sound-toggle{
  position:absolute; top:16px; right:16px; z-index:5;
  width:44px; height:44px; border-radius:50%;
  background: rgba(15,12,8,0.7);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: var(--sand);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.sound-toggle:hover{ background: rgba(15,12,8,0.78); border-color: var(--gold-bright); transform: scale(1.06); }

/* -------- generic section rhythm -------- */
section{ padding: 108px 0; }
.section-head{ max-width: 640px; margin-bottom: 54px; }
.section-head h2{ font-size: clamp(1.95rem, 3.2vw, 2.7rem); }
.section-head p{ margin-top: 18px; font-size: 1.05rem; }
.section-head.on-dark h2{ color: var(--sand); }
.section-head.on-dark p{ color: #b5ab98; }
.kicker{ color: var(--gold-deep); font-weight:600; font-size:0.95rem; margin-bottom:10px; display:block; }
.section-head.on-dark .kicker{ color: var(--gold-bright); }

/* -------- hero -------- */
.hero{
  background:
    radial-gradient(ellipse 900px 560px at 12% -10%, rgba(238,194,122,0.13), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 30%, rgba(194,147,58,0.08), transparent 60%),
    var(--charcoal);
  color: var(--sand); padding: 64px 0 0;
}
@keyframes reveal-up{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:translateY(0); } }
.hero-grid > div:first-child{ animation: reveal-up 0.7s cubic-bezier(.2,.7,.3,1) both; }
.hero-photo{ animation: reveal-up 0.85s cubic-bezier(.2,.7,.3,1) 0.12s both; }
.hero-grid{ display:grid; grid-template-columns: 1fr 0.92fr; gap: 64px; align-items:center; padding-bottom: 72px; }
.hero .kicker{ color: var(--gold-bright); }
.hero h1{ font-size: clamp(2.5rem, 4.4vw, 3.7rem); margin: 14px 0 26px; color: var(--sand); }
.hero p.lede{ font-size: 1.12rem; color: #beb3a0; max-width: 480px; margin-bottom: 34px; }
.hero-ctas{ display:flex; gap:16px; margin-bottom: 46px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap: 0; }
.hero-stats div{ flex:1; padding-right: 28px; }
.hero-stats div .num{
  font-family:'Fraunces', serif; font-weight:560; font-size: 1.85rem;
  background: linear-gradient(100deg, var(--gold-bright), var(--gold-vivid) 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats div .lbl{ font-size: 0.84rem; color: #9c9280; margin-top: 8px; }
.hero-stats .measure-line{ margin-bottom: 14px; }
.hero-photo{ aspect-ratio: 4/4.6; filter: drop-shadow(0 24px 60px rgba(0,0,0,0.5)); position:relative; }
.hero-photo::before{
  content:"";
  position:absolute; top:-30px; right:-30px; width:200px; height:200px;
  background: radial-gradient(circle, rgba(238,194,122,0.45), transparent 70%);
  z-index:4; pointer-events:none; filter: blur(4px);
}
.hero-photo .window-frame{ height:100%; }
.hero-photo .window-frame img{ filter: saturate(1.12) contrast(1.04); }

/* -------- trust strip -------- */
.trust-strip{ background: linear-gradient(180deg, var(--sand-dim), #e6d8ae); border-bottom: 1px solid #d9c895; padding: 24px 0; }
.trust-strip .wrap{ display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 24px; }
.trust-item{ display:flex; align-items:center; gap: 13px; font-size: 0.86rem; color: var(--ink-soft); font-weight:600; }
.icon-badge{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6e2, var(--gold-soft) 70%);
  box-shadow: inset 0 0 0 1px rgba(194,147,58,0.35);
}

/* -------- compare / build difference -------- */
.compare{
  background:
    radial-gradient(ellipse 700px 400px at 85% 0%, rgba(238,194,122,0.07), transparent 60%),
    var(--charcoal);
  color: var(--sand);
}
.compare-table{ display:grid; grid-template-columns: 1.5fr 1fr 1fr; border-radius: var(--radius); overflow:hidden; }
.compare-table .row{ display:contents; }
.compare-table .cell{ padding: 20px 22px; border-bottom: 1px solid var(--hairline-dark); font-size: 0.94rem; display:flex; align-items:center; }
.compare-table .row.headrow .cell{ font-weight:700; font-size: 0.85rem; color: #b5ab98; padding-top:0; padding-bottom:16px; border-bottom: 1px solid var(--hairline-dark); }
.compare-table .cell.label{ color: #a89e8c; }
.compare-table .cell.everhome{ color: var(--gold-bright); font-weight:700; background: linear-gradient(90deg, rgba(238,194,122,0.10), transparent); }
.compare-table .cell.everhome .check{ color: var(--gold-vivid); margin-right:10px; font-weight:700; }
.compare-table .cell.standard{ color: #6b6252; }

/* -------- process timeline -------- */
.process-rail{ position:relative; }
.process-line{ margin-bottom: 44px; }
.process-list{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.process-item .n{
  font-family:'Fraunces', serif; font-style:italic; font-weight:440; font-size: 1.9rem; display:block; margin-bottom: 16px;
  background: linear-gradient(100deg, var(--gold-deep), var(--gold-vivid) 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.process-item h3{ font-size: 1.18rem; margin-bottom: 10px; }
.process-item p{ font-size: 0.92rem; }

/* -------- gallery -------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gallery-grid .window-frame{ aspect-ratio: 4/5; }

/* -------- bento gallery (windows page) -------- */
.photo-bento{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; height: 560px; }
.photo-bento .window-frame{ height:100%; }
.tile-hero{ grid-row: 1 / 3; }
.tile-b{ grid-column: 2 / 4; }

/* -------- testimonials -------- */
.testimonials{ background: linear-gradient(180deg, var(--sand-dim), #e6d8ae); }
.test-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #d9c895; border-top: 1px solid #d9c895; border-bottom: 1px solid #d9c895; }
.test-card{ background: var(--sand-dim); padding: 4px 30px 0; position:relative; }
.test-card::before{
  content:"\201C"; font-family:'Fraunces', serif; font-size: 3.6rem; line-height:1; display:block;
  background: linear-gradient(135deg, var(--gold-vivid), var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:0.85; margin-bottom:-10px;
}
.test-card .measure-line.tight{ margin-bottom: 24px; }
.test-card p.quote{ font-family:'Fraunces', serif; font-weight: 400; font-size: 1.14rem; color: var(--ink); margin-bottom: 26px; line-height:1.42; }
.test-card .who{ font-size: 0.84rem; color: var(--ink-soft); font-weight:700; padding-bottom: 30px; }
.test-card .who span{ display:block; font-weight:400; color: var(--ink-faint); margin-top:2px; }

/* -------- CTA / quote form -------- */
.cta-section{
  background:
    radial-gradient(ellipse 800px 500px at 90% 0%, rgba(238,194,122,0.10), transparent 60%),
    var(--charcoal);
  color: var(--sand);
}
.cta-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items:start; }
.cta-grid h2{ color: var(--sand); font-size: clamp(1.95rem,3.2vw,2.5rem); margin-top:12px; }
.cta-grid p{ color: #b5ab98; margin-top:16px; max-width: 420px; }
form{ padding-top: 6px; }
.field{ margin-bottom: 22px; }
.field label{ display:block; font-size: 0.82rem; color: #948a78; margin-bottom: 9px; font-weight:500; }
.field input, .field select{
  width:100%; background: transparent; border: none; border-bottom: 1px solid var(--hairline-dark);
  color: var(--sand); padding: 10px 2px; font-family:'Archivo',sans-serif; font-size: 0.98rem; border-radius: 0;
}
.field select option{ background: var(--charcoal); }
.field input::placeholder{ color: #5c5344; }
.field input:focus, .field select:focus{ outline: none; border-color: var(--gold-bright); box-shadow: 0 1px 0 0 var(--gold-bright); }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
form button{ width:100%; justify-content:center; margin-top:14px; }
form .fine{ font-size: 0.78rem; color: #756c5c; margin-top:16px; text-align:center; }

/* -------- CTA band (page bottom, centered) -------- */
.cta-band{
  background:
    radial-gradient(ellipse 700px 400px at 50% 0%, rgba(238,194,122,0.12), transparent 65%),
    var(--charcoal);
  color: var(--sand); text-align:center;
}
.cta-band h2{ color: var(--sand); font-size: clamp(1.9rem,3.2vw,2.5rem); margin: 10px 0 20px; }
.cta-band p{ color: #b5ab98; max-width: 480px; margin: 0 auto 30px; }
.cta-band .measure-line{ max-width:120px; margin: 0 auto 22px; }

/* -------- footer -------- */
footer{ position:relative; background: var(--charcoal); padding: 60px 0 32px; color: #a89e8c; }
footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-bright) 50%, var(--gold) 75%, transparent); opacity:0.6; }
.footer-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-grid h4{ font-size: 0.82rem; font-weight:600; letter-spacing:0.03em; text-transform: uppercase; color: var(--sand); margin-bottom: 18px; }
.footer-grid li{ margin-bottom: 11px; font-size: 0.88rem; }
.footer-grid li a:hover{ color: var(--gold-bright); }
.footer-bottom{ border-top: 1px solid var(--hairline-dark); padding-top: 24px; display:flex; justify-content: space-between; font-size: 0.8rem; color: #756c5c; flex-wrap:wrap; gap:10px; }

/* -------- promo announcement bar -------- */
.promo-bar{
  background: linear-gradient(100deg, var(--gold-bright), var(--gold-vivid) 55%, var(--gold));
}
.promo-bar a{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding: 13px 20px; font-size: 0.94rem; font-weight:700; text-align:center;
  color: var(--charcoal); transition: background 0.2s ease;
}
.promo-bar a:hover{ background: rgba(255,255,255,0.22); }
.promo-bar svg{ flex-shrink:0; }
.promo-bar strong{ font-weight:800; }

/* -------- service / community discount -------- */
.service-discount{ background: var(--sand-dim); text-align:center; }
.service-discount .section-head{ margin-left:auto; margin-right:auto; text-align:center; }
.service-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
  max-width: 880px; margin: 0 auto;
}
.service-item{ display:flex; flex-direction:column; align-items:center; gap: 16px; }
.service-item .icon-badge{ width: 62px; height: 62px; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.service-item:hover .icon-badge{ transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(194,147,58,0.35), 0 10px 20px -6px rgba(194,147,58,0.4); }
.service-item span.label{ font-size: 0.92rem; font-weight:700; color: var(--ink); }

/* ===========================================================
   PAGE-SPECIFIC: page hero (About / Windows / FAQ)
=========================================================== */
.page-hero{ background: var(--charcoal); color: var(--sand); padding: 76px 0 62px; }
.page-hero h1{ font-size: clamp(2.2rem, 4vw, 3.15rem); margin: 16px 0 20px; color: var(--sand); max-width: 740px; }
.page-hero p{ color: #b5ab98; max-width: 560px; font-size: 1.06rem; }

/* -------- about: story rows -------- */
.story-rows{ display:flex; flex-direction:column; gap: 0; }
.story-row{ display:grid; grid-template-columns: 200px 1fr; gap: 44px; align-items:start; padding: 40px 0; border-bottom: 1px solid #ddd0ab; }
.story-row:first-child{ padding-top:0; }
.story-row:last-child{ border-bottom: none; }
.story-row p{ font-size: 1.04rem; color: var(--ink-soft); }
.story-marker .num{ font-family:'Fraunces', serif; font-style:italic; font-weight:440; font-size: 2.6rem; color: var(--gold); line-height:1; }
.story-marker .lbl{ font-size: 0.86rem; font-weight:600; color: var(--ink); margin-top: 10px; }

/* -------- about: install model -------- */
.model{ background: var(--charcoal); color: var(--sand); }
.model-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.model-grid h2{ color: var(--sand); margin: 14px 0 18px; font-size: clamp(1.85rem, 3vw, 2.35rem); }
.model-grid p{ color: #b5ab98; font-size: 1.02rem; margin-bottom: 16px; }
.model-card{ border-top: 1px solid var(--hairline-dark); padding-top: 28px; }
.model-card li{ font-size: 0.94rem; color: #cfc5b2; padding-left: 26px; position: relative; margin-bottom: 16px; }
.model-card li::before{ content: ""; position:absolute; left:0; top:8px; width:12px; height:1.5px; background: var(--gold); }

/* -------- about: values -------- */
.values-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.value-card{ transition: transform 0.25s ease; }
.value-card:hover{ transform: translateY(-4px); }
.value-card .icon-badge{ width: 56px; height: 56px; margin-bottom: 22px; transition: box-shadow 0.25s ease; }
.value-card:hover .icon-badge{ box-shadow: inset 0 0 0 1px rgba(194,147,58,0.35), 0 8px 18px -6px rgba(194,147,58,0.4); }
.value-card h3{ font-size: 1.14rem; margin-bottom: 10px; }
.value-card p{ font-size: 0.9rem; }

/* -------- about: service area -------- */
.area-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; margin-top: 8px; }
.area-list div{ font-size: 0.98rem; color: var(--ink); padding: 15px 0; border-bottom: 1px solid #ddd0ab; display:flex; align-items:center; gap: 12px; }
.area-list div::before{ content:""; width:5px; height:5px; background: var(--gold); border-radius: 50%; flex-shrink:0; }
.area-note{ font-size: 0.86rem; color: var(--ink-faint); margin-top: 24px; }

/* ===========================================================
   PAGE-SPECIFIC: windows.html
=========================================================== */
.style-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #d9c895; border: 1px solid #d9c895; }
.style-card{ background: var(--sand); padding: 36px 30px; transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease; position:relative; z-index:1; }
.style-card:hover{ background: linear-gradient(180deg, #faf4e6, var(--sand)); transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(0,0,0,0.18); z-index:2; }
.style-window-icon{ width: 54px; height:44px; margin-bottom: 20px; }
.style-card h3{ font-size: 1.2rem; margin-bottom: 10px; }
.style-card p{ font-size: 0.92rem; margin-bottom: 18px; }
.style-card ul li{ font-size: 0.84rem; color: var(--ink-faint); padding-left: 16px; position:relative; margin-bottom: 8px; }
.style-card ul li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:1.5px; background: var(--gold); }

.specs{
  background:
    radial-gradient(ellipse 700px 400px at 15% 100%, rgba(238,194,122,0.08), transparent 60%),
    var(--charcoal);
  color: var(--sand);
}
.spec-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.spec-cell{ border-top: 2px solid var(--gold); padding-top: 20px; }
.spec-cell .k{ font-size: 0.84rem; color: #9c9280; margin-bottom: 10px; }
.spec-cell .v{
  font-family:'Fraunces', serif; font-size: 1.8rem; margin-bottom: 10px;
  background: linear-gradient(100deg, var(--gold-bright), var(--gold-vivid));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.spec-cell .d{ font-size: 0.88rem; color: #b5ab98; }

/* ===========================================================
   PAGE-SPECIFIC: faq.html
=========================================================== */
.faq-groups{ display:flex; flex-direction:column; gap: 54px; }
.faq-group-label{ font-family:'Fraunces', serif; font-style:italic; font-weight:440; font-size: 1.3rem; color: var(--gold-deep); display:block; margin-bottom: 20px; }
.faq-list{ display:flex; flex-direction:column; }
details.faq-item{ border-bottom: 1px solid #ddd0ab; padding: 22px 0; }
details.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap: 20px;
  font-family:'Fraunces', serif; font-weight:500; font-size: 1.1rem; color: var(--ink);
}
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary .icon{
  flex-shrink:0; width: 28px; height: 28px; border: 1.5px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color: var(--gold-deep); font-size: 0.95rem;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
details.faq-item[open] summary .icon{
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--charcoal);
  box-shadow: 0 4px 14px -4px rgba(194,147,58,0.6);
}
details.faq-item summary:hover .icon{ border-color: var(--gold-bright); }
details.faq-item .faq-answer{ font-size: 0.98rem; color: var(--ink-soft); max-width: 700px; margin-top: 16px; padding-left: 2px; }

/* -------- impact band (full-bleed photo statement) -------- */
.impact-band{
  position:relative;
  min-height: 440px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color: var(--sand);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  overflow:hidden;
}
.impact-band::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(21,15,10,0.68), rgba(21,15,10,0.82));
}
.impact-band-content{ position:relative; z-index:1; max-width: 780px; padding: 0 40px; }
.impact-band blockquote{
  font-family:'Fraunces', serif; font-style:italic; font-weight:440;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height:1.28; color: var(--sand);
}
.impact-band .cite{ margin-top: 22px; font-size: 0.86rem; color: var(--gold-bright); font-weight:600; }
@media (max-width: 900px){
  .impact-band{ background-attachment: scroll; min-height: 360px; }
}

/* ===========================================================
   RESPONSIVE
=========================================================== */
@media (max-width: 1080px){
  .navlinks{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width: 900px){
  .hero-grid, .cta-grid, .model-grid{ grid-template-columns: 1fr; }
  .hero-photo{ aspect-ratio: 4/5; order:-1; }
  .service-grid{ grid-template-columns: repeat(2,1fr); gap: 34px 24px; }
  .compare-table{ grid-template-columns: 1.2fr 1fr 1fr; }
  .process-list{ grid-template-columns: repeat(2,1fr); gap: 40px 24px; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .test-grid{ grid-template-columns: 1fr; }
  .test-card{ padding: 30px 0 0; border-bottom: 1px solid #ddd0ab; }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .area-list{ grid-template-columns: repeat(2,1fr); }
  .style-grid{ grid-template-columns: repeat(2,1fr); }
  .style-card:last-child{ grid-column: 1 / -1; }
  .spec-grid{ grid-template-columns: repeat(2,1fr); gap: 30px; }
  .photo-bento{ grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 220px); height:auto; }
  .tile-hero{ grid-column: 1/3; grid-row: 1/2; }
  .tile-b{ grid-column: 1/3; grid-row: 2/3; }
  .story-row{ grid-template-columns: 1fr; gap: 14px; }
  .story-marker{ display:flex; align-items:baseline; gap:14px; }
}
@media (max-width: 560px){
  .promo-bar a{ font-size: 0.8rem; padding: 11px 14px; gap: 8px; }
  .promo-bar svg{ width:16px; height:16px; }
  nav{ padding: 14px 20px; }
  .logo{ font-size: 1.02rem; gap: 8px; }
  .logo-mark{ height: 28px; }
  .nav-cta{ display:none; }
  .btn-gold{ padding: 12px 18px; font-size: 0.85rem; }
  .wrap{ padding: 0 20px; }
  section{ padding: 60px 0; }
  .hero{ padding-top: 48px; }
  .hero-ctas{ flex-direction: column; align-items: stretch; }
  .hero-ctas .btn{ justify-content: center; }
  .hero-stats{ flex-wrap:wrap; row-gap: 20px; }
  .hero-stats div{ flex: 1 1 45%; padding-right: 12px; }
  .hero-stats div .num{ font-size: 1.4rem; }
  .trust-strip .wrap{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .compare-table{ grid-template-columns: 1fr; }
  .compare-table .row.headrow{ display:none; }
  .compare-table .cell{ padding: 8px 0; border-bottom: none; }
  .compare-table .cell.label{ font-size:0.82rem; font-weight:600; color:var(--ink-faint); padding-top:18px; }
  .compare-table .row{ border-bottom: 1px solid var(--hairline-dark); padding-bottom: 6px; }
  .process-list{ grid-template-columns: 1fr; }
  .field-row{ grid-template-columns: 1fr; gap:0; }
  .cta-grid{ gap: 40px; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .values-grid, .area-list, .style-grid, .spec-grid{ grid-template-columns: 1fr; }
  .page-hero{ padding: 56px 0 40px; }
  .photo-bento{ grid-template-rows: repeat(3, 200px); }
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; animation: none !important; }
}