/* ============================================================ Web-Graphix — risograph web system, logo-ink edition World: warm paper ground, three spot inks drawn from the Web-Graphix logo family, multiplying where they overlap, halftone grain, cut-paper blocks, misregistration on hover. Seed 3f1a6afe (challenger: risograph-web-system). Inks: navy #071C4D · teal #3EBFA1 · press blue #1F5AD6 Paper: #FFF3E2 Note: teal never carries text on paper (contrast) — it works as fills, CTA grounds (navy text) and passes on navy. ============================================================ */ /* ---- Self-hosted fonts (OFL) -------------------------------- Anton + Schibsted Grotesk, served from this origin instead of Google Fonts. This removes a render-blocking third-party stylesheet (~1.3s on mobile per PageSpeed) and one third party. `font-display: optional` is deliberate: the two above-the-fold files are preloaded in the , so on a normal connection the real font paints immediately; on a slow one the browser keeps the fallback for the whole load and NEVER swaps late — which is what kills the font-driven layout shift (CLS was 0.908). Schibsted is a variable font, so one file covers weights 400–900. url() is relative to THIS stylesheet (/css/), hence ../assets/fonts/. */ @font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:optional;src:url(../assets/fonts/anton-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:optional;src:url(../assets/fonts/anton-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:optional;src:url(../assets/fonts/schibsted-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:optional;src:url(../assets/fonts/schibsted-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400;font-display:optional;src:url(../assets/fonts/schibsted-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400;font-display:optional;src:url(../assets/fonts/schibsted-italic-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ --paper:#FFF3E2; --paper-deep:#F4E6C9; --ink:#071C4D; /* navy — text + dense floods */ --ink-soft:#3D5290; /* thinned navy — secondary text */ --teal:#3EBFA1; /* logo teal — highlight ink */ --teal-deep:#1E8A73; /* teal at double ink density — text-safe */ --blue:#1F5AD6; /* press blue — secondary ink */ --err:#C81E4A; --line:2px solid var(--ink); --font-display:'Anton', 'Arial Narrow', sans-serif; --font-text:'Schibsted Grotesk', system-ui, sans-serif; --ease-print:cubic-bezier(.19,1,.22,1); } *{box-sizing:border-box} html{overflow-x:clip} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-text);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative} /* paper grain over everything. Plain alpha, deliberately not mix-blend-mode: a fixed, full-viewport blended layer makes the compositor re-blend the whole page on every scroll frame — the most expensive thing a decorative layer can do on a phone. The noise carries its own warm tint, so alpha alone reads the same on paper. */ body::after{content:'';position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")} a{color:var(--ink);text-decoration:none} p{margin:0;text-wrap:pretty} h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:.01em;line-height:.92;text-transform:uppercase;text-wrap:balance} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} input,select,textarea{font:inherit;color:inherit} img{max-width:100%} ::selection{background:var(--teal);color:var(--ink)} :focus-visible{outline:3px solid var(--blue);outline-offset:3px} .wrap{padding:0 44px;max-width:1280px;margin:0 auto;width:100%} @media(max-width:900px){.wrap{padding:0 20px}} /* ---- halftone + ink helpers -------------------------------- */ .ht{background-image:radial-gradient(currentColor 1.1px, transparent 1.3px);background-size:7px 7px} .ink-navy{color:var(--ink)} .ink-blue{color:var(--blue)} .ink-teal{color:var(--teal)} /* drawn arrow icon (one stroke weight everywhere) */ .arw{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.14em;flex:none} .arw path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square} /* misregistered display text: offset pass ink is parameterized */ .misreg{position:relative;color:var(--ink);--mis:var(--teal)} .misreg::before{content:attr(data-t);position:absolute;inset:0;color:var(--mis);z-index:-1;transform:translate(.045em,.05em);opacity:.9;transition:transform .28s var(--ease-print)} .misreg:hover::before{transform:translate(.09em,.095em)} /* registration / crop marks */ .regmark{position:absolute;width:26px;height:26px;pointer-events:none;opacity:.85} .regmark::before,.regmark::after{content:'';position:absolute;background:var(--ink)} .regmark::before{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)} .regmark::after{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)} /* rubber stamp label */ .stamp{display:inline-block;padding:7px 13px 6px;border:2px solid currentColor;font:700 12px/1.3 var(--font-text);letter-spacing:.18em;text-transform:uppercase;transform:rotate(-1.2deg);border-radius:3px; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='60'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.25'/%3E%3C/filter%3E%3Crect width='140' height='60' filter='url(%23r)'/%3E%3C/svg%3E");-webkit-mask-size:140px 60px; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='60'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.25'/%3E%3C/filter%3E%3Crect width='140' height='60' filter='url(%23r)'/%3E%3C/svg%3E");mask-size:140px 60px} /* corner mark variant: overlaps the hero corner instead of stacking above the h1 */ .stamp-corner{position:absolute;top:26px;right:44px;transform:rotate(6deg)} @media(max-width:900px){.stamp-corner{position:static;display:inline-block;margin-bottom:18px;transform:rotate(-1.2deg)}} /* ---- type scale -------------------------------------------- */ .d-poster{font-size:clamp(52px,7.6vw,116px)} .d-page{font-size:clamp(44px,6.4vw,92px)} .d-sec{font-size:clamp(34px,4.2vw,60px)} .d-sub{font-size:clamp(24px,2.6vw,34px)} .lede{font-size:19px;line-height:1.6;font-weight:500;max-width:56ch} .small{font-size:14px;line-height:1.55} .caps-label{font:700 13px/1.3 var(--font-text);letter-spacing:.16em;text-transform:uppercase} /* ---- buttons: riso plates with halftone offset shadow ------- */ .r-btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:17px 28px 16px;background:var(--teal);color:var(--ink);border:2.5px solid var(--ink);font:900 15px/1 var(--font-text);letter-spacing:.09em;text-transform:uppercase;transition:transform .18s var(--ease-print)} .r-btn::after{content:'';position:absolute;inset:-2.5px;z-index:-1;transform:translate(7px,7px);color:var(--blue);background-image:radial-gradient(currentColor 1.3px, transparent 1.5px);background-size:5px 5px;transition:transform .18s var(--ease-print)} .r-btn:hover{transform:translate(3px,3px)} .r-btn:hover::after{transform:translate(4px,4px)} .r-btn:active{transform:translate(7px,7px)} .r-btn:active::after{transform:translate(0,0)} .r-btn.blue{background:var(--blue);color:var(--paper)} .r-btn.blue::after{color:var(--teal)} .r-btn.navy{background:var(--ink);color:var(--paper)} .r-btn.navy::after{color:var(--teal)} .r-btn.ghost{background:var(--paper);color:var(--ink)} .r-btn[disabled]{opacity:.55;cursor:wait} /* ---- cards: printed plates --------------------------------- */ .plate{position:relative;background:var(--paper);border:var(--line);padding:30px 28px;transition:transform .22s var(--ease-print)} .plate::before{content:'';position:absolute;inset:-2px;z-index:-1;border:2px solid var(--teal);transform:translate(0,0);opacity:0;transition:.22s var(--ease-print)} .plate:hover{transform:translate(-2px,-2px)} .plate:hover::before{opacity:1;transform:translate(6px,6px)} .plate.tint-blue{background:color-mix(in srgb, var(--blue) 11%, var(--paper))} .plate.tint-teal{background:color-mix(in srgb, var(--teal) 16%, var(--paper))} .plate.tint-navy{background:color-mix(in srgb, var(--ink) 8%, var(--paper))} /* press-sheet rows: bordered list topology (anti card-grid) */ .sheet{border-top:var(--line)} .sheet-row{display:grid;grid-template-columns:92px 1fr;gap:26px;padding:26px 2px;border-bottom:var(--line);align-items:start} .sheet-num{font-family:var(--font-display);font-size:52px;line-height:.9} .sheet-row.term{grid-template-columns:220px 1fr} @media(max-width:700px){.sheet-row{grid-template-columns:56px 1fr;gap:16px}.sheet-row.term{grid-template-columns:1fr;gap:8px}.sheet-num{font-size:38px}} /* ---- fields: job-ticket rows ------------------------------- */ .t-field{width:100%;padding:14px 14px;background:var(--paper);border:2px solid var(--ink);font-size:16px;transition:box-shadow .18s var(--ease-print)} .t-field:focus{outline:none;box-shadow:4px 4px 0 var(--teal)} .t-field::placeholder{color:var(--ink-soft)} .t-label{display:block;font:700 12px/1.3 var(--font-text);letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px;color:var(--ink)} /* ---- header ------------------------------------------------ */ .hd{position:sticky;top:0;z-index:800;background:var(--paper);border-bottom:var(--line)} .hd-bar{display:flex;align-items:center;justify-content:space-between;height:74px;gap:28px} .hd-nav{display:flex;align-items:center;gap:28px;font:700 14px/1 var(--font-text);letter-spacing:.06em;text-transform:uppercase} .hd-link{position:relative;padding:6px 2px} .hd-link::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:5px;background:var(--teal);opacity:0;transform:skewX(-12deg);transition:.18s} .hd-link:hover::after,.hd-link[data-on='1']::after{opacity:1} .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:10px;border:var(--line)} .burger span{display:block;height:3px;background:var(--ink);transition:.25s} .burger[data-open='1'] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .burger[data-open='1'] span:nth-child(2){opacity:0} .burger[data-open='1'] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .m-nav{display:none;background:var(--paper);border-bottom:var(--line)} .m-nav a{display:block;padding:16px 22px;border-top:2px solid var(--ink);font-family:var(--font-display);font-size:22px;text-transform:uppercase} .m-nav a.sub{font-family:var(--font-text);font-weight:700;font-size:14px;letter-spacing:.1em;padding-left:40px} @media(max-width:900px){.hd-nav{display:none}.burger{display:flex}.m-nav{display:block}} /* ---- ink tape marquee -------------------------------------- */ @keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tape{border-top:var(--line);border-bottom:var(--line);background:var(--teal);overflow:hidden} .tape-track{display:flex;width:max-content;animation:tape 30s linear infinite;font-family:var(--font-display);font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:12px 0} .tape-half{display:flex;gap:38px;padding-right:38px;flex:none;align-items:center} .tape .dot{width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid var(--ink);flex:none} /* ---- client logo row (home) -------------------------------- A static wrapped row on paper-deep. This was a second scrolling feed running under the ink tape; it was replaced because two marquees on one page is filler, because the edge-fade mask sliced the first and last mark in half at every width, and because a travelling row makes the reader wait for a logo to come round. Held still, all nine marks are readable at once and the section needs no reduced-motion exception at all. Every logo ships as greyscale on a transparent ground (user-directed) and multiplies into the paper, so no client palette competes with the three inks; grayscale(1) is belt-and-braces for any logo added later in colour. contrast/brightness deepen the supplied 118-152 grey band, which sat too light on this cream to read as a printed mark. Optical heights come from CLIENTS[].h in js/data.js. */ .clients{background:var(--paper-deep);border-top:var(--line);border-bottom:var(--line);padding:40px 0 44px} .clients-label{color:var(--teal-deep);margin-bottom:30px} .clients-row{display:flex;flex-wrap:wrap;align-items:center;gap:34px 68px;list-style:none;margin:0;padding:0} .clients-row img{display:block;width:auto;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.3) brightness(.74)} @media(max-width:900px){ .clients{padding:32px 0 36px} .clients-row{gap:26px 44px;justify-content:space-between} .clients-row img{transform:scale(.86);transform-origin:center} } /* ---- discipline plates (home) ------------------------------ Three plates at deliberately unequal weight. Three identical cards in a row is the default agency grid and it reads as filler, so the lead discipline runs tall down the left with a larger ink disc and the other two stack beside it. Exactly three cells for three services: no empty tile. Below 820px it is one column and the discs even out. */ .ink-grid{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;gap:26px} .ink-grid>.ink-lead{grid-row:span 2} .ink-disc{width:60px;height:60px;border-radius:50%;border:2.5px solid var(--ink);margin-bottom:24px;flex:none} .ink-grid>.ink-lead .ink-disc{width:108px;height:108px;margin-bottom:32px} .ink-grid>.ink-lead .d-sub{font-size:clamp(28px,3.1vw,40px)} .ink-list{list-style:none;margin:4px 0 30px;padding:0;width:100%} .ink-list li{padding:12px 2px;border-bottom:2px solid color-mix(in srgb, var(--ink) 24%, transparent);font:700 13px/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase} .ink-list li:first-child{border-top:2px solid color-mix(in srgb, var(--ink) 24%, transparent)} @media(max-width:820px){ .ink-grid{grid-template-columns:1fr;gap:22px} .ink-grid>.ink-lead{grid-row:auto} .ink-grid>.ink-lead .ink-disc{width:60px;height:60px;margin-bottom:24px} } /* ---- live job plates (/work) ------------------------------- A .plate that is also a link out to the client's own site. The screenshot sits in its own pressed frame at the top of the card, so the client's masthead lands first and our copy sits under it. aspect-ratio holds the box at the shot's own 1200×525 before the file arrives — the img carries the same numbers, so nothing shifts either way. */ .job{padding:14px 14px 24px;display:block;color:var(--ink);text-decoration:none} .job-shot{display:block;border:2px solid var(--ink);background:var(--paper-deep);aspect-ratio:1200/525;overflow:hidden} .job-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center} .job-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 2px 10px} .job-dom{font:700 13px/1.3 var(--font-text);letter-spacing:.08em;color:var(--blue);border-bottom:3px solid var(--teal);padding-bottom:2px;white-space:nowrap} .job-note{display:block;margin:0 2px} .job:hover .job-dom{border-bottom-color:var(--blue)} /* Client mark on a hosting/branding plate, standing in for the client's name. The band holds a fixed height so marks of different proportions still sit on one line across the row, and a plate falling back to a name in type keeps the same measure. Marks multiply into the plate's tint the way they do into the paper on the home feed. */ .job-logo{display:flex;align-items:center;justify-content:center;text-align:center;min-height:72px;padding:6px 0} .job-logo img{display:block;width:auto;max-width:100%;mix-blend-mode:multiply;filter:grayscale(1)} /* ---- ink circles (separation chart) ------------------------ */ .sep{position:relative} .sep .disc{position:absolute;border-radius:50%;mix-blend-mode:multiply;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);text-transform:uppercase;cursor:pointer;transition:transform .3s var(--ease-print),opacity .3s;border:0} .sep .disc:hover{transform:scale(1.04)} .sep .disc[data-on='0']{opacity:.55} .sep .disc[data-on='1']{opacity:.92} /* ---- sections ---------------------------------------------- */ .sec{padding:96px 0} .sec-tight{padding:72px 0} .flood-navy{background:var(--ink);color:var(--paper)} .flood-blue{background:var(--blue);color:var(--paper)} .flood-teal{background:var(--teal);color:var(--ink)} .flood-navy ::selection,.flood-blue ::selection{background:var(--teal);color:var(--ink)} .rule{height:2px;background:var(--ink)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:32px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} @media(max-width:1000px){.grid4{grid-template-columns:repeat(2,1fr)}} @media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}.grid4{grid-template-columns:1fr}.sec{padding:64px 0}} /* index rail */ .rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:700;display:flex;flex-direction:column;gap:10px} .rail button{width:16px;height:16px;border:2px solid var(--ink);background:var(--paper);padding:0;transition:.2s} .rail button[data-on='1']{background:var(--teal)} .rail button:hover{background:var(--blue)} @media(max-width:1150px){.rail{display:none}} /* hero ink field: decorative on desktop, compact trio on mobile */ .hero-inks{position:absolute;right:-40px;top:10px;width:46%;max-width:560px;height:480px;pointer-events:none} .ink-trio{display:none;margin-top:30px} .ink-trio span{width:58px;height:58px;border-radius:50%;mix-blend-mode:multiply;display:block} .ink-trio span + span{margin-left:-20px} @media(max-width:900px){ .hero-inks{display:none} .ink-trio{display:flex} [data-grid="contact"]{grid-template-columns:1fr!important} [data-grid="fields"]{grid-template-columns:1fr!important} [data-grid="faq"]{grid-template-columns:1fr!important} .ft-grid{grid-template-columns:1fr!important} .sep{transform:scale(.82);transform-origin:top left} } /* ---- project workflow diagram (Fig. 2) --------------------- */ .flow{display:flex;align-items:flex-start;padding:36px 22px 28px;gap:6px} .flow-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;position:relative;padding:0 6px} .flow-dot{width:64px;height:64px;border-radius:50%;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;position:relative;z-index:1} .flow-step:not(:last-child)::after{content:'';position:absolute;top:31px;left:calc(50% + 38px);width:calc(100% - 76px);border-top:3px dashed var(--ink);opacity:.45} .flow-loop{display:flex;align-items:center;gap:12px;justify-content:flex-end;padding:0 28px 26px;color:var(--teal-deep)} .flow-loop .arw{transform:rotate(180deg)} @media(max-width:820px){ .flow{flex-direction:column;gap:22px;padding:30px 22px 16px} .flow-step{flex-direction:row;text-align:left;align-items:flex-start;gap:18px;padding:0} .flow-step:not(:last-child)::after{left:31px;top:70px;width:0;height:26px;border-top:0;border-left:3px dashed var(--ink)} .flow-dot{flex:none} .flow-loop{justify-content:flex-start;padding:0 22px 24px} } /* footer */ .ft{background:var(--ink);color:var(--paper);border-top:var(--line)} .ft a{color:var(--paper);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--teal)} .ft a:hover{text-decoration-color:var(--blue)} .colophon{border-top:2px solid rgba(255,243,226,.4);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px} /* error text on paper */ .err{color:var(--err);font-weight:700} /* reduced motion: lock the registration */ @media (prefers-reduced-motion:reduce){ /* Stopping the tape leaves a static band, so it has to be set like one: the second half only exists to make the loop seamless and the trailing dot only exists to separate the seam, so with nothing travelling both are dead weight. Drop them, then hold the nine services on one centred line — the tape is a single strip of ink and should read as one, so the type scales with the viewport rather than wrapping. Text width scales linearly with font-size (the letter-spacing is in em, the dots in em), so a vw font keeps the same fit at every width; the clamp ceiling stops it ballooning on wide screens and the floor is a safety net that should never bind, because below 1000px one line would mean type under 11px and that breakpoint wraps instead — see below. */ .tape-track{animation:none;width:auto;justify-content:center;padding:12px 24px;font-size:clamp(11px,1.15vw,18px)} .tape-half{flex:0 1 auto;min-width:0;justify-content:center;gap:clamp(10px,1.1vw,18px);padding-right:0;white-space:nowrap} .tape-half + .tape-half{display:none} .tape-half .dot:last-child{display:none} .tape .dot{width:.5em;height:.5em;border-width:max(1px,.1em)} /* The client feed's reduced-motion exception (studio instruction 2026-08-12, a stated WCAG 2.2.2 trade-off) is retired rather than overridden: the feed no longer animates for anyone, so there is nothing left to exempt. If the studio wants a travelling client row back, the trade-off has to be taken again deliberately. */ .misreg::before,.misreg:hover::before{transform:translate(.045em,.05em)} *{scroll-behavior:auto!important} } /* Tablet-and-down escape hatch for the stopped tape: nine services on one line below 1000px would need type under 11px, which is a worse answer than a wrap. Legibility wins over the single line here. */ @media (prefers-reduced-motion:reduce) and (max-width:1000px){ .tape-track{font-size:clamp(11px,1.6vw,15px)} .tape-half{flex-wrap:wrap;gap:clamp(10px,1.5vw,15px);row-gap:8px;white-space:normal} } /* no-JS fallback (tools/gen-seo.mjs writes the markup) — plain, on-paper, readable: it exists for crawlers and for a failed bundle, not for design. */ .ns{max-width:64ch;margin:0 auto;padding:72px 24px 96px;font-family:var(--font-text)} .ns h1{font-family:var(--font-display);font-size:clamp(34px,6vw,64px);line-height:.98;text-transform:uppercase;margin-bottom:22px} .ns p{margin-bottom:16px;line-height:1.7} .ns ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:8px} .ns a{color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} /* breadcrumb (service pages) — caps-label step, inherits the hero ink */ .crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:16px 0 20px;opacity:.85} .crumbs a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px} .crumbs a:hover{opacity:.62} .crumbs [aria-current]{opacity:.72} /* reCAPTCHA v3 — the floating badge is hidden, which Google permits only while the notice below stays visible in the form. Keep them together. */ .grecaptcha-badge{visibility:hidden} .recaptcha-note{margin-top:18px;font-size:13px;line-height:1.6;color:var(--ink-soft)} .recaptcha-note a{color:var(--ink-soft);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px} .recaptcha-note a:hover{color:var(--blue)} /* ---- consent banner: a slip pasted along the bottom edge ----- */ /* z-index sits above the sticky header (800). */ .ck{position:fixed;left:0;right:0;bottom:0;z-index:850;background:var(--paper);border-top:3px solid var(--ink);animation:ck-up .42s var(--ease-print) both} .ck::before{content:'';position:absolute;left:0;right:0;top:-9px;height:6px;color:var(--teal);background-image:radial-gradient(currentColor 1.3px,transparent 1.5px);background-size:5px 5px;opacity:.9} @keyframes ck-up{from{transform:translateY(101%)}to{transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.ck{animation:none}} .ck-in{max-width:1280px;margin:0 auto;padding:22px 44px;display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:space-between} .ck-copy{font-size:15px;line-height:1.65;max-width:62ch;margin:0} .ck-copy a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--teal);font-weight:700} .ck-copy a:hover{text-decoration-color:var(--blue)} .ck-act{display:flex;gap:14px;flex-shrink:0} .ck .r-btn{padding:14px 22px 13px;font-size:13px;cursor:pointer} @media(max-width:900px){.ck-in{padding:20px}} @media(max-width:700px){ .ck-in{gap:18px;align-items:stretch} .ck-act{width:100%} .ck .r-btn{flex:1;justify-content:center} .ck-copy{font-size:14px} } /* footer colophon link — inherits .ft a underline treatment */ .col-link{margin-left:10px} /* ---- privacy policy table ------------------------------------ */ .pv-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px} .pv-table th{text-align:left;font:700 12px/1.3 var(--font-text);letter-spacing:.14em;text-transform:uppercase;padding:0 16px 12px 0;border-bottom:var(--line);vertical-align:bottom} .pv-table td{padding:16px 16px 16px 0;border-bottom:2px solid rgba(7,28,77,.18);vertical-align:top;line-height:1.6} .pv-table tr:last-child td{border-bottom:none} .pv-table code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:color-mix(in srgb,var(--ink) 8%,var(--paper));padding:2px 6px;white-space:nowrap} /* ---- tier comparison grid (/sme) ----------------------------- */ /* The four plates share one set of rows via subgrid, so the stamp, title, price, every feature line and the CTA sit on the same baseline across all four columns. Without it a two-line title in one plate throws the whole comparison out of register and the prices no longer line up — which is the one thing a pricing table exists to do. 12 rows per plate: stamp, title, blurb, price, price caption, six feature lines, CTA. The