/* =================================================================
   FRSAN ALSHRA TECHNICAL SERVICES
   Palette + geometry lifted from the company brochure (v3).
   ================================================================= */

:root{
  --navy:#03346c;
  --navy-deep:#02264f;
  --navy-ink:#001828;
  --blue:#026dae;
  --sky:#1583f0;
  --cyan:#2db6d6;
  --purple:#8200ff;
  --green:#3fbf9b;

  --bg:#f0f4f8;
  --bg-2:#e6edf5;
  --card:#ffffff;
  --ink:#12243c;
  --ink-2:#4a5f78;
  --line:#dbe4ef;

  --wrap:1200px;
  --r-sm:10px;
  --r:16px;
  --r-lg:26px;
  --line-strong:#c3d3e6;
  --wa:#0f7b6c;
  --wa-dark:#0b5f54;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
h3{font-size:clamp(1.1rem,1.7vw,1.35rem)}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.7rem 1.1rem;z-index:999}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin:0 0 .6rem;
}
.eyebrow--light{color:#8fd0ff}
.eyebrow--center{text-align:center}

.lead{font-size:clamp(1rem,1.3vw,1.12rem);color:var(--ink-2);max-width:62ch}
.muted{color:var(--ink-2)}
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section--tight{padding:clamp(2.5rem,5vw,4rem) 0}
.section--navy{background:var(--navy);color:#dce9f7}
.section--navy h2,.section--navy h3{color:#fff}
.section--alt{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.section__head{max-width:720px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.section__head p{color:var(--ink-2);margin:0}
.section--navy .section__head p{color:#a9c6e4}

/* Brochure title style: leading word navy, accent word blue */
.split-title{margin-bottom:.35em}
.split-title span{color:var(--sky)}
.section--navy .split-title{color:#fff}
.section--navy .split-title span{color:#5cc0f5}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:999px;font-weight:600;font-size:.95rem;
  border:2px solid transparent;cursor:pointer;transition:.25s var(--ease);white-space:nowrap;
}
.btn--primary{background:var(--blue);color:#fff}                 /* 5.52:1 */
.btn--primary:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}  /* 12.3:1 */
.btn--navy{background:var(--navy);color:#fff}                    /* 12.3:1 */
.btn--navy:hover{background:var(--navy-ink);transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--navy)}                   /* 12.3:1 */
.btn--white:hover{background:#eaf1f9;transform:translateY(-2px)}
.btn--wa{background:var(--wa);color:#fff}                        /* 5.16:1 */
.btn--wa:hover{background:var(--wa-dark);color:#fff;transform:translateY(-2px)}
.btn--wa svg{width:19px;height:19px;fill:currentColor}
.btn--ghost{border-color:rgba(255,255,255,.75);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}
.btn--outline{border-color:var(--navy);color:var(--navy)}        /* 11.1:1 */
.btn--outline:hover{background:var(--navy);color:#fff}

.ic{width:16px;height:16px;fill:currentColor;flex:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:border-color .25s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line-strong)}
.topbar{background:var(--navy);color:#c6ddf3;font-size:.82rem}
.topbar__in{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;padding:.5rem 0}
.topbar__item{display:inline-flex;align-items:center;gap:.45rem;color:#c6ddf3}
.topbar__item:hover{color:#fff}
.topbar__item--muted{opacity:.85}
.topbar__badge{
  margin-left:auto;background:#fff;color:var(--navy);font-weight:600;
  padding:.15rem .8rem;border-radius:999px;font-size:.75rem;
}

.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}

.brand{display:flex;align-items:center;gap:.75rem}
.brand img{width:auto;height:52px}
.brand__txt{display:none;flex-direction:column;line-height:1.1}
.brand__txt strong{color:var(--navy);font-size:.95rem;letter-spacing:.02em}
.brand__txt small{color:var(--blue);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}

.nav__links{display:flex;align-items:center;gap:.3rem}
.nav__links > a{
  padding:.55rem .95rem;border-radius:999px;color:var(--navy);font-weight:600;font-size:.95rem;
  transition:.2s var(--ease);
}
.nav__links > a:hover{background:var(--bg-2);color:var(--blue)}
.nav__links > a.is-active{color:var(--blue);background:var(--bg-2)}
/* `.nav__links > a` would otherwise beat `.btn--primary` on specificity and
   paint the CTA label navy on blue, so match that specificity here. */
.nav__links > a.nav__cta{margin-left:.6rem;padding:.7rem 1.35rem;background:var(--blue);color:#fff}
.nav__links > a.nav__cta:hover{background:var(--navy);color:#fff}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.6rem;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative;color:#eaf3ff;background:var(--navy-ink);
  padding:clamp(4rem,9vw,7.5rem) 0 clamp(4rem,8vw,6.5rem);overflow:hidden;
}
/* The brochure cover photo is small; a touch of blur + scale hides the upscale. */
.hero__bg{position:absolute;inset:-10px;background-size:cover;background-position:center;opacity:.28;filter:saturate(.55) blur(2px)}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(0,24,40,.96) 0%,rgba(2,38,79,.9) 45%,rgba(3,52,108,.72) 100%);
}
.hero::after{
  content:"";position:absolute;width:52vw;height:52vw;right:-12vw;top:-16vw;border-radius:50%;
  background:radial-gradient(circle,rgba(21,131,240,.35),transparent 62%);
  animation:float 14s var(--ease) infinite alternate;
}
@keyframes float{to{transform:translate3d(-3%,5%,0) scale(1.08)}}
.hero .wrap{position:relative;z-index:2}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{color:#fff;margin-bottom:1.2rem}
.hero h1 em{font-style:normal;color:#5cc0f5}
.hero p{color:#bcd6ee;max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero__panel{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.2rem);backdrop-filter:blur(10px);
}
.hero__panel h2{color:#fff;font-size:1.15rem;margin-bottom:1rem}
.hero__panel p{font-size:.95rem;color:#bcd6ee;margin-bottom:1.1rem}
.hero__panel p:last-child{margin-bottom:0}
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem;position:relative;z-index:2}
.hero__stat{border-left:2px solid rgba(92,192,245,.5);padding-left:1rem}
.hero__stat b{display:block;font-size:clamp(1.4rem,2.6vw,2rem);color:#fff;font-weight:800;line-height:1.1}
.hero__stat span{font-size:.82rem;color:#a6c6e4}

/* page banner (inner pages) */
.banner{position:relative;background:var(--navy);color:#fff;padding:clamp(3rem,6vw,4.6rem) 0;overflow:hidden}
.banner::after{
  content:"";position:absolute;right:-6%;top:-40%;width:38vw;height:38vw;border-radius:50%;
  background:radial-gradient(circle,rgba(21,131,240,.3),transparent 60%);
}
.banner .wrap{position:relative;z-index:2}
.banner h1{color:#fff;margin-bottom:.4rem}
.banner p{color:#a9c6e4;margin:0;max-width:60ch}
.crumbs{display:flex;gap:.5rem;font-size:.85rem;color:#8fb6dd;margin-bottom:.9rem;flex-wrap:wrap}
.crumbs a{color:#8fb6dd}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.55}

/* ---------- grids + service cards ---------- */
.grid{display:grid;gap:1.5rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.svc{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem 1.7rem 1.8rem;transition:.3s var(--ease);overflow:hidden;
}
.svc::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--sky),var(--cyan));transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.svc:hover{transform:translateY(-6px);border-color:var(--blue)}
.svc:hover::after{transform:scaleX(1)}
.svc__icon{
  width:78px;height:78px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;margin-bottom:1.1rem;transition:.3s var(--ease);
}
.svc__icon img{width:78px;height:78px}
.svc:hover .svc__icon{transform:rotate(-6deg) scale(1.06)}
.svc h3{margin-bottom:.4rem}
.svc p{color:var(--ink-2);font-size:.94rem;margin-bottom:1rem}
.svc__more{font-weight:600;font-size:.9rem;color:var(--blue);display:inline-flex;align-items:center;gap:.35rem}
.svc__more::after{content:"\2192";transition:transform .25s var(--ease)}
.svc:hover .svc__more::after{transform:translateX(4px)}

/* civil-work chips on navy, mirroring brochure page 3 */
.chip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem}
.chip{
  display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.7rem 1.4rem .7rem .7rem;
  transition:.28s var(--ease);
}
.chip:hover{background:rgba(255,255,255,.13);transform:translateY(-4px)}
.chip img{width:62px;height:62px;border-radius:50%;background:#fff;flex:none}
.chip b{color:#fff;font-weight:600;font-size:.98rem;line-height:1.25}

/* ---------- service detail (brochure slanted photo) ---------- */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.detail--flip .detail__media{order:2}
.detail__media{position:relative}
.detail__media img{
  width:100%;aspect-ratio:4/3.1;object-fit:cover;
  clip-path:polygon(11% 0,100% 0,89% 100%,0 100%);
}
.ticks{margin:1.4rem 0 2rem;display:grid;gap:.7rem}
.ticks li{display:flex;align-items:flex-start;gap:.75rem;font-weight:600;color:var(--navy);font-size:.98rem}
.ticks li::before{
  content:"\203A";flex:none;width:22px;height:22px;border-radius:50%;background:var(--sky);color:#fff;
  display:grid;place-items:center;font-size:1rem;line-height:1;margin-top:2px;font-weight:700;
}
.section--navy .ticks li{color:#e6f1fb}

/* ---------- core values ---------- */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1.4rem}
.value{
  position:relative;background:var(--card);border-radius:var(--r-lg);padding:2.4rem 1.5rem 1.7rem;
  text-align:center;border:1px solid var(--line);border-top:5px solid var(--c);
  transition:.3s var(--ease);
}
.value:hover{transform:translateY(-8px);border-color:var(--line-strong);border-top-color:var(--c)}
.value__mark{
  width:56px;height:56px;margin:-3.1rem auto 1rem;
  background:var(--c);color:#fff;font-weight:800;font-size:1.05rem;
  display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%);
}
.value h3{font-size:1.02rem;margin-bottom:.45rem;color:var(--navy)}
.value p{font-size:.88rem;color:var(--ink-2);margin:0}
.v-blue{--c:var(--blue)} .v-purple{--c:var(--purple)} .v-sky{--c:var(--sky)}
.v-cyan{--c:var(--cyan)} .v-green{--c:var(--green)}

.values-art{display:grid;place-items:center}
.values-art img{max-width:560px;width:100%}

/* ---------- vision / mission / motto ---------- */
.vmm{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2.2rem;text-align:center}
.vmm__item img{width:84px;height:84px;margin:0 auto 1.1rem}
.vmm__item h3{font-size:1.5rem;font-weight:600;margin-bottom:.6rem}
.vmm__item p{color:#a9c6e4;font-size:.94rem;margin:0}

/* ---------- brands ---------- */
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:1.2rem}
.brand-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);height:112px;
  display:grid;place-items:center;padding:1.2rem;transition:.3s var(--ease);
}
.brand-card img{max-height:52px;width:auto;filter:grayscale(1);opacity:.62;transition:.3s var(--ease)}
.brand-card:hover{transform:translateY(-5px);border-color:var(--blue)}
.brand-card:hover img{filter:none;opacity:1}

/* ---------- feature rows ---------- */
.feat{display:flex;gap:1.1rem;align-items:flex-start}
.feat__n{
  flex:none;width:46px;height:46px;border-radius:14px;background:var(--blue);
  color:#fff;display:grid;place-items:center;font-weight:800;
}
.feat h3{font-size:1.05rem;margin-bottom:.25rem}
.feat p{font-size:.92rem;color:var(--ink-2);margin:0}
.section--navy .feat p{color:#a9c6e4}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem;counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.4rem}
.step::before{
  counter-increment:s;content:"0" counter(s);
  font-size:2.6rem;font-weight:800;color:rgba(21,131,240,.16);line-height:1;display:block;margin-bottom:.4rem;
}
.step h3{font-size:1.02rem;margin-bottom:.35rem}
.step p{font-size:.9rem;color:var(--ink-2);margin:0}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.cinfo{display:grid;gap:1.2rem}
.cinfo__row{display:flex;gap:1rem;align-items:flex-start}
.cinfo__ic{
  flex:none;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;
}
.cinfo__ic svg{width:20px;height:20px;fill:currentColor}
.cinfo__row b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);font-weight:600}
.cinfo__row a,.cinfo__row span{color:var(--navy);font-weight:600}

.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.4rem)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:.95rem;color:var(--ink);background:#fbfcfe;transition:.2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);background:#fff;outline:2px solid var(--blue);outline-offset:1px}
.field textarea{resize:vertical;min-height:130px}
.field .err{color:#c0392b;font-size:.8rem;margin-top:.25rem;display:block}
.alert{border-radius:var(--r-sm);padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.92rem;font-weight:500}
.alert--ok{background:#e6f7f1;color:#1c7a5a;border:1px solid #b9e6d6}
.alert--bad{background:#fdecea;color:#a33228;border:1px solid #f5c6c1}
.hp{position:absolute;left:-9999px}

/* WhatsApp handoff shown after a successful submit */
.wa-handoff{
  background:#f2fbf5;border:1px solid #c9ecd6;border-radius:var(--r);
  padding:1.2rem;margin-bottom:1.4rem;text-align:center;
}
.wa-handoff p{font-size:.92rem;color:#1c7a5a;margin:0 0 .9rem}
.wa-handoff__note{display:block;margin-top:.7rem;font-size:.78rem;color:var(--ink-2)}

.map{border:1px solid var(--line);width:100%;height:380px;border-radius:var(--r-lg);display:block}

/* ---------- cta strip ---------- */
.cta-strip{background:linear-gradient(120deg,var(--navy-deep),var(--blue));color:#fff;padding:clamp(2.5rem,5vw,3.4rem) 0}
.cta-strip__in{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between}
.cta-strip h2{color:#fff;margin:0 0 .3rem;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.cta-strip__sub{color:#e6f2ff;margin:0;max-width:52ch}
.cta-strip__actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-ink);color:#a9c6e4;padding:clamp(3rem,5vw,4rem) 0 0}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.2rem}
.footer__col h3{color:#fff;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.1rem}
.footer__col li{margin-bottom:.55rem;font-size:.92rem}
.footer__col a{color:#a9c6e4;transition:.2s}
.footer__col a:hover{color:#5cc0f5}
.footer__logo{
  display:inline-block;background:#fff;border-radius:14px;padding:.7rem 1rem;margin-bottom:1rem;
}
.footer__logo img{height:56px;width:auto}
.footer__about{font-size:.9rem;line-height:1.75;max-width:38ch}
.footer__contact li{color:#a9c6e4}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1);margin-top:2.6rem;padding:1.3rem 0;font-size:.85rem;
}
.footer__bottom p{margin:0}
.footer__bottom a{color:#8fd0ff}
.footer__bottom a:hover{color:#fff}

/* ---------- floating whatsapp ----------
   The aura and the pulse rings run on a 6s loop on their own. The visible part
   of each keyframe track sits at the start, so the button rests quietly for
   roughly five seconds, draws attention once, then settles again. Nothing here
   is tied to :hover, and none of it is a box-shadow. */
.fab{
  position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;z-index:130;transition:.25s var(--ease);
}
.fab svg{width:28px;height:28px;fill:#fff;position:relative;z-index:2}
.fab--wa{background:var(--wa)}
.fab--wa:hover{background:var(--wa-dark)}
.fab:hover{transform:scale(1.08)}

/* Soft halo. The gradient is transparent across the middle so it rings the
   button instead of tinting the icon. Uses the bright WhatsApp green, while the
   button fill stays the darker AA-contrast green. */
.fab__aura{
  position:absolute;inset:-18px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,
    rgba(37,211,102,0) 30%,
    rgba(37,211,102,.45) 42%,
    rgba(37,211,102,.16) 55%,
    rgba(37,211,102,0) 68%);
  animation:fab-aura 6s ease-in-out infinite;
}

/* Two rings expanding outward, the second trailing the first. */
.fab__ring{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:2px solid rgba(37,211,102,.9);opacity:0;
  animation:fab-ring 6s var(--ease) infinite;
}
.fab__ring--2{animation-delay:.6s}

@keyframes fab-ring{
  0%   {transform:scale(1);    opacity:.85}
  18%  {transform:scale(1.75); opacity:0}
  100% {transform:scale(1.75); opacity:0}
}
@keyframes fab-aura{
  0%, 34%, 100% {transform:scale(1);    opacity:.5}
  12%           {transform:scale(1.14); opacity:1}
}
/* A single wag of the handset, on the same 6s beat. */
.fab--wa svg{animation:fab-wave 6s ease-in-out infinite}
@keyframes fab-wave{
  0%, 14%, 100% {transform:rotate(0)}
  3%            {transform:rotate(-14deg)}
  7%            {transform:rotate(11deg)}
  11%           {transform:rotate(-5deg)}
}

/* ---------- reveal ----------
   Scoped to html.js so the page is fully readable when JavaScript is off
   or still loading, so nothing is ever hidden without something to reveal it. */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (min-width:1080px){ .brand__txt{display:flex} }

@media (max-width:980px){
  .hero__grid,.detail,.contact-grid{grid-template-columns:1fr}
  .detail__media,.detail--flip .detail__media{order:-1}
  .footer__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  .burger{display:flex}
  .nav__links{
    position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;
    border:1px solid var(--line);border-radius:var(--r);flex-direction:column;align-items:stretch;
    padding:.6rem;gap:.15rem;border-color:var(--line-strong);
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:.25s var(--ease);
  }
  .nav__links.open{opacity:1;visibility:visible;transform:none}
  .nav__cta{margin:.4rem 0 0}
  .topbar__item--muted{display:none}
  .form__row,.grid--2{grid-template-columns:1fr}
}

@media (max-width:640px){
  .topbar__in{gap:.9rem;font-size:.76rem}
  .topbar__badge{margin-left:0}
  .hero__stats{grid-template-columns:1fr;gap:.8rem}
  .footer__grid{grid-template-columns:1fr}
  .cta-strip__in{flex-direction:column;align-items:flex-start}
  .detail__media img{clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
}