/* Storm Doors Galore custom draft styles */
:root {
  --sdg-forest: #3f4a3c;
  --sdg-forest-deep: #2f382d;
  --sdg-sage: #7a876f;
  --sdg-sage-pale: #edf0e8;
  --sdg-oat: #f5f1e8;
  --sdg-paper: #ffffff;
  --sdg-earth: #7b6251;
  --sdg-earth-dark: #5f493d;
  --sdg-clay: #b8a08e;
  --sdg-line: #ddd8cd;
  --sdg-ink: #2d302a;
  --sdg-muted: #65695f;
  --sdg-radius: 16px;
  --sdg-shadow: 0 22px 60px rgba(63,74,60,.13);
}
html { scroll-behavior: smooth; }
body { background: #fff; color: var(--sdg-ink); }
body.admin-bar .sdg-header { top: 32px; }
.sdg-site { overflow: hidden; background: #fff; color: var(--sdg-ink); font-family: Manrope, sans-serif; }
.sdg-site *, .sdg-site *::before, .sdg-site *::after { box-sizing: border-box; }
.sdg-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sdg-kicker { margin: 0 0 12px; color: var(--sdg-earth); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sdg-site h1, .sdg-site h2, .sdg-site h3, .sdg-page h1, .sdg-page h2, .sdg-page h3 { font-family: "Roboto Slab", Georgia, serif; letter-spacing: -.025em; }
.sdg-site h1 { margin: 0; color: var(--sdg-forest-deep); font-size: clamp(3rem, 7.5vw, 6.7rem); line-height: .95; }
.sdg-site h2 { margin: 0; color: var(--sdg-forest-deep); font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.04; }
.sdg-site h3 { margin: 0 0 12px; color: var(--sdg-forest-deep); font-size: 1.35rem; }
.sdg-site p { line-height: 1.65; }
.sdg-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--sdg-line); backdrop-filter: blur(14px); }
.sdg-nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sdg-brand { display: inline-flex; align-items: center; color: var(--sdg-forest-deep); text-decoration: none; }
.sdg-brand img { display: block; width: 238px; height: auto; }
.sdg-nav-links { display: flex; align-items: center; gap: 25px; }
.sdg-nav-links a { color: var(--sdg-forest-deep); font-size: .9rem; font-weight: 750; text-decoration: none; }
.sdg-nav-links .sdg-phone-link { padding-left: 20px; border-left: 1px solid var(--sdg-line); color: var(--sdg-earth-dark); white-space: nowrap; }
.sdg-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 12px 22px; border: 2px solid var(--sdg-forest); border-radius: 999px; background: var(--sdg-forest); color: #fff !important; font-size: .9rem; font-weight: 850; text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.sdg-button:hover { transform: translateY(-2px); background: var(--sdg-forest-deep); border-color: var(--sdg-forest-deep); box-shadow: 0 12px 28px rgba(63,74,60,.22); }
.sdg-button--ghost { background: transparent; border-color: var(--sdg-forest); color: var(--sdg-forest) !important; }
.sdg-button--ghost:hover { background: var(--sdg-sage-pale); }
.sdg-hero { position: relative; min-height: 750px; display: grid; align-items: center; background: #fff; color: var(--sdg-ink); }
.sdg-hero::before { content: ""; position: absolute; width: 55vw; height: 55vw; right: -22vw; top: -15vw; border-radius: 50%; background: radial-gradient(circle, var(--sdg-sage-pale) 0 43%, transparent 44%); opacity: .8; }
.sdg-hero-grid { position: relative; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 70px; padding: 90px 0; }
.sdg-hero-copy p:not(.sdg-kicker) { max-width: 660px; margin: 26px 0 30px; color: var(--sdg-muted); font-size: 1.15rem; }
.sdg-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sdg-proofline { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 32px; color: var(--sdg-earth-dark); font-size: .82rem; font-weight: 700; }
.sdg-proofline span::before { content: "✓"; margin-right: 7px; color: var(--sdg-sage); }
.sdg-door-stage { min-height: 510px; position: relative; display: grid; place-items: center; }
.sdg-door-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: var(--sdg-oat); border: 1px solid var(--sdg-line); }
.sdg-door { width: min(310px, 80%); aspect-ratio: .58; position: relative; padding: 15px; border: 4px solid var(--sdg-forest-deep); background: #d8d1c4; box-shadow: 25px 30px 0 rgba(63,74,60,.14), 0 0 0 12px rgba(255,255,255,.8); transform: perspective(900px) rotateY(-8deg); }
.sdg-door::before { content: ""; position: absolute; inset: 16px 16px 44%; border: 4px solid var(--sdg-forest); background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(122,135,111,.16)), repeating-linear-gradient(45deg, transparent 0 8px, rgba(63,74,60,.05) 9px 10px); }
.sdg-door::after { content: ""; position: absolute; inset: 60% 16px 16px; border: 4px solid var(--sdg-forest); background: linear-gradient(#cfc5b7, #b9ad9d); box-shadow: inset 0 0 0 12px #d8d1c4, inset 0 0 0 15px var(--sdg-forest); }
.sdg-handle { position: absolute; z-index: 3; right: 28px; top: 52%; width: 9px; height: 58px; border-radius: 9px; background: #8b745f; box-shadow: 0 0 0 3px #4d3b31; }
.sdg-note { position: absolute; right: -18px; bottom: 48px; max-width: 200px; padding: 15px 17px; background: #fff; color: var(--sdg-forest-deep); border-left: 4px solid var(--sdg-sage); box-shadow: var(--sdg-shadow); font-size: .78rem; font-weight: 800; transform: rotate(-2deg); }
.sdg-strip { background: var(--sdg-forest); color: #fff; }
.sdg-strip-grid { min-height: 116px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; }
.sdg-strip-item { padding: 20px 34px; border-right: 1px solid rgba(255,255,255,.24); }
.sdg-strip-item:first-child { padding-left: 0; }
.sdg-strip-item:last-child { border-right: 0; }
.sdg-strip-item strong { display: block; font-family: "Roboto Slab", Georgia, serif; font-size: 1.15rem; }
.sdg-strip-item span { color: #e8ede4; font-size: .82rem; }
.sdg-section { padding: 106px 0; background: #fff; }
.sdg-section--cream { background: var(--sdg-oat); }
.sdg-section--sage { background: var(--sdg-sage-pale); }
.sdg-section-head { max-width: 800px; margin-bottom: 50px; }
.sdg-section-head p:last-child { color: var(--sdg-muted); font-size: 1.05rem; }
.sdg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sdg-card { min-height: 320px; padding: 34px; border: 1px solid var(--sdg-line); border-radius: var(--sdg-radius); background: #fff; box-shadow: 0 8px 30px rgba(63,74,60,.05); transition: transform .2s ease, box-shadow .2s ease; }
.sdg-card:hover { transform: translateY(-6px); box-shadow: var(--sdg-shadow); }
.sdg-card a { color: inherit; text-decoration: none; }
.sdg-card-number { display: inline-grid; width: 46px; height: 46px; place-items: center; margin-bottom: 48px; border-radius: 50%; background: var(--sdg-sage); color: #fff; font-size: .8rem; font-weight: 900; }
.sdg-card p { color: var(--sdg-muted); font-size: .94rem; }
.sdg-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 86px; align-items: start; }
.sdg-process { counter-reset: process; }
.sdg-step { counter-increment: process; display: grid; grid-template-columns: 62px 1fr; gap: 20px; padding: 27px 0; border-bottom: 1px solid var(--sdg-line); }
.sdg-step::before { content: "0" counter(process); display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--sdg-earth); border-radius: 50%; color: var(--sdg-earth); font-size: .74rem; font-weight: 900; }
.sdg-step h3 { font-size: 1.15rem; }
.sdg-step p { margin: 0; color: var(--sdg-muted); font-size: .9rem; }
.sdg-owner-panel { padding: 48px; position: sticky; top: 110px; border-radius: 2px 46px 2px 46px; background: var(--sdg-oat); border: 1px solid var(--sdg-line); box-shadow: var(--sdg-shadow); }
.sdg-owner-panel p { color: var(--sdg-muted); }
.sdg-owner-name { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--sdg-line); color: var(--sdg-forest-deep); font-weight: 850; }
.sdg-cost-panel { padding: 48px; border-radius: 2px 46px 2px 46px; background: var(--sdg-forest); color: #fff; box-shadow: var(--sdg-shadow); }
.sdg-cost-panel h2 { color: #fff; }
.sdg-cost-panel p { color: #e3e9df; }
.sdg-cost-list { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
.sdg-cost-list li { display: flex; gap: 12px; align-items: start; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.sdg-cost-list li::before { content: "+"; color: #d5ddcf; font-weight: 900; }
.sdg-brands { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; overflow: hidden; border: 1px solid var(--sdg-line); background: var(--sdg-line); }
.sdg-brand-card { min-height: 220px; padding: 34px; background: #fff; }
.sdg-brand-card strong { display: block; color: var(--sdg-forest-deep); font-family: "Roboto Slab", Georgia, serif; font-size: 1.65rem; }
.sdg-brand-card p { color: var(--sdg-muted); font-size: .9rem; }
.sdg-areas { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; overflow: hidden; border: 1px solid var(--sdg-line); background: var(--sdg-line); }
.sdg-area { min-height: 175px; padding: 26px; background: #fff; }
.sdg-area p { margin: 8px 0 0; color: var(--sdg-muted); font-size: .86rem; }
.sdg-faq { display: grid; gap: 12px; }
.sdg-faq details { padding: 24px 28px; border: 1px solid var(--sdg-line); border-radius: 12px; background: #fff; }
.sdg-faq summary { cursor: pointer; color: var(--sdg-forest-deep); font-weight: 850; }
.sdg-faq p { margin-bottom: 0; color: var(--sdg-muted); font-size: .92rem; }
.sdg-quote { position: relative; padding: 110px 0; background: var(--sdg-sage-pale); color: var(--sdg-ink); border-top: 1px solid var(--sdg-line); }
.sdg-quote h2 { color: var(--sdg-forest-deep); }
.sdg-quote-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.sdg-quote-copy p:not(.sdg-kicker) { color: var(--sdg-muted); }
.sdg-quote-form { padding: 34px; border: 1px solid var(--sdg-line); border-radius: var(--sdg-radius); background: #fff; color: var(--sdg-ink); box-shadow: var(--sdg-shadow); }
.sdg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sdg-field { display: grid; gap: 7px; }
.sdg-field--full { grid-column: 1 / -1; }
.sdg-field label { color: var(--sdg-forest-deep); font-size: .78rem; font-weight: 850; }
.sdg-field input, .sdg-field select, .sdg-field textarea { width: 100%; min-height: 49px; margin: 0; padding: 11px 13px; border: 1px solid #b9b7ad; border-radius: 8px; background: #fff; color: var(--sdg-ink); font: inherit; font-size: .9rem; }
.sdg-field textarea { min-height: 110px; resize: vertical; }
.sdg-field input:focus, .sdg-field select:focus, .sdg-field textarea:focus { outline: 3px solid rgba(122,135,111,.25); border-color: var(--sdg-sage); }
.sdg-form-note { margin: 14px 0 0; color: var(--sdg-muted); font-size: .72rem; }
.sdg-alert { margin-bottom: 18px; padding: 12px 14px; border-radius: 8px; background: #e7f1e4; color: #31512f; font-size: .88rem; font-weight: 750; }
.sdg-alert--error { background: #f4ebe7; color: #704334; }
.sdg-hp { position: absolute !important; left: -9999px !important; }
.sdg-footer { padding: 42px 0; background: var(--sdg-forest-deep); color: #e2e8df; }
.sdg-footer-grid { display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.sdg-footer a { color: #fff; }
.sdg-footer p { margin: 0; font-size: .8rem; }

/* Interior page template */
.sdg-page { background: #fff; color: var(--sdg-ink); font-family: Manrope, sans-serif; }
.sdg-page-hero { padding: 92px 0 68px; background: var(--sdg-oat); border-bottom: 1px solid var(--sdg-line); }
.sdg-page-hero h1 { max-width: 900px; margin: 0; color: var(--sdg-forest-deep); font-size: clamp(2.6rem,6vw,5.2rem); line-height: 1; }
.sdg-page-main { padding: 78px 0 100px; }
.sdg-page-content { max-width: 850px; margin-inline: auto; }
.sdg-page-content > * { margin-block-start: 1.4rem; }
.sdg-page-content > :first-child { margin-block-start: 0; }
.sdg-page-content h2 { margin-top: 3.2rem; color: var(--sdg-forest-deep); font-size: clamp(1.8rem,3.5vw,2.8rem); }
.sdg-page-content h3 { margin-top: 2.2rem; color: var(--sdg-forest-deep); font-size: 1.4rem; }
.sdg-page-content p, .sdg-page-content li { color: var(--sdg-muted); line-height: 1.75; }
.sdg-page-content a { color: var(--sdg-earth-dark); font-weight: 750; }
.sdg-page-content .wp-block-buttons { margin-top: 2.2rem; }
.sdg-page-content .wp-block-button__link { border-radius: 999px; background: var(--sdg-forest); color: #fff; }
.sdg-page-cta { padding: 70px 0; background: var(--sdg-sage-pale); border-top: 1px solid var(--sdg-line); }
.sdg-page-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sdg-page-cta h2 { margin: 0; color: var(--sdg-forest-deep); font-size: clamp(1.8rem,3.7vw,3rem); }

.sdg-hero-photo { position: relative; width: min(100%, 430px); margin: 0 auto; overflow: hidden; border: 12px solid #fff; border-radius: 22px; background: var(--sdg-oat); box-shadow: 24px 28px 0 rgba(63,74,60,.13), var(--sdg-shadow); }
.sdg-hero-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sdg-hero-photo figcaption { position: absolute; right: 16px; bottom: 16px; left: 16px; padding: 11px 15px; border-radius: 999px; background: rgba(38,47,36,.9); color: #fff; font-size: .78rem; font-weight: 750; text-align: center; }
.sdg-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.sdg-project-card { margin: 0; overflow: hidden; border: 1px solid var(--sdg-line); border-radius: var(--sdg-radius); background: #fff; box-shadow: 0 12px 34px rgba(63,74,60,.08); }
.sdg-project-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 48%; }
.sdg-project-card figcaption { padding: 18px 22px; color: var(--sdg-forest-deep); font-family: "Roboto Slab", Georgia, serif; font-size: 1rem; font-weight: 700; }
.sdg-warranty-term { margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid var(--sdg-line); color: var(--sdg-forest-deep) !important; }
.sdg-warranty-note { max-width: 820px; margin: 24px 0 0; color: var(--sdg-muted); font-size: .86rem; }

@media (max-width: 1000px) { .sdg-areas { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px) {
  body.admin-bar .sdg-header { top: 46px; }
  .sdg-nav-links a:not(.sdg-button) { display: none; }
  .sdg-hero-grid, .sdg-split, .sdg-quote-grid { grid-template-columns: 1fr; }
  .sdg-door-stage { min-height: 430px; }
  .sdg-cards, .sdg-brands { grid-template-columns: 1fr; }
  .sdg-card { min-height: auto; }
  .sdg-card-number { margin-bottom: 24px; }
  .sdg-owner-panel { position: relative; top: 0; }
  .sdg-page-cta-inner { align-items: flex-start; flex-direction: column; }
  .sdg-hero-photo { width: min(100%, 520px); }
}
@media (max-width: 620px) {
  .sdg-shell { width: min(100% - 28px, 1180px); }
  .sdg-header .sdg-button { padding: 10px 13px; min-height: 44px; white-space: nowrap; }
  .sdg-nav { gap: 10px; }
  .sdg-brand img { width: 174px; }
  .sdg-hero { min-height: auto; }
  .sdg-hero-grid { padding: 70px 0; gap: 28px; }
  .sdg-site h1 { font-size: clamp(2.7rem, 14vw, 4.3rem); }
  .sdg-strip-grid { grid-template-columns: 1fr; padding: 16px 0; }
  .sdg-strip-item, .sdg-strip-item:first-child { padding: 14px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.25); }
  .sdg-strip-item:last-child { border-bottom: 0; }
  .sdg-section, .sdg-quote { padding: 76px 0; }
  .sdg-areas { grid-template-columns: 1fr; }
  .sdg-area { min-height: auto; }
  .sdg-form-grid { grid-template-columns: 1fr; }
  .sdg-field--full { grid-column: auto; }
  .sdg-quote-form, .sdg-cost-panel, .sdg-owner-panel { padding: 28px 22px; }
  .sdg-footer-grid { align-items: start; flex-direction: column; }
  .sdg-page-hero { padding: 65px 0 48px; }
  .sdg-page-main { padding: 55px 0 72px; }
  .sdg-project-grid { grid-template-columns: 1fr; }
  .sdg-project-card img { aspect-ratio: 3 / 4; }
  .sdg-hero-photo { border-width: 8px; box-shadow: 12px 15px 0 rgba(63,74,60,.13), var(--sdg-shadow); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sdg-button, .sdg-card { transition: none; } }