@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/manrope-0.ttf) format('truetype'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/manrope-1.ttf) format('truetype'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/manrope-2.ttf) format('truetype'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/manrope-3.ttf) format('truetype'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/manrope-4.ttf) format('truetype'); } /* ============================================================================ scrollcraft.css: the taste floor ---------------------------------------------------------------------------- Two layers, and the split matters: TOKENS what you override per brand. Colour roles, the type ramp, the spacing scale, elevation, motion. A brand is ~12 values. DEVICES what the engine drives. Do not restyle these to taste; they are the mechanism. Style your own markup instead. Nothing here draws a "component". There are no card, badge, or pill classes, because a stylesheet that ships those is how every page built on it ends up with the same shapes. You get a floor and a vocabulary; the composition is yours. ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ :root { /* --- colour roles. Override these six and the page is rebranded. -------- */ --sc-canvas: #08090b; /* the page ground. Drift interpolates this. */ --sc-surface: #101217; /* anything raised off the ground */ --sc-ink: #f4f2ef; /* primary text */ --sc-ink-soft: #9a9ba1; /* secondary text. Tinted, never flat gray. */ --sc-accent: #d8ff3e; /* ONE accent. It owns a region, not confetti. */ --sc-accent-ink: #08090b; /* text that sits on the accent */ --sc-hairline: color-mix(in oklab, var(--sc-ink) 12%, transparent); --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent); /* --- type. Two families max. Display carries voice, text carries prose. - */ --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif; --sc-font-text: "Geist", system-ui, sans-serif; --sc-font-mono: "Geist Mono", ui-monospace, monospace; /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem with 0 tracking reads loose; this is optical correction, not decoration. */ --sc-t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --sc-t-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem); --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); --sc-t-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --sc-t-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem); --sc-t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); --sc-t-3xl: clamp(2.8rem, 1.9rem + 4.2vw, 5rem); --sc-t-4xl: clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem); --sc-track-tight: -0.035em; --sc-track-snug: -0.02em; --sc-track-normal: -0.005em; --sc-track-wide: 0.08em; --sc-leading-none: 0.94; --sc-leading-tight: 1.06; --sc-leading-body: 1.62; --sc-measure: 62ch; /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */ --sc-1: 0.25rem; --sc-2: 0.5rem; --sc-3: 0.75rem; --sc-4: 1rem; --sc-5: 1.5rem; --sc-6: 2rem; --sc-7: 3rem; --sc-8: 4rem; --sc-9: 6rem; --sc-10: 8rem; --sc-11: 12rem; /* Section rhythm is fluid so a phone doesn't inherit desktop air. */ --sc-section: clamp(4.5rem, 9vw, 11rem); --sc-gutter: clamp(1.25rem, 5vw, 5.5rem); --sc-maxw: 82rem; /* --- radius. Pick one scale for the page and hold it. ------------------- */ --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-r-pill: 999px; /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted to the canvas hue. A zero-offset coloured halo is decoration, not depth, so there isn't one here. ---------------------------------- */ --sc-shadow-color: 220 40% 2%; --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20); --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30); --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38), 0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30); /* Edge light: a 1px top highlight sells a raised surface better than any amount of blur, because real raised things catch light on their lip. */ --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent); /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */ --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --sc-d-fast: 160ms; --sc-d-base: 240ms; --sc-d-slow: 420ms; --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60; } /* --------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); letter-spacing: var(--sc-track-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis-weight: none; overflow-x: clip; } img, video, canvas, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } /* ------------------------------------------------- the browser surfaces -- The parts you did not draw still carry the design. Selection, caret, focus ring, scrollbar and tabular numerals all ship with defaults that belong to no design system. Theming them is the cheapest signal that a page was built rather than assembled, and it is the step that gets skipped most reliably. */ ::selection { background: var(--sc-accent); color: var(--sc-accent-ink); } :root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); } :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--sc-r-sm); } :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } @supports (scrollbar-color: auto) { html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; } } :where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------- typography -- */ .sc-display { font-family: var(--sc-font-display); font-weight: 500; line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); text-wrap: balance; margin: 0; } .sc-display--xl { font-size: var(--sc-t-4xl); } .sc-display--lg { font-size: var(--sc-t-3xl); } .sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); } .sc-lede { font-size: var(--sc-t-lg); line-height: 1.44; letter-spacing: var(--sc-track-snug); color: var(--sc-ink); max-width: 46ch; text-wrap: pretty; margin: 0; } .sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; } .sc-label { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); } /* ---------------------------------------------------------------- layout -- */ .sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); } .sc-section { padding-block: var(--sc-section); } /* More space above a heading than below it: the gap belongs to the boundary, not to the pair. */ .sc-stack > * + * { margin-top: var(--sc-4); } .sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); } .sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; } .sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; } /* =============================================================== DEVICES == Driven by the engine. Restyle your own markup, not these. */ .sc-act--pinned { position: relative; } .sc-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: var(--sc-z-stage); } /* scrub / sequence media */ .sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); } .sc-has-clip video[data-sc-scrub] { opacity: 1; } /* The poster is a live frame-holder, not a placeholder: it stays up until a real video frame has painted, which is what stops the blank-stage flash. */ .sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); } .sc-has-clip .sc-stage__poster { opacity: 0; } /* A scrim only where text sits. A full-frame darkening layer flattens the image everywhere to fix contrast in one corner. */ .sc-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( var(--sc-scrim-angle, 180deg), color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 68%); } /* Point the scrim at the copy. A scrim gradient that darkens the top while the copy sits at the bottom fixes contrast nowhere and flattens the image everywhere, which is the most common way text-over-video goes wrong. */ .sc-scrim--bottom { --sc-scrim-angle: 0deg; } .sc-scrim--left { --sc-scrim-angle: 90deg; } .sc-scrim--right { --sc-scrim-angle: 270deg; } /* Corner scrims, for copy anchored to a corner. An edge gradient has to darken a whole band across the frame to cover one corner; a corner gradient puts the density where the text is and leaves the rest of the image alone. Pair with .sc-copy--lead / .sc-copy--trail. */ .sc-scrim--lead { background: linear-gradient(to top right, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%); } .sc-scrim--trail { background: linear-gradient(to top left, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%); } /* A band across the bottom, for copy that spans the full width of the frame. That is what both corner anchors become below 860px, and it is also the right shape whenever the copy block is wider than a corner. */ .sc-scrim--band { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } .sc-scrim--vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 40%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%); } /* copy over a stage. max-width is in rem, never ch. A `ch` on this container resolves against the CONTAINER's font-size (body size), not the display size of the heading inside it, so `max-width: 20ch` here silently produces a ~180px column and wraps a hero headline to six lines. Set a ch measure on the text element itself. */ .sc-copy { position: absolute; z-index: var(--sc-z-copy); inset-inline: var(--sc-gutter); max-width: min(46rem, 76vw); will-change: opacity, transform; } .sc-copy--lead { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); } /* inset-inline FIRST. It is the shorthand for left+right, so declaring it after `left: 50%` resets left to auto and the block drifts off the left edge. */ .sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; } .sc-copy--trail { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; } /* cue defaults: the engine writes opacity/transform inline, these are the pre-paint state so nothing flashes before the first read() */ [data-sc-cue] { opacity: 0; will-change: opacity, transform; } .sc-ready [data-sc-cue] { transition: none; } /* kinetic split */ .sc-split { display: inline-block; overflow: hidden; vertical-align: top; } /* Descenders live below the baseline; a line mask clipped to the line box eats the tails off g, y, p, j. The padding buys them room back. */ .sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; } .sc-split__i { display: inline-block; will-change: transform, opacity; } .sc-is-split { opacity: 1 !important; } /* horizontal rail */ [data-sc-pan] { display: flex; will-change: transform; } /* reveal + parallax */ [data-sc-reveal] { will-change: clip-path; } [data-sc-parallax] { will-change: transform; } /* flow reveal (fires once) */ [data-sc-in], [data-sc-stagger] > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out); } [data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; } /* pointer devices */ [data-sc-tilt] { transform-style: preserve-3d; will-change: transform; } [data-sc-magnet] { will-change: transform; } /* isolation always; position only if nothing more specific already set it. Written with :where() (zero specificity) on purpose: a plain `position: relative` here has the same weight as `.sc-stage` and, being later in the file, silently wins. A stage carrying both attributes then stops being sticky and the whole act scrolls away instead of pinning. */ [data-sc-spotlight] { isolation: isolate; } :where([data-sc-spotlight]) { position: relative; } [data-sc-spotlight]::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient( 28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%); opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out); } [data-sc-spotlight]:hover::after { opacity: 1; } /* =========================================================== WORLDFLIGHT == One fixed stage for the whole page. The only thing in document flow is the spacer, and it is empty. If you find yourself adding a section here, you want act mode instead: the moment a real block scrolls past the fixed stage, the page has a seam again and the whole point is gone. */ [data-sc-mode="worldflight"] { position: relative; } .sc-world { position: fixed; inset: 0; overflow: clip; z-index: var(--sc-z-stage); background: var(--sc-canvas); } /* Every leg is mounted for the life of the page and stacked in the same box. The engine owns opacity, visibility and z-index here; do not set them. */ .sc-world__seg { position: absolute; inset: 0; opacity: 0; will-change: opacity; } .sc-world__seg > :is(video, img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The poster is the frame-holder AND the first camera move: the engine pushes it in slowly until a real decoded frame is available to replace it. */ .sc-world__poster { z-index: 0; transform-origin: 50% 50%; transition: opacity 420ms var(--sc-ease-out); } .sc-world__seg > video { z-index: 1; } .sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; } /* The act stylesheet lights a clip through its ancestor act. A worldflight leg has no act, so match the class the engine also writes on the clip itself. */ video[data-sc-scrub].sc-has-clip { opacity: 1; } /* The copy layer is fixed too, and inert by default: the engine hands pointer-events back to a block only while it is actually legible. */ .sc-world__copy { position: fixed; inset: 0; z-index: var(--sc-z-copy); pointer-events: none; } .sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; } [data-sc-copy] { opacity: 0; pointer-events: none; will-change: opacity, transform; } .sc-ready [data-sc-copy] { transition: none; } /* The track. Empty on purpose. */ .sc-world__spacer { pointer-events: none; } /* scroll progress */ [data-sc-progress] { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome); background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; } /* ----------------------------------------------------------- atmosphere -- Depth is not only shadow. Grain keeps a flat dark ground from banding, and it is the difference between "a dark page" and "a lit room". */ .sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; } .sc-grain::before { content: ""; position: absolute; inset: -50%; background-image: url("data:image/svg+xml;utf8,"); } /* -------------------------------------------------------- reduced motion -- */ @media (prefers-reduced-motion: reduce) { /* Fewer and gentler, not zero. Opacity still carries the reveal so the page is comprehensible; every position change is dropped. */ [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; } [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; } /* A wipe is a position change too. Show reveal content settled. */ [data-sc-reveal] { clip-path: none !important; } /* A rail's transform IS its navigation, not decoration. Zeroing it the way parallax and kinetic type are zeroed parks the act on its first screenful and makes everything past the fold unreachable: a device degrading into missing content. Hand the travel back to the reader as an ordinary scroll region instead, so the same items are all still gettable without motion. A build that would rather re-lay the rail out as a grid can still do that; this is the floor, not the ceiling. */ [data-sc-act="pan"] .sc-stage, [data-sc-act="pan"] [data-sc-stage] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } [data-sc-pan] > * { scroll-snap-align: center; } [data-sc-spotlight]::after { display: none; } /* A worldflight keeps its whole story here. No clip is ever fetched, so the posters are the film, and they cross-dissolve through exactly the same seams at exactly the same scroll positions. The push-in and the copy drift are the only things that go. */ .sc-world__poster, [data-sc-copy] { transform: none !important; } } /* --------------------------------------------------------------- mobile -- */ @media (max-width: 860px) { .sc-copy { inset-inline: var(--sc-gutter); max-width: none; } .sc-copy--trail { text-align: left; } .sc-stage { height: 100svh; } /* .sc-copy--trail re-anchors to the left and spans the full width here, so a bottom-RIGHT corner gradient darkens the one corner the copy just left and guarantees a contrast failure over any bright clip. Point the density at the copy: the same band .sc-scrim--band paints. */ .sc-scrim--trail { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} [data-menu][hidden]{display:none!important} .skip{position:fixed;top:12px;left:12px;z-index:100;padding:12px 20px;background:#fff;color:#121724;transform:translateY(-150%)}.skip:focus{transform:none} button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}a,button,input,select,summary{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid currentColor} button{font:inherit}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}h1,h2,h3,p,figure{margin-top:0}section[id]{scroll-margin-top:32px}a{text-underline-offset:.22em}img{height:auto} html:not(.sc-ready) [data-sc-cue],html:not(.sc-ready) [data-sc-in],html:not(.sc-ready) [data-sc-stagger]>*{opacity:1;transform:none} .review-dialog{width:min(620px,calc(100% - 32px));max-height:90svh;overflow:auto;border:0;border-radius:8px;padding:clamp(24px,5vw,48px);background:var(--dialog-bg,#f7f8fa);color:var(--dialog-ink,#132038);box-shadow:0 24px 80px #0b0f2340}.review-dialog::backdrop{background:#101323a8}.review-dialog h2{font-family:var(--sc-font-display);font-size:clamp(1.875rem,5vw,2.75rem);line-height:1.1;font-weight:500;margin:24px 0 16px}.review-dialog p{font-size:.9375rem;line-height:1.65;max-width:55ch}.dialog-close{display:block;margin-left:auto;background:none;border:0;min-height:44px;padding:8px;text-decoration:underline}.review-dialog label{display:block;margin:20px 0 8px;font-size:.875rem;font-weight:600}.review-dialog input,.review-dialog select{width:100%;border:1px solid #788493;border-radius:2px;background:transparent;padding:12px;font-size:1rem}.review-dialog .download{margin-top:28px;background:var(--dialog-ink,#132038);color:var(--dialog-bg,#f7f8fa);border:0;padding:16px 24px;min-height:48px;border-radius:2px}.review-dialog .status{min-height:1.6em;margin:16px 0 0;font-size:.875rem}.review-dialog .context{padding:14px 0;border-block:1px solid #b5bfcc;font-size:.875rem;white-space:pre-line}.local-note{font-size:.8125rem!important;opacity:.85} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}[data-sc-in],[data-sc-cue],[data-sc-stagger]>*{opacity:1!important;transform:none!important}[data-sc-parallax]{transform:none!important}[data-sc-reveal]{clip-path:none!important}} :root{--sc-canvas:#f7f9fc;--sc-surface:#eaf0fb;--sc-ink:#142744;--sc-ink-soft:#4b5a72;--sc-accent:#164de5;--sc-accent-ink:#fff;--sc-font-display:'Manrope',sans-serif;--sc-font-text:'Manrope',sans-serif;--g:clamp(24px,4.4vw,80px);--dialog-ink:#142744;--dialog-bg:#f7f9fc}body{font-weight:450}a{text-decoration:none}p{line-height:1.7}h1,h2,h3{font-weight:500;letter-spacing:-.04em}h2{font-size:clamp(2.375rem,4.8vw,4.5rem);line-height:1.08}h3{line-height:1.2}.ap-header{padding:28px var(--g);display:flex;align-items:center;justify-content:space-between;min-height:110px}.ap-brand{display:flex;align-items:center;gap:14px;font-size:1.0625rem;line-height:1.12;font-weight:650;letter-spacing:-.04em}.ap-mark{flex:none;height:2.25em;aspect-ratio:34/37;background:var(--sc-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 3 34 37'%3E%3Cpath d='M4 3h29v6H10v25h23v6H4zM31 12l7-3v24l-7 3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 3 34 37'%3E%3Cpath d='M4 3h29v6H10v25h23v6H4zM31 12l7-3v24l-7 3z'/%3E%3C/svg%3E") center/contain no-repeat}.ap-header nav{display:flex;align-items:center;gap:36px;font-size:.8125rem;font-weight:600}.nav-cta{padding:15px 20px;border:1px solid #b5c1d3;border-radius:2px}.nav-cta span{margin-left:22px}.menu-button{background:none;border:1px solid;padding:10px 16px}.ap-hero{min-height:min(830px,calc(100svh - 110px));padding:48px var(--g) 88px;position:relative;isolation:isolate;overflow:clip}.hero-copy{position:relative;z-index:3;width:47%}.hero-copy h1{font-size:clamp(4.25rem,7.3vw,7rem);line-height:1.01;margin-bottom:30px;letter-spacing:-.045em}.hero-copy h1 span{color:#164de5}.hero-summary{font-size:.9375rem;margin-bottom:27px}.ap-link{display:inline-flex;align-items:center;gap:var(--tv-link-gap);font-size:.9375rem;font-weight:650;text-decoration:none;padding:10px 0}.ap-link>span{font-size:1.125rem;line-height:1}.hero-art{position:absolute;z-index:1;left:46%;right:0;top:34px;bottom:86px;margin:0;background:#d9e6f1;overflow:hidden}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:61% 50%;transform:scale(calc(1.08 - var(--open,0)*.08))}.art-mat{position:absolute;top:0;bottom:0;background:#f7f9fc;width:10%;transition:none}.mat-left{left:0;transform:translateX(calc(var(--open,0)*-102%))}.mat-right{right:0;transform:translateX(calc(var(--open,0)*102%))}.art-edge{position:absolute;inset:calc(25px - 27px*var(--open,0)) calc((10% + 25px)*(1 - var(--open,0)) - 2px*var(--open,0));border:1px solid #fff9;pointer-events:none}.hero-art figcaption{position:absolute;right:36px;bottom:32px;background:#f7f9fc;color:#142744;padding:12px 18px;font-size:.75rem}.hero-bottom{position:absolute;bottom:25px;left:var(--g);right:var(--g);display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;letter-spacing:.01em}.perspective{padding:125px var(--g) 130px;display:grid;grid-template-columns:1fr 2fr;gap:8vw;background:#fff}.margin-note{font-size:.75rem;line-height:1.8}.perspective h2{max-width:800px;margin-bottom:36px}.perspective p:not(.margin-note){font-size:1.0625rem;max-width:57ch;color:#4b5a72}.lens-act{background:#e8eef8}.lens-stage{display:grid;grid-template-columns:.9fr 1.1fr;gap:8%;padding:70px var(--g);align-items:center;min-height:800px}.lens-heading h2{font-size:clamp(2.1875rem,4vw,3.625rem);margin-bottom:22px}.lens-heading>p:not(.margin-note){font-size:.875rem;max-width:38ch}.lens-controls{display:flex;flex-direction:column;margin:28px 0 16px;max-width:420px}.lens-controls button{display:flex;align-items:center;justify-content:space-between;text-align:left;border:0;border-top:1px solid #b6c5da;padding:17px 0;background:transparent;color:#43556f;font-size:1rem}.lens-controls button[aria-pressed=true]{color:#164de5;font-weight:700}.lens-controls button span{font-size:1.5rem}.lens-explainer{min-height:72px;color:#334863}.example-frame{background:#fff;position:relative;transform:perspective(1200px) rotateY(calc((1 - var(--lens-open,1))*-8deg));box-shadow:15px 20px 0 #d6e0f1;max-width:580px;margin-inline:auto;width:100%}.example-top{display:flex;justify-content:space-between;padding:26px 32px;border-bottom:1px solid #e2e6eb;font-size:.75rem}.example-top>span:last-child{color:#31746b;font-size:1.25rem}.example-content{padding:22px 32px 12px}.example-fit{padding:20px 16px}.example-overline{font-size:.6875rem;color:#40665f}.example-fit h3{font-size:clamp(1.875rem,3.4vw,3rem);font-weight:500;margin:14px 0 18px}.example-fit p{font-size:.8125rem;line-height:1.65;margin:0}.example-details,.example-next{padding:18px 16px;position:relative}.example-details>span,.example-next>span{font-size:.6875rem;color:#51655f}.example-details p,.example-next p{font-size:.8125rem;margin:6px 0;line-height:1.55}.example-cta{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:12px 16px;background:#28665d;color:#fff!important;font-size:.6875rem!important}.focus-region{border:1px solid transparent;transition:background .3s,border-color .3s;opacity:.72}.focus-region.is-focused{border-color:#759cec;background:#eef4ff;opacity:1}.example-caption{padding:10px 32px 20px;font-size:.625rem;color:#5d6a7f;margin:0}.lens-corner{position:absolute;width:28px;height:28px;pointer-events:none;border-color:#164de5}.corner-a{left:-13px;top:-13px;border-top:2px solid;border-left:2px solid;transform:translate(calc(var(--lens-open,1)*-8px),calc(var(--lens-open,1)*-8px))}.corner-b{bottom:-13px;right:-13px;border-bottom:2px solid;border-right:2px solid;transform:translate(calc(var(--lens-open,1)*8px),calc(var(--lens-open,1)*8px))}.work-sheet{padding:110px var(--g) 56px;background:#164de5;color:#fff}.sheet-title{display:grid;grid-template-columns:.5fr 1.6fr 1fr;gap:30px;align-items:start;margin-bottom:70px}.mini-mark{width:46px;height:62px;border:8px solid #fff;border-right:0}.sheet-title h2{font-size:clamp(2.625rem,5.4vw,4.875rem);margin:0}.sheet-title p{font-size:.875rem;margin-top:12px}.service-rows{margin-left:18%}.service-rows article{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:38px 0 42px;border-top:1px solid #89a7fa}.service-rows h3{font-size:clamp(1.6875rem,3vw,2.5rem);margin:0}.service-rows p{font-size:.9375rem;max-width:53ch;margin-bottom:24px}.service-rows span{font-size:.6875rem;color:#e1eaff}.sheet-fine{font-size:.6875rem;margin:45px 0 0 18%;max-width:80ch;color:#e1eaff}.person-section{padding:132px var(--g);display:grid;grid-template-columns:1.2fr 1fr;gap:10%}.person-title h2{font-size:clamp(2.3125rem,4.4vw,3.9375rem);margin-top:45px}.person-copy{padding-top:70px}.person-copy>p{font-size:.9375rem;max-width:49ch}.person-name{font-size:1.375rem!important;line-height:1.6}.person-name span{font-size:.75rem;color:#5e6b7e}.process-line{display:flex;justify-content:space-between;border-top:1px solid #b5c2d4;margin-top:40px;padding-top:15px;font-size:.6875rem}.investment{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6%;padding:88px var(--g) 48px;background:#fff}.investment-heading h2{font-size:clamp(2.3125rem,4vw,3.625rem)}.investment-heading p{font-size:.8125rem}.investment-main{border-top:2px solid #164de5;padding-top:24px}.plan-name{font-size:.875rem;font-weight:650}.price{font-size:4.25rem;letter-spacing:-.05em;line-height:1.3;margin-top:24px}.price span{display:inline-block;font-size:.8125rem;letter-spacing:0;margin-left:8px}.monthly{font-size:1.375rem;margin-bottom:28px}.investment-main>p:not(.monthly){font-size:.8125rem;line-height:1.8}.investment-extras article{border-top:1px solid #c1cada;padding:20px 0 10px}.investment-extras h3{font-size:1.0625rem;margin:0 0 8px;letter-spacing:-.02em}.investment-extras p{font-size:.75rem}.scope-details{grid-column:2/4;font-size:.75rem;border-top:1px solid #c1cada;margin-top:30px;padding-top:16px}.scope-details summary{cursor:pointer;min-height:40px}.scope-details p{max-width:80ch;margin-top:16px}.ap-close{padding:100px var(--g) 0;position:relative;isolation:isolate;overflow:clip;min-height:730px}.ap-close>p:first-of-type{font-size:.8125rem;margin-bottom:32px}.ap-close h2{font-size:clamp(3.75rem,7.3vw,6.75rem);line-height:1.05;position:relative;z-index:2}.ap-close h2 em{font-style:normal;color:#164de5}.close-frame{position:absolute;right:8%;top:80px;width:29%;height:490px;border:38px solid #164de5;transform:perspective(800px) rotateY(-24deg) rotateZ(7deg);z-index:1}.ap-button{display:inline-flex;justify-content:space-between;align-items:center;gap:18px;box-sizing:border-box;min-height:var(--tv-button-h);border:0;background:#164de5;color:#fff;padding:12px 20px;font-size:.9375rem;font-weight:600;position:relative;z-index:2}.ap-close .local-note{margin-top:18px}.ap-close footer{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #b5c2d4;margin-top:80px;padding:30px 0;font-size:.6875rem;position:relative}.footer-wordmark{font-size:1rem;font-weight:700}.natural-stage .lens-stage{min-height:0;height:auto;position:static}.natural-stage .example-frame{transform:none}.natural-stage .lens-corner{transform:none} @media(forced-colors:active){.ap-mark{background:CanvasText;forced-color-adjust:none}} @media(min-width:1600px){.ap-hero{max-height:900px}.hero-art{left:49%}} @media(max-width:1000px){.ap-header nav{gap:19px}.ap-header nav>a{font-size:.75rem}.ap-hero{padding-top:32px}.hero-copy h1{font-size:clamp(3.875rem,8.1vw,5.625rem)}.lens-stage{gap:5%;padding:55px var(--g);min-height:720px}.example-content{padding:18px}.example-top{padding:20px}.sheet-title{grid-template-columns:.3fr 1.2fr 1fr}.service-rows{margin-left:0}.sheet-fine{margin-left:0}.investment{gap:4%}.close-frame{right:7%;width:30%}} @media(max-width:760px){.ap-header{padding:22px 24px;min-height:84px;flex-wrap:wrap;gap:24px}.ap-brand{font-size:.9375rem}.ap-mark{height:2.125em}.ap-header nav{flex-basis:100%;gap:16px;flex-wrap:wrap;padding-top:10px}.enhanced .ap-header nav{display:none}.enhanced .ap-header nav.is-open{display:flex}.ap-header .nav-cta{padding:10px 0;border:0}.ap-hero{padding:22px 24px 0;min-height:0;display:flex;flex-direction:column}.hero-copy{width:100%}.hero-copy h1{font-size:clamp(3.6875rem,14vw,5.75rem);line-height:1.03;margin-bottom:22px}.hero-copy h1 br:nth-child(2){display:none}.hero-summary{font-size:.875rem;line-height:1.65}.hero-copy .ap-link{font-size:.75rem;padding-bottom:8px;margin-bottom:34px}.hero-art{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:calc(100% + 48px);margin-left:-24px;height:340px}.hero-art img{object-position:62% 55%;transform:none}.art-mat{width:4%;background:#f7f9fc}.art-edge{inset:calc(18px - 20px*var(--open,0)) calc((4% + 18px)*(1 - var(--open,0)) - 2px*var(--open,0))}.hero-art figcaption{bottom:18px;right:22px;font-size:.625rem;padding:8px 12px}.hero-bottom{position:static;font-size:.5625rem;padding:18px 0;gap:18px}.perspective{display:block;padding:65px 24px 62px}.perspective .margin-note{margin-bottom:30px}.perspective h2{font-size:2.625rem;margin-bottom:28px}.perspective p:not(.margin-note){font-size:.9375rem}.lens-stage{display:flex;flex-direction:column;gap:36px;padding:52px 24px 68px;min-height:0!important;height:auto!important}.lens-heading{width:100%}.lens-heading h2{font-size:2.4375rem}.lens-controls{margin:25px 0 12px;max-width:100%}.lens-controls button{font-size:.875rem;padding:12px 0}.lens-explainer{min-height:42px}.example-frame{max-width:510px;margin:0 8px;width:calc(100% - 16px)}.example-fit h3{font-size:2.375rem}.example-fit{padding:16px}.work-sheet{padding:64px 24px 40px}.sheet-title{display:block;margin-bottom:38px}.mini-mark{display:none}.sheet-title h2{font-size:3rem}.sheet-title p{font-size:.8125rem;margin-top:24px}.service-rows article{display:block;padding:28px 0 30px}.service-rows h3{font-size:1.875rem;margin-bottom:20px}.service-rows p{font-size:.875rem}.service-rows span{font-size:.625rem}.sheet-fine{margin-top:24px}.person-section{display:block;padding:64px 24px}.person-title h2{font-size:2.4375rem;margin-top:24px}.person-copy{padding-top:16px}.person-copy>p{font-size:.875rem}.investment{display:block;padding:60px 24px 40px}.investment-heading h2{font-size:2.6875rem}.investment-heading{margin-bottom:40px}.investment-main{padding-bottom:45px}.price{font-size:4.625rem}.investment-extras article{padding:24px 0 14px}.investment-extras p{font-size:.875rem}.scope-details{margin-top:24px}.ap-close{padding:65px 24px 0;min-height:0}.ap-close h2{font-size:clamp(3.125rem,12.5vw,5.125rem);max-width:80%;margin-bottom:40px}.close-frame{border-width:18px;width:115px;height:225px;right:-47px;top:152px}.ap-button{padding:12px 18px}.ap-close .local-note{max-width:33ch;font-size:.6875rem!important}.ap-close footer{flex-wrap:wrap;justify-content:flex-start;margin-top:58px;padding:25px 0;gap:16px;font-size:.625rem}.ap-close footer span{flex-basis:100%;order:3}.ap-close footer>a:last-child{margin-left:auto}.footer-wordmark{font-size:.875rem}} @media(prefers-reduced-motion:reduce){.hero-art img,.art-mat,.art-edge,.example-frame,.lens-corner{transform:none!important}.lens-act{height:auto!important}.lens-stage{height:auto;min-height:0;position:static}} .menu-button{display:none}.focus-region{opacity:1}.hero-copy h1{letter-spacing:-.04em} @media(max-width:760px){.menu-button{display:block}.hero-copy h1{font-size:clamp(3rem,13.1vw,5.25rem)}.hero-art{transform:none!important}} /* Aperture: September 2026 service and hierarchy refinement. */ .ap-header nav{gap:clamp(18px,2.2vw,32px);font-size:.875rem} .ap-header nav a[aria-current=page]{color:var(--sc-accent);text-decoration:underline;text-underline-offset:7px} .ap-header nav .nav-cta[aria-current=page]{text-decoration:none;border-color:var(--sc-accent)} .hero-copy h1{font-size:clamp(4.25rem,6.4vw,6rem);letter-spacing:-.04em}.hero-summary{font-size:1.0625rem;line-height:1.65;max-width:37ch} .hero-copy .ap-link{font-size:.875rem} .ap-hero{padding-bottom:50px}.hero-art{bottom:42px} .ap-close h2{font-size:clamp(3.5rem,7vw,6rem)} .ap-close footer nav{display:flex;gap:24px;flex-wrap:wrap;font-size:.875rem} .ap-close footer>span{font-size:.75rem} .ap-close .local-note{max-width:51ch;font-size:.875rem!important;opacity:1;color:var(--sc-ink-soft)} .sheet-title{grid-template-columns:.35fr 2.5fr} .service-rows{margin-left:14%}.service-rows article{grid-template-columns:.85fr 1.15fr} .service-rows p{font-size:1.0625rem;line-height:1.7}.service-rows .service-inclusion{font-size:.9375rem;color:#e9efff} .service-rows .feature-status{font-size:.875rem;font-weight:650;margin-bottom:10px;color:#eef3ff} .work-aside{margin-left:14%;border-top:1px solid #89a7fa;padding-top:22px} .work-aside p{max-width:78ch;font-size:.875rem;color:#e9efff;margin:0}.work-aside strong{color:white;font-weight:650} .person-copy>p{font-size:1.0625rem}.person-name span,.process-line{font-size:.875rem} .person-title h2{margin-top:0}.person-copy{padding-top:0} .investment-heading p,.investment-main>p:not(.monthly),.investment-extras p,.scope-details{font-size:.9375rem} .investment-extras article>a{display:inline-flex;padding:8px 0;font-size:.875rem;font-weight:650;text-decoration:underline} .price{letter-spacing:-.04em}.scope-details p{line-height:1.8} .lens-heading>p:not(.margin-note){font-size:1rem}.example-caption{font-size:.75rem} .example-fit p,.example-details p,.example-next p{font-size:.875rem} .example-overline,.example-details>span,.example-next>span{font-size:.75rem} @media(max-width:1050px){.ap-header nav{gap:16px}.ap-header nav>a{font-size:.8125rem}.nav-cta{padding:12px 14px}.nav-cta span{margin-left:8px}.service-rows,.work-aside{margin-left:0}} @media(max-width:760px){ .ap-header nav>a{font-size:.9375rem;min-height:44px;display:inline-flex;align-items:center} .hero-copy h1{font-size:clamp(3rem,13.1vw,5.25rem)} .hero-summary{font-size:1.0625rem;max-width:40ch} .ap-hero{padding-bottom:0}.hero-art{bottom:auto} .sheet-title p{font-size:1rem}.service-rows article{display:block}.service-rows p{font-size:1.0625rem} .service-rows .service-inclusion{font-size:.9375rem}.work-aside p{font-size:.9375rem} .person-copy>p{font-size:1rem}.process-line{font-size:.8125rem;gap:12px;flex-wrap:wrap} .ap-close .local-note{font-size:.875rem!important;max-width:38ch}.ap-close footer nav{gap:20px} .ap-close footer span{font-size:.75rem}.ap-close h2{font-size:clamp(3rem,12.5vw,5.125rem)} .investment-heading p,.investment-main>p:not(.monthly),.investment-extras p{font-size:1rem} .lens-heading>p:not(.margin-note){font-size:1rem}.lens-controls button{font-size:1rem} } @media(max-width:760px){.ap-close .close-frame{display:none}} /* One identity, three distinct page compositions. */ h1,h2,h3{letter-spacing:max(-.04em,-2px);text-wrap:balance}p{text-wrap:pretty} .ap-header nav{gap:clamp(20px,2.6vw,38px)}.ap-header nav a{white-space:nowrap} .agency-home .hero-copy{width:45%}.agency-home .hero-summary{max-width:35ch} .agency-home .person-section{padding-block:100px}.agency-home .person-title h2{font-size:clamp(2.375rem,4.2vw,3.625rem);max-width:16ch} .websites-hero{padding:65px var(--g) 74px;display:grid;grid-template-columns:1.2fr 1fr;gap:10%;align-items:end} .websites-hero h1{font-size:clamp(3.5rem,6.3vw,5.625rem);line-height:1.06;margin:0;letter-spacing:-.04em}.websites-hero h1 span{color:var(--sc-accent)}.websites-hero p{font-size:1.1875rem;line-height:1.7;max-width:39ch;margin:0 0 19px} .website-gallery{padding:48px var(--g) 72px;background:#eaf0f7}.gallery-intro{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:38px}.gallery-intro h2{font-size:1.75rem;margin:0;letter-spacing:-.025em}.gallery-intro p{font-size:.9375rem;margin:0;color:var(--sc-ink-soft)} .sample-grid{display:grid;grid-template-columns:1fr 1fr;gap:62px 38px}.sample-item{min-width:0}.sample-item figure{margin:0;background:#d8e1ed;overflow:hidden;aspect-ratio:1.44}.sample-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.22,1,.36,1)}.sample-item a:hover img{transform:scale(1.025)} .sample-item h3{font-size:1.5625rem;line-height:1.3;letter-spacing:-.025em;display:flex;justify-content:space-between;gap:20px;margin:20px 0 6px}.sample-item h3 span{font-size:1.4375rem;font-weight:400}.sample-item p{font-size:.9375rem;color:var(--sc-ink-soft);margin:0} .gallery-note{font-size:.875rem!important;color:var(--sc-ink-soft);border-top:1px solid #bac8dc;padding-top:24px;margin:50px 0 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.gallery-note a{display:inline-flex;align-items:center;gap:var(--tv-link-gap);padding:10px 0;font-size:.9375rem;font-weight:650;text-decoration:none} .websites-page .lens-stage{background:var(--sc-canvas)}.websites-page .lens-heading h2{font-size:clamp(2.5rem,4.6vw,4rem)}.websites-page .lens-heading>p{max-width:38ch} .included-foundations{display:grid;grid-template-columns:1fr 1.2fr;gap:12%;padding:34px var(--g) 45px;background:var(--sc-canvas);border-top:1px solid #c3cfe0}.included-foundations h3{font-size:1.4375rem;line-height:1.35;letter-spacing:-.02em;margin:0;max-width:23ch}.included-foundations p{font-size:1rem;max-width:62ch;color:var(--sc-ink-soft);margin:0} .website-care{padding:88px var(--g);background:var(--sc-accent);color:#fff;display:grid;grid-template-columns:1fr 1.2fr;gap:12%}.website-care h2{font-size:clamp(2.8125rem,5vw,4.5rem);margin:0} .care-details article{padding-bottom:30px}.care-details article+article{border-top:1px solid #9caff0;padding-top:30px;padding-bottom:0}.care-details h3{font-size:1.5625rem;line-height:1.3;letter-spacing:-.02em;margin:0 0 16px}.care-details p{font-size:1.0625rem;max-width:53ch;line-height:1.75;color:#f0f3ff;margin:0}.care-details .feature-status{font-size:.875rem;font-weight:650;color:white;margin-bottom:10px} .websites-page .investment{padding-top:100px;padding-bottom:75px;grid-template-columns:.8fr 1.1fr 1fr;gap:6%}.websites-page .investment-heading h2{font-size:clamp(2.3125rem,4.2vw,3.75rem);max-width:10ch}.websites-page .investment-heading p{font-size:1rem}.websites-page .investment-extras p,.websites-page .investment-main>p:not(.monthly){font-size:1rem}.websites-page .scope-details{font-size:.9375rem} .visibility-page .monthly-heading h2{font-size:clamp(2.6875rem,4.7vw,4.1875rem)}.visibility-page .monthly-section{padding-top:82px;padding-bottom:85px}.visibility-page .monthly-heading{margin-bottom:45px}.visibility-page .monthly-heading>p{max-width:39ch}.visibility-page .monthly-cycle li{padding-bottom:26px}.visibility-page .monthly-cycle p{max-width:51ch}.visibility-page .work-note{top:24px}.visibility-page .work-note dl>div:last-child{padding-bottom:0} .visibility-progress{padding:78px var(--g);display:grid;grid-template-columns:1fr 1.2fr;gap:12%;background:#eaf0fb}.visibility-progress h2{font-size:clamp(2.25rem,3.9vw,3.5rem);margin:0}.visibility-progress p{font-size:1.0625rem;max-width:58ch;color:var(--sc-ink-soft);margin:0 0 18px}.visibility-progress p:last-child{margin-bottom:0}.visibility-page .visibility-questions{padding-top:82px;padding-bottom:82px}.question-list a{text-decoration:underline;text-underline-offset:3px} .structure-close{margin:clamp(24px,3vw,40px) var(--g) clamp(56px,6vw,88px);padding:clamp(36px,4.4vw,64px);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px 8%;align-items:end;border:1px solid var(--tv-card-line);border-radius:var(--tv-radius-panel);background:var(--tv-card-tint)}.structure-close h2{font-size:clamp(2.5rem,4vw,3.5rem);line-height:1.08;margin:0 0 20px}.structure-close>div>p{font-size:1.0625rem;max-width:44ch;margin:0;color:var(--sc-ink-soft)} .structure-footer{margin:0 var(--g);padding:28px 0 35px;border-top:1px solid #bac7d9;display:flex;justify-content:space-between;gap:30px;align-items:center}.structure-footer .footer-wordmark{display:inline-flex;align-items:center;gap:.6em;font-size:1.0625rem}.footer-wordmark .ap-mark{height:1.5em}.structure-footer nav{display:flex;gap:30px;flex-wrap:wrap;font-size:.875rem}.structure-footer nav a{padding:8px 0} @media(max-width:1050px){ .ap-header nav{gap:18px}.agency-home .hero-copy{width:48%}.websites-hero{gap:6%;grid-template-columns:1.1fr 1fr}.websites-hero h1{font-size:clamp(3.375rem,6.5vw,4.875rem)} .sample-grid{gap:45px 26px}.website-care,.included-foundations,.visibility-progress{gap:8%} .websites-page .investment{grid-template-columns:1fr 1fr;gap:50px 8%}.websites-page .investment-heading{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:end}.websites-page .investment-heading h2{max-width:none;margin:0}.websites-page .investment-heading p{margin:0}.structure-close{gap:6%} } @media(max-width:760px){ .ap-header nav{gap:8px 24px}.ap-header nav a{min-height:44px}.agency-home .hero-copy{width:100%}.agency-home .hero-copy .ap-link{margin-bottom:0} .agency-home .person-section{padding-block:64px}.agency-home .person-title h2{font-size:2.5rem} .websites-hero{display:block;padding:34px 24px 48px}.websites-hero h1{font-size:clamp(3rem,12.7vw,4.375rem);margin-bottom:27px}.websites-hero p{font-size:1.125rem;max-width:40ch}.websites-hero .ap-link{font-size:.875rem;gap:20px} .website-gallery{padding:36px 24px 48px}.gallery-intro{display:block;margin-bottom:29px}.gallery-intro h2{font-size:1.625rem;margin-bottom:12px}.gallery-intro p{font-size:.9375rem;max-width:28ch}.sample-grid{grid-template-columns:1fr;gap:38px}.sample-item h3{font-size:1.5625rem;margin-top:17px}.sample-item p{font-size:.9375rem}.gallery-note{font-size:.875rem!important;display:block;margin-top:34px;padding-top:22px;line-height:1.7} .websites-page .lens-heading h2{font-size:2.5rem}.websites-page .lens-stage{padding-top:56px;padding-bottom:40px}.included-foundations{display:block;padding:28px 24px 42px}.included-foundations h3{font-size:1.4375rem;margin-bottom:18px}.included-foundations p{font-size:1rem} .website-care{display:block;padding:60px 24px}.website-care h2{font-size:2.875rem;margin-bottom:38px}.care-details h3{font-size:1.5rem}.care-details p{font-size:1.0625rem} .websites-page .investment{display:block;padding:62px 24px 45px}.websites-page .investment-heading{display:block;margin-bottom:35px}.websites-page .investment-heading h2{font-size:2.8125rem;max-width:10ch;margin:0 0 23px}.websites-page .investment-heading p{font-size:1.0625rem}.websites-page .investment-extras article{padding-block:24px}.websites-page .investment-extras h3{font-size:1.3125rem} .visibility-page .monthly-section{padding:60px 24px}.visibility-page .monthly-heading h2{font-size:2.6875rem}.visibility-page .monthly-heading>p{font-size:1.0625rem}.visibility-page .monthly-heading{margin-bottom:30px}.visibility-progress{display:block;padding:58px 24px}.visibility-progress h2{font-size:2.375rem;margin-bottom:28px}.visibility-progress p{font-size:1.0625rem}.visibility-page .visibility-questions{padding:60px 24px} .structure-close{display:block;margin:8px 24px 56px;padding:30px 24px}.structure-close h2{font-size:clamp(2.25rem,9.6vw,2.75rem);margin-bottom:16px}.structure-close>div>p{font-size:1.0625rem}.structure-close .close-action{margin-top:28px;width:100%}.structure-footer{margin:0 24px;padding:24px 0 30px;display:block}.structure-footer nav{gap:22px;margin-top:18px}.structure-footer nav a{display:inline-flex;min-height:44px;align-items:center} } @media(prefers-reduced-motion:reduce){.sample-item img{transition:none;transform:none!important}} /* Vector link cues stay consistent across desktop and mobile. */ .link-arrow{display:inline-block;width:18px;height:18px;flex-shrink:0;vertical-align:-3px} /* Founder portrait and biography share a single, balanced composition. */ .agency-home .designer-profile{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:center;gap:clamp(40px,7vw,110px)} .designer-portrait{margin:0;max-width:480px;width:100%;background:var(--sc-surface)} .designer-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover} .designer-details .person-title h2{margin:0 0 32px;max-width:16ch} .designer-details .person-copy{padding-top:0} .designer-details .person-name{font-size:clamp(1.25rem,2vw,1.625rem)!important;letter-spacing:-.025em} .designer-details .person-name span{display:inline-block;letter-spacing:0;margin-top:5px} @media(max-width:760px){.agency-home .designer-profile{display:flex;flex-direction:column;align-items:stretch;gap:34px}.designer-portrait{max-width:420px}.designer-details .person-title h2{margin-bottom:25px}.designer-details .person-name{font-size:1.375rem!important}} /* Pricing lives on its own page; Websites and AI Visibility carry one cost line. */ .price-line{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:36px var(--g);border-top:1px solid #c3cfe0;border-bottom:1px solid #c3cfe0;background:var(--sc-canvas)} .price-line p{font-size:1.125rem;line-height:1.6;max-width:60ch;margin:0;color:var(--sc-ink-soft)}.price-line strong{font-weight:600;color:var(--sc-ink);letter-spacing:-.02em}.price-line .ap-link{flex-shrink:0;font-size:.9375rem} .pricing-hero{padding-bottom:40px}.pricing-hero p{margin-bottom:0} .pricing-page-plans{padding-top:20px} @media(max-width:760px){.price-line{display:block;padding:30px 24px}.price-line p{font-size:1.0625rem;margin-bottom:16px}} /* Two doors at the end of the pricing sheet: pay the design fee, or book the fit call. */ .start-doors{margin:44px 0 8px;padding-top:36px;border-top:1px solid #cad5e7} .doors{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start} .door{margin:0;padding:28px;border:1px solid #cad5e7;border-radius:16px;background:white}.door-primary{background:#edf2fb;border-color:#bacbe8} .door .ap-button{border:1px solid transparent;cursor:pointer;font-family:inherit;text-align:left}.door .ap-button-secondary{border-color:var(--tv-line,#cdd7e7)} .door p{margin:14px 0 0;line-height:1.6;color:var(--sc-ink-soft)}.door-fine{font-size:.9375rem;color:var(--sc-ink)}.door p a{color:var(--sc-ink);text-decoration:underline;text-underline-offset:3px}.door-note{font-size:.875rem} @media(max-width:760px){.doors{grid-template-columns:1fr;gap:16px}.door{padding:22px}.start-doors{margin-top:32px}} /* Terms is a plain page at body size. */ .terms{max-width:68ch;padding:56px var(--g) 90px}.terms h1{font-size:clamp(2.5rem,4.5vw,3.5rem);letter-spacing:-.03em;margin:0 0 20px}.terms h2{font-size:1.375rem;margin:38px 0 10px} .terms p{font-size:1.0625rem;line-height:1.7;margin:0 0 16px;color:var(--sc-ink)}.terms-intro{color:var(--sc-ink-soft)}.terms a{text-decoration:underline;text-underline-offset:3px}.terms-date{margin-top:40px;font-size:.9375rem;color:var(--sc-ink-soft)} @media(max-width:760px){.terms{padding:36px 24px 64px}.terms h2{font-size:1.25rem}} /* A button and a quieter text link share one line and wrap together. Text links underline only on hover. */ .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px} @media(hover:hover) and (pointer:fine){:is(.ap-link,.gallery-note a):hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--tv-link-underline)}} @media(max-width:760px){.hero-actions{gap:10px 24px;margin-top:22px}.agency-home .hero-actions{margin-bottom:30px}} /* Contact: the introduction and other ways in on the left, one single-column form on the right. */ :root{--tv-field-line:#8a97aa;--tv-field-bg:#fff;--tv-card-line:#bacbe8;--tv-card-bg:#edf2fb;--tv-error:#a02a2a;--tv-field-radius:2px;--tv-card-radius:16px;--tv-field-h:50px} @media screen and (prefers-color-scheme:dark){:root{--tv-field-line:#5d6f89;--tv-field-bg:#0e1724;--tv-card-line:#34455d;--tv-card-bg:#172438;--tv-error:#ffa4a4}} .contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,8vw,120px);align-items:start;padding:56px var(--g) 96px} .contact-intro h1{font-size:clamp(2.75rem,5.2vw,4.5rem);line-height:1.06;letter-spacing:-.04em;margin:0 0 24px}.contact-intro h1 span{color:var(--sc-accent)} .contact-intro>p{font-size:1.125rem;line-height:1.7;max-width:38ch;color:var(--sc-ink-soft);margin:0} /* Other ways in: each row is one link, marked by its arrow rather than an underline, since the rows already carry rules. */ .contact-ways{list-style:none;margin:44px 0 0;padding:0;max-width:40ch} .contact-ways li{border-top:1px solid var(--tv-card-line)}.contact-ways li:last-child{border-bottom:1px solid var(--tv-card-line)} .contact-ways a{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;padding:18px 0;transition:opacity var(--tv-press-out) var(--sc-ease-out)} .contact-ways a span{grid-column:1;font-size:.875rem;color:var(--sc-ink-soft);margin-bottom:4px} .contact-ways a b{grid-column:1;font-size:1.0625rem;font-weight:650;transition:color var(--sc-d-fast) var(--sc-ease-out)} .contact-ways .link-arrow{grid-column:2;grid-row:1/3;transition:transform var(--sc-d-fast) var(--sc-ease-out)} .contact-ways a:active{opacity:var(--tv-press-dim);transition-duration:var(--tv-press-in)} @media(hover:hover) and (pointer:fine){.contact-ways a:hover b{color:var(--sc-accent)}.contact-ways a:hover .link-arrow{transform:translateX(var(--tv-nudge))}} .contact-card{border:1px solid var(--tv-card-line);border-radius:var(--tv-card-radius);background:var(--tv-card-bg);padding:clamp(24px,4vw,40px)} .contact-form{display:grid;gap:22px} .contact-form .field{margin:0;padding:0;border:0;min-width:0} .contact-form label{display:block;padding:0;margin:0 0 8px;font-size:.9375rem;font-weight:650} .contact-form .optional{font-weight:450;color:var(--sc-ink-soft)} .contact-form input:not([type=checkbox]),.contact-form textarea{display:block;width:100%;box-sizing:border-box;min-height:var(--tv-field-h);padding:12px 14px;font:inherit;font-size:1rem;color:var(--sc-ink);background:var(--tv-field-bg);border:1px solid var(--tv-field-line);border-radius:var(--tv-field-radius);transition:border-color var(--sc-d-fast) var(--sc-ease-out)} .contact-form textarea{min-height:168px;line-height:1.6;resize:vertical} .contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--sc-accent);outline-offset:1px;border-color:var(--sc-accent)} .contact-form [aria-invalid=true]{border-color:var(--tv-error)!important;box-shadow:inset 0 0 0 1px var(--tv-error)} .field-error{margin:8px 0 0;font-size:.875rem;font-weight:600;color:var(--tv-error)}.field-error:empty{display:none} .field-meta{display:flex;justify-content:space-between;gap:16px;margin:8px 0 0;font-size:.8125rem;color:var(--sc-ink-soft)}.field-meta [data-count]{font-variant-numeric:tabular-nums;white-space:nowrap} .error-summary{padding:14px 16px;background:var(--tv-field-bg);border:1px solid var(--tv-error);border-left-width:4px;font-size:.9375rem} .error-summary:focus{outline:2px solid var(--tv-error);outline-offset:2px} .error-summary p{margin:0 0 6px;font-weight:650}.error-summary ul{margin:0;padding-left:18px}.error-summary a{color:var(--tv-error);text-decoration:underline;text-underline-offset:3px} .contact-note{margin:0;padding-top:18px;border-top:1px solid var(--tv-card-line);font-size:.875rem;line-height:1.6;color:var(--sc-ink-soft)}.contact-note a{color:var(--sc-ink);text-decoration:underline;text-underline-offset:3px} .contact-submit{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px} .contact-form .ap-button{border:0;font-family:inherit;cursor:pointer} .contact-form .ap-button[aria-busy=true]{opacity:.72;cursor:progress} .form-status{margin:0;font-size:.9375rem;line-height:1.6}.form-status:empty{display:none}.form-status.is-error{color:var(--tv-error);font-weight:600}.form-status a{color:inherit;text-decoration:underline} .botcheck{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} /* Space is held for the hCaptcha widget (78px normal, 144px compact) so the form does not jump when it loads. */ .h-captcha{min-height:78px}.h-captcha[data-size=compact]{min-height:144px} /* The confirmation replaces the form inside the same card, which keeps its height so the page does not jump. */ .contact-form[hidden],.contact-sent[hidden]{display:none} .contact-card{display:flex;flex-direction:column;justify-content:center} .contact-sent{display:flex;flex-direction:column;align-items:flex-start;transition:opacity var(--sc-d-base) var(--sc-ease-out),transform var(--sc-d-base) var(--sc-ease-out)} @starting-style{.contact-sent{opacity:0;transform:translateY(.5rem)}} .sent-mark{width:36px;height:36px;margin-bottom:20px;fill:none;stroke:var(--sc-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .contact-sent h2{font-size:clamp(1.625rem,2.4vw,2rem);line-height:1.15;letter-spacing:-.03em;margin:0 0 12px}.contact-sent h2:focus{outline:none} .contact-sent p{font-size:1.0625rem;line-height:1.65;color:var(--sc-ink-soft);margin:0 0 24px;max-width:40ch} .sent-email{color:var(--sc-ink);overflow-wrap:anywhere} .contact-sent .text-button{background:none;border:0;padding:0;min-height:44px;font:inherit;font-size:.9375rem;font-weight:650;color:var(--sc-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer} @media(max-width:760px){ .contact{display:block;padding:36px 24px 64px}.contact-intro{margin-bottom:36px}.contact-intro h1{font-size:clamp(2.625rem,11vw,3.5rem)}.contact-intro>p{font-size:1.0625rem} .contact-ways{margin-top:30px}.contact-card{padding:24px 20px} } @media(prefers-reduced-motion:reduce){.contact-sent,.contact-ways a,.contact-ways a b,.contact-ways .link-arrow,.contact-form input,.contact-form textarea{transition:none}} /* Feel: controls answer on press, and the brief dialog arrives and leaves along the same path. The header is left exactly as it was. Linked before theme.css so the dark palette's own hover colours still win. */ :root{ --tv-accent-hover:#1143cc; --tv-light-button-hover:#fff; --tv-press-scale:.97; --tv-card-press:.985; --tv-press-dim:.6; --tv-press-in:60ms; --tv-press-out:var(--sc-d-fast); --tv-nudge:3px; --tv-sheet-d:var(--sc-d-base); --tv-sheet-rise:.5rem; --tv-sheet-scale:.98; --tv-scrim:#101323a8; --tv-button-h:48px; --tv-link-gap:12px; --tv-link-underline:6px; } /* Response: the press lands in 60ms and the release eases back. */ .ap-button,.pricing-button,.primary-button,.secondary-button,.dialog-close,.review-dialog .download,.group-control{transition:transform var(--tv-press-out) var(--sc-ease-out),background-color var(--sc-d-fast) var(--sc-ease-out),color var(--sc-d-fast) var(--sc-ease-out),border-color var(--sc-d-fast) var(--sc-ease-out)} :is(.ap-button,.pricing-button,.primary-button,.secondary-button,.dialog-close,.review-dialog .download,.group-control):active:not(:disabled){transform:scale(var(--tv-press-scale));transition-duration:var(--tv-press-in)} .ap-link,.structure-footer nav a,.footer-wordmark,.text-button,.lens-controls button,.gallery-note a,.investment-extras article>a,summary{transition:opacity var(--tv-press-out) var(--sc-ease-out)} :is(.ap-link,.structure-footer nav a,.footer-wordmark,.text-button,.lens-controls button,.gallery-note a,.investment-extras article>a,summary):active{opacity:var(--tv-press-dim);transition-duration:var(--tv-press-in)} .link-arrow{transition:transform var(--sc-d-fast) var(--sc-ease-out)} .sample-item figure{transition:transform var(--tv-press-out) var(--sc-ease-out)} .sample-item a:active figure{transform:scale(var(--tv-card-press));transition-duration:var(--tv-press-in)} /* Hover only where a pointer can hover, so a tap never leaves a stuck state. Arrows lean toward where the link goes. */ @media (hover:hover) and (pointer:fine){ .ap-button:hover,.pricing-button:hover{background-color:var(--tv-accent-hover)} .visibility-plan .pricing-button:hover{background-color:var(--tv-light-button-hover)} .review-dialog .download:hover{background-color:color-mix(in oklab,var(--dialog-ink) 86%,var(--dialog-bg))} .structure-footer nav a:hover{text-decoration:underline;text-underline-offset:7px} :is(.ap-link,.lens-controls button,.sample-item a,.gallery-note a):hover .link-arrow{transform:translateX(var(--tv-nudge))} .lens-controls button:hover{color:var(--sc-ink)} } /* The brief dialog rises into place over a dimmed page and leaves the way it came. */ .review-dialog{opacity:0;transform:translateY(var(--tv-sheet-rise)) scale(var(--tv-sheet-scale));transition:opacity var(--tv-sheet-d) var(--sc-ease-out),transform var(--tv-sheet-d) var(--sc-ease-out),overlay var(--tv-sheet-d) allow-discrete,display var(--tv-sheet-d) allow-discrete} .review-dialog[open]{opacity:1;transform:none} @starting-style{.review-dialog[open]{opacity:0;transform:translateY(var(--tv-sheet-rise)) scale(var(--tv-sheet-scale))}} .review-dialog::backdrop{background-color:transparent;transition:background-color var(--tv-sheet-d) var(--sc-ease-out),overlay var(--tv-sheet-d) allow-discrete,display var(--tv-sheet-d) allow-discrete} .review-dialog[open]::backdrop{background-color:var(--tv-scrim)} @starting-style{.review-dialog[open]::backdrop{background-color:transparent}} /* Follow the device preference immediately, without script or a stored override. Sample designs retain their own identities; downloadable PDFs remain light. */ :root { color-scheme: light dark; } @media screen and (prefers-color-scheme: dark) { :root { --sc-canvas:#0e1724; --sc-surface:#172438; --sc-ink:#eef3fc; --sc-ink-soft:#b3c1d5; --sc-accent:#8eafff; --dialog-ink:#eef3fc; --dialog-bg:#172438; --ink:#eef3fc; --soft:#b3c1d5; --blue:#8eafff; --line:#34455d; --paper:#0e1724; --green:#86d2b8; } body { background:var(--sc-canvas); color:var(--sc-ink); } .hero-copy h1 span,.ap-close h2 em,.lens-controls button[aria-pressed=true] { color:var(--sc-accent); } .art-mat { background:var(--sc-canvas); } .home-price { background:var(--sc-surface); } .choosing,.mat { background:var(--sc-canvas); } .perspective-story { background:linear-gradient(90deg,rgba(14,23,36,.9) 0%,rgba(14,23,36,.8) 55%,rgba(14,23,36,0) 100%); } .choosing-field { background-color:#223148; } .chosen { background:#2858d9; } .perspective-story,.choosing { border-color:var(--line); } .price-line { background:var(--sc-surface); border-color:var(--line); } .price-line strong { color:var(--sc-ink); } .home-price-card { background:#142034; border-color:var(--line); } .start-doors,.door { border-color:var(--line); } .door { background:var(--sc-surface); } .door-primary { background:#142034; } .door-fine,.terms p,.door-refund a { color:var(--sc-ink); } .home-price-plans li { border-color:var(--line); } .home-price-intro>p:last-child,.home-price .price-term { color:var(--sc-ink-soft); } .hero-art figcaption,.film-inset,.perspective,.perspective-stage,.investment,.foundation-section,.visibility-questions, .review-entry,.service-plan,.work-note { background:var(--sc-surface); color:var(--sc-ink); } .lens-act,.website-gallery,.visibility-progress,.working-together,.practice-portfolio,.design-fee { background:#142034; } .home-services,.website-care,.monthly-section,.work-sheet { background:#173a9b; color:#fff; } .visibility-plan,.summary-consult { background:#19335a; color:#fff; } .ap-button,.pricing-button,.primary-button { background:#2858d9; color:#fff; } .ap-button:hover,.pricing-button:hover,.primary-button:hover:not(:disabled) { background:#3467ef; } .primary-button:active:not(:disabled) { background:#204bc0; } .visibility-plan .pricing-button,.summary-consult .primary-button { background:#d9e4ff; color:#142d58; } .visibility-plan .pricing-button:hover,.summary-consult .primary-button:hover { background:#fff; color:#142d58; } .perspective p:not(.margin-note),.lens-explainer,.lens-controls button, .person-name span,.visibility-intro>p,.dimension-summary { color:var(--sc-ink-soft); } .visibility-intro .visibility-lead { color:var(--sc-ink); } .nav-cta,.structure-footer,.gallery-note,.included-foundations, .process-line,.lens-controls button,.design-fee,.design-amount,.service-plan,.pricing-details details, .foundation-list>div,.first-days>li,.work-note dl>div,.question-list details, .question-list details:last-child,.service-navigation,.outcome-copy .outcome-promise { border-color:var(--line); } /* The inset demonstrates a separate therapist design, not the agency theme. */ .example-frame { color:#142744; color-scheme:light; box-shadow:12px 16px 0 #24344e; } .lens-corner { color:var(--sc-accent); } .domain-field { background:#0e1724; border-color:#7084a1; } .domain-field input::placeholder { color:#a8bad2; } .secondary-button { background:var(--sc-surface); color:var(--ink); border-color:var(--line); } .secondary-button:hover { background:#243752; } .example-banner,.partial-note { background:#1b3050; color:#d0dfff; } .form-error { color:#ffabae; } .loading-track { background:#263956; } .dimension { background:#172438; border-color:var(--line); box-shadow:none; } .dimension,.dimension.low,.dimension.medium,.dimension.high { --gauge:#8eafff; } .dimension.good { --gauge:#86d2b8; } .dimension.unknown { --gauge:#a2b2c9; } .dimension header>span { background:#283952; color:#d1dced; } .dimension-counts { border-color:var(--line); } .thermometer { background:#344762; } .unknown .thermometer:before { background:#344762; } .visibility-hero { background:var(--sc-canvas); } .visibility-hero:before { background:linear-gradient(90deg,#0e1724 0%,rgba(14,23,36,.98) 38%,rgba(14,23,36,.92) 49%,rgba(14,23,36,.24) 68%,rgba(14,23,36,.12) 100%); } :focus-visible { outline-color:#a5bfff; } ::selection { background:#416ec9; color:white; } } @media screen and (prefers-color-scheme: dark) and (max-width:1000px) { .visibility-hero:before { background:linear-gradient(90deg,#0e1724 0%,rgba(14,23,36,.98) 53%,rgba(14,23,36,.9) 64%,rgba(14,23,36,.2) 87%); } } @media screen and (prefers-color-scheme: dark) and (max-width:760px) { .visibility-hero:before { background:linear-gradient(180deg,#0e1724 0%,#0e1724 calc(100% - 380px),rgba(14,23,36,.98) calc(100% - 365px),rgba(14,23,36,.12) calc(100% - 250px)); } } @media print { :root { color-scheme:light; } } /* Available to keyboard users without occupying the page header. */ a.skip:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } a.skip:focus { position:fixed; top:12px; left:12px; z-index:100; padding:12px 18px; background:var(--sc-canvas); color:var(--sc-ink); border:2px solid var(--sc-accent); border-radius:4px; } /* Agency-wide architectural language. Load last on every public agency page. Controls: 4px. Containing panels/dialogs: 8px. Images: square. Circular indicators remain circular because they communicate state. */ :root { --tv-radius-control:4px; --tv-radius-panel:8px; --tv-field-radius:var(--tv-radius-control); --tv-card-radius:var(--tv-radius-panel); --card-radius:var(--tv-radius-panel); --tv-card-tint:#edf2fb; --tv-card-line:#cdd7e7; } body :is(.ap-button,.pricing-button,.primary-button,.secondary-button,.nav-cta, .menu-button,.plan-action,.group-control,.review-dialog .download,.dialog-close, .contact-form input:not([type=checkbox]):not([type=radio]),.contact-form textarea, .review-dialog input,.domain-field) { border-radius:var(--tv-radius-control); } body :is(.ap-button,.pricing-button,.primary-button,.secondary-button,.plan-action) { min-height:48px; box-shadow:none; } body :is(.service-plan,.design-fee,.door,.contact-card,.review-dialog, .report-card,.dimension,.overview,.ai-snapshot,.summary-consult,.preview-banner, .discovery-group,.pricing-details details,.structure-close) { border-radius:var(--tv-radius-panel); } body :is(.hero-art,.art-edge,.designer-portrait,.sample-item figure) {border-radius:0;} body .nav-cta {background:transparent;border-color:#b5c1d3;} body .menu-button {font:inherit;} .review-dialog .download {background:#164de5;color:#fff;font:inherit;cursor:pointer;} @media(hover:hover) and (pointer:fine) { .review-dialog .download:hover {background:#1143cc;} } @media screen and (prefers-color-scheme:dark) { :root {--tv-card-tint:#172438;--tv-card-line:#34455d;} body .nav-cta {border-color:#34455d;} .review-dialog .download {background:#2858d9;} .review-dialog .download:hover {background:#3467ef;} } /* 21st: Categorized FAQ (educalvolpz/faq-4) and Minimal Footer (efferd). Adapted to Aperture with native disclosures and ordinary topic links. */ .faq-hero{padding:64px var(--g) 60px;display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:center} .faq-hero h1{font-size:clamp(3rem,5.5vw,5.25rem);line-height:1.06;margin:0;letter-spacing:-.04em} .faq-hero h1 span{color:var(--sc-accent)} .faq-hero>p{max-width:38ch;color:var(--sc-ink-soft);font-size:1.125rem} .faq-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:8%;padding:16px var(--g) 100px} .faq-index{align-self:start;position:sticky;top:32px} .faq-index nav{display:grid;border-top:1px solid var(--tv-line,#cdd7e7)} .faq-index nav a{display:flex;justify-content:space-between;gap:16px;padding:17px 0;border-bottom:1px solid var(--tv-line,#cdd7e7);font-size:.9375rem;font-weight:600} .faq-index nav a:hover{color:var(--sc-accent)} .faq-help{margin-top:36px;padding:24px;background:var(--sc-surface);border-radius:var(--tv-radius-panel)} .faq-help h2{font-size:1.25rem;margin:0 0 12px} .faq-help p{font-size:.875rem;color:var(--sc-ink-soft);margin:0 0 12px} .faq-help .ap-link{font-size:.875rem} .faq-group{scroll-margin-top:32px;margin-bottom:48px} .faq-group h2{font-size:1.75rem;margin:0 0 24px} .faq-questions{display:grid;gap:12px} .faq-questions details{border:1px solid var(--tv-line,#cdd7e7);border-radius:var(--tv-radius-panel);background:var(--sc-canvas);overflow:hidden} .faq-questions summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;min-height:64px;list-style:none;font-size:1rem;font-weight:600;cursor:pointer;line-height:1.5} .faq-questions summary::-webkit-details-marker{display:none} .faq-questions summary::after{content:'+';font-size:1.5rem;font-weight:400;flex-shrink:0;color:var(--sc-accent)} .faq-questions details[open]{border-color:var(--sc-accent)} .faq-questions details[open] summary::after{content:'−'} .faq-questions details p{font-size:.9375rem;color:var(--sc-ink-soft);line-height:1.8;margin:0;padding:0 24px 22px;max-width:76ch} .faq-questions details a{text-decoration:underline;text-underline-offset:3px} .faq-questions summary:focus-visible{outline:3px solid var(--sc-accent);outline-offset:-4px} .faq-signpost{display:flex;align-items:center;justify-content:space-between;gap:32px;border-top:1px solid var(--tv-line,#cdd7e7);padding:36px 0;margin-top:36px} .faq-signpost h2{font-size:1.5rem;margin:0} .visibility-page .faq-signpost{margin-inline:var(--g)} .structure-close .close-action{display:grid;gap:12px;justify-self:end;width:min(100%,320px)}.structure-close .close-action :is(form,.ap-button){width:100%}.structure-close .close-action .ap-button{justify-content:center;text-align:center} body .structure-footer{display:block;margin:0;padding:56px var(--g) 24px;border-top:1px solid var(--tv-line,#cdd7e7);background:var(--sc-canvas)} .footer-main{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:48px;padding-bottom:40px} .footer-brand p{font-size:.9375rem;color:var(--sc-ink-soft);margin:18px 0 0} .footer-wordmark{display:inline-flex;align-items:center;gap:14px} body .structure-footer nav{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:0} .structure-footer nav h2{font-size:.8125rem;font-weight:650;letter-spacing:0;margin:0 0 12px;color:var(--sc-ink-soft)} .structure-footer nav a{display:flex;align-items:center;min-height:44px;font-size:.875rem} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--tv-line,#cdd7e7);padding-top:12px;color:var(--sc-ink-soft)} .footer-bottom small{font-size:.8125rem} .footer-utility{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .footer-utility a{font-size:.8125rem;min-height:44px;display:inline-flex;align-items:center} .door .door-disclosure{font-size:1rem;color:var(--sc-ink)} @media(max-width:760px){ .faq-hero{display:block;padding:36px 24px}.faq-hero>p{font-size:1rem;margin-top:24px} .faq-layout{display:block;padding:0 24px 40px}.faq-index{position:static;margin-bottom:36px} .faq-index nav{grid-template-columns:1fr 1fr;column-gap:20px}.faq-index nav a{font-size:.8125rem}.faq-help{display:none} .faq-group h2{font-size:1.5rem}.faq-questions summary{padding:18px;font-size:.9375rem}.faq-questions details p{padding:0 18px 18px} .faq-signpost{display:block}.faq-signpost .ap-link{margin-top:16px} .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;padding-bottom:32px}.footer-brand{grid-column:1/-1} body .structure-footer{padding:40px 24px 20px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:0}.footer-utility{gap:24px} } @media screen and (prefers-color-scheme:dark){:root{--tv-line:#34455d}} /* Text-only topic buttons: no diagonal arrow ornament. */ .faq-index nav{border:0;gap:10px;} .faq-index nav a{justify-content:flex-start;padding:15px 18px;min-height:48px;border:1px solid var(--tv-line,#cdd7e7);border-radius:var(--tv-radius-control);background:var(--sc-canvas);} .faq-index nav a:hover{background:var(--sc-surface);border-color:var(--sc-accent);} .faq-index nav a:focus-visible,.ap-button-secondary:focus-visible{outline:3px solid var(--sc-accent);outline-offset:3px;} body .ap-button-secondary{background:transparent;color:var(--sc-ink);border:1px solid var(--tv-line,#cdd7e7);box-shadow:none;} body .ap-button-secondary:hover{background:var(--sc-surface);border-color:var(--sc-accent);} /* Seller disclosure (Cal. Bus. & Prof. Code 17538(d)): legal name and street address on every page, at body size, with the email route beside it. */ .footer-legal {max-width:78ch;margin:0;padding:24px 0 28px;font-size:.9375rem;line-height:1.65;color:var(--sc-ink-soft);} .footer-legal a {color:inherit;text-decoration:underline;text-underline-offset:3px;} /* Therapy Visibility, late 2026. The style of the Practice Visibility page, shared by the other public pages: big type, a faint 16px dot grid, flat sections, square markers, one clear next step. Load it after the older stylesheets and add class="tv-page" to . Pair with tv-pixels.js for data-cells. */ .tv-page { --tv-ink:#142744; --tv-soft:#4b5a72; --tv-blue:#164de5; --tv-blue-hover:#1143cc; --tv-line:#cdd7e7; --tv-paper:#f7f9fc; --tv-card:#ffffff; --tv-night:#142d58; --tv-night-ink:#eef3fc; --tv-night-soft:#a9b8cd; --tv-band:#164de5; --tv-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%23164de5' fill-opacity='.11'/%3E%3C/svg%3E"); --tv-cell:#164de5; --tv-hero-end:clamp(88px,9vw,136px); /* The system: two h1 sizes, four h2 roles, one large h3, one column split. Pages use these, never their own sizes. */ --tv-h1-flagship:clamp(3.4rem,7.4vw,7.25rem); --tv-h1-inner:clamp(3.1rem,6.6vw,6.75rem); --tv-h2-display:clamp(2.75rem,5.6vw,5.25rem); --tv-h2-section:clamp(2.25rem,4.2vw,3.75rem); --tv-h2-statement:clamp(1.875rem,3.7vw,3.5rem); --tv-h2-reading:clamp(1.75rem,2.6vw,2.25rem); --tv-h3-lg:clamp(1.625rem,2.4vw,2.125rem); --tv-split:minmax(0,1.2fr) minmax(0,.8fr); --tv-split-mirror:minmax(0,.8fr) minmax(0,1.2fr); --tv-split-gap:6%; --tv-field-line:#8a97aa; background:var(--tv-paper); color:var(--tv-ink); } @media screen and (prefers-color-scheme:dark) { .tv-page { --tv-ink:#eef3fc; --tv-soft:#b3c1d5; --tv-blue:#8eafff; --tv-blue-hover:#a9c2ff; --tv-line:#34455d; --tv-paper:#0e1724; --tv-card:#142034; --tv-band:#1c44b8; --tv-night:#172438; --tv-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%238eafff' fill-opacity='.11'/%3E%3C/svg%3E"); --tv-cell:#8eafff; --tv-field-line:#5d6f89; } } .tv-page main { overflow-x:clip; } /* Surfaces. Only heroes and the blue and navy bands reveal a dot grid, under a mouse (tv-pixels.js); each band holds its own canvas. */ .tv-dark, .tv-band { position:relative; isolation:isolate; } .tv-dark { --tv-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%23ffffff' fill-opacity='.13'/%3E%3C/svg%3E"); --tv-cell:#ffffff; background-color:var(--tv-night); color:var(--tv-night-ink); } .tv-band { --tv-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%23ffffff' fill-opacity='.12'/%3E%3C/svg%3E"); --tv-cell:#ffffff; background-color:var(--tv-band); color:#fff; } .tv-page [data-cells] { position:relative; isolation:isolate; overflow:clip; background-position:0 100%; } /* No divider lines between sections (Diego, 22 October 2026). Older stylesheets still draw some. */ .tv-page :is(.feature-collection, .about-block, .fair-terms, .start-doors, .faq-signpost, .review-scope) { border-top:0; } /* Sections and type */ .tv-section { padding:clamp(80px,9vw,128px) var(--g); } .tv-hero { display:grid; grid-template-columns:var(--tv-split); gap:var(--tv-split-gap); align-items:start; padding:clamp(40px,6vw,88px) var(--g) var(--tv-hero-end); } .tv-hero-solo { grid-template-columns:minmax(0,1fr); } .tv-page .tv-h1 { margin:0 0 clamp(32px,4vw,52px); font-size:var(--tv-h1-inner); line-height:.95; font-weight:500; letter-spacing:-.055em; word-spacing:.06em; max-width:11em; } .tv-page .tv-h1-mid { font-size:var(--tv-h1-inner); line-height:.95; max-width:11em; } .tv-mark { color:var(--tv-blue); } .tv-page .tv-h2 { margin:0; font-size:var(--tv-h2-display); line-height:.98; font-weight:500; letter-spacing:-.05em; word-spacing:.06em; max-width:14ch; } .tv-page .tv-statement { margin:0 0 clamp(48px,6vw,80px); font-size:var(--tv-h2-statement); line-height:1.1; font-weight:500; letter-spacing:-.035em; word-spacing:.04em; max-width:24ch; } .tv-page .tv-sub { margin:0 0 12px; font-size:clamp(1.25rem,1.7vw,1.5rem); line-height:1.3; font-weight:650; letter-spacing:-.02em; max-width:30ch; } .tv-page .tv-lead { margin:0 0 18px; font-size:1.0625rem; line-height:1.6; color:var(--tv-soft); max-width:50ch; } .tv-page .tv-note { margin:0; font-size:.875rem; line-height:1.55; color:var(--tv-soft); max-width:70ch; } .tv-dark :is(.tv-lead,.tv-note) { color:var(--tv-night-soft); } .tv-band :is(.tv-lead,.tv-note) { color:#dbe4ff; } .tv-head { display:grid; grid-template-columns:var(--tv-split); gap:var(--tv-split-gap); align-items:end; margin-bottom:clamp(48px,6vw,80px); } .tv-page .tv-head > p { margin:0; font-size:1.0625rem; line-height:1.6; color:var(--tv-soft); max-width:44ch; } .tv-dark .tv-head > p { color:var(--tv-night-soft); } .tv-band .tv-head > p { color:#dbe4ff; } .tv-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px 34px; } /* Lists: name plus one sentence, with a small square marker */ .tv-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(40px,4.5vw,60px) 5%; margin:0; padding:0; list-style:none; } .tv-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .tv-page .tv-grid h3 { margin:0 0 8px; font-size:1.4375rem; font-weight:600; letter-spacing:-.025em; line-height:1.2; } .tv-grid h3::before { content:""; display:block; width:10px; height:10px; margin-bottom:16px; background:var(--tv-blue); } :is(.tv-dark,.tv-band) .tv-grid h3::before { background:currentColor; } .tv-page .tv-grid p { margin:0; font-size:.9688rem; line-height:1.55; color:var(--tv-soft); max-width:36ch; } .tv-dark .tv-grid p { color:var(--tv-night-soft); } .tv-band .tv-grid p { color:#dbe4ff; } .tv-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 5%; margin:0; padding:0; list-style:none; } .tv-steps li { border-top:1px solid var(--tv-line); padding-top:22px; } .tv-band .tv-steps li { border-top-color:rgba(255,255,255,.3); } .tv-dark .tv-steps li { border-top-color:#34455d; } .tv-page .tv-when { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:.8125rem; font-weight:700; color:var(--tv-blue); } .tv-when::before { content:""; width:9px; height:9px; background:currentColor; flex:none; } :is(.tv-dark,.tv-band) .tv-when { color:inherit; } .tv-page .tv-steps h3 { margin:0 0 8px; font-size:1.4375rem; font-weight:600; letter-spacing:-.025em; line-height:1.2; } .tv-page .tv-steps li > p:last-child { margin:0; font-size:.9688rem; line-height:1.55; color:var(--tv-soft); max-width:36ch; } .tv-dark .tv-steps li > p:last-child { color:var(--tv-night-soft); } .tv-band .tv-steps li > p:last-child { color:#dbe4ff; } .tv-rows { margin:0; padding:0; list-style:none; } .tv-rows > * { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:12px 6%; padding:26px 0; border-top:1px solid var(--tv-line); } .tv-rows > :last-child { border-bottom:1px solid var(--tv-line); } .tv-page .tv-rows :is(h3,dt) { margin:0; font-size:1.3125rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; } .tv-page .tv-rows :is(p,dd) { margin:0; font-size:1rem; line-height:1.6; color:var(--tv-soft); } /* Buttons and links */ .tv-go { display:inline-flex; align-items:center; gap:18px; min-height:52px; box-sizing:border-box; padding:0 10px 0 22px; border:0; border-radius:4px; background:#164de5; color:#fff; font:inherit; font-size:1.0625rem; font-weight:650; letter-spacing:-.01em; line-height:1.2; text-decoration:none; cursor:pointer; transition:background-color var(--sc-d-fast,160ms) ease, transform var(--sc-d-fast,160ms) ease; } .tv-go:hover { background:#1143cc; color:#fff; } .tv-go:active { transform:scale(.97); transition-duration:60ms; } .tv-go-box { display:grid; place-items:center; flex:none; width:30px; height:30px; background:#fff; color:#164de5; border-radius:2px; } .tv-go-box svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:square; stroke-linejoin:miter; transition:transform var(--sc-d-fast,160ms) cubic-bezier(.23,1,.32,1); } .tv-go:hover .tv-go-box svg { transform:translateX(2px); } .tv-go-light { background:#fff; color:#123fbf; } .tv-go-light:hover { background:#e8eeff; color:#123fbf; } .tv-go-light .tv-go-box { background:#164de5; color:#fff; } .tv-link { color:inherit; font-size:.9375rem; font-weight:650; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; } .tv-link:hover { color:var(--tv-blue); text-decoration-thickness:2px; } :is(.tv-dark,.tv-band) .tv-link:hover { color:inherit; } /* Links inside running copy, outside long reading pages */ .tv-inline-link { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; } .tv-inline-link:hover { color:var(--tv-blue); text-decoration-thickness:2px; } :is(.tv-dark,.tv-band) .tv-inline-link:hover { color:inherit; } .tv-person { display:flex; align-items:center; gap:14px; } .tv-person img { width:52px; height:52px; object-fit:cover; flex:none; background:#d8e1ef; } .tv-page .tv-person p { display:grid; gap:2px; margin:0; font-size:.9375rem; line-height:1.35; } .tv-person span { color:var(--tv-soft); font-size:.875rem; } .tv-band .tv-person span { color:#d4defc; } .tv-dark .tv-person span { color:var(--tv-night-soft); } .tv-person a { color:inherit; font-weight:650; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; } .tv-person a:hover { color:var(--tv-blue); } :is(.tv-dark,.tv-band) .tv-person a:hover { color:inherit; text-decoration-thickness:2px; } /* Long reading: blog posts and legal pages */ .tv-prose { max-width:68ch; font-size:1.125rem; line-height:1.7; } .tv-page .tv-prose :is(h2,h3) { margin:2.2em 0 .6em; font-weight:500; letter-spacing:-.035em; line-height:1.15; } .tv-page .tv-prose h2 { font-size:var(--tv-h2-reading); } .tv-page .tv-prose h3 { font-size:1.375rem; letter-spacing:-.02em; } .tv-page .tv-prose p { margin:0 0 1.1em; } .tv-prose a { color:var(--tv-blue); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; } .tv-prose ul { padding:0; list-style:none; } .tv-prose ul > li { position:relative; padding-left:24px; margin:0 0 .5em; } .tv-prose ul > li::before { content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; background:var(--tv-blue); } /* Tablet */ @media (max-width:1000px) { .tv-hero, .tv-head { grid-template-columns:1fr; gap:40px; } .tv-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Phone */ @media (max-width:640px) { .tv-page { --tv-hero-end:72px; --g:16px; --tv-h1-flagship:clamp(3.1rem,15.5vw,4.25rem); --tv-h1-inner:clamp(2.75rem,13vw,3.75rem); } .tv-hero { padding:24px 16px var(--tv-hero-end); } .tv-page .tv-h1 { margin-bottom:28px; } .tv-section { padding-left:16px; padding-right:16px; } .tv-grid, .tv-grid-2, .tv-steps { grid-template-columns:1fr; } .tv-rows > * { grid-template-columns:1fr; } .tv-actions { gap:22px; } } @media (prefers-reduced-motion:reduce) { .tv-go-box svg { transition:none; } } /* System rules that reach the older shared stylesheets (header, footer, plan prices). */ /* Header button: a compact solid button, so it reads as the one action in the header. */ body:is(.tv-page,.pv-page) .ap-header .nav-cta { background:#142744; border-color:#142744; color:#fff; } body:is(.tv-page,.pv-page) .ap-header .nav-cta:hover { background:#164de5; border-color:#164de5; color:#fff; } /* Footer: the Services column starts on the same line as every right-hand column (60% of the space after the 6% gap). */ body:is(.tv-page,.pv-page) .footer-main { grid-template-columns:56.4% minmax(0,1fr) minmax(0,1fr); column-gap:6%; } /* Prices use proportional figures, so "$119" doesn't open up around each 1. */ body:is(.tv-page,.pv-page) :is(.tvc-price, .tv-start-price, .plan-rate) strong { font-variant-numeric:lining-nums proportional-nums; } /* Phone: the header and footer share the content's gutter. */ @media (max-width:760px) { body:is(.tv-page,.pv-page) .ap-header { padding-left:var(--g); padding-right:var(--g); } body:is(.tv-page,.pv-page) .structure-footer { padding-left:var(--g); padding-right:var(--g); } body:is(.tv-page,.pv-page) .footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; } } @media (max-width:640px) { .pv-page { --g:16px; } } @media screen and (prefers-color-scheme:dark) { body:is(.tv-page,.pv-page) .ap-header .nav-cta { background:#eef3fc; border-color:#eef3fc; color:#142744; } body:is(.tv-page,.pv-page) .ap-header .nav-cta:hover { background:#8eafff; border-color:#8eafff; color:#0e1724; } /* Photos and screenshots dim a little so they don't glare on the dark page. */ body:is(.tv-page,.pv-page) main img { filter:brightness(.9); } } /* One closing band for every page that sells or informs: heading and line on the left, the next step on the right, the same padding above and below. The pricing band holds both ways to begin, each with its fine print. */ .tv-page .tv-close { display:grid; grid-template-columns:var(--tv-split); gap:40px var(--tv-split-gap); align-items:end; margin:0; padding:clamp(80px,9vw,128px) var(--g); } .tv-page .tv-close .tv-h2 { margin:0; max-width:11ch; color:#fff; } .tv-page .tv-close-copy > p { margin:24px 0 0; max-width:44ch; font-size:1.0625rem; line-height:1.6; color:#dbe4ff; } .tv-page .tv-close-copy > p a, .tv-page .tv-close-link, .tv-page .tv-close-door p a { color:#fff; font-weight:650; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; } .tv-page .tv-close-copy > p a:hover, .tv-page .tv-close-link:hover, .tv-page .tv-close-door p a:hover { color:#fff; text-decoration-thickness:2px; } .tv-close-act { display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px 32px; } .tv-close-act :is(form, .tv-start-link) { margin:0; } .tv-page .tv-close-link { font-size:1rem; padding:12px 0; } .tv-close-doors { display:grid; gap:28px; } .tv-close-door + .tv-close-door { padding-top:28px; border-top:1px solid rgba(255,255,255,.3); } .tv-close-door form { margin:0; } .tv-page .tv-close-door p { margin:14px 0 0; max-width:46ch; font-size:.9375rem; line-height:1.6; color:#dbe4ff; } .tv-page .tv-close-door .tv-close-link { display:inline-block; padding:0; } .tv-page .tv-close:has(.tv-close-doors) { align-items:start; } @media (max-width:760px) { .tv-page .tv-close { grid-template-columns:1fr; gap:32px; } .tv-close-act { display:grid; justify-items:start; gap:8px; } .tv-close-act :is(form, .tv-go), .tv-close-door :is(form, .tv-go) { width:100%; } .tv-page .tv-close .tv-go { justify-content:space-between; } } /* The fine print under a "Start your website" button: what the click commits you to. */ .tv-page .tv-fine { margin:12px 0 0; max-width:46ch; font-size:.875rem; line-height:1.55; color:var(--tv-soft); } .tv-page .tv-fine a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; } .tv-page .tv-fine a:hover { color:var(--tv-blue); } .tv-page :is(.tv-band,.tv-dark) .tv-fine { color:#dbe4ff; } .tv-page :is(.tv-band,.tv-dark) .tv-fine a:hover { color:#fff; text-decoration-thickness:2px; } .tv-page .tv-close-act :is(form, .tv-start-link) .tv-fine { max-width:30ch; } /* Studio pages (About, Contact, FAQ) in the shared style from tv.css. */ /* Hero tweaks for the older hero classes these pages still carry */ .tv-page .tv-hero.about-hero, .tv-page .tv-hero.faq-hero, .tv-page .tv-hero.contact-intro { min-height:0; margin:0; border:0; align-items:start; } .tv-page .tv-hero .tv-h1 { max-width:9em; } .tv-page .tv-hero > div > .tv-lead, .tv-page .tv-hero > .tv-lead { margin:0; font-size:1.125rem; max-width:46ch; } .tv-page .about-hero.tv-hero-solo .tv-h1 { max-width:10em; } .tv-page .faq-hero > .tv-lead { align-self:end; } /* About */ .tv-page .about-block.tv-section { margin:0; display:grid; grid-template-columns:var(--tv-split-mirror); gap:var(--tv-split-gap); align-items:start; } .tv-page .about-block .tv-h2 { font-size:var(--tv-h2-section); max-width:10ch; } .tv-page .about-block p { margin:0 0 18px; font-size:1.0625rem; line-height:1.65; color:var(--tv-soft); max-width:56ch; } .tv-page .about-block p:last-child { margin-bottom:0; } .tv-page .about-block strong { color:var(--tv-ink); font-weight:650; } .tv-page .about-block a { color:var(--tv-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; } .tv-page .about-block a:hover { color:var(--tv-blue); text-decoration-thickness:2px; } .tv-page .studio-designer { grid-template-columns:var(--tv-split-mirror); gap:var(--tv-split-gap); align-items:center; } .studio-portrait { margin:0; max-width:540px; } .studio-portrait img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%; border-radius:0; background:#dfe7f4; } .tv-page .studio-designer .tv-h2 { margin-bottom:clamp(28px,3vw,40px); max-width:12ch; font-size:var(--tv-h2-section); } .tv-page .studio-designer .founder-card { display:block; margin:0 0 22px; } .tv-page .studio-designer .founder-card p.studio-name { margin:0; font-size:.875rem; font-weight:500; line-height:1.5; color:var(--tv-soft); } .tv-page .studio-designer .studio-name strong { display:block; font-size:1.0625rem; font-weight:650; color:var(--tv-ink); } .tv-page .studio-designer .studio-name br { display:none; } .tv-page .studio-block > div p { padding-left:0; } /* Contact */ .tv-page .studio-main { display:block; padding:0; } .studio-contact { display:grid; grid-template-columns:var(--tv-split-mirror); gap:var(--tv-split-gap); align-items:start; padding-top:clamp(56px,6vw,88px); } .tv-page .contact-ways { margin:0; max-width:none; } .tv-page .contact-ways li { border-top:1px solid var(--tv-line); } .tv-page .contact-ways li:last-child { border-bottom:1px solid var(--tv-line); } .tv-page .contact-ways a { padding:22px 0; row-gap:4px; } .tv-page .contact-ways a span { font-size:.9375rem; color:var(--tv-soft); margin:0; } .tv-page .contact-ways a b { font-size:1.3125rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; overflow-wrap:anywhere; } .tv-page .contact-ways a:focus-visible, .tv-page .tv-prose a:focus-visible { outline:2px solid var(--tv-blue); outline-offset:3px; } .tv-page .contact-card { border:1px solid var(--tv-line); border-radius:0; box-shadow:none; background:var(--tv-card); padding:clamp(24px,4vw,48px); } .tv-page .contact-form { gap:24px; } .tv-page .contact-form label { font-size:.9375rem; font-weight:650; color:var(--tv-ink); } .tv-page .contact-form .optional { color:var(--tv-soft); } body.tv-page .contact-form input:not([type=checkbox]):not([type=radio]), body.tv-page .contact-form textarea { border:1px solid var(--tv-field-line); border-radius:0; box-shadow:none; background:var(--tv-card); color:var(--tv-ink); } .tv-page .contact-form input:not([type=checkbox]):hover, .tv-page .contact-form textarea:hover { border-color:var(--tv-soft); } .tv-page .contact-form input:focus-visible, .tv-page .contact-form textarea:focus-visible, .tv-page .contact-form input:focus, .tv-page .contact-form textarea:focus { outline:2px solid var(--tv-blue); outline-offset:1px; border-color:var(--tv-blue); } .tv-page .contact-form [aria-invalid=true] { border-color:var(--tv-error)!important; box-shadow:none; } .tv-page .contact-form [aria-invalid=true]:focus { outline-color:var(--tv-blue); } .tv-page .contact-form ::placeholder { color:var(--tv-soft); opacity:.7; } .tv-page .field-meta { color:var(--tv-soft); } .tv-page .error-summary { background:var(--tv-card); border:1px solid var(--tv-error); border-radius:0; } .tv-page .error-summary:focus { outline:2px solid var(--tv-blue); } .tv-page .contact-note { border-top:1px solid var(--tv-line); color:var(--tv-soft); } .tv-page .contact-note a { color:var(--tv-ink); } .tv-page .contact-form .tv-go { border:0; font:inherit; font-size:1.0625rem; font-weight:650; } .tv-page .contact-form .tv-go[aria-busy=true] { opacity:.72; cursor:progress; } .tv-page .contact-form .tv-go:focus-visible, .tv-page .contact-sent .text-button:focus-visible { outline:2px solid var(--tv-blue); outline-offset:3px; } .tv-page .contact-sent h2 { font-weight:500; letter-spacing:-.04em; } .tv-page .contact-sent p { color:var(--tv-soft); } .tv-page .sent-mark { stroke:var(--tv-blue); stroke-linecap:square; stroke-linejoin:miter; } .tv-page .sent-email, .tv-page .contact-sent .text-button { color:var(--tv-ink); } /* FAQ */ .tv-page .faq-layout { padding:clamp(56px,6vw,88px) var(--g) clamp(80px,9vw,128px); gap:clamp(40px,6vw,96px); grid-template-columns:260px minmax(0,1fr); } .tv-page .faq-index nav { display:block; border-top:1px solid var(--tv-line); gap:0; } .tv-page .faq-index nav a { display:block; min-height:0; padding:17px 0; border:0; border-bottom:1px solid var(--tv-line); border-radius:0; background:none; color:var(--tv-ink); font-size:.9375rem; font-weight:600; } .tv-page .faq-index nav a:hover { background:none; color:var(--tv-blue); } .tv-page .faq-index nav a:focus-visible, .tv-page .faq-help .ap-link:focus-visible { outline:2px solid var(--tv-blue); outline-offset:3px; } .tv-page .faq-help { margin-top:36px; padding:0; background:none; border-radius:0; } .tv-page .faq-help h2 { font-size:1.4375rem; font-weight:600; letter-spacing:-.025em; margin:0 0 10px; } .tv-page .faq-help p { font-size:.9688rem; line-height:1.55; color:var(--tv-soft); margin:0 0 14px; } .tv-page .faq-help .ap-link { padding:0; color:var(--tv-ink); font-size:.9375rem; font-weight:650; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; } .tv-page .faq-help .ap-link:hover { color:var(--tv-blue); } .tv-page .faq-group { margin-bottom:clamp(56px,6vw,88px); } .tv-page .faq-group:last-child { margin-bottom:0; } .tv-page .faq-group h2 { font-size:var(--tv-h2-section); line-height:1; font-weight:500; letter-spacing:-.05em; margin:0 0 clamp(28px,3vw,40px); } .tv-page .faq-questions { display:block; border-top:1px solid var(--tv-line); } .tv-page .faq-questions details { border:0; border-bottom:1px solid var(--tv-line); border-radius:0; background:none; overflow:visible; } .tv-page .faq-questions details[open] { border-color:var(--tv-line); } .tv-page .faq-questions summary { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:0; padding:24px 0; list-style:none; cursor:pointer; font-size:1.3125rem; font-weight:600; letter-spacing:-.02em; line-height:1.3; color:var(--tv-ink); } .tv-page .faq-questions summary::-webkit-details-marker { display:none; } .tv-page .faq-questions summary::after { content:"+"; flex:none; width:24px; text-align:center; font-size:1.75rem; font-weight:400; line-height:1; color:var(--tv-blue); } .tv-page .faq-questions details[open] > summary::after { content:"\2212"; } .tv-page .faq-questions summary:hover { color:var(--tv-blue); } .tv-page .faq-questions summary:focus-visible { outline:2px solid var(--tv-blue); outline-offset:2px; } .tv-page .faq-questions details > p, .tv-page .faq-questions .faq-answer p { margin:0 0 24px; padding:0; max-width:64ch; font-size:1.0625rem; line-height:1.65; color:var(--tv-soft); } .tv-page .faq-questions .faq-answer { padding:0; } .tv-page .faq-questions details a { color:var(--tv-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; } .tv-page .faq-questions details a:hover { color:var(--tv-blue); text-decoration-thickness:2px; } /* Tablet */ @media (max-width:1000px) { .tv-page .about-block.tv-section, .tv-page .studio-designer, .studio-contact { grid-template-columns:1fr; gap:40px; } .studio-portrait { max-width:420px; } .tv-page .about-block .tv-h2 { max-width:14ch; } .tv-page .faq-layout { grid-template-columns:1fr; display:grid; } .tv-page .faq-index { position:static; margin-bottom:0; } .tv-page .faq-index nav { display:grid; grid-template-columns:1fr 1fr; column-gap:32px; } .tv-page .faq-help { display:none; } } /* Phone */ @media (max-width:640px) { .tv-page .tv-hero.about-hero, .tv-page .tv-hero.faq-hero, .tv-page .tv-hero.contact-intro { padding:24px 16px var(--tv-hero-end); display:grid; } .tv-page .studio-main { padding:0; } .studio-contact { padding-left:16px; padding-right:16px; } .tv-page .contact-card { padding:24px 20px; } .tv-page .faq-layout { padding-left:16px; padding-right:16px; display:grid; } .tv-page .faq-index nav { grid-template-columns:1fr 1fr; column-gap:16px; } .tv-page .faq-index nav a { font-size:.875rem; } .tv-page .faq-questions summary { font-size:1.125rem; padding:20px 0; } .tv-page .faq-questions details > p, .tv-page .faq-questions .faq-answer p { font-size:1rem; } .tv-page .contact-form .tv-go { width:100%; justify-content:space-between; } } /* The captcha slot only takes room once the widget has drawn into it. */ .tv-page .contact-form .h-captcha:empty { display:none; } /* Contact: the side column stays in view beside the long form, and each way in carries the site's arrow box as its link cue. */ @media (min-width:1001px) { .tv-page .studio-contact .contact-aside { position:sticky; top:32px; align-self:start; } } .tv-page .contact-ways a { grid-template-columns:minmax(0,1fr) auto; column-gap:20px; color:var(--tv-ink); text-decoration:none; } .tv-page .contact-ways a::after { content:""; grid-column:2; grid-row:1 / 3; width:30px; height:30px; border-radius:2px; background:var(--tv-ink) no-repeat center / 12px 12px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h8.5M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E"); transition:background-color var(--sc-d-fast,160ms) ease, transform var(--sc-d-fast,160ms) ease; } .tv-page .contact-ways a:hover::after { background-color:#164de5; transform:translateX(2px); } .tv-page .contact-ways a:hover b { color:var(--tv-blue); } @media screen and (prefers-color-scheme:dark) { .tv-page .contact-ways a::after { background-color:#eef3fc; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h8.5M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='%23142744' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E"); } .tv-page .contact-ways a:hover::after { background-color:#8eafff; } } @media (prefers-reduced-motion:reduce) { .tv-page .contact-ways a::after { transition:none; } }