/* ============================================================
   FONTS  (self-hosted; see README for why they are not on Google Fonts)
   ============================================================ */
@font-face{
  font-family:'Stack Sans Headline';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/headline-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Stack Sans Headline';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/headline-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Stack Sans Notch';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../assets/fonts/notch-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Stack Sans Notch';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../assets/fonts/notch-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Stack Sans Text';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../assets/fonts/text-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Stack Sans Text';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../assets/fonts/text-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Stack Sans Text';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/text-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Stack Sans Text';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/text-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   HYPERFORGE — landing page
   Content & type: Figma file jJNjtZ4wa84CiyU9rONp9d
   Layout width, spacing & motion language: ommo.studio
   ============================================================ */
:root{
  --bg:    #181818;
  --ink:   #dfded9;
  --muted: #7b7b78;

  --font-head: "Stack Sans Headline", sans-serif;
  --font-text: "Stack Sans Text", sans-serif;
  --font-label:"Stack Sans Notch", sans-serif;

  /* Fluid, edge-to-edge layout like ommo (no fixed max-width) */
  --gutter: clamp(20px, 2.22vw, 52px);          /* ~32px at 1440, scales like ommo */
  --indent: min(29%, 460px);                    /* editorial right-column offset */

  /* Fluid type — 1:1 with Figma at 1440, then scales linearly with the
     viewport (like ommo) right up to ~2450px before holding */
  --fs-hero:  clamp(30px, 3.89vw, 96px);
  --fs-story: clamp(23px, 2.5vw, 62px);
  --fs-name:  clamp(20px, 1.67vw, 41px);
  --fs-body:  clamp(16px, 1.39vw, 34px);
  --fs-label: clamp(12px, 1.11vw, 27px);
  --fs-foot:  clamp(11px, .9vw, 21px);

  /* Vertical rhythm — Figma Y-coordinates at 1440, scaling with the viewport */
  --sp-section:   clamp(120px, 27vw, 620px);    /* between major sections (~390 @1440) */
  --sp-cta:       clamp(84px, 12.2vw, 280px);   /* media → CTA / heading → CTA (~176) */
  --sp-eyebrow:   clamp(16px, 1.9vw, 44px);     /* eyebrow → heading (~26) */
  --sp-headbody:  clamp(24px, 2.8vw, 62px);     /* heading → body (~40) */
  --sp-headmedia: clamp(24px, 2.8vw, 62px);     /* heading → video (~40) */
  --sp-mediameta: clamp(18px, 1.8vw, 42px);     /* video → name/role (~26) */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-mask: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-text);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* fluid full-width container with side gutters only */
.wrap{ width:100%; padding-inline:var(--gutter); }
.content{ width:100%; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding-block:clamp(18px, 3vw, 40px);      /* fixed — does not move on scroll */
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
html:not(.ready) .site-header{ opacity:0; transform:translateY(-12px); }
/* Scrim that fades in once content scrolls under the header. Difference
   blending only reads against dark or light, so over a mid-grey photo the
   logo comes out the same tone as the image and disappears. Gradient rather
   than a bar so the editorial layout never grows a hard chrome edge. */
.site-header::before{
  content:""; position:absolute; left:0; right:0; top:0; z-index:-1;
  height:calc(100% + clamp(20px, 2.5vw, 44px));
  background:linear-gradient(180deg, rgba(24,24,24,.94), rgba(24,24,24,.72) 55%, rgba(24,24,24,0));
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
}
.site-header.scrolled::before{ opacity:1; }
/* logo inverts against whatever scrolls beneath it (ommo-style) */
.logo{
  display:inline-flex; align-items:center; gap:14px;   /* no hover effect */
  mix-blend-mode:difference;
}
/* on the scrim the backdrop is known, so blending is no longer needed */
.site-header.scrolled .logo{ mix-blend-mode:normal; }
.logo .mark{ height:44px; width:auto; }
.logo .wordmark{ height:27px; width:auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:clamp(140px, 24vw, 350px); }
.hero h1{
  font-family:var(--font-head); font-weight:700;
  font-size:var(--fs-hero); line-height:1.14; letter-spacing:-0.01em;
  max-width:88%; margin:0;
}
.hero .muted{ color:var(--muted); }

/* ============================================================
   EDITORIAL BLOCK  (thesis / AI question / let's talk)
   ============================================================ */
.block{ margin-top:var(--sp-section); }
.eyebrow{
  font-family:var(--font-label); font-weight:300;
  font-size:var(--fs-label); letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--sp-eyebrow);
}
.headline{
  font-family:var(--font-head); font-weight:700;
  font-size:var(--fs-hero); line-height:1.14; letter-spacing:-0.01em;
  color:var(--ink); margin:0; max-width:72%;
}
.block .headline{ max-width:72%; }
#ai-h{ max-width:62%; }
.body-col{ margin-left:var(--indent); margin-top:var(--sp-headbody); }
.body-col p{
  font-family:var(--font-text); font-weight:300;
  font-size:var(--fs-body); line-height:1.5; color:var(--muted);
  max-width:58ch; margin:0;
}
/* em-based so the gap tracks the fluid type instead of shrinking against it */
.body-col p + p{ margin-top:1.15em; }

/* ============================================================
   FOUNDER  (composition mirrors ommo: name/role under the photo,
             statement text beside it)
   ============================================================ */
.founder{ margin-top:var(--sp-section); }
/* photo left + name/role beside it (top-aligned); big story spans full width below —
   matches the Figma founder block and ommo's Daniel Sammut testimonial */
.founder-top{
  display:flex;
  align-items:flex-start;
  gap:clamp(22px, 2.2vw, 46px);
}
.portrait{
  position:relative;
  flex:0 0 auto;
  width:min(27%, 380px);
  aspect-ratio:350 / 400;
  overflow:hidden;
  background:#222;
  transition:clip-path 1.1s var(--ease-mask);
}
.has-js .portrait{ clip-path:inset(0 0 100% 0); }
.portrait.in{ clip-path:inset(0 0 0 0); }
.portrait img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12); filter:grayscale(1);
  transition:transform 1.3s var(--ease), filter .7s var(--ease);
}
.portrait.in img{ transform:scale(1); }
.portrait:hover img{ filter:grayscale(0); transform:scale(1.04); }

.founder-meta{ padding-top:0; margin-top:-0.14em; }   /* cap-align the name with the photo's top edge */
.founder-meta h3{
  font-family:var(--font-head); font-weight:700;
  font-size:var(--fs-name); line-height:1.1; margin:0 0 8px;
}
.person-role{
  font-family:var(--font-text); font-weight:300;
  font-size:var(--fs-label); color:var(--muted); margin:0;
}
.founder-story{
  font-family:var(--font-head); font-weight:700;
  font-size:var(--fs-story); line-height:1.28; letter-spacing:-0.01em;
  color:var(--ink); margin:clamp(30px, 3.2vw, 60px) 0 0; max-width:100%;
}
/* display type needs a proportionally smaller gap than body copy */
.founder-story + .founder-story{ margin-top:.55em; }

/* ============================================================
   VIDEO  (Jeffrey)
   ============================================================ */
.video-section{ margin-top:var(--sp-section); }
.video-section .headline{ max-width:74%; }
.video{
  position:relative; margin:var(--sp-headmedia) 0 0;
  aspect-ratio:1284 / 666; overflow:hidden; background:#111; cursor:pointer;
}
.video img.still{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:grayscale(1);
  transition:transform .9s var(--ease), filter .7s var(--ease);
}
.video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.28));
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
}
.video:hover img.still{ transform:scale(1.03); filter:grayscale(0); }
.video:hover::after{ opacity:1; }
.play{
  position:absolute; right:clamp(16px, 2.4vw, 40px); bottom:clamp(16px, 2.4vw, 40px);  /* balanced in the corner */
  width:clamp(46px, 4vw, 66px); height:clamp(46px, 4vw, 66px);
  border:0; padding:0; margin:0; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(24,24,24,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 30px rgba(0,0,0,.4); cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.play::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(223,222,217,.5); animation:pulse 2.6s ease-out infinite;
}
.play img{ width:38%; height:auto; margin-left:8%; }
.video:hover .play,.play:hover{ transform:scale(1.12); background:rgba(24,24,24,.8); }
@keyframes pulse{ 0%{transform:scale(1);opacity:.7;} 70%{transform:scale(1.6);opacity:0;} 100%{opacity:0;} }

.video-meta{ margin-left:var(--indent); margin-top:var(--sp-mediameta); }
.video-meta h3{
  font-family:var(--font-head); font-weight:700;
  font-size:var(--fs-name); line-height:1.1; margin:0 0 8px;
}

/* ============================================================
   CTA LINES  (→ Learn more / → Book a time)
   ============================================================ */
.cta-line{ margin:var(--sp-cta) 0 0; text-align:right; }
.cta{
  display:inline-flex; align-items:baseline; gap:.5ch;
  font-family:var(--font-head); font-weight:700;
  font-size:var(--fs-hero); line-height:1.1; letter-spacing:-0.01em; color:var(--ink);
}
.cta .arrow{ display:inline-block; transition:transform .45s var(--ease); }
.cta .txt{ position:relative; }
.cta .txt::after{
  content:""; position:absolute; left:0; right:0; bottom:0.04em; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-mask);
}
.cta:hover .arrow{ transform:translateX(.3em); }
.cta:hover .txt::after{ transform:scaleX(1); }

/* ============================================================
   TALK
   ============================================================ */
.talk{ margin-top:var(--sp-section); }
.talk .headline{ max-width:84%; }

/* ============================================================
   FOOTER  (giant wordmark reveals character-by-character, like ommo)
   ============================================================ */
.site-footer{ margin-top:var(--sp-section); padding-bottom:clamp(30px, 3.4vw, 50px); }
.foot-logo{
  font-family:var(--font-head); font-weight:700; color:var(--ink);
  line-height:.92; letter-spacing:-0.02em; white-space:nowrap;
  font-size:19vw;              /* JS fits it exactly to the container width */
}
.foot-row{
  display:flex; justify-content:space-between; gap:16px;
  margin-top:clamp(26px, 3.6vw, 56px);
  font-family:var(--font-text); font-weight:400; font-size:var(--fs-foot);
  letter-spacing:0.02em; color:var(--muted);
}

/* ============================================================
   VIDEO MODAL
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  padding:clamp(16px, 4vw, 48px);
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.modal.open{ opacity:1; visibility:visible; }
.modal-inner{
  width:min(1100px, 100%); aspect-ratio:16 / 9; background:#000;
  transform:scale(.96); transition:transform .45s var(--ease); overflow:hidden;
}
.modal.open .modal-inner{ transform:scale(1); }
.modal-frame{ width:100%; height:100%; }
.modal-frame iframe{ width:100%; height:100%; border:0; display:block; }
.modal-close{
  position:absolute; top:clamp(16px,3vw,28px); right:clamp(16px,3vw,28px);
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(223,222,217,.25); background:transparent;
  color:var(--ink); font-size:22px; line-height:1; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.modal-close:hover{ background:rgba(223,222,217,.12); transform:rotate(90deg); }

/* ============================================================
   REVEAL / SPLIT ANIMATION
   ============================================================ */
/* simple fade-rise for supporting elements */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--delay, 0ms); will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }

/* line-by-line (word masks, staggered per line) for big type */
.has-js .split, .has-js .split-chars{ visibility:hidden; }
.split .w{
  display:inline-block; vertical-align:top; overflow:hidden;
  padding-bottom:0.18em; margin-bottom:-0.18em;
}
.split-chars .c{
  display:inline-block; vertical-align:top; overflow:hidden;
  padding-bottom:0.30em; margin-bottom:-0.30em;   /* room for y/g descenders */
}
.split .wi, .split-chars .ci{
  display:inline-block; transform:translateY(114%);
  transition:transform 1s var(--ease-mask);
  transition-delay:var(--d, 0ms); will-change:transform;
}
.split.in .wi, .split-chars.in .ci{ transform:translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  :root{ --indent:0px; }
  .hero h1, .headline, .block .headline, #ai-h,
  .video-section .headline, .talk .headline{ max-width:100%; }
  .logo{ gap:10px; }
  .logo .mark{ height:33px; }          /* 25% smaller logo */
  .logo .wordmark{ height:20px; }
  .founder-top{ flex-direction:column; gap:20px; }
  .portrait{ width:100%; }             /* full-width photo */
  .founder-story{ max-width:none; }
  .cta-line{ text-align:left; margin-top:calc(var(--sp-cta) / 2); }  /* half the gap */
  .foot-row{ gap:12px; font-size:10px; }   /* copyright + rights on one line */
  .play{ right:16px; bottom:16px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .has-js .split, .has-js .split-chars{ visibility:visible; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .split .wi, .split-chars .ci{ transform:none; transition:none; }
  .portrait{ clip-path:none; }
  .portrait img, .video img.still{ transform:none; }  /* grayscale kept; colorises on hover */
  .play::before{ display:none; }
}