/* ------------------------------------------------------------------
   SAY FILM — theme tokens.
   Light is the default; the dark ("gece modu") palette is applied
   automatically when the device is in dark mode.
------------------------------------------------------------------ */
:root{
  color-scheme: light;

  --bg: #F7F2E7;
  --bg-panel: #FFFCF4;
  --bg-deep: #EFE7D6;
  --bg-elev: #FFFFFF;
  --line: #DFD5C1;
  --text: #15120E;
  --text-muted: #6E6557;
  --gold: #17140F;
  --gold-dim: #9A8E78;

  /* translucent accents layered over the page surface */
  --tint-03: rgba(23,20,15,0.03);
  --tint-06: rgba(23,20,15,0.06);
  --tint-08: rgba(23,20,15,0.08);
  --tint-10: rgba(23,20,15,0.10);
  --edge: rgba(23,20,15,0.30);
  --edge-strong: rgba(23,20,15,0.45);
  --sheen: rgba(23,20,15,0.10);

  --topbar-bg: rgba(250,246,238,0.80);
  --topbar-bg-stuck: rgba(250,246,238,0.96);
  --topbar-line: rgba(223,213,193,0.85);
  --panel-bg: rgba(255,253,246,0.97);

  --hero-glow: rgba(255,255,255,0.95);
  --hero-top: #FDFAF3;
  --hero-bottom: #EFE7D6;

  /* logo plates stay light in both themes: the artwork is dark ink */
  --plate-bg: #FFFFFF;

  /* the wordmark ships as white artwork, so it is inverted on cream */
  --logo-filter: invert(1);
  --logo-filter-hover: invert(1) drop-shadow(0 6px 14px rgba(23,20,15,0.22));

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  /* symmetric sine easing — reads evenly in a looping animation */
  --ease-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --glow: 0 16px 38px -20px rgba(21,18,14,0.38), 0 2px 10px rgba(21,18,14,0.06);
  --shadow-bar: 0 18px 40px -30px rgba(21,18,14,0.35);
  --shadow-pop: 0 26px 60px -30px rgba(21,18,14,0.28);

  /* single dark contact bar at the foot of every page */
  --footer-bg: #121009;
  --footer-surface: rgba(247,242,231,0.06);
  --footer-line: rgba(247,242,231,0.18);
  --footer-text: #F7F2E7;
  --footer-muted: rgba(247,242,231,0.66);
}

/* dark palette — follows the device's "gece modu" */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;

    --bg: #100E0B;
    --bg-panel: #181512;
    --bg-deep: #0B0A08;
    --bg-elev: #201C17;
    --line: #322C24;
    --text: #F4EFE3;
    --text-muted: #A69B89;
    --gold: #EBE0C8;
    --gold-dim: #A3977F;

    --tint-03: rgba(244,239,227,0.04);
    --tint-06: rgba(244,239,227,0.07);
    --tint-08: rgba(244,239,227,0.10);
    --tint-10: rgba(244,239,227,0.13);
    --edge: rgba(244,239,227,0.26);
    --edge-strong: rgba(244,239,227,0.42);
    --sheen: rgba(255,255,255,0.12);

    --topbar-bg: rgba(14,12,10,0.82);
    --topbar-bg-stuck: rgba(14,12,10,0.96);
    --topbar-line: rgba(50,44,36,0.9);
    --panel-bg: rgba(24,21,18,0.97);

    --hero-glow: rgba(255,255,255,0.06);
    --hero-top: #17140F;
    --hero-bottom: #0B0907;

    --plate-bg: #EFEADE;

    --logo-filter: none;

    --logo-filter-hover: drop-shadow(0 6px 16px rgba(0,0,0,0.6));

    --glow: 0 18px 44px -22px rgba(0,0,0,0.75), 0 2px 12px rgba(0,0,0,0.45);
    --shadow-bar: 0 18px 40px -28px rgba(0,0,0,0.8);
    --shadow-pop: 0 26px 60px -28px rgba(0,0,0,0.75);

    --footer-bg: #070605;
    --footer-surface: rgba(247,242,231,0.05);
    --footer-line: rgba(247,242,231,0.14);
    --footer-text: #F4EFE3;
    --footer-muted: rgba(244,239,227,0.62);
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:120px; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background 0.45s ease, color 0.45s ease;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; }

/* ---------- PAGE RHYTHM: one section = one full screen ---------- */
.page{
  min-height:100svh;
  padding:132px 6vw 96px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid var(--line);
  scroll-snap-align:start;
}
@media(min-width:1000px) and (min-height:620px){
  html{ scroll-snap-type:y proximity; }
}
@media(max-width:700px){
  .page{ min-height:auto; padding:134px 6vw 88px; }
  html{ scroll-snap-type:none; }
}

/* ---------- TOP BAR (fixed, never scrolls away) ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:var(--topbar-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--topbar-line);
  transition:background 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium),
             box-shadow 0.4s var(--ease-premium);
}
.topbar.is-stuck{
  background:var(--topbar-bg-stuck);
  border-bottom-color:var(--line);
  box-shadow:var(--shadow-bar);
}
/* 1fr | auto | 1fr keeps the middle column dead-centre on the page */
.topbar-inner{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:20px;
  padding:26px 6vw;
  transition:padding 0.4s var(--ease-premium);
}
.topbar.is-stuck .topbar-inner{ padding:19px 6vw; }

/* ---------- BRAND / LOGO ---------- */
.brand{ justify-self:start; display:inline-flex; align-items:center; margin-left:clamp(4px, 0.7vw, 12px); }
.brand img{
  height:40px; width:auto;
  transition:height 0.4s var(--ease-premium), transform 0.5s var(--ease-premium), filter 0.5s var(--ease-premium);
}
.topbar.is-stuck .brand img{ height:33px; }
.brand:focus-visible{ outline:1px solid var(--gold); outline-offset:6px; border-radius:2px; }

.footer-mark{ display:inline-flex; align-items:center; }
.footer-mark img{ height:28px; width:auto; opacity:0.5; transition:opacity 0.35s ease; }
.footer-mark:hover img{ opacity:1; }

/* ---------- NAV LINKS (centred) ---------- */
.nav-links{ justify-self:center; display:flex; align-items:center; gap:10px; font-size:0.85rem; }

/* nav item = premium motion button */
.nav-link{
  position:relative;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px;
  border:1px solid transparent; border-radius:999px;
  color:var(--text-muted);
  font:inherit; font-size:0.85rem; background:none; cursor:pointer;
  white-space:nowrap;
  transition:color 0.35s var(--ease-premium), transform 0.45s var(--ease-premium),
             border-color 0.35s var(--ease-premium), box-shadow 0.45s var(--ease-premium),
             background 0.35s var(--ease-premium);
}
.nav-link:hover,
.nav-link[aria-expanded="true"],
.nav-link.is-active{
  color:var(--text);
  transform:translateY(-2px);
}
/* underline that draws in from left to right on hover */
.nav-link::after{
  content:""; position:absolute;
  left:15px; right:15px; bottom:4px; height:1.5px;
  background:var(--gold); border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 0.45s var(--ease-premium);
  pointer-events:none;
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-expanded="true"]::after,
.nav-link.is-active::after{ transform:scaleX(1); }
.nav-link:active{ transform:translateY(0) scale(0.97); }
.nav-link:focus,
.nav-link:focus-visible{ outline:none; }
.nav-link .caret{
  width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform 0.4s var(--ease-premium);
}
.nav-link[aria-expanded="true"] .caret{ transform:rotate(-135deg) translateY(-1px); }

/* dropdown */
.nav-item{ position:relative; }
.nav-sub{
  position:absolute; top:calc(100% + 10px); left:50%;
  min-width:258px; max-width:min(88vw, 320px);
  background:var(--panel-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:6px;
  padding:8px;
  opacity:0; visibility:hidden;
  transform:translate(-50%, -8px) scale(0.98);
  transform-origin:top center;
  transition:opacity 0.32s var(--ease-premium), transform 0.42s var(--ease-premium), visibility 0.32s;
  box-shadow:var(--shadow-pop);
}
.nav-item.is-open > .nav-sub{ opacity:1; visibility:visible; transform:translate(-50%, 0) scale(1); }
.nav-sub a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 14px; border-radius:4px;
  font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-muted);
  transition:color 0.3s var(--ease-premium), background 0.3s var(--ease-premium), transform 0.4s var(--ease-premium);
}
.nav-sub a + a{ margin-top:2px; }
.nav-sub a::after{ content:"\2192"; color:var(--gold-dim); transform:translateX(-4px); opacity:0; transition:transform 0.4s var(--ease-premium), opacity 0.3s ease; }
.nav-sub a:hover,
.nav-sub a[aria-current="page"]{ color:var(--gold); background:var(--tint-08); transform:translateX(3px); }
.nav-sub a:hover::after{ transform:translateX(0); opacity:1; }
.nav-sub a:focus-visible{ outline:1px solid var(--gold); outline-offset:2px; }

/* ---------- LANGUAGE SWITCH (EN / TR) ---------- */
.lang-switch{
  justify-self:end;
  display:inline-flex; align-items:center; gap:2px;
  padding:5px 6px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--tint-03);
}
.lang-btn{
  appearance:none; -webkit-appearance:none;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:0.74rem; letter-spacing:0.09em;
  color:var(--text-muted);
  padding:5px 10px; border-radius:999px;
  transition:color 0.3s ease, background 0.35s var(--ease-premium), transform 0.4s var(--ease-premium);
}
.lang-btn:hover{ color:var(--text); transform:translateY(-1px); }
.lang-btn[aria-pressed="true"]{ color:var(--bg); background:var(--gold); }
.lang-btn:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
.lang-sep{ color:var(--line); font-size:0.72rem; }

/* ---------- MENU TOGGLE (phones only) ---------- */
.menu-toggle{
  display:none;
  appearance:none; -webkit-appearance:none;
  width:44px; height:44px; padding:0;
  border:1px solid var(--line); border-radius:999px;
  background:var(--tint-03); color:var(--text);
  cursor:pointer;
  align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.menu-toggle:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
.menu-toggle-bars{ position:relative; width:18px; height:12px; display:block; }
.menu-toggle-bars span{
  position:absolute; left:0; right:0; height:1.6px; border-radius:2px;
  background:currentColor;
  transition:transform 0.4s var(--ease-premium), opacity 0.25s ease, top 0.4s var(--ease-premium);
}
.menu-toggle-bars span:nth-child(1){ top:0; }
.menu-toggle-bars span:nth-child(2){ top:5.2px; }
.menu-toggle-bars span:nth-child(3){ top:10.4px; }
.topbar.is-menu-open .menu-toggle-bars span:nth-child(1){ top:5.2px; transform:rotate(45deg); }
.topbar.is-menu-open .menu-toggle-bars span:nth-child(2){ opacity:0; }
.topbar.is-menu-open .menu-toggle-bars span:nth-child(3){ top:5.2px; transform:rotate(-45deg); }

/* ---------- TOP BAR RESPONSIVE ---------- */
/* tablets (portrait): logo + language on top, the full menu on a second row */
@media(max-width:940px){
  .topbar-inner{
    grid-template-columns:auto auto;
    grid-template-areas:"brand lang" "nav nav";
    justify-content:space-between;
    row-gap:12px; gap:14px;
    padding:17px 5vw;
  }
  .topbar.is-stuck .topbar-inner{ padding:13px 5vw; }
  .brand img{ height:30px; }
  .topbar.is-stuck .brand img{ height:25px; }
  .brand{ grid-area:brand; }
  .lang-switch{ grid-area:lang; }
  .nav-links{ grid-area:nav; justify-self:center; gap:4px; }
  .nav-link{ padding:10px 12px; font-size:0.84rem; }
  .nav-link::after{ left:12px; right:12px; bottom:4px; }
}
/* phones: the menu folds behind a burger and opens as a full-width panel */
@media(max-width:700px){
  .topbar-inner{
    grid-template-columns:1fr auto auto;
    grid-template-areas:"brand lang toggle" "nav nav nav";
    row-gap:0; gap:10px;
    padding:14px 5vw;
  }
  .topbar.is-stuck .topbar-inner{ padding:10px 5vw; }
  .brand img{ height:26px; }
  .topbar.is-stuck .brand img{ height:23px; }
  /* the burger matches the 34px height of the language pill beside it */
  .menu-toggle{ display:inline-flex; grid-area:toggle; width:34px; height:34px; }
  .menu-toggle-bars{ width:14px; height:10px; }
  .menu-toggle-bars span{ height:1.5px; }
  .menu-toggle-bars span:nth-child(2){ top:4.25px; }
  .menu-toggle-bars span:nth-child(3){ top:8.5px; }
  .topbar.is-menu-open .menu-toggle-bars span:nth-child(1),
  .topbar.is-menu-open .menu-toggle-bars span:nth-child(3){ top:4.25px; }
  .lang-switch{ padding:3px 4px; gap:1px; height:34px; }
  .lang-btn{ padding:5px 9px; font-size:0.68rem; letter-spacing:0.08em; }
  .lang-sep{ font-size:0.66rem; }

  .nav-links{
    justify-self:stretch;
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height 0.45s var(--ease-premium), visibility 0.45s, padding 0.45s var(--ease-premium);
  }
  .topbar.is-menu-open .nav-links{
    max-height:calc(100svh - 80px); overflow-y:auto; visibility:visible;
    padding:12px 0 8px;
  }
  .nav-links > .nav-link,
  .nav-item > .nav-link{
    width:100%; justify-content:space-between;
    padding:15px 4px; border-radius:0;
    font-size:1rem; color:var(--text);
    border-bottom:1px solid var(--line);
  }
  .nav-link:hover, .nav-link[aria-expanded="true"]{ transform:none; }
  .nav-link::after{ left:4px; right:auto; width:48px; bottom:-1px; height:1.5px; }
  .nav-link .caret{ width:8px; height:8px; }

  /* the services sub-menu opens inline, inside the panel */
  .nav-sub{
    position:static; min-width:0; width:auto; max-width:none;
    transform:none; box-shadow:none; border:0; background:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:0 0 0 12px;
    max-height:0; overflow:hidden;
    transition:max-height 0.4s var(--ease-premium), opacity 0.3s ease, visibility 0.3s, padding 0.4s var(--ease-premium);
  }
  .nav-item.is-open > .nav-sub{ transform:none; max-height:260px; padding:6px 0 10px 12px; }
  .nav-sub a{ padding:14px 12px; font-size:0.84rem; }
}
@media(max-width:380px){
  .topbar-inner{ gap:8px; padding-left:4vw; padding-right:4vw; }
  .brand img{ height:22px; }
  .lang-btn{ padding:5px 8px; }
}

/* ---------- BUTTONS ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px;
  border:1px solid var(--gold-dim); border-radius:3px;
  color:var(--gold); font-size:0.9rem;
  transition:transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium),
             color 0.3s ease, border-color 0.3s ease, background 0.35s ease;
}
.btn span.arrow{ transition:transform 0.5s var(--ease-premium); }
.btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 20%, var(--sheen) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform 0.9s var(--ease-premium);
}
.btn:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:var(--glow);
}
.btn:hover::before{ transform:translateX(120%); }
.btn:hover span.arrow{ transform:translateX(5px); }
.btn:active{ transform:translateY(-1px) scale(0.98); }
.btn:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.btn-solid{ background:var(--tint-10); }
.btn-solid:hover{ background:var(--gold); color:var(--bg); }

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px 6vw 8vw;
  position:relative;
  background:
    radial-gradient(ellipse at 72% 18%, var(--hero-glow), transparent 62%),
    linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  scroll-snap-align:start;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:0.42;
  mask-image: linear-gradient(180deg, transparent, black 42%);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 42%);
}
.hero-eyebrow{ font-size:0.85rem; color:var(--gold); margin-bottom:18px; position:relative; z-index:1; }
.hero h1{
  font-size:clamp(2.6rem, 8vw, 6.2rem);
  line-height:0.98; max-width:14ch;
  position:relative; z-index:1;
}
.hero h1 em{ font-style:italic; color:var(--gold); font-weight:400; }
.hero-sub{
  margin-top:28px; max-width:46ch;
  color:var(--text-muted); font-size:1.05rem;
  position:relative; z-index:1;
}
.hero-actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }

/* copy on the left, loop video filling the space on the right */
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap:clamp(24px, 2.6vw, 44px);
  align-items:end;
  width:100%;
  position:relative; z-index:1;
}
.hero-copy{ min-width:0; }

/*
  The video carries no frame. All four edges are feathered instead, so the
  footage dissolves into the hero gradient. Two single-layer masks are nested
  (horizontal on the wrapper, vertical on the video) rather than using one
  two-layer mask + mask-composite, because nested masks multiply on their own
  and need no compositing support from the engine.
*/
.hero-media{
  --feather:13%;
  /*
    The frame used to run 6vw past its column so it touched the viewport edge,
    which read as the media hanging off the right rail. It now ends with the
    grid column and is nudged further left by --shift, into the column gap.
  */
  --shift:clamp(6px, 1.2vw, 22px);
  position:relative;
  min-width:0;
  width:100%;
  translate:calc(-1 * var(--shift)) 0;
  aspect-ratio:16 / 10;
  max-height:66svh;
  margin-bottom:8px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.hero-video, .hero-shot{
  display:block;
  width:100%; height:100%;
  border:0;
  object-fit:cover;
  --feather-y:var(--feather);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--feather-y), #000 calc(100% - var(--feather-y)), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 var(--feather-y), #000 calc(100% - var(--feather-y)), transparent 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* credit line under the loop video; sits outside the masked media box */
.hero-media-wrap{ min-width:0; display:flex; flex-direction:column; }
.hero-credit{
  align-self:flex-end;
  margin:2px calc(var(--shift, clamp(6px, 1.2vw, 22px)) + 13%) 0 0;
  font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--text-muted);
}
.hero-credit strong{ color:var(--gold); font-weight:500; }

/* stacked (narrow screens, and any screen held upright): the hero grows
   past 100svh rather than clipping the video */
@media(max-width:900px), (orientation:portrait) and (max-width:1366px){
  .hero{ justify-content:center; padding:124px 6vw 92px; }
  .hero-inner{ grid-template-columns:1fr; gap:32px; align-items:start; }
  .hero-media{ --feather:11%; --shift:0px; aspect-ratio:16 / 10; max-height:none; margin-bottom:0; }
  /* stacked, the loop stays inside the page margins and is centred */
  .hero-media-wrap .hero-media{ width:min(100%, 620px); margin-inline:auto; }
  .hero-media-wrap{ width:min(100%, 620px); margin-inline:auto; }
  /* stacked, the credit sits directly under the loop, centred on the page */
  .hero-credit{ align-self:center; margin:6px 0 0; text-align:center; padding-left:0.22em; font-size:0.64rem; }
  /* home: headline and intro first, then the loop, then the two buttons */
  .hero .hero-copy{ display:contents; }
  .hero .hero-inner{ row-gap:0; }
  /* .hero-actions is still a DOM child of .hero-copy (display:contents only
     changes layout), so it has to be targeted through .hero-copy */
  .hero .hero-inner > .hero-media-wrap{ order:1; margin-top:30px; }
  .hero .hero-copy > .hero-actions{ order:2; }
}
/* the copy column is narrower now that the video is larger, so the
   headline is capped to keep its first word inside the column */
@media(min-width:901px) and (orientation:landscape), (min-width:1367px){
  .hero h1{ font-size:clamp(2.4rem, 4.6vw, 5rem); }
}
/* scroll hint, bottom-left of the hero */
.hero-scroll{
  position:absolute; bottom:36px; left:6vw;
  font-size:0.75rem; color:var(--text-muted);
  display:flex; align-items:center; gap:10px;
}
.hero-scroll .line{
  width:36px; height:1px; background:var(--text-muted);
  transform-origin:left; animation:scrollLine 2.8s var(--ease-premium) infinite;
}
@keyframes scrollLine{ 0%,100%{ transform:scaleX(0.4); opacity:0.5; } 50%{ transform:scaleX(1); opacity:1; } }

/* ---------- SECTION SHARED ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:clamp(32px, 5vh, 64px); flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); }
.section-head p{ color:var(--text-muted); max-width:38ch; font-size:0.95rem; }
.eyebrow{
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; }
.about-grid p{ font-size:1.15rem; color:var(--text); max-width:52ch; }
.about-grid p + p{ margin-top:20px; color:var(--text-muted); font-size:1rem; }
.stat-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.stat-row{
  display:flex; justify-content:space-between; padding:18px 0;
  border-bottom:1px solid var(--line); font-size:0.95rem;
  transition:padding-left 0.4s var(--ease-premium), color 0.3s ease;
}
.stat-row:hover{ padding-left:10px; }
.stat-row span:first-child{ color:var(--text-muted); }
.about-actions{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }
@media(max-width:800px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- REFERANSLAR (ambient drift + settled hover) ---------- */
.ref-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:20px;
}
/*
  Motion is split across separate properties on purpose. The endless ambient
  drift animates `translate`, while every hover response animates `scale` /
  `rotate` / colour. Because those are independent properties, the running
  animation and the hover transition compose instead of overriding each other
  — so hovering no longer snaps the card into position, and releasing it eases
  back out rather than cutting.
*/
.ref-card{
  background:var(--bg-panel);
  border:1px solid var(--line); border-radius:4px;
  padding:34px 26px 26px;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  animation:refFloat 13s var(--ease-sine) infinite;
  transition:background 0.9s var(--ease-premium),
             border-color 0.9s var(--ease-premium),
             box-shadow 1.1s var(--ease-premium),
             scale 0.95s var(--ease-premium);
  will-change:translate, scale;
}
/* offset phases so the four cards breathe independently */
.ref-card:nth-child(2){ animation-delay:-3.25s; }
.ref-card:nth-child(3){ animation-delay:-6.5s; }
.ref-card:nth-child(4){ animation-delay:-9.75s; }
.ref-card:hover{
  background:var(--bg-elev);
  border-color:var(--edge);
  box-shadow:var(--glow);
  scale:1.022;
}
.ref-plate{
  width:100%; height:118px;
  background:var(--plate-bg); border:1px solid var(--line); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  padding:18px 22px; overflow:hidden;
}
.ref-plate img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
  /* a very slow ambient drift, so the logos breathe rather than bounce */
  animation:logoDrift 20s var(--ease-sine) infinite;
  transition:scale 1.3s var(--ease-premium), rotate 1.3s var(--ease-premium);
  will-change:translate, scale;
}
.ref-card:nth-child(2) .ref-plate img{ animation-delay:-5s; }
.ref-card:nth-child(3) .ref-plate img{ animation-delay:-10s; }
.ref-card:nth-child(4) .ref-plate img{ animation-delay:-15s; }
.ref-card:hover .ref-plate img{ scale:1.045; rotate:-0.4deg; }
.ref-name{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:1.05rem; text-align:center;
  transition:color 0.7s ease, translate 0.9s var(--ease-premium);
}
.ref-card:hover .ref-name{ color:var(--gold); translate:0 -2px; }
@keyframes refFloat{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -7px; }
}
@keyframes logoDrift{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -5px; }
}
/* ---------- SERVICES PAGES ---------- */
.svc-hero{
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:140px 6vw 96px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse at 20% 15%, var(--hero-glow), transparent 58%),
    linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
  scroll-snap-align:start;
}
.svc-hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:0.34;
  mask-image:radial-gradient(ellipse at 50% 40%, black 30%, transparent 96%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, black 30%, transparent 96%);
}
.svc-hero > *{ position:relative; z-index:1; }
.svc-hero-inner{
  display:grid;
  grid-template-columns:minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap:clamp(28px, 3.5vw, 56px);
  align-items:center;
  width:100%;
}
.svc-hero-copy{ min-width:0; }
.svc-hero-media{ margin-bottom:0; max-height:66svh; }
/* drone page: the loop video gets the wider column, same 16:10 frame */
.svc-hero.is-video .svc-hero-inner{ grid-template-columns:minmax(0, 0.94fr) minmax(0, 1.06fr); }
.svc-hero.is-video .svc-hero-media{ max-height:64svh; }
@media(min-width:901px){
  .svc-hero.is-video h1{ font-size:clamp(2.3rem, 4.8vw, 4.4rem); }
}
/* the still keeps the photo's own ratio; the embed keeps YouTube's 16:9 */
.svc-hero-media.is-photo{ aspect-ratio:1800 / 1196; }
/* the embed is played, not just watched, so its top/bottom fade is kept
   shallow enough to leave the YouTube control bar legible */
.svc-hero-media.is-embed{ aspect-ratio:16 / 9; --feather:11%; }
.svc-hero-media.is-embed .hero-shot{ --feather-y:4%; }
@media(max-width:900px){
  .svc-hero-inner{ grid-template-columns:1fr; gap:34px; }
  .svc-hero.is-video .svc-hero-inner{ grid-template-columns:1fr; }
  .svc-hero-media, .svc-hero.is-video .svc-hero-media{ max-height:none; }
  /* headline and intro first, then the photo/video, then the buttons */
  .svc-hero.is-media-first .svc-hero-copy{ display:contents; }
  .svc-hero.is-media-first .svc-hero-inner{ row-gap:0; }
  .svc-hero.is-media-first .svc-hero-inner > :not(.svc-hero-copy){ order:1; margin-top:30px; }
  .svc-hero.is-media-first .svc-hero-copy > .hero-actions{ order:2; }
  .hide-stacked{ display:none; }
}
.svc-hero h1{ font-size:clamp(2.3rem, 6.4vw, 4.6rem); line-height:1.02; max-width:20ch; }
.svc-hero h1 em{ font-style:italic; color:var(--gold); font-weight:400; }
.svc-lead{ margin-top:26px; max-width:56ch; color:var(--text-muted); font-size:1.05rem; }
.badge-row{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- AI PAGE: LINE-DRAWN ROBOTIC ARM ---------- */
/*
  The arm is artwork, not an image: every part is a stroked outline, so it
  keeps the page's ink-on-cream character and recolours itself in gece modu.
  It lives in the hero's second column but bleeds past the 6vw page rail, so
  the forearm reads as entering from the right edge of the page.
*/
.svc-hero.is-ai .svc-hero-inner{
  grid-template-columns:minmax(0, 1.06fr) minmax(0, 0.94fr);
}
.ai-arm-wrap{
  min-width:0;
  margin-right:-6vw;
  animation:armDrift 13s var(--ease-sine) infinite;
}
.ai-arm{
  display:block; width:100%; height:auto;
  color:var(--gold);
  stroke:currentColor; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
}
/* main outlines — drawn on, once, as the page settles */
.ai-arm-ink path{
  stroke-width:2.1;
  opacity:0.92;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:armDraw 1.9s var(--ease-premium) 0.2s forwards;
}
/* plating seams and internal structure sit behind the outline in weight */
.ai-arm-seam path{
  stroke-width:1.4; opacity:0;
  animation:armInk 1.1s ease 1.2s forwards;
  --ink:0.42;
}
.ai-arm-cuff ellipse{
  stroke-width:1.7; opacity:0;
  animation:armInk 1.1s ease 1s forwards;
  --ink:0.7;
}
.ai-arm-cuff ellipse:last-of-type{ --ink:0.4; }
.ai-arm-joint circle{
  stroke-width:1.5; opacity:0;
  animation:armInk 1.1s ease 1.5s forwards, armJoint 4.6s var(--ease-sine) 2.6s infinite;
  --ink:0.5;
}
/* the signal running in from the page edge, and its ports */
.ai-arm-trace path{
  stroke-width:1.3; opacity:0;
  stroke-dasharray:7 6;
  animation:armInk 1.2s ease 0.6s forwards, armSignal 2.4s linear 1.8s infinite;
  --ink:0.4;
}
.ai-arm-port circle{
  stroke-width:1.4; opacity:0;
  animation:armInk 1.2s ease 0.9s forwards;
  --ink:0.45;
}
/* faint emission arcs off the fingertip, pointing at the headline */
.ai-arm-pulse path{
  stroke-width:1.5; opacity:0;
  animation:armInk 1.2s ease 1.9s forwards, armPulse 4.6s var(--ease-sine) 3.1s infinite;
  --ink:0.36;
}
@keyframes armDraw{ to{ stroke-dashoffset:0; } }
@keyframes armInk{ to{ opacity:var(--ink); } }
@keyframes armDrift{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }
@keyframes armSignal{ to{ stroke-dashoffset:-26; } }
@keyframes armJoint{ 0%,100%{ opacity:var(--ink); } 50%{ opacity:0.85; } }
@keyframes armPulse{ 0%,100%{ opacity:calc(var(--ink) * 0.45); } 50%{ opacity:var(--ink); } }

@media(max-width:900px){
  /* the is-ai override above out-specifies the shared stacking rule, so the
     single column has to be restated here */
  .svc-hero.is-ai .svc-hero-inner{ grid-template-columns:1fr; }
  /* stacked under the copy: still bleeding right, but no longer oversized */
  .ai-arm-wrap{ width:min(108%, 560px); margin-right:-6vw; margin-left:auto; }
}
@media(prefers-reduced-motion:reduce){
  .ai-arm-wrap{ animation:none; }
  .ai-arm-ink path{ stroke-dashoffset:0; animation:none; }
  .ai-arm-seam path, .ai-arm-cuff ellipse, .ai-arm-joint circle,
  .ai-arm-trace path, .ai-arm-port circle, .ai-arm-pulse path{
    animation:none; opacity:var(--ink);
  }
}
.badge{
  padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  font-size:0.78rem; color:var(--text-muted);
  transition:transform 0.5s var(--ease-premium), border-color 0.35s ease, color 0.35s ease, box-shadow 0.5s var(--ease-premium);
}
.badge:hover{ transform:translateY(-3px); border-color:var(--edge-strong); color:var(--gold); box-shadow:var(--glow); }

.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; }
.svc-card{
  background:var(--bg-panel);
  border:1px solid var(--line); border-radius:4px;
  padding:30px 26px;
  transition:transform 0.55s var(--ease-premium), border-color 0.35s ease, box-shadow 0.55s var(--ease-premium), background 0.35s ease;
}
.svc-card:hover{ transform:translateY(-6px); border-color:var(--edge); box-shadow:var(--glow); background:var(--bg-elev); }
.svc-card .num{ font-size:0.75rem; letter-spacing:0.14em; color:var(--gold-dim); }
.svc-card h3{ margin-top:14px; font-size:1.25rem; }
.svc-card p{ margin-top:12px; color:var(--text-muted); font-size:0.95rem; }
.spec-list{ border-top:1px solid var(--line); margin-top:8px; }

/* ---------- CONTACT SECTION ---------- */
.contact h2{ font-size:clamp(2rem, 5vw, 3.4rem); max-width:16ch; }
.contact-note{ margin-top:18px; color:var(--text-muted); font-size:0.95rem; max-width:44ch; }
.contact-cta{ margin-top:36px; }

/* ---------- SCROLL REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:0.08s; }
.reveal[data-delay="2"]{ transition-delay:0.16s; }
.reveal[data-delay="3"]{ transition-delay:0.24s; }
.reveal[data-delay="4"]{ transition-delay:0.32s; }
/* reference cards fade in slowly, in a long stagger */
/*
  Entry and hover share a single transition list so the staggered entry delay
  can be set per property: only opacity/transform (the entry itself) are
  delayed. Previously one blanket transition-delay of up to 1.1s also applied
  to the hover properties, which made hovering a card feel unresponsive.
*/
.ref-card.reveal{
  transition:opacity 1.25s var(--ease-premium),
             transform 1.25s var(--ease-premium),
             background 0.9s var(--ease-premium),
             border-color 0.9s var(--ease-premium),
             box-shadow 1.1s var(--ease-premium),
             scale 0.95s var(--ease-premium);
}
.ref-card.reveal[data-delay="1"]{ transition-delay:0.12s, 0.12s, 0s, 0s, 0s, 0s; }
.ref-card.reveal[data-delay="2"]{ transition-delay:0.30s, 0.30s, 0s, 0s, 0s, 0s; }
.ref-card.reveal[data-delay="3"]{ transition-delay:0.48s, 0.48s, 0s, 0s, 0s, 0s; }
.ref-card.reveal[data-delay="4"]{ transition-delay:0.66s, 0.66s, 0s, 0s, 0s, 0s; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:0.01ms !important; }
  html{ scroll-behavior:auto; scroll-snap-type:none !important; }
  .reveal{ opacity:1; transform:none; }
  /* individual transform properties are not covered by the transform reset above */
  .ref-card, .ref-plate img, .ref-name{ translate:none !important; scale:none !important; rotate:none !important; }
}

/* ---------- REACH PAGE (iletisim.html) ---------- */
.reach{
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:150px 6vw 88px;
  background:
    radial-gradient(ellipse at 50% 26%, var(--hero-glow), transparent 62%),
    linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
}
.reach::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:0.34;
  mask-image:radial-gradient(ellipse at 50% 40%, black 30%, transparent 96%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, black 30%, transparent 96%);
}
.reach > *{ position:relative; z-index:1; }
.reach-mark img{ height:42px; width:auto; margin:0 auto 30px; opacity:0.9; }
.reach h1{
  font-size:clamp(2rem, 6.4vw, 4.4rem);
  line-height:1.05; letter-spacing:0.02em;
}
.reach-lead{
  margin-top:22px; max-width:48ch;
  color:var(--text-muted); font-size:1.05rem;
}
.reach-grid{
  margin-top:clamp(36px, 6vh, 56px);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px; width:100%; max-width:880px;
}
.reach-card{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  padding:30px 20px;
  background:var(--bg-panel);
  border:1px solid var(--line); border-radius:6px;
  transition:transform 0.55s var(--ease-premium), border-color 0.35s ease,
             box-shadow 0.55s var(--ease-premium), background 0.35s ease;
}
.reach-card svg{
  width:26px; height:26px; color:var(--gold-dim);
  transition:color 0.3s ease, transform 0.55s var(--ease-premium);
}
.reach-name{ font-family:'Fraunces', serif; font-weight:500; font-size:1.05rem; transition:color 0.3s ease; }
.reach-handle{ font-size:0.78rem; color:var(--text-muted); word-break:break-word; }
.reach-card:hover{
  transform:translateY(-6px);
  border-color:var(--edge-strong);
  background:var(--bg-elev);
  box-shadow:var(--glow);
}
.reach-card:hover svg{ color:var(--gold); transform:scale(1.08); }
.reach-card:hover .reach-name{ color:var(--gold); }
.reach-card:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.reach-footer{
  margin-top:clamp(40px, 7vh, 70px);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;
  color:var(--text-muted); font-size:0.8rem;
}
.reach-footer a:hover{ color:var(--gold); }
@media(max-width:700px){
  .reach{ padding:150px 6vw 80px; }
  .reach-grid{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
}

/* the wordmark is white artwork: inverted on light surfaces, left as-is in dark */
.brand img,
.footer-mark img,
.reach-mark img{ filter:var(--logo-filter); }
.brand:hover img{ transform:translateY(-1px) scale(1.03); filter:var(--logo-filter-hover); }

/* ---------- REFERANSLAR: invitation line ---------- */
.refs-invite{
  margin-top:clamp(30px, 4.5vh, 48px);
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  text-align:center;
}
.refs-invite .rule{ flex:0 0 56px; height:1px; background:var(--line); }
.refs-invite p{
  font-family:'Fraunces', serif; font-size:clamp(1.02rem, 2vw, 1.3rem);
  color:var(--text);
}
.refs-invite em{ font-style:italic; }

/* ------------------------------------------------------------------
   BOTTOM CONTACT BAR — one single dark bar holding every way to
   reach us: the label, the email address and the social links.
------------------------------------------------------------------ */
.contact-bar{
  position:relative; z-index:2; scroll-snap-align:end;
  background:var(--footer-bg);
  color:var(--footer-text);
  border-top:1px solid var(--footer-line);
}
.contact-bar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px 32px; flex-wrap:wrap;
  padding:40px 6vw;
}
.contact-bar-title{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:1.05rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--footer-text);
}
/* the email and the social icons share one baseline */
.contact-bar-links{
  display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap;
  justify-content:center;
}
.contact-bar-sep{ width:1px; height:26px; background:var(--footer-line); }
.contact-mail{
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 20px; border-radius:999px;
  border:1px solid var(--footer-line);
  background:var(--footer-surface);
  font-size:0.95rem; color:var(--footer-text);
  transition:background 0.35s ease, color 0.35s ease, border-color 0.35s ease,
             transform 0.5s var(--ease-premium);
}
.contact-mail svg{ width:19px; height:19px; flex:0 0 auto; }
.contact-mail:hover{ background:var(--footer-text); color:var(--footer-bg); border-color:var(--footer-text); transform:translateY(-2px); }
.contact-mail:focus-visible{ outline:1px solid var(--footer-text); outline-offset:4px; }
.social-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.social-btn{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--footer-line); border-radius:999px;
  background:var(--footer-surface);
  color:var(--footer-muted);
  transition:color 0.3s ease, border-color 0.35s ease, background 0.35s ease,
             transform 0.5s var(--ease-premium);
}
.social-btn svg{ width:19px; height:19px; }
.social-btn:hover{
  color:var(--footer-bg);
  background:var(--footer-text);
  border-color:var(--footer-text);
  transform:translateY(-3px);
}
.social-btn:active{ transform:translateY(-1px) scale(0.97); }
.social-btn:focus-visible{ outline:1px solid var(--footer-text); outline-offset:4px; }
.contact-bar-meta{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:0.76rem; color:var(--footer-muted);
}
.contact-bar .footer-mark img{ filter:none; opacity:0.8; }
@media(max-width:860px){
  .contact-bar-inner{ flex-direction:column; text-align:center; gap:20px; padding:40px 6vw 44px; }
}
@media(max-width:560px){
  .social-btn{ width:40px; height:40px; }
  .social-btn svg{ width:17px; height:17px; }
  .contact-mail{ padding:10px 16px; font-size:0.88rem; }
  .contact-bar-sep{ display:none; }
}

/* ---------- PROJECTS PAGE ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:22px; }
.video-card{
  background:var(--bg-panel);
  border:1px solid var(--line); border-radius:8px; padding:12px;
  transition:transform 0.55s var(--ease-premium), box-shadow 0.55s var(--ease-premium),
             border-color 0.35s ease, background 0.35s ease;
}
.video-card:hover{
  transform:translateY(-5px); border-color:var(--edge);
  background:var(--bg-elev); box-shadow:var(--glow);
}
.video-frame{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  border-radius:5px; background:var(--bg-deep);
}
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-card h3{ margin:16px 6px 0; font-size:1.05rem; }
.video-card p{ margin:7px 6px 0; color:var(--text-muted); font-size:0.86rem; }
.video-card.is-invite{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px;
  padding:30px 26px;
}
.video-card.is-invite h3{ margin:0; font-size:1.25rem; }
.video-card.is-invite p{ margin:0; }

/* ------------------------------------------------------------------
   PORTRAIT TABLETS & PHONES — readable type, roomy tap targets and
   top spacing that matches the height of the fixed bar at each size.
------------------------------------------------------------------ */
@media(min-width:701px) and (max-width:940px){
  /* the bar is two rows tall here (logo + menu) */
  html{ scroll-padding-top:140px; }
  .page{ padding-top:150px; }
  .hero{ padding-top:150px; }
  .svc-hero, .reach{ padding-top:160px; }
  .hero-sub, .svc-lead{ max-width:60ch; }
}
@media(max-width:700px){
  html{ scroll-padding-top:88px; }
  body{ -webkit-text-size-adjust:100%; }
  .page{ padding:112px 6vw 72px; }
  .hero{ padding:108px 6vw 72px; }
  .svc-hero{ padding:112px 6vw 72px; min-height:auto; }
  .reach{ padding:118px 6vw 72px; }
  .hero-inner{ gap:26px; }
  .hero h1{ font-size:clamp(2.3rem, 11vw, 3.4rem); line-height:1.02; }
  .svc-hero h1{ font-size:clamp(2rem, 9.4vw, 3rem); }
  .hero-sub, .svc-lead{ font-size:1rem; margin-top:20px; }
  .hero-scroll{ display:none; }
  .section-head{ margin-bottom:28px; gap:14px; }
  .section-head p{ max-width:none; }
  .about-grid p{ font-size:1.05rem; }

  /* buttons share the row and are easy to hit with a thumb */
  .hero-actions, .about-actions{ gap:10px; margin-top:28px; }
  .hero-actions .btn, .about-actions .btn{ flex:1 1 auto; justify-content:center; }
  .btn{ padding:15px 22px; min-height:48px; }
  .badge-row{ gap:8px; margin-top:24px; }
  /* short badge pairs stay side by side instead of wrapping */
  .badge-row.is-single-line{ flex-wrap:nowrap; }
  .badge-row.is-single-line .badge{
    padding:8px 12px; white-space:nowrap;
    font-size:clamp(0.64rem, 3.3vw, 0.78rem);
  }

  .stat-row{ gap:16px; }
  .stat-row span:last-child{ text-align:right; }
  .stat-row:hover{ padding-left:0; }

  /* logos sit two to a row instead of one oversized card each */
  .ref-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .ref-card{ padding:20px 14px 16px; gap:14px; }
  .ref-plate{ height:84px; padding:12px 14px; }
  .ref-name{ font-size:0.92rem; }

  /* vertical videos stay a comfortable size rather than filling the screen */
  .video-grid{ grid-template-columns:minmax(0, 1fr); max-width:420px; margin-inline:auto; width:100%; }

  .reach-grid{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .reach-card{ padding:22px 18px; }
}
@media(max-width:380px){
  .ref-grid{ grid-template-columns:minmax(0, 1fr); }
  .hero-actions .btn, .about-actions .btn{ flex-basis:100%; }
}