{"id":14,"date":"2026-08-12T01:36:40","date_gmt":"2026-08-12T01:36:40","guid":{"rendered":"https:\/\/worksite5.cc\/?page_id=14"},"modified":"2026-08-12T17:06:37","modified_gmt":"2026-08-12T17:06:37","slug":"zero-fs-given","status":"publish","type":"page","link":"https:\/\/worksite5.cc\/?page_id=14","title":{"rendered":"Zero F&#8217;s Given"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;500;600;700&#038;family=Inter:wght@400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/ScrollTrigger.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/SplitText.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lenis@1\/dist\/lenis.min.js\"><\/script>\n<style id=\"ff-design\">\n\/* Fathom & Fury on worksite5, v0.3.0 injection. This block sets what the pack's\n * design.css reads (the WordPress preset tokens, mapped to the F&F brand) plus the\n * injection-only helpers (neutralize the host theme, nav, buttons, hero canvas).\n * The real theme design.css and motion.js are concatenated after this. *\/\n\n\/* --- neutralize Twenty Twenty-Five chrome and content-width cap --- *\/\nhtml,body{overflow-x:clip}\nbody .wp-site-blocks>header,body header.wp-block-template-part,body .wp-site-blocks>footer,body footer.wp-block-template-part,body .wp-block-post-title,body .entry-header{display:none!important}\nbody .wp-block-post-content,body .entry-content,body .is-layout-constrained,body .is-layout-flow,body .wp-site-blocks,body main{margin:0!important;padding:0!important;max-width:none!important}\nbody .wp-block-post-content>*,body .entry-content>*,body .is-layout-constrained>*,body .is-layout-flow>*{max-width:none!important;margin-inline:0!important}\n\n\/* --- F&F tokens, mapped onto the pack's preset custom properties --- *\/\n:root{\n  --wp--style--global--content-size:760px; --wp--style--global--wide-size:1200px;\n  --wp--preset--color--background:#0B0F14; --wp--preset--color--surface:#141A22;\n  --wp--preset--color--contrast:#05070A; --wp--preset--color--text:#ECE6D8;\n  --wp--preset--color--muted:#8B95A5; --wp--preset--color--line:#263041;\n  --wp--preset--color--accent:#C6A15B; --wp--preset--color--accent-2:#D24A1E;\n  --wp--preset--color--accent-contrast:#0B0F14;\n  --wp--preset--font-family--display:'Oswald',system-ui,sans-serif;\n  --wp--preset--font-family--body:'Inter',system-ui,sans-serif;\n  --wp--preset--font-family--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;\n  --wp--preset--font-size--small:clamp(.8125rem,.8rem + .1vw,.875rem);\n  --wp--preset--font-size--medium:clamp(1rem,.95rem + .3vw,1.125rem);\n  --wp--preset--font-size--large:clamp(1.25rem,1.1rem + .6vw,1.5rem);\n  --wp--preset--font-size--x-large:clamp(1.75rem,1.4rem + 1.5vw,2.25rem);\n  --wp--preset--font-size--xx-large:clamp(2.5rem,1.9rem + 2.6vw,3.5rem);\n  --wp--preset--font-size--display:clamp(3rem,2rem + 4vw,5rem);\n  --wp--preset--font-size--mega:clamp(3.5rem,2rem + 7vw,8rem);\n  --wp--preset--spacing--20:clamp(.375rem,.3rem + .35vw,.5rem);\n  --wp--preset--spacing--30:clamp(.75rem,.6rem + .7vw,1rem);\n  --wp--preset--spacing--40:clamp(1.125rem,.9rem + 1vw,1.5rem);\n  --wp--preset--spacing--50:clamp(1.75rem,1.3rem + 2vw,2.5rem);\n  --wp--preset--spacing--60:clamp(2.5rem,1.8rem + 3vw,4rem);\n  --wp--preset--spacing--70:clamp(3.5rem,2.5rem + 4.5vw,6rem);\n  --wp--preset--spacing--80:clamp(4.5rem,3rem + 6vw,8rem);\n  --wp--preset--spacing--90:clamp(6rem,4rem + 9vw,12rem);\n  --brass-grad:linear-gradient(180deg,#E7C97B,#C6A15B 55%,#8A6E32);\n}\n\n\/* --- base (what theme.json styles would supply) --- *\/\nbody.ff{margin:0;background:var(--wp--preset--color--background);color:var(--wp--preset--color--text);font-family:var(--wp--preset--font-family--body);line-height:1.6;-webkit-font-smoothing:antialiased}\nbody.ff h1,body.ff h2,body.ff h3,body.ff h4{font-family:var(--wp--preset--font-family--display);text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;font-weight:700;color:#fff;margin:0}\nbody.ff h1{font-size:var(--wp--preset--font-size--xx-large)}\nbody.ff h2{font-size:var(--wp--preset--font-size--x-large)}\nbody.ff h3{font-size:var(--wp--preset--font-size--large)}\nbody.ff p{margin:0 0 1rem;max-width:var(--measure)}\nbody.ff a{color:var(--wp--preset--color--accent);text-decoration:none}\n.brass{background:var(--brass-grad);-webkit-background-clip:text;background-clip:text;color:transparent}\n\n\/* --- fixed nav (injection uses its own, not the theme header part) --- *\/\n.ff-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:1.1rem var(--gut,2rem);transition:padding .3s,background .3s,border-color .3s;border-bottom:1px solid transparent}\n.ff-nav.scrolled{padding:.6rem var(--gut,2rem);background:rgba(11,15,20,.82);backdrop-filter:blur(10px) saturate(1.2);border-bottom-color:var(--wp--preset--color--line)}\n.ff-nav .brandmark{font-family:var(--wp--preset--font-family--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-size:1.1rem}\n.ff-nav .brandmark b{color:var(--wp--preset--color--accent)}\n.ff-nav .links{display:flex;gap:1.5rem;align-items:center}\n.ff-nav .links a{font-family:var(--wp--preset--font-family--display);text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:var(--wp--preset--color--text);opacity:.85}\n.ff-nav .links a:hover{color:var(--wp--preset--color--accent);opacity:1}\n@media(max-width:820px){.ff-nav .links a:not(.btn){display:none}}\n\n\/* --- buttons (injected pages use raw anchors, not core blocks) --- *\/\n.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--wp--preset--font-family--display);text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:.95rem 1.9rem;border-radius:8px;position:relative;overflow:hidden;border:1.5px solid var(--wp--preset--color--accent);color:var(--wp--preset--color--accent-contrast);background:var(--brass-grad);transition:transform .2s,box-shadow .2s}\n.btn::before{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,var(--wp--preset--color--accent-2),#F0631F);transform:translateX(-101%);transition:transform .45s;z-index:0}\n.btn span{position:relative;z-index:1}\n.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(210,74,30,.35);color:#fff}\n.btn:hover::before{transform:translateX(0)}\n.btn.ghost{background:transparent;color:var(--wp--preset--color--accent);border-color:var(--wp--preset--color--line)}\n.btn.ghost:hover{color:#fff;border-color:var(--wp--preset--color--accent)}\n\n\/* --- hero canvas + immersive backdrop (bonus on top of the pack sig-hero) --- *\/\n.sig-hero{background:radial-gradient(120% 90% at 50% 0%,#12202b 0%,#0B0F14 55%,#05070A 100%);text-align:center;min-height:100svh;display:grid;place-items:center}\n.sig-hero .sig__inner{position:relative;z-index:2}\n.ff-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}\n.ff-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 80% at 50% 40%,transparent 55%,rgba(5,7,10,.85) 100%)}\n.sig-hero.is-product{min-height:78svh}\n.ff-form{display:grid;gap:1rem;max-width:560px;margin:2rem auto 0}\n.ff-form input,.ff-form textarea{background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--line);border-radius:8px;padding:.9rem 1rem;color:var(--wp--preset--color--text);font:inherit}\n.ff-form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}\n.hp{position:absolute;left:-9999px}\n.ff-footer{background:var(--wp--preset--color--contrast);border-top:1px solid var(--wp--preset--color--line);padding:3.5rem var(--gut,2rem);text-align:center;color:var(--wp--preset--color--muted)}\n.ff-footer .fl{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin:1rem 0}\n.ff-footer a{color:var(--wp--preset--color--muted)}.ff-footer a:hover{color:var(--wp--preset--color--accent)}\n\n\/*\n * Site Team Base: the design layer.\n *\n * Not a thin reset. A real design system the WordPress Site Team pipeline extends\n * and overrides from the approved design contract. It ships:\n *   1. Fluid foundations   - guards, tokens, everything scales 360px to 1600px+.\n *   2. Layout primitives    - full-bleed by default, container-query responsive.\n *   3. Visual primitives     - grain, gradient, blend, hairline, clip, cursor.\n *   4. Signature sections    - 15 archetype treatments, token-driven.\n *   5. Craft + motion        - states, and the CSS side of the GSAP motion engine.\n *\n * Everything reads a token, so re-theming is a token edit. The pipeline appends\n * per-project overrides after this file; it does not fork it. Full width is the\n * DEFAULT for signature zones, and nothing here depends on the host theme's\n * content-width behaving, so the design survives being dropped into any theme.\n *\/\n\n\/* ------------------------------------------------------------------ *\n * 1. Reset + fluid foundations\n * ------------------------------------------------------------------ *\/\n*, *::before, *::after { box-sizing: border-box; }\nhtml, body { overflow-x: clip; }\nimg, svg, video, canvas { max-width: 100%; height: auto; display: block; }\n:where(h1, h2, h3, h4) { text-wrap: balance; }\n:where(p, li) { text-wrap: pretty; }\n\/* Overflow guard: flex\/grid children default to min-width:auto and can push a\n * container wider than the viewport. Zero it everywhere structural. *\/\n.wp-block-columns > *, .wp-block-column, .wp-block-group, [class*=\"bento-\"], .sig__inner > * { min-width: 0; }\n\/* Client-editable locked headings: one long unbroken token can never overflow. *\/\n:where(h1, h2, h3, h4, .stat-number, .eyebrow) { overflow-wrap: break-word; word-break: break-word; hyphens: auto; }\n\n:root {\n  \/* Layout fallbacks so constrained content self-heals on a foreign host that\n   * never defines these WordPress custom properties. *\/\n  --wp--style--global--content-size: var(--wp--style--global--content-size, 760px);\n  --wp--style--global--wide-size: var(--wp--style--global--wide-size, 1200px);\n  --container: var(--wp--style--global--wide-size, 1200px);\n  --gut: clamp(1.5rem, 4vw, 4rem);\n  --measure: 68ch;\n  --sig-pad-y: clamp(3.5rem, 8vw, 8rem);\n  --sig-gap: clamp(2rem, 5vw, 5rem);\n  --radius: 12px;\n  --line: var(--wp--preset--color--line, #e7e5e4);\n  --shadow-1: 0 1px 2px rgba(12, 10, 9, .06), 0 8px 24px rgba(12, 10, 9, .06);\n  --shadow-2: 0 2px 6px rgba(12, 10, 9, .08), 0 24px 60px rgba(12, 10, 9, .12);\n  \/* Motion tokens, shared by this file and assets\/motion.js so nothing drifts. *\/\n  --reveal-y: 24px;\n  --reveal-dur: 0.7s;\n  --ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);\n  --dur-micro: 180ms;\n  --dur-entrance: 700ms;\n}\n\nbody {\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  background: var(--wp--preset--color--background);\n  color: var(--wp--preset--color--text);\n}\n\n\/* ------------------------------------------------------------------ *\n * 2. Typography rhythm\n * ------------------------------------------------------------------ *\/\n.entry-content p, .wp-block-post-content p { max-width: var(--measure); }\n:where(.entry-content, .wp-block-post-content) > * + * { margin-block-start: 1.5rem; }\n.eyebrow, .has-eyebrow {\n  display: inline-block;\n  font-family: var(--wp--preset--font-family--body);\n  font-size: var(--wp--preset--font-size--small);\n  font-weight: 600;\n  letter-spacing: .12em;\n  text-transform: uppercase;\n  color: var(--wp--preset--color--muted);\n}\n.is-mono { font-family: var(--wp--preset--font-family--mono); }\n\n\/* ------------------------------------------------------------------ *\n * 3. Layout primitives (full-bleed by default, container-query responsive)\n * ------------------------------------------------------------------ *\/\n\n\/* Full-bleed: any .sig section, .full-bleed utility, or the header\/footer spans\n * the viewport edge to edge on its own. alignfull in Site Team Base uses the FSE\n * mechanism; the :not(.alignfull) rule guarantees full width everywhere else\n * (foreign host, REST injection). overflow-x is already clipped above so the\n * 100vw breakout never adds a scrollbar. *\/\n.sig, .full-bleed { padding-block: var(--sig-pad-y); }\n.sig:not(.alignfull), .full-bleed:not(.alignfull),\n.site-header, .site-footer { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }\n.site-header, .site-footer { padding-block: 0; }\n\/* The readable column inside a full-bleed section. *\/\n.sig__inner, .site-header > .wp-block-group, .site-footer > .wp-block-group {\n  max-width: var(--container);\n  margin-inline: auto;\n  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));\n}\n.sig__inner.is-narrow { max-width: var(--wp--style--global--content-size); }\n\n\/* Sections respond to their OWN rendered width, not the viewport, so a section\n * never breaks when embedded narrower than the screen. *\/\n@supports (container-type: inline-size) {\n  .sig, .full-bleed { container-type: inline-size; }\n}\n\n\/* Editorial asymmetry: uneven split, not centered 50\/50. *\/\n.sig-feature .wp-block-columns, .sig-split .wp-block-columns { align-items: center; gap: var(--sig-gap); }\n.sig-feature .wp-block-column:first-child { flex-basis: 58%; }\n.sig-feature .wp-block-column:last-child { flex-basis: 42%; }\n.sig-feature.is-flipped .wp-block-columns { flex-direction: row-reverse; }\n\n\/* Bento: real CSS grid, spanning tiles. *\/\n.sig-bento .is-bento, .sig-bento .is-layout-grid.is-bento {\n  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(160px, auto); gap: 1rem;\n}\n.sig-bento .bento-lg { grid-column: span 4; grid-row: span 2; }\n.sig-bento .bento-md { grid-column: span 3; }\n.sig-bento .bento-sm { grid-column: span 2; }\n.sig-bento .bento-tall { grid-column: span 2; grid-row: span 2; }\n\n.pull-up { margin-block-start: clamp(-6rem, -8vw, -3rem); position: relative; z-index: 2; }\n.is-sticky-media .wp-block-column:first-child > * { position: sticky; top: 6rem; }\n.bleed-media { aspect-ratio: 16 \/ 9; }\n.bleed-media img { width: 100%; height: 100%; object-fit: cover; }\n\n\/* Aspect-ratio media utilities (kill layout shift). *\/\n.ar-16-9 { aspect-ratio: 16 \/ 9; } .ar-4-5 { aspect-ratio: 4 \/ 5; }\n.ar-1-1 { aspect-ratio: 1 \/ 1; } .ar-21-9 { aspect-ratio: 21 \/ 9; } .ar-3-4 { aspect-ratio: 3 \/ 4; }\n[class*=\"ar-\"] > img, [class*=\"ar-\"] > .wp-block-image, [class*=\"ar-\"] img { width: 100%; height: 100%; object-fit: cover; }\n\n\/* ------------------------------------------------------------------ *\n * 4. Visual primitives (opt-in texture, per the contract's effects block)\n * ------------------------------------------------------------------ *\/\n\/* Film grain \/ noise overlay: fixed, non-interactive, cheap, subtle. *\/\n.grain::after, .noise::after {\n  content: \"\"; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n}\n.grain, .noise { position: relative; }\n\/* Tonal \/ mesh gradient washes, driven by tokens. *\/\n.wash-radial { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent), transparent 60%); }\n.wash-mesh {\n  background:\n    radial-gradient(40% 60% at 15% 20%, color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent), transparent),\n    radial-gradient(50% 50% at 85% 30%, color-mix(in srgb, var(--wp--preset--color--accent-2, var(--wp--preset--color--accent)) 16%, transparent), transparent);\n}\n\/* Duotone image treatment via blend. *\/\n.duotone { position: relative; background: var(--wp--preset--color--accent); }\n.duotone img { mix-blend-mode: luminosity; filter: grayscale(1) contrast(1.1); }\n\/* Hairline system: rule lines as a real primitive, not ad hoc borders. *\/\n.hairline { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }\n.hairline-t { border-top: 1px solid var(--line); } .hairline-b { border-bottom: 1px solid var(--line); }\n\/* Clip-path reveal (paired with motion.js, class or data-attribute). *\/\n[data-clip-reveal], .clip-reveal { clip-path: inset(0 100% 0 0); }\n\/* Opt-in custom cursor, off by default. Accessible: pointer stays functional. *\/\n.cursor-dot { cursor: none; }\n.ff-cursor { position: fixed; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--accent); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference; }\n@media (hover: none) { .cursor-dot { cursor: auto; } .ff-cursor { display: none; } }\n\n\/* ------------------------------------------------------------------ *\n * 5. Signature section treatments (15 archetypes, token-driven defaults)\n * ------------------------------------------------------------------ *\/\n\/* Hero *\/\n.sig-hero { padding-block: clamp(4rem, 10vw, 10rem); position: relative; }\n.sig-hero :is(h1, .wp-block-heading, .wp-block-post-title) { font-size: var(--wp--preset--font-size--mega, 5rem); line-height: .98; letter-spacing: -.03em; }\n.sig-hero p:not(.eyebrow) { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); }\n.sig-hero .wp-block-image img { border-radius: var(--radius); box-shadow: var(--shadow-2); }\n\/* Statement *\/\n.sig-statement { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--background); text-align: center; }\n.sig-statement :is(h2, .wp-block-heading) { font-size: var(--wp--preset--font-size--display, 3.5rem); max-width: 20ch; margin-inline: auto; }\n.sig-statement :is(a, p) { color: inherit; }\n\/* Oversized statement: one word\/number fills the view *\/\n.sig-oversized :is(h1, h2) { font-size: var(--wp--preset--font-size--mega, 8rem); line-height: .9; text-align: center; }\n\/* Feature *\/\n.sig-feature .wp-block-image img { border-radius: var(--radius); box-shadow: var(--shadow-1); }\n\/* Split-scroll narrative: one column sticky, the other scrolls *\/\n.sig-split .wp-block-column:first-child > * { position: sticky; top: 12vh; }\n\/* Bento already covered above *\/\n\/* Stats *\/\n.sig-stats .wp-block-columns { gap: var(--sig-gap); text-align: center; }\n.sig-stats .count-up, .sig-stats .stat-number { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display, 3.5rem); font-weight: 800; line-height: 1; color: var(--wp--preset--color--accent); }\n.sig-stats .stat-label { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); letter-spacing: .04em; }\n\/* CTA *\/\n.sig-cta { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); text-align: center; }\n.sig-cta :is(h2, p, a) { color: inherit; }\n.sig-cta :is(h2, .wp-block-heading) { font-size: var(--wp--preset--font-size--display, 3.5rem); max-width: 18ch; margin-inline: auto; }\n\/* Marquee band *\/\n.sig-marquee { overflow: hidden; }\n.sig-marquee .marquee { display: flex; gap: 3rem; white-space: nowrap; font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 6vw, 5rem); text-transform: uppercase; }\n\/* Ticker (logos\/press) *\/\n.sig-ticker .marquee { display: flex; gap: 4rem; align-items: center; opacity: .7; }\n\/* Editorial index: numbered\/dated list *\/\n.sig-index .idx-row { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1.5rem; align-items: baseline; padding-block: 1.4rem; border-top: 1px solid var(--line); transition: padding-inline var(--dur-micro) var(--ease); }\n.sig-index .idx-row:hover { padding-inline-start: 1rem; }\n.sig-index .idx-num { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--muted); }\n.sig-index .idx-row h3 { font-size: clamp(1.4rem, 3vw, 2.4rem); }\n\/* Quote wall: asymmetric masonry-ish grid *\/\n.sig-quotes .q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }\n.sig-quotes blockquote, .sig-quotes .q-card { background: var(--wp--preset--color--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); margin: 0; }\n.sig-quotes .q-card:nth-child(3n+1) { grid-row: span 2; }\n\/* Before \/ after *\/\n.sig-beforeafter .ba { position: relative; aspect-ratio: 16\/9; overflow: hidden; border-radius: var(--radius); }\n.sig-beforeafter .ba > * { position: absolute; inset: 0; }\n.sig-beforeafter .ba .after { clip-path: inset(0 0 0 50%); }\n\/* Image break: full-bleed image, no text *\/\n.sig-imagebreak { padding-block: 0; }\n.sig-imagebreak img { width: 100%; height: clamp(40vh, 60vh, 80vh); object-fit: cover; }\n\/* Pinned \/ scroll gallery *\/\n.sig-gallery .g-track { display: grid; gap: 1.5rem; }\n.sig-gallery .g-track img { border-radius: var(--radius); }\n\/* Horizontal showcase (motion.js drives the scroll) *\/\n.sig-showcase .h-scroll { display: flex; gap: var(--sig-gap); }\n.sig-showcase .h-panel { flex: 0 0 min(80vw, 640px); }\n\/* Sticky spec *\/\n.sig-spec .wp-block-columns { align-items: start; gap: var(--sig-gap); }\n.sig-spec .spec-list { position: sticky; top: 12vh; }\n.sig-spec dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; }\n.sig-spec dt { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }\n\n\/* Cards (shared tile treatment) *\/\n.card, .sig-bento .is-tile { background: var(--wp--preset--color--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); height: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }\n.card:hover, .sig-bento .is-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }\n\n\/* ------------------------------------------------------------------ *\n * 6. Components + states\n * ------------------------------------------------------------------ *\/\na { color: var(--wp--preset--color--accent); text-underline-offset: .18em; }\na:hover { text-decoration: underline; }\n.wp-block-button__link { transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); will-change: transform; }\n.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); filter: brightness(1.04); }\n.wp-block-button.is-style-outline .wp-block-button__link { border: 1.5px solid currentColor; }\n.site-header { border-bottom: 1px solid var(--line); }\n.site-header.is-sticky { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); }\n.wp-block-navigation a { color: var(--wp--preset--color--text); }\n.wp-block-navigation a:hover { color: var(--wp--preset--color--accent); text-decoration: none; }\n:where(input, textarea, select) { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; font: inherit; background: var(--wp--preset--color--background); color: var(--wp--preset--color--text); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }\n:where(input, textarea, select):focus { border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent); outline: none; }\n.form-error { color: #b91c1c; font-size: var(--wp--preset--font-size--small); }\n:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }\n.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--wp--preset--color--text); color: var(--wp--preset--color--background); padding: .6rem 1rem; }\n.skip-link:focus { left: 0; }\n\n\/* ------------------------------------------------------------------ *\n * 7. Motion (CSS side; assets\/motion.js drives the classes)\n * ------------------------------------------------------------------ *\/\n.reveal, .reveal-stagger > * { opacity: 1; }\n[data-scroll-progress] { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--wp--preset--color--accent); z-index: 100; }\n@media (prefers-reduced-motion: no-preference) {\n  .js .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }\n  .js .reveal[data-reveal=\"left\"] { transform: translateX(calc(var(--reveal-y) * -1.5)); }\n  .js .reveal[data-reveal=\"right\"] { transform: translateX(calc(var(--reveal-y) * 1.5)); }\n  .js .reveal[data-reveal=\"scale\"] { transform: scale(.94); }\n  .js .reveal.is-in { opacity: 1; transform: none; }\n  .js .reveal-stagger > * { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }\n  .js .reveal-stagger.is-in > * { opacity: 1; transform: none; }\n  .js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }\n  .js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }\n  .js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }\n  .js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }\n  .js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: .40s; }\n}\n\n\/* ------------------------------------------------------------------ *\n * 8. Responsive (container queries, with a viewport-media fallback)\n * ------------------------------------------------------------------ *\/\n@supports (container-type: inline-size) {\n  @container (max-width: 700px) {\n    .sig-feature .wp-block-column:first-child, .sig-feature .wp-block-column:last-child { flex-basis: 100%; }\n    .sig-bento .is-bento { grid-template-columns: repeat(2, 1fr); }\n    .sig-bento [class*=\"bento-\"] { grid-column: span 2; grid-row: auto; }\n    .sig-quotes .q-grid { grid-template-columns: 1fr; }\n    .sig-quotes .q-card:nth-child(3n+1) { grid-row: auto; }\n    .sig-split .wp-block-column:first-child > *, .sig-spec .spec-list, .is-sticky-media .wp-block-column:first-child > * { position: static; }\n    .sig-index .idx-row { grid-template-columns: 2.5rem 1fr; }\n    .pull-up { margin-block-start: 0; }\n  }\n  @container (min-width: 701px) and (max-width: 1024px) {\n    .sig-bento .is-bento { grid-template-columns: repeat(4, 1fr); }\n  }\n}\n@supports not (container-type: inline-size) {\n  @media (max-width: 781px) {\n    .sig-feature .wp-block-column:first-child, .sig-feature .wp-block-column:last-child { flex-basis: 100%; }\n    .sig-bento .is-bento { grid-template-columns: repeat(2, 1fr); }\n    .sig-bento [class*=\"bento-\"] { grid-column: span 2; grid-row: auto; }\n    .sig-quotes .q-grid { grid-template-columns: 1fr; }\n    .is-sticky-media .wp-block-column:first-child > *, .sig-split .wp-block-column:first-child > *, .sig-spec .spec-list { position: static; }\n    .pull-up { margin-block-start: 0; }\n  }\n}\n\n\/* ------------------------------------------------------------------ *\n * 9. RTL + print\n * ------------------------------------------------------------------ *\/\n[dir=\"rtl\"] .sig-feature .wp-block-columns { flex-direction: row-reverse; }\n[dir=\"rtl\"] .sig-feature.is-flipped .wp-block-columns { flex-direction: row; }\n@media print {\n  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }\n  .sig-statement, .sig-cta { background: none !important; color: var(--wp--preset--color--text) !important; }\n  .site-header.is-sticky, .wp-block-button, .skip-link, .grain::after, .noise::after { display: none !important; }\n}\n\n<\/style>\n<script>\n\/*\n * Site Team Base: the motion engine.\n *\n * The real thing, not a promise in a comment. GSAP + ScrollTrigger + Lenis when\n * they are enqueued (see functions.php, gated by the site_team_motion_tier\n * option); a complete IntersectionObserver fallback when they are not, so the\n * page is never dead if a CDN fails. Every effect binds to a CLASS or a\n * data-attribute, never a block id or DOM position, so it survives a client\n * editing a locked signature section. Reduced motion is tiered, not a kill\n * switch. A MutationObserver re-scans content added after load (WooCommerce\n * Store API, AJAX) so nothing rendered late is left un-animated.\n *\n * Effects: reveal (+ data-reveal direction), reveal-stagger, count-up,\n * [data-parallax] layers, [data-split] kinetic text, .marquee, [data-draw-svg],\n * [data-magnetic], [data-tilt], [data-clip-reveal], [data-pin], .h-scroll\n * horizontal panels, [data-scroll-progress], and an opt-in .cursor-dot.\n *\/\n(function () {\n  var root = document.documentElement;\n  root.classList.add('js');\n\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)');\n  var hasGSAP = typeof window.gsap !== 'undefined';\n  var hasST = hasGSAP && typeof window.ScrollTrigger !== 'undefined';\n  var cs = getComputedStyle(root);\n  var T = {\n    ease: 'power3.out',\n    easePop: 'back.out(1.7)',\n    entrance: parseFloat(cs.getPropertyValue('--dur-entrance')) \/ 1000 || 0.7,\n    micro: parseFloat(cs.getPropertyValue('--dur-micro')) \/ 1000 || 0.18\n  };\n\n  function run() {\n    if (hasST) window.gsap.registerPlugin(window.ScrollTrigger);\n    initReveals();\n    initCounters();\n    initHeaderShadow();      \/\/ Tier 3, always, even under reduced motion\n    initScrollProgress();\n    if (reduce.matches) return; \/\/ below here is Tier 1, motion-safe only\n    initLenis();\n    initParallax();\n    initSplit();\n    initMarquee();\n    initDrawSVG();\n    initMagnetic();\n    initTilt();\n    initClipReveal();\n    initPin();\n    initHorizontal();\n    initCursor();\n    \/\/ Re-evaluate trigger positions once everything is set and once fonts land,\n    \/\/ so above-the-fold reveals fire and late layout shifts do not desync.\n    if (hasST) {\n      window.ScrollTrigger.refresh();\n      if (document.fonts && document.fonts.ready) document.fonts.ready.then(function () { window.ScrollTrigger.refresh(); });\n    }\n    \/\/ Safety net: nothing should ever stay invisible. If a reveal has not been\n    \/\/ handed to GSAP or the observer within 2.5s, show it outright.\n    setTimeout(function () {\n      document.querySelectorAll('.reveal:not(.is-in), .reveal-stagger:not(.is-in)').forEach(function (el) {\n        el.classList.add('is-in'); el.style.opacity = '1'; el.style.transform = 'none';\n      });\n    }, 2500);\n  }\n\n  \/* ---- Reveals: GSAP batch when available, IO fallback otherwise ---- *\/\n  var io;\n  function observeReveal(el) {\n    if (el.getAttribute('data-mj')) return; \/\/ process each element once only\n    el.setAttribute('data-mj', '1');\n    if (hasST) {\n      \/\/ fromTo, never from: the CSS pre-hides .reveal (opacity 0), and gsap.from\n      \/\/ would read that 0 as the destination and animate 0 to 0 (blank forever).\n      \/\/ fromTo pins an explicit visible end state, so content always arrives.\n      var dir = el.getAttribute('data-reveal') ||\n        (el.classList.contains('reveal-left') ? 'left' : el.classList.contains('reveal-right') ? 'right' : el.classList.contains('reveal-scale') ? 'scale' : '');\n      var from = { opacity: 0, y: 24, x: 0, scale: 1 };\n      if (dir === 'left') { from.x = -40; from.y = 0; }\n      else if (dir === 'right') { from.x = 40; from.y = 0; }\n      else if (dir === 'scale') { from.scale = 0.94; from.y = 0; }\n      var stagger = el.classList.contains('reveal-stagger');\n      var target = stagger ? el.children : el;\n      var to = { opacity: 1, x: 0, y: 0, scale: 1, duration: T.entrance, ease: T.ease, overwrite: 'auto',\n        scrollTrigger: { trigger: el, start: 'top 88%', once: true } };\n      if (stagger) to.stagger = 0.08;\n      window.gsap.fromTo(target, from, to);\n      el.classList.add('is-in');\n    } else {\n      if (!io) io = makeIO();\n      io.observe(el);\n    }\n  }\n  function makeIO() {\n    return new IntersectionObserver(function (entries) {\n      entries.forEach(function (e) {\n        if (!e.isIntersecting) return;\n        e.target.classList.add('is-in');\n        if (e.target.classList.contains('count-up')) countUp(e.target);\n        io.unobserve(e.target);\n      });\n    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.14 });\n  }\n  function initReveals() {\n    document.querySelectorAll('.reveal, .reveal-stagger').forEach(observeReveal);\n  }\n\n  \/* ---- Counters: read the target from the element's own text (edit-proof) ---- *\/\n  function initCounters() {\n    if (hasST) {\n      document.querySelectorAll('.count-up').forEach(function (el) {\n        el.setAttribute('data-mj', '1');\n        window.ScrollTrigger.create({ trigger: el, start: 'top 90%', once: true, onEnter: function () { countUp(el); } });\n      });\n    } else if (!hasGSAP) {\n      if (!io) io = makeIO();\n      document.querySelectorAll('.count-up').forEach(function (el) { el.setAttribute('data-mj', '1'); io.observe(el); });\n    }\n  }\n  function countUp(el) {\n    if (el.dataset.done) return; el.dataset.done = '1';\n    var raw = el.dataset.to || el.textContent || '';\n    var target = parseFloat(raw.replace(\/[^0-9.]\/g, '')); if (isNaN(target)) return;\n    var suffix = (el.dataset.suf != null) ? el.dataset.suf : raw.replace(\/[0-9.,\\s]\/g, '');\n    if (reduce.matches) { el.textContent = target.toLocaleString() + suffix; return; }\n    var start = null, dur = 1400;\n    (function step(ts) {\n      if (start === null) start = ts;\n      var p = Math.min((ts - start) \/ dur, 1), e = 0.5 - Math.cos(Math.PI * p) \/ 2;\n      el.textContent = Math.round(target * e).toLocaleString() + suffix;\n      if (p < 1) requestAnimationFrame(step);\n    })(performance.now());\n  }\n\n  \/* ---- Lenis smooth scroll, synced to ScrollTrigger ---- *\/\n  var lenis;\n  function initLenis() {\n    if (typeof window.Lenis === 'undefined') return;\n    lenis = new window.Lenis({ lerp: 0.1, smoothWheel: true });\n    if (hasST) { lenis.on('scroll', window.ScrollTrigger.update); window.gsap.ticker.add(function (t) { lenis.raf(t * 1000); }); window.gsap.ticker.lagSmoothing(0); }\n    else { requestAnimationFrame(function raf(t) { lenis.raf(t); requestAnimationFrame(raf); }); }\n  }\n\n  \/* ---- Parallax layers ---- *\/\n  function initParallax() {\n    var layers = document.querySelectorAll('[data-parallax], [data-parallax-layer], .parallax');\n    if (!layers.length) return;\n    if (hasST) {\n      layers.forEach(function (el) {\n        var depth = parseFloat(el.getAttribute('data-parallax') || el.getAttribute('data-parallax-layer') || el.dataset.depth) || 0.2;\n        window.gsap.to(el, { yPercent: -depth * 100, ease: 'none', scrollTrigger: { trigger: el, start: 'top bottom', end: 'bottom top', scrub: true } });\n      });\n    } else {\n      var ticking = false;\n      window.addEventListener('scroll', function () {\n        if (ticking) return; ticking = true;\n        requestAnimationFrame(function () {\n          var vh = innerHeight;\n          layers.forEach(function (el) {\n            var r = el.getBoundingClientRect(); if (r.bottom < 0 || r.top > vh) return;\n            var d = parseFloat(el.getAttribute('data-parallax') || el.getAttribute('data-parallax-layer') || el.dataset.depth) || 0.2;\n            el.style.transform = 'translate3d(0,' + ((r.top + r.height \/ 2 - vh \/ 2) * -d).toFixed(1) + 'px,0)';\n          });\n          ticking = false;\n        });\n      }, { passive: true });\n    }\n  }\n\n  \/* ---- Kinetic \/ split text ---- *\/\n  function initSplit() {\n    if (!hasST || typeof window.SplitText === 'undefined') return;\n    var go = function () {\n      document.querySelectorAll('[data-split], .split-words, .split-chars, .split-lines').forEach(function (el) {\n        var type = el.getAttribute('data-split') || (el.classList.contains('split-chars') ? 'chars' : el.classList.contains('split-lines') ? 'lines' : 'words');\n        var split = new window.SplitText(el, { type: type, wordsClass: 'st-w', charsClass: 'st-c', linesClass: 'st-l' });\n        var units = type === 'chars' ? split.chars : type === 'lines' ? split.lines : split.words;\n        window.gsap.from(units, { yPercent: 110, opacity: 0, duration: 0.8, ease: T.ease, stagger: 0.02,\n          scrollTrigger: { trigger: el, start: 'top 85%', once: true } });\n      });\n    };\n    if (document.fonts && document.fonts.ready) document.fonts.ready.then(go); else go();\n  }\n\n  \/* ---- Marquee ---- *\/\n  function initMarquee() {\n    document.querySelectorAll('.marquee').forEach(function (el) {\n      if (el.dataset.mq) return; el.dataset.mq = '1';\n      el.innerHTML += el.innerHTML; \/\/ duplicate for a seamless loop\n      if (hasGSAP) {\n        var tween = window.gsap.to(el, { xPercent: -50, repeat: -1, duration: 18, ease: 'none' });\n        el.addEventListener('mouseenter', function () { tween.pause(); });\n        el.addEventListener('mouseleave', function () { tween.resume(); });\n      }\n    });\n  }\n\n  \/* ---- SVG line draw ---- *\/\n  function initDrawSVG() {\n    document.querySelectorAll('[data-draw-svg] path, path[data-draw-svg]').forEach(function (p) {\n      var len = p.getTotalLength(); p.style.strokeDasharray = len; p.style.strokeDashoffset = len;\n      if (hasST) window.gsap.to(p, { strokeDashoffset: 0, duration: 1.4, ease: T.ease, scrollTrigger: { trigger: p, start: 'top 85%', once: true } });\n      else p.style.transition = 'stroke-dashoffset 1.4s var(--ease)', requestAnimationFrame(function () { p.style.strokeDashoffset = 0; });\n    });\n  }\n\n  \/* ---- Magnetic buttons ---- *\/\n  function initMagnetic() {\n    document.querySelectorAll('[data-magnetic], .btn-magnetic').forEach(function (b) {\n      var qx = hasGSAP ? window.gsap.quickTo(b, 'x', { duration: 0.3, ease: T.ease }) : null;\n      var qy = hasGSAP ? window.gsap.quickTo(b, 'y', { duration: 0.3, ease: T.ease }) : null;\n      b.addEventListener('mousemove', function (ev) {\n        var r = b.getBoundingClientRect(), x = (ev.clientX - r.left - r.width \/ 2) * 0.3, y = (ev.clientY - r.top - r.height \/ 2) * 0.4;\n        if (qx) { qx(x); qy(y); } else { b.style.transform = 'translate(' + x + 'px,' + y + 'px)'; }\n      });\n      b.addEventListener('mouseleave', function () { if (qx) { qx(0); qy(0); } else { b.style.transform = ''; } });\n    });\n  }\n\n  \/* ---- 3D tilt ---- *\/\n  function initTilt() {\n    document.querySelectorAll('[data-tilt], .ff-tilt, .tilt').forEach(function (c) {\n      var m = c.querySelector('[data-tilt-target]') || c.querySelector('.ff-media') || c;\n      c.addEventListener('mousemove', function (ev) {\n        var r = c.getBoundingClientRect();\n        m.style.transform = 'perspective(900px) rotateX(' + (((ev.clientY - r.top) \/ r.height - .5) * -8) + 'deg) rotateY(' + (((ev.clientX - r.left) \/ r.width - .5) * 10) + 'deg)';\n      });\n      c.addEventListener('mouseleave', function () { m.style.transform = ''; });\n    });\n  }\n\n  \/* ---- Clip-path reveal ---- *\/\n  function initClipReveal() {\n    document.querySelectorAll('[data-clip-reveal], .clip-reveal').forEach(function (el) {\n      if (hasST) window.gsap.to(el, { clipPath: 'inset(0 0% 0 0)', duration: 1, ease: T.ease, scrollTrigger: { trigger: el, start: 'top 82%', once: true } });\n      else { el.style.transition = 'clip-path 1s var(--ease)'; new IntersectionObserver(function (e, o) { if (e[0].isIntersecting) { el.style.clipPath = 'inset(0 0% 0 0)'; o.disconnect(); } }).observe(el); }\n    });\n  }\n\n  \/* ---- Pinned sections ---- *\/\n  function initPin() {\n    if (!hasST) return;\n    document.querySelectorAll('[data-pin]').forEach(function (el) {\n      var dist = el.getAttribute('data-pin-distance') || '100%';\n      window.ScrollTrigger.create({ trigger: el, start: 'top top', end: '+=' + dist, pin: true, pinSpacing: true });\n    });\n  }\n\n  \/* ---- Horizontal scroll panels ---- *\/\n  function initHorizontal() {\n    if (!hasST) return;\n    document.querySelectorAll('.h-scroll').forEach(function (track) {\n      var panels = track.querySelectorAll('.h-panel'); if (panels.length < 2) return;\n      window.gsap.to(panels, { xPercent: -100 * (panels.length - 1), ease: 'none',\n        scrollTrigger: { trigger: track.parentElement || track, pin: true, scrub: 1, end: function () { return '+=' + track.scrollWidth; } } });\n    });\n  }\n\n  \/* ---- Scroll progress bar ---- *\/\n  function initScrollProgress() {\n    var bar = document.querySelector('[data-scroll-progress]'); if (!bar) return;\n    if (hasST) window.gsap.to(bar, { scaleX: 1, ease: 'none', scrollTrigger: { trigger: document.body, start: 'top top', end: 'bottom bottom', scrub: true } });\n    else window.addEventListener('scroll', function () { bar.style.transform = 'scaleX(' + (scrollY \/ (document.body.scrollHeight - innerHeight)) + ')'; }, { passive: true });\n  }\n\n  \/* ---- Header shadow (Tier 3, survives reduced motion) ---- *\/\n  function initHeaderShadow() {\n    var h = document.querySelector('.site-header.is-sticky'); if (!h) return;\n    window.addEventListener('scroll', function () { h.classList.toggle('is-scrolled', scrollY > 8); }, { passive: true });\n  }\n\n  \/* ---- Opt-in custom cursor ---- *\/\n  function initCursor() {\n    if (!document.querySelector('.cursor-dot')) return;\n    var dot = document.createElement('div'); dot.className = 'ff-cursor'; document.body.appendChild(dot);\n    var qx = hasGSAP ? window.gsap.quickTo(dot, 'x', { duration: 0.15 }) : null, qy = hasGSAP ? window.gsap.quickTo(dot, 'y', { duration: 0.15 }) : null;\n    window.addEventListener('mousemove', function (e) { if (qx) { qx(e.clientX); qy(e.clientY); } else { dot.style.left = e.clientX + 'px'; dot.style.top = e.clientY + 'px'; } });\n  }\n\n  \/* ---- Re-scan content added after load (Store API, AJAX). This MUST NOT feed\n   * back into itself: it disconnects before it scans (its own ScrollTrigger.refresh\n   * mutates the DOM), only touches elements it has not processed (data-mj), and is\n   * debounced so a burst of injected nodes triggers one scan, not thousands. An\n   * earlier version refreshed on every mutation and locked the main thread. ---- *\/\n  var mo, moTimer;\n  function scanNew() {\n    if (mo) mo.disconnect();\n    document.querySelectorAll('.reveal:not([data-mj]), .reveal-stagger:not([data-mj])').forEach(observeReveal);\n    document.querySelectorAll('.count-up:not([data-mj])').forEach(function (el) {\n      el.setAttribute('data-mj', '1');\n      if (hasST) window.ScrollTrigger.create({ trigger: el, start: 'top 90%', once: true, onEnter: function () { countUp(el); } });\n      else if (io) io.observe(el);\n    });\n    if (hasST) window.ScrollTrigger.refresh();\n    if (mo) mo.observe(document.body, { childList: true, subtree: true });\n  }\n  mo = new MutationObserver(function () { clearTimeout(moTimer); moTimer = setTimeout(scanNew, 300); });\n  mo.observe(document.body, { childList: true, subtree: true });\n\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run); else run();\n})();\n\n<\/script>\n<script>\n\/* Injection-only extras: mark the body, drive the fixed nav, and paint the hero\n * smoke\/ember canvas. Runs alongside the pack's motion.js (which owns reveals,\n * split text, parallax, tilt, counters, marquee, clip-reveal via GSAP). *\/\n(function () {\n  document.body.classList.add('ff');\n  function boot() {\n    var nav = document.querySelector('.ff-nav');\n    if (nav) addEventListener('scroll', function () { nav.classList.toggle('scrolled', scrollY > 20); }, { passive: true });\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n    var cv = document.querySelector('.ff-hero-canvas');\n    if (cv && cv.getContext) {\n      var ctx = cv.getContext('2d'), W, H, parts = [];\n      function rs() { W = cv.width = cv.offsetWidth; H = cv.height = cv.offsetHeight; }\n      rs(); addEventListener('resize', rs);\n      for (var i = 0; i < 70; i++) parts.push({ x: Math.random() * W, y: Math.random() * H, r: 20 + Math.random() * 80, s: .2 + Math.random() * .5, a: .02 + Math.random() * .05, e: Math.random() < .18 });\n      (function draw() {\n        ctx.clearRect(0, 0, W, H);\n        parts.forEach(function (p) {\n          p.y -= p.s; if (p.y < -p.r) { p.y = H + p.r; p.x = Math.random() * W; }\n          var g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r);\n          if (p.e) { g.addColorStop(0, 'rgba(210,74,30,' + p.a * 2 + ')'); g.addColorStop(1, 'rgba(210,74,30,0)'); }\n          else { g.addColorStop(0, 'rgba(198,161,91,' + p.a + ')'); g.addColorStop(1, 'rgba(120,120,140,0)'); }\n          ctx.fillStyle = g; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, 7); ctx.fill();\n        });\n        requestAnimationFrame(draw);\n      })();\n    }\n  }\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot); else boot();\n})();\n\n<\/script>\n\n\n\n<nav class=\"ff-nav\">\n  <a class=\"brandmark\" href=\"?page_id=12\">FATHOM <b>&amp;<\/b> FURY<\/a>\n  <div class=\"links\">\n    <a href=\"?page_id=13\">NQG<\/a>\n    <a href=\"?page_id=14\">ZFG<\/a>\n    <a href=\"?page_id=15\">Dessert Sea<\/a>\n    <a href=\"?page_id=16\">About<\/a>\n    <a class=\"btn ghost\" href=\"?page_id=17\"><span>Contact<\/span><\/a>\n  <\/div>\n<\/nav>\n<section class=\"sig sig-hero is-product\">\n  <canvas class=\"ff-hero-canvas\" aria-hidden=\"true\"><\/canvas>\n  <div class=\"ff-vignette\"><\/div>\n  <div class=\"sig__inner\">\n    <p class=\"eyebrow reveal\">The Unapologetic Follow-Up<\/p>\n    <h1 class=\"split-words\">Zero F's <span class=\"brass\">Given<\/span><\/h1>\n    <p class=\"reveal\" style=\"color:var(--wp--preset--color--muted);max-width:40ch;margin:1.2rem auto 2rem\">Raw. Refined. Absolutely fearless.<\/p>\n    <div class=\"reveal\"><a class=\"btn\" href=\"?page_id=17\"><span>Get Zero F's Given<\/span><\/a><\/div>\n  <\/div>\n<\/section>\n\n<section class=\"sig sig-feature is-flipped reveal\">\n  <div class=\"sig__inner\">\n    <div class=\"wp-block-columns\">\n      <div class=\"wp-block-column copy\">\n        <p class=\"eyebrow reveal\">Lives Up To Its Name<\/p>\n        <h2 class=\"reveal\" data-reveal=\"right\">Five rare tobaccos. Four barely known.<\/h2>\n        <p class=\"reveal\">This cigar does not care about expectations. It breaks every rule without flinching. Raw, refined, and absolutely fearless.<\/p>\n      <\/div>\n      <div class=\"wp-block-column tilt reveal\" data-reveal=\"left\">\n        <div class=\"bleed-media\" style=\"border:1px solid var(--wp--preset--color--line);border-radius:12px;display:grid;place-items:center;color:var(--wp--preset--color--muted);font-family:var(--wp--preset--font-family--display);letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(160deg,#1a1410,#0c1116);aspect-ratio:4\/5\">Zero F's Given<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"sig sig-spec reveal\">\n  <div class=\"sig__inner\">\n    <div class=\"wp-block-columns\">\n      <div class=\"wp-block-column\">\n        <div class=\"spec-list\">\n          <p class=\"eyebrow\">The Blend<\/p>\n          <h3 style=\"margin:.4rem 0 1rem\">Medium-full<\/h3>\n          <dl>\n            <dt>Wrapper<\/dt><dd>Spanish Canary Island<\/dd>\n            <dt>Binder<\/dt><dd>Trinidad<\/dd>\n            <dt>Filler<\/dt><dd>Brazilian, Columbian, Argentinian<\/dd>\n            <dt>Strength<\/dt><dd>Medium-Full<\/dd>\n            <dt>Attitude<\/dt><dd>100% rebellion<\/dd>\n          <\/dl>\n        <\/div>\n      <\/div>\n      <div class=\"wp-block-column\">\n        <p class=\"reveal\"><strong style=\"color:var(--wp--preset--color--accent)\">Wildly unique.<\/strong> Four of the five leaves are so exotic most smokers have never met them. It tastes like nothing else in your humidor.<\/p>\n        <p class=\"reveal\"><strong style=\"color:var(--wp--preset--color--accent)\">Exotic depth.<\/strong> Layered, unpredictable, and refined enough that the strangeness reads as craft, not chaos.<\/p>\n        <p class=\"reveal\"><strong style=\"color:var(--wp--preset--color--accent)\">Fearless flair.<\/strong> A cigar that walks in like it owns the room, because it does.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"sig sig-statement reveal\">\n  <div class=\"sig__inner\">\n    <h2 class=\"reveal\">Attitude? <span class=\"brass\">100% rebellion.<\/span><\/h2>\n  <\/div>\n<\/section>\n\n<section class=\"sig sig-cta reveal\">\n  <div class=\"sig__inner\">\n    <h2 class=\"reveal\">Fearless by design.<\/h2>\n    <div class=\"reveal\" style=\"margin-top:1.5rem\"><a class=\"btn ghost\" href=\"?page_id=17\"><span>Get Zero F's Given<\/span><\/a> &nbsp; <a class=\"btn ghost\" href=\"?page_id=13\"><span>See No Quarter Given<\/span><\/a><\/div>\n  <\/div>\n<\/section>\n\n<footer class=\"ff-footer\">\n  <div class=\"brandmark\">FATHOM &amp; FURY CIGARS<\/div>\n  <div class=\"fl\"><a href=\"?page_id=13\">NQG<\/a><a href=\"?page_id=14\">ZFG<\/a><a href=\"?page_id=15\">Dessert Sea<\/a><a href=\"?page_id=16\">About<\/a><a href=\"?page_id=17\">Contact<\/a><\/div>\n  <p>Bold. Exotic. 100% Veteran Owned. Partnered with BAMF Cigars. Proud TPA member.<\/p>\n  <p class=\"age\">You must be 21 or older to purchase. Enjoy responsibly.<\/p>\n<\/footer>\n\n","protected":false},"excerpt":{"rendered":"<p>FATHOM &amp; FURY NQG ZFG Dessert Sea About Contact The Unapologetic Follow-Up Zero F&#8217;s Given Raw. Refined. Absolutely fearless. Get Zero F&#8217;s Given Lives Up To Its Name Five rare tobaccos. Four barely known. This cigar does not care about expectations. It breaks every rule without flinching. Raw, refined, and absolutely fearless. Zero F&#8217;s Given [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/worksite5.cc\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/worksite5.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/worksite5.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/worksite5.cc\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/worksite5.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":11,"href":"https:\/\/worksite5.cc\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":80,"href":"https:\/\/worksite5.cc\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/80"}],"wp:attachment":[{"href":"https:\/\/worksite5.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}