/* GATE STUDIOS — shared stylesheet for the service landing pages.
   Tokens lifted from index.html so these pages read as the same site.
   Unlike index.html these pages are genuinely responsive (width=device-width),
   carry no video, and stay under ~100KB, so they pass Core Web Vitals. */

:root {
  --bg: #E3E0DA;
  --ink: #0B0B0B;
  /* .59 not .55: at .55 this composites to #6c6b68 on #E3E0DA = 4.05:1,
     under the 4.5:1 WCAG AA floor for the 13px labels that use it. */
  --muted: rgba(11, 11, 11, .59);
  --line: rgba(11, 11, 11, .18);
  --ease-quad: cubic-bezier(.25, .46, .45, .94);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--bg); color: var(--ink);
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 70px); }

/* ============ nav ============ */
/* scoped to .site: the breadcrumb is also a <nav> and must not inherit
   flex/space-between/sticky/border from here */
nav.site {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px clamp(20px, 5vw, 70px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
nav.site .home { display: flex; align-items: center; gap: 10px; text-decoration: none; }
nav.site .logo { height: 30px; width: auto; aspect-ratio: 328 / 147; opacity: .85; }
nav.site .nav-links { display: flex; gap: clamp(14px, 2.4vw, 26px); }
nav.site .nav-links a, .cta {
  font: 700 14px/1 'Inter', sans-serif; letter-spacing: -.01em;
  text-transform: uppercase; text-decoration: none;
}
nav.site .nav-links a { opacity: .8; transition: opacity .2s var(--ease-quad); }
nav.site .nav-links a:hover { opacity: 1; }
@media (max-width: 720px) { nav.site .nav-links { display: none; } }

.cta {
  display: inline-block; background: var(--ink); border: 1px solid var(--ink);
  color: #fff; padding: 12px 26px; font-size: 13px; letter-spacing: .02em;
  transition: background-color .2s var(--ease-quad), color .2s var(--ease-quad);
}
.cta:hover { background: transparent; color: var(--ink); }
.cta.ghost { background: transparent; color: var(--ink); }
.cta.ghost:hover { background: var(--ink); color: #fff; }

/* ============ typography ============ */
h1 {
  font-size: clamp(30px, 5.4vw, 55px); font-weight: 600;
  letter-spacing: -.04em; line-height: 1.1; text-transform: uppercase;
  max-width: 18ch;
}
h2 {
  font-size: clamp(22px, 3.2vw, 32px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.2; text-transform: uppercase;
  margin-bottom: 22px;
}
h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
p { font-size: 17px; line-height: 1.55; }
.lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.45; max-width: 62ch; margin-top: 22px; }

section { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }

/* ============ breadcrumb + hero ============ */
.crumbs { font-size: 13px; color: var(--muted); padding-top: 30px; letter-spacing: .01em; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

header.hero { padding: clamp(38px, 6vw, 64px) 0 clamp(56px, 8vw, 88px); }
header.hero .cta { margin-top: 34px; }

/* ============ prose ============ */
.prose { max-width: 68ch; }
.prose p + p { margin-top: 18px; }
.prose p + h3 { margin-top: 34px; }
.prose h3 + p { margin-top: 10px; }

/* ============ stats ============ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--bg); padding: 26px 24px; }
.stat .num { font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.stat .lbl { margin-top: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; font-weight: 700; }
.stat .sub { margin-top: 5px; font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ============ steps ============ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; }
.step .n { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.step h3 { margin: 10px 0 8px; }
.step p { font-size: 15px; line-height: 1.5; color: rgba(11, 11, 11, .78); }

/* ============ cases ============ */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.case { border-top: 2px solid var(--ink); padding-top: 16px; }
.case .client { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.case .result { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin-top: 10px; }
.case p { font-size: 15px; line-height: 1.5; color: rgba(11, 11, 11, .78); margin-top: 10px; }

/* ============ faq ============ */
/* Answers stay in the DOM and visible: Google will not honour FAQPage schema
   for content hidden behind JS. */
.faq { max-width: 74ch; }
.faq-item { padding: 22px 0; border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin-bottom: 9px; }
.faq-item p { font-size: 16px; line-height: 1.55; color: rgba(11, 11, 11, .8); }

/* ============ related ============ */
.related { display: flex; flex-wrap: wrap; gap: 12px; }
.related a {
  border: 1px solid var(--line); padding: 11px 18px; text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  transition: border-color .2s var(--ease-quad), background-color .2s var(--ease-quad);
}
.related a:hover { border-color: var(--ink); background: rgba(11, 11, 11, .04); }

/* ============ case study results ============ */
.case-results { list-style: none; padding: 0; margin: 28px 0 0; max-width: 62ch; }
.case-results li {
  padding: 16px 0; border-top: 1px solid var(--line);
  font-size: 20px; font-weight: 600; letter-spacing: -.01em;
}
.case-results li:last-child { border-bottom: 1px solid var(--line); }

/* ============ closing cta ============ */
.close-cta { text-align: center; }
.close-cta h2 { margin-bottom: 16px; }
.close-cta p { max-width: 52ch; margin: 0 auto 30px; color: rgba(11, 11, 11, .78); }

/* ============ footer ============ */
footer { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 14px; }
footer .foot-row { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: center; }
footer a { text-decoration: none; opacity: .75; }
footer a:hover { opacity: 1; }
footer .legal { display: flex; flex-wrap: wrap; gap: 18px; }
footer .lang { display: flex; gap: 12px; }
footer .lang a[aria-current="true"] { font-weight: 700; opacity: 1; }
footer .addr { color: var(--muted); margin-top: 20px; font-size: 13px; line-height: 1.6; }