/* @deviation reason="fiipos.com is a no-JS static site on Cloudflare Pages (strict CSP, no build step), so it vendors tokens.css and keeps its own two stylesheets; all five orphans predate this PR (site/legal-pages 856ab221, live on fiipos.com) and this PR adds none" expires="2026-11-12" */
/* Home page. Tokens only (tokens.css); wallpaper is an 8 s seamless loop, poster only under reduced motion.
   The wallpaper, scrim and grain are fixed so the page scrolls over one still frame of film instead of
   stretching the loop to the page height. */
*{box-sizing:border-box}
html{background:var(--fiipdrive-bg);color:var(--fiipdrive-ink);-webkit-font-smoothing:antialiased}
body{margin:0;font:var(--fiipdrive-text-body-weight) var(--fiipdrive-text-title-size)/var(--fiipdrive-text-body-lh) var(--fiipdrive-font-body)}
::selection{background:color-mix(in srgb,var(--fiipdrive-ink) 24%,transparent);color:var(--fiipdrive-ink-max)}
.stage{--wide:calc(var(--fiipdrive-bp-xl) - 2 * var(--fiipdrive-space-region));position:relative;isolation:isolate;min-height:100dvh;display:grid;grid-template:auto 1fr auto/minmax(0,1fr);padding:var(--fiipdrive-space-xl) var(--fiipdrive-space-region)}
.stage>:not(.bg){width:100%;max-width:var(--wide);justify-self:center}
.bg{position:fixed;inset:0;z-index:-3;background:var(--fiipdrive-bg) url(/assets/poster.webp) center/cover no-repeat}
.bg video{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.bg video{display:none}}
.stage::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(80% 75% at 28% 52%,color-mix(in srgb,var(--fiipdrive-bg) 72%,transparent),transparent),radial-gradient(140% 110% at 50% 45%,transparent 40%,color-mix(in srgb,var(--fiipdrive-bg) 85%,transparent)),linear-gradient(180deg,color-mix(in srgb,var(--fiipdrive-bg) 40%,transparent),transparent 22%,transparent 60%,color-mix(in srgb,var(--fiipdrive-bg) 78%,transparent))}
.stage::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(/assets/grain.webp) 0 0/256px;mix-blend-mode:overlay;opacity:.36}
.wm svg{height:1cap;width:auto}
.hd{display:flex;align-items:center;justify-content:space-between;height:var(--fiipdrive-size-lg)}
.wm{font-size:var(--fiipdrive-text-small-size);font-weight:var(--fiipdrive-text-display-weight);letter-spacing:calc(var(--fiipdrive-text-label-track) * 2);display:flex;align-items:center;gap:var(--fiipdrive-space-sm);color:var(--fiipdrive-ink);text-decoration:none;text-shadow:0 1px 0 color-mix(in srgb,var(--fiipdrive-ink-max) 8%,transparent),0 -1px 0 color-mix(in srgb,var(--fiipdrive-bg) 60%,transparent)}
nav{display:flex;gap:var(--fiipdrive-space-xl);font-size:var(--fiipdrive-text-small-size)}
nav a,.ft a{color:var(--fiipdrive-ink-2);text-decoration:none}
nav a:hover,.ft a:hover{color:var(--fiipdrive-ink)}
a:focus-visible{outline:var(--fiipdrive-focus-width) solid var(--fiipdrive-focus-color);outline-offset:var(--fiipdrive-focus-offset);border-radius:var(--fiipdrive-r-rule)}
main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--fiipdrive-space-stage);padding-bottom:var(--fiipdrive-space-stage)}
h1,h2,p{margin:0}

/* Hero: the company line, then the four pillars as one glass slab sitting on the fold. */
.hero{display:grid;grid-template-rows:1fr auto;gap:var(--fiipdrive-space-section);min-height:calc(100svh - var(--fiipdrive-size-lg) - var(--fiipdrive-space-xl) - var(--fiipdrive-space-region))}
h1{align-self:center;max-width:26ch;padding-block:var(--fiipdrive-space-section);font-size:clamp(var(--fiipdrive-text-display-size),4.4vw,var(--fiipdrive-text-hero-size));line-height:var(--fiipdrive-text-hero-lh);font-weight:var(--fiipdrive-text-title-weight);letter-spacing:var(--fiipdrive-text-hero-track);color:var(--fiipdrive-ink-max);text-wrap:balance}
h1 span{color:var(--fiipdrive-ink-2)}

.glass{position:relative;isolation:isolate;border-radius:var(--fiipdrive-r-frame);background:linear-gradient(180deg,color-mix(in srgb,var(--fiipdrive-ink) 5%,transparent),transparent 120px),linear-gradient(color-mix(in srgb,var(--fiipdrive-ink-max) 6%,transparent),color-mix(in srgb,var(--fiipdrive-ink-max) 6%,transparent)),linear-gradient(180deg,color-mix(in srgb,var(--fiipdrive-bg) 50%,transparent),color-mix(in srgb,var(--fiipdrive-bg) 76%,transparent));-webkit-backdrop-filter:var(--fiipdrive-glass-blur);backdrop-filter:var(--fiipdrive-glass-blur);box-shadow:var(--fiipdrive-shadow-glass)}
.glass::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(165deg,color-mix(in srgb,var(--fiipdrive-ink-max) 34%,transparent),color-mix(in srgb,var(--fiipdrive-ink) 16%,transparent) 22%,color-mix(in srgb,var(--fiipdrive-ink) 9%,transparent) 55%,color-mix(in srgb,var(--fiipdrive-ink) 16%,transparent));-webkit-mask:linear-gradient(var(--fiipdrive-ink) 0 0) content-box,linear-gradient(var(--fiipdrive-ink) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--fiipdrive-ink) 0 0) content-box exclude,linear-gradient(var(--fiipdrive-ink) 0 0)}
@media (prefers-reduced-transparency:reduce){.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--fiipdrive-surface)}}

/* Dividers are outer 1px shadows to the left and top of each cell; the slab clips the ones on its own edge,
   so the same rule draws a correct grid at four, two or one column. */
.pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}
.pillars li{display:grid;align-content:start;gap:var(--fiipdrive-space-sm);padding:var(--fiipdrive-space-xl);box-shadow:-1px 0 0 var(--rule),0 -1px 0 var(--rule)}
.pillars,.product{--rule:color-mix(in srgb,var(--fiipdrive-ink) 10%,transparent)}
.pillars h2{font-size:var(--fiipdrive-text-title-size);line-height:var(--fiipdrive-text-title-lh);font-weight:var(--fiipdrive-text-title-weight);letter-spacing:var(--fiipdrive-text-title-track);color:var(--fiipdrive-ink-max)}
.pillars p{color:var(--fiipdrive-ink-2);text-wrap:pretty}

/* First product: FIIP DRIVE keeps its own lines here. */
.product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--fiipdrive-space-section);padding:var(--fiipdrive-space-section)}
.name{display:grid;align-content:start;gap:var(--fiipdrive-space-lg)}
.name h2{display:grid;gap:var(--fiipdrive-space-xs);font-size:var(--fiipdrive-text-title-size);line-height:var(--fiipdrive-text-title-lh);font-weight:var(--fiipdrive-text-display-weight);letter-spacing:calc(var(--fiipdrive-text-label-track) * 2);text-transform:uppercase;color:var(--fiipdrive-ink-max)}
.name h2 span{font-weight:var(--fiipdrive-text-body-weight);letter-spacing:var(--fiipdrive-text-title-track);text-transform:none;color:var(--fiipdrive-ink-2)}
.line{font-size:var(--fiipdrive-text-display-size);line-height:var(--fiipdrive-text-display-lh);font-weight:var(--fiipdrive-text-hero-weight);letter-spacing:var(--fiipdrive-text-display-track);color:var(--fiipdrive-ink-max);text-wrap:balance}
.tag{justify-self:start;font-size:var(--fiipdrive-text-label-size);font-weight:var(--fiipdrive-text-label-weight);letter-spacing:var(--fiipdrive-text-label-track);text-transform:uppercase;color:var(--fiipdrive-ink-2)}
.copy{display:grid;align-content:start;gap:var(--fiipdrive-space-lg);color:var(--fiipdrive-ink-2)}
.copy p:first-child{color:var(--fiipdrive-ink)}
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fiipdrive-space-md) var(--fiipdrive-space-xl);margin-top:var(--fiipdrive-space-md);padding-top:var(--fiipdrive-space-xl);box-shadow:inset 0 1px 0 var(--rule);font-size:var(--fiipdrive-text-body-size)}
.contact a{color:var(--fiipdrive-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--fiipdrive-ink) 35%,transparent);text-underline-offset:3px}
.contact a:hover{text-decoration-color:var(--fiipdrive-ink)}
.contact a.go{display:inline-flex;align-items:center;height:var(--fiipdrive-size-lg);padding:0 var(--fiipdrive-space-lg);border-radius:var(--fiipdrive-r-button);background:var(--fiipdrive-quiet-fill-strong);box-shadow:var(--fiipdrive-shadow-lift);color:var(--fiipdrive-ink-max);text-decoration:none;cursor:pointer}
.contact a.go:hover{background:color-mix(in srgb,var(--fiipdrive-ink) 16%,transparent)}
@media (prefers-reduced-motion:no-preference){.contact a.go,nav a,.ft a{transition:background-color var(--fiipdrive-micro-duration) var(--fiipdrive-micro-ease),color var(--fiipdrive-micro-duration) var(--fiipdrive-micro-ease)}}

.ft{display:flex;flex-wrap:wrap;gap:var(--fiipdrive-space-md) var(--fiipdrive-space-xl);align-items:flex-start;justify-content:space-between;padding-top:var(--fiipdrive-space-lg);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fiipdrive-ink) 9%,transparent);font-size:var(--fiipdrive-text-small-size);color:var(--fiipdrive-ink-2)}
.ft p{max-width:60ch}
.ft nav{flex-wrap:wrap;gap:var(--fiipdrive-space-sm) var(--fiipdrive-space-xl)}

@media (max-width:1023px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}.product{grid-template-columns:minmax(0,1fr);padding:var(--fiipdrive-space-section)}}
@media (max-width:640px){.stage{padding:var(--fiipdrive-space-lg)}main{gap:var(--fiipdrive-space-section);padding-bottom:var(--fiipdrive-space-section)}.hero{min-height:0}h1{padding-block:var(--fiipdrive-space-section) 0;font-size:calc(var(--fiipdrive-text-display-size) * .8)}.hd nav{gap:var(--fiipdrive-space-lg)}.pillars{grid-template-columns:minmax(0,1fr)}.product{gap:var(--fiipdrive-space-xl);padding:var(--fiipdrive-space-xl)}.line{font-size:var(--fiipdrive-text-display-size)}}

.brand{letter-spacing:calc(var(--fiipdrive-text-label-track) * 2);margin-right:calc(var(--fiipdrive-text-label-track) * -2);color:var(--fiipdrive-ink-max)}