/* ArchitecturalWrapsFlorida — local draft CSS. Prep only. */
:root{
  --navy:#0F192D; --navy-2:#172234; --cream:#FBF8F3; --gold:#C6A15C;
  --gold-eye:#A5783F; --border:#E2D8C8; --muted:#5A6170; --focus:#1A5CFF;
  --max:1100px; --radius:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--navy-2);background:var(--cream);line-height:1.55;font-size:1rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-eye);font-weight:600;text-decoration:none}
a:hover,a:focus-visible{color:var(--navy);text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,.ba-slider__range:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:100}
.skip-link:focus{left:0}
.wrap{width:min(var(--max),calc(100% - 2rem));margin-inline:auto}
.site-header{background:var(--navy);color:#fff;padding:.85rem 0}
.site-header a{color:#fff}
.site-header a:hover,.site-header a:focus-visible{color:var(--gold)}
.nav-inner{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand img{height:56px;width:auto;max-width:min(280px,70vw);object-fit:contain}
@media(min-width:900px){.brand img{height:72px;max-width:340px}}
.brand-text{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;opacity:.85;max-width:14rem}
.nav{display:flex;flex-wrap:wrap;gap:.65rem 1rem;font-size:.92rem}
.nav a{font-weight:500}
.draft-banner{background:#fff3cd;border-bottom:2px solid var(--gold);padding:.65rem 0;font-size:.9rem;font-weight:600}
.hero{padding:2.5rem 0 2rem}
.hero h1{font-size:clamp(1.6rem,3.2vw,2.25rem);line-height:1.2;margin:0 0 .75rem;color:var(--navy)}
.lede{font-size:1.1rem;max-width:46rem;margin:0 0 1.25rem}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:700;color:var(--gold-eye);margin:0 0 .5rem}
.tmc-callout{background:#fff;border:1.5px solid var(--gold);border-radius:var(--radius);padding:1rem 1.15rem;margin:1.25rem 0}
.tmc-callout strong{color:var(--navy)}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.1rem;border-radius:4px;
  background:var(--navy);color:#fff!important;font-weight:600;text-decoration:none!important}
.btn:hover,.btn:focus-visible{background:var(--navy-2);color:var(--gold)!important}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}
.section{padding:2rem 0;border-top:1px solid var(--border)}
.section h2{margin:0 0 .85rem;font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--navy)}
.grid-3{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:720px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.grid-4{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}
.card h3{margin:.2rem 0 .5rem;font-size:1.05rem}
.city-list{display:flex;flex-wrap:wrap;gap:.5rem .85rem;list-style:none;padding:0;margin:0}
.city-list a{background:#fff;border:1px solid var(--border);padding:.35rem .7rem;border-radius:999px;font-size:.92rem}
.placeholder-viz{background:#d9d4cb;border:2px dashed #9a9286;border-radius:var(--radius);
  min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1rem;color:var(--navy);font-weight:600;font-size:.95rem}
.viz-caption{font-size:.85rem;color:var(--muted);margin:.4rem 0 0;font-style:italic}
.site-footer{background:var(--navy);color:#d9dde6;padding:2rem 0;margin-top:2rem;font-size:.92rem}
.site-footer a{color:var(--gold)}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:1.25rem}
@media(min-width:720px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.muted{color:var(--muted)}
.pending{background:#fff;border-left:4px solid var(--gold);padding:.65rem .9rem;margin:1rem 0;font-size:.92rem}
.badge-slot{border:2px dashed #9a9286;border-radius:var(--radius);padding:1rem;max-width:280px;
  background:#fff;font-size:.85rem;color:var(--muted)}
ul.clean{padding-left:1.2rem}
.faq details{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;margin:.5rem 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy)}

/* Before/after slider */
.ba-slider{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/10;
  overflow:hidden;border-radius:var(--radius);background:#cfc9be;touch-action:none}
.ba-slider__after,.ba-slider__before{position:absolute;inset:0}
.ba-slider__after{z-index:1}
.ba-slider__before{z-index:2;width:50%;overflow:hidden;border-right:0}
.ba-slider__frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:1rem;text-align:center;font-weight:700;letter-spacing:.02em;color:#fff}
.ba-slider__after .ba-slider__frame{background:#7a756c}
.ba-slider__before .ba-slider__frame{background:#9a948a;width:var(--ba-full,1000px);max-width:none;justify-content:flex-start;padding-left:1.5rem}
.ba-slider__img{width:100%;height:100%;object-fit:cover;display:block}
.ba-slider__before .ba-slider__img{width:var(--ba-full,1000px);max-width:none;height:100%;object-fit:cover}
.ba-slider__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--gold);
  transform:translateX(-50%);z-index:3;pointer-events:none;overflow:visible}

.ba-slider__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:5}
.ba-slider__range:focus-visible{opacity:.08;background:var(--focus)}
.ba-slider__hint{font-size:.85rem;color:var(--muted);margin:.5rem 0 0;text-align:center}

/* Benefits / comparison layout (Social fills copy) */
.compare-band{background:#fff;border:1.5px solid var(--gold);border-radius:var(--radius);padding:1.25rem 1.35rem;margin:1.25rem 0}
.compare-band .viewpoint{font-size:.95rem;color:var(--muted);margin:.35rem 0 1rem;max-width:42rem}
.compare-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:800px){.compare-grid{grid-template-columns:1fr 1fr}}
.compare-card{border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;background:var(--cream)}
.compare-card h3{margin:.15rem 0 .65rem;font-size:1.05rem;color:var(--navy)}
.compare-card .slot{min-height:3.5rem;border:1px dashed #b7b0a4;border-radius:4px;padding:.65rem .75rem;
  background:#fff;color:var(--muted);font-size:.9rem;margin:.4rem 0}
.compare-table-wrap{overflow-x:auto;margin:1rem 0;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;min-width:520px}
.compare-table th,.compare-table td{border:1px solid var(--border);padding:.65rem .75rem;text-align:left;vertical-align:top}
.compare-table th{background:var(--navy);color:#fff;font-weight:600}
.compare-table th:first-child,.compare-table td:first-child{font-weight:600;color:var(--navy);background:#f3efe6;width:28%}
.compare-table td .slot{min-height:2.4rem;margin:0;border:1px dashed #c5beB2;padding:.45rem .55rem;background:#fafafa;color:var(--muted);font-size:.85rem}
.compare-note{font-size:.88rem;color:var(--muted);margin:.75rem 0 0;max-width:48rem}
.benefits-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.65rem}
@media(min-width:720px){.benefits-list{grid-template-columns:1fr 1fr}}
.benefits-list li{background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem}
.benefits-list li strong{display:block;color:var(--navy);margin-bottom:.25rem}
.benefits-list .slot{margin-top:.35rem}
.guardrail{font-size:.85rem;border-left:3px solid var(--gold);padding:.5rem .75rem;margin:.75rem 0;background:#fff8e8;color:var(--navy-2)}

.ba-pair--hold .ba-slider__frame small{display:block;margin-top:.5rem;font-weight:500;opacity:.9;font-size:.8rem}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;margin:1rem 0}
.prose th,.prose td{border:1px solid var(--border);padding:.65rem .75rem;text-align:left;vertical-align:top}
.prose th{background:var(--navy);color:#fff}

/* 3M DI-NOC product logo — native 204x32; do not upscale excessively */
.dinoc-product-logo{display:inline-block;max-width:204px;width:auto;height:auto;
  max-height:32px;object-fit:contain;vertical-align:middle}
@media(max-width:600px){.dinoc-product-logo{max-width:160px;max-height:28px}}
.marks-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin:1rem 0}
.marks-row .brand-lockup{height:56px;width:auto;max-width:min(280px,70vw);object-fit:contain}
@media(min-width:900px){.marks-row .brand-lockup{height:72px}}






/* Social + final QA responsiveness (390 / 768) */
.brand-block{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;min-width:0}
.brand-logo-link{display:inline-block;text-decoration:none;border:0;line-height:0}
.brand-logo-link:hover,.brand-logo-link:focus-visible{text-decoration:none}
.brand-lockup{height:56px;width:auto;max-width:min(300px,70vw);object-fit:contain}
@media(min-width:1100px){.brand-lockup{height:80px;max-width:min(400px,42vw)}}
.brand-owner{margin:0;font-size:.75rem;letter-spacing:.03em;color:#cfd3dc;font-weight:500}

.nav-inner{display:flex;flex-wrap:nowrap;align-items:center;gap:1rem;justify-content:space-between}
.nav-toggle{
  display:none;appearance:none;background:transparent;border:1.5px solid rgba(255,255,255,.55);
  color:#fff;border-radius:4px;padding:.45rem .7rem;font-size:.85rem;font-weight:600;cursor:pointer;
}
.nav-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.nav{display:flex;flex-wrap:wrap;gap:.55rem 1rem;font-size:.9rem;align-items:center}
.nav a{font-weight:500;white-space:nowrap}
.nav-areas{position:relative}
.nav-areas > summary{
  list-style:none;cursor:pointer;font-weight:500;color:#fff;padding:.15rem 0;
}
.nav-areas > summary::-webkit-details-marker{display:none}
.nav-areas > summary::after{content:" ▾";font-size:.75em;opacity:.85}
.nav-areas[open] > summary::after{content:" ▴"}
.nav-areas-panel{
  position:absolute;right:0;top:calc(100% + .4rem);min-width:12rem;z-index:40;
  background:#fff;color:var(--navy-2);border:1px solid var(--border);border-radius:6px;
  padding:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:grid;gap:.15rem;
}
.nav-areas-panel a{color:var(--navy-2);display:block;padding:.35rem .5rem;border-radius:4px;white-space:nowrap}
.nav-areas-panel a:hover,.nav-areas-panel a:focus-visible{background:var(--cream);color:var(--navy)}

/* Collapse primary nav below ~1100 so logo never overlaps Home (768 gap fixed) */
@media(max-width:1099px){
  .nav-toggle{display:inline-flex;align-items:center;gap:.35rem}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--navy);border-top:1px solid rgba(255,255,255,.12);
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    padding:.75rem 1rem 1rem;gap:.15rem;z-index:50;
  }
  .site-header{position:relative}
  .nav.is-open{display:flex}
  .nav a,.nav-areas > summary{
    white-space:normal;padding:.65rem .4rem;border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav-areas-panel{
    position:static;box-shadow:none;background:rgba(255,255,255,.06);border:0;
    margin:.25rem 0 .5rem;padding:.25rem .25rem .25rem .75rem;
  }
  .nav-areas-panel a{color:#fff;border:0;padding:.45rem .4rem}
  .brand-lockup{height:48px;max-width:min(240px,62vw)}
}
@media(min-width:1100px){
  .nav-toggle{display:none}
  .nav{display:flex}
}

/* Portrait slider: full content width when narrow; capped on desktop */
.ba-slider--portrait{width:100%;max-width:100%;margin-inline:auto;aspect-ratio:3/4;max-height:none}
@media(min-width:768px){
  .ba-slider--portrait{max-width:min(420px,100%);max-height:min(560px,70vh)}
}
.ba-pair{position:relative;margin:1.25rem 0 1.75rem}
/* Labels live INSIDE .ba-slider (overflow:hidden) — corner insets only; never translate outside */
.ba-slider__label{
  position:absolute;z-index:4;background:var(--navy);color:var(--cream);
  padding:3px 8px;font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1.2;
  max-width:calc(50% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  pointer-events:none;border-radius:2px;
}
.ba-slider__label--before{top:8px;left:8px;right:auto;transform:none}
.ba-slider__label--after{top:8px;right:8px;left:auto;transform:none}
/* Visible knob centered on handle; inset clamp in JS keeps full circle inside frame */
.ba-slider__handle{overflow:visible}
.ba-slider__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;max-width:36px;max-height:36px;font-size:14px;line-height:1;
  box-sizing:border-box;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;border:2px solid var(--gold);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
@media(max-width:600px){
  .ba-slider__knob{width:22px;height:22px;max-width:22px;max-height:22px;font-size:11px;border-width:1.5px}
}
.ba-slider__range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5;
  /* enlarge touch target without enlarging visible knob */
  touch-action:none;
}
.ba-slider{min-height:44px}