/* ============================================================================
   Apex Innovation Roofing — Presentation CSS
   ============================================================================ */
:root {
  --navy:#051a43; --navy-mid:#1A2E4A; --orange:#1a6fde; --gold:#4a9eff;
  --white:#FFFFFF; --gray-100:#EEF0F4; --gray-500:#7A8494;
  --font-display:'Barlow Condensed','Impact',sans-serif;
  --font-body:'Inter',-apple-system,sans-serif;
  --radius:10px; --trans:200ms ease;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:1rem;background:var(--navy);color:var(--white);-webkit-font-smoothing:antialiased;height:100dvh;height:100vh;overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer;border:none}
p{margin:0 0 .75rem;line-height:1.6}
h1,h2,h3,h4{margin:0 0 .75rem;line-height:1.15}
ul{margin:0;padding:0;list-style:none}

/* APP SHELL */
.app{display:flex;flex-direction:column;height:100dvh;height:100vh}
.app__header{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.5rem;background:rgba(12,26,46,.98);border-bottom:2px solid var(--orange);flex-shrink:0;z-index:10}
.app__brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--white)}
.app__brand-text{display:flex;flex-direction:column;line-height:1.2}
.app__brand-name{font-family:var(--font-display);font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--white)}
.app__brand-meta{font-size:.7rem;color:var(--orange);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.app__header-actions{display:flex;align-items:center;gap:.5rem}
.app__icon-btn{width:44px;height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:rgba(255,255,255,.08);color:var(--white);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background var(--trans)}
.app__icon-btn:hover{background:rgba(255,255,255,.16)}
.app__icon-btn svg{width:18px;height:18px}
.app__exit{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.85);padding:.4rem .75rem;border-radius:6px;transition:all var(--trans)}
.app__exit{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.85);padding:.4rem .75rem;border-radius:6px;transition:all var(--trans)}.app__exit:hover{color:var(--white);background:rgba(255,255,255,.08)}
.app__main{flex:1;overflow:hidden;position:relative;z-index:1}
.stage{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.stage:focus{outline:none}
.app__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem 1.5rem;background:rgba(2,13,42,1);border-top:2px solid rgba(26,111,222,.25);flex-shrink:0;position:relative;z-index:10}
.app__nav-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;min-height:52px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;background:rgba(255,255,255,.08);color:rgba(255,255,255,.95);font-family:var(--font-display);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius);transition:all var(--trans)}
.app__nav-btn:hover{background:rgba(255,255,255,.14);color:var(--white)}
.app__nav-btn--primary{background:var(--orange);color:var(--white)}
.app__nav-btn--primary:hover{background:#D06A10}
.app__progress{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.app__progress-bar{width:100%;max-width:240px;height:3px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}
.app__progress-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:999px;transition:width .3s ease}
#progress-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.97)}

/* SHARED */
.eyebrow{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:.75rem}
.eyebrow::before{content:'';display:inline-block;width:20px;height:1.5px;background:var(--orange);vertical-align:middle;margin-right:.5rem;transform:translateY(-1px)}
.screen{padding:clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,3rem);min-height:100%;background:linear-gradient(160deg,rgba(5,20,60,0.98) 0%,rgba(2,13,42,0.97) 100%)}
.screen-title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,3rem);font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:.75rem}
.screen-body{font-size:clamp(.9rem,1.2vw,1.1rem);color:rgba(255,255,255,.95);max-width:680px;margin-bottom:1.75rem}
.screen-note{font-size:.8rem;color:rgba(255,255,255,.70);font-style:italic;margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}

/* WELCOME */
.welcome{display:flex;align-items:center;justify-content:center;min-height:100%;padding:2rem;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(26,58,92,.8) 0%,transparent 70%)}
.welcome__inner{text-align:center;max-width:600px}
.welcome__logo{width:80px;height:80px;margin:0 auto 1.5rem;border-radius:50%;overflow:hidden}
.welcome__company{font-family:var(--font-display);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--orange);margin-bottom:1rem}
.welcome__heading{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:1rem}
.welcome__body{font-size:1rem;color:rgba(255,255,255,.95);margin-bottom:2rem;line-height:1.7}
.welcome__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2rem;margin-bottom:2rem;padding:1.25rem;background:rgba(255,255,255,.05);border-radius:var(--radius);border:1px solid rgba(255,255,255,.08)}
.welcome__meta-item{text-align:center}
.welcome__meta-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);margin-bottom:.2rem;font-weight:600}
.welcome__meta-value{font-size:.95rem;font-weight:600;color:var(--white)}

/* BTN */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.75rem;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:all var(--trans);text-decoration:none;white-space:nowrap}
.btn--large{padding:1rem 2.25rem;font-size:1.05rem}
.btn--primary{background:var(--orange);color:var(--white);border-color:var(--orange)}
.btn--primary:hover{background:#D06A10;border-color:#D06A10;transform:translateY(-1px);box-shadow:0 8px 24px rgba(26,111,222,.35)}
.btn--secondary{background:transparent;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)}
.btn--secondary:hover{border-color:var(--white);color:var(--white)}

/* COMPANY PILLARS */
.company-pillars{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem;margin-top:1.5rem}
.pillar-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-top:3px solid var(--orange);border-radius:var(--radius);padding:1.5rem;transition:background var(--trans)}
.pillar-card:hover{background:rgba(255,255,255,.07)}
.pillar-card__label{font-family:var(--font-display);font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin-bottom:.5rem}
.pillar-card__note{font-size:.875rem;color:rgba(255,255,255,.88);margin:0}
.company-contact{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08)}
.company-contact a{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--orange);text-transform:uppercase;letter-spacing:.04em;transition:color var(--trans)}
.company-contact a:hover{color:var(--gold)}

/* INFO POINTS */
.info-points{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;margin-top:1.5rem}
.info-point{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;transition:background var(--trans)}
.info-point:hover{background:rgba(255,255,255,.07)}
.info-point__icon{font-size:1.75rem;flex-shrink:0}
.info-point__label{font-family:var(--font-display);font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin-bottom:.4rem}
.info-point__note{font-size:.875rem;color:rgba(255,255,255,.88);margin:0}

/* FINDINGS */
.findings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1.5rem}
.finding{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.25rem}
.finding__area{font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:uppercase;color:var(--white);margin-bottom:.5rem}
.finding__severity{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.2rem .6rem;border-radius:999px;margin-bottom:.625rem}
.finding__severity[data-sev="Good"]{background:rgba(46,125,50,.2);color:#81C784;border:1px solid rgba(46,125,50,.4)}
.finding__severity[data-sev="Review"]{background:rgba(249,168,37,.15);color:#FFD54F;border:1px solid rgba(249,168,37,.3)}
.finding__severity[data-sev="Attention"]{background:rgba(26,111,222,.15);color:var(--orange);border:1px solid rgba(26,111,222,.3)}
.finding__severity[data-sev="Moderate"]{background:rgba(229,57,53,.15);color:#EF9A9A;border:1px solid rgba(229,57,53,.3)}
.finding__note{font-size:.85rem;color:rgba(255,255,255,.88);margin:0}

/* SYSTEM */
.system-layers{display:flex;flex-direction:column;gap:0;margin-top:1.5rem;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.system-layer{display:flex;align-items:flex-start;gap:1rem;padding:.875rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.06);transition:background var(--trans)}
.system-layer:last-child{border-bottom:none}
.system-layer:hover{background:rgba(255,255,255,.04)}
.system-layer__num{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--orange);min-width:36px;line-height:1;margin-top:.1rem}
.system-layer__label{font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:uppercase;color:var(--white);margin-bottom:.2rem}
.system-layer__note{font-size:.85rem;color:rgba(255,255,255,.85);margin:0}

/* PRODUCTS */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;margin-top:1.5rem}
.product-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.5rem;position:relative;transition:all var(--trans)}
.product-card:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)}
.product-card--recommended{border-color:var(--orange);background:rgba(26,111,222,.06)}
.product-card__tag{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.2rem .625rem;border-radius:999px;background:rgba(74,158,255,.15);color:var(--gold);border:1px solid rgba(74,158,255,.3);margin-bottom:.625rem}
.product-card--recommended .product-card__tag{background:rgba(26,111,222,.15);color:var(--orange);border-color:rgba(26,111,222,.4)}
.product-card__name{font-family:var(--font-display);font-size:1.2rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:.5rem}
.product-card__summary{font-size:.85rem;color:rgba(255,255,255,.88);margin-bottom:1rem}
.product-card__features{list-style:none;padding:0;margin:0 0 1rem}
.product-card__features li{font-size:.825rem;color:rgba(255,255,255,.7);padding:.3rem 0;padding-left:1rem;border-bottom:1px solid rgba(255,255,255,.04);position:relative}
.product-card__features li::before{content:'✓';position:absolute;left:0;color:var(--orange);font-size:.75rem}
.product-card__features li:last-child{border-bottom:none}
.product-card__colors-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.70);margin-bottom:.4rem;font-weight:600}
.product-card__colors{display:flex;flex-wrap:wrap;gap:.375rem}
.product-card__color{font-size:.72rem;background:rgba(255,255,255,.06);color:rgba(255,255,255,.88);padding:.2rem .5rem;border-radius:4px;border:1px solid rgba(255,255,255,.08)}

/* WARRANTY */
.warranty-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.5rem}
.warranty-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.5rem}
.warranty-card__title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;text-transform:uppercase;color:var(--orange);margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.08)}
.warranty-card ul{display:flex;flex-direction:column;gap:.5rem}
.warranty-card li{font-size:.875rem;color:rgba(255,255,255,.95);padding-left:1.25rem;position:relative;line-height:1.5}
.warranty-card li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-size:.75rem;top:.1rem}
.warranty-exclusions{margin-top:1.25rem;background:rgba(229,57,53,.06);border:1px solid rgba(229,57,53,.15);border-radius:var(--radius);padding:1.25rem}
.warranty-exclusions__title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(229,57,53,.8);margin-bottom:.75rem}
.warranty-exclusions li{font-size:.825rem;color:rgba(255,255,255,.95);padding-left:1rem;position:relative;margin-bottom:.3rem}
.warranty-exclusions li::before{content:'–';position:absolute;left:0;color:rgba(229,57,53,.6)}

/* PROCESS */
.process-list{display:flex;flex-direction:column;gap:0;margin-top:1.5rem}
.process-item{display:flex;gap:1.25rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.process-item:last-child{border-bottom:none}
.process-item__num{width:48px;height:48px;background:rgba(26,111,222,.12);border:2px solid var(--orange);color:var(--orange);font-family:var(--font-display);font-size:1rem;font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--trans)}
.process-item:hover .process-item__num{background:var(--orange);color:var(--white)}
.process-item__label{font-family:var(--font-display);font-size:1.05rem;font-weight:700;text-transform:uppercase;color:var(--white);margin-bottom:.2rem}
.process-item__note{font-size:.875rem;color:rgba(255,255,255,.88);margin:0}

/* FINANCING */
.financing-terms{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden;margin-top:1.5rem}
.financing-term{display:flex;gap:1.5rem;align-items:baseline;padding:1.1rem 1.5rem;background:rgba(12,26,46,.8)}
.financing-term__label{font-family:var(--font-display);font-size:.9rem;font-weight:700;text-transform:uppercase;color:var(--orange);min-width:160px;flex-shrink:0}
.financing-term__value{font-size:.9rem;color:rgba(255,255,255,.97)}
.financing-disclosure{margin-top:1.25rem;font-size:.775rem;color:rgba(255,255,255,.35);font-style:italic;line-height:1.55}

/* NEXT STEPS */
.nextsteps-list{display:flex;flex-direction:column;gap:0;margin:1.5rem 0 2rem;border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.nextstep{display:flex;gap:1.25rem;align-items:flex-start;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.06)}
.nextstep:last-child{border-bottom:none}
.nextstep__num{width:40px;height:40px;background:var(--orange);color:var(--white);font-family:var(--font-display);font-size:1.1rem;font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nextstep__label{font-family:var(--font-display);font-size:1.05rem;font-weight:700;text-transform:uppercase;color:var(--white);margin-bottom:.2rem}
.nextstep__note{font-size:.875rem;color:rgba(255,255,255,.88);margin:0}
.nextsteps-ctas{display:flex;flex-wrap:wrap;gap:.875rem}

/* STAY CONNECTED */
.connected-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1.5rem}
.connected-link{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);text-decoration:none;color:var(--white);transition:all var(--trans);gap:.75rem}
a.connected-link:hover{background:rgba(26,111,222,.08);border-color:rgba(26,111,222,.3);color:var(--orange)}
.connected-link__text{flex:1}
.connected-link__label{font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.1rem}
.connected-link__note{font-size:.8rem;color:rgba(255,255,255,.97)}
.connected-link__status{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.2rem .5rem;border-radius:999px;flex-shrink:0}
.connected-link__status--live{background:rgba(46,125,50,.2);color:#81C784;border:1px solid rgba(46,125,50,.3)}
.connected-link__status--future{background:rgba(255,255,255,.06);color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.08)}

/* MENU */
.menu{position:fixed;inset:0;z-index:300;background:rgba(8,15,28,.7);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s}
.menu.is-open{opacity:1;pointer-events:all}
.menu__panel{position:absolute;top:0;right:0;width:min(320px,90vw);height:100%;background:var(--navy-mid);border-left:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.menu.is-open .menu__panel{transform:translateX(0)}
.menu__header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08)}
.menu__title{font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--white)}
.menu__close{background:transparent;color:rgba(255,255,255,.85);font-size:1.5rem;line-height:1;padding:.25rem .5rem;border-radius:4px;transition:color var(--trans)}
.menu__close:hover{color:var(--white)}
.menu__list{overflow-y:auto;padding:.75rem;flex:1}
.menu__item{width:100%;text-align:left;padding:.875rem 1rem;background:transparent;color:rgba(255,255,255,.7);font-size:.9rem;font-weight:500;border-radius:6px;transition:all var(--trans);cursor:pointer;display:flex;align-items:center;gap:.875rem;border:none;font-family:var(--font-body)}
.menu__item:hover{background:rgba(255,255,255,.06);color:var(--white)}
.menu__item.is-active{background:rgba(26,111,222,.1);color:var(--orange)}
.menu__item-num{font-family:var(--font-display);font-size:.75rem;font-weight:700;color:rgba(255,255,255,.3);min-width:24px;text-align:right}

/* IMAGE VIEWER */
.viewer{position:fixed;inset:0;z-index:400;background:rgba(8,15,28,.92);display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;pointer-events:none;transition:opacity .2s}
.viewer.is-open{opacity:1;pointer-events:all}
.viewer img{max-width:100%;max-height:80vh;border-radius:var(--radius);box-shadow:0 32px 80px rgba(0,0,0,.5)}
.viewer__close{position:absolute;top:1.5rem;right:1.5rem;background:rgba(255,255,255,.1);color:var(--white);border:none;border-radius:50%;width:44px;height:44px;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--trans)}
.viewer__close:hover{background:rgba(255,255,255,.2)}

@media(max-width:600px){
  .app__header,.app__footer{padding:.75rem 1rem}
  .app__nav-btn{padding:.55rem .875rem;font-size:.8rem}
  .screen{padding:1.5rem 1rem}
  .warranty-grid{grid-template-columns:1fr}
  .financing-term{flex-direction:column;gap:.25rem}
  .financing-term__label{min-width:unset}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:1ms!important}}

/* ============================================================
   INSURANCE CARRIERS SCREEN
   ============================================================ */
.carriers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem;margin-top:1.5rem}
@media(max-width:700px){.carriers-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.carriers-grid{grid-template-columns:repeat(2,1fr);gap:.625rem}}

.carrier-card{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.1rem .75rem;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:var(--radius);cursor:pointer;transition:background var(--trans),border-color var(--trans),transform var(--trans);text-align:center;color:var(--white)}
.carrier-card:hover{background:rgba(255,255,255,.09);border-color:var(--carrier-color,var(--orange));transform:translateY(-2px)}
.carrier-card:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.carrier-card:active{transform:translateY(0)}

.carrier-card__logo{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1rem;font-weight:800;letter-spacing:.03em;flex-shrink:0}
.carrier-card__name{font-size:.8rem;font-weight:600;color:var(--white);line-height:1.2}
.carrier-card__cta{font-size:.7rem;color:var(--orange);font-weight:600;letter-spacing:.03em;margin-top:auto}

/* ============================================================
   CARRIER MODAL
   ============================================================ */
.carrier-modal{position:fixed;inset:0;z-index:500;background:rgba(8,15,28,.88);display:flex;align-items:flex-end;justify-content:center;padding:0;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(4px)}
@media(min-width:600px){.carrier-modal{align-items:center;padding:1.5rem}}
.carrier-modal.is-open{opacity:1;pointer-events:all}
.carrier-modal.is-open .carrier-modal__panel{transform:translateY(0)}

.carrier-modal__panel{background:#0f2040;border-radius:20px 20px 0 0;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(40px);transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 -24px 80px rgba(0,0,0,.5);display:flex;flex-direction:column}
@media(min-width:600px){.carrier-modal__panel{border-radius:var(--radius);transform:translateY(20px);max-height:85vh}}

.carrier-modal__header{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.25rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;border-left:4px solid var(--carrier-color,var(--orange))}
.carrier-modal__logo{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.95rem;font-weight:800;flex-shrink:0}
.carrier-modal__header-text{flex:1;min-width:0}
.carrier-modal__carrier-name{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--white)}
.carrier-modal__carrier-sub{font-size:.75rem;color:rgba(255,255,255,.95);margin-top:.125rem}
.carrier-modal__close{background:rgba(255,255,255,.1);border:none;color:var(--white);width:36px;height:36px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--trans)}
.carrier-modal__close:hover{background:rgba(255,255,255,.2)}

.carrier-modal__body{padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem;overflow-y:auto}

.carrier-modal__contact{display:flex;flex-direction:column;gap:.625rem}
.carrier-modal__contact-item{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;background:rgba(255,255,255,.05);border-radius:10px;border:1px solid rgba(255,255,255,.08);text-decoration:none;color:var(--white);transition:background var(--trans),border-color var(--trans)}
.carrier-modal__contact-item--phone:hover,.carrier-modal__contact-item--web:hover{background:rgba(255,255,255,.09);border-color:var(--orange)}
.carrier-modal__contact-icon{font-size:1.25rem;flex-shrink:0;width:28px;text-align:center}
.carrier-modal__contact-label{font-size:.7rem;color:rgba(255,255,255,.45);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.carrier-modal__contact-value{font-size:.9rem;font-weight:600;color:var(--white);margin-top:.125rem}
a.carrier-modal__contact-item--phone .carrier-modal__contact-value{color:#6ec6ff}
a.carrier-modal__contact-item--web .carrier-modal__contact-value{color:var(--orange)}

.carrier-modal__steps-label{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.70);padding-bottom:.25rem;border-bottom:1px solid rgba(255,255,255,.06)}
.carrier-modal__steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.625rem}
.carrier-modal__step{display:flex;align-items:flex-start;gap:.875rem}
.carrier-modal__step-num{font-family:var(--font-display);font-size:.75rem;font-weight:800;color:var(--orange);background:rgba(26,111,222,.12);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.05rem}
.carrier-modal__step-text{font-size:.85rem;color:rgba(255,255,255,.8);line-height:1.5}

.carrier-modal__cta{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding-top:.5rem;text-align:center}
.carrier-modal__cta .btn{width:100%;max-width:380px;justify-content:center}
.carrier-modal__cta-note{font-size:.75rem;color:rgba(255,255,255,.45);line-height:1.5;margin:0;max-width:340px}

@media(max-width:600px){
  .carrier-modal__body{padding:1rem}
  .carrier-modal__header{padding:1rem}
}

/* ============================================================
   LOGO & IMAGES IN SCREENS
   ============================================================ */

/* Welcome screen background overlay */
.welcome{position:relative;background-size:cover;background-position:center}
.welcome::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,26,67,0.92) 0%,rgba(2,13,42,0.85) 100%);z-index:0}
.welcome__inner{position:relative;z-index:1}
.welcome__logo{display:flex;justify-content:center;margin-bottom:1.25rem}
.welcome__logo-img{width:100px;height:100px;object-fit:contain;filter:drop-shadow(0 4px 24px rgba(26,111,222,0.5))}

/* Logo strip — used on company / contact screens */
.screen-logo-strip{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.875rem;border-bottom:1px solid rgba(255,255,255,.08)}
.screen-logo-strip--center{justify-content:center;padding-bottom:1rem;margin-bottom:1.25rem}
.screen-logo{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.screen-logo--lg{width:80px;height:80px;filter:drop-shadow(0 4px 20px rgba(26,111,222,0.45))}

/* Photo strip — horizontal scroll row of real photos */
.screen-photo-strip{display:flex;gap:.625rem;overflow-x:auto;margin:1.25rem 0 .5rem;padding-bottom:.5rem;scrollbar-width:none}
.screen-photo-strip::-webkit-scrollbar{display:none}
.screen-photo-strip img{height:110px;width:auto;min-width:160px;object-fit:cover;border-radius:8px;flex-shrink:0;border:1.5px solid rgba(255,255,255,.1)}
.screen-photo-strip--sm img{height:80px;min-width:120px}

/* Findings photo strip */
.findings-photos{display:flex;gap:.625rem;margin:1rem 0;overflow-x:auto;scrollbar-width:none}
.findings-photos::-webkit-scrollbar{display:none}
.findings-photo{flex-shrink:0;border-radius:8px;overflow:hidden;border:2px solid rgba(26,111,222,.3)}
.findings-photo img{height:100px;width:160px;object-fit:cover;display:block}

/* ============================================================
   LANDING PAGE — GALLERY SECTION
   ============================================================ */
.gallery-section{padding:5rem 0;background:var(--white)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.gallery-item{border-radius:var(--radius-lg);overflow:hidden;position:relative;aspect-ratio:4/3;background:#eee}
.gallery-item--wide{grid-column:span 2;aspect-ratio:16/9}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(5,26,67,.85));color:#fff;font-size:.75rem;font-weight:600;padding:.5rem .75rem .625rem;letter-spacing:.03em}

/* Damage photo grid */
.damage-photo-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:.75rem;margin-bottom:1rem}
.damage-photo{border-radius:var(--radius-md);overflow:hidden;position:relative}
.damage-photo--main{grid-column:span 2}
.damage-photo img{width:100%;height:140px;object-fit:cover;display:block}
.damage-photo--main img{height:200px}
.damage-photo-badge{position:absolute;bottom:.5rem;left:.5rem;background:rgba(5,26,67,.85);color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .5rem;border-radius:4px;letter-spacing:.04em}
.damage-stat-row{display:flex;gap:.75rem}
.damage-stat-row .damage-stat-card{flex:1}

@media(max-width:768px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item--wide{grid-column:span 2}
  .damage-photo--main img{height:160px}
  .damage-photo img{height:110px}
}
@media(max-width:480px){
  .gallery-grid{grid-template-columns:1fr 1fr}
  .screen-photo-strip img{height:80px;min-width:120px}
  .findings-photo img{height:80px;width:120px}
}

/* ============================================================
   TEXT LEGIBILITY OVERHAUL
   Strong text-shadow + overlays so text is always readable
   over background images
============================================================ */

/* ALL text in screens gets a drop shadow for legibility */
.screen-title,
.screen-body,
.screen-note,
.eyebrow,
.welcome__heading,
.welcome__body,
.welcome__company,
.pillar-card__label,
.pillar-card__note,
.info-point__label,
.info-point__note,
.finding__area,
.finding__note,
.system-layer__label,
.system-layer__note,
.product-card__name,
.product-card__summary,
.product-card__features li,
.warranty-card__title,
.warranty-card li,
.process-item__label,
.process-item__note,
.financing-term__label,
.financing-term__value,
.financing-disclosure,
.nextstep__label,
.nextstep__note,
.connected-link__label,
.connected-link__note {
  text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.7);
}

/* Screen gets a dark gradient overlay so any BG image is dimmed */
.screen {
  position: relative;
  background: linear-gradient(160deg, rgba(5,26,67,0.97) 0%, rgba(2,13,42,0.95) 100%);
}

/* Welcome screen: stronger overlay on the bg image */
.welcome {
  position: relative;
  overflow: hidden;
}
.welcome::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(5,26,67,0.93) 0%, rgba(2,13,42,0.88) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Cards get more contrast */
.pillar-card {
  background: rgba(5,15,50,0.88);
  border: 1px solid rgba(26,111,222,0.25);
  backdrop-filter: blur(2px);
}
.info-point {
  background: rgba(5,15,50,0.85);
  border: 1px solid rgba(26,111,222,0.2);
  backdrop-filter: blur(2px);
}
.finding {
  background: rgba(5,15,50,0.88);
  border: 1px solid rgba(26,111,222,0.2);
}
.system-layers {
  background: rgba(5,15,50,0.9);
  border: 1px solid rgba(26,111,222,0.25);
}
.system-layer {
  border-bottom-color: rgba(26,111,222,0.15);
}
.system-layer:hover {
  background: rgba(26,111,222,0.08);
}
.product-card {
  background: rgba(5,15,55,0.88);
  border: 1px solid rgba(26,111,222,0.2);
  backdrop-filter: blur(2px);
}
.warranty-card {
  background: rgba(5,15,55,0.88);
  border: 1px solid rgba(26,111,222,0.2);
}
.process-item {
  border-bottom-color: rgba(26,111,222,0.12);
}
.financing-terms {
  background: rgba(26,111,222,0.08);
}
.financing-term {
  background: rgba(5,20,65,0.9);
  border-bottom: 1px solid rgba(26,111,222,0.1);
}
.nextsteps-list {
  background: rgba(5,15,55,0.88);
  border: 1px solid rgba(26,111,222,0.2);
}
.nextstep {
  border-bottom-color: rgba(26,111,222,0.12);
}

/* Screen body text: bump opacity to full white for legibility */
.screen-body { color: rgba(255,255,255,0.97); }
.pillar-card__note,
.info-point__note,
.finding__note,
.system-layer__note,
.product-card__summary,
.process-item__note,
.nextstep__note { color: rgba(255,255,255,0.95); }

/* Logo in presentation header - update for SVG/PNG */
.app__brand img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(74,158,255,0.4));
}

/* Welcome logo */
.welcome__logo-img {
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 20px rgba(26,111,222,0.7));
}

/* Screen photo strips: stronger caption */
.screen-photo-strip img {
  border: 1.5px solid rgba(26,111,222,0.35);
}
.findings-photo {
  border: 2px solid rgba(26,111,222,0.4);
}

/* ============================================================
   CINEMATIC TITLE PAGE
============================================================ */
.title-page {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #020d2a;
}

/* Background photo */
.tp-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  animation: tp-ken-burns 20s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes tp-ken-burns {
  from { transform: scale(1);   background-position: center 35%; }
  to   { transform: scale(1.06); background-position: center 45%; }
}

/* Lightning texture overlay */
.tp-lightning {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(26,90,200,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(60,120,255,0.12) 0%, transparent 60%);
  pointer-events: none;
  animation: tp-pulse 4s ease-in-out infinite;
}
@keyframes tp-pulse {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1;   }
}

/* Deep dark gradient overlay — strong at bottom, lighter at top-right */
.tp-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(2,13,42,0.92) 0%,
      rgba(5,20,65,0.85) 35%,
      rgba(2,13,42,0.72) 65%,
      rgba(2,13,42,0.95) 100%
    );
  pointer-events: none;
}

/* Content layer */
.tp-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3.5rem);
  max-width: 760px;
}

/* Red accent bar — matches brand slides */
.tp-accent-bar {
  width: 44px;
  height: 3.5px;
  background: #c8102e;
  border-radius: 2px;
  margin-bottom: 1.5rem;
}

/* Logo */
.tp-logo-wrap {
  margin-bottom: 1rem;
}
.tp-logo {
  width: clamp(64px, 10vw, 100px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(74,158,255,0.65)) drop-shadow(0 0 8px rgba(26,111,222,0.4));
  animation: tp-logo-glow 3s ease-in-out infinite;
}
@keyframes tp-logo-glow {
  0%,100% { filter: drop-shadow(0 0 18px rgba(74,158,255,0.5)) drop-shadow(0 0 6px rgba(26,111,222,0.35)); }
  50%      { filter: drop-shadow(0 0 32px rgba(74,158,255,0.85)) drop-shadow(0 0 14px rgba(26,111,222,0.65)); }
}

/* Company name */
.tp-company {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1a6fde;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px rgba(26,111,222,0.5);
}

/* Slash decorative divider */
.tp-slash {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgba(200,16,46,0.7);
  margin-bottom: 1rem;
  font-family: monospace;
}

/* Main headline */
.tp-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  color: #ffffff;
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 4px 20px rgba(0,0,0,0.7),
    0 0 40px rgba(2,13,42,0.5);
}

/* Tagline */
.tp-tagline {
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  color:rgba(255,255,255,.88);
  letter-spacing: 0.04em;
  margin-bottom: 1.75rem;
  font-style: italic;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

/* Appointment info card */
.tp-appt-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(26,111,222,0.25);
  border-left: 3px solid #1a6fde;
  border-radius: 0 8px 8px 0;
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.75rem;
  max-width: 420px;
  backdrop-filter: blur(4px);
}
.tp-appt-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}
.tp-appt-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:rgba(255,255,255,.70);
  min-width: 80px;
  flex-shrink: 0;
}
.tp-appt-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* Footer row: rep info + CTA button */
.tp-footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Rep info */
.tp-rep {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.tp-rep-name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
.tp-rep-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:rgba(255,255,255,.95);
}
.tp-rep-phone {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 700;
  color: #1a6fde;
  text-decoration: none;
  margin-top: 0.25rem;
  text-shadow: 0 0 16px rgba(26,111,222,0.5);
  transition: color 0.2s;
}
.tp-rep-phone:hover { color: #4a9eff; }

/* Begin CTA button */
.tp-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #c8102e;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.875rem 1.75rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(200,16,46,0.4);
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  touch-action: manipulation;
}
.tp-cta:hover {
  background: #a30d24;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(200,16,46,0.55);
}
.tp-cta:active { transform: translateY(0); }
.tp-cta-text {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tp-cta-arrow {
  font-size: 1.1rem;
  transition: transform 0.2s;
}
.tp-cta:hover .tp-cta-arrow { transform: translateX(4px); }

/* Right-side decorative element: website URL watermark */
.title-page::after {
  content: 'airoofing.net';
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.2);
  text-transform: lowercase;
  z-index: 2;
  pointer-events: none;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .tp-content { padding: 1rem 1.25rem; justify-content: flex-start; padding-top: 1.25rem; }
  .tp-accent-bar { margin-bottom: 0.875rem; }
  .tp-logo-wrap { margin-bottom: 0.625rem; }
  .tp-logo { width: 56px; }
  .tp-company { font-size: 0.65rem; margin-bottom: 0.375rem; }
  .tp-slash { margin-bottom: 0.625rem; font-size: 0.5rem; }
  .tp-headline { font-size: clamp(1.4rem, 6vw, 2rem); margin-bottom: 0.5rem; }
  .tp-tagline { font-size: 0.82rem; margin-bottom: 1rem; }
  .tp-appt-card { max-width: 100%; margin-bottom: 1rem; padding: 0.625rem 0.875rem; }
  .tp-footer-row { flex-direction: column; align-items: flex-start; gap: 0.875rem; margin-top: auto; padding-top: 0.5rem; }
  .tp-cta { width: 100%; justify-content: center; padding: 0.875rem 1.25rem; }
  .tp-rep-name { font-size: 1rem; }
}