/* Independently authored adaptations of patterns researched on 21st.dev. */
:root{--red:#ef5145}body{font-family:"Segoe UI",Arial,sans-serif}h1,h2,h3{font-family:"Segoe UI",Arial,sans-serif}
.header-nav{gap:8px;padding:10px 3%;background:#121b20f2;box-shadow:0 8px 28px #0002;border-color:#ffffff12}.header-nav a{padding:10px 14px;border:1px solid transparent;border-radius:9px;font-size:12px;font-weight:600}.header-nav a:hover{background:#ffffff09;border-color:#ffffff1a}.header-nav a[aria-current]{background:#ef514519;color:#ffb2a8;border-color:#ef514540}.header-nav a[href="#request"]{background:#eb5145;color:#fff;border-color:#eb5145}
.hero{min-height:720px}.hero-copy{padding-top:70px;padding-bottom:50px}.hero h1{font-weight:550;letter-spacing:-.065em;font-size:clamp(60px,7.5vw,116px);line-height:.99}.hero h1 em{color:#ff796b}.hero-description{font-size:18px;line-height:1.7;max-width:560px}.scan-grid{opacity:.45}
.button{border-radius:12px;font-weight:650;min-height:56px;box-shadow:0 7px 24px #0002}.button.red{background:linear-gradient(135deg,#f86855,#d83b32);border-color:#ff9d8240}.button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #ef514525}.shimmer-ring{display:none}
.section-heading h2{font-weight:550;letter-spacing:-.05em}.section-heading p{line-height:1.75;font-size:16px}.section{padding-top:88px;padding-bottom:88px}
.building-panel,.system-detail{border-radius:22px;border-color:#ffffff20}.building-panel{background:linear-gradient(145deg,#1e292e,#121b20)}.system-detail{background:linear-gradient(145deg,#342725,#182328);padding:36px}.shine-border{display:none}.system-detail h3{font-weight:550;font-size:38px}.system-select{padding:6px;background:#0d1519;border-radius:14px;gap:5px}.system-select .system-tab{border:0;border-radius:10px;background:transparent}.system-select .system-tab.active{background:#f0f1eb;color:#283a41;box-shadow:0 4px 14px #0003}.system-select .system-tab:hover:not(.active){background:#ffffff0c}
.service-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}.service-card{grid-column:span 2;position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffffff22;border-radius:22px;backdrop-filter:none;background:#17242bf2;padding:32px;min-height:295px}.service-card:first-child,.service-card:nth-child(2){grid-column:span 3}.service-card:first-child{background:linear-gradient(130deg,#50312b,#1b282e 75%)}.service-card:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at var(--px,50%) var(--py,50%),#ff8c6230,transparent 75%);opacity:0;transition:opacity .2s}.service-card:hover:before{opacity:1}.service-card:hover{border-color:#f78c6c77}.service-card h3{max-width:450px}.service-action{border-radius:10px;background:#ffffff08;color:#ffd4cc}.service-action span{transition:transform .2s}.service-action:hover span{transform:translate(2px,-2px)}
.service-symbol{display:grid;place-items:center;width:46px;height:46px;border:1px solid #fa85634d;border-radius:13px;background:#f77b5310;margin-bottom:24px;color:#ffac92}.service-symbol svg{width:24px;height:24px}
.guide-panel{background:linear-gradient(140deg,#213138,#17242a);border:1px solid #ffffff20;border-radius:22px;padding:36px;box-shadow:0 20px 60px #0002}.guide-panel select{border-radius:10px;padding:16px;border-color:#ffffff33}.guide-panel #answer{padding:20px 0}.project-card{border-radius:20px;overflow:hidden;transition:border-color .2s,transform .2s}.project-card:hover{border-color:#f2796177;transform:translateY(-3px)}.project-content{padding:32px}.project-content h3{font-weight:550}.partner-card{border-radius:18px}.license-image{border-radius:14px;padding:12px;box-shadow:0 12px 40px #0004}.film-player video{border-radius:20px}
.request-form{max-width:1040px;margin:0 auto 65px;padding:36px;border:1px solid #ffffff26;border-radius:24px;background:linear-gradient(145deg,#2a3b42,#1d2c33);box-shadow:0 24px 60px #0002}.request-form h3{font-weight:600;font-size:30px}.request-form>p{font-size:15px}.form-fields label{font-size:14px;font-weight:500}.form-fields input,.form-fields textarea{border:1px solid #ffffff28;border-radius:10px;background:#101c234d;font-size:16px;transition:border-color .2s,box-shadow .2s}.form-fields input:focus,.form-fields textarea:focus{outline:0;border-color:#ff8d78;box-shadow:0 0 0 3px #f8786220}.request-form .button{background:#f36654;color:#fff}.contact-hub{margin-bottom:-88px}
@media(max-width:1000px){.service-card{grid-column:span 3}.service-card:last-child{grid-column:1/-1}.header-nav{gap:4px}.header-nav a{font-size:11px;padding:9px 10px}}
@media(max-width:700px){.section{padding-top:56px;padding-bottom:56px}.header-nav{gap:3px;padding:7px 10px}.header-nav a{font-size:10px;padding:7px 8px}.hero{min-height:620px}.hero-copy{padding-top:50px}.hero h1{font-size:58px}.hero-description{font-size:16px}.service-list{grid-template-columns:1fr}.service-card,.service-card:first-child,.service-card:nth-child(2){grid-column:auto;min-height:0;padding:26px}.system-detail{padding:26px}.system-detail h3{font-size:30px}.system-select .system-tab{font-size:11px}.request-form{padding:24px 18px;border-radius:18px}.request-form h3{font-size:25px}.guide-panel{padding:24px}.contact-hub{margin-bottom:-56px}.project-content{padding:24px}}
@media(prefers-reduced-motion:reduce){.service-card:before{display:none}.button:hover,.project-card:hover{transform:none}}

/* Consistent navigation states and section heading scale. */
.header-nav{transition:background .25s,color .25s,box-shadow .25s}
.header-nav a[href="#request"]{background:transparent;color:#c5cacc;border-color:transparent}
.header-nav a[href="#request"]:hover{background:#ffffff09;border-color:#ffffff1a}
.header-nav a[aria-current],.header-nav a[href="#request"][aria-current]{background:#ef514519;color:#ffb2a8;border-color:#ef514540}
.header-nav.nav-light{background:#e9eeebf7;border-bottom-color:#26383e22;box-shadow:0 6px 22px #14272e14}
.header-nav.nav-light a{color:#34464d;background:transparent;border-color:transparent}
.header-nav.nav-light a:hover{background:#dce3df;border-color:#34464d18}
.header-nav.nav-light a[aria-current]{color:#9c2925;background:#c4453510;border-color:#c4453533}
:root{--section-title-size:clamp(36px,4.3vw,64px)}
.section-heading h2,.services .section-heading h2,.projects .section-heading h2,.partners .section-heading h2,.film h2,.guide .section-heading h2,.photo-story h2,.contacts>h2{font-size:var(--section-title-size);font-weight:550;line-height:1.08;letter-spacing:-.05em}
@media(max-width:700px){:root{--section-title-size:37px}}
.director-socials{display:flex;gap:12px;align-items:center;margin-left:8px}.director-socials a,.director-socials .social-placeholder{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;transition:transform .2s,filter .2s}.director-socials img{display:block;width:38px;height:38px;object-fit:contain}.director-socials a:hover,.director-socials a:focus-visible{transform:scale(1.16);filter:drop-shadow(0 4px 5px #0002)}
@media(prefers-reduced-motion:reduce){.director-socials a:hover{transform:none}}

.brand-live canvas{display:block;width:100%;height:auto}.site-header{background:#f3f2f2}.contact-hub{background:#f3f2f2}

.header-top .brand{width:360px;max-width:90%;background:transparent}.contact-hub-brand{width:260px;max-width:100%;background:transparent}.brand-live canvas{background:transparent}.contact-hub-top{grid-template-columns:270px minmax(0,1fr)}@media(max-width:700px){.header-top .brand{width:290px}.contact-hub-top{grid-template-columns:1fr}.contact-hub-brand{width:250px}}

.projects-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.projects-grid .project-content h3{font-size:26px;line-height:1.2}.projects-grid .project-brand{height:170px}.projects-grid .project-brand img{max-height:76px;max-width:85%;width:auto;height:auto}@media(max-width:1100px){.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.projects-grid .project-card:last-child:nth-child(odd){grid-column:1/-1}}@media(max-width:700px){.projects-grid{grid-template-columns:1fr}.projects-grid .project-card:last-child:nth-child(odd){grid-column:auto}.projects-grid .project-content h3{font-size:24px}}

/* Expandable fire audit description */
.service-list .service-card .audit-details,
.service-list .service-card .audit-details:hover{min-height:0;padding:0;margin:0 0 22px;border:0;border-radius:0;background:transparent;box-shadow:none;grid-column:auto}
.service-list .audit-details summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border:1px solid #f34b4077;border-radius:10px;background:#ffffff08;color:#ffd4cc;font:600 14px/1.4 "Segoe UI",Arial,sans-serif;cursor:pointer;list-style:none}
.service-list .audit-details summary:hover{background:#c63229;color:#fff}
.audit-details .audit-label-close{display:none}
.audit-details[open] .audit-label-open{display:none}
.audit-details[open] .audit-label-close{display:inline}
.audit-chevron{flex-shrink:0;font-size:22px;line-height:1;transition:transform .2s}
.audit-details[open] .audit-chevron{transform:rotate(180deg)}
.service-list .service-card .audit-description p{margin:18px 0 0;color:#c8d2d6;font:400 16px/1.7 "Segoe UI",Arial,sans-serif;max-width:none}
.audit-description strong{font-weight:700;color:#fff}
.audit-description a{color:#ffd4cc;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.audit-description a:hover{color:#fff}
@media(max-width:700px){.service-list .service-card .audit-description p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.audit-chevron{transition:none}}
/* Background surfaces for the six supporting sections. */
.film.section,
.guide.section,
.projects.section,
.partners.section,
.documents.section,
.contacts.section{
  background-color:#172329;
  background-image:
    radial-gradient(ellipse at 0% 0%,#ef51451a,transparent 52%),
    radial-gradient(ellipse at 100% 85%,#638c9d20,transparent 58%),
    linear-gradient(#ffffff04 1px,transparent 1px),
    linear-gradient(90deg,#ffffff04 1px,transparent 1px),
    linear-gradient(135deg,#1c292f,#121c22);
  background-size:auto,auto,64px 64px,64px 64px,auto;
  box-shadow:inset 0 1px #ffffff0d,inset 0 -1px #00000024;
}
.guide.section,.partners.section,.contacts.section{
  background-position:100% 0,0 100%,32px 32px,32px 32px,0 0;
}
@media(max-width:700px){
  .film.section,.guide.section,.projects.section,.partners.section,.documents.section,.contacts.section{
    background-size:auto,auto,48px 48px,48px 48px,auto;
  }
}

/* Rounded framing for the header, navigation and contact panel. */
.site-header{
  margin:16px 16px 12px;
  border-radius:32px;
  box-shadow:0 12px 32px #00000018;
}
.header-nav{
  top:8px;
  margin:0 16px 16px;
  border:1px solid #ffffff14;
  border-radius:28px;
}
.header-nav a{border-radius:999px}
.header-nav.nav-light{border-color:#26383e22}
.contact-hub{
  margin-inline:0;
  margin-bottom:0;
  border-radius:36px;
  padding:40px clamp(22px,3vw,48px) 30px;
  box-shadow:0 18px 48px #00000020;
}
.contacts.section{padding-bottom:32px}
@media(max-width:700px){
  .site-header{margin:10px 10px 8px;border-radius:24px}
  .header-nav{top:6px;margin:0 10px 10px;border-radius:20px}
  .contact-hub{border-radius:26px;padding:30px 22px 26px}
  .contacts.section{padding-bottom:20px}
}

/* Match the hero title to the shared section heading scale. */
.hero h1{font-size:var(--section-title-size);line-height:1.08;letter-spacing:-.05em}

/* Larger navigation links distributed across the full panel. */
.header-nav{display:flex;justify-content:space-between;gap:6px;padding:10px 14px}
.header-nav a{flex:1 1 auto;text-align:center;font-size:16px;line-height:1.4;padding:12px 10px}
@media(max-width:1200px){
  .header-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .header-nav a{font-size:15px;white-space:normal}
}
@media(max-width:700px){
  .header-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:8px}
  .header-nav a{font-size:13px;padding:9px 6px}
}

/* Compact mobile navigation; desktop links keep their existing layout. */
.section-links { display: contents; }
.header-nav .mobile-nav-toggle, .header-nav .mobile-nav-cta { display: none; }
@media (max-width: 700px) {
  .header-nav.mobile-nav-ready { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; padding: 5px 8px; min-height: 56px; box-sizing: border-box; overflow: visible; }
  .mobile-nav-ready .mobile-nav-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 14px; background: transparent; color: #edf2f3; font: 600 14px/1.3 'Segoe UI',Arial,sans-serif; cursor: pointer; }
  .mobile-nav-ready.nav-light .mobile-nav-toggle { color: #34464d; }
  .header-nav.mobile-nav-ready .mobile-nav-cta { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 8px 12px; border-radius: 14px; background: #c83b32; color: white; font-size: 13px; }
  .mobile-nav-ready .section-links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: calc(100dvh - 82px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid #ffffff24; border-radius: 18px; background: #152027; box-shadow: 0 16px 36px #0005; }
  .mobile-nav-ready.mobile-nav-open .section-links { display: flex; flex-direction: column; gap: 2px; }
  .mobile-nav-ready .section-links a { display: block; flex: none; text-align: left; min-height: 44px; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
  .mobile-nav-ready.nav-light .section-links { background: #edf1ee; border-color: #26383e22; }
  .mobile-nav-toggle:focus-visible, .mobile-nav-cta:focus-visible { outline: 2px solid #ff9f89; outline-offset: 2px; }
}
