/* Aurora Owl, v1-ink: paper and ink */ @font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Inter Tight";src:url(fonts/inter-tight-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap} :root{ --ground:#e3ded1; /* the painting's own paper, at its edges */ --paper:#f4f1ea; --paper-2:#faf8f3; --ink:#1c1a17; --ink-2:#48433b; --ink-3:#645d53; --rule:rgba(28,26,23,.16); --a1:#36d7ff;--a2:#1a9ee6;--a3:#6d52f5;--a4:#8a5cff;--a5:#b44fd6;--a6:#e062e6; --aurora:linear-gradient(90deg,var(--a1),var(--a2) 22%,var(--a3) 48%,var(--a5) 78%,var(--a6)); --serif:"Instrument Serif",ui-serif,Georgia,serif; --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --gut:clamp(16px,4.2vw,64px); --max:1320px; --out:cubic-bezier(.22,1,.36,1); --inout:cubic-bezier(.65,0,.35,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(16px,1.05vw + 11px,18px);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} img{display:block;max-width:100%;height:auto} a{color:inherit} h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.012em;text-wrap:balance} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--a3);outline-offset:3px;border-radius:3px} .skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:99px;text-decoration:none;font-weight:500} .skip:focus{top:12px} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} [id]{scroll-margin-top:96px} @media (max-width:760px){[id]{scroll-margin-top:84px}} /* ---------- small type ---------- */ .eyebrow{font-family:var(--sans);font-size:.78rem;font-weight:550;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .num{font-family:var(--serif);font-style:italic;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--ink);margin-right:.7em} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:0 1.5em;border-radius:99px;font:550 1rem/1 var(--sans);letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:transform .5s var(--out),box-shadow .5s var(--out),background-color .3s} .btn svg{width:1.15em;height:1.15em;flex:none} .btn-ink{background:var(--ink);color:var(--paper)} .btn-ink:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(109,82,245,.45),0 0 12px rgba(138,92,255,.28)} .btn-paper{background:var(--paper-2);color:var(--ink)} .btn-paper:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(54,215,255,.55),0 0 12px rgba(54,215,255,.3)} .btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(28,26,23,.35)} .btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink),0 0 10px rgba(109,82,245,.18)} /* a text link with a hairline that draws out in aurora on hover */ .line{position:relative;display:inline-flex;align-items:center;gap:.45em;min-height:44px;font-weight:550;text-decoration:none;color:var(--ink)} .line::before,.line::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px} .line::before{background:rgba(28,26,23,.3)} .line::after{background:var(--aurora);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--out)} .line:hover::after,.line:focus-visible::after{transform:scaleX(1)} /* icons sized here as well as by their width and height attributes, so wide screens enlarge them with the page (--k) */ .line svg{width:20px;height:20px} .line .arr{transition:transform .5s var(--out)} .line:hover .arr{transform:translateX(4px)} /* ---------- header ---------- */ .masthead{position:absolute;top:0;left:0;right:0;z-index:20} .masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:clamp(14px,2vw,26px);max-width:none} .lockup{display:block;line-height:0;text-decoration:none} .lockup svg{height:68px;width:auto;display:block} .nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px);font-size:.95rem;font-weight:500} .nav a:not(.btn){position:relative;text-decoration:none;color:var(--ink);padding:12px 0} .nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--aurora);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--out)} .nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after{transform:scaleX(1)} .nav .btn{min-height:44px;font-size:.92rem;padding:0 1.2em} .menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 14px;background:none;border:0;font:500 .95rem var(--sans);color:var(--ink);cursor:pointer} .menu-btn i{position:relative;display:block;width:26px;height:10px} .menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px} .menu-btn i::before{top:0}.menu-btn i::after{bottom:0} .bar{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(244,241,234,.86);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 1px 0 var(--rule);transform:translateY(-102%);transition:transform .6s var(--out);visibility:hidden} .bar.on{transform:none;visibility:visible} .bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;max-width:none} .bar .mark{display:block;height:46px;width:46px} .bar .mark img{height:46px;width:46px} @media (max-width:1060px){ .nav a:not(.btn){display:none} .menu-btn{display:inline-flex} } @media (max-width:560px){ .nav .btn{display:none} .lockup svg{height:64px} .bar .wrap{height:64px} } /* ---------- menu panel ---------- */ .panel{position:fixed;inset:0;z-index:60;visibility:hidden} .panel .scrim{position:absolute;inset:0;background:rgba(28,26,23,.28);opacity:0;transition:opacity .45s var(--out)} .panel .sheet{position:absolute;top:0;right:0;bottom:0;width:min(420px,88vw);background:var(--paper);padding:22px var(--gut) 32px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .55s var(--out);box-shadow:-1px 0 0 var(--rule)} .panel.open{visibility:visible} .panel.open .scrim{opacity:1} .panel.open .sheet{transform:none} .panel .close{align-self:flex-end;min-height:44px;background:none;border:0;font:500 .95rem var(--sans);color:var(--ink);cursor:pointer;padding:0 4px} .panel nav{margin-top:28px;display:flex;flex-direction:column} .panel nav a{font-family:var(--serif);font-size:2.1rem;line-height:1.15;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--rule)} .panel .btn{margin-top:auto;justify-content:center} .panel .mail{margin-top:14px;text-align:center;color:var(--ink-2)} body.locked{overflow:hidden} /* ---------- hero ---------- */ .hero{position:relative;background:var(--ground);min-height:max(640px,100svh);overflow:hidden;isolation:isolate} .hero{--artH:clamp(600px,110svh,1240px);--artW:calc(var(--artH) * .90909)} .art{position:absolute;left:calc(var(--artW) * -.12);top:calc(50% - var(--artH) * .52);width:var(--artW);height:var(--artH);z-index:0; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 99%),linear-gradient(90deg,#000 90%,transparent 100%); -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 99%),linear-gradient(90deg,#000 90%,transparent 100%);mask-composite:intersect} .art-in{position:absolute;inset:0;will-change:transform} .art img{position:absolute;inset:0;width:100%;height:100%} .art .shut{inset:auto;left:27.78%;top:43.69%;width:24.06%;height:14.19%;opacity:0} .art .shut.on{opacity:1} .hero-copy{position:relative;z-index:2;min-height:max(640px,100svh);display:flex;flex-direction:column;justify-content:center;padding:120px var(--gut) 80px calc(var(--artW) * .9);max-width:calc(var(--artW) * .9 + 640px)} .hero .eyebrow{margin-bottom:26px} .hero h1{font-size:clamp(2.5rem,.9rem + 3.7vw,4.8rem);line-height:1.02;letter-spacing:-.018em;text-wrap:pretty} .hero h1 .s2{display:block;font-style:italic;margin-top:.12em} .hero h1 .s1{display:block} .hero .sub{margin-top:28px;max-width:34em;font-size:clamp(1.02rem,.9rem + .35vw,1.18rem);line-height:1.55;color:var(--ink-2)} .hero .cta{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px} .hero .hint{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:8px} .hero .hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--ink-3),transparent)} @media (max-width:900px),(max-aspect-ratio:1/1){ .hero{--artW:min(112vw,760px);--artH:calc(var(--artW) * 1.1);min-height:0} .art{position:relative;left:auto;top:auto;margin:calc(var(--artH) * -.04) 0 calc(var(--artH) * -.05) calc(var(--artW) * -.06); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 96%),linear-gradient(90deg,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 96%),linear-gradient(90deg,#000 88%,transparent 100%)} .hero-copy{min-height:0;padding:0 var(--gut) 72px;max-width:760px} .hero .hint{display:none} .masthead{position:relative;background:var(--ground)} } /* ---------- arrival (only when motion is allowed) ---------- */ .js-motion .hero [data-in]{opacity:0;transform:translateY(22px)} .js-motion .hero.go [data-in]{opacity:1;transform:none;transition:opacity .9s var(--out),transform 1s var(--out);transition-delay:var(--d,0s)} /* ---------- ground: the painting's paper lightens into the page ---------- */ #problem{background:linear-gradient(var(--ground),var(--paper) min(420px,60%));padding-top:clamp(56px,7vw,110px)} /* ---------- sections ---------- */ .sec{position:relative;padding:clamp(72px,9vw,140px) 0} .sec-note{padding:0 0 clamp(18px,2vw,28px)} .sec-note .eyebrow{display:flex;align-items:baseline} .sec-note .eyebrow::after{content:"";width:56px;height:1px;margin-left:16px;background:currentColor;opacity:.6;align-self:center} .sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px clamp(32px,5vw,96px);align-items:end} .sec-head > :only-child{grid-column:1 / -1} .sec h2{font-size:clamp(2.4rem,1.2rem + 3.7vw,5.3rem);line-height:1;letter-spacing:-.022em;max-width:14em} .lede,.found-line{font-size:clamp(1.08rem,.95rem + .45vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:32em;padding-bottom:.35em} @media (max-width:900px){.sec-head{grid-template-columns:1fr}} /* ink rule between sections: a brush stroke, drawn on arrival */ .ink-rule{display:block;width:var(--w,60%);height:auto;aspect-ratio:1000/30;margin:0 0 0 max(var(--gut),(100% - var(--max)) / 2 + var(--gut));color:var(--ink);overflow:visible} .ink-rule.flip{transform:scaleX(-1);margin:0 max(var(--gut),(100% - var(--max)) / 2 + var(--gut)) 0 auto} @media (max-width:760px){.ink-rule,.ink-rule.flip{width:calc(var(--w,60%) + 22%)}} .js-motion .ink-rule{clip-path:inset(0 100% 0 0)} .js-motion .ink-rule.flip{clip-path:inset(0 0 0 100%)} .js-motion .ink-rule.in{clip-path:inset(0 0 0 0);transition:clip-path 1.4s var(--inout)} /* every section divider reacts when the pointer crosses it (12 Oct, rules.js adds .cross): the ink goes a little darker for a moment, then settles back. Starting values, to tune with Vish: --cross-ink extra ink around the stroke, in the stroke's own units (1000 across the full stroke) --cross-in how fast it darkens; --cross-out how slowly it settles back */ :root{--cross-ink:1.6;--cross-in:.15s;--cross-out:.9s} .ink-rule use{stroke:currentColor;stroke-width:0;transition:stroke-width var(--cross-out) ease-out} .ink-rule.cross use{stroke-width:var(--cross-ink);transition-duration:var(--cross-in)} .js-motion [data-rise]{opacity:0;transform:translateY(26px)} .js-motion [data-rise].in{opacity:1;transform:none;transition:opacity .9s var(--out),transform 1s var(--out);transition-delay:var(--d,0s)} /* 23 Oct (jury): a link reached by keyboard before its reveal has run is shown at once */ .js-motion [data-rise]:focus-within{opacity:1;transform:none;transition:none} /* problem */ .problems{margin-top:clamp(44px,5.5vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(24px,3.4vw,56px)} .problems li{padding-top:22px;border-top:1px solid var(--ink)} .problems .n{display:block;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--ink-3)} .problems h3{margin-top:14px;font-size:clamp(1.65rem,1.1rem + 1.25vw,2.5rem);line-height:1.06} .problems p{margin-top:14px;color:var(--ink-2)} @media (max-width:900px){.problems{grid-template-columns:1fr}} /* services */ .tag{display:inline-flex;align-items:center;gap:.55em;margin-top:14px;font-size:.84rem;font-weight:550;letter-spacing:.02em;color:var(--ink-2)} .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--a3);box-shadow:0 0 0 3px rgba(109,82,245,.14)} .ticks{margin-top:22px;display:grid;gap:10px} .ticks li{position:relative;padding-left:30px;color:var(--ink-2)} .ticks li::before{content:"";position:absolute;left:0;top:.72em;width:18px;height:2px;border-radius:2px;background:var(--ink);transform:rotate(-8deg)} .next-h{margin-top:clamp(40px,5vw,64px);font-family:var(--sans);font-size:.78rem;font-weight:550;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .next{margin-top:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0} .next li{padding:6px clamp(18px,2.4vw,36px) 8px;border-left:1px solid var(--rule)} .next li:first-child{padding-left:0;border-left:0} .next h4{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,1.2rem + .8vw,2rem);line-height:1.1;margin:0} .next .tag{margin-top:8px} .next p{margin-top:14px;color:var(--ink-2)} @media (max-width:900px){ .next{grid-template-columns:1fr} .next li{padding:22px 0;border-left:0;border-top:1px solid var(--rule)} .next li:first-child{padding-top:6px;border-top:0} } /* found */ .found{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)} .found li{position:relative;padding-top:26px} .found li::before{content:"";position:absolute;left:0;top:0;width:44px;height:2px;border-radius:2px;background:var(--c)} .found h3{font-size:clamp(1.7rem,1.3rem + 1vw,2.4rem);line-height:1.05} .found p{margin-top:14px;color:var(--ink-2)} @media (max-width:760px){.found{grid-template-columns:1fr;gap:34px}} /* process */ @media (max-width:900px){ } /* work */ .shots{position:relative;display:block;padding:0 9% 9% 0} .frame{position:relative;background:var(--paper-2);border-radius:10px;box-shadow:0 0 0 1px rgba(28,26,23,.14),0 24px 50px -30px rgba(28,26,23,.45);overflow:hidden} .frame .dots{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--rule)} .frame .dots i{width:8px;height:8px;border-radius:50%;background:rgba(28,26,23,.16)} .frame img{width:100%} .phone{position:absolute;right:0;bottom:0;width:26%;border-radius:18px;padding:6px;background:var(--ink);box-shadow:0 24px 40px -24px rgba(28,26,23,.6)} .phone img{border-radius:13px} .shots{transition:transform .8s var(--out)} .phone{transition:transform .8s var(--out)} /* packages */ .pk-note{margin-top:18px;color:var(--ink-2);max-width:40em} .packs{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr 1fr 1.18fr;gap:0;align-items:stretch} .pack{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,40px) clamp(20px,2.4vw,36px);border-left:1px solid var(--rule)} .pack:first-child{border-left:0;padding-left:0} .pack h3{font-size:clamp(2rem,1.5rem + 1.3vw,2.9rem);line-height:1} .pack .for{margin-top:10px;color:var(--ink-2);min-height:3.2em} .pack .rounds{margin-top:20px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.92rem;font-weight:550} .pack ul{margin:20px 0 30px;display:grid;gap:10px} .pack li{position:relative;padding-left:22px;color:var(--ink-2)} .pack li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:currentColor} @media (min-resolution:2dppx){.pack li::before{height:1.5px}} .pack .btn{margin-top:auto;align-self:flex-start} .pack.sig{background:var(--ink);color:var(--paper);border-left:0;border-radius:14px;padding-left:clamp(22px,2.6vw,40px);margin-left:clamp(8px,1vw,16px);box-shadow:0 30px 60px -40px rgba(28,26,23,.7)} .pack.sig::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;background:var(--aurora);border-radius:0 0 2px 2px} .pack.sig .for,.pack.sig li{color:rgba(244,241,234,.8)} .pack.sig .rounds{border-color:rgba(244,241,234,.2)} .pack.sig .pick{margin:-6px 0 14px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);display:flex;align-items:center;gap:8px} .pack.sig .pick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a1);box-shadow:0 0 8px rgba(54,215,255,.8)} @media (max-width:900px){ .packs{grid-template-columns:1fr} .pack{border-left:0;padding:26px 0;border-top:1px solid var(--rule)} .pack:first-child{border-top:0;padding-top:0} .pack.sig{margin:12px 0 0;padding:30px 22px;border-top:0} .pack .for{min-height:0} } /* contact */ .contact{background:var(--ground);text-align:left} .contact .sec-grid{align-items:start} .contact .ways{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center} .contact .addr{margin-top:28px;color:var(--ink-2)} /* footer */ .foot{padding:clamp(56px,7vw,96px) 0 32px;background:var(--ground)} .foot .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;padding-bottom:32px;border-bottom:1px solid var(--rule)} .foot .lockup svg{height:clamp(64px,7vw,96px)} .foot nav{display:flex;flex-wrap:wrap;gap:4px 24px} .foot nav a{text-decoration:none;padding:10px 0;color:var(--ink-2)} .foot nav a:hover{color:var(--ink)} .foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:22px;font-size:.88rem;color:var(--ink-3)} /* case study + 404 */ .page-head{background:var(--ground)} .page-head .masthead{position:relative} .cs-hero{padding:clamp(40px,6vw,96px) 0 clamp(48px,6vw,96px)} .crumb{font-size:.9rem;color:var(--ink-3)} .crumb a{color:var(--ink-2)} .cs-hero h1{margin-top:18px;font-size:clamp(2.6rem,1.6rem + 3.6vw,5.4rem);line-height:1;letter-spacing:-.02em;max-width:13em} .cs-hero .lede{max-width:40em} .cs-body{padding:clamp(56px,7vw,110px) 0} .cs-shot{margin-top:clamp(40px,5vw,72px)} .cs-list{margin-top:28px;display:grid;gap:0} .cs-list li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:8px clamp(20px,4vw,64px);padding:28px 0;border-top:1px solid var(--rule)} .cs-list li:last-child{border-bottom:1px solid var(--rule)} .cs-list b{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,1.8rem + 1.6vw,3.6rem);line-height:.95} .cs-list h3{font-size:clamp(1.5rem,1.2rem + .8vw,2rem);line-height:1.1} .cs-list p{margin-top:8px;color:var(--ink-2);max-width:36em} @media (max-width:760px){.cs-list li{grid-template-columns:1fr}} .nf{min-height:100svh;display:grid;place-items:center;text-align:center;background:var(--ground);padding:40px var(--gut)} .nf img{width:min(300px,70vw);margin:0 auto;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)} .nf h1{margin-top:8px;font-size:clamp(2.4rem,1.6rem + 3vw,4.2rem);line-height:1.02} .nf p{margin:16px auto 0;max-width:30em;color:var(--ink-2)} .nf .cta{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} } .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .sec h2 .l{display:block} /* contact: Sumi waits at the end of the page */ .contact{padding-bottom:clamp(24px,3vw,40px)} .contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"note art" "body art";gap:0 clamp(24px,4vw,64px);align-items:start} .contact-grid > .sec-note{grid-area:note} .contact-grid > .c-body{grid-area:body} .contact .sec-head{grid-template-columns:1fr} .contact-art{grid-area:art;position:relative;width:100%;max-width:540px;justify-self:end;aspect-ratio:1800/1980;margin-top:-40px; -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 60%,transparent 100%)} .contact-art img{position:absolute;inset:0;width:100%;height:100%} .contact-art .shut{inset:auto;left:27.78%;top:43.69%;width:24.06%;height:14.19%;opacity:0} .contact-art .shut.on{opacity:1} @media (max-width:900px){ .contact-grid{grid-template-columns:1fr;grid-template-areas:"note" "body" "art"} .contact-art{justify-self:start;max-width:380px;margin:24px 0 0 -6%} } /* get a quote: a brief on paper, ink underlines, pill choices */ .brief{position:relative;margin-top:clamp(28px,3.4vw,48px);max-width:1000px} .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3.4vw,56px)} .field{margin:28px 0 0;min-width:0} .field > label,.field legend{display:block;margin-bottom:6px;padding:0;font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)} .brief input[type=text],.brief input[type=email],.brief input[type=tel],.brief select{width:100%;min-height:50px;padding:10px 0;border:0;border-bottom:1.5px solid rgba(28,26,23,.42);border-radius:0;background:transparent no-repeat 0 100% / 0 2px;background-image:var(--aurora);font:400 1.08rem/1.3 var(--sans);color:var(--ink);transition:background-size .5s var(--out),border-color .3s} .brief select{-webkit-appearance:none;appearance:none;padding-right:28px;background-image:var(--aurora),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231c1a17' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 100%,right 4px center;background-size:0 2px,14px 9px;cursor:pointer} .brief input::placeholder{color:#8a8378} .brief textarea{width:100%;min-height:150px;padding:14px 16px;border:1.5px solid rgba(28,26,23,.42);border-radius:10px;background:var(--paper-2);font:400 1.05rem/1.55 var(--sans);color:var(--ink);resize:vertical} .brief input:focus,.brief select:focus{outline:none;border-bottom-color:var(--ink);background-size:100% 2px} .brief select:focus{background-size:100% 2px,14px 9px} .brief textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px rgba(109,82,245,.4),0 0 12px rgba(138,92,255,.2)} .brief [aria-invalid=true]{border-color:#a1231b!important} .err{margin-top:8px;font-size:.92rem;color:#a1231b} .hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .send{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px} .send .btn{border:0;cursor:pointer} .note{max-width:32em;font-size:.95rem;color:var(--ink-3)} .form-status{margin-top:26px;padding:18px 22px;border-radius:10px;background:var(--paper-2);box-shadow:inset 3px 0 0 var(--a3);font-size:1.05rem} .form-status a{font-weight:600} .brief.sent > :not(.form-status){display:none} .brief.sent .form-status{margin-top:0;font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1.2;padding:28px 30px} @media (max-width:700px){.f-grid{grid-template-columns:1fr}} /* case study */ .cs-head{margin-top:clamp(20px,2.4vw,32px)} .cta-row{display:flex;justify-content:flex-end;padding-bottom:.35em} .cs-shots{background:linear-gradient(var(--ground) 55%,var(--paper) 55%)} .shots.big{max-width:1120px;margin:0 auto;padding:0 11% 7% 0} .shots.big .phone{width:22%} .cs-list .ic{width:44px;height:44px} .why{margin-top:clamp(28px,3.4vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(24px,4vw,72px);font-size:clamp(1.04rem,.96rem + .3vw,1.18rem);line-height:1.6;color:var(--ink-2)} @media (max-width:760px){.why{grid-template-columns:1fr}.cta-row{justify-content:flex-start}} /* ink drawings in the middle of the page */ .draw{display:block;width:100%;max-width:340px;height:auto;margin:0 0 22px;color:var(--ink);padding:14px;border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);box-shadow:inset 0 0 0 1px var(--rule)} .found li{padding-top:0} .found li::before{display:none} .found li h3{position:relative;padding-top:4px} .found li h3::before{content:"";position:absolute;left:0;top:-10px;width:44px;height:2px;border-radius:2px;background:var(--c)} /* a little aurora through the middle: a pale wash behind Getting found */ #found{isolation:isolate;overflow:hidden} #found::before{content:"";position:absolute;z-index:-1;right:-10%;top:8%;width:min(760px,80vw);height:70%;opacity:.35;pointer-events:none; background:radial-gradient(closest-side at 35% 45%,rgba(54,215,255,.35),transparent),radial-gradient(closest-side at 62% 55%,rgba(138,92,255,.28),transparent),radial-gradient(closest-side at 50% 70%,rgba(224,98,230,.22),transparent);filter:blur(30px)} /* round 7: getting found as three large illustrated rows */ .found{grid-template-columns:1fr;gap:clamp(44px,6vw,96px)} .found li{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(32px,5vw,96px)} .found li > .draw{grid-column:1;grid-row:1 / -1;max-width:none;margin:0;padding:clamp(10px,1.4vw,20px)} .found li > h3{grid-column:2;grid-row:2;font-size:clamp(2rem,1.3rem + 2vw,3.3rem);line-height:1} .found li > .ac{grid-column:2;grid-row:3;margin-top:10px} .found li > p{grid-column:2;grid-row:4;font-size:clamp(1.04rem,.96rem + .35vw,1.22rem);line-height:1.5;max-width:24em} .found li:nth-child(2){grid-template-columns:minmax(0,5fr) minmax(0,7fr)} .found li:nth-child(2) > .draw{grid-column:2} .found li:nth-child(2) > :not(.draw){grid-column:1} @media (max-width:760px){ .found li,.found li:nth-child(2){grid-template-columns:1fr;grid-template-rows:none} .found li > *,.found li:nth-child(2) > *{grid-column:1!important;grid-row:auto!important} .found li > .draw{margin-bottom:22px} } /* round 7: services heading on two full-width lines; the brief as a sheet beside its intro */ .sec-head.wide{grid-template-columns:1fr} .sec-head.wide h2{max-width:none} .quote .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 clamp(32px,5vw,88px);align-items:start} .q-intro{position:sticky;top:110px} .q-intro .sec-head{grid-template-columns:1fr} .q-intro .lede{margin-top:4px} .quote .brief{margin-top:0;max-width:none;padding:clamp(22px,3.4vw,52px);background:var(--paper-2);border-radius:16px;box-shadow:inset 0 0 0 1px var(--rule),0 40px 80px -60px rgba(28,26,23,.45)} .quote .brief::before{content:"";position:absolute;left:32px;right:32px;top:0;height:2px;background:var(--aurora);border-radius:0 0 2px 2px;opacity:.8} .quote .brief > .f-grid:first-of-type .field:first-child{margin-top:0} .quote .brief textarea{background:var(--paper)} @media (max-width:900px){ .quote .wrap{grid-template-columns:1fr} .q-intro{position:static;margin-bottom:28px} } /* Sumi is a button: tap to blink, no button look */ [data-blink]{cursor:pointer;-webkit-tap-highlight-color:transparent} [data-blink]:focus-visible{outline:2px solid var(--a3);outline-offset:-10px;border-radius:24px} .hero-copy{pointer-events:none} .hero-copy > *{pointer-events:auto} /* ---------- one line language: every divider is a dry-brush stroke, pressed then tapering ---------- The shape is a mask, so each line takes its own colour and weight: long and heavier for big breaks, short and lighter for small dividers. The long section breaks are the .ink-rule strokes above. */ :root{--brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 12' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.4' xChannelSelector='R' yChannelSelector='G' result='g'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.9' numOctaves='2' seed='2' result='s'/%3E%3CfeColorMatrix in='s' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0 0 0 -1' result='k'/%3E%3CfeComposite in='g' in2='k' operator='in'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%23000' fill-opacity='1' d='M2 6C4 2 14 1 40 1.4C300 3 650 4 998 4.6L998 7.4C650 8 300 9 40 10.6C14 11 4 10 2 6Z'/%3E%3C/svg%3E");--brush-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 12' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.4' xChannelSelector='R' yChannelSelector='G' result='g'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.9' numOctaves='2' seed='2' result='s'/%3E%3CfeColorMatrix in='s' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0 0 0 -1' result='k'/%3E%3CfeComposite in='g' in2='k' operator='in'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%231c1a17' fill-opacity='.55' d='M2 6C4 2 14 1 40 1.4C300 3 650 4 998 4.6L998 7.4C650 8 300 9 40 10.6C14 11 4 10 2 6Z'/%3E%3C/svg%3E");--brush-err:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 12' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.4' xChannelSelector='R' yChannelSelector='G' result='g'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.9' numOctaves='2' seed='2' result='s'/%3E%3CfeColorMatrix in='s' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0 0 0 -1' result='k'/%3E%3CfeComposite in='g' in2='k' operator='in'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%23a1231b' fill-opacity='.9' d='M2 6C4 2 14 1 40 1.4C300 3 650 4 998 4.6L998 7.4C650 8 300 9 40 10.6C14 11 4 10 2 6Z'/%3E%3C/svg%3E")} .problems li::before,.next li::before,.pack .rounds::before,.pack .rounds::after, .foot .top::after,.sec-note .eyebrow::after,.panel nav a::after,.bar::after,.found li h3::before,.pack.sig::before,.quote .brief::before{ -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat;border-radius:0} .problems li{border-top:0;position:relative} .problems li::before{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;background:var(--ink)} .next{gap:0 clamp(24px,3vw,48px)} .next li,.next li:first-child{position:relative;border:0;padding:22px 0 0} .next li::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ink);opacity:.4} .pack,.pack:first-child{border-left:0;border-top:0} .pack .rounds{border:0;position:relative} .pack .rounds::before,.pack .rounds::after{content:"";position:absolute;left:0;right:0;height:5px;background:var(--ink);opacity:.35} .pack .rounds::before{top:-2px}.pack .rounds::after{bottom:-2px} .pack.sig .rounds::before,.pack.sig .rounds::after{background:var(--paper);opacity:.35} .pack.sig::before{height:7px;top:-2px;border-radius:0} .quote .brief::before{height:7px;top:-2px;opacity:.9} .foot .top{border-bottom:0;position:relative} .foot .top::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:6px;background:var(--ink);opacity:.3} .sec-note .eyebrow::after{height:5px;width:64px;opacity:.55} .panel nav a{border-bottom:0;position:relative} .panel nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--ink);opacity:.3} .bar{box-shadow:none} .bar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:6px;background:var(--ink);opacity:.22} .found li h3::before{width:64px;height:6px;top:-12px} /* form underlines use the same stroke */ .brief input[type=text],.brief input[type=email],.brief input[type=tel]{border-bottom:0;background:var(--aurora) no-repeat 0 100% / 0 2px,var(--brush-ink) no-repeat 0 100% / 100% 6px} .brief input:focus{background-size:100% 2px,100% 6px} .brief select{border-bottom:0;background-image:var(--aurora),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231c1a17' stroke-width='1.6'/%3E%3C/svg%3E"),var(--brush-ink);background-repeat:no-repeat;background-position:0 100%,right 4px center,0 100%;background-size:0 2px,14px 9px,100% 6px} .brief select:focus{background-size:100% 2px,14px 9px,100% 6px} .brief input[aria-invalid=true]{background-image:var(--aurora),var(--brush-err)} @media (max-width:900px){.next li,.next li:first-child{padding:22px 0 18px}.pack{padding-top:30px}} /* the brief, now three fields */ .hint{margin:-2px 0 10px;font-size:.95rem;color:var(--ink-3)} .field > label{font-size:.82rem} .pk-chosen{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 6px;font-size:.98rem;color:var(--ink-2)} .pk-chosen b{font-weight:600;color:var(--ink)} .pk-clear{min-height:36px;padding:0 14px;border:0;border-radius:99px;background:transparent;box-shadow:inset 0 0 0 1px rgba(28,26,23,.3);font:500 .88rem var(--sans);color:var(--ink);cursor:pointer} .pk-clear:hover{box-shadow:inset 0 0 0 1px var(--ink)} .quote .brief textarea{min-height:0} .pk-chosen[hidden]{display:none} .quote .brief .f-grid .field{margin-top:0} .quote .brief .pk-chosen:not([hidden]) + .f-grid{margin-top:18px} /* the small bar carries the full lockup too, never below 64 px tall */ .bar .wrap{height:84px} .bar .lockup svg{height:64px;width:auto} @media (max-width:560px){.bar .wrap{height:80px}.bar .lockup svg{height:64px}} /* round 8: optional notes sit inside the label, so paired fields stay level */ .opt{margin-left:.5em;font-size:.8rem;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--ink-3)} .quote .brief .f-grid .field{margin-top:0} .quote .brief .f-grid + .field,.quote .brief .field + .f-grid{margin-top:28px} .quote .brief .f-grid{row-gap:28px} /* ---------- round 9: readability. No negative tracking anywhere, headings a step smaller, a touch of word space so words never run together, looser leading. ---------- */ h1,h2,h3,h4{letter-spacing:0;word-spacing:.04em} .hero h1{font-size:clamp(2.3rem,1.1rem + 2.7vw,3.7rem);line-height:1.08;letter-spacing:.003em;word-spacing:.06em} .hero h1 .s2{margin-top:.08em} .sec h2{font-size:clamp(2.1rem,1.15rem + 2.6vw,4rem);line-height:1.08;letter-spacing:0;max-width:18em} .problems h3{font-size:clamp(1.5rem,1.1rem + .9vw,2.05rem);line-height:1.15} .next h4{font-size:clamp(1.4rem,1.15rem + .6vw,1.75rem);line-height:1.15} .found li > h3{font-size:clamp(1.8rem,1.3rem + 1.3vw,2.6rem);line-height:1.08} .pack h3{font-size:clamp(1.8rem,1.4rem + 1vw,2.4rem);line-height:1.05} .hero .sub{max-width:33em;color:var(--ink-2)} .found li > p{max-width:30em} /* aurora brush stroke under "see why", drawn in the site's own dry-brush language */ .hero h1 .u{position:relative;white-space:nowrap;cursor:pointer} .hero h1 .u::after{content:"";position:absolute;left:-.03em;right:-.08em;bottom:-.1em;height:.17em;pointer-events:none; background:linear-gradient(90deg,#36d7ff,#6d52f5 50%,#e062e6); -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat} .js-motion .hero h1 .u::after{clip-path:inset(0 100% 0 0)} .js-motion .hero.go h1 .u::after{clip-path:inset(0 0 0 0);transition:clip-path 1.05s cubic-bezier(.65,0,.35,1) 1.05s} /* ---------- round 9: spacing pass on one scale: 8, 12, 16, 24, 32, 48, 72, 112 ---------- */ :root{--s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:72px;--s8:112px} /* hero */ .hero .eyebrow{margin-bottom:var(--s5)} .hero .sub{margin-top:var(--s5)} .hero .cta{margin-top:var(--s6);gap:var(--s3) var(--s5)} .btn{min-height:56px;padding:0 28px;gap:var(--s2)} .nav .btn{min-height:48px;padding:0 20px} /* sections */ .sec{padding:clamp(52px,6vw,84px) 0} #problem{padding-top:clamp(72px,8vw,112px)} .sec-note{padding-bottom:var(--s4)} .sec-head{row-gap:var(--s4)} .problems{margin-top:clamp(48px,6vw,72px);gap:var(--s6) clamp(24px,3.4vw,48px)} .problems li{padding-top:var(--s5)} .problems h3{margin-top:var(--s3)} .problems p{margin-top:var(--s3)} .tag{margin-top:var(--s3)} .next-h{margin-top:var(--s6)} .next{margin-top:var(--s4);gap:var(--s5) clamp(24px,3.4vw,48px)} .next li,.next li:first-child{padding:var(--s5) 0 0} .next p{margin-top:var(--s3)} .found{margin-top:clamp(48px,6vw,72px);gap:clamp(72px,8vw,112px)} .found li > .draw{padding:var(--s4)} .found li > p{margin-top:var(--s3)} .pk-note,.packs{margin-top:clamp(48px,6vw,72px)} .pack{padding:var(--s6) var(--s5)} .pack:first-child{padding-left:0} .pack.sig{padding:var(--s6) var(--s5)} .pack.sig .pick{margin:0 0 var(--s3)} .pack .for{margin-top:var(--s2)} .pack .rounds{margin-top:var(--s4);padding:var(--s3) 0} .pack ul{margin:var(--s4) 0 var(--s5);gap:var(--s2)} /* get a quote */ .quote .wrap{gap:var(--s6) clamp(48px,6vw,112px)} .quote .brief{padding:var(--s6)} .quote .brief .f-grid{row-gap:var(--s5);column-gap:var(--s5)} .quote .brief .f-grid + .field,.quote .brief .field + .f-grid{margin-top:var(--s5)} .field > label{margin-bottom:var(--s1)} .hint{margin:0 0 var(--s2)} .brief input[type=text],.brief input[type=email],.brief input[type=tel],.brief select{min-height:56px;padding:var(--s2) 0} .brief textarea{padding:var(--s3)} .err{margin-top:var(--s1)} .pk-chosen{margin:0 0 var(--s4)} .quote .brief .pk-chosen:not([hidden]) + .f-grid{margin-top:0} .send{margin-top:var(--s6);gap:var(--s3) var(--s4)} /* contact and footer */ .contact .ways{margin-top:var(--s6);gap:var(--s3) var(--s5)} .contact .addr{margin-top:var(--s5)} .foot .top{padding-bottom:var(--s5);gap:var(--s5)} .foot .base{padding-top:var(--s4)} @media (max-width:900px){ .pack,.pack:first-child{padding:var(--s5) 0} .pack.sig{padding:var(--s5) var(--s4);margin-top:var(--s3)} .q-intro{margin-bottom:var(--s5)} } @media (max-width:700px){ .quote .brief{padding:var(--s5) var(--s4)} .quote .brief .f-grid{row-gap:var(--s4)} .quote .brief .f-grid + .field,.quote .brief .field + .f-grid{margin-top:var(--s4)} .hero .cta{margin-top:var(--s5)} } :root{--rule-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 34' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%231c1a17' fill-opacity='.32' d='M2 30C4 27.6 14 27 40 27.2C300 28.2 650 28.8 998 29.2L998 31C650 31.4 300 32 40 32.8C14 33 4 32.4 2 30Z'/%3E%3C/svg%3E");--rule-aur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 34' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%236d52f5' fill-opacity='.8' d='M2 30C4 27.6 14 27 40 27.2C300 28.2 650 28.8 998 29.2L998 31C650 31.4 300 32 40 32.8C14 33 4 32.4 2 30Z'/%3E%3C/svg%3E");--rule-err:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 34' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-1%25' y='-50%25' width='102%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.5' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23d)' fill='%23a1231b' fill-opacity='.8' d='M2 30C4 27.6 14 27 40 27.2C300 28.2 650 28.8 998 29.2L998 31C650 31.4 300 32 40 32.8C14 33 4 32.4 2 30Z'/%3E%3C/svg%3E")} /* ===================================================================== Round 10: colour as watercolour, lines that answer the reader ===================================================================== */ @keyframes redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes rule-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes ants{to{stroke-dashoffset:-16}} @keyframes pulse{0%{opacity:.6}40%{opacity:1}100%{opacity:.6}} /* ---------- header: current section, WhatsApp as a link, Get a quote as the one pill ---------- */ .nav a:not(.btn):not(.wa-link)::after{height:6px;bottom:3px;background:var(--aurora);transform:none;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--out); -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat} .nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after,.nav a.is-here::after{transform:none;clip-path:inset(0 0 0 0)} .nav a.is-here{font-weight:600} .bar .read{position:absolute;left:0;right:0;bottom:-3px;height:6px;background:var(--ink);opacity:.5;transform-origin:0 50%;transform:scaleX(var(--p,0)); -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat} @media (prefers-reduced-motion:reduce){.bar .read{display:none}} @media (max-width:560px){.bar .wrap{height:76px}} /* menu panel: roomier, slides, rules draw in one after another */ .panel .sheet{padding:24px;transition:transform .32s cubic-bezier(.22,1,.36,1)} .panel nav a{font-size:1.75rem;padding:12px 0} .panel nav a::after{clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--out)} .panel.open nav a::after{clip-path:inset(0 0 0 0)} .panel.open nav a:nth-child(1)::after{transition-delay:.12s}.panel.open nav a:nth-child(2)::after{transition-delay:.16s} .panel.open nav a:nth-child(3)::after{transition-delay:.2s}.panel.open nav a:nth-child(4)::after{transition-delay:.24s} .panel.open nav a:nth-child(5)::after{transition-delay:.28s}.panel.open nav a:nth-child(6)::after{transition-delay:.32s} .panel nav a.is-here{color:#3d2fa8} /* ---------- hero: tighter composition, a bloom behind Sumi, the branch drawn in ---------- */ .hero{--artH:clamp(560px,94svh,1100px);--artW:calc(var(--artH) * .90909);min-height:max(620px,calc(var(--artH) * .93))} .art{left:calc(var(--artW) * -.04);top:calc(var(--artH) * -.03)} .hero-copy{min-height:max(620px,calc(var(--artH) * .93));padding:110px var(--gut) 40px calc(var(--artW) * .95 + 48px);max-width:calc(var(--artW) * .95 + 48px + 620px)} .art .layer,.art .bloom{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .art .bloom{inset:auto;left:-8%;top:5%;width:110%;height:auto;aspect-ratio:1;opacity:.5;mix-blend-mode:multiply} .branch-layer{display:none} .js-motion .hero:not(.rest) .art-full{opacity:0} .js-motion .hero:not(.rest) .branch-layer{display:block;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%); -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0} .js-motion .hero .bloom{clip-path:circle(0% at 45% 50%)} .js-motion .hero.bloom-on .bloom{clip-path:circle(72% at 45% 50%);transition:clip-path 1.4s cubic-bezier(.2,.7,.2,1)} @media (max-width:900px),(max-aspect-ratio:1/1){ .hero{--artH:min(46svh,560px);--artW:calc(var(--artH) * .90909);min-height:0} .art{left:auto;top:auto;margin:calc(var(--artH) * -.03) 0 calc(var(--artH) * -.06) calc(var(--artW) * -.04)} .hero-copy{min-height:0;padding:0 var(--gut) 48px;max-width:760px} .hero .eyebrow{margin-bottom:var(--s3)} .hero .sub{margin-top:var(--s4)} } /* ---------- shared: section washes that bloom after the rule, next-step links ---------- */ .sec{position:relative} .sec > .wrap{position:relative;z-index:1} .sec-wash{position:absolute;z-index:0;pointer-events:none;width:min(760px,70vw);height:auto;opacity:.5;mix-blend-mode:multiply} .sec-wash.w-right{right:-3vw;top:40px} .sec-wash.w-left{left:-8vw;top:38%} .js-motion .sec-wash{opacity:0;transform:scale(.85)} .js-motion .sec-wash.in{opacity:.5;transform:none;transition:opacity 1.2s ease .6s,transform 1.6s var(--out) .6s} .step-on{margin-top:var(--s6)} .next-step{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;text-decoration:none;color:var(--ink)} .next-step .arrow{width:52px;height:18px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .next-step .arrow path{stroke-dasharray:1 1;stroke-dashoffset:0} .next-step:hover,.next-step:focus-visible{color:#3d2fa8} .next-step:hover .arrow path,.next-step:focus-visible .arrow path{animation:redraw .6s var(--out) both} .next-step:hover .arrow path + path,.next-step:focus-visible .arrow path + path{animation-delay:.25s} .draw-on path{stroke-dasharray:1 1;stroke-dashoffset:0} .js-motion .draw-on path{stroke-dashoffset:1} .js-motion .in .draw-on path{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--out) calc(var(--k,0) * 90ms + .3s)} /* ---------- problem: the column you read answers ---------- */ .problems li{transition:opacity .35s ease} .problems li::after{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;background:var(--ink);opacity:0;transition:opacity .25s ease; -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat} .problems li:hover::after,.problems li.is-live::after{opacity:1} .problems li:hover .n,.problems li.is-live .n{background:linear-gradient(90deg,#1683c4,#5b45d8 60%,#b0369f);-webkit-background-clip:text;background-clip:text;color:transparent} .problems:has(li:hover) li:not(:hover),.problems:has(li.is-live) li:not(.is-live){opacity:.7} /* ---------- services: the lead service as an inked band ---------- */ .lead-band{position:relative;margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s6);align-items:center;padding:clamp(28px,4vw,56px)} .frame-ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1} .frame-ink path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;opacity:.8;filter:url(#rough);transition:stroke-width .3s} .js-motion .lead-band .frame-ink{clip-path:inset(0 100% 0 0)} .js-motion .lead-band.in .frame-ink{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--inout) .1s} .lead-band:hover .frame-ink path,.lead-band.is-live .frame-ink path{stroke-width:3.4} .band-wash{position:absolute;z-index:0;left:-6%;top:-22%;width:74%;height:auto;opacity:.5;mix-blend-mode:multiply;pointer-events:none} .js-motion .lead-band .band-wash{opacity:0;transform:scale(.8)} .js-motion .lead-band.in .band-wash{opacity:.5;transform:none;transition:opacity 1.2s ease .8s,transform 1.6s var(--out) .8s} .band-text,.browser{position:relative;z-index:2} .band-text h3{font-size:clamp(2rem,1.3rem + 1.8vw,3rem);line-height:1.05} .band-text .copy{margin-top:var(--s4);font-size:clamp(1.06rem,.98rem + .3vw,1.2rem);line-height:1.5} .brush-list{margin-top:var(--s3);display:grid;gap:var(--s2)} .brush-list li{position:relative;padding-left:40px;font-size:clamp(1.06rem,.98rem + .3vw,1.2rem);line-height:1.45} .brush-list li::before{content:"";position:absolute;left:0;top:.62em;width:26px;height:7px;background:var(--ink);-webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat} .browser{width:100%;max-width:440px;justify-self:end;color:var(--ink)} .lead-band:hover .browser path{animation:redraw .8s var(--out) both;animation-delay:calc(var(--k,0) * 60ms)} .next li::before{transition:height .25s,opacity .25s,top .25s} .next li:hover::before,.next li.is-live::before{height:9px;top:-2px;opacity:.95} .mk2{display:block;width:44px;height:44px;margin-bottom:var(--s3);color:var(--ink)} .mk2 path{stroke-dasharray:1 1} .next li:hover .mk2 path,.next li.is-live .mk2 path{animation:redraw .6s var(--out) both;animation-delay:calc(var(--k,0) * 80ms)} .next li:hover .mk2,.next li.is-live .mk2{color:#3d2fa8} @media (max-width:900px){.lead-band{grid-template-columns:1fr;gap:var(--s5)}.browser{justify-self:start;max-width:360px}} /* ---------- getting found: smaller panels, a wash per row, the path that matters lights up ---------- */ .found{gap:clamp(64px,8vw,96px)} .found li{grid-template-columns:minmax(0,520px) minmax(0,1fr);align-items:center} .found li:nth-child(2){grid-template-columns:minmax(0,1fr) minmax(0,520px)} .found li > .panel-ink{grid-column:1;grid-row:1 / -1;position:relative} .found li:nth-child(2) > .panel-ink{grid-column:2} .panel-ink .draw{position:relative;z-index:1;max-width:none;width:100%;margin:0;padding:12px;background:none;box-shadow:none} .row-wash{position:absolute;z-index:0;left:-8%;top:-14%;width:116%;height:128%;opacity:.4;mix-blend-mode:multiply;pointer-events:none} .js-motion .found li .row-wash{opacity:0;transform:scale(.85)} .js-motion .found li.in .row-wash{opacity:.4;transform:none;transition:opacity 1.2s ease .9s,transform 1.6s var(--out) .9s} .found .hl{transition:stroke .3s,stroke-width .3s,fill .3s} .found li:hover .hl,.found li.is-live .hl{stroke:var(--c);stroke-width:3.4} .found li:hover .hl.page,.found li.is-live .hl.page{fill:rgba(109,82,245,.16)} .found li:hover .ants,.found li.is-live .ants{animation:ants .9s linear infinite} .found li:hover h3::before,.found li.is-live h3::before{height:9px} @media (max-width:760px){.found li,.found li:nth-child(2){grid-template-columns:1fr}.found li > .panel-ink,.found li:nth-child(2) > .panel-ink{grid-column:1}} /* ---------- how we work: one brush stroke through the four steps ---------- */ .route{position:relative;margin-top:clamp(48px,6vw,72px)} .route-line{position:absolute;left:0;right:0;top:2px;width:100%;height:40px;overflow:visible;pointer-events:none} .route-down{display:none} .route-line path,.route-down path{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-dasharray:1 1} .rl-base{stroke-width:2.6;opacity:.8;filter:url(#rough)} .rl-hi{stroke-width:6;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--out)} .js-motion .route .rl-base{stroke-dashoffset:1} .js-motion .route.in .rl-base{animation:route 2.4s linear both} @keyframes route{0%{stroke-dashoffset:.97}18%{stroke-dashoffset:.73}26%{stroke-dashoffset:.73}44%{stroke-dashoffset:.48}52%{stroke-dashoffset:.48}70%{stroke-dashoffset:.23}78%{stroke-dashoffset:.23}100%{stroke-dashoffset:0}} .node{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper)} .node svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .node svg path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;filter:url(#rough)} .node b{position:relative;font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.35rem;line-height:1} .node .dot{position:absolute;inset:5px;border-radius:50%;background:url(img/wash/aurora.webp) 45% 45% / 260% auto;opacity:0;transform:scale(.5);transition:opacity .4s,transform .5s var(--out)} .js-motion .route .node svg path{stroke-dashoffset:1} .js-motion .route.in .node svg path{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--out) calc(var(--i) * .62s)} .js-motion .route li h3,.js-motion .route li p{opacity:0;transform:translateY(16px)} .js-motion .route.in li h3,.js-motion .route.in li p{opacity:1;transform:none;transition:opacity .8s var(--out) calc(var(--i) * .62s + .15s),transform .9s var(--out) calc(var(--i) * .62s + .15s)} /* once the steps come into view, each number fills with the aurora in turn and the line grows with them; it plays once and stays */ .route.in .node .dot{opacity:.85;transform:none} .route.in .rl-hi{stroke-dashoffset:.22} .js-motion .route.in .node .dot{transition:opacity .5s calc(var(--i) * .62s + .55s),transform .6s var(--out) calc(var(--i) * .62s + .55s)} .js-motion .route.in .rl-hi{transition:stroke-dashoffset 1.9s linear .6s} @media (max-width:760px){ .route-line{display:none} .route-down{display:block;position:absolute;left:20px;top:22px;bottom:0;width:4px;height:calc(100% - 22px);overflow:visible} .js-motion .route .route-down .rl-base{stroke-dashoffset:1} .js-motion .route.in .route-down .rl-base{animation:none;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s linear} .node{position:absolute;left:0;top:-6px} } /* the promise, as a timeline in ink with a watercolour tint */ .promise2{margin-top:clamp(64px,8vw,96px)} .promise-h{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)} .timeline{margin-top:var(--s4);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) clamp(24px,3.4vw,48px)} .timeline li{position:relative;padding-top:var(--s5)} .timeline li::before,.timeline li::after{content:"";position:absolute;left:0;right:0;background:var(--ink);-webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat} .timeline li::before{top:-3px;height:7px;opacity:.5} .timeline li::after{top:-6px;height:12px;opacity:0;transition:opacity .25s} .timeline li:hover::after,.timeline li.is-live::after{opacity:1} .timeline .big{font-family:var(--serif);font-size:clamp(2.2rem,1.5rem + 2vw,3.4rem);line-height:1.05;word-spacing:.04em;color:#3d2fa8; background:url(img/wash/teal-violet.webp) 30% 50% / 220% auto,linear-gradient(90deg,#1683c4,#5b45d8 60%,#9c3fc0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .timeline .big + p{margin-top:var(--s3);color:var(--ink-2);max-width:26em} @media (max-width:900px){.timeline{grid-template-columns:1fr}} /* ---------- packages: a set of three that answers the pointer ---------- */ .packs{gap:var(--s4)} .pack,.pack:first-child{padding:var(--s6) var(--s5);transition:transform .5s var(--out)} .pack > :not(.pk-wash):not(.frame-ink){position:relative;z-index:2} .pack .frame-ink path{opacity:.4} .pack:hover,.pack:focus-within,.pack.is-live{transform:translateY(-4px)} .pack:hover .frame-ink path,.pack:focus-within .frame-ink path,.pack.is-live .frame-ink path{opacity:.85} .pk-wash{position:absolute;z-index:0;left:var(--px,50%);top:var(--py,40%);width:540px;max-width:none;height:auto;transform:translate(-50%,-50%) scale(.3);opacity:0;mix-blend-mode:multiply;pointer-events:none;transition:opacity .6s ease,transform 1s var(--out)} .pack:hover .pk-wash,.pack:focus-within .pk-wash,.pack.is-live .pk-wash{opacity:.5;transform:translate(-50%,-50%) scale(1)} .pack.sig{overflow:hidden} .pack.sig .pk-wash{mix-blend-mode:screen} .pack.sig:hover .pk-wash,.pack.sig:focus-within .pk-wash,.pack.sig.is-live .pk-wash{opacity:.3} .pack:hover .rounds::before,.pack:hover .rounds::after,.pack:focus-within .rounds::before,.pack:focus-within .rounds::after,.pack.is-live .rounds::before,.pack.is-live .rounds::after{animation:rule-draw .5s var(--out) both} .pack .btn{align-self:stretch;justify-content:center;min-height:52px} .pack.is-sel .btn-ghost{background:var(--ink);color:var(--paper)} .btn-paper:hover{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px rgba(109,82,245,.9),0 0 14px rgba(138,92,255,.45)} @media (max-width:900px){.pack,.pack:first-child{padding:var(--s5) var(--s4)}.pack.sig{margin:0}} /* ---------- get a quote: fields you can see, a page with ruled lines, a progress row ---------- */ .field > label{font-size:.82rem} .brief input[type=text],.brief input[type=email],.brief input[type=tel]{height:44px;min-height:0;padding:0 0 10px} .brief input::placeholder,.brief textarea::placeholder{color:#8a8378} .quote .brief textarea{border:0;border-radius:0;box-shadow:none;padding:0;min-height:0;line-height:34px;resize:vertical; background:var(--rule-ink) 0 0 / 100% 34px repeat-y local,transparent} .quote .brief textarea:focus{background-image:var(--rule-aur);box-shadow:none} .quote .brief textarea[aria-invalid=true]{background-image:var(--rule-err)} .pk-chosen{display:block} .pk-chosen .pk-clear{margin-left:12px;vertical-align:middle} .pk-chosen b{position:relative;display:inline-block} .pk-chosen b::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:6px;background:var(--aurora);-webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat} .pk-chosen.fresh b::after{animation:rule-draw .6s var(--out) both} .brief.pulse::before{animation:pulse .9s ease} .dots{display:flex;gap:10px;margin-top:var(--s5)} .dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(28,26,23,.55);transition:box-shadow .3s} .dots i.on{background:url(img/wash/aurora.webp) 45% 45% / 400% auto;box-shadow:inset 0 0 0 1.5px #5b45d8} .dots + .send{margin-top:var(--s3)} .form-status .check{display:inline-block;width:44px;height:30px;vertical-align:-4px;margin-right:12px;fill:none;stroke:#3d2fa8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .form-status .check path{stroke-dasharray:1 1;animation:redraw .7s var(--out) both} .mini-sumi{position:relative;display:block;width:72px;margin-top:var(--s3);aspect-ratio:1800/1980;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 60%,transparent 100%)} .mini-sumi img{position:absolute;inset:0;width:100%;height:100%} .mini-sumi .shut{inset:auto;left:27.78%;top:43.69%;width:24.06%;height:14.19%;opacity:0} .mini-sumi .shut.on{opacity:1} /* ---------- contact: a softer bloom, less paper below ---------- */ .contact{padding-bottom:var(--s5)} .contact-art{max-width:440px;margin-top:0} .contact-art .c-bloom{inset:auto;left:-10%;top:4%;width:120%;height:auto;aspect-ratio:1;opacity:.45;mix-blend-mode:multiply} .contact-art .owl-layer{position:absolute;inset:0;width:100%;height:100%} /* ---------- footer: all the links, a wash under the logo, the rule draws in ---------- */ .foot{position:relative;overflow:hidden} .foot > .wrap{position:relative;z-index:1} .foot-wash{position:absolute;z-index:0;left:max(0px,(100% - var(--max)) / 2 + 80px);top:-120px;width:520px;height:auto;opacity:.18;mix-blend-mode:multiply;pointer-events:none} .js-motion .foot .top::after{clip-path:inset(0 100% 0 0)} .js-motion .foot .top.in::after{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--inout) .2s} .f-links{display:flex;flex-wrap:wrap;gap:8px 20px} .f-links a{color:var(--ink-2)} @media (max-width:760px){.foot nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;width:100%}} /* ---------- phones: a Get a quote pill that follows after the hero ---------- */ .sticky-quote{display:none} @media (max-width:760px){ .sticky-quote{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:99px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;box-shadow:0 12px 30px -12px rgba(28,26,23,.6);transform:translateY(150%);opacity:0;transition:transform .45s var(--out),opacity .3s} .sticky-quote.on{transform:none;opacity:1} body.locked .sticky-quote{opacity:0} } /* how we work: steps (restored after the orphan sweep) */ .steps2{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.4vw,36px)} .steps2 li{position:relative} .steps2 li:hover .dot,.steps2 li.is-live .dot{opacity:.85;transform:none} .steps2 h3{margin-top:var(--s4);font-size:clamp(1.5rem,1.2rem + .7vw,1.95rem);line-height:1.12} .steps2 p{margin-top:var(--s2);color:var(--ink-2)} @media (max-width:760px){ .steps2{grid-template-columns:1fr;gap:var(--s6)} .steps2 li{padding-left:64px} .steps2 h3{margin-top:0} } .sec{overflow-x:clip} /* ===================================================================== Round 11 ===================================================================== */ /* nav: the section you are in keeps the aurora brush underline; weight stays put */ .nav a.is-here{font-weight:500} .nav a.is-here:not(.btn):not(.wa-link)::after{clip-path:inset(0 0 0 0)} .panel nav a.is-here{font-weight:inherit} /* phones: the small bar tucks away while you read down and returns when you scroll up */ @media (max-width:760px) and (prefers-reduced-motion:no-preference){ .bar{transition:transform .28s var(--out)} .bar.on.tuck{transform:translateY(-102%)} .bar.on.tuck:focus-within{transform:none} } /* hero: Sumi's wash fades to paper before the screen edge; the bloom tints the wash and paper, never the owl */ .art{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 99%),linear-gradient(90deg,transparent 0,#000 9%,#000 90%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent 99%),linear-gradient(90deg,transparent 0,#000 9%,#000 90%,transparent 100%)} .contact-art .c-bloom{left:-8%;top:5%;width:110%} .hero.rest .owl-layer{display:none} .hero{min-height:max(600px,calc(var(--artH) * .9))} .hero-copy{min-height:max(600px,calc(var(--artH) * .9))} @media (max-width:900px),(max-aspect-ratio:1/1){.hero,.hero-copy{min-height:0}} /* every wash fades to paper on all sides */ .sec-wash,.band-wash,.row-wash,.pk-wash,.foot-wash{-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%)} /* problem: faded columns stay readable; the wash sits right of the lede */ .problems:has(li:hover) li:not(:hover),.problems:has(li.is-live) li:not(.is-live){opacity:.82} .sec-wash.w-right{right:max(8px,2vw);top:-20px;width:min(640px,56vw)} /* services: the frame closes, the wash sits behind the drawing */ .band-wash{left:auto;right:-4%;top:-12%;width:62%;opacity:.45} .js-motion .lead-band.in .band-wash{opacity:.45} .mk2.brushed .bf{fill:currentColor;stroke:none} .mk2.brushed .rev{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0} .js-motion .mk2.brushed .rev{stroke-dashoffset:1} .js-motion .in .mk2.brushed .rev{stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--out) calc(var(--k,0) * 90ms + .3s)} .next li:hover .mk2.brushed .rev,.next li.is-live .mk2.brushed .rev{animation:redraw .55s var(--out) both;animation-delay:calc(var(--k,0) * 70ms)} .next li:hover .mk2.brushed .bf,.next li.is-live .mk2.brushed .bf{animation:none} /* getting found: only the three painted washes, rows closer together */ #found::before{display:none} .found{gap:clamp(32px,4vw,48px)} /* how we work: no stray end dot before the stroke is drawn; the wash sits clear of the timeline text */ .js-motion .route:not(.in) .rl-base{opacity:0} .rl-hi{opacity:0;transition:stroke-dashoffset .6s var(--out),opacity .2s} .route:has(li:hover) .rl-hi,.route:has(li.is-live) .rl-hi{opacity:1} .sec-wash.w-left{left:-12vw;top:auto;bottom:-140px;width:min(560px,52vw);opacity:.4} .js-motion .sec-wash.w-left.in{opacity:.4} /* packages: the bloom stays inside its card and follows the pointer; frames in divider ink */ .pack{overflow:clip} .pk-wash{left:0;top:0;transform:translate(calc(var(--px,50%) - 50%),calc(var(--py,40%) - 50%)) scale(.3);transition:opacity .6s ease,transform .9s var(--out)} .pack:hover .pk-wash,.pack:focus-within .pk-wash,.pack.is-live .pk-wash{transform:translate(calc(var(--px,50%) - 50%),calc(var(--py,40%) - 50%)) scale(1)} .pack .frame-ink path{opacity:.7;stroke-width:2.2} /* get a quote: the intro travels with the form, the dots say what they count, no resize grip */ .quote .wrap{align-items:start} .q-intro{position:sticky;top:120px;align-self:start} .quote .brief textarea{resize:none} .dots{align-items:center;flex-wrap:wrap} .dots-l{margin-left:6px;font-size:.82rem;color:var(--ink-3)} .dots-l span{transition:color .3s} .dots-l span.on{color:var(--ink);font-weight:600} .dots-l .count{margin-left:8px;color:var(--ink-2)} @media (max-width:900px){.q-intro{position:static}} /* contact: less paper before the footer */ .contact-grid{align-items:center} .contact-art{max-width:380px} .contact{padding-bottom:0} .foot{padding-top:clamp(48px,6vw,72px)} /* footer: the wash sits inside the footer and fades on every side */ .foot-wash{top:10px;left:max(0px,(100% - var(--max)) / 2);width:460px;opacity:.2} /* phone pill: smaller, a paper halo, and room at the end of the page */ @media (max-width:760px){ .sticky-quote{min-height:44px;padding:0 20px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));box-shadow:0 0 0 4px rgba(244,241,234,.9),0 0 12px 6px rgba(244,241,234,.85),0 12px 30px -12px rgba(28,26,23,.6)} body{padding-bottom:88px} .foot{margin-bottom:-88px;padding-bottom:calc(32px + 88px)} } /* arrival order: the branch is painted first, then Ao fades in on it as the wash blooms */ .js-motion .hero:not(.rest) .owl-layer{opacity:0;transform:scale(.985);transform-origin:50% 88%;transition:opacity .65s ease,transform .8s var(--out)} .js-motion .hero.owl-in:not(.rest) .owl-layer{opacity:1;transform:none} /* ===================================================================== Round 12: Ao flies in ===================================================================== */ .hero .flight{position:absolute;inset:0;z-index:3;pointer-events:none} .js-motion .hero.landed .art-full{opacity:1;transition:opacity .28s ease-out} /* laptop and desktop: his flare is about 1.4 times the painting's width, mostly to the right of him. Size the painting so the whole flare fits between the screen's left edge and the words: painting left = 0.162 of its width + 8 px, words start 1.243 of its width after that + 16 px. */ @media (min-width:901px) and (min-aspect-ratio:1/1){ .hero{--artW:clamp(440px,min(calc(94svh * .90909),calc((100vw - 590px) / 1.405)),1000px);--artH:calc(var(--artW) * 1.1)} .art{left:calc(var(--artW) * .162 + 8px);top:calc(var(--artH) * -.02)} .hero-copy{padding-left:calc(var(--artW) * 1.405 + 24px);max-width:calc(var(--artW) * 1.405 + 24px + 640px)} .hero,.hero-copy{min-height:max(620px,calc(var(--artH) * .92))} } /* round 12: the bloom tints only paper and wash; its mask is the painting's own owl silhouette (made by .qa/bloom_mask.py), so the owl's head, ink and body are never tinted */ :root{--owl-safe:url("data:image/webp;base64,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")} .bloom-box{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--owl-safe) 0 0 / 100% 100% no-repeat;mask:var(--owl-safe) 0 0 / 100% 100% no-repeat} .art .bloom,.contact-art .c-bloom{-webkit-mask:none;mask:none;left:-8%;top:5%;width:110%;height:auto;aspect-ratio:1} /* the bloom grows from Ao by scale and opacity, no hard circle edge */ .js-motion .hero .bloom{clip-path:none;opacity:0;transform:scale(.55);transform-origin:45% 50%} .js-motion .hero.bloom-on .bloom{clip-path:none;opacity:.5;transform:none;transition:opacity 1.2s ease,transform 1.5s cubic-bezier(.2,.7,.2,1)} /* at landing the painting is simply there under the flight canvas (its last frame matches it), no crossfade dip */ .js-motion .hero.landed .art-full{transition:none} /* ---------- round 12: washes belong to something ---------- */ /* problem: a small wash blooms behind the numeral of the column you are reading, then fades back */ .problems li{position:relative} .n-wash{position:absolute;z-index:-1;left:-40px;top:-10px;width:220px;height:auto;opacity:0;transform:scale(.4);transform-origin:40px 30px;mix-blend-mode:multiply;pointer-events:none; -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);transition:opacity .6s ease,transform .9s var(--out)} .problems li:hover .n-wash,.problems li.is-live .n-wash{opacity:.55;transform:none} .problems{isolation:isolate} /* footer: the wash belongs to the logo and blooms only when you point at it */ .foot-logo{position:relative;isolation:isolate} .foot-logo .foot-wash{position:absolute;z-index:-1;left:40%;top:-60%;width:320px;opacity:0;transform:scale(.5);transition:opacity .6s ease,transform 1s var(--out)} .foot-logo:hover .foot-wash,.foot-logo:focus-visible .foot-wash{opacity:.3;transform:none} /* ---------- Easter eggs ---------- */ ::selection{background:rgba(138,92,255,.24);color:inherit} /* the logo's aurora wave ripples like wet ink under the pointer (filter only while it runs) */ .lockup:hover svg path[fill^="url"],.lockup:focus-visible svg path[fill^="url"]{filter:url(#wet)} /* asleep after a quiet half minute: three Z's in the aurora colours rise from beside his head, small near him and growing as they float away, over and over until he wakes, so he reads as asleep, not blinking */ .zzz{position:absolute;left:60%;top:22%;z-index:4;pointer-events:none;font:italic 600 clamp(15px,1.68vw,28px)/1 var(--serif)} .zzz i{position:absolute;left:0;top:0;opacity:0;font-style:normal;background:linear-gradient(135deg,#1a9ee6,#6d52f5 55%,#b44fd6);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))} .hero.asleep .zzz i{animation:zrise 4.5s ease-in-out infinite} .hero.asleep .zzz i:nth-child(2){animation-delay:1.5s} .hero.asleep .zzz i:nth-child(3){animation-delay:3s} /* a calm, straight drift up and a little to the right, barely tilting */ @keyframes zrise{0%{opacity:0;transform:translate(0,0) scale(.45) rotate(-6deg)}12%{opacity:1}45%{transform:translate(.23em,-.95em) scale(.75) rotate(-1deg)}80%{opacity:.95}100%{opacity:0;transform:translate(.5em,-2.1em) scale(1) rotate(4deg)}} /* an ink drop on empty paper that blooms into a small aurora flower */ .drop{position:absolute;z-index:30;width:90px;height:90px;margin:-45px 0 0 -45px;pointer-events:none} .drop i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink);animation:dropdot .9s ease-out forwards} .drop img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;mix-blend-mode:multiply;opacity:0;animation:dropbloom 3.2s ease-out .25s forwards; -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)} @keyframes dropdot{0%{transform:scale(0)}30%{transform:scale(1.2)}100%{transform:scale(.6);opacity:0}} @keyframes dropbloom{0%{opacity:0;transform:scale(.2) rotate(0deg)}20%{opacity:.6;transform:scale(.8) rotate(16deg)}52%{opacity:.6;transform:scale(.92) rotate(26deg)}100%{opacity:0;transform:scale(1) rotate(40deg)}} @media (prefers-reduced-motion:reduce){.zzz,.drop{display:none}} /* 404: Ao looking a little lost */ .nf .lost{position:relative;display:block;width:min(300px,70vw);margin:0 auto;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)} .nf .lost img{width:100%;-webkit-mask-image:none;mask-image:none;margin:0} .nf .lost .shut{position:absolute;left:27.78%;top:43.69%;width:24.06%;height:auto;opacity:0} .nf .lost.look{animation:lookabout 5s ease-in-out infinite;transform-origin:50% 85%} @keyframes lookabout{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}45%{transform:rotate(-4deg)}65%{transform:rotate(3deg)}85%{transform:rotate(3deg)}} /* ===================================================================== Round 13: the branch comes from the left edge, the words get their room back, the painting's paper matches the page (tone-matched in the images themselves) ===================================================================== */ .branch-ext{display:none} @media (min-width:901px) and (min-aspect-ratio:1/1){ /* the painting is sized so the words start just under half way across */ .hero{--artW:clamp(340px,min(calc(94svh * .90909),calc(39.5vw - 7px)),1000px);--artH:calc(var(--artW) * 1.1)} .art{left:calc(var(--artW) * .168 + 8px)} .hero-copy{padding-left:calc(var(--artW) * 1.19 + 16px);max-width:calc(var(--artW) * 1.19 + 16px + 660px)} /* the branch's own strokes carry it from the painting's left edge off the left of the screen */ .branch-ext{display:block;position:absolute;z-index:0;pointer-events:none; left:calc(var(--artW) * .168 + 8px - var(--artW) * .42222);top:calc(var(--artH) * -.02 + var(--artH) * .85354); width:calc(var(--artW) * .42222);height:auto} /* the flare's far wingtip passes behind the words for a moment instead of pushing them right */ .hero .flight{z-index:1} } /* the painting's paper now matches the page, so its edges only need a short fade; the left edge stays open for the branch */ .art{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 97%,transparent 100%),linear-gradient(90deg,#000 0,#000 92%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 97%,transparent 100%),linear-gradient(90deg,#000 0,#000 92%,transparent 100%)} /* Signature badge: top right, a small squircle with an aurora border */ .packs .pack.sig .pick{position:absolute;z-index:3;top:18px;right:18px;margin:0;padding:6px 12px;border-radius:11px;corner-shape:squircle; border:1.5px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,linear-gradient(90deg,#36d7ff,#1a9ee6 30%,#6d52f5 55%,#b44fd6 80%,#e062e6) border-box; color:var(--paper);font-size:.72rem;line-height:1.2} .packs .pack.sig .pick::before{display:none} .packs .pack.sig h3{padding-right:0} /* ---------- round 13: mentions play out one source at a time ---------- */ .mentions .src{transition:color .3s} .mentions .c{stroke:currentColor;opacity:.55} .mentions .glow{opacity:0} .mentions .glow rect{filter:blur(6px)} .mentions .mini path{opacity:0} .mentions .count tspan{opacity:0;fill:#5b45d8} .found li:nth-child(3):hover .mentions .ants,.found li:nth-child(3).is-live .mentions .ants{animation:none} @keyframes m-light{to{color:#5b45d8}} @keyframes m-draw{from{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:1}to{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:1;stroke:url(#aur-m);stroke-width:2.6}} @keyframes m-glow{to{opacity:var(--g)}} @keyframes m-ink{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}} .mentions .mini path{transform-box:fill-box;transform-origin:center} @keyframes m-show{0%,100%{opacity:0}10%,90%{opacity:1}} @keyframes m-last{0%{opacity:0}100%{opacity:1}} .found li:nth-child(3):is(:hover,.is-live) .mentions .src{animation:m-light .4s ease forwards} .found li:nth-child(3):is(:hover,.is-live) .mentions .c{animation:m-draw .7s var(--out) forwards} .found li:nth-child(3):is(:hover,.is-live) .mentions .s1,.found li:nth-child(3):is(:hover,.is-live) .mentions .c1{animation-delay:0s,0s} .found li:nth-child(3):is(:hover,.is-live) .mentions .c1{animation-delay:.15s} .found li:nth-child(3):is(:hover,.is-live) .mentions .s2{animation-delay:.6s}.found li:nth-child(3):is(:hover,.is-live) .mentions .c2{animation-delay:.75s} .found li:nth-child(3):is(:hover,.is-live) .mentions .s3{animation-delay:1.2s}.found li:nth-child(3):is(:hover,.is-live) .mentions .c3{animation-delay:1.35s} .found li:nth-child(3):is(:hover,.is-live) .mentions .s4{animation-delay:1.8s}.found li:nth-child(3):is(:hover,.is-live) .mentions .c4{animation-delay:1.95s} .found li:nth-child(3):is(:hover,.is-live) .mentions .mini path{animation:m-ink .35s var(--out) forwards} .found li:nth-child(3):is(:hover,.is-live) .mentions .mini path:nth-child(1){animation-delay:.85s} .found li:nth-child(3):is(:hover,.is-live) .mentions .mini path:nth-child(2){animation-delay:.95s} .found li:nth-child(3):is(:hover,.is-live) .mentions .mini path:nth-child(3){animation-delay:1.05s} .found li:nth-child(3):is(:hover,.is-live) .mentions .mini path:nth-child(4){animation-delay:1.15s} .found li:nth-child(3):is(:hover,.is-live) .mentions .mini path:nth-child(5){animation-delay:1.25s} .found li:nth-child(3):is(:hover,.is-live) .mentions .glow{animation:m-glow 2.6s linear forwards;--g:.45} .found li:nth-child(3):is(:hover,.is-live) .mentions .n1{animation:m-show .6s .7s both} .found li:nth-child(3):is(:hover,.is-live) .mentions .n2{animation:m-show .6s 1.3s both} .found li:nth-child(3):is(:hover,.is-live) .mentions .n3{animation:m-show .6s 1.9s both} .found li:nth-child(3):is(:hover,.is-live) .mentions .n4{animation:m-last .4s 2.5s both} .found li:nth-child(3):is(:hover,.is-live) .mentions .name{stroke:#5b45d8;transition:stroke .4s 2.4s} @media (prefers-reduced-motion:reduce){ .found li:nth-child(3):is(:hover,.is-live) .mentions *{animation-delay:0s!important} } /* ---------- round 13: growth keeps going after step 4 ---------- */ .route-line{overflow:visible} .route-line .rl-grow{fill:none;stroke:url(#aur-grow);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 2;stroke-dashoffset:0;opacity:0;transition:stroke-dasharray .8s var(--out),opacity .4s} .route:has(li:nth-child(4):hover) .route-line .rl-grow,.route:has(li:nth-child(4).is-live) .route-line .rl-grow{opacity:1;stroke-dasharray:1 2;transition:stroke-dasharray 9s cubic-bezier(.2,.4,.5,1),opacity .4s} .route:has(li:nth-child(4):hover) .rl-hi,.route:has(li:nth-child(4).is-live) .rl-hi{stroke-dashoffset:.22} /* ---------- round 13: flutter in place (hero and contact) ---------- */ .flutter-cv{position:absolute;z-index:3;pointer-events:none} .fluttering .art-full,.fluttering .shut{visibility:hidden} .hero.fluttering .branch-layer{display:block!important;-webkit-mask:none!important;mask:none!important} /* ---------- round 13: the hero fills the first screen, art and words centred in it ---------- */ @media (min-width:901px) and (min-aspect-ratio:1/1){ .hero{min-height:100svh;--artTop:max(64px,calc((100svh - var(--artH)) / 2 + 36px))} .hero-copy{min-height:100svh;padding-top:96px;padding-bottom:48px} .art{top:var(--artTop)} .branch-ext{top:calc(var(--artTop) + var(--artH) * .85354);width:calc(var(--artW) * .46111)} /* the painting is never taller than the space under the header */ .hero{--artW:clamp(340px,min(calc((100svh - 110px) / 1.1),calc(39.5vw - 7px)),1000px)} } /* the painting's bottom melts into the paper under the branch */ .art{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 95%,transparent 100%),linear-gradient(90deg,#000 0,#000 92%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 95%,transparent 100%),linear-gradient(90deg,#000 0,#000 92%,transparent 100%)} /* ---------- the day and night button: a small round moon, not a switch ---------- */ .theme-btn{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(28,26,23,.3);transition:box-shadow .3s,color .3s} .theme-btn:hover,.theme-btn:focus-visible{color:#3d2fa8;box-shadow:inset 0 0 0 1px #6d52f5,0 0 10px rgba(138,92,255,.3)} .nav .theme-btn{min-height:0;padding:0} @media (max-width:560px){.nav{gap:10px}} /* ---------- round 13, second pass ---------- */ .nav a.theme-btn{display:inline-grid} /* hover: his bloom deepens, nothing is displaced */ .art .bloom{left:3%;width:94%;top:9%} .js-motion .hero.bloom-on .art:hover .bloom,.hero .art:hover .bloom{opacity:.72;transition:opacity 1.2s ease} /* more room: a larger painting and headline, the words in a wide column, even margins */ @media (min-width:901px) and (min-aspect-ratio:1/1){ .hero{--artW:clamp(340px,min(calc((100svh - 110px) / 1.1),calc(41vw - 7px)),1040px)} .hero-copy{padding-left:calc(var(--artW) * 1.19 + 24px);padding-right:var(--gut);max-width:none} .hero-copy > *{max-width:640px} .hero h1{font-size:clamp(2.6rem,.8rem + 3.3vw,4.4rem)} .hero .sub{font-size:clamp(1.05rem,.8rem + .5vw,1.28rem);max-width:34em} } /* back to top: bottom left, a small round paper button */ .to-top{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:grid;place-items:center;width:36px;height:36px;border-radius:50%; background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(28,26,23,.28),0 6px 16px -10px rgba(28,26,23,.5);text-decoration:none; opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s,transform .45s var(--out),box-shadow .3s} .to-top.on{opacity:1;transform:none;pointer-events:auto} .to-top:hover,.to-top:focus-visible{outline:none;box-shadow:0 0 0 1.5px transparent;background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box,linear-gradient(90deg,#36d7ff,#1a9ee6 30%,#6d52f5 55%,#b44fd6 80%,#e062e6) border-box;border:1.5px solid transparent} body.locked .to-top{opacity:0} .to-top svg{width:18px;height:18px} /* the moon button never takes the nav's underline, and its crescent sits optically centred */ .nav a.theme-btn::after,.nav a.theme-btn:hover::after,.nav a.theme-btn.is-here::after{content:none;display:none} .theme-btn{place-items:center;padding:0;line-height:0} .theme-btn svg{display:block;width:18px;height:18px;transform:translate(.5px,.5px)} /* moon: an ink crescent in a hairline circle; on hover or focus a deep aurora fill and a white moon */ .theme-btn:hover,.theme-btn:focus-visible{outline:none;color:#fff;background:linear-gradient(135deg,#1b2a6b,#3f2d8f 50%,#6a2a7a);box-shadow:0 0 0 1px rgba(63,45,143,.6),0 0 12px rgba(109,82,245,.35)} .theme-btn:hover svg,.theme-btn:focus-visible svg{filter:drop-shadow(0 0 3px rgba(255,255,255,.7))} @media (max-width:560px){ .menu-btn .mb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .menu-btn{padding:0 4px 0 6px} .masthead .wrap{gap:12px} } .nav a.theme-btn{padding:0;min-height:0} .theme-btn svg{transform:translate(-.4px,.2px)} .nav a.theme-btn{color:var(--ink)} .nav a.theme-btn:hover,.nav a.theme-btn:focus-visible{color:#fff} /* moon, final: at rest an ink crescent in a hairline circle on the paper; on hover or focus a deep aurora disc, a gentle glow and a white moon, easing in and out over 0.3 s */ .theme-btn,.nav a.theme-btn{color:var(--ink);background:linear-gradient(135deg,rgba(27,42,107,0),rgba(63,45,143,0) 50%,rgba(106,42,122,0));box-shadow:inset 0 0 0 1px rgba(28,26,23,.3);transition:color .3s ease,background-color .3s ease,box-shadow .3s ease,opacity .3s} .theme-btn::before{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#1b2a6b,#3f2d8f 50%,#6a2a7a);opacity:0;transition:opacity .3s ease} .theme-btn{position:relative;isolation:isolate} .theme-btn svg{position:relative;z-index:1} .theme-btn:hover::before,.theme-btn:focus-visible::before{opacity:1} .theme-btn:hover,.theme-btn:focus-visible,.nav a.theme-btn:hover,.nav a.theme-btn:focus-visible{color:#fff;background:none;box-shadow:0 0 0 1px rgba(63,45,143,.55),0 0 12px rgba(109,82,245,.35)} /* clicking Ao shows no ring; keyboard users still get one */ [data-blink][data-pointer]:focus,[data-blink][data-pointer]:focus-visible{outline:none} /* ===================================================================== Round 14: a bigger Ao nearer the left edge, a shorter and thicker branch run ===================================================================== */ @media (min-width:901px) and (min-aspect-ratio:1/1){ .hero{ --artW:clamp(360px,min(calc((100svh - 90px) / .76),calc(45vw - 7px)),1100px);--artH:calc(var(--artW) * 1.1); /* he brakes a little right of the perch (flareShift .07), so the painting can sit this close to the edge */ --artLeft:calc(var(--artW) * .098 + 28px); /* centre the owl and branch (0.25 to 0.96 of the painting) in the space under the header */ --artTop:calc(90px + (100svh - 90px - var(--artH) * .71) / 2 - var(--artH) * .25)} .art{left:var(--artLeft);top:var(--artTop)} .hero-copy{padding-left:calc(var(--artLeft) + var(--artW) * .98 + 16px)} .branch-ext{left:calc(var(--artLeft) - var(--artW) * .42222);top:calc(var(--artTop) + var(--artH) * .85354);width:calc(var(--artW) * .47222)} } /* rapid taps on Ao must not select the painting */ [data-blink],[data-blink] *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent} /* phones: Get a quote lives in a solid strip docked to the bottom (the section judge's pattern). Nothing is ever half-covered: the strip is opaque, it slides away while you read down, and comes back when you scroll up or pause. */ @media (max-width:760px){ .sticky-quote{left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));justify-content:center;min-height:48px;padding:0 20px;box-shadow:none;transform:translateY(calc(100% + 30px))} .sticky-quote::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:-10px;bottom:calc(-10px - env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid rgba(28,26,23,.12)} .sticky-quote.on{transform:none} .to-top{bottom:calc(84px + env(safe-area-inset-bottom))} } @media (max-width:760px){.sticky-quote{background:transparent}.sticky-quote::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:99px;background:var(--ink)}} /* phones: a smaller owl, clear space under the branch, smaller type, so the headline, the sub-line and both buttons fit on the first screen (Vish, 27 Sep: the text overlapped the branch and was too big) */ @media (max-width:560px){ .hero{--artH:min(38svh,400px);--artW:calc(var(--artH) * .90909)} .art{margin-bottom:calc(var(--artH) * .02)} .hero-copy{padding-bottom:32px} .hero .eyebrow{font-size:.68rem;letter-spacing:.14em;margin-bottom:10px} .hero h1{font-size:clamp(1.85rem,7.6vw,2.2rem);line-height:1.08} .hero .sub{font-size:.95rem;line-height:1.5;margin-top:12px} .hero .cta{margin-top:18px;gap:10px 20px} .hero .cta .btn{min-height:46px} } /* phones, 27 Sep pass: no reserved space at the end, tighter contact and footer */ @media (max-width:760px){ body{padding-bottom:0} .foot{margin-bottom:0;padding-bottom:32px} .contact{padding-bottom:24px} } /* phones: the packages become a swipeable row of paper cards, Signature first, the next card peeking in */ .pk-hint{display:none} @media (max-width:640px){ .pk-hint{display:block;margin-top:14px;font-size:.82rem;color:var(--ink-3)} .packs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:18px calc(var(--gut) * -1) 0;padding:8px var(--gut) 18px;scrollbar-width:none;align-items:stretch} .packs::-webkit-scrollbar{display:none} .packs>.pack{flex:0 0 84%;scroll-snap-align:center;border:1px solid var(--rule);border-top:1px solid var(--rule);border-radius:14px;padding:24px 20px;background:var(--paper);margin:0} .packs>.pack.sig{order:-1;background:var(--ink);border-color:transparent} } /* phones: Ao leads the contact section, centred, then the words and buttons, with less air between them */ @media (max-width:640px){ .contact-grid{grid-template-areas:"note" "art" "body"} .contact-art{justify-self:center;max-width:min(66vw,260px);margin:4px auto 0} .contact .sec-head{margin-top:0} .contact .ways{margin-top:20px;gap:12px 24px} .contact .addr{margin-top:16px} } /* phones: a tighter quote intro, and the contact buttons as two matching full-width buttons */ @media (max-width:640px){ .quote .sec-head{row-gap:10px} .q-intro .lede{margin-top:6px} .q-intro{margin-bottom:16px} .contact .ways{flex-direction:column;align-items:stretch;gap:10px} .contact .ways > a{justify-content:center;width:100%;min-height:52px;border-radius:99px} .contact .ways > a.line{box-shadow:inset 0 0 0 1.5px var(--ink);padding:0 20px} .contact .ways > a.line::after{display:none} } @media (max-width:640px){.quote > .wrap{row-gap:0}.contact .ways > a.line::before{display:none}} /* phones: a bigger Ao fills the space on the right and below, while the buttons still fit the first screen */ @media (max-width:560px){.hero{--artH:min(calc(100svh - 385px),560px,calc(100vw * 1.25))}.hero{--artW:calc(var(--artH) * .90909)}} /* phones, contact: the words, buttons and "Based in the UAE and India" first; Ao at the very bottom, centred */ @media (max-width:640px){ .contact-grid{grid-template-areas:"note" "body" "art"} .contact-art{justify-self:center;max-width:min(66vw,260px);margin:28px auto 0} } .pk-nav{display:none} /* phones: one whole package card at a time, in the order Signature, Flagship, Essential, with small arrows to move between them */ @media (max-width:640px){ .packs{gap:calc(var(--gut) * 2);padding-left:var(--gut);padding-right:var(--gut);scroll-padding:0 var(--gut)} .packs>.pack{flex:0 0 100%;scroll-snap-align:center} .packs>.pack.sig{order:1} .packs>.pack.peak{order:2} .packs>.pack:first-child{order:3} .pk-hint{display:none} .pk-nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:4px;font-size:.85rem} .pk-nav button{width:36px;height:36px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;opacity:.9} .pk-nav button:disabled{opacity:.25;cursor:default} .pk-nav svg{width:16px;height:16px} } /* three packages (24 Oct, Evidence removed): Essential, Signature, Flagship in a row from 901px; stacked below that; on phones Signature first, then Flagship, then Essential. Essential shows its starting price. */ .packs{grid-template-columns:1fr 1.08fr 1fr} @media (min-width:1101px){ .packs{gap:var(--s3)} .pack,.pack:first-child,.pack.sig{padding:var(--s6) var(--s4) var(--s5)} .pack .for,.pack li{font-size:.94rem} .pack .rounds{font-size:.86rem} } @media (min-width:1101px) and (max-width:1299px){.pack .for{min-height:4.8em}} @media (max-width:900px){.packs{grid-template-columns:1fr}} /* copy protection: artwork cannot be dragged out or saved with a long press on phones */ img,canvas,picture,svg{-webkit-user-drag:none;-webkit-touch-callout:none} /* ===================================================================== The plum tree (hero-tree round 10, design repo experiments/2026-09-28-hero-tree): the painted branch is replaced by his branch shortened past his wing with a flowering twig at its end, an upper bough from the corner, and a small swaying tip. Positions are percentages of .art, the owl painting's 1800 x 1980 box. ===================================================================== */ /* the painting's edge fade moves from .art to .art-in, so the tree reaching out of the box is not faded */ .hero .art{-webkit-mask-image:none;mask-image:none} .hero .art-in{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 95%,transparent 100%),linear-gradient(90deg,#000 0,#000 92%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 95%,transparent 100%),linear-gradient(90deg,#000 0,#000 92%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} .art .plum-perch,.art .plum-bough,.art .plum-tip{position:absolute;display:block;pointer-events:none} .art .plum-perch img,.art .plum-bough img,.art .plum-tip img{position:static;inset:auto;display:block;width:100%;height:100%;max-width:none} /* phones and tablets (the stacked layout) */ .art .plum-perch{left:-21.667%;top:62.525%;width:114.111%;height:41.414%} .art .plum-bough{left:-25.778%;top:10.808%;width:48.833%;height:13.889%} .art .plum-tip{left:19.667%;top:18.838%;width:8.111%;height:3.081%} .art .plum-tip img{transform-origin:2.07% 71.73%} /* computers */ @media (min-width:901px) and (min-aspect-ratio:1/1){ .art .plum-perch{left:-31.889%;top:61.212%;width:124.333%;height:50.808%} .art .plum-bough{left:-37.722%;top:9.646%;width:49.667%;height:17.828%} .art .plum-tip{left:9.389%;top:21.768%;width:10.833%;height:2.323%} .art .plum-tip img{transform-origin:1.95% 47.95%} } /* arrival: the tree is drawn in from the left, as the painted branch was, before he flies in */ .js-motion .hero:not(.rest) .plum-perch,.js-motion .hero:not(.rest) .plum-bough{ -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%); -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0} .js-motion .hero:not(.landed) .plum-tip{opacity:0} .js-motion .hero.landed .plum-tip{opacity:1;transition:opacity .6s ease} /* the tip sways a little once he has landed; with reduced motion there is no .js-motion and nothing moves */ @keyframes plum-sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(2.2deg)}} @media (prefers-reduced-motion:no-preference){.js-motion .hero.landed .plum-tip img{animation:plum-sway 6.5s ease-in-out infinite}} /* his feet as the finished painting has them (toes, claws, the wood under them): the owl layer leaves parts of them open, and the perch holds no part of him, so this shows exactly when the painting of him does (as .art-full) */ .art .toe{inset:auto;left:32.222%;top:85.253%;width:18.889%;height:3.535%;pointer-events:none} .js-motion .hero:not(.rest) .toe{opacity:0} .js-motion .hero.landed .toe{opacity:1} .fluttering .toe{visibility:hidden} /* room between his perch and the eyebrow line in the stacked layout */ @media (min-width:431px) and (max-width:900px),(min-width:431px) and (max-aspect-ratio:1/1){.hero .hero-copy{margin-top:24px}} /* ===================================================================== The red name seal (rakkan): 青 carved white in vermilion paste, pressed small and quiet on the wood where his branch comes in, at the base of the stroke, to be found rather than seen. A button; its card says what Ao means. ===================================================================== */ .seal-wrap{position:absolute;z-index:3;width:44px;height:44px;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s} .hero.landed .seal-wrap{opacity:1;visibility:visible;transition:opacity .6s ease .35s,visibility 0s .35s} .seal{appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;background:none;color:inherit;width:44px;height:44px;display:grid;place-items:center;border-radius:8px;cursor:pointer; -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} .seal-mark{display:block;width:22px;height:22px;overflow:visible;transform:rotate(-3deg);pointer-events:none} /* pressed on the dark wood: a brighter vermilion, about a seventh see-through, so the bark shows in the paste, its edge keeping 3:1 against the wood; tilted a little, one corner broken (hero-tree round 12); lighter on hover */ .seal-paste{fill:#e36543;fill-opacity:.86;transition:fill .3s ease} .seal:hover .seal-paste,.seal-wrap.open .seal-paste{fill:#ec7650} .seal-slip{fill:none} @media (max-width:900px){.seal-mark{width:20px;height:20px}} @media (max-width:599px){.seal-mark{width:18px;height:18px}} /* the first time it appears after he lands: a soft press into the paper; with reduced motion only the fade above */ @keyframes seal-in{0%{transform:rotate(-3deg) scale(1.3);opacity:0}55%{transform:rotate(-3deg) scale(.94);opacity:1}100%{transform:rotate(-3deg) scale(1);opacity:1}} @media (prefers-reduced-motion:no-preference){.hero.landed .seal-wrap:not(.stamped) .seal-mark{animation:seal-in .55s cubic-bezier(.3,1.3,.5,1) .35s both}} .seal-card{position:absolute;bottom:calc(100% - 6px);z-index:1;width:max-content;max-width:min(300px,calc(100vw - 32px));padding:12px 16px 13px;text-align:left} .seal-card[hidden]{display:none} .seal-card p{margin:0} /* Ink: a paper card, like the site's framed pictures; it opens up and to the right, over the painting */ .seal-card{left:2px;background:var(--paper-2);color:var(--ink);border-radius:10px;box-shadow:0 0 0 1px rgba(28,26,23,.14),0 24px 50px -30px rgba(28,26,23,.45)} .seal-l1{font:400 1.25rem/1.2 var(--serif)} /* Phones: Ao's art is 8.5% smaller, from about 459 to 420 px tall at 390, and the words stay exactly where they were; the room this frees below his perch and at the sides is the plum tree's (hero-tree round 12, chosen by Vish) */ @media (max-width:599px){ .hero{--artH0:min(calc(100svh - 385px),560px,calc(100vw * 1.25));--artH:calc(var(--artH0) * .915);--artW:calc(var(--artH) * .90909)} .art{margin:calc(var(--artH0) * -.03) 0 calc(var(--artH0) * 1.02 - var(--artH)) calc(var(--artH0) * -.03636 + (var(--artH0) - var(--artH)) * .4545)} } @media (min-width:600px) and (max-width:900px),(min-width:600px) and (max-aspect-ratio:1/1){.art .plum-perch{left:-12.611%;top:63.99%;width:105.056%;height:30.909%}.art .plum-bough{left:-25.778%;top:10.808%;width:48.722%;height:13.838%}.art .plum-tip{left:19.667%;top:18.889%;width:8%;height:3.03%}.art .plum-tip img{transform-origin:2.09% 71.26%}} /* SEO round (29 Sep): a section's link to its own page (/services/, /packages/), under its lede; the headline in the hero starts faint, never invisible, so it counts as the page's first large paint */ .sec-head .to-page{margin-top:calc(var(--s2) - var(--s4))} .sec-head .head-side .to-page{margin-top:var(--s2)} .js-motion .hero h1 [data-in]{opacity:.08} /* 23 Oct (jury): on phones the headline is on screen at full opacity from the first paint; the words around it still arrive */ @media (max-width:900px),(max-aspect-ratio:1/1){.js-motion .hero h1 [data-in]{opacity:1;transform:none}} /* 4 Oct: the one text link in "What comes next" (Content and proof, to /guides/) */ .next p a{text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:rgba(109,82,245,.6)} .next p a:hover{text-decoration-color:var(--a3)} /* ===================================================================== 5 Oct: the header holds four links (Services, Getting found, Packages, Blog), Get a quote and the day/night switch. Phones show the logo, Get a quote and the menu; the logo is drawn at 46 px there, as on the services pages, so all three fit a 375 px screen, and the switch moves into the menu. ===================================================================== */ .panel-theme{display:none} @media (max-width:560px){ .nav .btn{display:inline-flex;min-height:40px;padding:0 14px;font-size:.88rem} .nav a.theme-btn{display:none} .masthead .lockup svg,.bar .lockup svg{height:46px} .bar .wrap{height:64px} .panel .panel-theme{display:inline-flex;align-items:center;gap:10px;margin-top:auto;min-height:44px;color:var(--ink);text-decoration:none;font-weight:550} } /* the services, packages and blog pages: Menu is a link to the footer's links until pages.js makes it open the menu */ .nav a.menu-btn{display:none;color:var(--ink);text-decoration:none;padding:0 4px 0 14px;min-height:44px} .nav a.menu-btn:not(.btn)::after{content:none;display:none} @media (max-width:1060px){.nav a.menu-btn{display:inline-flex}} @media (max-width:560px){.nav a.menu-btn{padding:0 4px 0 6px}} /* footer (5 Oct): the lockup, then four columns of links; two columns on phones */ .foot .top{align-items:flex-start} .foot .f-cols{flex:1 1 640px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4) clamp(20px,2.4vw,40px);max-width:880px} .f-h{font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)} .f-col ul{margin-top:var(--s2);display:grid} .foot .f-col a{display:inline-block;padding:8px 0;color:var(--ink-2);text-decoration:none;overflow-wrap:anywhere} .foot .f-col a:hover{color:var(--ink)} /* the social accounts (7 Oct): a row of icons in the footer's bottom strip, apart from the ways to contact us above; each is named for screen readers */ .foot .f-social{display:inline-flex;align-items:center;gap:2px;margin-right:12px;vertical-align:middle} .foot .f-social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:inherit;text-decoration:none;transition:background-color .2s} .foot .f-social a:hover{background:rgba(127,127,127,.14)} .foot .f-social svg{width:20px;height:20px} /* soft colour (Vish, 7 Oct: the flat brand colours were loud, the watercolour versions looked muddy): each mark keeps its brand's colour, mixed down into the ink of the page. X is ink by day and paper-white by night */ .foot .f-social a[href*="linkedin.com"]{color:color-mix(in oklab,#0a66c2 72%,#1c1a17)} .foot .f-social a[href*="instagram.com"]{color:color-mix(in oklab,#d62976 72%,#1c1a17)} .foot .f-social a[href*="facebook.com"]{color:color-mix(in oklab,#0866ff 72%,#1c1a17)} .foot .f-social a[href*="bsky.app"]{color:color-mix(in oklab,#1185fe 72%,#1c1a17)} .foot .f-social a[href*="threads.com"]{color:var(--ink)} .foot .base,.foot .f-links{align-items:center} @media (max-width:1100px){.foot .f-cols{flex-basis:100%;max-width:none}} @media (max-width:760px){.foot .f-cols{grid-template-columns:1fr 1fr;row-gap:var(--s5)}} /* WhatsApp (5 Oct): a small round button at the bottom right once the hero has scrolled away; the page's script adds .on, and takes it off over the footer and while the menu is open. On the home page it sits above the phone's Get a quote strip. A short fade, none with reduced motion. */ .wa-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--paper-2);box-shadow:0 10px 24px -12px rgba(28,26,23,.7);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s} .wa-fab.on{opacity:1;visibility:visible;transition:opacity .25s ease} .wa-fab svg{display:block;width:24px;height:24px;fill:currentColor} .wa-fab:hover{box-shadow:0 0 0 1.5px var(--paper-2),0 0 0 3px var(--a3),0 10px 24px -12px rgba(28,26,23,.7)} .wa-fab:focus-visible{outline:2px solid var(--a3);outline-offset:3px} body.locked .wa-fab{opacity:0;visibility:hidden} @media (max-width:760px){.sticky-quote ~ .wa-fab{bottom:calc(84px + env(safe-area-inset-bottom))}} @media (prefers-reduced-motion:reduce){.wa-fab,.wa-fab.on{transition:none}} /* links into the blog (5 Oct), and the quote's quiet WhatsApp line under the send button */ .read-guide{margin-top:var(--s5)} .steps2 .more{margin-top:4px} .wa-alt{margin-top:var(--s3);color:var(--ink-2);font-size:.95rem} /* 8 Oct: the contact owl, the 404 owl and the quote thank-you owl sit on the hero's plum branch with the hero's feet layer (computer positions, percentages of the 1800 x 1980 painting box); the branch stays while he flutters */ .contact-art .plum-perch,.mini-sumi .plum-perch,.nf .lost .plum-perch{position:absolute;inset:auto;left:-31.889%;top:61.212%;width:124.333%;height:50.808%;max-width:none;margin:0} .contact-art .toe,.mini-sumi .toe,.nf .lost .toe{position:absolute;inset:auto;left:32.222%;top:85.253%;width:18.889%;height:3.535%;margin:0;pointer-events:none} .nf .lost .owl{position:relative} /* Hero text above 1920 (Vish, 12 Oct: layout B): the words grow faster than the art, 12 percent more at 2400, keeping the 1920 hierarchy, with the paragraph at about 65 characters a line. It grows in from nothing at 1920 (--t is 0 there and 1 from 2400 on; --f is 1 there and 1.12 from 2400 on), so resizing across 1920 never jumps, and 2560 is 2400 enlarged. .grows is set on the home only (head script). Lengths here are in the 1920 layout's px; the build multiplies them by --k. */ @media (min-width:1921px){ .grows{--t:min(1, calc((var(--k,1) - 1) * 4));--f:calc(1 + .12 * var(--t))} .grows .hero-copy > h1{max-width:calc((640px + 260px * var(--t)) * var(--f))} .grows .hero h1 .s1,.grows .hero h1 .s2{text-wrap:balance} .grows .hero .eyebrow{font-size:calc(12.48px * var(--f));margin-bottom:calc(32px * var(--f))} .grows .hero h1{font-size:calc(70.4px * var(--f))} .grows .hero .sub{margin-top:calc(32px * var(--f));font-size:calc(20.48px * var(--f));line-height:calc(1.55 + .05 * var(--t));max-width:calc(34em - 3em * var(--t))} .grows .hero .cta{margin-top:calc(48px * var(--f));gap:calc(16px * var(--f)) calc(32px * var(--f))} .grows .hero .cta .btn{min-height:calc(56px * var(--f));font-size:calc(16px * var(--f));padding:0 calc(28px * var(--f))} } /* the block's middle on the owl's middle (his figure, not the picture's box), where the screen is at least half as tall as the layout is wide (half the width up to 2560, 1280 from there, where the layout stops growing); on shorter screens there is not the room above for the header */ @media (min-width:1921px) and (max-aspect-ratio:2/1),(min-width:2560px) and (min-height:1280px){ .grows .hero-copy{padding-top:calc(96px - 58px * var(--t));padding-bottom:calc(48px + 58px * var(--t))} } /* the free website check (18 Oct 2026): the address on an ink underline, the findings as a plain list on paper */ .chk-form{margin-top:clamp(28px,3.4vw,48px);display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 26px;max-width:1000px} .chk-form .field{flex:1 1 300px;margin:0} .chk-form input{width:100%;min-height:50px;padding:10px 0;border:0;border-radius:0;background:var(--aurora) no-repeat 0 100% / 0 2px,var(--brush-ink) no-repeat 0 100% / 100% 6px;font:400 1.08rem/1.4 var(--sans);color:var(--ink);transition:background-size .6s var(--out)} .chk-form input::placeholder{color:#8a8378} .chk-form input:focus{outline:none;background-size:100% 2px,100% 6px} .chk-form .btn{border:0;cursor:pointer} .chk-form .btn[disabled]{opacity:.6;cursor:progress} .chk-keep{flex-basis:100%} .chk-out{margin-top:clamp(32px,3.6vw,52px);max-width:1000px;padding:clamp(22px,3.4vw,48px);background:var(--paper-2);border-radius:16px;box-shadow:inset 0 0 0 1px var(--rule),0 40px 80px -60px rgba(28,26,23,.45)} .chk-sum{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + .9vw,1.9rem);line-height:1.25} .chk-sum:focus{outline:none} .chk-wait,.chk-err{font-size:1.05rem;color:var(--ink-2)} .chk-err{color:#a1231b} .chk-list{list-style:none;margin:0;padding:0} .chk-item{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule)} .chk-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px} .chk-tag{display:inline-flex;align-items:center;gap:.5em;font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)} .chk-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-3)} .is-fix .chk-tag::before{background:var(--a5)} .is-good .chk-tag::before{background:var(--a2)} .chk-title{font-weight:600;font-size:1.08rem} .chk-found{margin-top:6px} .chk-why{margin-top:6px;color:var(--ink-2)} .chk-we{margin-top:6px;color:var(--ink-2)} .chk-we b{color:var(--ink);font-weight:600} .chk-all{margin-top:30px} .chk-all summary{display:inline-flex;align-items:center;min-height:44px;font-weight:550;cursor:pointer} .chk-group{margin-top:26px;font-family:var(--sans);font-size:.78rem;font-weight:550;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .chk-group + .chk-list .chk-item:first-child{margin-top:12px} .chk-not{margin-top:28px;font-size:.95rem;color:var(--ink-3)} .chk-cta{margin-top:24px} @media (prefers-reduced-motion:no-preference){ .chk-out > *{animation:chk-in .7s var(--out) both} } @keyframes chk-in{from{opacity:0;transform:translateY(10px)}} /* phones: the floating buttons step aside while the check's results are on screen (check.js) */ @media (max-width:760px){.chk-reading .sticky-quote,.chk-reading .wa-fab,.chk-reading .to-top,.chk-reading .totop{opacity:0!important;visibility:hidden!important;pointer-events:none!important}} /* ===== Aurora Owl cards, round five, squircle corners (23 Oct 2026) ===== */ /* Big cards below the hero (Ink, day mode), round two. Loaded after site.css and never touches the hero. The card edge is the site's own sumi frame (.frame-ink, the hand-drawn rectangle already round the lead band and the packages), so a card reads as one more of those, filled with the lighter paper. Round one's frames stay (Vish: "this is looking much better"); round two brings back the four steps' line, adds the highlights and the card hover, and fixes contact. */ .ao-card{--pad:clamp(28px,4vw,56px);position:relative;isolation:isolate;margin-top:clamp(40px,5vw,64px);padding:var(--pad);background:var(--paper-2);border-radius:2px} .ao-card>.frame-ink path{opacity:.62} .ao-card>:not(.frame-ink){position:relative;z-index:2} /* the frame's lines sit about 0.6% inside its box, which left a sliver of fill showing outside the line; pushing the frame out by that much puts the ink on the card's edge, and it draws over anything inside that reaches the edge */ .ao-card>.frame-ink,.ao-lead>.frame-ink,.ao-brief>.frame-ink{top:-.7%;left:-.6%;right:auto;bottom:auto;width:101.2%;height:101.3%;z-index:3} /* the card itself does not fade; its frame draws on like the lead band's, and everything inside keeps its own rise */ .js-motion .ao-card[data-rise]{opacity:1;transform:none} .js-motion .ao-card>.frame-ink{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)} .js-motion .ao-card.in>.frame-ink{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--inout) .1s} /* the problem: heading and intro on the paper, the three points in one card */ .ao-a .problems{margin-top:0} /* services: the lead band already has the frame; it takes the card fill, and "What comes next" becomes a second card */ .ao-lead{background:var(--paper-2)} .ao-next .next-h{margin-top:0} /* how you get found: the three rows and the guide link in one card */ .ao-found .found{margin-top:0} .ao-found .read-guide{margin-bottom:0} /* how we work: steps in one card, the promise in another */ .ao-route .route{margin-top:0} /* the step nodes are paper discs that hide the line behind them; on the card they take the card's lighter paper, or they show as darker rings */ .ao-route .node{background:var(--paper-2)} .ao-promise{margin-top:clamp(20px,2.4vw,32px)} .ao-promise .promise2{margin-top:0} /* packages: already one ink frame per package, left exactly as they are */ /* get a quote: the form card swaps its soft outline and rounded corners for the same ink frame */ .quote .brief.ao-brief{border-radius:2px;box-shadow:0 40px 80px -60px #1c1a1773} .quote .brief.ao-brief>.frame-ink path{opacity:.62} /* contact: one card, everything starting from its top left */ .ao-contact.contact-grid{margin-top:0;align-items:start} .ao-contact .addr{margin-bottom:0} @media(max-width:640px){ .ao-card{--pad:22px} } /* the contact card needs room under it before the footer, and the form's aurora line stays on top of the new frame */ .contact:has(.ao-contact){padding-bottom:clamp(40px,5vw,72px)} .quote .brief.ao-brief:before{z-index:4} /* ================= round two ================= */ /* ---- one hover for every big card: the frame darkens and thickens (the lead band's own live hover) and the card lifts a little off the paper. The packages keep their own live lift. The form does not move, so nobody types into a box that shifts; its frame still darkens. ---- */ .ao-card,.ao-lead{transition:transform .5s var(--out),box-shadow .5s var(--out)} .ao-card>.frame-ink path,.ao-lead>.frame-ink path,.ao-brief>.frame-ink path{transition:stroke-width .3s,opacity .3s} .ao-card:hover,.ao-card:focus-within,.ao-lead:hover,.ao-lead:focus-within{transform:translateY(-3px);box-shadow:0 30px 60px -48px #1c1a1780} .ao-card:is(:hover,:focus-within)>.frame-ink path,.ao-lead:is(:hover,:focus-within)>.frame-ink path,.ao-brief:is(:hover,:focus-within)>.frame-ink path{opacity:.95;stroke-width:3.2} /* ---- the four steps (round three) ---- Vish on round two: "the line shouldn't just move half ... it should be filling the entire line till Build and Grow ... It should come and stay filled when I reach the fourth. Right now, it's like a piece of line is moving around on that line." So the thick line is now a fill that always starts at step 1 and only grows or shrinks at its far end: Audit fills 1 to 2, Position 1 to 3, Build 1 to 4, Grow 1 to the end of the line past 4. It stays when the pointer leaves; a lower step pulls it back to that step; once Grow is reached it stays full. cards.js sets the length; the colour is the site's aurora (blue, violet, magenta), fixed to the line, so the colours do not slide as it grows. Round two's travelling stretch and the live Grow run-out (a second line growing out past the end) are both replaced by this one fill. */ .route{--n1:.02;--n2:.28;--n3:.53;--n4:.79} :root .route .route-line path.rl-hi{stroke:url(#aur-fill);stroke-width:5;opacity:0; stroke-dasharray:0 2;stroke-dashoffset:calc(var(--n1) * -1);transition:stroke-dasharray .6s var(--out),opacity .25s} :root .route.has-fill .route-line path.rl-hi{opacity:1} :root .route .route-line .rl-grow{display:none} /* phones: the same fill runs down the vertical line, following the step the page lights as you scroll */ .route-down .rl-fill{fill:none;stroke:url(#aur-fill-v);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0; stroke-dasharray:0 2;stroke-dashoffset:0;transition:stroke-dasharray .6s var(--out),opacity .25s} .route.has-fill .route-down .rl-fill{opacity:1} /* the hovered step itself: its node grows a little and its ink ring darkens, the aurora disc fills, an aurora brush mark draws under its title, and the other three step back */ .steps2 li{transition:opacity .4s} .steps2:has(li:is(:hover,.is-focus,.is-live)) li:not(:hover):not(.is-focus):not(.is-live):not(.is-done){opacity:.5} /* round three: every step before the lit one is "done", at full strength with its aurora disc filled, instead of fading back */ .steps2 li.is-done .node .dot{opacity:1;transform:none} .steps2 .node{transition:transform .5s var(--out)} .steps2 li:is(:hover,.is-focus,.is-live) .node{transform:scale(1.14)} .steps2 li:is(:hover,.is-focus,.is-live) .node svg path{stroke-width:2.8} .steps2 li:is(:hover,.is-focus,.is-live) .node .dot{opacity:1;transform:none} .steps2 h3{position:relative} .steps2 h3:after{content:"";position:absolute;left:0;bottom:-7px;width:58px;height:6px;background:var(--aurora); -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat; transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--out)} .steps2 li:is(:hover,.is-focus,.is-live) h3:after{transform:scaleX(1)} .steps2 li:focus-visible{outline:2px solid var(--a3);outline-offset:8px;border-radius:4px} @media(max-width:760px){ /* the node sits beside the title on phones; scale it from its own centre */ .steps2 li:is(:hover,.is-focus,.is-live) .node{transform:scale(1.1)} } /* contact: Ao sits in the card's top right, level with the eyebrow, sized to the words beside it; on phones it closes the card, centred */ .ao-contact .contact-art{margin-top:0;max-width:300px;justify-self:end;align-self:start} @media(max-width:900px){ .ao-contact .contact-art{justify-self:center;max-width:240px;margin:28px auto 0} } @media(prefers-reduced-motion:reduce){ :root .route .route-line path.rl-hi,.route-down .rl-fill{transition:none} .ao-card:hover,.ao-card:focus-within,.ao-lead:hover,.ao-lead:focus-within, .steps2 li:is(:hover,.is-focus,.is-live) .node{transform:none} } /* ================= round three ================= */ /* ---- every frame on the page, lighter by the same amount ---- Vish: "The thickness of the border is too dark." The frames were ink at .62 opacity, 2.2 px (the six big cards and the form), .8 (the lead band) and .7 (the packages). Each one now loses .22 of opacity and .6 px of width, so they stay in the same order among themselves and the new dividers below sit under them as one quiet family. Hovers move down by the same amount. */ .ao-card>.frame-ink path,.quote .brief.ao-brief>.frame-ink path{opacity:.4;stroke-width:1.6} .ao-lead>.frame-ink path{opacity:.58;stroke-width:1.6} .pack .frame-ink path{opacity:.48;stroke-width:1.6} .ao-card:is(:hover,:focus-within)>.frame-ink path,.ao-lead:is(:hover,:focus-within)>.frame-ink path,.quote .brief.ao-brief:is(:hover,:focus-within)>.frame-ink path{opacity:.73;stroke-width:2.6} .pack:hover .frame-ink path,.pack:focus-within .frame-ink path,.pack.is-live .frame-ink path{opacity:.63} /* ---- how you get found: a divider between each of the three rows ---- A thin hand-drawn ink line, 1 px at .3 opacity (fainter than the frame's .4 and 1.6 px), with the same rough edge as the frames. It sits in the middle of the gap between two rows and draws itself left to right, once, as the row under it scrolls in. */ .ao-found .found{--fgap:clamp(32px,4vw,48px);gap:var(--fgap)} .ao-found .found li+li:after{content:"";position:absolute;left:0;right:0;top:calc(var(--fgap) / -2 - 3px);height:6px;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 6' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-1%25' y='-100%25' width='102%25' height='300%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.6' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' d='M1 3.3C160 2.6 330 3.7 500 3.1S820 2.5 999 3.2' fill='none' stroke='%231c1a17' stroke-opacity='.3' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat} .js-motion .ao-found .found li+li:after{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)} .js-motion .ao-found .found li+li.in:after{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--inout) .1s} /* ================= round four ================= */ /* Built on the live page as deployed on 19 Oct (the earlier rounds framed a 6 Oct copy). The hero is not touched here. */ /* the free check (new on the live site, 18 Oct) is framed like the quote form; the result panel under it keeps its own live look */ .ao-chk .chk-form{margin-top:0} /* how you get found now has two guide links; the first sits close to the rows */ .ao-found .read-guide+.read-guide{margin-top:var(--s2)} /* ---- one gap from each section's intro to its first card ---- Vish, 22 Oct: "What is this unnecessary padding between the intro and where the card starts?" The live gaps ran from 48 to 72 px at 1440 and 16 to 48 px at 390. Every first card now sits the same distance under its intro: 48 px at 1440, 28 px on phones. */ :root{--intro-gap:clamp(28px,3.4vw,48px)} .sec .wrap .ao-first{margin-top:var(--intro-gap)} @media(min-width:901px){.quote .wrap .brief.ao-first{margin-top:0}} @media(max-width:900px){.quote .q-intro{margin-bottom:0}} /* ================= round five ================= */ /* Squircle corners on every card (Vish, 23 Oct 2026: "squircle-like edges on the cards instead of clear rectangular edges"). Nothing else moves, and the hero is not touched. One corner size for the whole page, --sq. A squircle is a superellipse (x^4 + y^4 = 1): the curve begins further along each edge than a circle of the same radius and eases in, so 32 px reads as a soft corner without turning the cards into rounded app tiles. The ink frames are drawn paths, so cards.js redraws each one in the card's own pixels with squircle corners (a CSS radius cannot bend a drawn line), and fills a copy of the same path with the card's paper. The border-radius below is what cards.js reads, and it also shapes everything CSS draws: the hover shadow, the packages' clip, and the fallback. corner-shape is understood by Chrome and Edge only; Safari and Firefox round the same radius instead, which only shows on the parts CSS draws (the drawn frames and fills are true squircles everywhere). */ :root{--sq:32px} .ao-card,.ao-lead,.quote .brief.ao-brief,.packs>.pack{border-radius:var(--sq);corner-shape:squircle} /* the frame now sits 4 px past the card on every side, so the half of the line that lies outside the card's edge is not cut off by the draw-on clip */ .ao-card>.frame-ink,.ao-lead>.frame-ink,.ao-brief>.frame-ink,.pack>.frame-ink{top:-4px;left:-4px;right:auto;bottom:auto;width:calc(100% + 8px);height:calc(100% + 8px)} /* the card's paper is the filled path once it is drawn; until then (and with JavaScript off) the card keeps a plain paper fill and a squircle ink line */ .ao-card.sq,.ao-lead.sq,.quote .brief.ao-brief.sq{background:none} .frame-fill{position:absolute;top:-4px;left:-4px;width:calc(100% + 8px);height:calc(100% + 8px);overflow:visible;pointer-events:none} .frame-fill path{fill:var(--paper-2);filter:url(#rough)} .ao-card>svg.frame-fill,.ao-lead>svg.frame-fill{position:absolute;z-index:0} .quote .brief.ao-brief{isolation:isolate} .quote .brief.ao-brief>svg.frame-fill{position:absolute;z-index:-1} :is(.ao-card,.ao-lead,.ao-brief,.pack):not(.sq)>.frame-ink{visibility:hidden} :is(.ao-card,.ao-lead,.quote .brief.ao-brief,.packs>.pack):not(.sq){outline:1.6px solid rgba(28,26,23,.4);outline-offset:-.8px} /* the packages clip their hover wash (overflow: clip on the live page); once the frame is drawn, cards.js clips each package to its own frame instead, 2 px outside the line, so the clip has the squircle corner in every browser */ .packs>.pack.sq{overflow:visible} /* the signature package has no ink frame: its own dark fill takes the corner */ .packs>.pack.sig{outline:0} /* boxes inside the cards take the same corner: the three drawings in How you get found, the free check's result panel, and the ring round a step focused from the keyboard */ .ao-found .draw,.chk-out{border-radius:var(--sq);corner-shape:squircle} .steps2 li:focus-visible{border-radius:var(--sq);corner-shape:squircle} /* 23 Oct (jury): phones, text links get a 24 px tall tap area. The padding is top and bottom on inline links, which does not move a line of text; the footer's flex links take 1 px each way and give it back as margin */ @media (max-width:900px){ main :is(p,li,dd,td) a:not([class]),.crumb a,.cite a,.foot .base p a{padding-block:4px} .f-links > a{padding-block:1px;margin-block:-1px} } /* 23 Oct (jury): under 768 px the back-to-top circle is not shown; it sat over the text at the left edge (the footer's copyright line among it). The bar that returns when you scroll up still takes you to the top */ @media (max-width:767px){.to-top{display:none}}