/* ═══════════════════════════════════════════════════════════════════
   Genoa Invest
   One clip per page, fixed behind everything; the page's full text flows
   over it. No per-statement screens, so nothing can read as a slide deck.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #08090a;
  --ink: #f1f2f3;
  --soft: rgba(241,242,243,.78);
  --muted: rgba(241,242,243,.55);
  --faint: rgba(241,242,243,.36);
  --line: rgba(241,242,243,.15);
  --line-2: rgba(241,242,243,.26);
  --brass: #b1934f;

  --serif: ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,
           "Times New Roman",serif;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --m: clamp(22px,5vw,84px);
}

* { box-sizing:border-box; }
html { background:var(--bg); -webkit-text-size-adjust:100%; }
body { margin:0; background:transparent; color:var(--ink);
       font-family:var(--sans); font-size:16.5px; line-height:1.62;
       -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background:rgba(177,147,79,.34); color:#fff; }
:focus-visible { outline:1px solid var(--brass); outline-offset:4px; }

.shell { width:min(calc(100% - var(--m)*2), 1400px); margin-inline:auto; }

.skip { position:absolute; left:-9999px; z-index:100; padding:12px 18px;
        background:var(--brass); color:#12140f; font-size:13px; font-weight:600; }
.skip:focus { left:12px; top:12px; }

/* ── The page's single clip, pinned behind the content ──── */
.stage { position:fixed; inset:0; z-index:-2; background:#000; overflow:hidden; }
.stage img, .stage video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* object-position alone cannot reframe vertically: on a 16:10 screen a 16:9
     clip covers with zero vertical overflow, so the Y term is inert. Zoom in,
     then shift, to choose which part of the frame is on screen. */
  transform:scale(var(--zoom,1))
            translate(var(--shiftx,0), var(--shifty,0));
  transform-origin:center;
}
.stage video { opacity:0; transition:opacity 1s ease; }
.stage img { transition:opacity 1s ease; }
body.playing .stage video { opacity:1; }
body.playing .stage img { opacity:0; }

/* Scrim: heavy enough that body copy is always comfortable, light enough
   that the clip still reads as a room you are standing in. */
.stage::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,9,10,.84) 0%, rgba(8,9,10,.48) 26%,
                    rgba(8,9,10,.6) 58%, rgba(8,9,10,.88) 100%);
}

/* ── Header ─────────────────────────────────────────────── */
.top { position:fixed; inset:0 0 auto; z-index:30; padding:18px 0; }
.top::before { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,10,.8), transparent); }
.top-in { display:flex; align-items:center; justify-content:space-between; gap:22px; }
.top .brand img { height:31px; width:auto; }
.nav { display:flex; gap:clamp(12px,1.6vw,26px);
       font-size:12px; letter-spacing:.05em; color:rgba(241,242,243,.72); }
.nav a { white-space:nowrap; transition:color .22s ease; }
.nav a:hover, .nav a[aria-current="page"] { color:#fff; }
.lang { display:flex; gap:9px; font-size:10px; letter-spacing:.2em; color:var(--muted); }
.lang a:hover { color:#fff; }
.lang a[aria-current="true"] { color:#fff; font-weight:600; }

.menu { display:none; position:relative; }
.menu > summary { list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; padding:8px 13px;
  border:1px solid var(--line-2); border-radius:999px;
  font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--soft); }
.menu > summary::-webkit-details-marker { display:none; }
.menu > summary::after { content:""; width:11px; height:6px; background:currentColor;
  clip-path:polygon(0 0,100% 0,50% 100%); transition:transform .22s ease; }
.menu[open] > summary::after { transform:rotate(180deg); }
.menu-panel { position:absolute; right:0; top:calc(100% + 12px); min-width:230px;
  padding:8px; border:1px solid var(--line-2); border-radius:16px;
  background:rgba(8,9,10,.97); backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px); box-shadow:0 26px 70px rgba(0,0,0,.66); }
.menu-panel a { display:block; padding:13px 15px; border-radius:10px;
  font-size:15.5px; color:var(--soft); }
.menu-panel a[aria-current="page"] { background:rgba(241,242,243,.07); color:#fff;
  box-shadow:inset 2px 0 0 var(--brass); }

/* ── Opening screen: the clip breathes before any reading ── */
.intro { display:grid; align-items:end; min-height:70svh;
         padding:clamp(104px,13vh,150px) 0 clamp(30px,3.4vw,50px); }

.label { margin:0; font-size:10px; font-weight:500; letter-spacing:.4em;
         text-transform:uppercase; color:var(--brass); }

h1.title { margin:clamp(20px,2.4vw,34px) 0 0; font-family:var(--serif);
  font-weight:400; font-size:clamp(30px,4.4vw,66px); line-height:1.06;
  letter-spacing:-.03em; color:#fff; max-width:20ch; }
h1.title .turn { display:block; color:var(--brass); }

.intro .opening { margin:clamp(20px,2.4vw,32px) 0 0; max-width:34ch;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px,2.4vw,36px); line-height:1.2; letter-spacing:-.018em;
  color:#fff; text-wrap:pretty; }

.meta { display:flex; flex-wrap:wrap; align-items:center; gap:9px 22px;
  margin:clamp(28px,3.2vw,46px) 0 0; padding-top:20px; border-top:1px solid var(--line-2);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.meta b { color:var(--soft); font-weight:500; letter-spacing:.22em; }

/* ── The flowing text ───────────────────────────────────── */
.flow { padding:0 0 clamp(60px,8vw,120px); }

/* Claim left, elaboration right: the page reads in half the scroll. */
.block { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
         column-gap:clamp(28px,4.4vw,84px); align-items:start;
         padding:clamp(20px,2vw,32px) 0; }
.block + .block { border-top:1px solid var(--line); }

.block > h2 { grid-column:1 / -1; }

.block .lead { grid-column:1; margin:0; max-width:22ch; font-family:var(--serif);
  font-weight:400; font-size:clamp(22px,2.5vw,37px); line-height:1.16;
  letter-spacing:-.022em; color:#fff; text-wrap:pretty; }

.block .notes { grid-column:2; }
.block .note { margin:0; max-width:52ch; font-size:16px; line-height:1.72;
  color:var(--soft); }
.block .note + .note { margin-top:10px; }

/* Blocks whose lead spans the full width (lists, ledgers) */
.block .aside { grid-column:1 / -1; margin-top:clamp(18px,2vw,28px); }
.block:has(.aside) .lead { grid-column:1 / -1; max-width:30ch; }

/* A closing statement that should land harder */
.block.beat { grid-template-columns:1fr; }
.block.beat .lead { grid-column:1; max-width:20ch;
  font-size:clamp(26px,3.2vw,48px); line-height:1.08; }
.block.beat .notes { grid-column:1; margin-top:clamp(16px,1.8vw,24px); }

/* Named chapters (Masamız) */
.block > h2 { margin:0 0 clamp(18px,2vw,28px); font-family:var(--sans);
  font-size:10px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass); }

/* ── Bullet groups ──────────────────────────────────────── */
.slats { margin:clamp(20px,2.2vw,30px) 0 0; padding:0; list-style:none; max-width:58ch; }
.slats li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px;
  padding:14px 0; border-top:1px solid var(--line);
  font-size:16px; line-height:1.66; color:var(--soft); }
.slats li::before { content:""; width:5px; height:5px; margin-top:.62em;
  border-radius:50%; background:var(--brass); }
.slat-foot { margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line-2);
  max-width:48ch; font-size:16px; line-height:1.76; color:var(--muted); }

/* ── Numbered capability ledger (Ne İş Yaparız) ─────────── */
.ledger { margin:clamp(24px,2.6vw,36px) 0 0; padding:0; list-style:none;
          counter-reset:item; max-width:64ch; }
.ledger li { display:grid; grid-template-columns:2.4em minmax(0,1fr); gap:10px;
  padding:17px 0; border-top:1px solid var(--line); counter-increment:item;
  font-size:16px; line-height:1.7; color:var(--soft); }
.ledger li::before { content:counter(item,decimal-leading-zero);
  padding-top:.28em; font-size:10.5px; font-weight:500; letter-spacing:.14em;
  font-variant-numeric:tabular-nums; color:var(--brass); }

/* ── Contact ────────────────────────────────────────────── */
.contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(34px,5vw,88px); align-items:start;
  padding:clamp(34px,4.4vw,68px) 0 clamp(60px,8vw,110px); }

.direct { display:grid; margin:clamp(26px,3vw,42px) 0 0; }
.direct a, .direct div { display:grid; grid-template-columns:112px minmax(0,1fr);
  gap:14px; align-items:baseline; padding:16px 0; border-top:1px solid var(--line);
  font-size:16.5px; color:var(--ink); }
.direct span { font-size:10px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); }
.direct a:hover { color:var(--brass); }

.form { padding:clamp(24px,2.6vw,38px); border:1px solid var(--line-2);
  border-radius:3px; background:rgba(8,9,10,.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.field { display:grid; gap:8px; margin-bottom:17px; }
.field label { font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); }
.field input, .field textarea { width:100%; padding:13px 15px;
  border:1px solid var(--line-2); border-radius:3px; background:rgba(8,9,10,.7);
  color:var(--ink); font-family:var(--sans); font-size:16px;
  transition:border-color .2s ease; }
.field textarea { min-height:118px; resize:vertical; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--brass); }
.hp { position:absolute; left:-9999px; }

.btn { display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:52px; padding:0 24px; border:1px solid var(--brass);
  border-radius:3px; background:var(--brass); color:#12140f;
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; cursor:pointer; transition:background-color .2s ease; }
.btn:hover { background:#c9a95c; border-color:#c9a95c; }
.btn.ghost { width:auto; background:transparent; border-color:var(--line-2); color:var(--ink); }
.btn.ghost:hover { border-color:var(--brass); color:var(--brass); }

/* ── Pager ──────────────────────────────────────────────── */
.pager { padding:clamp(24px,2.6vw,40px) 0; border-top:1px solid var(--line-2); }
.pager span { display:block; margin-bottom:10px; font-size:10px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--brass); }
.pager strong { display:flex; align-items:center; gap:16px; font-family:var(--serif);
  font-weight:400; font-size:clamp(25px,3.2vw,46px); line-height:1.06;
  letter-spacing:-.026em; transition:color .28s ease; }
.pager strong::after { content:""; flex:none; width:28px; height:10px;
  background:currentColor;
  clip-path:polygon(0 40%,70% 40%,70% 0,100% 50%,70% 100%,70% 60%,0 60%);
  transition:transform .28s ease; }
.pager a:hover strong { color:var(--brass); }
.pager a:hover strong::after { transform:translateX(10px); }

/* ── Footer — opaque, so the clip ends with the page ────── */
.foot { position:relative; padding:clamp(34px,3.6vw,54px) 0 22px;
        border-top:1px solid var(--line); background:#0a0b0c; }
.foot-top { display:grid; grid-template-columns:auto minmax(0,1fr);
            gap:clamp(20px,2.6vw,42px) clamp(28px,4vw,64px); align-items:start; }
.foot-top > div:first-child { grid-row:1 / span 2; }
.foot img { height:46px; width:auto; opacity:.92; }
.foot-top > div > p { margin:12px 0 0; max-width:30ch; font-size:13.5px;
  line-height:1.6; color:var(--muted); }
.foot h2 { margin:0 0 10px; font-size:10px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint); }
.foot ul { margin:0; padding:0; list-style:none;
           display:flex; flex-wrap:wrap; gap:8px 20px; }
.foot li a { display:inline-block; padding:2px 0; }
.foot li a { font-size:14.5px; color:var(--soft); }
.foot li a:hover { color:var(--brass); }
.foot-line { display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:10px 24px; margin-top:clamp(22px,2.4vw,34px); padding-top:18px;
  border-top:1px solid var(--line); font-size:12.5px; color:var(--faint); }
.foot-line p { margin:0; }

/* ── Motion control ─────────────────────────────────────── */
.motion-toggle { position:fixed; z-index:40; right:var(--m); bottom:18px;
  transition:opacity .3s ease, transform .3s ease, color .2s ease, border-color .2s ease;
  padding:9px 15px; border:1px solid var(--line-2); border-radius:999px;
  background:rgba(8,9,10,.74); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); color:var(--soft);
  font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; cursor:pointer; }
.motion-toggle:hover { color:#fff; border-color:var(--brass); }
.motion-toggle.tucked { opacity:0; pointer-events:none;
  transform:translateY(10px); }

/* ── Language gate ──────────────────────────────────────── */
.gate { display:grid; place-items:center; min-height:100svh; padding:var(--m);
        text-align:center; }
.gate img.mark { width:240px; height:auto;
                 margin:0 auto clamp(30px,4vw,50px); }
.gate h1 { margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(25px,3.2vw,42px); line-height:1.18; letter-spacing:-.024em; }
.gate p { margin:16px auto 0; max-width:42ch; font-size:16px; color:var(--muted); }
.gate-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:13px;
  margin-top:clamp(26px,3.2vw,42px); }
.gate-actions .btn { width:auto; min-width:166px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:980px) {
  .contact { grid-template-columns:1fr; }
  .foot-top { grid-template-columns:1fr 1fr; }
  .foot-top > div:first-child { grid-column:1 / -1; }
}
@media (max-width:860px) {
  .nav { display:none; }
  .menu { display:block; }
}
@media (max-width:860px) {
  .block, .block:has(.aside) { grid-template-columns:1fr; }
  .block .lead, .block:has(.aside) .lead { grid-column:1; max-width:26ch; }
  .block .notes { grid-column:1; margin-top:clamp(14px,2.4vw,20px); }
}

@media (max-width:640px) {
  /* Six links wrapping mid-row looked accidental; two tidy columns instead. */
  .foot ul { display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
             gap:12px 18px; }
  .foot-top > div:nth-child(3) ul { grid-template-columns:1fr; }
  .motion-toggle { bottom:14px; padding:9px 13px; }
  .top-in { min-height:0; }
  .top .brand img { height:30px; }
  .direct a, .direct div { grid-template-columns:1fr; gap:5px; }
  .foot-top { grid-template-columns:1fr; }
  /* iOS cannot paint a fixed background cheaply; scroll it with the page. */
  .stage { position:absolute; height:100svh; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
}