:root {
      --color-accent: #fc5b2a;
      --color-accent-hover: #e44615;
      --color-accent-contrast: #ffffff;
      --navy: #0d3879;
      --blue: #0d75b7;
      --color-text: #131720;
      --color-text-muted: #5a6472;
      --color-surface: #f4f6f9;
      --color-border: #e6e9ef;
      --font-display: "Sora", system-ui, sans-serif;
      --font-body: "Inter", system-ui, sans-serif;
      --radius-xl: 26px;
      --radius-2xl: 34px;
    }

    body { background: #fff; color: var(--color-text); font-family: var(--font-body); }
    h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.04; }
    .wrap { width: min(1240px, 92vw); margin-inline: auto; }
    img { display: block; }

    /* ---------- Top bar ---------- */
    .topbar {
      background: var(--navy); color: #dfe7f3; font-size: .85rem;
      display: flex; justify-content: center; gap: 1.5rem; padding: .5rem 1rem; flex-wrap: wrap;
    }
    .topbar a { color: #fff; font-weight: 600; text-decoration: none; }
    .topbar .dot { color: var(--color-accent); }

    /* ---------- Nav ---------- */
    .nav-x {
      position: sticky; top: 0; z-index: 40;
      background: rgba(255,255,255,.86); backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--color-border);
    }
    .nav-x__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
    .nav-x__logo img { height: 40px; width: auto; }
    .nav-x__links { display: flex; gap: 1.6rem; align-items: center; list-style: none; margin: 0; padding: 0; }
    .nav-x__links a { color: var(--color-text); text-decoration: none; font-weight: 600; font-size: .95rem; }
    .nav-x__links a:hover { color: var(--color-accent); }
    .nav-x__cta { display: flex; align-items: center; gap: .8rem; }
    .nav-x__phone { color: var(--navy); font-weight: 700; text-decoration: none; white-space: nowrap; }
    .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
    .nav-toggle svg { width: 28px; height: 28px; stroke: var(--navy); }

    /* Breathing room: pill -> heading, and a touch more rhythm around section heads */
    .pill { margin-bottom: .2rem; }
    .pill + h1, .pill + h2, .pill + h3 { margin-top: 1.1rem; }
    .section__head .pill + h2 { margin-top: 1.15rem; }
    .feature__card .pill + h2 { margin-top: 1.15rem; }
    .hero__copy .pill + h1 { margin-top: 1.15rem; }
    .pill {
      display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .8rem;
      letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent);
      background: #fff1ec; border: 1px solid #ffd9cc; padding: .4rem .85rem; border-radius: 100px;
    }

    /* ---------- Hero / bento ---------- */
    .hero { padding: 2.6rem 0 1.2rem; }
    .hero__grid { display: grid; grid-template-columns: 1.02fr 1.4fr; gap: 1.5rem; align-items: stretch; }
    .hero__copy { display: flex; flex-direction: column; justify-content: center; padding: .5rem 0; }
    .hero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; margin: 1rem 0 1.1rem; }
    .hero h1 .accent { color: var(--color-accent); }
    .hero__lead { font-size: 1.15rem; color: var(--color-text-muted); line-height: 1.6; max-width: 36ch; }
    .hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
    .hero__trust { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.8rem; color: var(--navy); font-weight: 700; font-size: .92rem; }
    .hero__trust span { display: flex; align-items: center; gap: .4rem; }
    .hero__trust .star { color: var(--color-accent); }

    .bento {
      display: grid; gap: 14px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, minmax(150px, 1fr));
      grid-auto-flow: dense;
    }
    .tile { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-surface); }
    .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
    .tile:hover img { transform: scale(1.05); }
    .tile--tall { grid-row: span 2; }
    .tile--wide { grid-column: span 2; }
    .tile__tag {
      position: absolute; left: 12px; bottom: 12px; z-index: 2;
      background: rgba(255,255,255,.94); color: var(--navy); font-weight: 700; font-size: .82rem;
      padding: .35rem .7rem; border-radius: 100px;
    }
    .tile--brand {
      background: linear-gradient(150deg, var(--navy), #14489a);
      color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 1.1rem 1.2rem;
    }
    .tile--brand b { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; display: block; }
    .tile--brand span { color: #bcd0ee; font-size: .85rem; }

    /* ---------- Cert row ---------- */
    .certs { padding: 1.4rem 0 .4rem; }
    .certs__inner { display: flex; align-items: center; justify-content: center; gap: 2.4rem; flex-wrap: wrap; }
    .certs p { color: var(--color-text-muted); font-weight: 600; font-size: .9rem; margin: 0; }
    .certs img { height: 50px; width: auto; opacity: .9; }

    /* ---------- Section heads ---------- */
    .section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
    .section__head { max-width: 640px; margin-bottom: 2.2rem; }
    .section__head h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; }
    .section__head .ul { display: inline-block; height: 5px; width: 64px; background: var(--color-accent); border-radius: 4px; margin-top: 1rem; }
    .section__head p { color: var(--color-text-muted); font-size: 1.1rem; margin-top: 1rem; }

    /* ---------- Services mosaic ---------- */
    .services {
      display: grid; gap: 16px;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 230px;
    }
    .svc { position: relative; overflow: hidden; border-radius: var(--radius-2xl); color: #fff; text-decoration: none; }
    .svc--lg { grid-column: span 2; grid-row: span 2; }
    .svc--wide { grid-column: span 2; }
    .svc img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
    .svc:hover img { transform: scale(1.06); }
    /* White label card on the photo: maximum legibility, image stays visible above it */
    .svc__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,44,0) 55%, rgba(8,20,44,.18) 100%); }
    .svc__body { position: absolute; left: 14px; right: 14px; bottom: 14px; top: auto;
      background: rgba(255,255,255,.97); border-radius: 18px; padding: 1rem 1.2rem; z-index: 2;
      box-shadow: 0 12px 30px rgba(8,20,44,.22); }
    .svc h3 { font-size: 1.4rem; font-weight: 700; color: var(--navy); }
    .svc p { color: var(--color-text-muted); font-size: .9rem; margin-top: .3rem; max-width: 38ch; }
    .svc__more { margin-top: .7rem; font-weight: 700; font-size: .9rem; color: var(--color-accent); display: inline-flex; align-items: center; gap: .4rem; }
    .svc__more .arrow { color: var(--color-accent); }
    .svc--lg h3 { font-size: 1.6rem; }
    /* Balanced grid: four equal trade tiles, none dominant (all-services-in-one) */
    .services--even { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
    .services--even .svc { grid-column: auto; grid-row: auto; }
    @media (max-width: 980px) { .services--even { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } }
    @media (max-width: 560px) { .services--even { grid-template-columns: 1fr; grid-auto-rows: 200px; } }

    /* ---------- Full-width photo feature ---------- */
    .feature { position: relative; overflow: hidden; border-radius: var(--radius-2xl); min-height: 460px; display: flex; align-items: center; }
    .feature img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .feature__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,28,60,.92) 0%, rgba(11,28,60,.55) 55%, rgba(11,28,60,.15) 100%); }
    .feature__card { position: relative; z-index: 2; color: #fff; padding: clamp(2rem, 5vw, 4rem); max-width: 560px; }
    .feature__card h1, .feature__card h2, .feature__card h3 { color: #fff; }
    .feature__card h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; }
    .feature__card p { color: #d7e2f4; font-size: 1.1rem; line-height: 1.6; margin: 1.1rem 0 1.6rem; }
    .feature__stats { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.6rem; }
    .feature__stats b { font-family: var(--font-display); font-size: 2rem; color: #fff; display: block; }
    .feature__stats span { color: #b8caea; font-size: .85rem; }

    /* ---------- Reviews ---------- */
    .reviews { background: var(--color-surface); border-radius: var(--radius-2xl); padding: clamp(2.2rem, 5vw, 4rem); }
    .reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
    .qcard { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.6rem; }
    .qcard .stars { color: var(--color-accent); font-size: 1rem; letter-spacing: .1em; }
    .qcard p { font-size: 1.05rem; line-height: 1.5; margin: .9rem 0; }
    .qcard b { color: var(--navy); }

    /* ---------- CTA band ---------- */
    .ctaband { background: linear-gradient(135deg, var(--color-accent), #ff7a4d); border-radius: var(--radius-2xl); color: #fff; padding: clamp(2.4rem, 6vw, 4rem); text-align: center; }
    .ctaband h2 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; }
    .ctaband p { font-size: 1.15rem; opacity: .95; margin: 1rem auto 1.8rem; max-width: 48ch; }
    .ctaband .btn--primary { background: var(--navy); }
    .ctaband .btn--primary:hover { background: #0a2b5e; }
    .ctaband .btn--white { background: #fff; color: var(--navy); }

    /* ---------- Footer ---------- */
    .foot { background: var(--navy); color: #cdd9ec; padding: 3rem 0 2rem; margin-top: 3rem; }
    .foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
    .foot img { height: 42px; background: #fff; padding: 8px 12px; border-radius: 10px; }
    .foot h4 { color: #fff; font-family: var(--font-display); font-size: 1rem; margin-bottom: .8rem; }
    .foot a { color: #cdd9ec; text-decoration: none; display: block; padding: .2rem 0; }
    .foot a:hover { color: #fff; }
    .foot__bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1.4rem; font-size: .82rem; color: #9fb2cf; }

    /* ---------- Photo gallery (click to enlarge via shared lightbox) ---------- */
    .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .gallery figure { margin: 0; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; background: var(--color-surface); position: relative; }
    .gallery img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .55s ease; }
    .gallery figure:hover img { transform: scale(1.06); }
    .gallery figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.94); color: var(--navy); font-weight: 700; font-size: .8rem; padding: .3rem .65rem; border-radius: 100px; }
    .gallery--3 { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 880px) { .gallery, .gallery--3 { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .gallery, .gallery--3 { grid-template-columns: 1fr 1fr; gap: 10px; } }

    /* ---------- Social proof bar (near top) ---------- */
    .proofbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem 2rem;
      background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.2rem 1.8rem; }
    .proofbar__rating { display: flex; align-items: center; gap: .8rem; }
    .proofbar__rating b { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--navy); }
    .proofbar__rating .stars { color: var(--color-accent); font-size: 1rem; letter-spacing: .12em; display: block; }
    .proofbar__rating small { color: var(--color-text-muted); font-weight: 600; }
    .proofbar__plats { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-weight: 700; color: var(--navy); font-size: .95rem; }
    .proofbar__plats span { display: inline-flex; align-items: center; gap: .35rem; }
    .proofbar__plats .star { color: var(--color-accent); }
    .proofbar__badges { display: flex; align-items: center; gap: 1.2rem; }
    .proofbar__badges img { height: 46px; width: auto; }
    .proofbar__award { grid-column: 1 / -1; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }
    .proofbar__award svg { width: 20px; height: 20px; color: var(--color-accent); }

    /* ---------- How it works: easy steps ---------- */
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: step; }
    .step { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.8rem; position: relative; }
    .step__n { width: 48px; height: 48px; border-radius: 50%; background: var(--color-accent); color: #fff;
      font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; display: grid; place-items: center; margin-bottom: 1rem; }
    .step h3 { font-size: 1.25rem; }
    .step p { color: var(--color-text-muted); margin-top: .5rem; line-height: 1.55; }
    .step::after { content: ""; position: absolute; top: 2.6rem; right: -1.1rem; width: 1.4rem; height: 2px; background: var(--color-border); }
    .step:last-child::after { display: none; }
    .steps-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

    /* ---------- Responsive ---------- */
    @media (max-width: 980px) {
      .hero__grid { grid-template-columns: 1fr; }
      .bento { grid-template-rows: repeat(3, 150px); }
      .services { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; }
      .svc--lg { grid-column: span 2; grid-row: span 1; }
      .reviews__grid { grid-template-columns: 1fr; }
      .foot__grid { grid-template-columns: 1fr 1fr; }
      .nav-x__links, .nav-x__phone { display: none; }
      .nav-toggle { display: block; }
      .nav-x__links.open {
        display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--color-border); padding: 1rem 6vw; gap: .4rem;
      }
      .nav-x__links.open a { padding: .6rem 0; }
    }
    @media (max-width: 560px) {
      .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 140px); }
      .tile--wide { grid-column: span 2; }
      .tile--tall { grid-row: span 1; }
      .services { grid-template-columns: 1fr; grid-auto-rows: 230px; }
      .svc--lg, .svc--wide { grid-column: span 1; }
      .foot__grid { grid-template-columns: 1fr; }
      .feature__veil { background: linear-gradient(180deg, rgba(11,28,60,.7), rgba(11,28,60,.92)); }
      /* social proof + steps stack cleanly */
      .proofbar { grid-template-columns: 1fr; text-align: left; gap: 1rem; padding: 1.2rem 1.2rem; }
      .proofbar__badges { flex-wrap: wrap; }
      .steps { grid-template-columns: 1fr; }
      .step::after { display: none; }
      /* full-width, thumb-friendly CTAs */
      .hero__actions { flex-direction: column; align-items: stretch; }
      .hero__actions .btn, .steps-cta .btn { width: 100%; justify-content: center; }
      .btn { padding-block: .9rem; }
      .hero h1 { font-size: clamp(2.1rem, 8vw, 2.7rem); }
      .section { padding: 2.4rem 0; }
      .ctaband .hero__actions .btn { width: 100%; }
    }

    /* ---------- Interior page hero (reuses .feature) ---------- */
    .page-hero { padding-top: 1.8rem; }
    .page-hero .feature { min-height: 380px; }
    .crumbs { font-size: .85rem; color: #b8caea; margin-bottom: .6rem; }
    .crumbs a { color: #b8caea; text-decoration: none; }
    .crumbs a:hover { color: #fff; }
    /* prose + checklists for detail pages */
    .prose { max-width: 720px; }
    .prose p { color: var(--color-text-muted); font-size: 1.08rem; line-height: 1.7; margin: 1rem 0; }
    .checklist { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: 1rem; }
    .checklist li { display: flex; gap: .8rem; align-items: flex-start; }
    .checklist svg { width: 24px; height: 24px; color: var(--color-accent); flex: none; margin-top: 2px; }
    .checklist b { color: var(--navy); }
    .split2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
    .split2 img.feature-photo { width: 100%; border-radius: var(--radius-2xl); object-fit: cover; aspect-ratio: 4/3; box-shadow: 0 20px 50px rgba(13,32,68,.16); }
    .cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
    .infocard { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.6rem; }
    .infocard h3 { font-size: 1.2rem; }
    .infocard p { color: var(--color-text-muted); margin-top: .5rem; line-height: 1.6; }
    /* contact */
    .contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.4rem; align-items: start; }
    .infolist { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
    .infolist li { display: flex; gap: .8rem; align-items: flex-start; }
    .infolist svg { width: 22px; height: 22px; color: var(--color-accent); flex: none; margin-top: 3px; }
    .infolist b { display: block; color: var(--navy); font-family: var(--font-display); }
    .map { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); box-shadow: 0 12px 30px rgba(13,32,68,.10); margin-top: 1.4rem; }
    .map iframe { display: block; width: 100%; height: 320px; border: 0; }
    /* legal */
    .legal { max-width: 760px; }
    .legal h2 { font-size: 1.4rem; margin-top: 2rem; }
    .legal p { color: var(--color-text-muted); line-height: 1.7; margin-top: .6rem; }
    @media (max-width: 980px) {
      .split2, .contact-grid { grid-template-columns: 1fr; }
      .cardgrid { grid-template-columns: 1fr; }
    }