/* ============================================================
   FUTUVARA — shared stylesheet
   ============================================================ */
:root{
  --black:#000000;
  --ink:#0a0a0a;
  --white:#ffffff;
  --paper:#ffffff;
  --red:#ff1717;
  --red-deep:#c60000;
  --grey:#6b6b6b;
  --grey-2:#9a9a9a;
  --line:#e6e6e6;
  --line-dark:#1e1e1e;
  /* Bauhaus palette */
  --cream:#f7f0e7;
  --bau-red:#ff1717;
  --bau-blue:#1f3fd1;
  --bau-yellow:#f5b400;
  --font:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
  --maxw:1200px;
  --gutter:clamp(20px,5vw,80px);
  --nav-h:68px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ font-family:var(--font); background:var(--black); color:var(--white); line-height:1.5; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- animation baseline ---------- */
.anim{ opacity:0; will-change:transform,opacity; }
html.reveal-all .anim{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .anim{ opacity:1 !important; transform:none !important; }
}

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-scrolling iframe{ pointer-events:none; }

/* ---------- layout ---------- */
section{ position:relative; padding:clamp(120px,17vh,220px) var(--gutter); overflow:hidden; }
.wrap{ max-width:var(--maxw); margin:0 auto; width:100%; }
.dark{ background:var(--black); color:var(--white); }
.paper{ background:var(--paper); color:var(--ink); }
.page{ padding-top:var(--nav-h); }           /* interior pages clear the fixed nav */

.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,36px); }
/* Balanced text columns: the browser fills them to equal height at any screen size,
   so the copy stays level instead of one column running long. */
.text-cols{ columns:3; column-gap:clamp(24px,3vw,44px); column-fill:balance; }
.text-cols > p{ break-inside:avoid; margin:0 0 18px; }
.text-cols > p:last-child{ margin-bottom:0; }
@media (max-width:900px){ .text-cols{ columns:2; } }
@media (max-width:620px){ .text-cols{ columns:1; } }
@media (max-width:900px){ .cols4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .cols2,.cols3{ grid-template-columns:1fr; } }

/* ---------- type ---------- */
/* Headings run regular; only the final word is bold (wrapped in <strong> by site.js) */
h1,h2,h3{ font-weight:400; letter-spacing:-0.02em; line-height:1.02; }
.display{ font-size:clamp(3rem,9vw,7rem); }
.h-xl{ font-size:clamp(2.6rem,7vw,5.2rem); }
.h-lg{ font-size:clamp(2.2rem,5.4vw,4.2rem); }
.h-md{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
.h-sm{ font-size:clamp(1.3rem,2.4vw,1.8rem); }
.lead{ font-weight:400; font-style:italic; font-size:clamp(1.15rem,2.1vw,1.7rem); line-height:1.28; letter-spacing:-0.01em; }
.body{ font-size:clamp(1rem,1.15vw,1.12rem); }
.paper .muted{ color:#333; }
.dark .muted{ color:#c9c9c9; }
.italic{ font-style:italic; }
.sup{ color:var(--red); font-weight:800; vertical-align:super; font-size:.55em; }
strong{ font-weight:800; }
.eyebrow{ display:inline-block; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--red); margin-bottom:22px; }
/* no divider lines between sections: the rule keeps its spacing but draws nothing */
.rule{ height:0; background:transparent; margin:clamp(40px,6vw,72px) 0; }
/* Bauhaus typography: body copy is flush-left / ragged-right, never centred or indented.
   The hero is the one deliberate exception. */
p, li, blockquote{ text-indent:0; }
.mx-auto{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:400; letter-spacing:.01em; font-size:.86rem;
  padding:12px 24px; border-radius:999px; border:0;
  /* no outlines: every button is a subtle fill that contrasts with the surface it sits on,
     grey on white, and a light wash on black */
  background:rgba(0,0,0,.07); color:inherit;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); background:rgba(0,0,0,.14); }
.btn-red, .btn-ghost{ background:rgba(0,0,0,.07); color:inherit; border:0; }
.btn-red:hover, .btn-ghost:hover{ background:rgba(0,0,0,.14); color:inherit; }
/* dark surfaces: flip the wash so the button still reads against black */
.dark .btn, .hero-dark .btn, .footer-cta .btn, .auth-card .btn, .card-dark .btn, .cta-band .btn,
.dark .btn-red, .hero-dark .btn-red, .footer-cta .btn-red, .auth-card .btn-red,
.dark .btn-ghost, .hero-dark .btn-ghost{ background:rgba(255,255,255,.14); color:#fff; }
.dark .btn:hover, .hero-dark .btn:hover, .footer-cta .btn:hover, .auth-card .btn:hover,
.card-dark .btn:hover, .cta-band .btn:hover,
.dark .btn-red:hover, .hero-dark .btn-red:hover, .footer-cta .btn-red:hover, .auth-card .btn-red:hover,
.dark .btn-ghost:hover, .hero-dark .btn-ghost:hover{ background:rgba(255,255,255,.24); color:#fff; }
.btn-sm{ padding:10px 20px; font-size:.9rem; }

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  background:#000;
  color:#fff;
}
.nav-logo{ display:flex; align-items:center; gap:11px; z-index:2; }
.nav-logo svg{ width:30px; height:30px; }
.nav-logo span{ font-weight:800; font-size:1.28rem; letter-spacing:-0.01em; }

/* inverted (light) nav when the section behind it is white */
.site-nav.nav-light{ background:#fff; color:#0a0a0a; }
.site-nav.nav-light .nav-logo span{ color:#0a0a0a; }
.site-nav.nav-light .nav-link{ color:#333; }
.site-nav.nav-light .nav-link:hover{ color:#000; background:rgba(0,0,0,.06); }
.site-nav.nav-light .nav-link.active{ color:#000; }
.site-nav.nav-light .nav-login{ color:#0a0a0a !important; background:rgba(0,0,0,.08); border:0; }
.site-nav.nav-light .nav-login:hover{ background:rgba(0,0,0,.16); }
.site-nav.nav-light .nav-toggle span{ background:#0a0a0a; }

.nav-menu{ display:flex; align-items:center; gap:6px; }
.nav-link{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:0;   /* the top bar stays square: no rounded corners anywhere in it */
  font-weight:400; font-size:.86rem; color:#eaeaea; background:transparent; border:0;
  transition:color .15s ease, background .15s ease;
}
.nav-link:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav-link.active{ color:#fff; }
.nav-link.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px; height:2px;
  background:var(--red); border-radius:2px;
}
.nav-drop-btn svg{ width:11px; height:11px; transition:transform .2s ease; }
.nav-item.open .nav-drop-btn svg{ transform:rotate(180deg); }

.nav-item{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:220px; padding:8px;
  background:#0d0d0d; border:1px solid var(--line-dark); border-radius:16px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease;
}
/* invisible bridge so moving the cursor from the button into the menu doesn't close it */
.dropdown::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:18px; }
.dropdown a{
  display:flex; flex-direction:column; gap:2px;
  padding:11px 14px; border-radius:10px; color:#eaeaea;
  font-weight:400; font-size:.86rem;   /* matches .nav-link, the top level */
  transition:background .14s ease, color .14s ease;
}
.dropdown a small{ font-weight:400; font-size:.72rem; color:#8a8a8a; }
.dropdown a:hover{ background:rgba(255,23,23,.12); color:#fff; }
.dropdown a:hover small{ color:#d99; }
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown,
.nav-item.open .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* No borders anywhere in the top bar: the Login button carries a fill instead of an outline,
   rounded to match the buttons in the page body. */
.nav-login{ margin-left:8px; background:rgba(255,255,255,.14); color:#fff !important; font-weight:400; padding:8px 20px; border:0; border-radius:999px; }
.nav-login:hover{ background:rgba(255,255,255,.24); }
.nav-login:hover{ background:rgba(255,255,255,.12); }
.nav-login.active::after{ display:none; }

.nav-toggle{ display:none; width:44px; height:44px; background:transparent; border:0; position:relative; z-index:2; }
.nav-toggle span{ position:absolute; left:11px; right:11px; height:2px; background:#fff; border-radius:2px; transition:transform .22s ease, opacity .2s ease; }
.nav-toggle span:nth-child(1){ top:15px; } .nav-toggle span:nth-child(2){ top:21px; } .nav-toggle span:nth-child(3){ top:27px; }
.site-nav.open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.site-nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.site-nav.open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  /* backdrop-filter would make .site-nav the containing block for the fixed overlay — drop it on mobile */
  .site-nav{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .nav-menu{
    position:fixed; inset:var(--nav-h) 0 0 0; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:4px; padding:22px var(--gutter) 40px;
    background:inherit;   /* follows the bar, which JS keeps matched to the section behind it */
    transform:translateX(100%); transition:transform .3s cubic-bezier(.16,1,.3,1);
    overflow-y:auto;
  }
  /* On a light page the whole overlay is white, so the submenu links must invert too,
     otherwise they stay near-white on white. */
  .site-nav.nav-light .dropdown a{ color:#333; }
  .site-nav.nav-light .dropdown a small{ color:#777; }
  .site-nav.nav-light .dropdown a:hover{ background:rgba(0,0,0,.06); color:#000; }
  .site-nav.open .nav-menu{ transform:translateX(0); }
  .nav-link:not(.nav-login){ font-size:1.3rem; padding:16px 8px; border-radius:0; justify-content:space-between; }
  .nav-link.active::after{ display:none; }
  .nav-item{ display:flex; flex-direction:column; }
  .dropdown,
  .nav-item.open .dropdown{
    position:static; left:auto; right:auto; transform:none; opacity:1; visibility:visible; min-width:0;
    background:transparent; border:0; box-shadow:none; padding:0 0 8px 14px;
    overflow:hidden; transition:max-height .28s ease;
  }
  .dropdown{ max-height:0; }
  .nav-item.open .dropdown{ max-height:400px; }
  .dropdown a{ font-size:1.3rem; }   /* matches the mobile .nav-link size */
  .nav-login{ margin:14px 0 0; justify-content:center; }
}

/* ============================================================
   FAT FOOTER
   ============================================================ */
.site-footer{ background:#050505; color:#9a9a9a; border-top:0; }
.footer-inner{ padding:clamp(56px,7vw,88px) var(--gutter) 28px; }
.footer-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  padding-bottom:clamp(40px,5vw,60px); margin-bottom:clamp(40px,5vw,60px);
  border-bottom:0;
}
.footer-cta h3{ color:#fff; font-size:clamp(1.6rem,3.4vw,2.6rem); max-width:16ch; }
.footer-cta .btn-red{ flex:none; }

.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; row-gap:40px; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

.f-brand .f-logo{ display:flex; align-items:center; gap:11px; color:#fff; margin-bottom:16px; }
.f-brand .f-logo svg{ width:32px; height:32px; }
.f-brand .f-logo span{ font-weight:800; font-size:1.35rem; }
.f-tag{ color:#fff; font-weight:700; font-size:1.05rem; margin-bottom:10px; }
.f-blurb{ font-size:.8rem; line-height:1.6; max-width:38ch; }
.f-social{ display:flex; gap:12px; margin-top:20px; }
.f-social a{ width:38px; height:38px; border:1px solid var(--line-dark); border-radius:50%; display:grid; place-items:center; transition:border-color .15s ease, background .15s ease; }
.f-social a:hover{ border-color:var(--red); background:rgba(255,23,23,.12); }
.f-social svg{ width:16px; height:16px; fill:#cfcfcf; }

.f-col h4{ color:#fff; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; }
.f-col a{ display:block; padding:7px 0; font-size:.95rem; color:#9a9a9a; transition:color .14s ease, padding .14s ease; }
.f-col a:hover{ color:#fff; padding-left:5px; }
.f-contact p{ font-size:.95rem; margin:7px 0 16px; }
.f-news{ margin-top:8px; }
.f-news form{ display:flex; gap:8px; margin-top:10px; }
.f-news input{ flex:1; min-width:0; background:#101010; border:1px solid var(--line-dark); color:#fff; border-radius:999px; padding:11px 16px; font-size:.9rem; }
.f-news input:focus{ outline:none; border-color:var(--red); }
.f-news button{ background:var(--red); color:#fff; border:0; border-radius:999px; padding:0 18px; font-weight:800; }

.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  max-width:var(--maxw); margin:0 auto; padding:22px var(--gutter);
  border-top:0; font-size:.82rem; letter-spacing:.02em;
}
.footer-bottom a{ color:#9a9a9a; } .footer-bottom a:hover{ color:#fff; }
.footer-bottom .red{ color:var(--red); font-weight:700; }

/* ============================================================
   HOME — hero + shapes
   ============================================================ */
/* The pill is rotated 90deg, so its rendered HEIGHT is this CSS width. Capping it against
   the viewport height keeps the whole layer fan inside the hero (clear of the fixed nav)
   on large screens, instead of the top and bottom layers running off. */
.hero{ --shape-w:min(clamp(540px,68vw,1000px), calc(100svh - 160px)); min-height:100svh; position:relative; display:block; }
/* Heading is locked to the centre of the black (bottom) layer of the rotated pill.
   That layer's centre sits 1482.145 viewBox units right of the shape's centre; the 90deg
   rotation maps that to a straight drop of 1482.145/5056 = 0.2931 x the shape's width. */
.hero .wrap{ position:absolute; left:50%; top:calc(50% + 0.2931 * var(--shape-w)); transform:translate(-50%,-50%); z-index:2; width:min(92vw,980px); }
/* headline fills the hero area */
.hero .word{ font-size:clamp(2.1rem, 6.6vw, 5.2rem); letter-spacing:-0.03em; line-height:1.0; max-width:20ch; color:#fff; text-align:center; margin:0 auto; }
.hero-sub{ color:#e7dcd6; text-align:center; max-width:42ch; margin:clamp(16px,2vw,24px) auto 0; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.45; }

/* Hero headings: white where the hero is dark, regular weight, only the last word bold */
.hero-head{ font-weight:400; }
.hero-head strong, .hero-head b{ font-weight:800; }
.hero .tagline{ position:absolute; left:var(--gutter); bottom:clamp(28px,6vh,64px); font-size:clamp(1.05rem,2.4vw,1.6rem); font-weight:500; z-index:3; }
.hero .tagline strong{ font-weight:800; }
/* hero layered shape: rotated 90° into a horizontal band at the bottom of the hero.
   The rotation turns the layers' local x-slide into a bottom-up slide in screen space. */
.hero .hero-shape{ position:absolute; left:50%; top:50%; right:auto; bottom:auto; margin:0;
  width:var(--shape-w); max-width:none; aspect-ratio:5056/7716; z-index:1; pointer-events:none;
  transform:translate(-50%,-50%) rotate(90deg); transform-origin:center center; }
@media (max-width:760px){ .hero{ --shape-w:clamp(360px,96vw,560px); } }

.shape-figure{ display:flex; align-items:center; justify-content:center; }

/* shape centred in its column (fully on the page, not bleeding off), no pulse */
.shape-figure.oncenter > [data-stack]{ margin-inline:auto; }
.shape-figure.oncenter .bl svg{ animation:none !important; opacity:1 !important; transform:none !important; }

/* pill shape enlarged and bled 30% off the right edge of the page */
.shape-figure.bleed{ position:static; }
/* width-driven so the shape reaches ~50% of the page width; section min-height keeps its full height (top & bottom curves) visible */
.shape-figure.bleed > [data-stack]{ position:absolute; top:50%; right:calc(-1 * var(--gutter));
  transform:translate(9%,-50%); width:clamp(322px,41vw,574px); height:auto; max-width:none; margin:0; z-index:0; }
.cols2:has(> .shape-figure.bleed) > div:first-child{ position:relative; z-index:1; }
section:has(.shape-figure.bleed){ min-height:clamp(620px,86vh,940px); }
@media (max-width:760px){
  /* shapes drop in-flow, under the text, never overlapping it */
  .shape-figure.bleed{ position:static !important; }
  .shape-figure.bleed > [data-stack]{ position:static !important; transform:none !important;
    margin:clamp(28px,6vw,48px) auto 0 !important; width:clamp(280px,80vw,440px) !important; }
  section:has(.shape-figure.bleed){ min-height:auto; }
  /* headings and copy fill the full width of the column */
  .lead, .body, .h-xl, .h-lg, .h-md, .h-sm, .display, .hero .word, .hero-sub, .page-hero h1{ max-width:100% !important; }
}
/* Services page: shapes at ~35% of the (home) size */

/* Bauhaus layered pill shape (10 supplied layers, cream → black) */
.stack, .bau-stack{ position:relative; width:100%; max-width:340px; aspect-ratio:5056/7716; margin-inline:auto; }
.red-stack{ position:relative; width:100%; max-width:300px; aspect-ratio:2401/3635; margin-inline:auto; }
/* red "8" shape floated to the top-right, beside the heading */
/* kept small enough to sit in the top-right heading zone, clear of the body text below */
.reset-shape{ position:absolute; top:0; right:0; margin:0; z-index:0; width:clamp(130px,15vw,185px); }
@media (max-width:820px){ .reset-shape{ position:static; width:clamp(200px,46vw,270px); margin:clamp(30px,6vw,56px) auto 0; } }
.bl{ position:absolute; inset:0; will-change:transform,opacity; }
.bl svg{ width:100%; height:100%; display:block; overflow:visible; }

/* Bauhaus geometric primitives */
.bau{ position:absolute; z-index:0; pointer-events:none; }
.bau-circle{ border-radius:50%; }
.bau-ring{ border-radius:50%; background:transparent; }
.bau-tri{ clip-path:polygon(50% 0,100% 100%,0 100%); }
.bau-quarter-tl{ border-radius:100% 0 0 0; }
.bau-quarter-tr{ border-radius:0 100% 0 0; }
.bau-quarter-bl{ border-radius:0 0 0 100%; }
.bau-quarter-br{ border-radius:0 0 100% 0; }
.bau-half-t{ border-radius:999px 999px 0 0; }
.c-red{ background:var(--bau-red); } .c-blue{ background:var(--bau-blue); }
.c-yellow{ background:var(--bau-yellow); } .c-black{ background:#000; }
.c-cream{ background:var(--cream); } .c-white{ background:#fff; }

/* Bauhaus structural colour bar */
.bau-bar{ display:flex; width:100%; height:clamp(10px,1.4vw,18px); }
.bau-bar span{ flex:1; }

/* subtle Bauhaus grid overlay (structure) */
.bau-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:calc(100%/6) 100%; }
.venn{ width:100%; max-width:960px; margin:40px auto 0; overflow:visible; }
.pie-wrap{ width:100%; max-width:420px; margin-inline:auto; }

.foot{ position:absolute; right:var(--gutter); bottom:22px; text-align:right; font-size:.72rem; line-height:1.4; opacity:.7; }
.paper .foot{ color:#111; } .dark .foot{ color:#eee; }

.value-card h3{ font-size:1.15rem; margin-bottom:10px; }
.value-card .body{ font-size:.98rem; }
.card-dark{ background:linear-gradient(180deg,#161616,#000); color:#fff; border-radius:28px; padding:clamp(28px,4vw,52px); box-shadow:0 40px 80px -30px rgba(0,0,0,.6); }

.principle{ padding-top:18px; border-top:0; }
.principle h3{ font-size:1.1rem; margin-bottom:8px; }
.principle .body{ font-size:.96rem; color:#333; }
.dark .principle{ border-top-color:#2a2a2a; } .dark .principle .body{ color:#bdbdbd; }

.partners{ display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:center; margin-top:10px; }
.partners span{ font-weight:800; font-size:clamp(1rem,1.8vw,1.4rem); color:#111; opacity:.55; }
.dark .partners span{ color:#fff; opacity:.6; }
/* Official partner marks, flattened to one grey. Heights are tuned per brand rather than
   shared: the lockups run from 1.67:1 (AWS, stacked) to 7.7:1 (Oracle), so a single height
   would leave AWS tiny and Oracle enormous. */
.logo-brand{ width:auto; display:block; opacity:.85; }
.logo-ms{ height:20px; }
.logo-aws{ height:32px; }
.logo-oracle{ height:15px; }
.logo-google{ height:20px; }
.dark .logo-brand [fill]{ fill:#c9c9c9; } .dark .logo-brand [stroke]{ stroke:#c9c9c9; }

.pattern{ min-height:100svh; display:flex; align-items:center; }
/* full-bleed grid: spans the whole page width (columns set in JS) */
/* Clover pattern: cells keep a fixed size and wrap to as many columns as fit,
   so narrower screens get fewer shapes per row rather than smaller shapes. */
.grid{ --cell:68px; display:grid; grid-template-columns:repeat(auto-fill,var(--cell)); justify-content:center;
  gap:clamp(2px,0.5vw,7px); width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0 clamp(6px,1.4vw,20px); }
@media (max-width:760px){ .grid{ --cell:52px; } }
.grid .cell{ aspect-ratio:1/1; display:grid; place-items:center; position:relative; } .grid .cell svg{ width:62%; height:62%; animation:shapePulse 4.5s ease-in-out infinite; }
/* hover echo: shaded copies ripple outward from the clover, then vanish.
   It starts transparent so it never masks the clover underneath: at full opacity on top of
   the shape it hid the fill transition and read as an instant flip to red. */
.grid .cell .echo{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:2;
  animation:cloverEcho 1s cubic-bezier(.22,.61,.36,1) forwards; }
.grid .cell .echo svg{ width:62%; height:62%; animation:none; }
@keyframes cloverEcho{ 0%{ transform:scale(1); opacity:0; } 30%{ opacity:.4; } 100%{ transform:scale(3); opacity:0; } }
/* scoped to the cell's own clover (> svg) so the echo copies keep the colour they were built
   with, instead of the cell's red/grey state repainting them */
.grid .cell > svg path{ fill:#2a2a2a; transition:fill .7s ease-in-out; }
.grid .cell.red > svg path{ fill:#ff2a2a; }
/* every shape gently pulses in size and intensity (staggered timing set per element in JS) */
@keyframes shapePulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(0.9); opacity:0.72; } }
.bl svg{ animation:shapePulse 5s ease-in-out infinite; }
/* the hero background shape and the large bleed pill shapes stay solid (no pulse) */
.hero-shape .bl svg, .shape-figure.bleed .bl svg{ animation:none !important; opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){ .grid .cell svg, .bl svg{ animation:none; } .grid .cell .echo{ display:none; } }
/* Legal pages: single measured column of flush-left prose */
.legal{ max-width:74ch; }
.legal h2{ font-size:clamp(1.15rem,1.9vw,1.5rem); margin:clamp(38px,5vw,56px) 0 12px; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:1rem; margin:26px 0 8px; }
.legal p{ color:var(--muted); font-size:1rem; line-height:1.75; margin:0 0 14px; }
.legal ul{ margin:0 0 16px; padding-left:20px; }
.legal li{ color:var(--muted); font-size:1rem; line-height:1.75; margin-bottom:8px; }
.legal a{ color:var(--red); }
.legal .placeholder{ color:var(--red); font-weight:600; }
.legal-meta{ font-size:.86rem; color:#8a8a8a; margin-top:18px; }
.legal-note{ border-left:3px solid var(--red); padding:14px 0 14px 16px; margin:0 0 clamp(30px,4vw,44px); }
.legal-note p{ margin:0; font-size:.92rem; color:#555; }

.closer-caption{ text-align:left; margin-top:clamp(36px,6vw,64px); }
.closer-caption .big{ font-size:clamp(1.4rem,3.4vw,2.4rem); font-weight:400; letter-spacing:-0.02em; }
.closer-caption .small{ color:#9a9a9a; margin-top:10px; font-size:.95rem; }

/* ============================================================
   PAGE HEROES (interior)
   ============================================================ */
.page-hero{ padding-top:calc(var(--nav-h) + clamp(60px,9vw,120px)); }
.page-hero .kicker{ color:var(--red); }
.page-hero p.lead{ max-width:44ch; }
.hero-dark{ background:#000; color:#fff; }   /* dark hero areas are solid black, never gradients */

/* feature cards */
.feature{ border:1px solid var(--line); border-radius:22px; padding:clamp(24px,3vw,36px); background:#fff; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(0,0,0,.25); border-color:#ddd; }
.feature .num{ font-weight:800; color:var(--red); font-size:.9rem; letter-spacing:.1em; }
.feature h3{ font-size:1.25rem; margin:14px 0 10px; }
.feature .body{ font-size:.98rem; color:#444; }

.dark .feature{ background:#0d0d0d; border-color:var(--line-dark); }
.dark .feature:hover{ border-color:#333; }
.dark .feature .body{ color:#bdbdbd; }
/* inverted (white) feature card */
.feature.invert, .dark .feature.invert{ background:#fff; border-color:#fff; }
.feature.invert h3, .dark .feature.invert h3{ color:#0a0a0a; }
.feature.invert .body, .dark .feature.invert .body{ color:#444; }
.feature.invert .num, .dark .feature.invert .num{ color:var(--red); }

/* step list */
.steps{ counter-reset:s; display:grid; gap:2px; }
.step{ counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:24px; padding:28px 0; border-top:0; align-items:start; }
.step::before{ content:counter(s,decimal-leading-zero); font-weight:800; font-size:1.4rem; color:var(--red); }
.step h3{ font-size:1.3rem; margin-bottom:8px; }
.step .body{ color:#444; max-width:60ch; }

/* ============================================================
   BLOG / KNOWLEDGE
   ============================================================ */
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,36px); }
@media (max-width:900px){ .article-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .article-grid{ grid-template-columns:1fr; } }

.post-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; transition:transform .2s ease, box-shadow .2s ease; }
.post-card:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -34px rgba(0,0,0,.3); }
.post-thumb{ aspect-ratio:16/10; display:grid; place-items:center; position:relative; overflow:hidden; }
.post-thumb svg{ width:60%; height:60%; }
.post-body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-meta{ display:flex; gap:10px; align-items:center; font-size:.78rem; color:#888; letter-spacing:.02em; }
/* always hugs its text: align-self/width stop a flex parent stretching it to full width */
.tag{ display:inline-block; align-self:flex-start; width:fit-content; max-width:100%;
  font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#6f6f6f; background:rgba(0,0,0,.06); padding:4px 9px; border-radius:999px; }
.dark .tag, .card-dark .tag{ color:#b2b2b2; background:rgba(255,255,255,.1); }
.post-card h3{ font-size:1.2rem; line-height:1.15; }
.post-card p{ color:#555; font-size:.95rem; flex:1; }
.post-card .readmore{ font-weight:800; color:#111; font-size:.9rem; }
.post-card:hover .readmore{ color:var(--red); }

.featured{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center; border:1px solid var(--line); border-radius:26px; overflow:hidden; background:#fff; }
.featured .featured-media{ min-height:340px; display:grid; place-items:center; align-self:stretch; }
.featured .featured-copy{ padding:clamp(28px,4vw,52px); }
@media (max-width:820px){ .featured{ grid-template-columns:1fr; } .featured .featured-media{ min-height:240px; } }

/* article page */
.prose{ max-width:720px; margin:0 auto; }
.prose > *{ margin-bottom:1.15em; }
.prose p{ font-size:1.12rem; line-height:1.72; color:#222; }
.prose h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin-top:1.6em; }
.prose h3{ font-size:1.3rem; margin-top:1.4em; }
.prose blockquote{ border-left:4px solid var(--red); padding:6px 0 6px 24px; margin:1.6em 0; font-style:italic; font-weight:700; font-size:1.3rem; line-height:1.35; color:#111; }
.prose ul{ padding-left:1.2em; } .prose li{ font-size:1.08rem; line-height:1.7; margin-bottom:.5em; color:#222; }
.article-head{ max-width:820px; margin:0 auto; }
.article-head h1{ font-size:clamp(2.2rem,5vw,3.6rem); margin:16px 0 20px; }
.article-meta{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; color:#666; font-size:.95rem; }
.avatar{ width:40px; height:40px; border-radius:50%; background:#111; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.9rem; }
.article-hero-media{ max-width:960px; margin:clamp(28px,4vw,48px) auto; border-radius:24px; overflow:hidden; aspect-ratio:16/7; display:grid; place-items:center; }

/* ============================================================
   CONTACT / LOGIN forms
   ============================================================ */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.85rem; font-weight:700; letter-spacing:.02em; }
.field input, .field textarea, .field select{
  font-family:inherit; font-size:1rem; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:#fff; color:#111; transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(255,23,23,.12); }
.form-note{ font-size:.85rem; color:#888; margin-top:6px; }
.form-success{ display:none; padding:16px 18px; border-radius:12px; background:rgba(255,23,23,.08); border:1px solid rgba(255,23,23,.3); color:#111; font-weight:600; }
.form-success.show{ display:block; }

.auth-wrap{ min-height:100svh; display:grid; place-items:center; padding:calc(var(--nav-h) + 40px) var(--gutter) 60px; background:#000; }
.auth-card{ width:100%; max-width:440px; background:#0d0d0d; border:1px solid var(--line-dark); border-radius:24px; padding:clamp(28px,4vw,44px); box-shadow:0 50px 90px -40px rgba(0,0,0,.9); }
.auth-brand{ display:flex; align-items:center; gap:11px; margin-bottom:22px; }
.auth-mark{ display:inline-flex; width:34px; height:34px; flex:0 0 auto; }
.auth-mark svg{ width:100%; height:100%; display:block; }
.auth-name{ font-weight:800; font-size:1.2rem; color:#fff; }
.auth-card h1{ font-size:1.9rem; margin-bottom:8px; }
.auth-card .sub{ color:#9a9a9a; margin-bottom:26px; font-size:.98rem; }
.auth-card .field label{ color:#ddd; }
.auth-card .field input{ background:#141414; border-color:var(--line-dark); color:#fff; }
.auth-card .field input:focus{ border-color:var(--red); }
.auth-card .btn{ width:100%; justify-content:center; margin-top:6px; }
.auth-row{ display:flex; justify-content:space-between; align-items:center; margin:14px 0 4px; font-size:.88rem; }
.auth-row a{ color:var(--red); font-weight:700; }
.auth-foot{ text-align:left; margin-top:22px; color:#9a9a9a; font-size:.92rem; }
.auth-foot a{ color:#fff; font-weight:700; }

/* pre-footer CTA band inside pages */
.cta-band{ background:#000; color:#fff; border-radius:28px; padding:clamp(36px,5vw,64px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.cta-band h2{ font-size:clamp(1.8rem,4vw,3rem); max-width:18ch; }
.cta-band .btn{ background:rgba(255,255,255,.14); color:#fff; }
.cta-band .btn:hover{ background:rgba(255,255,255,.24); color:#fff; }