:root{
    --navy:#0F1B22; --navy-2:#16262F; --paper:#F3EFE6; --paper-line:#D9D0BC;
    --brass:#B4894A; --brass-dark:#8A6531; --oxide:#B5432E; --oxide-dark:#8C3120;
    --steel:#8598A0; --ink:#182422;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper);color:var(--ink);font-family:'Work Sans',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 40px;}
  .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.15em;text-transform:uppercase;color:var(--brass);}
  h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-0.01em;}

  nav{background:var(--navy);position:sticky;top:0;z-index:10;}
  .nav-inner{max-width:1080px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:16.5px;color:var(--paper);letter-spacing:-0.01em;line-height:1.2;max-width:190px;}
  .brand-sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--steel);letter-spacing:0.06em;margin-top:1px;}
  .nav-links{display:flex;align-items:center;gap:26px;font-size:14px;color:#C9D2D6;}
  .nav-links a{color:inherit;text-decoration:none;}
  .lang-switch{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#8598A0;display:flex;gap:4px;align-items:center;}
  .lang-switch a{color:#8598A0;text-decoration:none;}
  .lang-switch a:hover{color:var(--paper);}
  .lang-current{color:var(--brass);font-weight:600;}
  .lang-sep{color:#455158;}
  .storing-btn{background:var(--oxide);color:#fff!important;padding:10px 18px;border-radius:2px;font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px;}
  .storing-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

  .brands-strip{background:var(--paper);border-bottom:1px solid var(--paper-line);}
  .brands-inner{padding:12px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
  .brands-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--steel);letter-spacing:0.04em;}
  .brands-list{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--brass-dark);font-weight:500;letter-spacing:0.06em;}

  .hero{position:relative;color:var(--paper);padding:0;min-height:640px;display:flex;align-items:flex-end;overflow:hidden;}
  .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 42%;}
  .hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,34,0.45) 0%,rgba(15,27,34,0.7) 55%,rgba(15,27,34,0.97) 100%);}
  .hero-inner{position:relative;display:grid;grid-template-columns:1fr;gap:50px;align-items:end;padding:120px 0 64px;width:100%;}
  .hero-gold-rule{width:56px;height:2px;background:var(--brass);margin-bottom:22px;}
  .hero h1{font-size:42px;line-height:1.18;color:var(--paper);margin:16px 0 12px;max-width:680px;}
  .hero-tagline{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--brass);letter-spacing:0.03em;margin-bottom:22px;}
  .hero p{font-size:16.5px;color:#C7D0D3;max-width:520px;margin-bottom:30px;}
  .btn{font-family:'Work Sans',sans-serif;font-size:14.5px;font-weight:600;padding:13px 24px;border-radius:2px;text-decoration:none;display:inline-block;}
  .btn{transition:transform 0.18s ease, filter 0.18s ease;}
  .btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
  .btn-primary{background:var(--brass);color:var(--navy);}
  .btn-oxide{background:var(--oxide);color:#fff;}
  .btn-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#0F1B22!important;font-weight:600;font-size:13.5px;padding:10px 16px;border-radius:2px;text-decoration:none;}
  .btn-secondary{border:1px solid rgba(243,239,230,0.35);color:var(--paper);}
  .btn-row{display:flex;gap:14px;flex-wrap:wrap;}

  .divider{max-width:1080px;margin:0 auto;padding:0 40px;}
  .divider::after{content:"";display:block;height:1px;background:linear-gradient(90deg,var(--brass) 0%,var(--paper-line) 40%,transparent 100%);}

  .services{padding:84px 0;}
  .services-head{max-width:560px;margin-bottom:44px;}
  .services-head h2{font-size:30px;margin-top:14px;letter-spacing:-0.01em;}
  .service-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);}
  .service-card{background:var(--paper);padding:34px 30px;}
  .service-card{transition:transform 0.25s ease, box-shadow 0.25s ease;}
  .service-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,27,34,0.1);}
  .service-card.alert{background:#F7EAE4;}
  .service-card .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:14px;display:inline-block;}
  .service-card.alert .tag{color:var(--oxide-dark);}
  .service-card:not(.alert) .tag{color:var(--brass-dark);}
  .service-card h3{font-size:22px;margin-bottom:12px;}
  .service-card p{font-size:14.5px;color:#4E5A55;margin-bottom:16px;}
  .service-card a{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:500;text-decoration:none;}
  .service-card.alert a{color:var(--oxide-dark);}
  .service-card:not(.alert) a{color:var(--brass-dark);}

  .system{background:var(--navy-2);color:var(--paper);padding:88px 0;}
  .system-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .system .eyebrow{color:var(--brass);}
  .system h2{color:var(--paper);font-size:30px;margin:14px 0 16px;letter-spacing:-0.01em;}
  .system p{color:#AEBBC0;font-size:14.5px;margin-bottom:10px;}
  .feature-list{margin-top:22px;display:flex;flex-direction:column;gap:14px;}
  .feature{display:flex;gap:12px;align-items:flex-start;}
  .feature-mark{width:18px;height:18px;border:1.3px solid var(--brass);border-radius:50%;flex-shrink:0;margin-top:2px;position:relative;}
  .feature-mark::after{content:"";position:absolute;left:4px;top:4px;width:6px;height:6px;background:var(--brass);border-radius:50%;}
  .feature-text{font-size:14px;color:#D6DCDD;}
  .feature-text b{color:var(--paper);}
  .status-card{background:rgba(243,239,230,0.04);border:1px solid rgba(243,239,230,0.15);border-radius:4px;padding:26px;}
  .status-title{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);letter-spacing:0.05em;margin-bottom:18px;}
  .status-row{display:flex;justify-content:space-between;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:12.5px;padding:10px 0;border-top:1px solid rgba(243,239,230,0.1);}
  .status-row:first-of-type{border-top:none;}
  .status-row .v-done{color:var(--brass);}
  .status-row .v-active{color:#E7A98F;}

  .work{padding:0 0 88px;}
  .work-inner{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--paper-line);}
  .work-photo{position:relative;}
  .work-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .work-photo-tag{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(15,27,34,0.85),transparent);padding:30px 16px 12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#D8CBA8;letter-spacing:0.04em;}
  .work-text{padding:40px;display:flex;flex-direction:column;justify-content:center;background:var(--navy);color:var(--paper);}
  .work-text .eyebrow{color:var(--brass);margin-bottom:12px;}
  .work-text h3{color:var(--paper);font-size:22px;margin-bottom:12px;}
  .work-text p{font-size:14px;color:#B9C4C8;}

  .storing-form{background:var(--paper);border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);padding:80px 0;}
  .form-head{max-width:560px;margin-bottom:36px;}
  .form-head .eyebrow{color:var(--oxide-dark);}
  .form-head h2{font-size:30px;margin-top:14px;letter-spacing:-0.01em;}
  .storing-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .storing-grid .full{grid-column:1/-1;}
  .storing-grid label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);letter-spacing:0.04em;margin-bottom:6px;text-transform:uppercase;}
  .storing-grid input, .storing-grid select, .storing-grid textarea{width:100%;padding:12px 14px;border:1px solid var(--paper-line);background:#fff;font-family:'Work Sans',sans-serif;font-size:14px;border-radius:2px;color:var(--ink);}
  .storing-grid button{margin-top:6px;}

  .contact{background:var(--navy);color:var(--paper);padding:80px 0;}
  .contact-inner{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px;}
  .contact h2{font-size:26px;color:var(--paper);margin-bottom:10px;}
  .contact-info{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#AEBBC0;line-height:2.1;}
  .contact-info strong{color:var(--paper);}

  footer{background:var(--navy);border-top:1px solid rgba(243,239,230,0.1);padding:20px 0;}
  .wa-float{position:fixed;bottom:22px;right:22px;width:54px;height:54px;background:#25D366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,0.35);z-index:20;text-decoration:none;}
  .wa-float{transition:transform 0.2s ease;}
  .wa-float:hover{transform:scale(1.08);}
  .reveal{opacity:0;transform:translateY(18px);transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.revealed{opacity:1;transform:translateY(0);}
  .footer-inner{max-width:1080px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);}

  @media (max-width:840px){
    .wrap{padding:0 22px;}
    .nav-inner{padding:14px 20px;flex-wrap:wrap;row-gap:10px;}
    .nav-links{gap:14px;font-size:13px;}
    .storing-btn{padding:9px 14px;font-size:12.5px;}
    .hero-inner,.system-inner,.work-inner{grid-template-columns:1fr;}
    .service-grid,.storing-grid{grid-template-columns:1fr;}
    .nav-links a{display:none;}
    .nav-links .storing-btn{display:flex;}
    .nav-links .lang-switch{display:flex;}
    .nav-links .lang-switch a{display:inline;}
    .hero{min-height:0;}
    .hero-inner{padding:72px 0 44px;}
    .hero h1{font-size:30px;line-height:1.22;}
    .hero p{font-size:15px;}
    .services,.system,.storing-form,.contact{padding:56px 0;}
    .services-head h2,.system h2,.form-head h2{font-size:25px;}
    .service-card{padding:28px 24px;}
    .service-card h3{font-size:19px;}
    .work-photo{height:240px;}
    .work-text{padding:32px 26px;}
    .contact-inner{flex-direction:column;align-items:flex-start;gap:22px;}
    .footer-inner{flex-direction:column;gap:6px;}
  }

  @media (max-width:480px){
    .wrap{padding:0 16px;}
    .nav-inner{padding:12px 16px;}
    .brand-name{font-size:14.5px;max-width:150px;}
    .brand-sub{font-size:8.5px;}
    .hero h1{font-size:25px;}
    .hero-tagline{font-size:12.5px;}
    .hero p{font-size:14px;}
    .btn-row{flex-direction:column;align-items:stretch;}
    .btn-row .btn{text-align:center;}
    .services-head h2,.system h2,.form-head h2{font-size:21px;}
    .service-card h3{font-size:18px;}
    .work-photo{height:190px;}
    .status-card{padding:20px;}
  }

/* ── Shared additions: navigation dropdown, content pages, FAQ, CTAs ───────── */

.nav-links .nav-drop{position:relative;}
.nav-links .nav-drop > a{display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.nav-links .nav-drop > a::after{content:"";width:5px;height:5px;border-right:1.2px solid #8598A0;border-bottom:1.2px solid #8598A0;transform:rotate(45deg);margin-top:-3px;}
.nav-menu{position:absolute;top:100%;left:-16px;margin-top:14px;background:var(--navy-2);border:1px solid rgba(243,239,230,0.14);min-width:290px;padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;box-shadow:0 18px 40px rgba(15,27,34,0.4);}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-menu a{display:block;padding:9px 20px;font-size:13.5px;color:#C9D2D6;white-space:nowrap;}
.nav-menu a:hover{background:rgba(180,137,74,0.14);color:var(--paper);}
.nav-menu .nav-menu-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--steel);padding:8px 20px 4px;}

.page-hero{position:relative;background:var(--navy);color:var(--paper);padding:64px 0 54px;overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 0%,rgba(180,137,74,0.18),transparent 55%);}
.page-hero-inner{position:relative;}
.page-hero h1{font-size:38px;line-height:1.16;color:var(--paper);margin:14px 0 14px;max-width:760px;}
.page-hero p.lede{font-size:17px;color:#C7D0D3;max-width:640px;margin-bottom:26px;}
.page-hero .hero-gold-rule{margin-bottom:18px;}

.crumbs{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.05em;color:var(--steel);padding:14px 0 0;}
.crumbs a{color:var(--steel);text-decoration:none;}
.crumbs a:hover{color:var(--brass);}
.crumbs span{color:#45535a;margin:0 6px;}

.quick-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(243,239,230,0.16);border:1px solid rgba(243,239,230,0.16);margin-top:34px;}
.quick-facts div{background:var(--navy);padding:16px 18px;}
.quick-facts dt{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.09em;text-transform:uppercase;color:var(--steel);margin-bottom:5px;}
.quick-facts dd{font-size:14px;color:var(--paper);}

.prose{padding:74px 0;}
.prose-inner{max-width:760px;}
.prose h2{font-size:28px;margin:0 0 16px;}
.prose h3{font-size:20px;margin:34px 0 10px;}
.prose p{font-size:16px;color:#3F4A47;margin-bottom:16px;}
.prose ul,.prose ol{margin:0 0 20px 20px;}
.prose li{font-size:15.5px;color:#3F4A47;margin-bottom:9px;}
.prose li b{color:var(--ink);}
.prose a{color:var(--brass-dark);text-decoration:underline;text-underline-offset:2px;}
.prose .eyebrow{margin-bottom:12px;display:block;}
.prose-section{margin-top:52px;}
.note{border-left:2px solid var(--brass);background:#EDE7DA;padding:16px 20px;font-size:14.5px;color:#4E5A55;margin:24px 0;}

.spec-table{width:100%;border-collapse:collapse;margin:20px 0 26px;font-size:14.5px;}
.spec-table th,.spec-table td{text-align:left;padding:11px 14px;border:1px solid var(--paper-line);vertical-align:top;}
.spec-table th{background:#EDE7DA;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--brass-dark);font-weight:500;}
.spec-table td{color:#3F4A47;}

.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);}
.link-card{background:var(--paper);padding:26px 24px;text-decoration:none;display:block;transition:transform .22s ease,box-shadow .22s ease;}
.link-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,27,34,0.1);}
.link-card .tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--brass-dark);display:block;margin-bottom:10px;}
.link-card h3{font-size:18.5px;margin-bottom:8px;color:var(--ink);}
.link-card p{font-size:14px;color:#4E5A55;margin:0;}
.link-card .go{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--brass-dark);margin-top:12px;display:block;}

.faq{background:#EDE7DA;border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);padding:74px 0;}
.faq-list{max-width:820px;margin-top:30px;}
.faq-item{border-top:1px solid var(--paper-line);padding:22px 0;}
.faq-item:last-child{border-bottom:1px solid var(--paper-line);}
.faq-item h3{font-size:18px;margin-bottom:8px;}
.faq-item p{font-size:15px;color:#4E5A55;}

.cta-band{background:var(--navy-2);color:var(--paper);padding:66px 0;}
.cta-band h2{font-size:27px;color:var(--paper);margin:12px 0 10px;}
.cta-band p{color:#AEBBC0;font-size:15px;max-width:520px;margin-bottom:24px;}
.cta-band .contact-line{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#AEBBC0;margin-top:20px;line-height:2;}
.cta-band .contact-line a{color:var(--paper);text-decoration:none;}
.cta-band .contact-line a:hover{color:var(--brass);}

.coverage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);margin-top:30px;}
.coverage-cell{background:var(--paper);padding:22px 22px;}
.coverage-cell h3{font-size:17px;margin-bottom:8px;}
.coverage-cell p{font-size:13.5px;color:#4E5A55;margin:0;}

.lang-note{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--steel);margin-top:26px;}
.lang-note a{color:var(--brass-dark);}

@media (max-width:840px){
  .page-hero h1{font-size:28px;}
  .page-hero p.lede{font-size:15.5px;}
  .quick-facts{grid-template-columns:1fr 1fr;}
  .link-grid,.coverage-grid{grid-template-columns:1fr;}
  .prose{padding:54px 0;}
  .prose h2{font-size:24px;}
  .faq,.cta-band{padding:54px 0;}
  .nav-menu{display:none;}
  .spec-table{font-size:13.5px;}
  .spec-table th,.spec-table td{padding:9px 10px;}
}
@media (max-width:480px){
  .page-hero h1{font-size:24px;}
  .quick-facts{grid-template-columns:1fr;}
}

/* ── Homepage hero trust row and services grid extensions ─────────────────── */
.hero-trust{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border-top:1px solid rgba(243,239,230,0.18);padding-top:16px;}
.hero-trust span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:#AEBBC0;padding-right:20px;margin-right:20px;border-right:1px solid rgba(243,239,230,0.16);}
.hero-trust span:last-child{border-right:none;margin-right:0;padding-right:0;}
.service-grid.three{grid-template-columns:repeat(3,1fr);}
.home-engines{padding:84px 0;background:#EDE7DA;border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);}
.home-engines h2{font-size:30px;margin-top:14px;}
.home-engines > .wrap > p{font-size:15.5px;color:#4E5A55;max-width:640px;margin:14px 0 32px;}
.home-intro{padding:80px 0 0;}
.home-intro-inner{max-width:760px;}
.home-intro h2{font-size:28px;margin-bottom:16px;}
.home-intro p{font-size:16px;color:#3F4A47;margin-bottom:16px;}
.home-intro a{color:var(--brass-dark);text-decoration:underline;text-underline-offset:2px;}
@media (max-width:840px){
  .service-grid.three{grid-template-columns:1fr;}
  .hero-trust span{border-right:none;padding-right:0;margin-right:0;width:100%;line-height:1.9;}
  .home-engines{padding:56px 0;}
  .home-engines h2{font-size:25px;}
  .home-intro{padding:56px 0 0;}
  .home-intro h2{font-size:24px;}
}

/* ── Mobile refinements: hamburger navigation, WhatsApp float, hero spacing ──
   Scoped to max-width:767px (nav) and max-width:840px (float/hero spacing).
   Nothing above 841px is altered, so the desktop layout is untouched.        */

/* Desktop: the collapse wrapper simply keeps the existing inline row spacing */
.nav-collapse{display:flex;align-items:center;gap:26px;}
.nav-toggle{display:none;}

/* Hamburger button */
.nav-toggle{background:transparent;border:1px solid rgba(243,239,230,0.26);border-radius:2px;width:42px;height:38px;padding:0;cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto;-webkit-tap-highlight-color:transparent;}
.nav-toggle:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
.nav-toggle-bars{display:block;position:relative;width:18px;height:12px;}
.nav-toggle-bars span{position:absolute;left:0;right:0;height:1.6px;background:var(--paper);transition:transform .2s ease,opacity .2s ease;}
.nav-toggle-bars span:nth-child(1){top:0;}
.nav-toggle-bars span:nth-child(2){top:5.2px;}
.nav-toggle-bars span:nth-child(3){top:10.4px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5.2px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5.2px) rotate(-45deg);}

/* Tablet band 768–840px: keep the inline links reachable (the older rule hid
   them without offering an alternative). Layout wraps, never overflows.      */
@media (min-width:768px) and (max-width:840px){
  .nav-collapse{gap:18px;}
  .nav-collapse > a{display:inline;}
  .nav-collapse .nav-drop > a{display:inline-flex;}
}

/* ── Below 768px: single-hand hamburger menu ───────────────────────────────── */
@media (max-width:767px){
  .nav-inner{flex-wrap:nowrap;align-items:center;gap:10px;padding:11px 16px;}
  .brand{flex:1 1 auto;min-width:0;gap:9px;}
  .brand svg{flex:0 0 auto;width:30px;height:30px;}
  .brand-name{font-size:13.5px;line-height:1.2;max-width:170px;overflow-wrap:break-word;}
  .brand-sub{display:none;}
  .nav-links{flex:0 0 auto;gap:8px;}
  .storing-btn{padding:9px 12px;font-size:11.5px;gap:6px;white-space:nowrap;}
  .storing-dot{width:6px;height:6px;}
  .nav-toggle{display:inline-flex;}

  /* The existing link row becomes a full-width drop-down panel */
  .nav-collapse{position:absolute;top:100%;left:0;right:0;display:block;gap:0;background:var(--navy-2);border-top:1px solid rgba(243,239,230,0.12);box-shadow:0 22px 40px rgba(15,27,34,0.45);padding:4px 0 10px;max-height:calc(100vh - 62px);overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;}
  .nav-collapse.open{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-collapse .nav-drop{display:block;position:static;}
  .nav-collapse .nav-drop > a{display:block;padding:13px 20px 9px;font-family:'Fraunces',serif;font-size:16px;color:var(--paper);}
  .nav-collapse .nav-drop > a::after{display:none;}
  .nav-collapse .nav-menu{display:block;position:static;opacity:1;visibility:visible;transform:none;margin:0;padding:0 0 8px;min-width:0;background:transparent;border:none;box-shadow:none;}
  .nav-collapse .nav-menu .nav-menu-label{display:none;}
  .nav-collapse .nav-menu a{display:block;padding:11px 20px 11px 34px;font-size:14px;white-space:normal;line-height:1.35;}
  .nav-collapse > a{display:block;padding:13px 20px;font-family:'Fraunces',serif;font-size:16px;color:var(--paper);}
  .nav-collapse .lang-switch{display:flex;gap:6px;padding:14px 20px 6px;margin-top:6px;border-top:1px solid rgba(243,239,230,0.12);font-size:13px;}
  .nav-collapse .lang-switch a{display:inline-block;padding:10px 10px;}
  .nav-collapse .lang-current{padding:10px 10px;}
  .nav-collapse .storing-btn{display:none;}
}

/* ── WhatsApp float: keeps its place, stays clear of content ───────────────── */
.wa-float{transition:transform .2s ease,opacity .25s ease,visibility .25s ease;}
.wa-float.wa-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.82);}
@media (max-width:840px){
  .wa-float{width:48px;height:48px;bottom:14px;right:14px;box-shadow:0 3px 12px rgba(0,0,0,0.32);}
  .wa-float svg{width:23px;height:23px;}
  footer{padding-bottom:70px;}
}

/* ── Hero: mobile spacing only (sizes, image and copy unchanged) ───────────── */
@media (max-width:767px){
  .hero-inner{padding:58px 0 42px;gap:24px;}
  .hero-gold-rule{margin-bottom:0;}
  .hero h1{margin:2px 0 0;}
  .hero-tagline{margin-bottom:0;line-height:1.65;}
  .hero p{margin-bottom:2px;line-height:1.62;}
  .btn-row{gap:12px;}
  .hero-trust{margin-top:6px;padding-top:14px;}
  .hero-trust span{line-height:1.85;}
}
@media (max-width:480px){
  .hero-inner{padding:50px 0 38px;gap:19px;}
  .btn-row{gap:10px;}
  .btn-row .btn{padding:14px 18px;}
  .hero-trust{margin-top:4px;padding-top:12px;}
}

/* ── Small-screen safety: nothing clipped, nothing sideways ────────────────── */
@media (max-width:480px){
  .spec-table{font-size:13px;}
  .spec-table th,.spec-table td{padding:9px 9px;overflow-wrap:break-word;}
  .crumbs{line-height:1.9;}
  .crumbs span{margin:0 5px;}
  .brands-inner{padding:10px 16px;}
  .contact-info,.cta-band .contact-line{overflow-wrap:break-word;}
  .footer-inner{padding:0 16px;}
}

/* Footer link columns: three across on desktop, single column on mobile
   (the column count moved out of the inline style so it can respond).       */
.footer-links{grid-template-columns:repeat(3,1fr);gap:26px;}
@media (max-width:840px){
  .footer-links{grid-template-columns:1fr;gap:20px;}
}

/* ── Mobile hero refinement, below 600px only ───────────────────────────────
   Scoped to .nl-home (the Dutch homepage body) and to the hero header plus
   the engine-brand strip directly above it. Nothing at 600px and up changes,
   and no other section, page or piece of copy is touched.                   */
@media (max-width:599px){
  /* The brand strip is a desktop framing device; on a phone it delays the
     hero by a full row without adding anything the hero doesn't say.        */
  .nl-home .brands-strip{display:none;}

  /* One supporting label instead of two: the brass tagline carries it, so the
     eyebrow's overlapping line drops out and the hierarchy gets shorter.     */
  .nl-home .hero .eyebrow{display:none;}

  /* Same photograph, framed lower so the phone crop lands on the vessel
     instead of empty sky, with a deeper scrim under the copy: the shot still
     reads at the top while the text sits on near-solid navy.                */
  .nl-home .hero-bg{background-position:center 58%;}
  .nl-home .hero-scrim{background:linear-gradient(180deg,rgba(15,27,34,0.66) 0%,rgba(15,27,34,0.82) 46%,rgba(15,27,34,0.96) 100%);}

  /* Side padding restored: the shorthand on .hero-inner cancels .wrap's own
     gutter, so on a phone the copy was running into both screen edges. These
     values match the gutter the sections below the hero already use.
     Grid gap off — each element sets its own margin, so the rhythm is
     deliberate rather than one uniform gap between seven items.             */
  .nl-home .hero-inner{padding:44px 22px 38px;gap:0;}
  .nl-home .hero-gold-rule{width:40px;margin:0 0 18px;}
  .nl-home .hero h1{font-size:clamp(20px,5.4vw,23px);line-height:1.28;letter-spacing:-0.005em;margin:0 0 14px;}
  .nl-home .hero-tagline{font-size:11px;line-height:1.75;letter-spacing:0.06em;margin:0 0 16px;}
  .nl-home .hero p{font-size:14.5px;line-height:1.66;color:#CFD7DA;margin:0 0 24px;}

  /* Primary action leads; the emergency line stays put but stops shouting. */
  .nl-home .hero .btn-row{flex-direction:column;align-items:stretch;gap:12px;}
  .nl-home .hero .btn-row .btn-primary{order:1;text-align:center;padding:15px 20px;font-size:15px;}
  .nl-home .hero .btn-row .btn-oxide{order:2;align-self:flex-start;padding:12px 16px;font-size:13px;letter-spacing:0.01em;}
  .nl-home .hero .btn-row .btn-secondary{display:none;}

  /* Credentials as one quiet run of text instead of a four-row stack. Inline
     flow rather than flex, so the line breaks fall between words instead of
     leaving a half-empty row after each item.                               */
  .nl-home .hero-trust{display:block;margin-top:26px;padding-top:14px;}
  .nl-home .hero-trust span{display:inline;width:auto;font-size:10px;line-height:2;letter-spacing:0.05em;color:#9EACB2;padding-right:0;margin-right:0;border-right:none;}
  .nl-home .hero-trust span::after{content:" · ";color:rgba(243,239,230,0.32);}
  .nl-home .hero-trust span:last-child::after{content:none;}
}

/* Narrow phones: match the 16px gutter the rest of the page drops to here.  */
@media (max-width:480px){
  .nl-home .hero-inner{padding:40px 16px 34px;}
}

/* ── Phone layout pass — below 600px only ───────────────────────────────────
   One gutter, one vertical rhythm and one type scale for phones. Everything
   here sits inside max-width:599px, so 600px and up is byte-for-byte the
   layout it was: same markup, same copy, same colours, same desktop grid.
   A handful of rules carry !important purely to reach past inline style
   attributes in the HTML, which cannot be overridden any other way.        */
@media (max-width:599px){

  /* 1 ── One gutter for every band ─────────────────────────────────────────
     Sections used 16px, 22px and 40px gutters, and the hero and the "our
     work" heading carried shorthand padding of their own that cancelled the
     gutter completely — both headings ran hard into the screen edges. Every
     full-width band now starts on the same vertical line.                  */
  :root{--gutter:18px;}
  .wrap{padding:0 var(--gutter);}
  .nav-inner{padding:11px var(--gutter);}
  .brands-inner{padding:9px var(--gutter);}
  .divider{padding:0 var(--gutter);}
  .footer-inner{padding:0 var(--gutter);}
  .hero-inner{padding:46px var(--gutter) 42px;gap:0;}
  .nl-home .hero-inner{padding-left:var(--gutter);padding-right:var(--gutter);}
  .work > .wrap:first-child{padding:44px var(--gutter) 0!important;}

  /* 2 ── Nothing wider than the screen ────────────────────────────────────*/
  h1,h2,h3{overflow-wrap:break-word;}
  img{max-width:100%;}
  .contact-info,.cta-band .contact-line,.spec-table td,.spec-table th{overflow-wrap:break-word;}

  /* 3 ── Hero: same photograph and copy, spaced element by element instead
         of one uniform grid gap, so the rhythm is deliberate.              */
  .hero-gold-rule{width:44px;margin:0 0 16px;}
  .hero .eyebrow{font-size:11.5px!important;letter-spacing:0.11em;line-height:1.7;margin:0 0 10px;}
  .hero h1{font-size:clamp(23px,6.1vw,26px);line-height:1.25;margin:0 0 12px;}
  .hero-tagline{font-size:11.5px;letter-spacing:0.05em;line-height:1.75;margin:0 0 16px;}
  .hero p{font-size:15px;line-height:1.65;margin:0 0 22px;}
  .hero-trust{margin-top:22px;padding-top:14px;}
  .hero-trust span{font-size:10.5px;line-height:1.95;}

  /* 4 ── Buttons: one width, one height, one gap, wherever they appear ────*/
  .btn-row{flex-direction:column;align-items:stretch;gap:10px;}
  .btn-row .btn{text-align:center;padding:14px 18px;font-size:14.5px;}
  .services .wrap > div > .btn{display:block;width:100%;text-align:center;padding:14px 18px;font-size:14.5px;}
  .services .wrap > div > .btn + .btn{margin-top:10px;}
  .storing-grid button{width:100%;padding:14px 18px;}
  .btn-wa{padding:12px 16px;}

  /* 5 ── Vertical rhythm: every section band gets the same breathing room,
         replacing the 54/56/74/88px mix that left holes mid-scroll.       */
  .services,.home-engines,.system,.storing-form,.contact,.prose,.faq,.cta-band{padding:48px 0;}
  .home-intro{padding:48px 0 34px;}
  .work{padding:0 0 48px;}
  .faq[style]{margin-top:44px!important;}
  .page-hero{padding:44px 0 40px;}

  /* 6 ── Type scale: headings that were set anywhere from 21px to 30px now
         land on one step, small enough to fit and stay readable.          */
  h2[style]{font-size:23px!important;}
  .home-intro h2,.services-head h2,.home-engines h2,.system h2,
  .form-head h2,.contact h2,.cta-band h2{font-size:23px;line-height:1.28;}
  .prose h2{font-size:23px;line-height:1.28;margin:0 0 14px;}
  .page-hero h1{font-size:clamp(22px,5.9vw,25px);line-height:1.24;}
  .page-hero p.lede{font-size:15px;line-height:1.62;}
  .service-card h3,.link-card h3,.coverage-cell h3,.faq-item h3,
  .work-text h3,.prose h3{font-size:18px;line-height:1.32;}

  /* 7 ── Body copy, and the same step from eyebrow to heading everywhere ──*/
  .home-intro h2,.home-engines h2,.services-head h2,
  .system h2,.form-head h2{margin-top:10px;}
  .services-head,.form-head{margin-bottom:22px;}
  .home-intro p,.prose p{font-size:15.5px;line-height:1.62;margin-bottom:14px;}
  .prose li{font-size:15px;}
  .home-engines > .wrap > p{font-size:15px;margin:12px 0 22px;}
  .system p{font-size:14.5px;}
  .faq-item p{font-size:14.5px;line-height:1.6;}

  /* 8 ── Cards: full bleed inside the gutter, with padding trimmed so the
         card text sits close to the heading line above it.                */
  .service-card{padding:22px 18px;}
  .service-card p{font-size:14.5px;margin-bottom:14px;}
  .link-grid,.coverage-grid{margin-top:22px;}
  .link-card{padding:22px 18px;}
  .coverage-cell{padding:20px 18px;}
  .faq-list{margin-top:20px;}
  .faq-item{padding:18px 0;}
  .system-inner{gap:26px;}
  .feature-list{margin-top:18px;gap:12px;}
  .status-card{padding:18px;}
  .storing-grid{gap:14px;}
  .contact-inner{gap:24px;}
  .footer-links{gap:18px;}

  /* 9 ── Images keep their proportions instead of being squeezed into a
         190px letterbox strip.                                            */
  .work-photo{height:auto;aspect-ratio:4/3;}
  .work-text{padding:26px 18px;}
}