/* ============================================================
   KINETICS PRO — brand design system
   Palette sampled directly from the client logo (ring + lens mark):
   gold gradient from deep bronze through amber to pale champagne,
   set on the logo's own near-black. Typography pairs an editorial
   serif (the ring's fine linework) with Poppins, the same body
   family M2R Groups' main site uses group-wide.
   ============================================================ */

:root{
  --bg:#0a0809;
  --bg-alt:#120e10;
  --surface:#171216;
  --surface-2:#1d171b;
  --ink:#f3efe6;
  --ink-dim:#ab9e8c;
  --ink-faint:#6f655a;
  --line:rgba(244,227,174,0.14);
  --line-strong:rgba(244,227,174,0.30);

  --gold-1:#7a5308;
  --gold-2:#b8860b;
  --gold-3:#e0b11e;
  --gold-4:#f4e3ae;
  --gold-grad:linear-gradient(115deg, var(--gold-1) 0%, var(--gold-2) 32%, var(--gold-3) 60%, var(--gold-4) 100%);
  --gold-grad-soft:linear-gradient(115deg, rgba(122,83,8,0.9), rgba(184,134,11,0.9) 40%, rgba(224,177,30,0.9) 70%, rgba(244,227,174,0.9) 100%);

  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Poppins', system-ui, sans-serif;

  --maxw:1220px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
ul{list-style:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
:focus-visible{outline:2px solid var(--gold-3); outline-offset:3px}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:0.002em;
}
h1{font-size:clamp(2.6rem,6vw,5.2rem)}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.7rem)}
p{max-width:62ch}
.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.kicker{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:1.15rem;
  color:var(--gold-3);
}
.eyebrow-dot{
  display:inline-block;
  width:7px; height:7px;
  background:var(--gold-grad);
  transform:rotate(45deg);
  margin-right:10px;
  vertical-align:middle;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 32px;
  font-family:var(--sans);
  font-size:0.88rem;
  font-weight:500;
  letter-spacing:0.02em;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color .25s ease;
}
.btn-primary{
  background:var(--gold-grad);
  color:#141013;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px -10px rgba(224,177,30,0.5)}
.btn-ghost{
  border-color:var(--line-strong);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--gold-3); color:var(--gold-3)}

/* ---------- header / nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:linear-gradient(to bottom, rgba(10,8,9,0.94), rgba(10,8,9,0));
  padding:20px 0;
  transition:background 0.3s ease, padding 0.3s ease;
}
header.solid{background:rgba(10,8,9,0.96); border-bottom:1px solid var(--line); backdrop-filter:blur(6px)}
.nav-row{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center}
.brand img{height:40px; width:auto}
.nav-links{display:flex; align-items:center; gap:36px; font-size:0.92rem; font-weight:400}
.nav-links a{position:relative; padding-bottom:4px; opacity:0.86; transition:opacity 0.2s}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold-grad);
}
.nav-cta{display:flex; align-items:center; gap:18px}
.menu-btn{display:none; background:none; border:1px solid var(--line-strong); color:var(--ink); font-size:1rem; padding:8px 12px; cursor:pointer}
.mobile-nav{
  display:none; position:fixed; inset:0; z-index:199; background:var(--bg);
  padding:110px 28px 40px; flex-direction:column; gap:26px;
}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--serif); font-size:1.6rem}

/* ---------- page hero banner (inner pages) ---------- */
.page-hero{
  position:relative;
  min-height:56vh;
  display:flex; align-items:flex-end;
  padding:160px 0 70px;
  background-size:cover; background-position:center;
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,8,9,0.55) 0%, rgba(10,8,9,0.86) 75%, var(--bg) 100%);
}
.page-hero .wrap{position:relative; z-index:2}
.page-hero .kicker{display:block; margin-bottom:14px}
.page-hero .crumb{font-size:0.82rem; color:var(--ink-faint); margin-top:16px}
.page-hero .crumb a{color:var(--ink-dim)}
.page-hero .crumb a:hover{color:var(--gold-3)}

/* ---------- home hero ---------- */
.home-hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.home-hero video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(0.85) brightness(0.55);
}
.home-hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(224,177,30,0.12), transparent 60%),
    linear-gradient(180deg, rgba(10,8,9,0.35) 0%, rgba(10,8,9,0.55) 55%, var(--bg) 100%);
}
.home-hero .wrap{position:relative; z-index:2; padding-top:120px; padding-bottom:70px}
.home-hero h1{max-width:16ch}
.home-hero .lede{margin-top:26px; font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--ink-dim); max-width:52ch}
.home-hero .actions{display:flex; gap:16px; margin-top:42px; flex-wrap:wrap}
.hero-fade{opacity:0; transform:translateY(18px); animation:heroIn 1s ease forwards 0.15s}
@keyframes heroIn{to{opacity:1; transform:translateY(0)}}

/* ---------- trust strip ---------- */
.trust-strip{
  border-bottom:1px solid var(--line);
  padding:26px 0;
  background:var(--bg-alt);
}
.trust-strip .wrap{
  display:flex; flex-wrap:wrap; gap:14px 44px; align-items:center; justify-content:space-between;
  font-size:0.84rem; color:var(--ink-dim);
}
.trust-strip strong{color:var(--ink); font-weight:500}

/* ---------- sections ---------- */
section{padding:110px 0; position:relative}
.section-alt{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-head{max-width:640px}
.section-head h2{margin-top:16px}
.section-head p{margin-top:20px; color:var(--ink-dim)}
.hairline{height:1px; background:var(--gold-grad); width:64px; opacity:0.85}

/* ---------- who-we-are / split layout ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
}
.split .copy p{color:var(--ink-dim); margin-top:18px}
.split .copy p:first-of-type{margin-top:20px}
.ring-frame{
  position:relative;
  border-radius:50%;
  overflow:hidden;
  aspect-ratio:1/1;
  border:1px solid var(--line-strong);
  cursor:zoom-in;
}
.ring-frame::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:50%;
  border:1px solid transparent;
  background:var(--gold-grad) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.ring-frame img{width:100%; height:100%; object-fit:cover; filter:grayscale(10%) contrast(1.04)}

/* ---------- editorial photo blocks (services) ---------- */
.service-block{
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
  padding:90px 0; border-top:1px solid var(--line);
}
.service-block:first-of-type{border-top:none}
.service-block.rtl .photo{order:2}
.service-block.rtl .copy{order:1}
.service-block .photo{
  position:relative; aspect-ratio:4/5; overflow:hidden; cursor:zoom-in;
  border:1px solid var(--line);
}
.service-block .photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.service-block .photo:hover img{transform:scale(1.04)}
.service-block .copy h3{margin-top:4px}
.service-block .copy p{color:var(--ink-dim); margin-top:16px}
.service-block .taglist{margin-top:26px; display:flex; flex-direction:column; gap:0}
.service-block .taglist li{
  padding:13px 0; border-top:1px solid var(--line); color:var(--ink-dim); font-size:0.95rem;
  display:flex; align-items:center; gap:12px;
}
.service-block .taglist li:last-child{border-bottom:1px solid var(--line)}
.service-block .taglist li::before{
  content:""; width:5px; height:5px; background:var(--gold-3); transform:rotate(45deg); flex:none;
}

/* ---------- capabilities ---------- */
.cap-banner{position:relative; aspect-ratio:21/8; overflow:hidden; margin-top:56px; border:1px solid var(--line); cursor:zoom-in}
.cap-banner img{width:100%; height:100%; object-fit:cover}
.cap-grid{
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:56px;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.cap-grid div{
  padding:28px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:0.95rem; font-weight:400;
}
.cap-grid .cap-label{display:block; font-family:var(--serif); font-style:italic; color:var(--gold-3); margin-bottom:8px; font-size:1.05rem}

/* ---------- featured / portfolio grid ---------- */
.portfolio-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px;
}
.portfolio-grid a{
  position:relative; aspect-ratio:1/1.1; overflow:hidden; background:var(--surface); cursor:zoom-in;
}
.portfolio-grid a img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease, filter .5s ease; filter:grayscale(20%)}
.portfolio-grid a:hover img{transform:scale(1.05); filter:grayscale(0%)}
.portfolio-grid a .cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  background:linear-gradient(to top, rgba(8,6,7,0.85), transparent);
  font-size:0.82rem; color:var(--ink-dim); opacity:0; transition:opacity 0.25s ease;
}
.portfolio-grid a:hover .cap{opacity:1}

/* ---------- why-us grid ---------- */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:56px; background:var(--line); border:1px solid var(--line)}
.why-card{background:var(--surface); padding:34px 28px}
.why-card .mark{width:22px; height:22px; border:1px solid var(--gold-3); border-radius:50%; position:relative}
.why-card .mark::after{content:""; position:absolute; inset:5px; background:var(--gold-grad); border-radius:50%}
.why-card h3{margin-top:16px; font-size:1.12rem}
.why-card p{margin-top:10px; color:var(--ink-dim); font-size:0.93rem}

/* ---------- stats ---------- */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:60px}
.stats-row div{padding:26px 22px 0; border-left:1px solid var(--line)}
.stats-row div:first-child{border-left:none}
.stats-row .num{font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--gold-3)}
.stats-row .lbl{font-size:0.82rem; color:var(--ink-faint); margin-top:6px}

/* ---------- showreel / video block ---------- */
.showreel{
  position:relative; aspect-ratio:16/8; overflow:hidden; margin-top:56px; border:1px solid var(--line);
}
.showreel video{width:100%; height:100%; object-fit:cover}
.showreel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,8,9,0.15), rgba(10,8,9,0.55));
  pointer-events:none;
}
.showreel .reel-cap{
  position:absolute; left:28px; bottom:22px; z-index:2; font-family:var(--serif); font-style:italic; color:var(--gold-4); font-size:1.1rem;
}

/* ---------- ethos / pull quote ---------- */
.ethos blockquote{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.25; max-width:20ch;
}
.ethos p{margin-top:26px; color:var(--ink-dim)}

/* ---------- CTA banner (the one bold facet moment) ---------- */
.cta-banner{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line-strong);
  padding:70px clamp(28px,6vw,80px);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-banner h2{max-width:14ch}
.cta-banner .actions{display:flex; gap:16px; flex-wrap:wrap}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start}
.contact-list a, .contact-list div{
  display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-top:1px solid var(--line); font-size:0.98rem;
}
.contact-list .lbl{color:var(--ink-faint); font-size:0.8rem}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.chips span{border:1px solid var(--line-strong); padding:7px 16px; font-size:0.82rem; color:var(--ink-dim); border-radius:2px}
.social-row{display:flex; gap:14px; margin-top:30px}
.social-row a{border:1px solid var(--line-strong); padding:9px 18px; font-size:0.84rem; transition:border-color 0.2s, color 0.2s}
.social-row a:hover{border-color:var(--gold-3); color:var(--gold-3)}

form{display:flex; flex-direction:column; gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-size:0.8rem; color:var(--ink-faint)}
.field input, .field textarea, .field select{
  background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  padding:11px 2px; color:var(--ink); font-family:var(--sans); font-size:0.98rem; transition:border-color 0.2s;
}
.field select option{background:#171216}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--gold-3); outline:none}
.field textarea{resize:vertical; min-height:96px}

/* ---------- modal / lightbox ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(6,5,5,0.92); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:32px;
}
.overlay.show{display:flex}
.overlay img{max-width:min(1100px,92vw); max-height:86vh; object-fit:contain; border:1px solid var(--line-strong)}
.overlay .close-btn{
  position:absolute; top:24px; right:clamp(20px,5vw,56px);
  font-family:var(--serif); font-size:1.05rem; color:var(--ink);
  border:1px solid var(--line-strong); padding:8px 18px; background:transparent; cursor:pointer;
}
.confirm-box{
  background:var(--surface); border:1px solid var(--line-strong); padding:46px 40px; max-width:420px; text-align:left; cursor:default;
}
.confirm-box h3{font-size:1.7rem}
.confirm-box p{margin-top:12px; color:var(--ink-dim); font-size:0.95rem}
.confirm-box button{margin-top:24px}

/* ---------- footer ---------- */
footer{background:var(--bg-alt); border-top:1px solid var(--line); padding:80px 0 0}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:60px}
.footer-brand img{height:34px}
.footer-brand p{margin-top:18px; color:var(--ink-dim); font-size:0.92rem; max-width:32ch}
.footer-col h4{font-family:var(--sans); font-weight:500; font-size:0.86rem; color:var(--ink); margin-bottom:18px}
.footer-col ul{display:flex; flex-direction:column; gap:12px}
.footer-col a{color:var(--ink-dim); font-size:0.9rem; transition:color 0.2s}
.footer-col a:hover{color:var(--gold-3)}
.footer-bottom{
  border-top:1px solid var(--line); padding:26px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:0.8rem; color:var(--ink-faint);
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .menu-btn{display:inline-flex}
  .split, .service-block, .contact-grid{grid-template-columns:1fr; gap:40px}
  .service-block.rtl .photo, .service-block.rtl .copy{order:0}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr); row-gap:26px}
  .stats-row div:nth-child(3){border-left:none}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:40px}
}
@media (max-width:620px){
  section{padding:78px 0}
  .portfolio-grid{grid-template-columns:1fr}
  .cap-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-banner{flex-direction:column; align-items:flex-start}
}