/* =========================================================
   Multichoice Outdoors — Design System
   Brand-matched to the MCO logo: blue peaks (#2f93c9 / #5fbef0)
   + charcoal-grey wordmark (#434345), geometric Montserrat type.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&family=Manrope:wght@300..700&display=swap');

:root {
  /* Palette — derived from the MCO logo (blue peaks + charcoal wordmark) */
  --ink:        #262b30;   /* cool charcoal slate — dark sections & strong text */
  --ink-soft:   #4a5158;   /* relates to logo wordmark grey #434345 */
  --bone:       #f4f7f9;   /* cool light paper */
  --bone-2:     #e7eef4;
  --clay:       #2f93c9;   /* PRIMARY brand blue (steel-blue peak) */
  --clay-deep:  #1f7bad;   /* darker blue for hovers */
  --sky:        #5fbef0;   /* light sky-blue accent (lighter peak) */
  --sage:       #5f8aa8;   /* muted blue-grey */
  --sage-soft:  #97b4c8;
  --line:       rgba(38,43,48,.12);
  --line-light: rgba(244,247,249,.16);

  /* Type — geometric sans to match the logo wordmark */
  --display: 'Montserrat', system-ui, 'Segoe UI', sans-serif;
  --body: 'Manrope', system-ui, sans-serif;

  /* Spacing rhythm */
  --container: 1240px;
  --radius: 18px;
  --radius-lg: 28px;

  --shadow-soft: 0 24px 60px -28px rgba(38,43,48,.40);
  --shadow-card: 0 18px 50px -30px rgba(38,43,48,.48);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  background: var(--bone);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--clay); color: var(--bone); }

/* ---------- Typography ---------- */
.font-display { font-family: var(--display); }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; margin: 0; }
.eyebrow {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--clay);
}
.eyebrow--light { color: var(--clay); }

.lead { font-size: 1.18rem; color: var(--ink-soft); }

/* Fluid display sizes */
.h-display { font-size: clamp(2.6rem, 6.5vw, 5.4rem); }
.h-1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.h-2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }

.italic-accent { font-style: italic; color: var(--clay); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(52px, 7vw, 96px) 0; }
.section--tight { padding: clamp(56px, 8vw, 100px) 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--body); font-weight: 600; font-size: .98rem;
  padding: 1.05em 1.7em; border-radius: 100px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .4s var(--ease);
  will-change: transform;
  letter-spacing: .01em;
}
.btn svg { transition: transform .4s var(--ease); }
.btn:hover { transform: translateY(-3px); }
.btn--primary { background: var(--clay); color: #fff; box-shadow: 0 16px 34px -16px rgba(47,147,201,.8); }
.btn--primary:hover { background: var(--clay-deep); box-shadow: 0 22px 40px -16px rgba(31,123,173,.85); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--dark { background: var(--ink); color: var(--bone); }
.btn--dark:hover { background: var(--ink-soft); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: var(--bone); color: var(--ink); }
.btn--outline-light { border-color: var(--line-light); color: var(--bone); }
.btn--outline-light:hover { background: rgba(244,247,249,.08); }
/* a button that stays put (no hover lift / no magnetic) */
.btn--still:hover { transform: none; }
.btn--still:hover svg { transform: none; }
/* success popup with animated green tick */
.tick-pop { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px;
  background: rgba(16,22,26,.46); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.tick-pop.show { opacity: 1; pointer-events: auto; }
.tick-pop__card { background: #fff; border-radius: 24px; padding: 40px 44px; text-align: center; max-width: 380px; cursor: pointer;
  box-shadow: 0 40px 90px -30px rgba(16,22,26,.55); transform: scale(.9) translateY(10px); transition: transform .45s var(--ease); }
.tick-pop.show .tick-pop__card { transform: none; }
.tick-pop__badge { width: 78px; height: 78px; border-radius: 50%; background: #1faa59; display: grid; place-items: center;
  margin: 0 auto 20px; box-shadow: 0 12px 26px -6px rgba(31,170,89,.55); transform: scale(0); animation: tickIn .5s var(--ease) .12s forwards; }
.tick-pop__badge svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26; animation: tickDraw .42s var(--ease) .42s forwards; }
.tick-pop__title { font-family: var(--display); font-weight: 700; font-size: 1.45rem; color: var(--ink); }
.tick-pop__msg { color: var(--ink-soft); margin-top: 8px; font-size: .98rem; }
@keyframes tickIn { 0% { transform: scale(0); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes tickDraw { to { stroke-dashoffset: 0; } }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding: 22px 0;
}
.site-header.scrolled {
  background: rgba(244,247,249,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
  padding: 12px 0;
}
/* Over-hero (transparent) header: light text for contrast */
.site-header.over-hero:not(.scrolled) .brand,
.site-header.over-hero:not(.scrolled) .nav-link,
.site-header.over-hero:not(.scrolled) .phone-pill { color: var(--bone); }
.site-header.over-hero:not(.scrolled) .brand small { color: rgba(244,247,249,.7); }
.site-header.over-hero:not(.scrolled) .nav-link:hover { background: rgba(244,247,249,.12); }
.site-header.over-hero:not(.scrolled) .phone-pill { border-color: var(--line-light); }
.site-header.over-hero:not(.scrolled) .menu-toggle span { background: var(--bone); }
/* When mobile menu is open, force light header text over the dark overlay */
.site-header:has(.menu-toggle.open) .brand,
.site-header:has(.menu-toggle.open) .phone-pill { color: var(--bone); }
.site-header:has(.menu-toggle.open) .brand small { color: var(--sage-soft); }
.site-header:has(.menu-toggle.open) .menu-toggle span { background: var(--bone); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.brand .mark {
  height: 50px; width: auto; flex: none;
  display: flex; align-items: center;
}
.brand .mark img, .brand .mark svg { height: 100%; width: auto; display: block; }
/* using the full MCO logo image — hide the duplicate HTML wordmark */
.brand > span:not(.mark) { display: none; }
/* the logo's wordmark is charcoal; render it white on dark backgrounds */
.site-header.over-hero:not(.scrolled) .brand .mark img,
.site-footer .brand .mark img,
.site-header:has(.menu-toggle.open) .brand .mark img { filter: brightness(0) invert(1); }
.brand small { display:block; font-family: var(--body); font-size: .58rem; letter-spacing:.26em; text-transform:uppercase; color: var(--sage); font-weight:600; margin-top:2px; }

.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-link {
  position: relative; padding: 11px 20px; font-weight: 500; font-size: .98rem; border-radius: 100px;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav-link:hover { background: rgba(38,43,48,.05); }
.nav-link.active { color: var(--clay); }
/* Home hero: frosted pill keeps nav legible over the split (cream + dark image) hero */
.site-header.home:not(.scrolled) .nav-links { background: rgba(246,243,238,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.4); border-radius: 100px; padding: 5px 8px; box-shadow: 0 10px 26px -14px rgba(38,43,48,.30); }
.site-header.home:not(.scrolled) .nav-link { color: var(--ink); }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--bone); border: 1px solid var(--line); border-radius: 20px;
  padding: 12px; min-width: 460px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; pointer-events: none;
  box-shadow: var(--shadow-soft);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown a {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 13px;
  font-size: .92rem; font-weight: 500; transition: background .25s var(--ease);
}
.dropdown a:hover { background: var(--bone-2); }
.dropdown a .di {
  width: 34px; height: 34px; border-radius: 9px; flex:none;
  background: var(--bone-2); display: grid; place-items: center; color: var(--clay);
  transition: background .25s, color .25s;
}
.dropdown a:hover .di { background: var(--clay); color:#fff; }

.header-cta { display: flex; align-items: center; gap: 14px; }
.phone-pill {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem;
  padding: 9px 16px; border-radius: 100px; border: 1px solid var(--line);
  transition: border-color .3s, background .3s;
}
.phone-pill:hover { border-color: var(--clay); background: rgba(47,147,201,.06); }
.phone-pill svg { color: var(--clay); }

.menu-toggle { display:none; background:none; border:none; cursor:pointer; width:46px; height:46px; border-radius:12px; }
.menu-toggle span { display:block; width:22px; height:2px; background: var(--ink); margin:5px auto; transition: transform .35s var(--ease), opacity .25s; }
.menu-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--ink); color: var(--bone);
  padding: 110px 28px 40px; transform: translateX(100%); transition: transform .5s var(--ease);
  display: flex; flex-direction: column; overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a { font-family: var(--display); font-size: 1.18rem; font-weight: 600; letter-spacing: .01em; padding: 17px 2px; border-bottom: 1px solid rgba(244,247,249,.10); display:flex; justify-content:space-between; align-items:center; }
.mobile-menu a span { color: var(--sky); font-size: .85em; opacity: .8; }
.mobile-menu .mm-sub { font-family: var(--body); font-size: 1rem; padding: 9px 0 9px 16px; border:none; color: var(--sage-soft); }
.mobile-menu .mm-foot { margin-top: auto; padding-top: 28px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--bone); padding: 60px 0 36px; }
.site-footer a { color: rgba(244,247,249,.72); transition: color .25s; }
.site-footer a:hover { color: var(--clay); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1.2fr; gap: 48px; }
.footer-title { font-family: var(--body); text-transform: uppercase; letter-spacing:.2em; font-size:.72rem; color: var(--sage-soft); font-weight:600; margin-bottom: 20px; }
.footer-bottom { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line-light); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.85rem; color: rgba(244,247,249,.5); }

/* ---------- Cards / shared ---------- */
.surface { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }

.service-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.service-card .sc-img { aspect-ratio: 4/3; overflow: hidden; }
.service-card .sc-img img { width:100%; height:100%; object-fit: cover; transition: transform 1s var(--ease); }
.service-card:hover .sc-img img { transform: scale(1.07); }
.service-card .sc-body { padding: 26px 26px 30px; display:flex; flex-direction:column; flex:1; }
.service-card .sc-arrow {
  margin-top: auto; display:inline-flex; align-items:center; gap:8px; font-weight:600; color: var(--clay); font-size:.92rem;
}
.service-card:hover .sc-arrow svg { transform: translateX(5px); }
.service-card .sc-arrow svg { transition: transform .4s var(--ease); }

.chip {
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:100px;
  background: rgba(95,138,168,.14); color: var(--ink); font-size:.82rem; font-weight:600;
}
.chip .dot { width:7px; height:7px; border-radius:50%; background: var(--clay); }

/* Partners */
.partner-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.partner {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  height: 110px; display: flex; align-items: center; justify-content: center; padding: 22px;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.partner:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }
.partner img { max-width: 100%; width: auto; object-fit: contain; }
/* per-logo sizing tuned so every wordmark reads at the same size */
.partner:nth-child(1) img { max-height: 42px; }                   /* ampelite (incl. tagline) */
.partner:nth-child(2) img { max-height: 32px; }                   /* bondor */
.partner:nth-child(3) img { max-height: 32px; }                   /* colorbond */
.partner:nth-child(4) img { max-height: 56px; }                   /* fielders (incl. hatching) */
.partner:nth-child(5) img { max-height: 106px; max-width: none; } /* lysaght (heavy padding, clipped) */
.partner:nth-child(6) img { max-height: 84px; max-width: none; }  /* stratco (padding above/below box, clipped) */
@media (max-width: 980px){ .partner-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .partner-grid { grid-template-columns: repeat(2, 1fr); } .partner { height: 92px; padding: 16px; } }

/* Stat */
.stat-num { font-family: var(--display); font-size: clamp(2.6rem,4.5vw,3.6rem); line-height:1; color: var(--ink); }
.stat-num .plus { color: var(--clay); }

/* ---------- Forms ---------- */
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:.82rem; font-weight:600; letter-spacing:.02em; color: var(--ink); }
.field .req { color: var(--clay); }
.input, .select, .textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--bone); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; width: 100%; transition: border-color .3s, box-shadow .3s, background .3s;
}
.input::placeholder, .textarea::placeholder { color: rgba(38,43,48,.4); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--clay); background:#fff;
  box-shadow: 0 0 0 4px rgba(47,147,201,.12);
}
/* invalid field: red box (stays red even while focused, until corrected) */
.input.invalid, .select.invalid, .textarea.invalid,
.input.invalid:focus, .select.invalid:focus, .textarea.invalid:focus {
  border-color: #d64545; box-shadow: 0 0 0 4px rgba(214,69,69,.16); background: #fff;
}
.textarea { resize: vertical; min-height: 120px; }
.select { appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23262b30' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 16px center; padding-right: 42px; }

/* ---------- Floating mobile CTA bar ---------- */
.mobile-cta-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: none; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(244,247,249,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(120%); transition: transform .5s var(--ease);
}
.mobile-cta-bar.show { transform: translateY(0); }
.mobile-cta-bar .btn { flex:1; justify-content:center; padding: .95em 1em; }

/* ---------- Marquee ---------- */
.marquee { overflow:hidden; white-space:nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display:inline-flex; gap: 60px; align-items:center; animation: marquee 32s linear infinite; }
.marquee__track span { font-family: var(--display); font-size: 1.4rem; color: rgba(244,247,249,.55); display:inline-flex; align-items:center; gap:60px; }
.marquee__track span::after { content:'✦'; color: var(--clay); font-size: .9rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
[data-reveal-delay="5"]{ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- Utilities ---------- */
.grain::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.text-clay { color: var(--clay); }
.text-sage { color: var(--sage); }
.bg-ink { background: var(--ink); color: var(--bone); }
.bg-bone2 { background: var(--bone-2); }
.divider { height:1px; background: var(--line); border:0; }
.rounded-img { border-radius: var(--radius-lg); overflow:hidden; }

/* Decorative underline */
.ul-accent { position:relative; display:inline-block; }
.ul-accent::after { content:''; position:absolute; left:0; right:0; bottom:-.08em; height:.28em; background: rgba(47,147,201,.28); border-radius:4px; z-index:-1; }

/* Reveal image wipe */
.media-frame { position:relative; overflow:hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 900px){
  .nav-links, .header-cta { display:none; }
  .menu-toggle { display:block; }
  .mobile-cta-bar { display:flex; }
  body { padding-bottom: 0; }
  /* keep the sticky Call/Quote bar from covering the footer text */
  .site-footer { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
}
@media (max-width: 620px){
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  body { font-size: 16px; }
}

/* ---------- Responsive overflow & layout safety net ---------- */
img, svg, video, iframe { max-width: 100%; }
[style*="display:grid"] > * { min-width: 0; }          /* stop grid tracks blowing out to content min-width */
.field, .input, .select, .textarea { min-width: 0; }   /* let form controls shrink inside grids */
:where(p, a, span, li, h1, h2, h3, h4, strong, label) { overflow-wrap: break-word; }  /* break long tokens (emails, urls) */

/* Inline multi-column grids step down as the screen narrows */
@media (max-width: 1024px){
  [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns: repeat(2,1fr) !important; }
  [style*="grid-template-columns:repeat(5,1fr)"]{ grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 900px){
  [style*="grid-template-columns:repeat(3,1fr)"]{ grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 880px){
  [style*="grid-template-columns:1.05fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns: 1fr !important; }
}
@media (max-width: 600px){
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"]{ grid-template-columns: repeat(2,1fr) !important; }
}