/* ============================================================ STRATEGY PAGE (services/strategy-and-ai-audits/ only, after site.css and service-page.css). Built on James's approved copy (2026-10-18). Three beats, then the shared FAQ, the "case studies worth a look" row (site.css) and the CTA: 1 hero - the message, with the signature visual: a field of faint brand blocks (all the AI ideas) where four light cobalt and step into the logo's staircase (the plan, in order) 2 what you get - the example plan, art-directed as a printed report 3 how it works - the three steps The layout (Even split), the hero and "what you get" type and How it works (with its lab) are shared by every service page and live in service-page.css (svt- slots). The sq- rules here only style this page's own pieces: the block field and the plan document. The "before" states of the two once-only motions (hero field, plan document) apply only under html.sq-on (set by strategy-page.js) and without reduced motion, so with no script or reduced motion everything simply shows its finished state. The steps use the site's .rv. ============================================================ */ #site main { --sq-ink: #0B1B33; --sq-mu: #4A5A72; --sq-mu2: #607086; --sq-ln: rgba(11,27,51,.14); --sq-ln2: rgba(11,27,51,.08); --sq-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* the field's colours: an empty slot, an idea block, a plan block (swap them to put the field on navy) */ --sq-slot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='1' y='1' width='42' height='42' rx='3' fill='%230B1B33' fill-opacity='.02'/%3E%3C/svg%3E"); --sq-blk: var(--nvy); --sq-plan: var(--cb); } #site [class^="sq-"] ol { list-style: none; margin: 0; padding: 0; } /* ============ 1 HERO: the block field ============ */ /* the field: 10 x 8 cells (44px at full size; it scales to its slot), faint slots drawn as one tiled square, the ideas as navy blocks at their own faint opacities, the plan as four */ #site .sq-field { position: relative; width: min(100%, 440px); aspect-ratio: 10 / 8; container-type: inline-size; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 24%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 24%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); mask-composite: intersect; } #site .sq-fd { --c: 10cqi; position: absolute; left: 0; top: 0; width: calc(var(--c) * 10); height: calc(var(--c) * 8); background: var(--sq-slot) 0 0 / var(--c) var(--c); } #site .sq-fd i, #site .sq-fd b { position: absolute; left: calc(var(--x) * var(--c) + 1px); top: calc(var(--y) * var(--c) + 1px); width: calc(var(--c) - 2px); height: calc(var(--c) - 2px); border-radius: 3px; } /* finished state: the ideas step back, the plan stands in the staircase */ #site .sq-fd i { background: var(--sq-blk); opacity: calc(var(--o) * .6); } #site .sq-fd b { background: var(--sq-plan); opacity: var(--o); } #site .sq-fd b:first-of-type { box-shadow: 0 10px 22px -10px rgba(44,95,216,.7); } /* ============ 2 WHAT YOU GET: the plan document ============ */ /* the document: a front sheet over a second one fanned behind it */ #site .sq-doc { position: relative; container-type: inline-size; margin: 0; } #site .sq-sheet { border-radius: 3px; background: #fff; } #site .sq-back { position: absolute; inset: 0; background: #FBFCFE; border: 1px solid rgba(11,27,51,.07); box-shadow: 0 1px 2px rgba(11,27,51,.05), 0 24px 50px -30px rgba(11,27,51,.35); transform: translate(5.5%, 2.2%) rotate(3.2deg); transform-origin: 50% 100%; } #site .sq-front { position: relative; display: flex; flex-direction: column; aspect-ratio: 1 / 1.414; padding: 9cqi 9cqi 8cqi; border: 1px solid rgba(11,27,51,.08); box-shadow: 0 1px 1px rgba(11,27,51,.04), 0 2px 6px -2px rgba(11,27,51,.08), 0 40px 80px -36px rgba(11,27,51,.45); } /* a very soft fall of light across the paper */ #site .sq-front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,0) 40%, rgba(11,27,51,.022) 100%); } #site .sq-dtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #site .sq-dmark { display: inline-flex; align-items: center; gap: 2.4cqi; font-size: max(13px, 3.1cqi); font-weight: 600; letter-spacing: -.01em; color: var(--sq-ink); } #site .sq-dmark svg { width: max(18px, 4.6cqi); height: auto; fill: var(--sq-ink); } #site .sq-dtag { font-family: var(--sq-mono); font-size: max(12.5px, 2.75cqi); line-height: 1; text-transform: uppercase; letter-spacing: .03em; color: var(--sq-mu2); padding: 1.5cqi 2.2cqi; border: 1px solid var(--sq-ln); border-radius: 100px; } #site .sq-dcover { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6cqi; padding: 8cqi 0 6cqi; } /* the cover art: the hero's field, small - the faint ideas, and the plan as the cobalt staircase (rows 2 to 5 of the hero's field) */ #site .sq-dart { --c: 8.2cqi; position: relative; display: block; width: calc(var(--c) * 10); height: calc(var(--c) * 4); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='2' y='2' width='40' height='40' rx='3' fill='%230B1B33' fill-opacity='.025'/%3E%3C/svg%3E") 0 0 / var(--c) var(--c); } #site .sq-dart i { position: absolute; left: calc(var(--x) * var(--c) + .4cqi); top: calc((var(--y) - 2) * var(--c) + .4cqi); width: calc(var(--c) - .8cqi); height: calc(var(--c) - .8cqi); border-radius: .6cqi; background: var(--nvy); opacity: calc(var(--o) * .6); } #site .sq-dart i.p { background: var(--cb); opacity: var(--o); } #site .sq-dcover h3 { margin: 0; max-width: 11ch; font-size: max(26px, 9cqi); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; color: var(--sq-ink); text-wrap: balance; } #site .sq-dtoc { padding-top: 4.6cqi; border-top: 1px solid var(--sq-ink); } #site .sq-dk { margin: 0 0 2cqi; font-family: var(--sq-mono); font-size: max(12.5px, 2.75cqi); text-transform: uppercase; letter-spacing: .03em; color: var(--sq-mu2); } #site .sq-dtoc li { display: grid; grid-template-columns: max(26px, 7.4cqi) minmax(0, 1fr) auto; align-items: center; gap: 2cqi; padding: 3.1cqi 0; border-bottom: 1px solid var(--sq-ln2); } #site .sq-dtoc li:last-child { border-bottom: 0; padding-bottom: 0; } #site .sq-dn { font-family: var(--sq-mono); font-size: max(12.5px, 2.75cqi); color: var(--cb); } #site .sq-dt { font-size: max(14px, 3.75cqi); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--sq-ink); } /* a hint of each section, in blocks: the work as it runs, where AI helps (one cobalt), what to leave alone (outlines), what to do first (the steps) */ #site .sq-gl { position: relative; display: flex; align-items: center; gap: .9cqi; height: 3.6cqi; } #site .sq-gl i { display: block; width: max(7px, 1.8cqi); height: max(7px, 1.8cqi); border-radius: 1.5px; background: var(--nvy); opacity: .22; } #site .sq-gl2 i:nth-child(3) { background: var(--cb); opacity: 1; } #site .sq-gl3 i { background: none; border: 1px solid rgba(11,27,51,.38); opacity: 1; } #site .sq-gl4 { align-items: flex-start; } #site .sq-gl4 i { background: var(--cb); opacity: 1; } #site .sq-gl4 i:nth-child(2) { margin-top: .6cqi; opacity: .74; } #site .sq-gl4 i:nth-child(3) { margin-top: 1.2cqi; opacity: .5; } #site .sq-gl4 i:nth-child(4) { margin-top: 1.8cqi; opacity: .32; } @media (max-width: 900px) { /* the field cropped to the five rows the plan moves in */ #site .sq-field { aspect-ratio: 10 / 5; -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 88%, transparent); } #site .sq-fd { top: calc(var(--c) * -2); } } /* ============ the two once-only motions ============ */ @media (prefers-reduced-motion: no-preference) { /* hero: the four plan blocks light up cobalt one by one, then step into the staircase in order, while the other ideas step back */ html.sq-on #site .sq-hero .sq-fd i { opacity: var(--o); } html.sq-on #site .sq-hero .sq-fd b { background: var(--sq-blk); opacity: .13; box-shadow: none; translate: calc((var(--sx) - var(--x)) * var(--c)) calc((var(--sy) - var(--y)) * var(--c)); } html.sq-on #site .sq-hero.sq-in .sq-fd i { opacity: calc(var(--o) * .6); transition: opacity 1s ease 1.5s; } html.sq-on #site .sq-hero.sq-in .sq-fd b { background: var(--sq-plan); opacity: var(--o); translate: 0 0; transition: background-color .5s ease, opacity .5s ease, translate 1.05s cubic-bezier(.65,0,.25,1), box-shadow .6s ease; transition-delay: calc(.35s + var(--i) * .2s), calc(.35s + var(--i) * .2s), calc(1.3s + var(--i) * .14s), 2.2s; } html.sq-on #site .sq-hero.sq-in .sq-fd b:first-of-type { box-shadow: 0 10px 22px -10px rgba(44,95,216,.7); } /* the plan: the document rises in and the second sheet fans out behind it */ html.sq-on #site .sq-get .sq-front { opacity: 0; translate: 0 22px; } html.sq-on #site .sq-get .sq-back { opacity: 0; transform: translate(0, 3%) rotate(0); } html.sq-on #site .sq-get.sq-in .sq-front { opacity: 1; translate: 0 0; transition: opacity .7s ease, translate .9s cubic-bezier(.16,.6,.18,1); } html.sq-on #site .sq-get.sq-in .sq-back { opacity: 1; transform: translate(5.5%, 2.2%) rotate(3.2deg); transition: opacity .5s ease .35s, transform 1.1s cubic-bezier(.2,.7,.2,1) .35s; } }