:root{
  --bg:#f7f4ee;
  --ink:#0f2a3d;
  --ink-2:#213a4d;
  --accent:#c99a2e;
  --muted:#6c7a86;
  --card:#ffffff;
  --shadow: 0 10px 25px rgba(15,42,61,.08), 0 2px 8px rgba(15,42,61,.06);
  --radius:18px;
  --maxw:1100px;
}

/* Reset-ish / global guards */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html,body{max-width:100%; overflow-x:hidden;}      /* stop sideways scroll */
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink);
  background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
iframe{max-width:100%}
a{color:inherit; text-decoration:none}
p{margin:0 0 1rem}
h1,h2,h3{line-height:1.12; margin:0 0 .6rem}

/* Layout */
.container{max-width:var(--maxw); width:100%; margin-inline:auto; padding:0 20px}

/* Top notice */
.notice{
  background:linear-gradient(90deg,var(--accent),#e6c15b);
  color:#092033; text-align:center; font-weight:700; letter-spacing:.2px; position:relative;
}
.notice .container{padding:.65rem 20px}
.notice small{display:block; font-weight:600}

/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(247,244,238,.8); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #e9e4db}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:46px; height:46px; border-radius:10px; object-fit:contain; background:#fff; padding:4px; box-shadow:var(--shadow)}
.brand .name{font-weight:900; font-size:1.1rem; letter-spacing:.2px}

.menu{display:flex; gap:18px; align-items:center; max-width:100%}
.menu a{padding:8px 12px; border-radius:10px; font-weight:600; color:var(--ink-2)}
.menu a:hover{background:rgba(15,42,61,.06)}

.cta{display:flex; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.78rem 1.05rem; border-radius:14px; font-weight:800; border:2px solid transparent; box-shadow:var(--shadow)}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:#fff; color:var(--ink); border-color:#e6e0d3}
.btn-ghost:hover{background:#f1ede6}

/* Mobile nav */
.burger{display:none; border:none; background:#fff; padding:.6rem .75rem; border-radius:10px; box-shadow:var(--shadow)}

/* Hero */
.hero{padding: clamp(32px, 3.5vw + 12px, 72px) 0 36px}
.hero-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:34px; align-items:center}
.hero-grid > *{min-width:0}      /* allow columns to shrink on small widths */
.eyebrow{font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.12em}
.hero h1{font-size:clamp(1.8rem, 2.6vw + 1rem, 3rem)}
.hero p.lead{font-size:1.1rem; color:var(--muted)}
.hero-card{background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); min-width:0}
.badge-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; min-width:0}
.badge{background:#0f2a3d; color:#fff; padding:.35rem .6rem; border-radius:999px; font-size:.85rem; font-weight:700}
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.gallery .tile{background:#fff; border-radius:16px; aspect-ratio:4/3; box-shadow:var(--shadow); overflow:hidden}
.gallery .tile img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit}
.logo-card{display:flex; align-items:center; justify-content:center; background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow)}
.logo-card img{max-width:100%}   /* never force a minimum width */

/* Sections */
section{padding: clamp(36px, 4vw + 20px, 80px) 0}
.section-head{display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:22px}
.section-head h2{font-size:clamp(1.5rem, 1.6vw + 1.1rem, 2.2rem)}
.sub{color:var(--muted)}

/* Cards/grid */
.grid{display:grid; gap:18px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card h3{margin-bottom:.4rem}
.list{padding-left:1.1rem}
.list li{margin:.35rem 0}

.price{display:flex; align-items:baseline; gap:.3rem; font-weight:900}
.price b{font-size:2.2rem}

/* Callout note */
.note{margin-top:16px; background:#0f2a3d; color:#fff}

/* Steps */
.steps{counter-reset: step}
.step{position:relative; padding-left:62px}
.step::before{counter-increment: step; content: counter(step); position:absolute; left:0; top:0; width:44px; height:44px; border-radius:12px; background:var(--accent); color:#092033; display:grid; place-items:center; font-weight:900; box-shadow:var(--shadow)}

/* FAQ */
details{background:var(--card); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow)}
details+details{margin-top:12px}
summary{cursor:pointer; font-weight:800}

/* Contact */
.contact-card{display:grid; grid-template-columns:1.2fr .9fr; gap:18px}
.contact .map{border:0; width:100%; height:340px; border-radius:16px; box-shadow:var(--shadow)}
.contact .actions{display:flex; gap:12px; flex-wrap:wrap}

/* Footer */
footer{padding:28px 0 60px; color:var(--muted)}
.foot-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:20px}
.legal{font-size:.9rem}

/* --- Mobile improvements & overflow guards --- */
@media (max-width: 900px){
  .hero-grid, .contact-card, .foot-grid{grid-template-columns:1fr}
  .menu{display:none}
  .burger{display:inline-flex; align-items:center; justify-content:center}
  .cta{display:none}

  /* Collapse multi-column content to 1 col */
  .cols-3, .cols-2{grid-template-columns:1fr}

  /* Make any .scroller a horizontal, snap-scrolling carousel */
  .scroller{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:80%;
    overflow-x:auto;
    gap:12px;
    padding:4px 4px 12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .scroller > *{ scroll-snap-align:start; }

  /* Hero tweaks */
  .hero-card{margin-inline:auto; width:100%}
  .hero-card, .logo-card, .gallery{min-width:0} /* ensure shrink */
  .hero-card .gallery .tile{ aspect-ratio:1/1; }

  /* breathing room before the ‘Where we’re working’ card */
  #about .grid + .card{ margin-top:28px !important; }

  /* Space for fixed callbar */
  body{ padding-bottom:76px; }
}

/* Narrow phones (<=420px): two CTAs per row so none push off-screen */
@media (max-width: 420px){
  .hero .btn{ flex:1 1 calc(50% - 12px); }
}

/* Extra narrow (<=340px): stack CTAs full width */
@media (max-width: 340px){
  .hero .btn{ width:100%; flex:1 1 100%; }
  .container{ padding:0 14px; }
}

/* Desktop revert for scrollers */
@media (min-width: 901px){
  .scroller{
    grid-auto-flow:initial;
    grid-auto-columns:initial;
    overflow:visible;
  }
  .hero-card .gallery .tile{ aspect-ratio:4/3; }
}

/* Mobile Call Bar */
.callbar{position:fixed; bottom:12px; left:12px; right:12px; display:none; z-index:60}
.callbar .wrap{display:flex; gap:10px; background:#fff; border-radius:16px; padding:10px; box-shadow:var(--shadow)}
.callbar .btn{flex:1}
@media (max-width: 900px){ .callbar{display:block} }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
}

@media (min-width: 901px){
  #about .grid + .card{
    margin-top: 44px !important;  /* was too tight on desktop */
  }
}