/* =========================================================
   North Sea Capability Advisor — Design System
   Premium B2B maritime / industrial / data-driven / calm
   ========================================================= */

:root{
  /* Core palette */
  --navy-950:#0b1b2b;
  --navy-900:#0f2438;
  --navy-800:#15324c;
  --navy-700:#1c4260;
  --sea-600:#1f5c82;
  --sea-500:#2b7aa8;
  --cyan-500:#4fa9c4;
  --cyan-400:#7cc3d8;
  --cyan-100:#e4f3f6;

  --grey-900:#1b2126;
  --grey-700:#3d4750;
  --grey-600:#5a6570;
  --grey-500:#7a848d;
  --grey-300:#c3cbd1;
  --grey-200:#dde2e6;
  --grey-100:#eef1f3;
  --grey-50:#f6f8f9;
  --white:#ffffff;

  /* Status */
  --status-green:#1e8e5a;
  --status-green-bg:#e5f5ee;
  --status-amber:#b3760c;
  --status-amber-bg:#fbf1de;
  --status-red:#c23b3b;
  --status-red-bg:#fbeaea;
  --status-grey:#6b7480;
  --status-grey-bg:#eef1f3;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* Layout */
  --max-width: 1240px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15,36,56,0.06), 0 1px 1px rgba(15,36,56,0.04);
  --shadow-md: 0 6px 20px rgba(15,36,56,0.08);
  --shadow-lg: 0 16px 40px rgba(15,36,56,0.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{
  /* Safety net against horizontal scroll: the slide-in menu panel (and any
     future fixed/absolute element) sits off-canvas via transform:translateX,
     which some browsers still count toward the page's scrollable width.
     Clipping it here is the standard fix — it does not affect the sticky
     top bar or any normal in-flow vertical scrolling. */
  overflow-x:hidden;
  max-width:100%;
}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--grey-900);
  background:var(--grey-50);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-sans);
  color:var(--navy-950);
  line-height:1.2;
  margin:0 0 0.5em 0;
  letter-spacing:-0.01em;
}
h1{font-size:2.6rem; font-weight:700;}
h2{font-size:1.9rem; font-weight:700;}
h3{font-size:1.3rem; font-weight:600;}
h4{font-size:1.05rem; font-weight:600;}
p{margin:0 0 1em 0; color:var(--grey-700);}
a{color:var(--sea-600); text-decoration:none;}
a:hover{color:var(--sea-500);}
small,.small{font-size:0.85rem; color:var(--grey-600);}
.mono{font-family:var(--font-mono); letter-spacing:0.01em;}

img{max-width:100%; display:block;}
button{font-family:var(--font-sans);}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Top navigation ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--grey-200);
}
.topbar-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 32px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:1.05rem; color:var(--navy-950);
}
.brand-mark{
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-mark svg{width:100%; height:100%; display:block;}
.brand-sub{
  font-size:0.68rem; color:var(--grey-500); font-weight:500;
  letter-spacing:0.04em; text-transform:uppercase; margin-top:-2px;
}
/* ---------- Hamburger button ---------- */
.hamburger-btn{
  display:flex; align-items:center; gap:10px;
  background:none; border:1px solid var(--grey-200); border-radius:8px;
  padding:8px 14px; cursor:pointer; color:var(--navy-950);
  font-size:0.88rem; font-weight:600; font-family:var(--font-sans);
}
.hamburger-btn:hover{background:var(--grey-100); border-color:var(--grey-300);}
.hamburger-lines{display:flex; flex-direction:column; gap:4px; width:18px;}
.hamburger-lines span{display:block; height:2px; width:100%; background:var(--navy-950); border-radius:2px;}

/* ---------- Slide-in menu panel ---------- */
.menu-overlay{
  position:fixed; inset:0; background:rgba(11,27,43,0.5);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  z-index:300;
}
.menu-overlay.open{opacity:1; pointer-events:auto;}
.menu-panel{
  position:fixed; top:0; right:0; height:100%;
  width:360px; max-width:88vw;
  background:#fff; box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .3s ease;
  z-index:301; display:flex; flex-direction:column;
}
.menu-panel.open{transform:translateX(0);}
.menu-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--grey-200); flex-shrink:0;
}
.menu-close-btn{
  background:none; border:none; font-size:1.2rem; line-height:1;
  color:var(--grey-600); cursor:pointer; padding:6px;
}
.menu-close-btn:hover{color:var(--navy-950);}
.menu-panel-links{padding:10px 14px; overflow-y:auto; flex:1;}
.menu-panel-links a, .menu-panel-linklike{
  display:block; width:100%; text-align:left;
  padding:14px 14px; border-radius:8px;
  font-size:1rem; font-weight:600; color:var(--navy-950);
  background:none; border:none; cursor:pointer; font-family:var(--font-sans);
}
.menu-panel-links a:hover, .menu-panel-linklike:hover{background:var(--grey-100);}
.menu-panel-links a.active{color:var(--sea-600); background:var(--cyan-100);}
.menu-panel-section-label{
  display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--grey-500); padding:18px 14px 6px;
}
.menu-panel-section-label:first-child{padding-top:8px;}
.menu-panel-footer{
  padding:16px 22px; border-top:1px solid var(--grey-200); flex-shrink:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px;
  border-radius:7px;
  font-size:0.92rem; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--navy-900); color:#fff;}
.btn-primary:hover{background:var(--navy-800); color:#fff;}
.btn-secondary{background:#fff; color:var(--navy-900); border-color:var(--grey-300);}
.btn-secondary:hover{border-color:var(--navy-700); color:var(--navy-950);}
.btn-ghost{background:transparent; color:var(--grey-700); border-color:transparent;}
.btn-ghost:hover{background:var(--grey-100);}
.btn-cyan{background:var(--sea-600); color:#fff;}
.btn-cyan:hover{background:var(--sea-500);}
.btn-sm{padding:7px 13px; font-size:0.82rem;}
.btn-lg{padding:14px 26px; font-size:1rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(ellipse at 80% -10%, rgba(79,169,196,0.16), transparent 55%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);
  color:#fff;
  padding:88px 0 96px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 90px);
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.76rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cyan-400);
  margin-bottom:18px;
}
.hero h1{color:#fff; font-size:3.1rem; max-width:820px;}
.hero-sub{color:var(--grey-300); font-size:1.15rem; max-width:640px; margin-bottom:34px;}

.search-shell{
  background:#fff;
  border-radius:12px;
  padding:8px;
  display:flex;
  gap:8px;
  max-width:720px;
  box-shadow:var(--shadow-lg);
}
.search-shell input{
  flex:1;
  border:none; outline:none;
  font-size:1rem;
  padding:12px 14px;
  color:var(--navy-950);
  background:transparent;
}
.search-examples{
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:8px;
  color:var(--grey-300); font-size:0.85rem;
}
.search-examples button{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:#e7edf1;
  padding:6px 12px;
  border-radius:20px;
  font-size:0.82rem;
  cursor:pointer;
}
.search-examples button:hover{background:rgba(255,255,255,0.16);}

.quick-actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:36px;
}
.quick-chip{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  padding:12px 18px;
  border-radius:9px;
  font-size:0.9rem; font-weight:600;
  cursor:pointer;
}
.quick-chip:hover{background:rgba(255,255,255,0.12); border-color:var(--cyan-400);}
.quick-chip .qi{font-size:1.1rem;}

/* ---------- Sections ---------- */
section.section{padding:76px 0;}
section.section.tight{padding:48px 0;}
section.section.alt{background:#fff; border-top:1px solid var(--grey-200); border-bottom:1px solid var(--grey-200);}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:34px; flex-wrap:wrap;
}
.section-head p{max-width:560px; margin:8px 0 0;}
.eyebrow{
  font-size:0.76rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--sea-600); margin-bottom:8px; display:block;
}

/* ---------- Cards ---------- */
.card{
  background:#fff;
  border:1px solid var(--grey-200);
  border-radius:var(--radius-lg);
  padding:24px;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.card-link{cursor:pointer;}
.card-link:hover{box-shadow:var(--shadow-md); border-color:var(--grey-300); transform:translateY(-2px);}

.grid{display:grid; gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.plan-layout{grid-template-columns:2fr 1fr;}

.entry-card{
  padding:30px 26px;
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid var(--grey-200);
}
.entry-card .icon-badge{
  width:44px; height:44px; border-radius:10px;
  background:var(--cyan-100); color:var(--sea-600);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:16px;
}

/* Status badges */
.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.76rem; font-weight:700;
  padding:5px 10px; border-radius:20px;
  text-transform:uppercase; letter-spacing:0.03em;
}
.status-badge::before{content:""; width:7px; height:7px; border-radius:50%;}
.status-possible{background:var(--status-green-bg); color:var(--status-green);}
.status-possible::before{background:var(--status-green);}
.status-conditions{background:var(--status-amber-bg); color:var(--status-amber);}
.status-conditions::before{background:var(--status-amber);}
.status-limited{background:var(--status-red-bg); color:var(--status-red);}
.status-limited::before{background:var(--status-red);}
.status-notfeasible{background:var(--status-grey-bg); color:var(--status-grey);}
.status-notfeasible::before{background:var(--status-grey);}

.complexity-badge{
  display:inline-block; font-size:0.76rem; font-weight:600;
  padding:4px 9px; border-radius:5px;
  background:var(--grey-100); color:var(--grey-700);
  border:1px solid var(--grey-200);
}

.cost-chip{
  font-family:var(--font-mono); font-weight:700; letter-spacing:0.02em;
  color:var(--navy-800); font-size:0.85rem;
}
.cost-chip .dim{color:var(--grey-300);}

/* Use case card */
.uc-card{
  display:flex; flex-direction:column; gap:12px;
  padding:22px; border-radius:var(--radius-lg);
  background:#fff; border:1px solid var(--grey-200);
}
.uc-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.uc-card h3{margin-bottom:2px;}
.uc-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.uc-meta span{
  font-size:0.76rem; color:var(--grey-600); background:var(--grey-100);
  padding:4px 9px; border-radius:5px; border:1px solid var(--grey-200);
}
.uc-card-footer{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--grey-100);
  font-size:0.82rem; color:var(--grey-600);
}

/* ---------- Filters ---------- */
.filters-bar{
  background:#fff; border:1px solid var(--grey-200); border-radius:var(--radius-lg);
  padding:20px 22px; margin-bottom:28px;
}
.filters-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
}
.filter-group{display:flex; flex-direction:column;}
.filter-group label{
  display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--grey-500); margin-bottom:6px;
  line-height:1.3; min-height:2.6em;
}
.filter-group select{margin-top:auto;}
select, .field-input, textarea{
  width:100%; padding:9px 11px; border:1px solid var(--grey-300); border-radius:6px;
  font-size:0.88rem; color:var(--grey-900); background:#fff; font-family:var(--font-sans);
}
select:focus, .field-input:focus, textarea:focus{outline:2px solid var(--cyan-400); outline-offset:1px; border-color:var(--sea-500);}
.filters-active{margin-top:14px; font-size:0.85rem; color:var(--grey-600);}

/* ---------- Tables ---------- */
table.cmp-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius-lg); overflow:hidden;}
table.cmp-table th, table.cmp-table td{
  padding:14px 16px; border-bottom:1px solid var(--grey-200); text-align:left; font-size:0.9rem; vertical-align:top;
}
table.cmp-table thead th{
  background:var(--navy-950); color:#fff; font-weight:600; font-size:0.82rem;
  text-transform:uppercase; letter-spacing:0.03em;
}
table.cmp-table tbody tr:hover{background:var(--grey-50);}
table.cmp-table tbody tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto; border:1px solid var(--grey-200); border-radius:var(--radius-lg);}
.table-wrap table{border:none; border-radius:0;}

/* pill for suitability */
.pill{display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.78rem; font-weight:700;}
.pill-yes{background:var(--status-green-bg); color:var(--status-green);}
.pill-conditional{background:var(--status-amber-bg); color:var(--status-amber);}
.pill-recommended{background:var(--cyan-100); color:var(--sea-600);}
.pill-no{background:var(--status-red-bg); color:var(--status-red);}

/* ---------- Tag / capability strip ---------- */
.tag{
  display:inline-block; background:var(--grey-100); color:var(--grey-700);
  padding:4px 10px; border-radius:5px; font-size:0.78rem; margin:0 6px 6px 0;
  border:1px solid var(--grey-200);
}
.tag-cyan{background:var(--cyan-100); color:var(--sea-600); border-color:transparent;}

/* ---------- Score bar ---------- */
.score-wrap{display:flex; align-items:center; gap:14px;}
.score-bar{flex:1; height:10px; background:var(--grey-200); border-radius:6px; overflow:hidden;}
.score-fill{height:100%; border-radius:6px; background:linear-gradient(90deg, var(--sea-600), var(--cyan-400));}
.score-num{font-family:var(--font-mono); font-weight:700; color:var(--navy-900); font-size:1.1rem; min-width:52px; text-align:right;}

/* ---------- Callouts ---------- */
.callout{
  border-radius:var(--radius-md); padding:16px 18px; font-size:0.9rem;
  display:flex; gap:12px; align-items:flex-start;
}
.callout-info{background:var(--cyan-100); color:var(--navy-900); border:1px solid #bfe0e9;}
.callout-warn{background:var(--status-amber-bg); color:#6b4a09; border:1px solid #eed9ac;}
.callout-lock{background:var(--grey-100); color:var(--grey-700); border:1px dashed var(--grey-300);}
.callout-note{background:var(--grey-100); color:var(--grey-600); font-size:0.8rem; border:1px solid var(--grey-200);}

/* ---------- Detail page layout ---------- */
.detail-hero{background:var(--navy-950); color:#fff; padding:52px 0 44px;}
.detail-hero-top{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;}
.detail-hero h1{color:#fff; font-size:2.3rem; max-width:680px;}
.breadcrumb{font-size:0.82rem; color:var(--grey-300); margin-bottom:14px;}
.breadcrumb a{color:var(--cyan-400);}

.detail-layout{display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start; padding:48px 0;}
.detail-main section{margin-bottom:44px;}
.detail-main section:last-child{margin-bottom:0;}
.side-card{background:#fff; border:1px solid var(--grey-200); border-radius:var(--radius-lg); padding:22px; margin-bottom:20px;}
.side-card h4{margin-bottom:12px;}
.side-stack .btn{margin-bottom:10px;}

.req-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.req-list li{display:flex; gap:10px; align-items:flex-start; font-size:0.92rem; color:var(--grey-700);}
.req-list li::before{content:"✓"; color:var(--sea-600); font-weight:700; flex-shrink:0;}

.equip-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.equip-item{border:1px solid var(--grey-200); border-radius:var(--radius-md); padding:14px 16px; background:var(--grey-50);}
.equip-item h4{font-size:0.92rem; margin-bottom:4px;}
.equip-item p{font-size:0.82rem; margin:0;}

.cost-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.cost-cell{border:1px solid var(--grey-200); border-radius:var(--radius-md); padding:16px; text-align:center; background:#fff;}
.cost-cell .label{font-size:0.76rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--grey-500); margin-bottom:8px;}
.cost-cell .val{font-family:var(--font-mono); font-size:1.3rem; font-weight:700; color:var(--navy-900);}

/* meta info footer for content ownership */
.meta-strip{
  display:flex; flex-wrap:wrap; gap:18px; font-size:0.78rem; color:var(--grey-500);
  border-top:1px solid var(--grey-200); padding-top:16px; margin-top:8px;
}
.meta-strip strong{color:var(--grey-700);}

/* ---------- Wizard ---------- */
.wizard-shell{max-width:760px; margin:0 auto;}
.wizard-progress{display:flex; gap:6px; margin-bottom:34px;}
.wizard-progress .step-dot{flex:1; height:5px; border-radius:4px; background:var(--grey-200);}
.wizard-progress .step-dot.done{background:var(--sea-500);}
.wizard-progress .step-dot.active{background:var(--navy-900);}
.wizard-step-label{font-size:0.8rem; color:var(--grey-500); margin-bottom:6px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;}
.option-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:22px;}
.option-card{
  border:1.5px solid var(--grey-200); border-radius:var(--radius-md); padding:18px;
  cursor:pointer; background:#fff; transition:all .12s ease;
}
.option-card:hover{border-color:var(--sea-500);}
.option-card.selected{border-color:var(--navy-900); background:var(--cyan-100); box-shadow:0 0 0 1px var(--navy-900) inset;}
.option-card h4{margin-bottom:4px; font-size:0.98rem;}
.option-card p{font-size:0.82rem; margin:0;}
.wizard-nav{display:flex; justify-content:space-between; margin-top:34px;}

/* ---------- Map ---------- */
.map-shell{display:grid; grid-template-columns:260px 1fr 340px; gap:0; border:1px solid var(--grey-200); border-radius:var(--radius-lg); overflow:hidden; background:#fff;}
.map-canvas-wrap{position:relative; background:linear-gradient(180deg,#dcedf1,#c9e1e8); min-height:560px;}
.map-layers-panel{border-right:1px solid var(--grey-200); padding:20px; background:var(--grey-50);}
.map-side-panel{border-left:1px solid var(--grey-200); padding:20px; background:#fff; min-height:560px;}
.layer-toggle{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--grey-100); font-size:0.86rem;}
.layer-toggle:last-child{border-bottom:none;}
.switch{position:relative; width:38px; height:21px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.switch .slider{position:absolute; inset:0; background:var(--grey-300); border-radius:20px; cursor:pointer; transition:.15s;}
.switch .slider::before{content:""; position:absolute; width:15px; height:15px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s;}
.switch input:checked + .slider{background:var(--sea-600);}
.switch input:checked + .slider::before{transform:translateX(17px);}
.map-zone{cursor:pointer; stroke:rgba(255,255,255,0.7); stroke-width:1.5; transition:opacity .12s;}
.map-zone:hover{opacity:0.85;}
.zone-green{fill:#8fd3a8;}
.zone-amber{fill:#f3cb7e;}
.zone-red{fill:#ef9d9d;}
.zone-grey{fill:#c9d2d8;}
.map-legend{position:absolute; bottom:16px; left:16px; background:rgba(255,255,255,0.92); border-radius:8px; padding:10px 14px; font-size:0.78rem; box-shadow:var(--shadow-sm); display:flex; gap:14px;}
.map-legend span{display:flex; align-items:center; gap:6px;}
.legend-dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.concept-flag{position:absolute; top:16px; right:16px; background:rgba(15,36,56,0.85); color:#fff; font-size:0.72rem; padding:6px 11px; border-radius:20px; font-weight:600; letter-spacing:0.02em;}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{margin-bottom:0;}
.field label{display:block; font-size:0.84rem; font-weight:600; color:var(--grey-700); margin-bottom:6px;}
.field .hint{font-size:0.76rem; color:var(--grey-500); margin-top:4px;}
.file-drop{border:1.5px dashed var(--grey-300); border-radius:var(--radius-md); padding:26px; text-align:center; color:var(--grey-500); font-size:0.86rem; cursor:pointer; background:var(--grey-50);}
.file-drop:hover{border-color:var(--sea-500); color:var(--sea-600);}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy-950); color:var(--grey-300); padding:56px 0 30px; margin-top:80px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px;}
footer.site-footer h4{color:#fff; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px;}
footer.site-footer a{color:var(--grey-300); font-size:0.88rem; display:block; margin-bottom:9px;}
footer.site-footer a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); padding-top:22px; font-size:0.8rem; color:var(--grey-500); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- Auth gate ---------- */
.gate-box{
  border:1px dashed var(--grey-300); border-radius:var(--radius-md); padding:22px; text-align:center; background:var(--grey-50);
}
.gate-box p{margin-bottom:14px;}
[data-auth-only]{display:none;}
body.is-authed [data-auth-only]{display:block;}
body.is-authed [data-anon-only]{display:none;}
body.is-authed .gate-box{display:none;}
body.is-authed .gated-content{display:block !important;}
.gated-content{display:none;}

/* ---------- Tabs ---------- */
.tab-btn{border-radius:8px 8px 0 0; margin-bottom:-1px;}
.tab-btn.active{background:var(--navy-900); color:#fff;}
.tab-btn.active:hover{background:var(--navy-900);}

/* ---------- Toast ---------- */
#toast{
  position:fixed; bottom:24px; right:24px; background:var(--navy-950); color:#fff;
  padding:13px 20px; border-radius:8px; font-size:0.88rem; box-shadow:var(--shadow-lg);
  transform:translateY(20px); opacity:0; pointer-events:none; transition:all .2s ease; z-index:1000;
}
#toast.show{transform:translateY(0); opacity:1;}

/* ---------- Utility ---------- */
.flex{display:flex;}
.flex-between{display:flex; align-items:center; justify-content:space-between;}
.flex-wrap{flex-wrap:wrap;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mb-0{margin-bottom:0;}
.text-center{text-align:center;}
.muted{color:var(--grey-500);}
.divider{height:1px; background:var(--grey-200); margin:32px 0;}
.badge-dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px;}

/* ---------- Print ---------- */
@media print{
  .topbar, .site-footer, .no-print, #toast{display:none !important;}
  body{background:#fff;}
  .container{max-width:100%; padding:0;}
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .detail-layout{grid-template-columns:1fr;}
  .map-shell{grid-template-columns:1fr;}
  .map-canvas-wrap{min-height:360px;}
  .map-side-panel{min-height:0;}
  .map-layers-panel{border-right:none; border-bottom:1px solid var(--grey-200);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .filters-grid{grid-template-columns:repeat(3,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .plan-layout{grid-template-columns:1fr;}
  .option-grid{grid-template-columns:1fr;}
  .hero{padding:64px 0 72px;}
  .container, .topbar-inner{padding-left:24px; padding-right:24px;}
}
@media (max-width:680px){
  .hamburger-text{display:none;}
  .brand-sub{display:none;}
  .menu-panel{width:100%; max-width:100%;}
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  .hero{padding:48px 0 56px;}
  .hero h1{font-size:2.1rem;}
  .search-shell{flex-direction:column;}
  .search-shell .btn{width:100%;}
  .filters-grid{grid-template-columns:1fr 1fr;}
  .cost-grid{grid-template-columns:1fr 1fr;}
  .equip-grid{grid-template-columns:1fr;}
  .detail-hero-top > div[style*="min-width"]{min-width:0; width:100%;}
  .wizard-nav{flex-wrap:wrap; gap:12px;}
  .wizard-nav .btn{flex:1; min-width:120px;}
  .section-head{align-items:flex-start;}
  #toast{left:16px; right:16px; bottom:16px;}
}
@media (max-width:480px){
  .container, .topbar-inner{padding-left:16px; padding-right:16px;}
  .filters-grid{grid-template-columns:1fr;}
  .cost-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero h1{font-size:1.7rem;}
  .hero-sub{font-size:1rem;}
  .detail-hero h1{font-size:1.7rem;}
  h2{font-size:1.5rem;}
}