/*
Theme Name: Zyrah Group
Theme URI: https://www.zyrahgroup.com
Author: Zyrah Group
Author URI: https://www.zyrahgroup.com
Description: Custom single-page corporate theme for Zyrah Group - a diversified group of specialist manufacturers spanning architectural railings, engineering goods, formwork, automotive aftermarket products and packaged foods.
Version: 1.0
License: Proprietary
Text Domain: zyrah-group
*/


  :root{
    --navy:#262B5C;
    --navy-deep:#1B1F45;
    --navy-light:#3B4390;
    --gold:#C9A227;
    --gold-light:#E4C158;
    --black:#101018;
    --charcoal:#17181F;
    --white:#FFFFFF;
    --off:#F6F5F0;
    --off-2:#EDEBE3;
    --grey:#8C8C93;
    --grey-line:#DBD9D1;

    --font-display:'Barlow Condensed', sans-serif;
    --font-body:'Inter', sans-serif;

    --ease:cubic-bezier(.4,0,.2,1);
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    color:var(--black);
    background:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  ::selection{background:var(--gold);color:var(--navy-deep);}

  .wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 32px;
  }

  h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.02em;
    line-height:1.05;
  }

  .eyebrow{
    font-family:var(--font-body);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:28px;
    height:2px;
    background:var(--gold);
    display:inline-block;
  }
  .eyebrow.on-dark{ color:var(--gold-light); }

  .section-head{
    max-width:640px;
    margin-bottom:48px;
  }
  .section-head h2{
    font-size:clamp(30px,4vw,46px);
    margin-bottom:16px;
  }
  .section-head p{
    color:var(--grey);
    font-size:15.5px;
    max-width:560px;
  }
  .section-head.on-dark h2{ color:var(--white); }
  .section-head.on-dark p{ color:#B9BAD1; }

  section{ position:relative; }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 30px;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    border:2px solid var(--gold);
    background:var(--gold);
    color:var(--navy-deep);
    cursor:pointer;
    transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px -8px rgba(201,162,39,.55);
  }
  .btn.secondary{
    background:transparent;
    color:var(--white);
    border:2px solid rgba(255,255,255,.35);
  }
  .btn.secondary:hover{
    border-color:var(--white);
    background:rgba(255,255,255,.06);
    box-shadow:none;
  }
  .btn.dark{
    background:var(--navy);
    border-color:var(--navy);
    color:var(--white);
  }
  .btn.dark:hover{
    background:var(--navy-deep);
    box-shadow:0 12px 24px -8px rgba(38,43,92,.45);
  }
  .btn.outline-navy{
    background:transparent;
    border:2px solid var(--navy);
    color:var(--navy);
  }
  .btn.outline-navy:hover{
    background:var(--navy);
    color:var(--white);
    box-shadow:0 12px 24px -8px rgba(38,43,92,.35);
  }
  .btn.block{ width:100%; justify-content:center; }

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  .reveal-delay-1.is-visible{ transition-delay:.08s; }
  .reveal-delay-2.is-visible{ transition-delay:.16s; }
  .reveal-delay-3.is-visible{ transition-delay:.24s; }
  .reveal-delay-4.is-visible{ transition-delay:.32s; }

  /* ---------- Geometric pattern helpers (no images) ---------- */
  .pattern-grid{
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:44px 44px;
  }
  .pattern-grid-dark{
    background-image:
      linear-gradient(rgba(38,43,92,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(38,43,92,.08) 1px, transparent 1px);
    background-size:36px 36px;
  }
  .pattern-diag{
    background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px);
  }
  .pattern-dots{
    background-image:radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px);
    background-size:22px 22px;
  }

  .corner-frame{ position:relative; }
  .corner-frame::before,
  .corner-frame::after{
    content:"";
    position:absolute;
    width:26px;
    height:26px;
    border:2px solid var(--gold);
    opacity:.9;
  }
  .corner-frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
  .corner-frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

  /* ---------- Placeholder blocks ---------- */
  .ph-logo{
    background:var(--off-2);
    border:1.5px dashed #C6C3B7;
    color:var(--grey);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-body);
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-align:center;
    padding:6px;
  }
  .ph-visual{
    border:1.5px dashed rgba(255,255,255,.28);
    color:rgba(255,255,255,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-body);
    font-size:12px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    text-align:center;
    padding:10px;
  }
  .co-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--white);
    padding:10px;
  }
  .co-logo img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  .hero-visual{ display:flex; align-items:center; justify-content:center; }
  .hero-visual svg{ width:auto; height:70%; max-height:180px; color:var(--gold-light); position:relative; z-index:2; }
  .about-visual{ display:flex; align-items:center; justify-content:center; }
  .about-visual svg{ width:34%; height:auto; color:var(--gold); position:relative; z-index:1; opacity:.9; }
  .about-visual .logo-watermark{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:0;
  }
  .about-visual .logo-watermark img{
    width:70%;
    opacity:.08;
    filter:brightness(0) invert(1);
  }
  .milestone-card .icon-svg,
  .cap-card .icon-svg{
    width:36px;height:36px;
    margin-bottom:14px;
    color:var(--gold);
  }
  .cap-card .icon-svg{ color:var(--gold); }
  .news-item .thumb{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--navy);
  }
  .news-item .thumb svg{ width:34px; height:34px; }
  .presence-map svg.map-illustration{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  /* ================= HEADER ================= */
  header{
    position:sticky;
    top:0;
    z-index:200;
    background:var(--navy-deep);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 32px;
    max-width:1240px;
    margin:0 auto;
    gap:24px;
  }
  .brand-logo{ height:34px; width:auto; }
  nav ul{
    list-style:none;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
  }
  nav a{
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.03em;
    color:#D6D7E8;
    padding:10px 14px;
    position:relative;
    transition:color .25s var(--ease);
  }
  nav a::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:6px;
    height:2px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s var(--ease);
  }
  nav a:hover{ color:var(--white); }
  nav a:hover::after{ transform:scaleX(1); }
  .nav-cta{
    padding:10px 20px;
    font-size:11.5px;
  }
  .menu-toggle{
    display:none;
    width:42px;height:34px;
    background:transparent;
    border:1px solid rgba(255,255,255,.3);
    color:var(--white);
    font-size:11px;
    letter-spacing:.05em;
    cursor:pointer;
  }

  /* ================= HERO ================= */
  .hero-panel{
    background:var(--navy-deep);
    background-image:
      radial-gradient(circle at 15% 15%, rgba(201,162,39,.13), transparent 45%),
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:auto, 46px 46px, 46px 46px;
    padding:120px 0 90px;
    position:relative;
    overflow:hidden;
  }
  .hero-panel::after{
    content:"";
    position:absolute;
    right:-120px;
    top:-120px;
    width:420px;
    height:420px;
    border:2px solid rgba(201,162,39,.28);
    transform:rotate(20deg);
    pointer-events:none;
  }
  .hero-inner{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
  }
  .hero-inner h1{
    font-size:clamp(42px,6.4vw,88px);
    color:var(--white);
    max-width:920px;
  }
  .hero-inner h1 span{ color:var(--gold-light); }
  .hero-sub{
    color:#C3C5DC;
    font-size:16.5px;
    max-width:560px;
  }
  .cta-row{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:6px;
  }
  .hero-visual{
    width:100%;
    height:240px;
    margin-top:34px;
    position:relative;
    background:linear-gradient(120deg, rgba(201,162,39,.08), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.14);
  }
  .hero-visual .hv-line{
    position:absolute;
    background:rgba(201,162,39,.5);
  }

  /* Companies snapshot panel */
  .snapshot-panel{
    background:var(--off);
    padding:64px 0 70px;
  }
  .snapshot-label{
    font-family:var(--font-body);
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--grey);
    margin-bottom:24px;
  }
  .grid-5{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
  }
  .co-tile{
    background:var(--white);
    border:1px solid var(--grey-line);
    padding:22px 16px;
    text-align:center;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  }
  .co-tile:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 30px -16px rgba(38,43,92,.28);
    border-color:var(--gold);
  }
  .co-tile .ph-logo{ height:52px; margin-bottom:14px; }
  .co-tile .co-logo{ height:52px; margin-bottom:14px; }
  .co-tile h3{
    font-size:17px;
    color:var(--navy);
    letter-spacing:.02em;
  }
  .co-tile p{
    font-size:11.5px;
    color:var(--grey);
    margin-top:4px;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  .facts-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--grey-line);
    margin-top:44px;
    border:1px solid var(--grey-line);
  }
  .fact{
    background:var(--white);
    padding:30px 14px;
    text-align:center;
  }
  .fact .num{
    font-family:var(--font-display);
    font-size:40px;
    font-weight:700;
    color:var(--navy);
    line-height:1;
  }
  .fact .num span{ color:var(--gold); }
  .fact .lbl{
    margin-top:8px;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--grey);
  }

  /* ================= ABOUT ================= */
  #about{
    background:var(--white);
    padding:110px 0;
  }
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
  }
  .about-visual{
    height:360px;
    background:var(--navy-deep);
    position:relative;
    overflow:hidden;
  }
  .about-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size:32px 32px;
  }
  .about-visual .badge{
    position:absolute;
    bottom:26px;
    left:26px;
    z-index:2;
    color:var(--white);
    font-family:var(--font-display);
    font-size:15px;
    letter-spacing:.06em;
    border-left:3px solid var(--gold);
    padding-left:14px;
  }
  .about-visual .badge small{
    display:block;
    font-family:var(--font-body);
    font-size:10.5px;
    color:#B9BAD1;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-top:4px;
  }
  .about-copy p{
    color:#4B4C57;
    font-size:15px;
    margin-bottom:16px;
    max-width:520px;
  }
  .milestone-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:64px;
  }
  .milestone-card{
    background:var(--off);
    border-top:3px solid var(--gold);
    padding:22px 18px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .milestone-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 28px -18px rgba(38,43,92,.3);
  }
  .milestone-card .icon{
    width:36px;height:36px;
    border:2px solid var(--navy);
    margin-bottom:14px;
    position:relative;
  }
  .milestone-card .icon::before{
    content:"";
    position:absolute;
    inset:6px;
    background:var(--gold);
  }
  .milestone-card p{
    font-size:13px;
    color:var(--grey);
  }
  .milestone-card p.h{
    font-family:var(--font-display);
    font-size:15px;
    color:var(--navy);
    text-transform:uppercase;
    letter-spacing:.02em;
    margin-bottom:6px;
  }

  /* ================= OUR COMPANIES ================= */
  #companies{
    background:var(--off);
    padding:110px 0;
  }
  .company-card{
    background:var(--white);
    border:1px solid var(--grey-line);
    display:flex;
    flex-direction:column;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .company-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 40px -22px rgba(38,43,92,.32);
  }
  .company-card .head{
    background:var(--navy-deep);
    padding:26px 18px 20px;
    position:relative;
  }
  .company-card .head .ph-logo{
    height:56px;
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.28);
    color:rgba(255,255,255,.6);
  }
  .company-card .head .co-logo{
    height:56px;
    background:var(--white);
  }
  .company-card .body{
    padding:20px 18px 26px;
    flex:1;
    display:flex;
    flex-direction:column;
  }
  .company-card h3{
    font-size:19px;
    color:var(--navy);
    margin-bottom:4px;
  }
  .company-card .sector{
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:14px;
  }
  .company-card ul{
    list-style:none;
    margin-bottom:20px;
    flex:1;
  }
  .company-card li{
    font-size:12.5px;
    color:var(--grey);
    padding-left:16px;
    position:relative;
    margin-bottom:8px;
  }
  .company-card li::before{
    content:"";
    position:absolute;
    left:0;
    top:7px;
    width:6px;
    height:6px;
    background:var(--gold);
  }

  /* ================= GLOBAL PRESENCE ================= */
  #presence{
    background:var(--navy-deep);
    padding:110px 0;
    position:relative;
    overflow:hidden;
  }
  #presence::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px);
    background-size:26px 26px;
    opacity:.5;
  }
  .presence-map{
    position:relative;
    height:340px;
    border:1px solid rgba(255,255,255,.16);
    background:linear-gradient(160deg, rgba(201,162,39,.07), transparent 60%);
    margin-bottom:28px;
    overflow:hidden;
  }
  .presence-map .marker{
    position:absolute;
    width:11px;height:11px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 6px rgba(201,162,39,.18);
  }
  .presence-map .marker::after{
    content:attr(data-label);
    position:absolute;
    top:16px; left:50%;
    transform:translateX(-50%);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#E7E4D8;
    white-space:nowrap;
  }
  .presence-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    position:relative;
    z-index:2;
  }
  .presence-item{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.14);
    padding:16px;
    font-size:13px;
    color:#DADAEA;
  }
  .presence-item .tag{
    display:block;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gold-light);
    margin-bottom:6px;
  }

  /* ================= QUALITY ================= */
  #quality{
    background:var(--black);
    padding:110px 0;
  }
  .cert-row{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    margin-bottom:56px;
  }
  .cert-badge{
    width:104px;height:104px;
    border:2px solid var(--gold);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-family:var(--font-display);
    font-size:13px;
    letter-spacing:.03em;
    color:var(--white);
    background:radial-gradient(circle, rgba(201,162,39,.12), transparent 70%);
    transition:transform .3s var(--ease), background .3s var(--ease);
  }
  .cert-badge:hover{
    transform:translateY(-4px) scale(1.03);
    background:radial-gradient(circle, rgba(201,162,39,.26), transparent 70%);
  }
  .grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  .cap-card{
    background:var(--charcoal);
    border:1px solid rgba(255,255,255,.08);
    padding:28px 24px;
    transition:border-color .3s var(--ease), transform .3s var(--ease);
  }
  .cap-card:hover{
    border-color:var(--gold);
    transform:translateY(-5px);
  }
  .cap-card .icon{
    width:38px;height:38px;
    border:2px solid var(--gold);
    margin-bottom:18px;
    position:relative;
  }
  .cap-card .icon::before{
    content:"";
    position:absolute;
    inset:6px;
    background:var(--white);
    opacity:.9;
  }
  .cap-card h3{
    color:var(--white);
    font-size:17px;
    margin-bottom:8px;
  }
  .cap-card p{
    font-size:13px;
    color:#9B9BA6;
  }

  /* ================= NEWS ================= */
  #news{
    background:var(--white);
    padding:110px 0;
  }
  .news-list{
    display:flex;
    flex-direction:column;
    gap:1px;
    background:var(--grey-line);
    border:1px solid var(--grey-line);
  }
  .news-item{
    display:flex;
    gap:24px;
    background:var(--white);
    padding:22px;
    align-items:center;
    transition:background .25s var(--ease), padding-left .25s var(--ease);
  }
  .news-item:hover{
    background:var(--off);
    padding-left:30px;
  }
  .news-item .thumb{
    width:96px;height:70px;
    flex-shrink:0;
    background:var(--off-2);
    border:1px dashed #C6C3B7;
    background-image:repeating-linear-gradient(135deg, rgba(38,43,92,.06) 0 2px, transparent 2px 12px);
  }
  .news-item .meta{
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:6px;
  }
  .news-item h3{
    font-size:17px;
    color:var(--navy);
    text-transform:none;
    letter-spacing:0;
    font-weight:700;
  }

  /* ================= CONTACT ================= */
  #contact{
    background:var(--off);
    padding:110px 0;
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
  }
  .contact-card{
    background:var(--white);
    border:1px solid var(--grey-line);
    padding:22px;
    font-size:13.5px;
  }
  .contact-card.head-office{
    border-left:4px solid var(--gold);
  }
  .contact-card h3{
    font-size:16px;
    color:var(--navy);
    margin-bottom:8px;
  }
  .contact-card p{ color:var(--grey); margin-bottom:4px; }
  .contact-mini-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:16px;
  }
  .form-box{
    background:var(--navy-deep);
    padding:32px;
    position:relative;
  }
  .form-box h3{
    color:var(--white);
    font-size:19px;
    margin-bottom:20px;
  }
  .form-field{
    height:46px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    margin-bottom:14px;
    display:flex;
    align-items:center;
    padding:0 14px;
    font-size:12.5px;
    color:#B9BAD1;
  }
  .form-field.tall{ height:100px; align-items:flex-start; padding-top:12px; }

  /* ================= FOOTER ================= */
  footer{
    background:var(--black);
    color:var(--white);
    padding:64px 0 24px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:32px;
    margin-bottom:44px;
    padding-bottom:44px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .footer-logo{ height:30px; margin-bottom:16px; }
  footer .desc{
    font-size:13px;
    color:#8B8B96;
    max-width:280px;
  }
  footer h4{
    font-family:var(--font-body);
    font-size:11.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--gold-light);
    margin-bottom:16px;
  }
  footer ul{ list-style:none; }
  footer li{ margin-bottom:10px; }
  footer li a{
    font-size:13px;
    color:#B4B4C0;
    transition:color .25s var(--ease);
  }
  footer li a:hover{ color:var(--white); }
  .footer-bottom{
    font-size:11.5px;
    color:#6E6E78;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }

  /* ---------- Responsive ---------- */
  @media (max-width:1000px){
    .grid-5{ grid-template-columns:repeat(3,1fr); }
    .grid-3{ grid-template-columns:repeat(2,1fr); }
    .facts-strip{ grid-template-columns:repeat(2,1fr); }
    .milestone-row{ grid-template-columns:repeat(2,1fr); }
    .presence-list{ grid-template-columns:repeat(2,1fr); }
    .about-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:760px){
    nav ul{
      display:none;
      position:absolute;
      top:66px;
      left:0;right:0;
      background:var(--navy-deep);
      flex-direction:column;
      gap:0;
      border-top:1px solid rgba(255,255,255,.08);
      border-bottom:1px solid rgba(255,255,255,.08);
      padding:6px 0;
    }
    nav ul.open{ display:flex; }
    nav a{ display:block; padding:14px 24px; }
    nav a::after{ display:none; }
    .menu-toggle{ display:block; }
    .nav-cta{ display:none; }
    .grid-5,.grid-3,.grid-2,.milestone-row{ grid-template-columns:1fr; }
    .facts-strip{ grid-template-columns:1fr 1fr; }
    .presence-list{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; }
    .hero-inner h1{ font-size:38px; }
  }