/* Jerco Windows, Grand Prairie TX. Direction: name-as-monument (taste seed 1260874060).
   Palette redraw: subject's own colours (glass, sky, daylight) in the dealt proportions:
   bone ground, one deep teal ink, one sky accent on the single action. */
:root{
  --bg:#e9eae6; --surface:#dcded9; --surface2:#cfd0c9;
  --ink:#0f3a44; --muted:#46636c; --accent:#146a87; --accent-ink:#f4f7f6;
  --field:#0f3a44; --field-ink:#e9eae6;
  --display:"Chivo", "Arial Black", sans-serif; --body:"Chivo", system-ui, sans-serif;
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2.5rem,1.2rem + 5vw,5.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.5;font-size:var(--step-body)}
a{color:var(--accent)}
img{max-width:100%;display:block}
.wrap{max-width:1392px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;margin:0}
p{margin:0 0 16px}
.lede{font-size:var(--step-lead);line-height:1.35;max-width:34ch}

/* Top bar: wordmark, a few plain links, one action. No bar chrome. */
.topbar{background:var(--bg);position:relative;z-index:50}
.topbar-in{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:0;text-transform:none}
.topnav{display:flex;gap:4px;margin-left:auto}
.topnav a{color:var(--ink);text-decoration:none;padding:9px 12px;font-size:15px;font-weight:700}
.topnav a:hover,.topnav a.active{color:var(--accent)}
.callbtn.mob{display:none}
.callbtn{white-space:nowrap;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700;font-size:15px;padding:11px 18px}
.callbtn:hover{background:var(--ink)}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--ink);color:var(--ink);padding:8px 12px;font-size:18px;cursor:pointer}
@media (max-width:860px){
  .burger{display:block}
  .topnav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--surface);flex-direction:column;padding:12px 24px 18px;z-index:60}
  .topnav.open{display:flex}
  .callbtn{display:none}
  .callbtn.mob{display:block;text-align:center;margin:14px 24px 0}
}

/* Hero: the name as a monument, cropped by the viewport edge. */
.hero{position:relative;overflow:hidden;padding:72px 0 0}
.hero-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.hero-sent{max-width:34ch;font-size:clamp(20px,1.7vw,26px);line-height:1.35;margin:0}
.hero-cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.btn-solid{display:inline-block;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:700;padding:16px 26px;font-size:17px}
.btn-solid:hover{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{display:inline-block;background:transparent;color:var(--ink);text-decoration:none;font-weight:700;padding:14px 24px;font-size:17px;border:2px solid var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.monument{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.8;white-space:nowrap;font-size:clamp(200px,38vw,640px);margin:74px 0 -0.12em -0.04em;color:var(--ink)}
.monument .sky{color:var(--accent)}
.hero-photo{margin:0}
.hero-photo img{width:100%;height:62vh;min-height:380px;object-fit:cover}
.hero-photo figcaption{padding:12px 24px;color:var(--muted);font-size:15px}
@media (max-width:860px){
  .hero{padding-top:40px}
  .hero-top{flex-direction:column}
  .monument{font-size:clamp(120px,32vw,300px);margin-top:32px}
  .hero-photo img{height:44vh;min-height:260px}
}

/* 3D stage: a real window in Three.js, sunlight behind the glass. */
.stage{position:relative;background:var(--field);overflow:hidden}
.stage canvas{display:block;width:100%;height:72vh;min-height:480px}
.stage.compact canvas{height:54vh;min-height:360px}
.stage-fallback{display:none}
.stage-fallback img{width:100%;height:72vh;min-height:480px;object-fit:cover}
.no-webgl .stage canvas{display:none}
.no-webgl .stage-fallback{display:block}
.stage-copy{position:absolute;left:0;top:50%;transform:translateY(-50%);padding:0 24px;max-width:460px;pointer-events:none}
@media (max-width:860px){
  .stage-copy{position:static;transform:none;padding:24px;max-width:none}
}
.stage-copy h2{color:var(--field-ink);font-size:clamp(40px,7vw,84px)}
.stage-copy p{color:#d8e4e6;max-width:480px;font-size:18px}

/* Sections: 120-240px apart, every section its own composition. */
.sec{padding:120px 0}
.sec h2{font-size:var(--step-head);margin:0 0 16px}
.sec p{max-width:62ch}

/* Showcase: flat field split 50/50, square photo left, text right. */
.showcase{background:var(--surface)}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.showcase-grid figure{margin:0}
.showcase-grid figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
.showcase-grid figcaption{color:var(--muted);font-size:15px;padding-top:12px}
.tabs{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 24px}
.tabs button{background:none;border:0;padding:6px 0;font:inherit;font-weight:700;font-size:17px;color:var(--muted);cursor:pointer}
.tabs button.active{color:var(--ink)}
.tabs button:hover{color:var(--accent)}
.style-facts{list-style:none;margin:20px 0;padding:0}
.style-facts li{padding:10px 0;font-size:17px}
.style-facts li strong{font-weight:700}
@media (max-width:860px){.showcase-grid{grid-template-columns:1fr;gap:28px}.sec{padding:72px 0}}

/* How it works: photographs down a diagonal. */
.steps{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;margin-top:48px}
.step1{grid-column:1/5}
.step2{grid-column:6/9;margin-top:220px}
.step3{grid-column:8/13;margin-top:180px}
.step figure{margin:0}
.step1 img{aspect-ratio:3/4;object-fit:cover;width:100%}
.step2 img{aspect-ratio:1/1;object-fit:cover;width:100%}
.step3 img{aspect-ratio:16/10;object-fit:cover;width:100%}
.step p{font-size:17px;max-width:36ch;margin-top:16px}
.step p strong{font-weight:700}
@media (max-width:860px){
  .steps{display:block}
  .step{margin:0 0 56px}
  .step2 img{width:62%;margin-left:auto}
  .step3 img{width:78%}
}

/* Gallery: prints dropped on the headline. */
.gallery-field{background:var(--field);color:var(--field-ink);position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:80px 0}
.gallery-field h2{color:var(--field-ink);font-size:clamp(72px,14vw,210px);line-height:.85;text-align:center;position:relative;z-index:1}
.prints{position:relative;z-index:2;display:flex;justify-content:center;margin-top:-60px}
.prints figure{margin:0 0 0 -30px;width:26vw;max-width:340px;background:var(--bg);padding:10px 10px 14px;transform:rotate(-6deg)}
.prints figure:nth-child(2){transform:rotate(5deg);margin-top:40px}
.prints figure img{width:100%;aspect-ratio:3/4;object-fit:cover}
.prints figcaption{color:var(--ink);font-size:14px;padding-top:8px}
.gallery-note{position:relative;z-index:2;color:#c8d8db;font-size:16px;padding:24px 24px 0;max-width:520px}
@media (max-width:860px){
  .prints figure{margin-left:0}
  .gallery-field{min-height:78vh}
  .gallery-field h2{font-size:30vw}
  .prints figure{width:52vw}
  .prints{margin-top:-30px}
}

/* Desktop frame: every section's content sits on the same 48px margins. */
@media (min-width:861px){
  .hero-photo figcaption{padding:12px 48px}
  .stage-copy{padding:0 48px}
  .gallery-note{padding:24px 48px 0}
  .cta-band{padding:32px 48px}
  .cta-band .cta-word{left:48px;right:48px}
  .cta-band .cta-arrow{right:48px}
  .cta-band .cta-phone{right:48px}
}
table.proof{width:100%;border-collapse:collapse;margin-top:48px}
table.proof td,table.proof th{padding:16px 12px;text-align:left;font-size:17px;vertical-align:top}
table.proof th{font-weight:700}
table.proof tr:nth-child(even){background:var(--surface)}
table.proof td.num{font-family:var(--display);font-weight:900;font-size:28px;text-transform:uppercase;white-space:nowrap}
@media (max-width:860px){
  table.proof,table.proof tbody,table.proof tr,table.proof td{display:block}
  table.proof tr{padding:8px 0}
  table.proof td.num{padding-bottom:0}
}

/* Pricing: the offer as one sentence. */
.pricing{background:var(--surface)}
.pricing .offer{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.95;font-size:clamp(34px,8vw,110px);letter-spacing:-.03em}
.pricing .offer .price{background:var(--accent);color:var(--accent-ink);padding:0 .15em}
.pricing-row{display:flex;gap:32px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-top:48px}
.pricing-row p{max-width:46ch;margin:0}

/* Quote builder: the one live thing. */
.quote{background:var(--bg)}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.quote-grid figure{margin:0}
.quote-grid figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.quote-grid figcaption{color:var(--muted);font-size:15px;padding-top:12px}
@media (max-width:860px){.quote-grid{grid-template-columns:1fr;gap:28px}}
form{max-width:560px}
form label{display:block;font-weight:700;margin:18px 0 6px;font-size:16px}
.field-row{display:flex;align-items:center;gap:14px;margin-top:18px}
.field-row label{margin:0;white-space:nowrap}
.field-row select{flex:1}
form input,form select,form textarea{width:100%;background:#fff;border:2px solid var(--ink);color:var(--ink);padding:13px 14px;font:inherit;font-size:16px}
form input:focus,form select:focus,form textarea:focus{outline:3px solid var(--accent);border-color:var(--accent)}
.count-row{display:flex;align-items:center;gap:16px}
.count-row button{background:var(--ink);color:var(--bg);border:0;font:inherit;font-weight:700;font-size:20px;width:52px;height:52px;cursor:pointer}
.count-row button:hover{background:var(--accent)}
.count-row span{font-weight:700;font-size:17px}
.count-row output{font-family:var(--display);font-weight:900;font-size:32px;min-width:64px;text-align:center}
.form-note{color:var(--accent);font-weight:700;min-height:24px;margin-top:12px}
.quote-out{background:var(--surface);padding:20px;margin-top:16px;font-size:17px}

/* FAQ: large questions, answers beside. */
.faq-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:36px 0}
.faq-row h3{font-size:clamp(26px,2.6vw,40px);text-transform:none;letter-spacing:-.02em;line-height:1.1}
.faq-row p{margin:0;max-width:40ch;font-size:17px}
@media (max-width:860px){.faq-row{grid-template-columns:1fr;gap:12px}}

/* CTA band: one word is the button. */
.cta-band{display:block;background:var(--accent);color:var(--accent-ink);text-decoration:none;min-height:60vh;position:relative;padding:32px 24px}
.cta-band:hover{background:var(--ink)}
.cta-band .cta-next{font-size:20px;margin:0;max-width:34ch}
.cta-band .cta-word{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.85;font-size:clamp(120px,26vw,420px);position:absolute;left:24px;right:24px;bottom:12px;white-space:nowrap;overflow:hidden}
.cta-band .cta-arrow{position:absolute;top:32px;right:24px;font-size:48px;line-height:1}
.cta-band .cta-phone{position:absolute;top:96px;right:24px;color:var(--accent-ink);font-weight:700;font-size:18px;text-decoration:none}

/* Contact: the email as display type. */
.contact-field{background:var(--field);color:var(--field-ink);min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:80px 24px 32px}
.contact-field .contact-sent{font-size:clamp(20px,1.7vw,24px);max-width:40ch}
.contact-field .email-big{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(28px,7.5vw,110px);color:var(--field-ink);text-decoration:none;word-break:break-all;line-height:1}
.contact-field .email-big:hover{color:#7fc4dd}
.contact-facts{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:15px;color:#c8d8db}
.contact-facts a{color:var(--field-ink)}

/* Work grid. */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
@media (max-width:860px){.work-grid{grid-template-columns:1fr}}
.work-shot{margin:0;background:var(--surface);padding:12px}
.work-shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.work-shot.portrait img{aspect-ratio:3/4}
.work-shot figcaption{padding:14px 4px 6px;font-size:16px}
.work-shot figcaption strong{display:block;font-size:18px}

/* Footer: the name returns at full width, inverse colours. */
.foot{background:var(--field);color:var(--field-ink);padding:64px 0 24px;overflow:hidden}
.foot .foot-name{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.85;font-size:clamp(90px,18vw,300px);white-space:nowrap;margin:0 0 32px}
.foot p{color:#c8d8db;font-size:15px;max-width:70ch}
.foot a{color:var(--field-ink)}
.foot .foot-links{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 24px}
.foot .foot-links a{text-decoration:none;font-weight:700;color:var(--field-ink)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}