/* The HTML hidden attribute loses to any display rule on the element, and
* this stylesheet sets display on things it also hides in JavaScript. The
* result was ClientBook drawing its whole interface underneath the sign-in
* card for anyone not signed in -- no data, because that is behind row-level
* security, but every screen and every button. One line, everywhere. */
[hidden]{display:none !important;}
/* ============================================================== type scale ===
* This stylesheet declared 37 different font-sizes, which rendered as 19.
* Nineteen sizes is not a hierarchy -- it is nineteen separate decisions, and
* a reader cannot learn a rank order from it. getfluent.co.za uses six sizes
* and two weights, which is most of why it reads as designed.
*
* Eight steps, roughly a 1.25 ratio, and every font-size in the file now
* resolves to one of them. Adding a ninth means changing the scale on purpose
* rather than typing a number.
* ============================================================================ */
:root{
--t-micro:11px; /* uppercase labels, eyebrows, meta */
--t-small:13px; /* captions, small print, footnotes */
--t-body:16px; /* body copy */
--t-lead:20px; /* ledes and section intros */
--t-h3:25px; /* card headings */
--t-display:34px; /* prices and standalone numbers */
--t-h2:clamp(28px,3.3vw,42px); /* section headings -- theirs are 40 */
--t-h1:clamp(36px,5.4vw,64px); /* the hero, once per page */
}
:root{--forest:#123c32;--cream:#f2ebdd;--ink:#18201d;--sage:#a8b9a7;--clay:#bd6b4f;--paper:#faf8f2;--line:rgba(24,32,29,.16);--muted:#66716d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}.site-header{height:92px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(24px,5vw,80px);border-bottom:1px solid var(--line);position:relative;z-index:5}.brand,.footer-brand{position:relative;justify-self:start;font-size:var(--t-display);font-weight:700;letter-spacing:-.075em;line-height:.8}.brand i{font-style:normal}.brand:after{content:"";position:absolute;left:1px;top:48%;width:17px;height:3px;background:var(--clay);transform:rotate(-10deg)}.site-header nav{display:flex;gap:35px;font-size:var(--t-small)}.site-header nav a{padding:12px 2px}.pill{justify-self:end;border:1px solid currentColor;border-radius:30px;padding:11px 17px;display:flex;gap:18px;font-size:var(--t-small)}.home-hero{min-height:650px;padding:clamp(65px,8vw,120px) clamp(24px,7vw,110px)}.eyebrow,.section-label{text-transform:uppercase;letter-spacing:.14em;font-size:var(--t-micro)}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow>span{width:32px;height:1px;background:currentColor}.home-hero h1{font-size:var(--t-h1);line-height:.78;letter-spacing:-.07em;margin:54px 0;font-weight:700}.home-hero h1 em,.section-split h2 em{font-family:Newsreader,Georgia,serif;font-weight:500}.hero-bottom{display:flex;align-items:end;justify-content:space-between;margin-left:45%}.hero-bottom p{font-size:var(--t-lead);line-height:1.45;max-width:500px}.selected-work,.service-router,.contact-section{padding:120px clamp(24px,7vw,110px)}.section-split{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:end;margin-bottom:58px}.section-split h2{font-size:var(--t-h2);letter-spacing:-.065em;line-height:.9;margin:25px 0 0}.section-split>p{font-size:var(--t-body);line-height:1.6;max-width:520px;color:var(--muted)}.section-split.compact h2{font-size:var(--t-h2)}.client-work-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}.client-work-grid article{padding:28px;border-right:1px solid var(--line)}.client-work-grid article:last-child{border-right:0}.client-work-grid article>span,.built-tools small{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}.client-work-grid h3{font-size:var(--t-h3);letter-spacing:-.03em;margin:13px 0 7px}.client-work-grid p{color:var(--muted);line-height:1.55}.built-tools{display:grid;grid-template-columns:1.3fr repeat(3,1fr);border-top:1px solid var(--line);margin-top:90px}.built-tools>*{padding:30px;border-right:1px solid var(--line);min-height:240px}.built-tools h2{font-size:var(--t-display);letter-spacing:-.04em;margin:30px 0 10px}.built-tools p{color:var(--muted);line-height:1.55}.built-tools article{display:flex;flex-direction:column;position:relative}.built-tools article b{font-size:var(--t-lead);margin:45px 0 12px}.built-tools article>span{font-size:var(--t-small);line-height:1.5;color:var(--muted)}.built-tools article i{font-style:normal;position:absolute;right:26px;bottom:24px}.service-router{background:var(--paper)}.paths{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}.path{min-height:220px;padding:24px;border:0;border-right:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column}.path:last-child{border-right:0}.path:hover,.path.on{background:var(--sage)}.path .t{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.12em;opacity:.65}.path .q{font-size:var(--t-lead);line-height:1.35;margin:auto 0}.path .p{font-size:var(--t-micro)}.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.18);margin:30px 0}.tier{background:var(--forest);padding:22px}.tier .n{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em}.tier ul{padding-left:18px;line-height:1.6;opacity:.72}.go{display:inline-flex;border:1px solid currentColor;border-radius:30px;padding:12px 18px}.contact-section{background:var(--sage)}.formwrap{background:var(--paper);padding:clamp(24px,5vw,54px);max-width:900px;margin-left:auto}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}.field>span{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em}.field input,.field select,.field textarea{width:100%;padding:14px;border:1px solid var(--line);background:#fff;border-radius:0;color:var(--ink);font-size:var(--t-body)}.field textarea{min-height:115px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--forest);outline-offset:1px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.submit{border:0;background:var(--forest);color:var(--cream);padding:15px 20px;display:flex;justify-content:space-between;width:100%;font-weight:700}.submit[disabled]{opacity:.55}.privacy{font-size:var(--t-micro);color:var(--muted);line-height:1.6}.msg{padding:16px;border-left:3px solid var(--forest);background:#e1ebe3;margin-bottom:20px}.msg.err{border-color:var(--clay);background:#f0ded8}.wafloat{position:fixed;right:18px;bottom:18px;z-index:20;background:var(--clay);color:#fff;padding:13px 19px;border-radius:40px;box-shadow:0 8px 30px rgba(24,32,29,.2);font-weight:700}.wafloat span{margin-left:12px}footer{background:var(--ink);color:var(--cream);padding:60px clamp(24px,7vw,110px);display:grid;grid-template-columns:1fr 1fr;gap:30px;line-height:1.7}footer p{max-width:380px;opacity:.6}footer>div:last-child{align-self:end;opacity:.65;font-size:var(--t-small)}footer a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.site-header{grid-template-columns:1fr auto;height:76px}.site-header nav{display:none}.home-hero{min-height:auto}.hero-bottom{margin-left:0}.selected-work,.service-router,.contact-section,.proof-section,.section-split,.problem-strip,.proof-section,.client-work-grid{grid-template-columns:1fr}.client-work-grid article{border-right:0;border-bottom:1px solid var(--line)}.built-tools{grid-template-columns:1fr 1fr}.paths{grid-template-columns:1fr 1fr}.path:nth-child(2){border-right:0}.path:nth-child(-n+2){border-bottom:1px solid var(--line)}.tiers{grid-template-columns:1fr}.formwrap{margin-left:0}footer{grid-template-columns:1fr}}
@media(max-width:560px){.site-header{padding-inline:18px}.pill{padding:9px 12px}.home-hero{padding:55px 20px 70px}.home-hero h1{font-size:var(--t-h1);margin:48px 0;line-height:.82}.hero-bottom p{font-size:var(--t-body);max-width:78%}.pillar-grid,.built-tools,.paths{grid-template-columns:1fr}.built-tools>*{border-bottom:1px solid var(--line)}.path{border-right:0;border-bottom:1px solid var(--line)!important;min-height:180px}.selected-work,.service-router,.contact-section,.proof-section,.pricing-section,.problem-strip{padding:68px 20px}.section-split{margin-bottom:38px}.section-split h2,.proof-section h2,.problem-strip{gap:55px}.two{grid-template-columns:1fr}.formwrap{padding:24px 18px}footer{padding:50px 20px}.wafloat{right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Brief section 3: make the 12-pack visually recommended without hiding the 5.
A quiet marker on the heading, not a bigger card -- the 5-pack has to stay
the easy first purchase. */
/* ============================================================ launch brief ===
Sections 7 and 8 of the homepage brief. The identity is unchanged; what
changed is the order, the density, and where the eye is asked to go.
============================================================================ */
/* 7.2 hero. The brief asks for the offer, price and primary action inside the
first 720-800px, so the headline gives up some of its height to make room. */
.home-hero{min-height:auto;padding:clamp(48px,6vw,86px) clamp(24px,7vw,110px) clamp(56px,6vw,90px)}
.home-hero h1{font-size:var(--t-h1);line-height:.95;margin:26px 0 0;max-width:16ch}
.hero-bottom{margin-left:0;margin-top:34px;display:block}
.hero-bottom p{font-size:var(--t-lead);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn-primary,.btn-secondary{
display:inline-flex;align-items:center;justify-content:center;
min-height:52px;padding:0 26px;border-radius:30px;font-weight:700;font-size:var(--t-body);
}
.btn-primary{background:var(--forest);color:var(--cream)}
.btn-secondary{border:1px solid currentColor}
.btn-primary:hover,.btn-secondary:hover{filter:brightness(.94)}
.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
/* 7.3 the work cards no longer carry a 180px initials tile, so they need their
own breathing room rather than inheriting the tile's spacing. */
/* 7.5 how it works */
.how-section{padding:96px clamp(24px,7vw,110px);background:var(--paper)}
.how-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
border:1px solid var(--line);background:var(--cream)}
.how-list li{padding:26px;border-right:1px solid var(--line)}
.how-list li:last-child{border-right:0}
.how-list span{font-size:var(--t-micro);letter-spacing:.13em;color:var(--muted)}
.how-list b{display:block;font-size:var(--t-lead);line-height:1.3;letter-spacing:-.02em;margin:14px 0 8px}
.how-list p{margin:0;line-height:1.55;color:var(--muted);font-size:var(--t-body)}
/* 7.6 ClientBook, with the phone shell from section 8: close to 9:19.5, a
restrained bezel, and the real app's own layout inside it -- not a desktop
screenshot squashed into a portrait frame. */
.clientbook-section{padding:110px clamp(24px,7vw,110px);display:grid;
grid-template-columns:1fr auto;gap:8vw;align-items:center;background:var(--forest);color:var(--cream)}
.clientbook-section h2{font-size:var(--t-h2);letter-spacing:-.06em;line-height:.92;margin:22px 0}
.clientbook-section p{line-height:1.6;max-width:46ch;opacity:.8}
.clientbook-section .btn-primary{background:var(--cream);color:var(--forest)}
/* ------------------------------------------------------------- ClientBook --
* "the phone is stretched, and does not match the CB."
*
* Both true. The shell was 1:2.121 and the screen inside it 1:2.201, so the
* picture was a different shape from the phone around it, and neither was an
* iPhone (1:2.168). And the screen was warm cream on cream -- #f4f1e9 with
* #faf9f5 cards -- while ClientBook is cool green-grey: #edf1ec canvas,
* #fffdf9 surfaces, #d9dfd8 lines. Nothing about it matched the app.
*
* Everything below is lifted from clientbook-v2.css and clientbook-design.css.
* The sizes are explicit px on purpose: this is a picture of an application,
* not page copy, so it does not belong on the page's editorial type scale --
* putting it there collapsed every row to 11px and flattened the hierarchy the
* app actually has.
*/
.phone-shell{width:322px;height:672px;border-radius:38px;background:#0d2b24;
padding:11px;box-shadow:0 30px 70px rgba(0,0,0,.32);flex:none}
.phone-screen{width:300px;height:650px;border-radius:28px;background:#edf1ec;
color:#17231f;overflow:hidden;display:flex;flex-direction:column;padding:15px 13px 0;
font-family:Inter,"Avenir Next",Avenir,-apple-system,"Segoe UI",sans-serif;
font-size:13.5px;line-height:1.45;letter-spacing:-.005em}
.ps-head{margin-bottom:13px}
.ps-head b{display:block;font-size:17px;font-weight:700;letter-spacing:-.025em}
.ps-head span{font-size:12.5px;color:#69766f}
.ps-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.ps-stats div{background:#f5f3ed;border:1px solid #d9dfd8;border-radius:13px;padding:11px 12px}
.ps-stats small{display:block;font-size:10.5px;letter-spacing:.08em;
text-transform:uppercase;color:#69766f;margin-bottom:3px}
.ps-stats b{font-size:19px;font-weight:700;letter-spacing:-.03em}
.ps-scroll{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(#000 84%,transparent)}
.ps-day{display:flex;justify-content:space-between;align-items:baseline;
margin:17px 0 7px;padding-bottom:7px;border-bottom:1px solid #d9dfd8;
font-size:13px;font-weight:700}
.ps-count{font-size:11.5px;font-weight:400;color:#69766f}
/* The app's own row: when, who, what it costs. */
.brow{display:flex;align-items:center;gap:10px;background:#fffdf9;
border:1px solid #d9dfd8;border-radius:14px;padding:10px 12px;margin-bottom:7px}
.brow-when{display:flex;flex-direction:column;min-width:46px;font-variant-numeric:tabular-nums}
.brow-time{font-size:15px;font-weight:700;letter-spacing:-.02em}
.brow-mins{font-size:11px;color:#69766f}
.brow-who{flex:1;min-width:0}
.brow-name{font-size:14px;font-weight:700;letter-spacing:-.01em}
.brow-what{font-size:11.5px;color:#69766f}
.brow-money{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.brow-price{font-size:13px;font-weight:700}
.phone-screen .tag{font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:20px;
white-space:nowrap;letter-spacing:.02em}
.tag.paid{background:#dce9df;color:#315f44}
.tag.owing{background:#f5ead3;color:#9a691d}
.tag.pkg{background:#f2dfd6;color:#bd6b4f}
.ps-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#fffdf9;
border-top:1px solid #d9dfd8;margin-inline:-13px;padding:9px 8px 13px;
font-size:10.5px;text-align:center;color:#69766f}
.ps-tabs .on{background:#123c32;color:#fffdf9;border-radius:9px;padding:6px 0;font-weight:700}
/* 7.9 final CTA */
.final-cta{padding:100px clamp(24px,7vw,110px);text-align:center;background:var(--sage)}
.final-cta h2{font-size:var(--t-h2);letter-spacing:-.06em;line-height:.95;margin:0 0 30px}
.final-cta .hero-cta{justify-content:center}
@media(max-width:900px){
.how-list{grid-template-columns:1fr 1fr}
.how-list li{border-bottom:1px solid var(--line)}
.clientbook-section{grid-template-columns:1fr;gap:44px;justify-items:start}
}
@media(max-width:560px){
/* Brief section 8: hero price and main CTA before the first major scroll. */
.home-hero{padding:40px 20px 52px;min-height:auto}
.home-hero h1{margin:20px 0 0;line-height:1.02}
.hero-bottom{margin-top:24px}
.hero-bottom p{font-size:var(--t-body);max-width:none}
.btn-primary,.btn-secondary{width:100%}
.how-section,.clientbook-section,.final-cta{padding:60px 20px}
.how-list{grid-template-columns:1fr}
.how-list li{border-right:0}
.clientbook-section h2,.final-cta h2{font-size:var(--t-h2)}
/* Never wider than the screen; the shell scales instead of scrolling. */
.phone-shell{transform:scale(.86);transform-origin:top center;
margin-bottom:-94px}
}
footer a{opacity:.85}
/* Brief section 8: every button at least 44px. The header pill was 40. */
.pill{min-height:44px;align-items:center}
/* Brief section 8: "Remove the floating button if it overlaps content or
duplicates a visible sticky CTA on mobile." On a phone it does both -- it sat
over the "Work you can actually see" heading, and WhatsApp is now a hero
button and a final-CTA button. It stays on desktop, where it overlaps
nothing. */
@media(max-width:768px){ .wafloat{display:none} }
/* The canonical mark, used as artwork rather than rebuilt.
Brand/README.md: "Do not recreate the mark with text, pseudo-elements, CSS
transforms or a different slash." The old `.brand:after` bar was exactly
that -- a 17x3px rectangle at -10 degrees approximating a slash that is
really a drawn path at +9 degrees inside a custom Z. */
.brand img, .footer-brand img, .brandline img{
/* The wordmark is 650x160. height:1em with width:auto alone resolved to zero,
because .brand sits in a grid cell that shrink-wraps to its content -- the
image was waiting on a parent that was waiting on the image. An explicit
ratio breaks the circle. */
display:block; height:1em; width:auto; aspect-ratio:65/16; max-width:100%;
}
.brand, .footer-brand, .brandline{
display:inline-block; width:max-content; line-height:1;
}
.brand:after, .footer-brand:after, .brandline:after{ content:none !important; }
/* ================================================================== cards ===
* All nine sections ran edge to edge, separated by 1px hairlines on flat
* cream. That is a document's structure: correct, and with no depth in it.
* getfluent.co.za and tomorrowmedia.co.za both build the page out of rounded
* panels inset from the window, so the page has a margin and the content sits
* in something rather than being stretched across the glass.
*
* The change is structural, not decorative: main becomes the gutter, and each
* section becomes a panel with its own ground. Sections that already carried a
* colour keep it; the ones that were transparent get the light surface, so the
* cream page shows through between them as a gap.
* ============================================================================ */
main{
display:flex;flex-direction:column;
gap:clamp(10px,1.3vw,18px);
padding:clamp(10px,1.3vw,18px);
}
main>section{
border-radius:clamp(14px,1.8vw,26px);
/* The panels have rounded corners, so anything that used to bleed to the
window edge has to be clipped to the corner instead of over it. */
overflow:hidden;
/* Sections used to carry the divider between them. The gap does that now. */
border:0;
}
main>section.is-light{background:var(--paper)}
/* main now supplies the outer gutter, so each panel gives some of its own
padding back -- otherwise the copy column ends up 130px from the window. */
.selected-work,.service-router,.contact-section,.proof-section,.pricing-section,
.how-section,.final-cta{padding-inline:clamp(20px,5vw,76px)}
.home-hero{padding:clamp(48px,6vw,86px) clamp(20px,5vw,76px) clamp(56px,6vw,90px)}
/* The hairline rules inside the panels were doing the job the gaps now do. */
.built-tools{border-top:1px solid var(--line)}
@media(max-width:560px){
main{padding:8px;gap:8px}
main>section{border-radius:14px}
}
/* ============================================================== the ads =====
* "Work you can actually see" was followed by three cards of text, 191px tall.
* These are the real files from Companies/Zuiden/Studio/Campaigns, at 1080x1350
* -- SVG, so they are 4KB each instead of 600KB and stay sharp at any size.
* ============================================================================ */
@media(max-width:900px){}
@media(max-width:560px){}
/* --------------------------------------------------------------- the tools --
* .selected-work was carrying adverts, the client list and the tools in one
* 2,171px panel. The tools are a different subject and now say so. */
.tools-section{padding:clamp(56px,6vw,88px) clamp(20px,5vw,76px)}
.tools-section .built-tools{border-top:0;margin-top:0}
@media(max-width:900px){
.home-hero{grid-template-columns:1fr}
.home-hero>.eyebrow,.home-hero>h1,.hero-bottom, }
/* ------------------------------------------------------- panel adjustments --
* Two consequences of turning the bands into panels, neither visible before:
*
* 1. .final-cta and .contact-section were both sage and adjacent, so they read
* as one panel with a crack across it. The final call to action takes the
* forest instead -- it is the last thing asked of the reader and it should
* carry more weight than the form below it anyway.
* 2. 120px of vertical padding was right against the window edge. Inside a
* panel that already has its own edge it leaves a visible void at the foot
* of the shorter column.
*/
.final-cta{background:var(--forest);color:var(--cream)}
.final-cta .btn-secondary{border-color:currentColor}
.final-cta .btn-primary{background:var(--cream);color:var(--forest)}
.selected-work,.service-router,.contact-section,.proof-section,
.final-cta{padding-block:clamp(56px,6vw,88px)}
.clientbook-section{padding-block:clamp(64px,7vw,100px)}
/* Now inside column one rather than spanning the foot of the section. */
/* ============================================================== the hero ====
* Isak: "nothing stands out, there is no wow moment."
*
* The counting missed the obvious one. getfluent.co.za opens on a forest card
* and tomorrowmedia.co.za on a dark gradient card, both inset on a light page.
* This page opened cream type on a cream panel on a cream background -- the
* flattest first screen available -- and no amount of type scale fixes that.
*
* So the hero takes the forest, the mark sits in it at size, and every panel
* after it reads as the quiet following a loud opening.
*/
.home-hero{
position:relative;overflow:hidden;
background:var(--forest);color:var(--cream);
grid-template-columns:minmax(0,1fr);
padding:clamp(56px,7vw,104px) clamp(20px,5vw,76px) clamp(52px,6vw,92px);
}
.home-hero h1{max-width:19ch}
.home-hero .eyebrow>span{background:var(--sage)}
.home-hero .eyebrow{color:var(--sage)}
.hero-bottom{position:relative;z-index:1;max-width:60ch}
.home-hero .btn-primary{background:var(--cream);color:var(--forest)}
.home-hero .btn-secondary{border-color:rgba(242,235,221,.5)}
/* Bleeds off the right edge and is clipped by the panel's own radius, so the
mark reads as texture the panel is cut from rather than a pasted-on logo. */
.hero-mark{
position:absolute;right:-4%;top:50%;transform:translateY(-50%);
width:min(430px,36%);height:auto;pointer-events:none;
}
@media(max-width:900px){
.hero-mark{right:-26%;top:auto;bottom:-10%;transform:none;width:82%}
.home-hero h1{max-width:none}
}
/* ------------------------------------------------------------- client work --
* Three flat bordered boxes with a sentence in each. The chips give the cards
* something to read at a glance -- what was actually built -- without claiming
* anything the sentence did not already say.
*
* Logos and links are the missing half and are deliberately not faked: every
* client folder in the vault carries "do not publish their work anywhere public
* until display permission is confirmed", and not one website URL is recorded.
*/
/* ============================================================== the packs ===
* "i don't like the what it costs page."
*
* It was a heading in one column and four equal entries stacked as prose in the
* other -- so the two things a person is actually choosing between were the same
* weight as the two things that are quoted per job, and comparing them meant
* reading four paragraphs. The packs are now side by side with the same five
* lines each, so the only open question is five or twelve.
*/
.pricing-section{background:var(--forest);color:var(--cream)}
.pricing-section .section-split p{color:rgba(242,235,221,.72)}
.pricing-section .section-label{color:var(--sage)}
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,18px)}
.pack{
display:flex;flex-direction:column;
background:rgba(242,235,221,.06);border:1px solid rgba(242,235,221,.18);
border-radius:18px;padding:clamp(24px,2.6vw,34px);
}
.pack.is-rec{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.pack.is-rec .section-label{color:var(--muted)}
.pack.is-rec ul li{border-color:var(--line)}
.pack-price{display:block;font-size:var(--t-h2);font-weight:700;
letter-spacing:-.055em;line-height:1;margin:14px 0 4px}
.pack-per{font-size:var(--t-small);opacity:.66}
.pack ul{list-style:none;margin:22px 0 26px;padding:0;flex:1}
.pack ul li{font-size:var(--t-body);padding:11px 0;
border-top:1px solid rgba(242,235,221,.16)}
.pack .btn-primary,.pack .btn-secondary{width:100%}
.rec-tag{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:20px;
background:var(--clay);color:#fff;font-size:var(--t-micro);font-weight:700;
text-transform:uppercase;letter-spacing:.1em;vertical-align:middle}
/* Quoted per job, not per pack -- a footnote to the decision above, so it is
drawn as one rather than as two more things to choose between. */
.quoted{display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(12px,1.4vw,18px);margin-top:clamp(12px,1.4vw,18px)}
.quoted article{border:1px solid rgba(242,235,221,.18);border-radius:18px;
padding:clamp(20px,2.2vw,26px)}
.quoted h3{margin:0;font-size:var(--t-body);font-weight:700}
.quoted b{display:block;font-size:var(--t-h3);letter-spacing:-.03em;margin:6px 0 8px}
.quoted p{margin:0;font-size:var(--t-small);color:rgba(242,235,221,.7);line-height:1.6}
.pricing-note{margin:clamp(26px,3vw,40px) 0 0;padding-top:20px;
border-top:1px solid rgba(242,235,221,.2);
font-size:var(--t-small);color:rgba(242,235,221,.62)}
@media(max-width:760px){
.packs,.quoted{grid-template-columns:1fr}
}
/* ------------------------------------------------------- client work, again --
* Isak gave permission on 3 September: "i give you permission, they gave it to
* me, just do it." The URLs came off the Netlify site list -- each one checked
* for a 200 and its own page title before it went in. Lindley has a logo and no
* site yet, so it says so instead of linking nowhere.
*/
/* Staevi sets its own name in type on its own site rather than using a mark. */
.client-wordmark{font-size:var(--t-h3);font-weight:700;letter-spacing:-.05em}
/* ------------------------------------------------------------------ tools ---
* "tools by zuiden feels a bit weird to me, maybe it is too empty, too big,
* missing something ... maybe like the z logo filling the green cards but like
* a faded z" -- three widely spaced boxes with two lines in each. Forest cards
* with the mark washed into the corner, and the mark answers on hover.
*/
.tools-section{background:transparent;padding-block:clamp(52px,5.4vw,84px)}
.built-tools{display:grid;grid-template-columns:1.05fr repeat(3,1fr);
gap:clamp(10px,1.3vw,16px);border-top:0;margin-top:0;align-items:center}
.built-tools>*{border-right:0;min-height:0;padding:0}
.built-tools-intro{padding:clamp(6px,1vw,14px) clamp(14px,1.6vw,22px) 0 0}
.built-tools-intro h2{font-size:var(--t-h3);letter-spacing:-.03em;margin:14px 0 10px}
.built-tools-intro p{color:var(--muted);font-size:var(--t-body);line-height:1.55}
.built-tools article{
position:relative;overflow:hidden;
background:var(--forest);color:var(--cream);
border-radius:18px;padding:clamp(22px,2.2vw,28px);
min-height:196px;display:flex;flex-direction:column;
}
.built-tools article small{font-size:var(--t-micro);letter-spacing:.13em;
text-transform:uppercase;color:var(--sage);position:relative;z-index:1}
.built-tools article b{position:relative;z-index:1;margin:auto 0 10px;
font-size:var(--t-h3);letter-spacing:-.03em}
.built-tools article span{position:relative;z-index:1;font-size:var(--t-small);
line-height:1.55;color:rgba(242,235,221,.72)}
/* Washed into the bottom-right and clipped by the card, so the mark is the
card's texture rather than a badge sitting on it. It leans in on hover. */
.tool-z{
position:absolute;right:-30%;bottom:-34%;width:118%;height:auto;
opacity:.09;pointer-events:none;
transition:opacity .4s ease,transform .4s ease;
}
.built-tools article:hover .tool-z{opacity:.17;transform:translate(-5%,-5%)}
@media(prefers-reduced-motion:reduce){.tool-z{transition:none}}
@media(max-width:1100px){.client-work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.built-tools{grid-template-columns:1fr 1fr}}
@media(max-width:620px){
.built-tools article{min-height:190px}
}
/* ------------------------------------------------------- why, beside the price
* Was its own panel, "The Zuiden way / Less theatre. More useful.", a numbered
* list of three sitting a screen away from "How it works / Four steps. No
* marketing theatre." -- two numbered lists with the same word in both
* headlines. The steps answer how the job runs; these three are an argument
* about the price, so they now sit under it.
*/
.why{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.why li{border-top:1px solid rgba(242,235,221,.22);padding-top:16px}
.why b{display:block;font-size:var(--t-body);margin-bottom:6px}
.why span{font-size:var(--t-small);color:rgba(242,235,221,.7);line-height:1.6}
@media(max-width:760px){.why{grid-template-columns:1fr;gap:0}
.why li{padding-block:16px}}
/* ------------------------------------------------------------- movement -----
* Panels rise as they arrive. The class is added by JavaScript, so a page with
* JavaScript off shows everything -- nothing is hidden by CSS alone.
*/
.will-rise{opacity:0;transform:translateY(22px);
transition:opacity .6s ease,transform .6s cubic-bezier(.22,.68,.34,1)}
.will-rise.is-in{opacity:1;transform:none}
/* The diary moves itself once when the phone comes into view. */
.ps-track{will-change:transform}
@media(prefers-reduced-motion:reduce){
.will-rise,.will-rise.is-in{opacity:1;transform:none;transition:none}
.ps-track{transition:none!important;transform:none!important}
}
/* ================================================================ footer ====
* One enormous wordmark, then tagline and nav, a hairline, and the small print
* -- the shape Tomorrow Media close on. Theirs is the biggest thing on their
* page and it works because the mark can carry it. So can this one.
*/
footer{background:var(--ink);color:var(--cream);display:block;
padding:clamp(56px,6vw,92px) clamp(20px,5vw,76px) clamp(30px,3vw,44px)}
.foot-mark{display:block;margin-bottom:clamp(34px,4vw,58px)}
.foot-mark svg,.foot-mark img{display:block;width:100%;height:auto}
/* The slash is a path, so it can be drawn. It cuts across the Z once, when the
footer arrives -- the mark performing the thing it is a picture of. */
.foot-slash{transform-box:fill-box;transform-origin:left center;
transform:scaleX(0);opacity:0}
footer.is-in .foot-slash{
animation:cut .62s cubic-bezier(.2,.8,.3,1) .18s forwards}
@keyframes cut{
0%{transform:scaleX(0);opacity:1}
100%{transform:scaleX(1);opacity:1}
}
.foot-row{display:flex;flex-wrap:wrap;gap:18px 40px;
align-items:baseline;justify-content:space-between}
.foot-line{margin:0;font-size:var(--t-lead);letter-spacing:-.02em;max-width:34ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:var(--t-body)}
.foot-nav a,.foot-fine a{opacity:.72}
.foot-nav a:hover,.foot-fine a:hover{opacity:1}
.foot-fine{margin-top:clamp(26px,3vw,40px);padding-top:20px;
border-top:1px solid rgba(243,239,228,.18);font-size:var(--t-small)}
.foot-fine p{margin:0;opacity:.62}
.foot-fine p:last-child{display:flex;flex-wrap:wrap;gap:6px 22px;opacity:1}
@media(prefers-reduced-motion:reduce){
.foot-slash{transform:none;opacity:1;animation:none}
footer.is-in .foot-slash{animation:none}
}
@media(max-width:620px){
.foot-row{flex-direction:column;gap:14px}
.foot-line{font-size:var(--t-body)}
}
/* ================================================================ header ====
* Every section on this page is an inset panel. The header was the one thing
* still bolted to the window edges with a rule under it, which is what made it
* read as a different page from the rest. Tomorrow Media float theirs as a pill
* above the hero; so does this one now, and it contracts once you are past the
* hero so it stops competing with what you are reading.
*/
.site-header{
position:sticky;top:clamp(8px,1.2vw,14px);z-index:40;
margin:clamp(8px,1.2vw,14px) clamp(10px,1.3vw,18px) 0;
height:auto;padding:13px clamp(16px,2vw,26px);
background:var(--paper);border:1px solid var(--line);border-bottom:1px solid var(--line);
border-radius:999px;
box-shadow:0 10px 34px rgba(24,32,29,.06);
transition:box-shadow .28s ease,background .28s ease;
}
.site-header.is-tight{box-shadow:0 14px 40px rgba(24,32,29,.13)}
.site-header .brand img{height:34px;width:auto;aspect-ratio:1008/318;display:block}
/* main carries the page gutter; the header supplies its own, and the gap
between them is what makes the pill read as floating rather than stacked. */
main{padding-top:clamp(10px,1.3vw,18px)}
.site-header nav a{position:relative;padding-block:8px}
.site-header nav a::after{content:"";position:absolute;left:2px;right:2px;bottom:2px;
height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
transition:transform .24s ease}
.site-header nav a:hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.site-header nav a::after{transition:none}}
/* ====================================================== the monogram field ==
* Isak: "the background z was meant for that page like a bunch of z's faded in
* the background in random spots or like Louise Vutton you know."
*
* A repeating tile rather than scattered elements -- that is what makes a
* monogram read as fabric instead of as decoration that happened to land
* somewhere. Two marks per tile at different sizes and angles so the eye cannot
* find the repeat quickly. It is drawn into the background, so no extra DOM and
* nothing for a screen reader to announce.
*/
.service-router{
position:relative;
background:var(--forest);color:var(--cream);
}
/* The monogram field, on the panel it was always meant for. */
.clientbook-section{position:relative;overflow:hidden}
.clientbook-section::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:url("img/zuiden-monogram.svg?v=5");
background-size:260px 260px;
}
.clientbook-section>*{position:relative;z-index:1}
.service-router .section-label,.service-router h2{color:var(--cream)}
.service-router .section-split>p{color:rgba(243,239,228,.72)}
/* --------------------------------------------------- the questions, shown ---
* Four cards that already answer themselves. No click, no expansion, no second
* price list -- and no empty grid cell where a third tier used to be missing.
*/
.paths{display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(10px,1.3vw,16px);border:0}
.path{
display:flex;flex-direction:column;text-align:left;
background:rgba(243,239,228,.055);border:1px solid rgba(243,239,228,.16);
border-radius:16px;padding:clamp(22px,2.4vw,30px);min-height:0;
transition:background .22s ease,border-color .22s ease;
}
.path:hover{background:rgba(243,239,228,.09);border-color:rgba(243,239,228,.3)}
.path .t{font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;
color:var(--sage)}
.path .q{font-size:var(--t-lead);line-height:1.32;letter-spacing:-.02em;
margin:16px 0 12px;max-width:26ch}
.path .a{margin:0 0 20px;font-size:var(--t-small);line-height:1.65;
color:rgba(243,239,228,.72);max-width:44ch}
.path .foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px 20px;
align-items:baseline;justify-content:space-between;
border-top:1px solid rgba(243,239,228,.16);padding-top:16px}
.path .p{font-size:var(--t-small);font-weight:700}
.path .go{display:inline-flex;gap:7px;align-items:center;border:0;padding:0;
font-size:var(--t-small);font-weight:700;color:var(--cream)}
.path .go span{transition:transform .22s ease}
.path:hover .go span{transform:translateX(4px)}
/* ------------------------------------------------------- cost, simplified ---
* "this is where people decide" -- so the panel now holds the decision and one
* line about everything else, instead of four competing price entries.
*/
.pricing-section h2 .quiet{color:var(--sage);display:block;margin-top:4px}
.pricing-section .section-split{grid-template-columns:1fr;margin-bottom:clamp(30px,3.6vw,52px)}
.pricing-section h2{max-width:22ch}
.also{margin:clamp(26px,3vw,40px) 0 0;font-size:var(--t-body);
color:rgba(243,239,228,.72);max-width:62ch}
.also a{font-weight:700;color:var(--cream);white-space:nowrap}
@media(max-width:760px){.paths{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
.site-header,.path,.path .go span{transition:none}
}
/* ============================================== size, measured not guessed ==
* "what else we build is too large, not a pleasant read ... it's not good to
* have an overlapping or a card too big for full screen."
*
* Both panels were over 1,000px against a 1,000px viewport, so neither could
* ever be seen whole. The question cards were 622px wide and 294px tall;
* Tomorrow Media's are 280-367 wide and 200 tall, and Stripe sets running text
* in 299-359px columns. A 622px line of 20px type is roughly 70 characters,
* which is past the top of the comfortable range before the card is even full.
*/
.paths{grid-template-columns:repeat(4,1fr)}
.path{padding:22px 22px 20px;border-radius:14px}
.path .q{font-size:var(--t-body);line-height:1.38;margin:12px 0 10px;max-width:none}
.path .a{font-size:var(--t-small);line-height:1.6;margin:0 0 16px;max-width:none}
.path .foot{padding-top:13px;gap:6px 12px}
.path .p,.path .go{font-size:12.5px}
/* Section padding was set when these were full-bleed bands against the window.
Inside a panel that already has its own edge it is simply height. */
.selected-work,.service-router,.contact-section,.pricing-section{
padding-block:clamp(48px,4.6vw,72px)}
.how-section,.tools-section{padding-block:clamp(44px,4.2vw,64px)}
.clientbook-section{padding-block:clamp(48px,4.6vw,72px)}
.section-split{margin-bottom:clamp(24px,2.6vw,36px)}
.section-split>p{font-size:var(--t-body);max-width:46ch}
/* Running text, held to the measured column. */
.pricing-section h2,.service-router h2,.selected-work h2,
.how-section h2,.clientbook-section h2{max-width:18ch}
.also{max-width:52ch;font-size:var(--t-small)}
.why b{font-size:var(--t-small)}
.why span{font-size:12.5px}
@media(max-width:1180px){.paths{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.paths{grid-template-columns:1fr}}
/* =============================================== size, measured not guessed ==
* "what else we build is too large, not a pleasant read ... it's not good to
* have an overlapping or a card too big for full screen."
*
* Both that panel and the cost panel were over 1,000px against a 1,000px
* viewport, so neither could ever be seen whole. The question cards were 622px
* wide and 294px tall against Tomorrow Media's 280-367 x 200. A 622px line of
* 20px type runs about 70 characters -- past the comfortable range before the
* card is even full. Stripe sets its running text in 299-359px columns.
*/
.paths{grid-template-columns:repeat(4,1fr)}
.path{padding:20px 20px 18px;border-radius:14px}
.path .q{font-size:var(--t-body);line-height:1.4;margin:11px 0 9px;max-width:none}
.path .a{font-size:12.5px;line-height:1.62;margin:0 0 15px;max-width:none}
.path .foot{padding-top:12px;gap:6px 12px}
.path .p,.path .go{font-size:12.5px}
/* This padding was set when the sections were bands against the window edge.
Inside a panel that already has an edge, it is only height. */
.selected-work,.service-router,.contact-section,.pricing-section{
padding-block:clamp(46px,4.4vw,70px)}
.how-section,.tools-section{padding-block:clamp(42px,4vw,62px)}
.clientbook-section{padding-block:clamp(46px,4.4vw,72px)}
.section-split{margin-bottom:clamp(22px,2.4vw,34px);align-items:start;gap:6vw}
.section-split>p{font-size:var(--t-body);max-width:44ch}
.section-split h2{max-width:17ch;line-height:.98}
.also{max-width:52ch;font-size:var(--t-small)}
.why b{font-size:var(--t-small)}
.why span{font-size:12.5px}
.built-tools-intro h2{max-width:16ch}
@media(max-width:1180px){.paths{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.paths{grid-template-columns:1fr}}
/* The cost panel is the decision, so it holds the decision and little else.
Its heading gets a wider measure than the others -- at 17ch it wrapped to
five lines, which is 250px of panel before a price appears. */
.pricing-section h2{max-width:26ch}
.pricing-section .pack{padding:clamp(22px,2.2vw,30px)}
.pricing-section .pack li{padding-block:9px}
/* The three claims, now immediately before the ask. */
.final-cta .why{max-width:1000px;margin:0 auto clamp(26px,3vw,38px);text-align:left}
.final-cta .why li{border-color:rgba(243,239,228,.22)}
.final-cta .why span{color:rgba(243,239,228,.7)}
/* The copy column was 1fr (~900px) holding a 390px block, so the panel had a
500px hole in the middle of it. Column sized to the content instead. */
.clientbook-section{grid-template-columns:minmax(320px,.62fr) auto;
gap:clamp(30px,4vw,70px);justify-content:space-between}
.clientbook-section p{max-width:38ch}
.clientbook-section::before{opacity:1}
/* space-between was spreading two narrow tracks across a wide panel, which is
how a 370px hole opened between the copy and the phone. The column earns its
width instead: four lines naming screens that actually exist in the app. */
.clientbook-section{grid-template-columns:minmax(0,1fr) auto;justify-content:normal}
.cb-list{list-style:none;margin:clamp(22px,2.4vw,32px) 0 clamp(24px,2.6vw,34px);padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;max-width:46ch}
.cb-list li{border-top:1px solid rgba(243,239,228,.2);padding-top:12px}
.cb-list b{display:block;font-size:var(--t-small);margin-bottom:4px}
.cb-list span{font-size:12.5px;line-height:1.55;color:rgba(243,239,228,.68)}
@media(max-width:620px){.cb-list{grid-template-columns:1fr;gap:12px}}
/* The copy still has to win. A soft wash from the left keeps the text column
readable without flattening the pattern behind the phone. */
.clientbook-section::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,rgba(18,60,50,.82) 0%,rgba(18,60,50,.55) 38%,rgba(18,60,50,0) 62%);
}
/* ============================================================ performance ===
* content-visibility lets the browser skip layout and paint for panels that
* are still off screen. contain-intrinsic-size gives it a height to reserve so
* the scrollbar does not jump as each one is rendered for the first time. It
* matters most on a phone, which is where the work is expensive.
*
* The hero is deliberately excluded: it is on screen immediately, and skipping
* it would delay the first paint rather than help it.
*/
main>section:not(.home-hero):not(.trusted){
content-visibility:auto;
contain-intrinsic-size:auto 700px;
}
/* The phone mock and the footer mark are the two large composited things on
the page. Telling the browser they are their own paint layers keeps the
diary's scroll and the footer's slash off the main thread. */
.phone-shell,.foot-mark{contain:paint}
/* ------------------------------------------------------------ phone paint --
* Large-radius shadows are the most expensive thing left to paint, and a phone
* GPU feels them on every scroll. They are decoration, so they get cheaper on
* small screens rather than disappearing.
*/
@media(max-width:760px){
.site-header{box-shadow:0 4px 14px rgba(24,32,29,.05)}
.site-header.is-tight{box-shadow:0 6px 18px rgba(24,32,29,.1)}
.phone-shell{box-shadow:0 12px 28px rgba(0,0,0,.22)}
.wafloat{box-shadow:0 4px 14px rgba(24,32,29,.16)}
/* Panels are shorter on a phone, so reserve less and let the browser skip
more of them. */
main>section:not(.home-hero){contain-intrinsic-size:auto 560px}
}
/* A phone that has asked for less motion should not be running a 22-second
diary scroll in the background either. Already handled in JS, stated here
too so the intent is not only in one place. */
@media(prefers-reduced-motion:reduce){
.ps-track{transition:none!important;transform:none!important}
}
/* ================================================ tools, folded in as proof ==
* "we build useful tools and what else we build can combine in some sort of
* way." They were two panels a screen apart, both labelled "Tools by Zuiden",
* with near-identical headings: "We don't only make the ad" and "We build
* useful tools too."
*
* The four questions are the offer. The three running systems are the evidence
* that the offer is real, so they sit underneath it rather than in a panel of
* their own arguing the same point.
*/
.already{margin-top:clamp(30px,3.4vw,46px);
border-top:1px solid rgba(243,239,228,.18);padding-top:clamp(22px,2.4vw,32px)}
.already-lead{margin:0 0 18px;font-size:var(--t-small);color:rgba(243,239,228,.72);max-width:52ch}
.service-router .built-tools{grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,14px)}
.service-router .built-tools article{min-height:0;padding:18px 20px;border-radius:14px;
background:rgba(243,239,228,.06);border:1px solid rgba(243,239,228,.14)}
.service-router .built-tools article b{font-size:var(--t-body);margin:10px 0 6px}
.service-router .built-tools article span{font-size:12.5px}
.service-router .tool-z{opacity:.07}
.service-router .built-tools article:hover .tool-z{opacity:.13}
/* ------------------------------------------------------- the phone, on a phone
* "the mobile phone showing the clientbook is cool and all it's just i don't
* think people will care and it takes so much space it does not look good on
* mobile it blocks text." It is 672px of a 812px screen. The four lines next
* to it already say what ClientBook holds, so on a phone they say it alone.
*/
@media(max-width:760px){
.phone-shell{display:none}
.clientbook-section{grid-template-columns:1fr}
.cb-list{grid-template-columns:1fr 1fr;gap:14px 20px;max-width:none}
.service-router .built-tools{grid-template-columns:1fr}
}
@media(max-width:430px){.cb-list{grid-template-columns:1fr}}
/* --------------------------------------------------------------- arrows ----
* "whatever arrows were used, don't show accurately on iphone." U+2197 and
* U+2192 are in Apple's emoji font, so iOS drew them as blue emoji tiles
* instead of as type -- visible in Isak's screenshot of the "Get ads" pill.
* Drawn in currentColor instead: identical on every platform, and they take
* the colour and weight of the text they sit in.
*/
.arr{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-.12em}
/* ============================================================ trusted by ====
* Fluent's version: a hairline, a small label at the end of it, and a row of
* marks. That is the whole section. Ours was four cards carrying a logo, a
* sector, a paragraph, four chips and a link each, in the second slot on the
* page, which is exactly where the offer needs the room.
*
* The marks sit desaturated so a set of four unrelated identities reads as one
* row rather than four competing ones, and each comes back to full colour when
* you point at it. The detail that was in the cards is on the title attribute,
* so it is still there for anyone who wants it.
*/
.trusted{padding:clamp(30px,3.2vw,46px) clamp(20px,5vw,70px)}
.trusted-head{display:flex;align-items:center;gap:18px;margin-bottom:clamp(22px,2.4vw,34px)}
.trusted-head .rule{flex:1;height:1px;background:var(--clay);opacity:.55}
.trusted-head .section-label{color:var(--clay);white-space:nowrap}
/* The rail clips; the track inside it rolls. Masked at both edges so marks
arrive and leave rather than appearing at a hard boundary. */
.marquee{
display:flex;align-items:center;gap:clamp(28px,3.4vw,56px);
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee.is-rolling{animation:roll var(--roll-time,26s) linear infinite;
will-change:transform}
.marquee.is-rolling:hover,.marquee.is-rolling:focus-within{animation-play-state:paused}
@keyframes roll{to{transform:translateX(calc(var(--roll) * -1))}}
.logos{list-style:none;margin:0;padding:0;display:flex;flex:0 0 auto;
align-items:center;gap:clamp(28px,3.4vw,56px)}
.logos li{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:clamp(96px,11vw,150px)}
.logos a,.logos li>span{display:flex;align-items:center;justify-content:center;
min-height:44px;padding:4px 2px}
.logos img{display:block;width:auto;height:auto;max-height:46px;max-width:140px;
object-fit:contain;
filter:grayscale(1) contrast(1.05);opacity:.72;
transition:filter .25s ease,opacity .25s ease}
.logos li:nth-child(1) img{max-height:58px} /* nearly square */
.logos li:nth-child(2) img{max-height:44px} /* wide */
.logos li:nth-child(4) img{max-height:54px} /* square */
.logos a:hover img,.logos a:focus-visible img{filter:none;opacity:1}
.logos .client-wordmark{font-size:var(--t-h3);font-weight:700;letter-spacing:-.05em;
color:var(--muted);transition:color .25s ease}
.logos a:hover .client-wordmark,.logos a:focus-visible .client-wordmark{color:var(--ink)}
@media(max-width:760px){
.marquee{-webkit-mask-image:none;mask-image:none}
.trusted{position:relative}
.trusted::before,.trusted::after{content:"";position:absolute;top:0;bottom:0;width:34px;
pointer-events:none;z-index:1}
.trusted::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.trusted::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
}
@media(max-width:620px){
.logos{gap:26px}
.logos li{width:96px}
.logos img{max-height:32px;max-width:96px}
.logos .client-wordmark{font-size:var(--t-lead)}
}
@media(prefers-reduced-motion:reduce){
.logos img,.logos .client-wordmark{transition:none}
/* JavaScript never starts it, and this makes sure nothing else can. */
.marquee{animation:none}
.logos{flex-wrap:wrap;justify-content:center}
}
/* September offer update: retain the existing palette, type and inset panels. */
section[id]{scroll-margin-top:120px}
#websites .pack h3{font-size:var(--t-h3);line-height:1.2;margin:22px 0}
#websites .pack p{font-size:var(--t-body);line-height:1.65;max-width:48ch}
.paths{grid-template-columns:repeat(3,minmax(0,1fr))}
.path .a,.path .p,.path .go{font-size:var(--t-small)}
@media(max-width:900px){
.site-header{grid-template-columns:1fr auto;border-radius:24px;gap:8px}
.site-header nav{display:flex;grid-row:2;grid-column:1/-1;justify-content:space-between;gap:8px;flex-wrap:wrap}
.site-header .pill{grid-column:2;grid-row:1}
.paths{grid-template-columns:1fr}
section[id]{scroll-margin-top:150px}
}