:root{
    --bg:#080B12;
    --bg-2:#0B1019;
    --surface:#10161F;
    --surface-2:#161E2A;
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.04);
    --ink:#EDF2F9;
    --muted:#94A2B8;
    --muted-2:#6B788C;
    --gold:#E8B44C;
    --gold-2:#F4D58B;
    --gold-deep:#B9842B;
    --sky:#5FA8CC;
    --r:18px;
    --maxw:1240px;
    --ff-disp:'Reem Kufi', 'Tajawal', sans-serif;
    --ff-body:'Tajawal', sans-serif;
    --ff-num:'Sora', 'Tajawal', sans-serif;
  }
  html[dir="ltr"]{ --ff-disp:'Sora', sans-serif; --ff-body:'Sora', sans-serif; }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body{
    font-family:var(--ff-body);
    background:var(--bg);
    color:var(--ink);
    line-height:1.75;
    overflow-x:hidden;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--gold); color:#0a0a0a; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  /* film grain overlay */
  body::after{
    content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  section{ position:relative; }

  .eyebrow{
    font-family:var(--ff-num); font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
    color:var(--gold); font-weight:600; display:inline-flex; align-items:center; gap:.7em;
  }
  .eyebrow::before{ content:""; width:30px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
  html[dir="rtl"] .eyebrow::before{ background:linear-gradient(270deg,transparent,var(--gold)); }

  h1,h2,h3{ font-family:var(--ff-disp); font-weight:700; line-height:1.15; letter-spacing:-.01em; }
  .sec-title{ font-size:clamp(2rem,4.6vw,3.3rem); margin:.4em 0 .35em; }
  .sec-intro{ color:var(--muted); max-width:560px; font-size:1.05rem; }
  .num{ font-family:var(--ff-num); font-variant-numeric:tabular-nums; }

  /* ─────────────────── NAV ─────────────────── */
  header{
    position:fixed; top:0; inset-inline:0; z-index:1000;
    transition:background .4s ease, backdrop-filter .4s, border-color .4s, padding .4s;
    border-bottom:1px solid transparent; padding:20px 0;
  }
  header.scrolled{
    background:rgba(8,11,18,.72); backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid var(--line); padding:13px 0;
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .brand{ display:flex; align-items:center; gap:13px; }
  .logo{
    width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
    background:linear-gradient(135deg,var(--gold),var(--gold-deep));
    box-shadow:0 6px 22px -6px rgba(232,180,76,.55); flex:none;
    font-family:var(--ff-disp); font-weight:700; color:#0a0a0a; font-size:1.05rem;
  }
  .brand b{ font-family:var(--ff-disp); font-size:1.06rem; font-weight:600; display:block; line-height:1.25; }
  .brand span{ font-size:.72rem; color:var(--muted-2); letter-spacing:.05em; font-family:var(--ff-num); }
  .nav-links{ display:flex; gap:30px; align-items:center; }
  .nav-links a{ font-size:.95rem; color:var(--muted); font-weight:500; position:relative; transition:color .25s; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a::after{ content:""; position:absolute; bottom:-6px; inset-inline:0; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .3s; transform-origin:center; }
  .nav-links a:hover::after{ transform:scaleX(1); }
  .nav-right{ display:flex; align-items:center; gap:14px; }
  .lang-btn{
    font-family:var(--ff-num); font-size:.8rem; font-weight:600; letter-spacing:.05em;
    background:transparent; border:1px solid var(--line); color:var(--ink);
    padding:8px 14px; border-radius:10px; cursor:pointer; transition:.25s;
  }
  .lang-btn:hover{ border-color:var(--gold); color:var(--gold); }
  .btn{
    display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-body); font-weight:700;
    padding:11px 22px; border-radius:12px; font-size:.92rem; cursor:pointer; border:none;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
  }
  .btn-gold{ background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#0a0a0a; box-shadow:0 8px 26px -8px rgba(232,180,76,.6); }
  .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(232,180,76,.75); }
  .btn-ghost{ background:rgba(255,255,255,.05); color:var(--ink); border:1px solid var(--line); }
  .btn-ghost:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }
  .menu-toggle{ display:none; background:none; border:none; color:var(--ink); cursor:pointer; }

  /* ─────────────────── HERO ─────────────────── */
  .hero{ min-height:100vh; display:flex; align-items:center; padding:150px 0 90px; overflow:hidden; }
  .hero-bg{ position:absolute; inset:0; z-index:0; }
  .hero-bg .glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
  .g1{ width:620px; height:620px; top:-180px; inset-inline-end:-120px; background:radial-gradient(circle,rgba(232,180,76,.55),transparent 65%); }
  .g2{ width:520px; height:520px; bottom:-160px; inset-inline-start:-100px; background:radial-gradient(circle,rgba(95,168,204,.4),transparent 65%); }
  .horizon{ position:absolute; bottom:0; inset-inline:0; height:42%; background:linear-gradient(to top,rgba(232,180,76,.1),transparent); }
  .grid-lines{
    position:absolute; inset:0; opacity:.5;
    background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
    background-size:64px 64px; mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
  }
  .hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; width:100%; }
  .hero-copy h1{ font-size:clamp(2.5rem,6vw,4.6rem); margin:.45em 0 .4em; }
  .hero-copy h1 em{ font-style:normal; background:linear-gradient(120deg,var(--gold-2),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero-copy p.lead{ color:var(--muted); font-size:1.16rem; max-width:540px; margin-bottom:34px; line-height:1.85; }
  .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:42px; }
  .hero-stats{ display:flex; flex-wrap:wrap; gap:14px 38px; }
  .stat b{ font-family:var(--ff-num); font-size:1.55rem; font-weight:700; color:var(--gold); display:block; line-height:1.1; }
  .stat span{ font-size:.85rem; color:var(--muted); }

  /* hero visual: floating drone card */
  .hero-visual{ position:relative; }
  .drone-card{
    position:relative; aspect-ratio:4/5; border-radius:26px; overflow:hidden;
    background:linear-gradient(160deg,var(--surface-2),var(--surface));
    border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
    animation:float 6s ease-in-out infinite;
  }
  @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
  .drone-card .sky{ position:absolute; inset:0; background:
      radial-gradient(120% 80% at 70% 0%, rgba(244,213,139,.4), transparent 55%),
      linear-gradient(180deg,#13202e,#0c1118 60%,#0a0d13); }
  .drone-card .sun{ position:absolute; top:14%; inset-inline-end:18%; width:120px; height:120px; border-radius:50%;
      background:radial-gradient(circle,rgba(244,213,139,.95),rgba(232,180,76,.25) 60%,transparent 72%); filter:blur(2px); }
  .drone-card .land{ position:absolute; bottom:0; inset-inline:0; height:34%;
      background:linear-gradient(180deg,#0f1a12,#0a0d10); clip-path:polygon(0 38%,18% 22%,40% 40%,62% 18%,82% 36%,100% 24%,100% 100%,0 100%); opacity:.9; }
  .drone-svg{ position:absolute; top:42%; inset-inline-start:50%; transform:translateX(-50%); width:62%; filter:drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
  html[dir="rtl"] .drone-svg{ transform:translateX(50%); }
  .drone-card .badge{
    position:absolute; bottom:18px; inset-inline-start:18px; inset-inline-end:18px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:rgba(8,11,18,.55); backdrop-filter:blur(12px); border:1px solid var(--line);
    border-radius:14px; padding:12px 16px;
  }
  .drone-card .badge .t{ font-family:var(--ff-disp); font-weight:600; font-size:.95rem; }
  .drone-card .badge .s{ font-size:.74rem; color:var(--muted); font-family:var(--ff-num); }
  .rec{ display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-num); font-size:.72rem; color:#ff6b6b; }
  .rec i{ width:8px; height:8px; border-radius:50%; background:#ff6b6b; animation:blink 1.4s infinite; }
  @keyframes blink{ 50%{ opacity:.25; } }
  .float-chip{
    position:absolute; background:rgba(16,22,31,.85); backdrop-filter:blur(10px); border:1px solid var(--line);
    border-radius:13px; padding:11px 15px; display:flex; align-items:center; gap:9px; font-size:.85rem; font-weight:600;
    box-shadow:0 18px 40px -16px rgba(0,0,0,.7); animation:float 5s ease-in-out infinite;
  }
  .chip-1{ top:8%; inset-inline-start:-34px; animation-delay:.6s; }
  .chip-2{ bottom:14%; inset-inline-end:-30px; animation-delay:1.2s; }
  .chip-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(232,180,76,.16); color:var(--gold); flex:none; }

  /* ─────────────────── MARQUEE / TRUST ─────────────────── */
  .trust{ border-block:1px solid var(--line); background:var(--bg-2); padding:24px 0; overflow:hidden; }
  .marquee{ display:flex; gap:60px; white-space:nowrap; animation:scroll 28s linear infinite; width:max-content; }
  .marquee span{ display:inline-flex; align-items:center; gap:12px; color:var(--muted); font-family:var(--ff-disp); font-size:1.15rem; font-weight:500; }
  .marquee span::before{ content:"✦"; color:var(--gold); }
  @keyframes scroll{ to{ transform:translateX(50%); } }
  html[dir="ltr"] @keyframes scroll{ to{ transform:translateX(-50%); } }

  /* ─────────────────── ABOUT ─────────────────── */
  .pad{ padding:110px 0; }
  .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .why-list{ list-style:none; margin-top:30px; display:grid; gap:14px; }
  .why-list li{ display:flex; gap:15px; align-items:flex-start; padding:18px 20px; border-radius:14px;
    background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); transition:.3s; }
  .why-list li:hover{ border-color:rgba(232,180,76,.4); transform:translateX(-6px); }
  html[dir="ltr"] .why-list li:hover{ transform:translateX(6px); }
  .why-list .ic{ width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center;
    background:rgba(232,180,76,.13); color:var(--gold); }
  .why-list b{ font-family:var(--ff-disp); font-weight:600; font-size:1.05rem; display:block; }
  .why-list p{ color:var(--muted); font-size:.92rem; margin-top:2px; }

  .cert-cards{ display:grid; gap:18px; }
  .cert{
    position:relative; border-radius:18px; padding:26px; overflow:hidden;
    background:linear-gradient(140deg,var(--surface-2),var(--surface)); border:1px solid var(--line);
  }
  .cert::before{ content:""; position:absolute; top:-40px; inset-inline-end:-40px; width:160px; height:160px;
    background:radial-gradient(circle,rgba(232,180,76,.18),transparent 70%); }
  .cert .seal{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-num); font-size:.72rem; letter-spacing:.12em;
    color:var(--gold); background:rgba(232,180,76,.1); border:1px solid rgba(232,180,76,.3); padding:5px 11px; border-radius:99px; }
  .cert h3{ font-size:1.3rem; margin:14px 0 4px; }
  .cert p{ color:var(--muted); font-size:.9rem; }
  .cert .row{ display:flex; gap:26px; margin-top:18px; flex-wrap:wrap; }
  .cert .row div span{ display:block; font-size:.72rem; color:var(--muted-2); }
  .cert .row div b{ font-family:var(--ff-num); font-size:.98rem; color:var(--ink); font-weight:600; }

  /* ─────────────────── WORK / PORTFOLIO ─────────────────── */
  .work-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:40px; }
  .filters{ display:flex; gap:10px; flex-wrap:wrap; }
  .filter{
    font-family:var(--ff-body); font-weight:600; font-size:.9rem; padding:9px 18px; border-radius:11px; cursor:pointer;
    background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); transition:.25s;
  }
  .filter:hover{ color:var(--ink); }
  .filter.active{ background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#0a0a0a; border-color:transparent; }

  .gallery{ column-count:3; column-gap:20px; }
  .work{
    break-inside:avoid; margin-bottom:20px; border-radius:16px; overflow:hidden; position:relative;
    border:1px solid var(--line); background:var(--surface); cursor:pointer; transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .35s;
  }
  .work:hover{ transform:translateY(-6px); border-color:rgba(232,180,76,.45); box-shadow:0 26px 50px -24px rgba(0,0,0,.8); }
  .work .frame{ position:relative; width:100%; background:#0c1119; }
  .work.h .frame{ aspect-ratio:16/9; }
  .work.v .frame{ aspect-ratio:9/16; }
  .work .poster{ position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }
  .work .poster .sky{ position:absolute; inset:0; background:
      radial-gradient(120% 90% at 75% 10%, rgba(244,213,139,.32), transparent 55%),
      linear-gradient(180deg,#16273a,#0d141d 55%,#0a0e15); }
  .work .poster .ridge{ position:absolute; bottom:0; inset-inline:0; height:38%;
      background:#0a0d12; clip-path:polygon(0 50%,22% 30%,44% 52%,68% 26%,88% 46%,100% 32%,100% 100%,0 100%); opacity:.85; }
  .play{ position:relative; z-index:2; width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
    background:rgba(8,11,18,.45); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); transition:.3s; }
  .work:hover .play{ background:var(--gold); border-color:var(--gold); transform:scale(1.08); }
  .play svg{ fill:#fff; margin-inline-start:3px; transition:.3s; }
  .work:hover .play svg{ fill:#0a0a0a; }
  .work .empty-tag{ position:absolute; z-index:2; bottom:14px; inset-inline:14px; text-align:center; font-size:.78rem; color:var(--muted-2);
    border:1px dashed var(--line); border-radius:10px; padding:9px 7px; background:rgba(8,11,18,.55); display:grid; gap:8px; }
  .up-btn{ cursor:pointer; font-family:var(--ff-body); font-weight:600; font-size:.74rem; color:var(--gold);
    border:1px solid rgba(232,180,76,.35); background:rgba(232,180,76,.08); border-radius:8px; padding:6px 8px; transition:.25s; }
  .up-btn:hover{ background:rgba(232,180,76,.18); }
  .work .meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; }
  .work .meta b{ font-family:var(--ff-disp); font-weight:500; font-size:.95rem; }
  .tag{ font-family:var(--ff-num); font-size:.66rem; letter-spacing:.08em; padding:4px 9px; border-radius:7px; flex:none; }
  .tag.drone{ background:rgba(232,180,76,.14); color:var(--gold); }
  .tag.ground{ background:rgba(95,168,204,.16); color:var(--sky); }
  .work iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

  /* ─────────────────── SERVICES / PRICES ─────────────────── */
  .price-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:24px; }
  .price-block{ background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:20px; padding:32px 30px; }
  .price-block h3{ font-size:1.4rem; display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .price-block h3 .dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); }
  .price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-2); }
  .price-row:last-child{ border-bottom:none; }
  .price-row .name b{ font-weight:600; font-size:1.02rem; }
  .price-row .name span{ display:block; font-size:.78rem; color:var(--muted-2); }
  .price-row .amt{ font-family:var(--ff-num); font-weight:700; font-size:1.25rem; color:var(--gold); white-space:nowrap; }
  .price-row .amt small{ font-size:.7rem; color:var(--muted); font-weight:400; margin-inline-start:3px; }

  /* ─────────────────── PACKAGES ─────────────────── */
  .pkgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
  .pkg{ position:relative; display:flex; flex-direction:column; border-radius:22px; padding:34px 28px;
    background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); transition:.35s; }
  .pkg:hover{ transform:translateY(-8px); border-color:rgba(232,180,76,.35); }
  .pkg.featured{ background:linear-gradient(180deg,#1a2231,#10161f); border:1px solid rgba(232,180,76,.45);
    box-shadow:0 40px 90px -34px rgba(232,180,76,.32); }
  .pkg.featured::before{ content:""; position:absolute; inset:0; border-radius:22px; padding:1px;
    background:linear-gradient(160deg,rgba(232,180,76,.6),transparent 60%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
  .pkg .tier-flag{ position:absolute; top:-13px; inset-inline-start:50%; transform:translateX(-50%);
    font-family:var(--ff-body); font-weight:700; font-size:.78rem; padding:6px 18px; border-radius:99px;
    background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#0a0a0a; white-space:nowrap; }
  .pkg h3{ font-size:1.4rem; }
  .pkg .price{ display:flex; align-items:baseline; gap:7px; margin:14px 0 6px; }
  .pkg .price b{ font-family:var(--ff-num); font-size:2.7rem; font-weight:700; line-height:1; color:var(--ink); }
  .pkg .price span{ font-size:1rem; color:var(--muted); font-weight:600; }
  .pkg .feats{ list-style:none; margin:22px 0 26px; display:grid; gap:13px; flex:1; }
  .pkg .feats li{ display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--muted); }
  .pkg .feats li svg{ flex:none; margin-top:3px; }
  .pkg .feats li.on{ color:var(--ink); }
  .pkg .btn{ width:100%; justify-content:center; }

  .notes{ margin-top:38px; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
  .note{ display:flex; gap:11px; align-items:flex-start; font-size:.86rem; color:var(--muted); padding:16px 18px;
    border-radius:13px; background:var(--surface); border:1px solid var(--line-2); }
  .note .n{ font-family:var(--ff-num); color:var(--gold); font-weight:700; flex:none; }

  /* ─────────────────── CONTACT ─────────────────── */
  .contact{ position:relative; overflow:hidden; }
  .contact-card{ position:relative; border-radius:28px; padding:56px clamp(28px,5vw,64px); overflow:hidden;
    background:linear-gradient(150deg,#16202e,#0c121a); border:1px solid var(--line); }
  .contact-card::before{ content:""; position:absolute; top:-120px; inset-inline-end:-80px; width:420px; height:420px;
    background:radial-gradient(circle,rgba(232,180,76,.28),transparent 65%); filter:blur(30px); }
  .contact-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
  .contact-grid h2{ font-size:clamp(1.9rem,4vw,2.9rem); margin-bottom:14px; }
  .contact-grid p{ color:var(--muted); font-size:1.08rem; max-width:460px; }
  .contact-actions{ display:flex; flex-direction:column; gap:14px; }
  .contact-actions .btn{ justify-content:center; font-size:1rem; padding:16px; }
  .btn-wa{ background:#25D366; color:#06351c; }
  .btn-wa:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(37,211,102,.6); }
 .btn-ig{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }
  .btn-ig:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(220,39,67,.6); }
  .contact-meta{ display:flex; gap:26px; flex-wrap:wrap; margin-top:26px; }
  .contact-meta div span{ display:block; font-size:.74rem; color:var(--muted-2); }
  .contact-meta div b{ font-family:var(--ff-num); font-size:1.05rem; }

  /* ─────────────────── FOOTER ─────────────────── */
  footer{ border-top:1px solid var(--line); padding:40px 0; margin-top:80px; }
  .foot{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
  .foot p{ color:var(--muted-2); font-size:.85rem; }

  .reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
  .reveal.in{ opacity:1; transform:none; }

  /* ─────────────────── RESPONSIVE ─────────────────── */
  @media (max-width:1024px){
    .gallery{ column-count:2; }
    .hero-inner{ grid-template-columns:1fr; gap:60px; }
    .hero-visual{ max-width:380px; margin:0 auto; width:100%; }
    .about-grid{ grid-template-columns:1fr; gap:40px; }
    .price-wrap{ grid-template-columns:1fr; }
    .pkgs{ grid-template-columns:1fr; max-width:460px; margin:0 auto; }
    .contact-grid{ grid-template-columns:1fr; gap:30px; }
  }
  @media (max-width:680px){
    .wrap{ padding:0 18px; }
    .nav-links{ display:none; }
    .menu-toggle{ display:grid; }
    .gallery{ column-count:1; }
    .pad{ padding:80px 0; }
    .hero{ padding:120px 0 70px; }
    .hero-stats{ gap:14px 26px; }
    .chip-1,.chip-2{ display:none; }
    .contact-meta{ gap:18px; }
  }