/* North Shore Supply Company — production stylesheet
   Base rules below are carried over unchanged from the Claude Design export's
   <helmet><style> block. Everything else here replaces behaviour that the
   Claude Design "dc" runtime used to provide via JS (style-hover / style-focus
   attributes and sc-if conditional rendering) with plain CSS. */

html{scroll-behavior:smooth;scroll-padding-top:118px}
body{margin:0;background:#FAF9F6;color:#26282B;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#1C8E9C;text-decoration:none}
a:hover{color:#0F6B77;text-decoration:underline}
input,select{font-family:inherit}

/* Screen-reader-only labels (added for real <label> association on the
   Start an Order contact fields; no visual change). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Visible keyboard focus state for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #2CB4C4;
  outline-offset: 2px;
}

/* ---------- Header navigation ---------- */
.nav-desktop{display:none;align-items:center;gap:26px;flex-wrap:wrap}
.menu-toggle-btn{display:none;width:48px;height:48px;background:transparent;border:2px solid #D9DEE3;border-radius:8px;color:#071831;font-size:20px;cursor:pointer;align-items:center;justify-content:center}
@media (min-width:1080px){
  .nav-desktop{display:flex}
}
@media (max-width:1079.98px){
  .menu-toggle-btn{display:flex}
}

.mobile-nav{display:none}
.mobile-nav.open{display:flex}
@media (min-width:1080px){
  .mobile-nav.open{display:none}
}

.mobile-sticky-bar{display:none}
@media (max-width:1079.98px){
  .mobile-sticky-bar{display:flex}
}

/* ---------- Hover states (were style-hover in the source) ---------- */
.nav-cta:hover,
.hero-cta-primary:hover,
.online-cta:hover,
.about-cta:hover,
.timeline-cta:hover,
.mobile-nav-cta:hover{background:#0F2E4F}

.hero-cta-secondary:hover,
.canadian-cta:hover,
.catalogue-cta:hover{background:#071831;color:#fff}

.final-cta:hover{background:#5FD3DE}

.pathway-card:hover{border-color:#2CB4C4}

.file-drop-label:hover{border-color:#2CB4C4}

.wizard-next-btn:hover{background:#0F2E4F}

.product-tile .tile-bg{transition:transform .35s ease}
.product-tile:hover .tile-bg{transform:scale(1.035)}

.audience-tile .tile-img{transition:transform .35s ease}
.audience-tile:hover .tile-img{transform:scale(1.03)}

/* ---------- Start an Order wizard ---------- */
.wiz-step{display:none}
.wiz-step.active{display:block}

.progress-seg{flex:1;height:6px;border-radius:4px;background:#E4E1D9}
.progress-seg.filled{background:#071831}

.choice-btn{border:2px solid #E4E1D9;background:#FFFFFF;border-radius:10px;padding:18px;min-height:48px;font-size:15px;font-weight:600;color:#071831;cursor:pointer}
.choice-btn.selected{border-color:#071831;background:#EAF3F4}

.wizard-next-btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- FAQ accordion ---------- */
.faq-answer{display:none}
.faq-answer.open{display:block}