{"id":16,"date":"2026-08-12T01:36:41","date_gmt":"2026-08-12T01:36:41","guid":{"rendered":"https:\/\/worksite5.cc\/?page_id=16"},"modified":"2026-08-12T17:06:38","modified_gmt":"2026-08-12T17:06:38","slug":"about","status":"publish","type":"page","link":"https:\/\/worksite5.cc\/?page_id=16","title":{"rendered":"About"},"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\" style=\"min-height:82svh\">\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\">Forged By Veterans<\/p>\n    <h1 class=\"split-words\">Three branches. <span class=\"brass\">One mission.<\/span><\/h1>\n    <p class=\"reveal\" style=\"color:var(--wp--preset--color--muted);max-width:42ch;margin:1.4rem auto 2.2rem\">Born from the camaraderie of three U.S. veterans. A tribute to grit, loyalty, and fire.<\/p>\n    <div class=\"reveal\"><a class=\"btn\" href=\"?page_id=13\"><span>See The Cigars<\/span><\/a><\/div>\n  <\/div>\n<\/section>\n\n<section class=\"sig sig-statement reveal\">\n  <div class=\"sig__inner\">\n    <h2 class=\"reveal\">We don't just make cigars. We craft experiences grounded in <span class=\"brass\">tradition and rebellion.<\/span><\/h2>\n  <\/div>\n<\/section>\n\n<section class=\"sig sig-feature reveal\">\n  <div class=\"sig__inner\">\n    <div class=\"wp-block-columns\">\n      <div class=\"wp-block-column\">\n        <p class=\"eyebrow reveal\">The Brotherhood Behind The Brand<\/p>\n        <h2 class=\"reveal\" data-reveal=\"left\">We've walked the line, crossed the oceans, carried the weight.<\/h2>\n        <p class=\"reveal\">Coast Guard, Navy, and Army. Now we bring that same intensity to the craft of cigars. Every leaf tells a story, every puff reveals purpose.<\/p>\n      <\/div>\n      <div class=\"wp-block-column tilt reveal\" data-reveal=\"right\">\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,#182029,#0c1116);aspect-ratio:4\/5\">The Founders<\/div>\n      <\/div>\n    <\/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\">The Partnership<\/p>\n        <h2 class=\"reveal\" data-reveal=\"right\">Partnered with BAMF Cigars<\/h2>\n        <p class=\"reveal\">A veteran-owned powerhouse. Together we push past ordinary and deliver smoke that hits hard, lasts long, and leaves a mark.<\/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\">BAMF Cigars<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"sig sig-index reveal\">\n  <div class=\"sig__inner\">\n    <p class=\"eyebrow reveal\">What We Stand On<\/p>\n    <h2 class=\"reveal\">The code<\/h2>\n    <div class=\"reveal-stagger\" style=\"margin-top:2rem\">\n      <div class=\"idx-row\"><span class=\"idx-num\">01<\/span><h3>Discipline<\/h3><span style=\"color:var(--wp--preset--color--muted)\">Every blend engineered, nothing left to chance.<\/span><\/div>\n      <div class=\"idx-row\"><span class=\"idx-num\">02<\/span><h3>Risk<\/h3><span style=\"color:var(--wp--preset--color--muted)\">Rare tobaccos most brands would never dare.<\/span><\/div>\n      <div class=\"idx-row\"><span class=\"idx-num\">03<\/span><h3>Loyalty<\/h3><span style=\"color:var(--wp--preset--color--muted)\">To the brotherhood, always.<\/span><\/div>\n      <div class=\"idx-row\"><span class=\"idx-num\">04<\/span><h3>Fire<\/h3><span style=\"color:var(--wp--preset--color--muted)\">In every cigar we roll.<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"sig sig-cta reveal\">\n  <div class=\"sig__inner\">\n    <h2 class=\"reveal\">Excellence is who we are.<\/h2>\n    <div class=\"reveal\" style=\"margin-top:1.5rem\"><a class=\"btn ghost\" href=\"?page_id=17\"><span>Find Our Cigars<\/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 Forged By Veterans Three branches. One mission. Born from the camaraderie of three U.S. veterans. A tribute to grit, loyalty, and fire. See The Cigars We don&#8217;t just make cigars. We craft experiences grounded in tradition and rebellion. The Brotherhood Behind The Brand We&#8217;ve walked the [&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-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/worksite5.cc\/index.php?rest_route=\/wp\/v2\/pages\/16","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=16"}],"version-history":[{"count":11,"href":"https:\/\/worksite5.cc\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":82,"href":"https:\/\/worksite5.cc\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/82"}],"wp:attachment":[{"href":"https:\/\/worksite5.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}