/* ==========================================================================
   Door Detail V2 - Door Project Center
========================================================================== */

:root{
  --dd-blue:#123c69;
  --dd-blue-dark:#0c2b4d;
  --dd-gold:#f2b705;
  --dd-light:#f5f8fb;
  --dd-border:#d9e2ec;
  --dd-text:#1f2933;
  --dd-muted:#5f6f7f;
  --dd-shadow:0 12px 30px rgba(15,39,64,.12);
}

.dd-skip{position:absolute;left:-999px;top:auto}
.dd-skip:focus{left:16px;top:16px;z-index:9999;background:#fff;padding:10px 14px;border:2px solid var(--dd-blue)}
.dd-page{background:#fff;color:var(--dd-text)}
.dd-page-nav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--dd-border);box-shadow:0 6px 16px rgba(15,39,64,.04)}
.dd-page-nav .container{display:flex;gap:18px;align-items:center;justify-content:center;padding:12px 0}
.dd-page-nav a{text-decoration:none;color:var(--dd-blue);font-weight:900;font-size:.92rem}
.dd-nav-cta{background:var(--dd-gold);color:#1b2733!important;padding:9px 13px;border-radius:999px}

.dd-eyebrow{display:inline-flex;color:var(--dd-blue);font-weight:900;letter-spacing:.09em;text-transform:uppercase;font-size:.78rem;margin-bottom:10px}
.dd-hero{background:radial-gradient(circle at top left,rgba(242,183,5,.18),transparent 34%),linear-gradient(135deg,#fff 0%,#f5f8fb 58%,#edf4fb 100%);padding:clamp(46px,7vw,90px) 0;border-bottom:1px solid var(--dd-border)}
.dd-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:clamp(28px,5vw,60px);align-items:center}
.dd-hero h1{color:var(--dd-blue-dark);font-weight:900;font-size:clamp(2.3rem,5vw,4.7rem);line-height:.98;letter-spacing:-.045em;margin:0 0 18px}
.dd-lead{color:var(--dd-muted);font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.65;max-width:700px;margin:0 0 24px}
.dd-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.dd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border-radius:999px;font-weight:900;text-decoration:none!important;transition:.2s ease}
.dd-btn-primary{background:var(--dd-gold);color:#1b2733!important;box-shadow:0 12px 22px rgba(242,183,5,.22)}
.dd-btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(242,183,5,.32)}
.dd-btn-secondary{background:#fff;color:var(--dd-blue)!important;border:1px solid var(--dd-border)}
.dd-call{color:var(--dd-blue-dark);font-weight:900;text-decoration:none}
.dd-hero-proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.dd-hero-proof span{background:#fff;border:1px solid var(--dd-border);border-radius:999px;padding:8px 12px;color:var(--dd-blue-dark);font-weight:800;font-size:.88rem}
.dd-hero-visual{background:#fff;border:1px solid var(--dd-border);border-radius:30px;box-shadow:var(--dd-shadow);padding:clamp(18px,3vw,30px)}
.dd-door-diagram{position:relative;background:radial-gradient(circle at top right,rgba(18,60,105,.12),transparent 32%),linear-gradient(180deg,#fff 0%,#f8fbff 100%);border-radius:24px;padding:20px;min-height:420px}
.dd-door-diagram svg{width:100%;height:auto;display:block}
.dd-svg-rough{fill:#f1f6fb;stroke:#9fb4c8;stroke-width:3}.dd-svg-frame{fill:#fff;stroke:#123c69;stroke-width:7}.dd-svg-door{fill:#7d3d1e;stroke:#fff;stroke-width:5}.dd-svg-panel{fill:none;stroke:rgba(255,255,255,.4);stroke-width:3}.dd-svg-knob{fill:#f2b705;stroke:#1b2733;stroke-width:2}.dd-svg-threshold{fill:#b7c2cd}.dd-svg-measure{stroke:#123c69;stroke-width:3;stroke-dasharray:6 5}.dd-svg-label{fill:#123c69;font-weight:900;font-size:18px}
.dd-callout{position:absolute;background:var(--dd-blue);color:#fff;font-weight:900;border-radius:999px;padding:8px 12px;font-size:.82rem;box-shadow:0 10px 18px rgba(15,39,64,.18)}
.dd-callout-top{top:16px;left:50%;transform:translateX(-50%)}.dd-callout-left{left:14px;top:47%}.dd-callout-right{right:14px;top:47%}.dd-callout-bottom{bottom:18px;left:50%;transform:translateX(-50%)}

.dd-quick,.dd-project-types,.dd-measure,.dd-mistakes,.dd-anatomy,.dd-videos,.dd-planning,.dd-links,.dd-faq,.dd-final-cta{padding:clamp(42px,6vw,72px) 0}
.dd-quick{padding:34px 0;background:#fff}
.dd-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dd-quick-card,.dd-type-card,.dd-step-card,.dd-mistake-grid article,.dd-video-grid article,.dd-resource-grid article,.dd-resource-feature,.dd-faq details{background:#fff;border:1px solid var(--dd-border);border-radius:22px;padding:24px;box-shadow:0 8px 20px rgba(15,39,64,.06)}
.dd-quick-card{text-decoration:none!important;color:var(--dd-text)}
.dd-quick-card strong{display:block;color:var(--dd-blue-dark);font-size:1.2rem;margin-bottom:8px}
.dd-quick-card span{color:var(--dd-muted);line-height:1.5}
.dd-featured{background:linear-gradient(135deg,var(--dd-blue),var(--dd-blue-dark))}
.dd-featured strong,.dd-featured span{color:#fff}

.dd-section-head{max-width:760px;margin-bottom:28px}
.dd-center{text-align:center;margin-inline:auto}
.dd-section-head h2,.dd-final-card h2{color:var(--dd-blue-dark);font-weight:900;font-size:clamp(1.85rem,3vw,3rem);margin:0 0 10px;letter-spacing:-.03em}
.dd-section-head p,.dd-final-card p{color:var(--dd-muted);line-height:1.65;font-size:1.05rem}

.dd-project-types,.dd-measure,.dd-planning,.dd-faq{background:var(--dd-light);border-top:1px solid var(--dd-border);border-bottom:1px solid var(--dd-border)}
.dd-type-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.dd-type-card{min-height:260px;text-decoration:none!important;color:var(--dd-text);display:flex;flex-direction:column;transition:.2s ease}
.dd-type-card:hover{transform:translateY(-3px);box-shadow:var(--dd-shadow);border-color:var(--dd-gold)}
.dd-type-card h3{color:var(--dd-blue-dark);font-size:1.1rem;font-weight:900;margin:14px 0 8px}
.dd-type-card p{color:var(--dd-muted);line-height:1.45;margin:0 0 16px;font-size:.93rem}
.dd-type-card span:last-child{margin-top:auto;color:var(--dd-blue);font-weight:900}
.dd-icon{width:72px;height:86px;border:3px solid var(--dd-blue);border-radius:8px 8px 4px 4px;display:block;position:relative;background:linear-gradient(180deg,#fff,#edf4fb)}
.dd-icon:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--dd-gold);right:12px;top:44px}
.dd-icon-double{width:100px}.dd-icon-double:before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:3px solid var(--dd-blue)}
.dd-icon-sidelite{width:118px}.dd-icon-sidelite:before,.dd-icon-sidelite:after{content:"";position:absolute;top:8px;bottom:8px;width:20px;background:rgba(18,60,105,.12);border:2px solid rgba(18,60,105,.35);border-radius:4px}.dd-icon-sidelite:before{left:8px}.dd-icon-sidelite:after{right:8px}

.dd-before-card{background:linear-gradient(135deg,var(--dd-blue),var(--dd-blue-dark));color:#fff;border-radius:26px;padding:28px;margin-bottom:24px}
.dd-before-card h3{margin-top:0;color:#fff;font-weight:900}
.dd-before-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dd-before-grid span{background:rgba(255,255,255,.12);padding:12px;border-radius:14px;font-weight:800}
.dd-steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dd-step-card b{color:var(--dd-gold);font-size:1.4rem}
.dd-step-card h3{color:var(--dd-blue-dark);font-weight:900}
.dd-step-card li{margin-bottom:8px;color:var(--dd-muted);line-height:1.45}
.dd-mini{height:140px;border-radius:18px;background:linear-gradient(135deg,#edf4fb,#fff);border:1px solid var(--dd-border);margin:16px 0;position:relative}
.dd-mini:after{content:"";position:absolute;inset:24px 55px;border:6px solid var(--dd-blue);border-radius:8px}
.dd-mini-width:before{content:"";position:absolute;left:55px;right:55px;bottom:18px;border-top:4px dashed var(--dd-gold)}
.dd-mini-height:before{content:"";position:absolute;top:24px;bottom:24px;right:38px;border-right:4px dashed var(--dd-gold)}
.dd-mini-jamb:before{content:"";position:absolute;inset:40px 85px;border:8px solid #b7c2cd}
.dd-mini-swing:before{content:"";position:absolute;left:78px;top:32px;width:90px;height:90px;border-top:4px dashed var(--dd-gold);border-radius:90px 0 0 0}
.dd-mini-rough:after{border-color:#9fb4c8}
.dd-mini-side:before{content:"";position:absolute;top:24px;bottom:24px;left:42px;width:28px;border:4px solid rgba(18,60,105,.35);border-radius:6px}

.dd-mistake-grid,.dd-video-grid,.dd-resource-grid,.dd-link-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.dd-mistake-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.dd-mistake-grid h3,.dd-video-grid h3,.dd-resource-grid h3{color:var(--dd-blue-dark);font-weight:900}
.dd-anatomy-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center}
.dd-anatomy-card{background:#fff;border:1px solid var(--dd-border);border-radius:26px;padding:28px;box-shadow:var(--dd-shadow);display:flex;flex-wrap:wrap;gap:12px}
.dd-anatomy-card button,.dd-link-grid a{border:1px solid var(--dd-border);background:var(--dd-light);color:var(--dd-blue);font-weight:900;border-radius:999px;padding:12px 16px;text-decoration:none;cursor:pointer}
.dd-video-thumb{height:150px;border-radius:18px;background:linear-gradient(135deg,var(--dd-blue-dark),var(--dd-blue));color:#fff;display:flex;align-items:center;justify-content:center;font-size:3rem;text-decoration:none}
.dd-resource-feature{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.dd-link-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.dd-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dd-faq summary{font-weight:900;color:var(--dd-blue-dark);cursor:pointer}
.dd-final-cta{background:radial-gradient(circle at top left,rgba(242,183,5,.18),transparent 32%),linear-gradient(135deg,var(--dd-blue),var(--dd-blue-dark));color:#fff}
.dd-final-card h2,.dd-final-card p,.dd-final-card .dd-eyebrow{color:#fff}
.dd-info-overlay{position:fixed;inset:0;background:rgba(12,43,77,.72);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.dd-info-overlay.active{display:flex}
.dd-info-card{background:#fff;border-radius:24px;box-shadow:var(--dd-shadow);width:min(560px,94vw);padding:28px;position:relative}
.dd-info-card h3{color:var(--dd-blue-dark);font-weight:900}
.dd-info-close{position:absolute;top:12px;right:14px;border:0;background:#fff;font-size:28px;cursor:pointer}

@media(max-width:1200px){.dd-type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:991px){
  .dd-page-nav{display:none}
  .dd-hero-grid,.dd-anatomy-grid{grid-template-columns:1fr}
  .dd-quick-grid,.dd-steps-grid,.dd-mistake-grid,.dd-video-grid,.dd-resource-grid,.dd-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .dd-type-grid,.dd-quick-grid,.dd-steps-grid,.dd-mistake-grid,.dd-video-grid,.dd-resource-grid,.dd-link-grid,.dd-faq-grid,.dd-before-grid{grid-template-columns:1fr}
  .dd-hero-actions{align-items:stretch}
  .dd-btn,.dd-call{width:100%;justify-content:center;text-align:center}
  .dd-door-diagram{min-height:320px}
  .dd-resource-feature{display:block}
}