/* Inherited smoothing preserves the chosen type weights and layout. */ html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} @font-face{font-family:Arturm;src:url('/immutable/16f9d006aa193b5d/assets/fonts/GCarturm-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:Arturm;src:url('/immutable/77e007ff31c8536b/assets/fonts/GCarturm-Medium.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:Arturm;src:url('/immutable/ddd408b2d1513d0c/assets/fonts/GCarturm-Bold.woff2') format('woff2');font-weight:700;font-display:swap} :root{--black:#201E1C;--brown:#785a3c;--dark-brown:#393025;--grey:#B3A69E;--beige:#E9C79E;--orange:#FF933C;--bg:var(--black);--fg:#f4f1ed;--muted:var(--grey);--line:#ffffff1d;--gutter:8.333333vw} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--bg);color:var(--fg);font-family:'Helixa',Arial,sans-serif}h1,h2,h3{font-family:Arturm,sans-serif}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid var(--orange);outline-offset:6px} .site-header{position:absolute;inset:0 0 auto;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:2.5rem 3.333333vw;gap:2rem}.wordmark,.wordmark img{display:block;width:120px;height:25px}.site-nav{display:flex;gap:clamp(1.5rem,2.5vw,2.5rem);font:500 1.125rem/1.5rem Arturm,sans-serif;letter-spacing:.04em}.site-nav a{text-decoration:none;transition:color .2s}.site-nav a:hover{color:var(--orange)} .hero{position:relative;isolation:isolate;min-height:680px;height:100svh;overflow:hidden;background:linear-gradient(180deg,#241810,#201E1C)} .hero-copy{position:absolute;inset:0;z-index:2;pointer-events:none}.hero-copy a{pointer-events:auto}.hero h1{margin:0;font:700 min(10vw,20svh)/1.111111 Arturm,sans-serif;letter-spacing:0}.hero h1 span{position:absolute;left:var(--gutter);top:18%;white-space:nowrap;color:transparent;background:linear-gradient(#fff 53%,var(--beige) 85%);background-clip:text;-webkit-background-clip:text}.hero h1 span:last-child{left:auto;top:auto;right:var(--gutter);bottom:10%} .hero-details{position:absolute;left:var(--gutter);bottom:12%;width:340px;max-width:25vw;display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}.hero-eyebrow{margin:0;color:var(--muted);font-size:0.875rem;font-weight:600;line-height:1.125rem;letter-spacing:.08em}.hero-intro{margin:0;font-size:clamp(1.125rem,1.667vw,1.5rem);line-height:1.333333;font-weight:400}.button{display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;padding:1.25rem 1.75rem;border-radius:12px;background:var(--orange);color:#201E1C;text-decoration:none;text-transform:uppercase;font-size:0.875rem;line-height:1.5rem;letter-spacing:.02em;font-weight:700;transition:background .2s,transform .2s}.hero-details .button{margin-top:1rem}.button img{width:18px;height:18px}.button:hover{background:#FF933C;transform:translateY(-2px)} .hero-model{position:absolute;isolation:isolate;z-index:1;left:50%;top:22%;width:min(35vw,64svh);aspect-ratio:480/522;transform:translateX(-50%);cursor:default;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.hero-model.dragging{cursor:default}.hero-model:focus,.hero-model:focus-visible{outline:none}.hero-model canvas,.hero-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}.hero-fallback{object-fit:contain;padding:15%;opacity:.6;transition:opacity .3s}.hero-model.ready .hero-fallback{opacity:0;pointer-events:none}.hero-model.failed canvas{visibility:hidden} .section-rule{margin:0 var(--gutter);padding:6.25rem 0;border-top:1px solid var(--line)}.eyebrow{font-size:0.75rem;line-height:1.125rem;letter-spacing:.12em;color:var(--muted);font-weight:600;margin:0 0 2rem}.about-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:8vw}.about h2,.work h2,.contact h2{font-size:clamp(2.5rem,4.2vw,4rem);font-weight:400;line-height:1.13;letter-spacing:-.025em;margin:0}.about-notes{font-size:1.125rem;line-height:1.55}.about-notes p{margin:0 0 1.5rem}.work-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:8vw;align-items:end;margin:1.875rem 0 4rem}.work-heading p{font-size:1.25rem;line-height:1.5;max-width:420px;margin:0}.project-card{height:430px;border-radius:24px;background:linear-gradient(135deg,#392118,#201E1C 70%);border:1px solid #f19a4b44;padding:2.5rem;display:flex;flex-direction:column;justify-content:space-between}.project-card span{color:var(--muted);font-size:0.75rem;letter-spacing:.2em}.project-card h3{font-size:2.5rem;font-weight:400;line-height:1.1;margin:0}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}.service-grid h3{font-size:1.875rem;font-weight:500;margin:0 0 1rem}.service-grid p{font-size:1.125rem;line-height:1.6;color:var(--muted);margin:0}.contact{padding-bottom:7.5rem}.contact p:not(.eyebrow){font-size:1.25rem;line-height:1.5;max-width:550px;margin:1.75rem 0}.contact>a{font-size:clamp(1.375rem,2.4vw,2.25rem);text-underline-offset:8px;text-decoration-thickness:1px} @media(min-width:761px) and (max-width:1100px){:root{--gutter:6vw}.hero-details{max-width:28vw;gap:1.25rem}.hero-intro{font-size:1.125rem}.hero-details .button{padding:1rem 1.25rem}.hero-model{width:min(42vw,62svh)}.hero-eyebrow{font-size:0.75rem}} @media(max-width:760px){:root{--gutter:1.5rem}.site-header{padding:1.5rem;gap:1.5rem;flex-wrap:wrap}.site-nav{gap:1.125rem;font-size:0.9375rem}.hero{height:auto;min-height:100svh;padding:8.75rem 1.5rem 4rem;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(6,auto);row-gap:1.5rem}.hero-copy,.hero h1,.hero-details{display:contents}.hero h1 span,.hero h1 span:last-child{position:static;font:700 clamp(3.5rem,16vw,7rem)/1.12 Arturm,sans-serif;z-index:2}.hero h1 span:first-child{grid-row:1}.hero h1 span:last-child{grid-row:3;justify-self:end}.hero-model{position:relative;grid-row:2;grid-column:1;inset:auto;transform:none;width:100%;max-width:480px;justify-self:center}.hero-eyebrow{grid-row:4;margin-top:1rem;font-size:0.75rem}.hero-intro{grid-row:5;font-size:1.25rem;line-height:1.5;max-width:340px}.hero-details .button{grid-row:6;justify-self:start;margin-top:0.5rem}.section-rule{padding:4rem 0}.about-grid,.work-heading,.service-grid{grid-template-columns:1fr;gap:2rem}.work-heading{margin-bottom:2.5rem}.project-card{height:340px;padding:1.75rem}.project-card h3{font-size:2rem}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.button:hover{transform:none}} /* Approved material render, used directly for visual fidelity. */ .hero-model{cursor:default;aspect-ratio:1} .hero-approved-image{display:block;width:100%;height:auto;transform-origin:center;user-select:none;-webkit-user-select:none} .hero-model{cursor:default;touch-action:none}.hero-model.dragging{cursor:default} /* Restored full-depth WebGL scene. */ .hero-model{aspect-ratio:480/522;touch-action:pan-y} /* Rotation changes the gradient direction itself; rest remains vertical. */ .hero h1 span:first-child{background-image:linear-gradient(var(--design-angle,180deg),#fff var(--design-stop,53%),var(--beige) 90%)} .hero h1 span:last-child{background-image:linear-gradient(var(--beyond-angle,180deg),#fff var(--beyond-stop,53%),var(--beige) 90%)} @media(prefers-reduced-motion:reduce){.hero h1 span:first-child,.hero h1 span:last-child{background-image:linear-gradient(#fff 53%,var(--beige) 85%)}} /* Layer the heading around the mark, with a restrained warm backlight. */ @media(min-width:761px){ .hero-copy{z-index:auto} .hero h1 span:first-child{z-index:0;top:calc(26% - 4svh)} .hero h1 span:last-child,.hero-details{z-index:2} .hero-model{left:48%;top:calc(22% - 4svh)} .hero h1 span:last-child{bottom:calc(10% + 4svh)} .hero-details{bottom:calc(12% + 4svh)} } /* Subtle studio backdrop and diffused pool beneath the floating mark. */ /* Figma's continuous top-page charcoal gradient; WebGL lighting is unchanged. */ body{background-image:linear-gradient(180deg,#252220,#201E1C);background-size:100% 2000px;background-repeat:no-repeat} .hero{background:transparent} html{scroll-padding-top:6.25rem}.skip-link{position:fixed;top:12px;left:12px;z-index:120;transform:translateY(-180%);padding:0.75rem 1.25rem;background:#fff;color:#201E1C}.skip-link:focus{transform:none}.site-header{position:fixed;z-index:50;transition:none}button:focus-visible,.quote-track:focus-visible{outline:2px solid #FF933C;outline-offset:5px} .page-section{margin:0 var(--gutter);padding:clamp(5.5rem,11vw,10rem) 0}.page-section .eyebrow{color:#FF933C;font-size:0.875rem}.page-section h2{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.05;font-weight:500;letter-spacing:-.025em;margin:0;background:linear-gradient(135deg,var(--beige),#fff 38%);background-clip:text;color:transparent}.studio-section h2{font-size:clamp(2.25rem,4.2vw,3.75rem);line-height:1.15;font-weight:400;max-width:1200px;text-indent:12%}.studio-bottom{display:flex;justify-content:space-between;align-items:center;gap:2.5rem;margin-top:2.75rem}.studio-bottom p{max-width:476px;font-size:1.125rem;line-height:1.55;margin:0}.line-link{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;flex-shrink:0;padding:0.75rem 0 1rem;border-bottom:1px solid #ffffff70;text-transform:uppercase;font-size:0.75rem;font-weight:600;letter-spacing:.04em;text-decoration:none}.line-link img{width:16px;height:16px;transition:transform .25s}.line-link:hover img{transform:translate(3px,-3px)} .philosophy{margin:2.5rem 1rem;border-radius:24px;background:#FF933C;color:#201E1C;padding:clamp(4rem,10vw,9rem) calc(var(--gutter) - 1rem)}.philosophy .eyebrow{color:#fff}.philosophy h2{font-weight:400;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.12;max-width:950px;margin:2.5rem 0}.philosophy-note{font-family:Arturm,sans-serif;font-size:clamp(1.125rem,1.7vw,1.5rem);margin:0}.section-heading{display:flex;justify-content:space-between;gap:3rem;align-items:center}.section-heading>p{font-size:1.25rem;line-height:1.4;max-width:420px}.quote-controls{--light-x:50%;--light-y:50%;position:relative;isolation:isolate;display:flex;width:120px;height:60px;margin:1.875rem auto 1.25rem;overflow:hidden;border-radius:100px;background:linear-gradient(90deg,#fff 0%,var(--beige) 100%);box-shadow:inset 0 1px 0 #fff,0 12px 34px #0003}.quote-control-light{position:absolute;z-index:0;inset:-45%;pointer-events:none;background:radial-gradient(circle at var(--light-x) var(--light-y),rgba(255,255,255,.98) 0,rgba(255,255,255,.62) 16%,rgba(255,244,226,.18) 38%,transparent 62%);transform:translateZ(0)}.quote-controls button{position:relative;z-index:1;display:grid;place-items:center;width:60px;height:60px;padding:0;border:0;background:transparent;color:#201E1C;font:400 2.375rem/1 Arial,sans-serif;cursor:pointer;transition:opacity .25s ease,transform .25s cubic-bezier(.22,1,.36,1)}.quote-controls button span{display:block;transform:translateY(-2px)}.quote-controls button:hover:not(:disabled){transform:scale(1.08)}.quote-controls button:focus-visible{outline:2px solid #201E1C;outline-offset:-5px;border-radius:50%}.quote-controls button:disabled{opacity:.36;cursor:default}.quote-track{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:0 0 1.25rem}.quote-card{margin:0;flex:0 0 80%;background:#fff;color:#201E1C;border-radius:24px;padding:clamp(1.75rem,5.6vw,5rem);display:flex;flex-direction:column;justify-content:space-between;gap:4rem;min-height:480px;scroll-snap-align:start}.quote-card:not(:first-child){background:var(--beige)}.quote-card blockquote{font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1.22;margin:0}.quote-card figcaption{display:flex;align-items:center;gap:1rem}.quote-card img{width:60px;height:60px;object-fit:contain}.quote-card span,.founder-photo span{display:block;font-size:1.375rem}.quote-card small,.founder-photo small{display:block;font-size:0.875rem;margin-top:0.375rem}.founder{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}.founder-photo{margin:0;position:relative}.founder-photo>img{display:block;width:100%;height:auto;max-height:780px;object-fit:contain}.founder-photo figcaption{position:absolute;bottom:8%;right:-8%;padding:1rem;background:rgba(22,21,20,.8)}.founder-photo small{color:#a69690}.founder-copy>p:not(.eyebrow){font-size:1.125rem;line-height:1.56;margin:1.75rem 0}.founder-copy .line-link{max-width:230px;margin-top:2.5rem}.contact-panel{margin:1rem;border-radius:24px;background:linear-gradient(#FF933C,#e55e0f);color:#201E1C;padding:clamp(3.5rem,8vw,7rem) calc(var(--gutter) - 1rem) 2rem}.contact-top{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}.contact-mark{width:120px;height:120px}.contact-top h2{font-size:clamp(2.5rem,4.5vw,4rem);line-height:1.06;margin:0;font-weight:500}.contact-top p{font-size:1.125rem;line-height:1.4;max-width:450px;margin:1.5rem 0}.contact-panel .button{background:#fff}.footer-wordmark{display:block;width:100%;height:auto;margin:4rem 0 2rem}.footer-bottom{display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;border-top:1px solid #16151466;padding-top:1.75rem;font-size:0.875rem}.footer-bottom a{text-decoration:none} .loader{position:fixed;inset:0;z-index:90;background:linear-gradient(#241810,#201E1C);display:grid;place-content:center;justify-items:center;pointer-events:none}.loader-mark{width:100px;height:100px;background:var(--beige);mask:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTguNjEyNyAxMDEuMzc5QzkuNzI0NzkgOTIuNDkxMSA2LjY1MjEgNzguNzQyNSA2LjY1MjEgNjAuMDA2MkM2LjY1MjEgNDEuMjY5OSA5LjcyNDc5IDI3LjUyMTMgMTguNjEyNyAxOC42MzM0QzI3LjUwMDYgOS43NDU1NSA0MS4yNDkxIDYuNjcyODUgNTkuOTg1NCA2LjY3Mjg1Qzc4LjcyMTcgNi42NzI4NSA5Mi40NzAzIDkuNzQ1NTUgMTAxLjM1OCAxOC42MzM0QzExMC4yNDYgMjcuNTIxMyAxMTMuMzE5IDQxLjI2OTkgMTEzLjMxOSA2MC4wMDYyQzExMy4zMTkgNzguNzQyNSAxMTAuMjQ2IDkyLjQ5MTEgMTAxLjM1OCAxMDEuMzc5QzkyLjQ3MDMgMTEwLjI2NyA3OC43MjE3IDExMy4zNCA1OS45ODU0IDExMy4zNEM0MS4yNDkxIDExMy4zNCAyNy41MDA2IDExMC4yNjcgMTguNjEyNyAxMDEuMzc5Wk0xOS4yNDUgNzYuMDU1NUMxOC4wMjU2IDc2LjA1NTUgMTYuODI2OSA3Ni4xNDM5IDE1LjY1NDkgNzYuMzE0NkMxNC45MTYgNzEuNjU5NiAxNC41NTMzIDY2LjI2MjkgMTQuNTUzMyA2MC4wMDYyQzE0LjU1MzMgNTIuNDA1NSAxNS4wODg1IDQ2LjA3MzkgMTYuMTgzMiA0MC43OTk1QzIzLjEwNzUgNDUuNTIyMyAzMS42NDM0IDQ2Ljg3MDcgMzkuNDg4IDQ0Ljg0NDlDMzcuMDM1NiA1NC4zNDA5IDM5LjUyNzkgNjQuODUwMSA0Ni45NjQ4IDcyLjI4N0M1NC40MDE3IDc5LjcyMzkgNjQuOTEwNyA4Mi4yMTYyIDc0LjQwNjcgNzkuNzYzOUM3Mi4zMDQ0IDg3LjkwNTIgNzMuODM2NSA5Ni43OTEyIDc5LjAwMzEgMTAzLjg0N0M3My43NjY1IDEwNC45MTYgNjcuNDk1NSAxMDUuNDM4IDU5Ljk4NTQgMTA1LjQzOEM1My43Mjg4IDEwNS40MzggNDguMzMyMiAxMDUuMDc2IDQzLjY3NzMgMTA0LjMzN0M0My44NDggMTAzLjE2NSA0My45MzYzIDEwMS45NjYgNDMuOTM2MyAxMDAuNzQ3QzQzLjkzNjMgODcuMTEwMiAzMi44ODE2IDc2LjA1NTUgMTkuMjQ1IDc2LjA1NTVaTTg2LjM5NjkgMTAxLjcyQzkwLjI0NCAxMDAuMjE2IDkzLjMxNjggOTguMjQ2MiA5NS43NzEyIDk1Ljc5MTlDMTAyLjMxNiA4OS4yNDcgMTA1LjQxOCA3OC4zMDQyIDEwNS40MTggNjAuMDA2MkMxMDUuNDE4IDU4LjA3MTIgMTA1LjM4MyA1Ni4yMTg1IDEwNS4zMTMgNTQuNDQ0NUw4Ny40NzA3IDcyLjI4N0w4Ny40MTE3IDcyLjM0NTdDNzkuNDQ5NyA4MC4zNzA4IDc5LjM5MSA5My4yODI2IDg3LjIzNTggMTAxLjM4Qzg2Ljk2MDMgMTAxLjQ5NiA4Ni42ODA3IDEwMS42MDkgODYuMzk2OSAxMDEuNzJaTTEwNC40OTggNDQuOTE2NEMxMDMuMTQzIDM1LjI5ODQgMTAwLjI3MSAyOC43MjAxIDk1Ljc3MTIgMjQuMjIwNUM5MS4xODMyIDE5LjYzMjUgODQuNDM0MSAxNi43MzY2IDc0LjUwNDkgMTUuNDE1TDUyLjU1MTggMzcuMzY4MkM0NC40NTIxIDQ1LjQ2NzkgNDQuNDUyIDU4LjYwMDIgNTIuNTUxOCA2Ni43QzYwLjYzMTggNzQuNzc5OSA3My43MTk3IDc0Ljc5OTcgODEuODI0MiA2Ni43NTkyTDgxLjg4MzcgNjYuNjk5NUwxMDQuMzkyIDQ0LjE5MDhDMTA0LjQyOSA0NC40MzA3IDEwNC40NjQgNDQuNjcyNiAxMDQuNDk4IDQ0LjkxNjRaTTY0LjExNTUgMTQuNjMwM0M2Mi43ODIyIDE0LjU5MjggNjEuNDA2IDE0LjU3NDEgNTkuOTg1NCAxNC41NzQxQzQxLjY4NzQgMTQuNTc0MSAzMC43NDQ2IDE3LjY3NTYgMjQuMTk5NyAyNC4yMjA1QzIxLjkzNTQgMjYuNDg0NyAyMC4wODMzIDI5LjI3NTMgMTguNjI5MiAzMi43MTQ4QzI2Ljc3NiAzOS44Njc4IDM5LjE4OTIgMzkuNTU2NSA0Ni45NjQ4IDMxLjc4MUw2NC4xMTU1IDE0LjYzMDNaIiBmaWxsPSIjMTYxNTE0Ii8+Cjwvc3ZnPgo=') center/contain no-repeat;-webkit-mask:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTguNjEyNyAxMDEuMzc5QzkuNzI0NzkgOTIuNDkxMSA2LjY1MjEgNzguNzQyNSA2LjY1MjEgNjAuMDA2MkM2LjY1MjEgNDEuMjY5OSA5LjcyNDc5IDI3LjUyMTMgMTguNjEyNyAxOC42MzM0QzI3LjUwMDYgOS43NDU1NSA0MS4yNDkxIDYuNjcyODUgNTkuOTg1NCA2LjY3Mjg1Qzc4LjcyMTcgNi42NzI4NSA5Mi40NzAzIDkuNzQ1NTUgMTAxLjM1OCAxOC42MzM0QzExMC4yNDYgMjcuNTIxMyAxMTMuMzE5IDQxLjI2OTkgMTEzLjMxOSA2MC4wMDYyQzExMy4zMTkgNzguNzQyNSAxMTAuMjQ2IDkyLjQ5MTEgMTAxLjM1OCAxMDEuMzc5QzkyLjQ3MDMgMTEwLjI2NyA3OC43MjE3IDExMy4zNCA1OS45ODU0IDExMy4zNEM0MS4yNDkxIDExMy4zNCAyNy41MDA2IDExMC4yNjcgMTguNjEyNyAxMDEuMzc5Wk0xOS4yNDUgNzYuMDU1NUMxOC4wMjU2IDc2LjA1NTUgMTYuODI2OSA3Ni4xNDM5IDE1LjY1NDkgNzYuMzE0NkMxNC45MTYgNzEuNjU5NiAxNC41NTMzIDY2LjI2MjkgMTQuNTUzMyA2MC4wMDYyQzE0LjU1MzMgNTIuNDA1NSAxNS4wODg1IDQ2LjA3MzkgMTYuMTgzMiA0MC43OTk1QzIzLjEwNzUgNDUuNTIyMyAzMS42NDM0IDQ2Ljg3MDcgMzkuNDg4IDQ0Ljg0NDlDMzcuMDM1NiA1NC4zNDA5IDM5LjUyNzkgNjQuODUwMSA0Ni45NjQ4IDcyLjI4N0M1NC40MDE3IDc5LjcyMzkgNjQuOTEwNyA4Mi4yMTYyIDc0LjQwNjcgNzkuNzYzOUM3Mi4zMDQ0IDg3LjkwNTIgNzMuODM2NSA5Ni43OTEyIDc5LjAwMzEgMTAzLjg0N0M3My43NjY1IDEwNC45MTYgNjcuNDk1NSAxMDUuNDM4IDU5Ljk4NTQgMTA1LjQzOEM1My43Mjg4IDEwNS40MzggNDguMzMyMiAxMDUuMDc2IDQzLjY3NzMgMTA0LjMzN0M0My44NDggMTAzLjE2NSA0My45MzYzIDEwMS45NjYgNDMuOTM2MyAxMDAuNzQ3QzQzLjkzNjMgODcuMTEwMiAzMi44ODE2IDc2LjA1NTUgMTkuMjQ1IDc2LjA1NTVaTTg2LjM5NjkgMTAxLjcyQzkwLjI0NCAxMDAuMjE2IDkzLjMxNjggOTguMjQ2MiA5NS43NzEyIDk1Ljc5MTlDMTAyLjMxNiA4OS4yNDcgMTA1LjQxOCA3OC4zMDQyIDEwNS40MTggNjAuMDA2MkMxMDUuNDE4IDU4LjA3MTIgMTA1LjM4MyA1Ni4yMTg1IDEwNS4zMTMgNTQuNDQ0NUw4Ny40NzA3IDcyLjI4N0w4Ny40MTE3IDcyLjM0NTdDNzkuNDQ5NyA4MC4zNzA4IDc5LjM5MSA5My4yODI2IDg3LjIzNTggMTAxLjM4Qzg2Ljk2MDMgMTAxLjQ5NiA4Ni42ODA3IDEwMS42MDkgODYuMzk2OSAxMDEuNzJaTTEwNC40OTggNDQuOTE2NEMxMDMuMTQzIDM1LjI5ODQgMTAwLjI3MSAyOC43MjAxIDk1Ljc3MTIgMjQuMjIwNUM5MS4xODMyIDE5LjYzMjUgODQuNDM0MSAxNi43MzY2IDc0LjUwNDkgMTUuNDE1TDUyLjU1MTggMzcuMzY4MkM0NC40NTIxIDQ1LjQ2NzkgNDQuNDUyIDU4LjYwMDIgNTIuNTUxOCA2Ni43QzYwLjYzMTggNzQuNzc5OSA3My43MTk3IDc0Ljc5OTcgODEuODI0MiA2Ni43NTkyTDgxLjg4MzcgNjYuNjk5NUwxMDQuMzkyIDQ0LjE5MDhDMTA0LjQyOSA0NC40MzA3IDEwNC40NjQgNDQuNjcyNiAxMDQuNDk4IDQ0LjkxNjRaTTY0LjExNTUgMTQuNjMwM0M2Mi43ODIyIDE0LjU5MjggNjEuNDA2IDE0LjU3NDEgNTkuOTg1NCAxNC41NzQxQzQxLjY4NzQgMTQuNTc0MSAzMC43NDQ2IDE3LjY3NTYgMjQuMTk5NyAyNC4yMjA1QzIxLjkzNTQgMjYuNDg0NyAyMC4wODMzIDI5LjI3NTMgMTguNjI5MiAzMi43MTQ4QzI2Ljc3NiAzOS44Njc4IDM5LjE4OTIgMzkuNTU2NSA0Ni45NjQ4IDMxLjc4MUw2NC4xMTU1IDE0LjYzMDNaIiBmaWxsPSIjMTYxNTE0Ii8+Cjwvc3ZnPgo=') center/contain no-repeat}.loader-progress{font:400 0.75rem/1.5 Arturm,sans-serif;letter-spacing:.12em;color:var(--beige);margin-top:1.5rem;font-variant-numeric:tabular-nums}.intro-pending .site-header,.intro-pending .hero-details,.intro-pending .hero h1 span{opacity:0}.intro-pending .hero-model{opacity:0} @media(min-width:761px) and (prefers-reduced-motion:no-preference){.motion-enabled .hero-scroll{height:240svh}.motion-enabled .hero{position:sticky;top:0}.hero-model,.hero-details,.hero h1 span{will-change:opacity,transform}} @media(max-width:760px){.page-section{padding:5rem 0}.studio-section h2{text-indent:0}.studio-bottom,.section-heading{flex-direction:column;align-items:flex-start;gap:1.5rem}.section-heading>p{font-size:1.125rem}.philosophy{padding:3.5rem 1.5rem;margin:1rem 0.75rem}.founder{grid-template-columns:1fr;gap:3rem}.founder-photo>img{max-height:620px}.founder-photo figcaption{right:0;bottom:5%}.quote-card{flex-basis:94%;min-height:440px;gap:2.5rem}.contact-panel{margin:0.75rem;padding:3rem 1.5rem 1.75rem}.contact-top{grid-template-columns:1fr;gap:2.5rem}.contact-mark{width:72px;height:72px}.footer-wordmark{margin-top:3rem}.site-header{gap:0.75rem}.site-nav{gap:0.875rem}.loader-mark{width:80px;height:80px}} @media(prefers-reduced-motion:reduce){.loader{display:none}.intro-pending .site-header,.intro-pending .hero-details,.intro-pending .hero h1 span,.intro-pending .hero-model{opacity:1}.hero-scroll{height:auto!important}} /* Vector-clipped molten gold: the rise follows the displayed percentage. */ .loader-mark{position:relative;background:#51402e;overflow:hidden;--surface:100%;--fill:0} .loader-mark::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#b88545 0%,#ebcc94 30%,#fff0c9 43%,#d3ad70 60%,#ba884b 100%);clip-path:inset(var(--surface) 0 0);} .loader-mark::after{content:'';position:absolute;left:-25%;width:150%;height:10%;top:var(--surface);border-radius:50%;background:linear-gradient(90deg,#c99d61,#ffedc2,#c99d61);transform:translateY(-30%);opacity:calc(var(--fill) * .8);animation:gold-surface 1.8s ease-in-out infinite alternate} @keyframes gold-surface{from{transform:translate(-3%,-30%) rotate(-3deg)}to{transform:translate(3%,-30%) rotate(3deg)}} @media(prefers-reduced-motion:reduce){.loader-mark::after{animation:none}} /* Liquid-gold loader, clipped by the supplied vector silhouette. */ .loader-mark{width:144px;height:144px;background:#493727;isolation:isolate} .loader-mark::before,.loader-mark::after{content:none;animation:none} .loader-liquid{position:absolute;inset:0;background:linear-gradient(115deg,#a47c48 0%,#d9bb92 25%,#f4dfb7 43%,#c39d66 68%,#e6bc7e 100%);transform:translateY(var(--liquid-rise,110%));will-change:transform} .loader-liquid::before,.loader-liquid::after{content:'';position:absolute;left:-40%;top:-7%;width:180%;height:20%;border-radius:45%;background:#e6bc7e;animation:liquid-sway 2.2s ease-in-out infinite alternate;transform-origin:center} .loader-liquid::after{top:-5%;height:13%;background:linear-gradient(90deg,#c39d66,#f4dfb7 48%,#d9bb92);animation-duration:1.65s;animation-direction:alternate-reverse;opacity:.85} .loader-glint{position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#fff6db66 44%,transparent 62%);background-size:230% 100%;animation:liquid-glint 3s ease-in-out infinite} @keyframes liquid-sway{from{transform:translateX(-4%) rotate(-5deg)}to{transform:translateX(4%) rotate(5deg)}} @keyframes liquid-glint{from{background-position:100% 0}to{background-position:-100% 0}} @media(max-width:760px){.loader-mark{width:120px;height:120px}} @media(prefers-reduced-motion:reduce){.loader-liquid::before,.loader-liquid::after,.loader-glint{animation:none}} /* A shallow mould, viewed from above; the liquid remains vector-clipped. */ .loader{perspective:800px} .loader-mark{transform:rotateX(32deg) rotateZ(0deg);transform-origin:50% 50%;background:linear-gradient(145deg,#806344,#34271d 55%,#997a52);box-shadow:inset 0 0 12px #120e09;transition:none} .loader-liquid{box-shadow:inset 0 3px 5px #fff1c455} .loader-progress{margin-top:1.875rem} .loader-mark{filter:drop-shadow(0 1px 0 #d8b786) drop-shadow(0 2px 0 #755331) drop-shadow(0 2px 0 #503820) drop-shadow(0 2px 0 #39291b);background:linear-gradient(180deg,#aa895c 0%,#483322 12%,#2b2119 75%,#82613c 100%)} .loader-progress{font-family:Arturm,sans-serif;font-size:1.40625rem;position:absolute;top:calc(50% + 133px);left:50%;transform:translateX(-50%);margin:0} /* Local heat around the casting, fading out with the loader. */ @keyframes casting-haze{from{transform:translateY(0) scale(.9);opacity:.4}to{transform:translateY(-20px) scale(1.12);opacity:.7}} @media(prefers-reduced-motion:reduce){} /* Matte contact shadow sits above the existing hero atmosphere and below the mould. */ .loader{background:transparent} .casting-ground{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(ellipse 102px 14px at 50% calc(50% + 69px),#000c 0%,#0008 28%,#0003 62%,transparent 100%),radial-gradient(ellipse 137px 27px at 50% calc(50% + 70px),#0006 0%,#0002 55%,transparent 100%)} @media(max-width:760px){.casting-ground{background:radial-gradient(ellipse 82px 12px at 50% calc(50% + 48px),#000c,#0006 40%,transparent 100%),radial-gradient(ellipse 110px 22px at 50% calc(50% + 49px),#0005,transparent 100%)}} .loader-progress{color:var(--beige)} .loader-progress{font-weight:500;background:linear-gradient(135deg,#fff 25%,var(--beige) 90%);background-clip:text;-webkit-background-clip:text;color:transparent;} /* Keep gradient lettering opaque on its own composited surface. */ html:not(.intro-pending) .hero h1 span{opacity:1!important;backface-visibility:hidden;-webkit-backface-visibility:hidden;} .hero.text-joining h1 span{background-image:linear-gradient(135deg,#fff 25%,var(--beige) 90%)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;opacity:1!important;visibility:visible!important;backface-visibility:visible;-webkit-backface-visibility:visible;} .hero h1 span.svg-lettering,.hero.text-joining h1 span.svg-lettering{background:none!important;color:transparent!important;-webkit-text-fill-color:transparent!important;} .word-gradient{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none;} .word-gradient text{-webkit-text-fill-color:initial;} .scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:18px;height:29px;border:1px solid #d9cbbdb3;border-radius:12px;z-index:4;pointer-events:none;opacity:.8;transition:opacity .3s ease;} .scroll-cue span{position:absolute;left:50%;top:6px;width:2px;height:5px;margin-left:-0.0625rem;border-radius:2px;background:#E9C79E;animation:scroll-wheel 1.8s ease-in-out infinite;} @keyframes scroll-wheel{0%,100%{transform:translateY(0);opacity:.25}35%{opacity:1}70%{transform:translateY(7px);opacity:0}} .intro-pending .scroll-cue{opacity:0;} @media(max-width:760px){.scroll-cue{bottom:14px;}} @media(prefers-reduced-motion:reduce){.scroll-cue span{animation:none;}} /* Supplied mouse outline stays still; only the wheel drifts downward. */ .scroll-cue{width:16px;height:24px;border:0;border-radius:0;opacity:var(--cue-opacity,.8);} .scroll-cue svg{display:block;width:100%;height:100%;overflow:visible;} .scroll-cue circle{animation:mouse-drift 2.8s cubic-bezier(.45,0,.55,1) infinite;} @keyframes mouse-drift{0%,15%{transform:translateY(0);opacity:.9}65%{transform:translateY(6px);opacity:0}66%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:.9}} .intro-pending .scroll-cue{opacity:0;} @media(prefers-reduced-motion:reduce){.scroll-cue circle{animation:none;}} .scroll-cue rect{stroke-opacity:.7;} .scroll-cue circle{animation:mouse-drift-subtle 2.6s cubic-bezier(.45,0,.55,1) infinite;} @keyframes mouse-drift-subtle{0%,20%{transform:translateY(0);opacity:1}70%{transform:translateY(3px);opacity:0}71%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}} @media(prefers-reduced-motion:reduce){.scroll-cue circle{animation:none;opacity:1;}} .scroll-cue circle{fill:#E9C79E;} :root{--page:var(--black);--cream:var(--beige);--paper:#f6f2ec;--ink:var(--black);--soft:var(--grey);--edge:rgba(255,255,255,.12)} body{overflow-x:hidden;background-color:var(--black);background-image:linear-gradient(180deg,#252220,#201E1C);background-size:100% 2000px;background-repeat:no-repeat} .site-header{padding:3rem;mix-blend-mode:normal;background:transparent;border:0;box-shadow:none;backdrop-filter:none}.site-header::before{content:none}.casting-ground{position:absolute} .hero{min-height:760px}.hero-details{left:8.333vw;bottom:10%}.hero h1 span:first-child{left:8.333vw}.hero h1 span:last-child{right:8.333vw} .page-section{width:auto;margin-inline:8.333vw;padding:clamp(6.5rem,12vw,11.25rem) 0}.eyebrow{font:500 1rem/1.125rem 'Helixa',sans-serif;letter-spacing:0.08rem;color:var(--cream);text-transform:uppercase}.page-section h2,.center-heading h2{background:linear-gradient(135deg,var(--cream) 3%,#fff 38%,#fff 74%,var(--cream));background-clip:text;-webkit-background-clip:text;color:transparent} .studio-section{padding-top:clamp(7.5rem,14vw,12.5rem)}.studio-section h2{font-size:clamp(2.625rem,5vw,4.5rem);max-width:1200px;text-indent:12%;line-height:1.12}.studio-bottom{margin-top:4rem}.studio-bottom p{max-width:500px;font-size:1.25rem;line-height:1.5} .stats{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding-top:0}.stats article{display:grid;grid-template-columns:220px 1fr;align-items:center;min-height:160px;padding:2rem 3rem;border-radius:16px;background:var(--cream);color:var(--ink)}.stats strong{font:400 clamp(3.5rem,5vw,4.5rem)/1 Arturm,sans-serif;letter-spacing:.02em}.stats span{font-size:1.125rem;line-height:1.55;max-width:250px} .center-heading{text-align:center}.center-heading .eyebrow{color:var(--cream);margin-bottom:1.5rem}.center-heading h2{font:500 clamp(3rem,5vw,4.5rem)/1.16 Arturm,sans-serif;margin:0;letter-spacing:.02em} .work-showcase{padding-top:11.25rem}.projects{display:grid;gap:2rem;margin-top:5.5rem}.project{position:relative;min-height:min(74vw,820px);border-radius:28px;overflow:hidden;padding:2rem;isolation:isolate}.project-meta{position:relative;z-index:3;display:flex;justify-content:space-between;text-transform:uppercase;font-size:0.8125rem;letter-spacing:.12em}.project-caption{position:absolute;z-index:4;left:32px;right:32px;bottom:32px;display:flex;justify-content:space-between;align-items:end;gap:2rem}.project-caption>div{display:flex;align-items:center;gap:1rem}.project-caption img{width:48px;height:48px;object-fit:contain}.project-caption h3{font:500 clamp(1.875rem,3vw,2.75rem)/1 Arturm,sans-serif;margin:0}.project-caption p{max-width:360px;font-size:1.0625rem;line-height:1.45;margin:0;text-align:right} .project-rentumo{background:linear-gradient(145deg,#132291,#3057ff 58%,#7d94ff);color:#fff}.rentumo-ui{position:absolute;inset:13% 8% 18%;perspective:1200px}.ui-window{position:absolute;border-radius:20px;background:#f8f8f4;color:#171717;box-shadow:0 36px 80px #02051866}.ui-window-main{inset:0 4% 0 12%;padding:1.5rem 1.875rem;transform:rotate(-2deg)}.ui-top{display:flex;align-items:center;gap:0.4375rem;font-size:0.8125rem}.ui-top i{width:7px;height:7px;border-radius:50%;background:#ddd}.ui-top b{margin-left:0.625rem}.ui-window h3{font:500 clamp(2.25rem,4vw,4rem)/.98 Arturm,sans-serif;margin:11% 0 6%;max-width:70%}.ui-search{height:52px;border:1px solid #d7d9e1;border-radius:10px;background:linear-gradient(90deg,#fff 80%,#3156e9 80%)}.ui-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:0.875rem;margin-top:1.5rem}.ui-panels i{height:120px;background:linear-gradient(#e8e9ec,#d2d5dd);border-radius:10px}.ui-phone{position:absolute;right:0;bottom:-3%;width:22%;height:70%;border:9px solid #111;border-radius:30px;background:#fff;padding:1.75rem 0.6875rem 0.625rem;box-shadow:0 25px 50px #0007;transform:rotate(5deg)}.ui-phone div{height:34%;border-radius:10px;background:linear-gradient(145deg,#d7dbe6,#8093ca)}.ui-phone span{display:block;height:10%;background:#edf0f5;border-radius:6px;margin-top:0.6875rem} /* Figma 64:700: 120×60 pill, 24×24 glyphs at x=24/72 and y=18. */ .quote-track{user-select:none} .quote-track .quote-card{background:var(--beige);transition:background-color .55s ease;scroll-snap-align:center} .quote-track .quote-card.is-active{background:#fff} .testimonials .quote-card blockquote{font-size:clamp(1.875rem,3.125vw,2.5rem);line-height:1.25;font-weight:350} .testimonials .quote-card figcaption span{font-weight:500} .quote-card img[src$="mymahi.svg"]{box-sizing:border-box;padding:1rem 0.125rem} @media(hover:hover){.quote-track:not(.is-dragging) .quote-card:hover{background:#fff}} .testimonials .quote-track{--card-width:min(960px,80vw);padding-inline:calc((100vw - var(--card-width))/2);scroll-padding-inline:calc((100vw - var(--card-width))/2)} @media(max-width:760px){.testimonials.page-section{width:auto;margin-inline:1.25rem}.testimonials .quote-track{--card-width:90vw;margin-inline:-1.25rem}} @media(prefers-reduced-motion:reduce){.quote-track .quote-card{transition:none}} .quote-controls{background:linear-gradient(90deg,#fff 0%,var(--beige) 100%);box-shadow:none} .quote-controls button img{position:absolute;top:18px;display:block;width:24px;height:24px} .quote-controls button:first-of-type img{left:24px;transform:scaleX(-1)} .quote-controls button:last-of-type img{left:12px} .quote-controls button:hover:not(:disabled){transform:none} .quote-control-light{inset:0;background:linear-gradient(90deg,var(--beige) 0%,#fff 100%);transform:none;opacity:0;transition:opacity .45s ease} .quote-controls button{opacity:.5;transition:opacity .3s ease} .quote-controls button:first-of-type:not(:disabled){opacity:1} .quote-controls:has(button:last-of-type:is(:hover,:focus-visible):not(:disabled)) .quote-control-light{opacity:1} .quote-controls:has(button:last-of-type:is(:hover,:focus-visible):not(:disabled)) button:first-of-type{opacity:.5} .quote-controls button:is(:hover,:focus-visible):not(:disabled){opacity:1} .quote-controls button:disabled{opacity:.5} @media(prefers-reduced-motion:reduce){.quote-controls button,.quote-control-light{transition:none}} .project-hibba{background:#f4e9dc;color:#171513}.hibba-stage{position:absolute;inset:8% 5% 14%;display:grid;place-items:center}.hibba-stage>img{width:clamp(130px,18vw,260px);height:auto;filter:drop-shadow(0 18px 35px #57231526)}.hibba-stage strong{position:absolute;font:700 clamp(4.375rem,11vw,10.5rem)/.8 Arturm,sans-serif;letter-spacing:-.06em;color:#1b1816;mix-blend-mode:multiply}.hibba-orbit{position:absolute;width:66%;aspect-ratio:1;border:2px solid #ff8259;border-radius:50%;transform:rotate(-18deg)}.hibba-orbit::after{content:"";position:absolute;inset:15%;border-radius:50%;background:#ff7852;opacity:.2} .project-onivius{background:#ff7a26;color:#171513}.onivius-stage{position:absolute;inset:11% 8% 18%;display:flex;align-items:center;justify-content:center;gap:8%}.onivius-stage>img{width:28%;height:auto;filter:brightness(0)}.onivius-stage>div{display:flex;flex-direction:column;gap:1.125rem;font:500 clamp(3rem,7vw,6.5rem)/.9 Arturm,sans-serif}.onivius-stage span{display:block;border-bottom:2px solid #171513;padding-bottom:0.625rem}.project-onivius .project-caption img{filter:brightness(0)} .services-section{padding-top:12.5rem}.service-list{border-top:1px solid var(--edge);margin-top:5.5rem}.service-list article{display:grid;grid-template-columns:72px 1fr 1fr;gap:2rem;align-items:start;padding:2.125rem 0;border-bottom:1px solid var(--edge)}.service-list article>span{color:var(--orange);font-size:0.875rem}.service-list h3{font:500 clamp(1.75rem,3vw,2.625rem)/1.1 Arturm,sans-serif;margin:0}.service-list p{color:var(--soft);font-size:1.125rem;line-height:1.55;margin:0;max-width:440px} .philosophy{width:calc(100% - 48px);max-width:1200px;min-height:720px;margin:2.5rem auto;padding:7.5rem clamp(2.5rem,8.333vw,7.5rem);display:flex;flex-direction:column;justify-content:flex-start;background:var(--orange)}.philosophy h2{font-size:clamp(2.625rem,4.445vw,4rem);font-weight:400;line-height:1.125;letter-spacing:.02em;max-width:824px;margin:2.5rem 0 4rem;opacity:.96}.philosophy .eyebrow{margin:0}.philosophy-note{font-size:1.5rem} .why{padding-top:11.25rem}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:5.5rem}.why-grid article{min-height:180px;padding:2.125rem 2.25rem;border-radius:16px;background:var(--cream);color:var(--ink)}.why-grid h3{font:500 1.625rem/1.2 Arturm,sans-serif;margin:0 0 1.125rem}.why-grid p{font-size:1.125rem;line-height:1.55;margin:0;max-width:440px} .testimonials{padding-top:12.5rem}.quote-controls{margin:3.125rem auto 5rem}.quote-track{margin-inline:-8.333vw;padding-inline:8.333vw;scroll-padding-left:8.333vw;gap:1.5rem;cursor:grab;scrollbar-width:none}.quote-track::-webkit-scrollbar{display:none}.quote-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}.quote-card{flex-basis:min(960px,80vw);min-height:640px;padding:6rem 5rem 5rem;border-radius:24px}.quote-card blockquote{font-size:clamp(1.875rem,3vw,2.5rem);line-height:1.2} .founder{padding-top:11.25rem;padding-bottom:11.25rem;grid-template-columns:454px minmax(0,1fr);gap:12%}.founder-photo>img{max-height:900px}.founder-photo figcaption{right:-18%;bottom:6%;background:transparent}.founder-copy h2{font-size:clamp(3.375rem,6vw,4.75rem)} .contact-panel{min-height:960px;margin:1rem;padding:7.5rem max(8.333vw,2.5rem) 2rem}.contact-top{grid-template-columns:1fr 1fr}.contact-top h2{font-size:clamp(3rem,5vw,4.5rem)}.footer-bottom{align-items:center}.footer-bottom nav{display:flex;gap:1.5rem}.footer-bottom nav a{text-decoration:none} .reveal{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} @media(max-width:900px){.site-header{padding:1.75rem 1.5rem}.stats article{grid-template-columns:140px 1fr;padding:1.75rem}.project{min-height:700px}.project-caption{align-items:flex-start;flex-direction:column}.project-caption p{text-align:left}.service-list article{grid-template-columns:48px 1fr}.service-list p{grid-column:2}.founder{grid-template-columns:40% 1fr;gap:8%}.footer-bottom nav{width:100%;flex-wrap:wrap}} @media(max-width:760px){body{background:#201E1C}.site-header{position:absolute}.site-header::before{display:none}.wordmark,.wordmark img{width:102px;height:auto}.site-nav{width:100%;justify-content:space-between;font-size:0.875rem}.hero{min-height:100svh}.hero-details{max-width:none}.page-section{width:calc(100% - 40px);padding:5.5rem 0}.studio-section h2{text-indent:0;font-size:2.375rem}.studio-bottom{margin-top:2.25rem}.stats{grid-template-columns:1fr;gap:1rem}.stats article{grid-template-columns:110px 1fr;min-height:124px;padding:1.5rem}.stats strong{font-size:3.125rem}.stats span{font-size:1rem}.center-heading h2{font-size:2.625rem}.work-showcase,.services-section,.why,.testimonials{padding-top:6.5rem}.projects{margin-top:3.25rem;gap:1.25rem}.project{min-height:580px;border-radius:20px;padding:1.375rem}.project-caption{left:22px;right:22px;bottom:22px}.project-caption img{width:36px;height:36px}.project-caption h3{font-size:1.75rem}.project-caption p{font-size:0.9375rem}.rentumo-ui{inset:17% 4% 27%}.ui-window-main{inset:0 7% 0 2%;padding:1rem}.ui-window h3{font-size:1.875rem}.ui-phone{width:31%;height:65%}.hibba-stage strong{font-size:3.625rem}.hibba-stage>img{width:42%}.onivius-stage{flex-direction:column}.onivius-stage>img{width:45%}.onivius-stage>div{font-size:2.875rem}.service-list{margin-top:3.25rem}.service-list article{padding:1.625rem 0}.service-list h3{font-size:1.875rem}.philosophy{min-height:620px;padding:4.375rem 1.5rem}.philosophy h2{font-size:2.625rem;margin:2.25rem 0 3.75rem}.why-grid{grid-template-columns:1fr;gap:1rem;margin-top:3.25rem}.why-grid article{min-height:0;padding:1.75rem}.quote-card{flex-basis:90vw;min-height:520px;padding:2rem}.founder{grid-template-columns:1fr;gap:3.5rem}.founder-photo{max-width:440px;margin-inline:auto}.founder-photo figcaption{right:0}.contact-panel{min-height:auto;padding:4rem 1.5rem 1.75rem}.contact-top{grid-template-columns:1fr}.contact-top h2{font-size:2.625rem}.footer-bottom nav{gap:0.875rem;font-size:0.75rem}} /* Centred editorial layout; the portrait shares the footer's top edge. */ .founder.page-section { width:calc(100% - 48px); max-width:1176px; margin-inline:auto; margin-bottom:0; padding-bottom:0; grid-template-columns:minmax(0,454px) minmax(0,573px); justify-content:space-between; gap:clamp(2.5rem,10.35vw,9.3125rem); align-items:end; } .founder .founder-photo {width:100%;max-width:454px;margin:0;align-self:end;transform:none;transition:opacity .8s ease} .founder .founder-photo>img {width:100%;height:auto;max-height:none;display:block} .founder .founder-copy {width:100%;max-width:573px;min-width:0;container-type:inline-size;align-self:start;padding-top:7.25rem;padding-bottom:3rem} .founder .founder-copy h2 {font-family:Arturm,sans-serif;font-size:min(4.5rem,12.56cqi);letter-spacing:.02em;line-height:1.166667;font-weight:500;white-space:nowrap;margin:1.5rem 0 2.25rem;background-image:linear-gradient(135deg,var(--beige) 11.441%,#fff 27.923%)} .founder .founder-copy>.eyebrow {font-family:'Helixa',sans-serif;font-size:1rem;font-weight:500;line-height:1.125rem;letter-spacing:0.08rem;color:#a69690} .founder .founder-copy>.eyebrow {margin:0} .founder .founder-copy>p:not(.eyebrow) {max-width:527px;font-family:'Helixa',sans-serif;font-weight:400;font-size:1.125rem;line-height:1.75rem;margin:0 0 1.75rem} .founder .founder-photo figcaption {left:56.39%;top:64%;right:auto;bottom:auto;width:239px;padding:0;background:transparent} .founder-signature {position:relative;width:180px;height:108px;margin-bottom:0.5rem} .founder-signature img {position:absolute;left:-11.25px;top:12.79px;width:149.986px;height:87.519px;display:block} .founder .founder-photo figcaption>span {font-family:Arturm,sans-serif;font-size:1.25rem;font-weight:400;line-height:1.75rem;letter-spacing:.02em;opacity:.96} .founder .founder-photo figcaption>small {font-family:'Helixa',sans-serif;font-size:0.875rem;font-weight:400;line-height:1.25rem;margin-top:0.25rem;color:#a69690} .founder .founder-copy .line-link {width:204px;max-width:100%;white-space:nowrap;font-family:'Helixa',sans-serif;font-size:0.875rem;font-weight:600;line-height:1rem;letter-spacing:0.035rem;padding:0 0 1rem;border-bottom:1px solid #FF933C;gap:0;margin-top:4.5rem;transition:width .45s cubic-bezier(.22,1,.36,1)} .founder .founder-copy .line-link img {flex:none;width:16px;height:16px} .founder .founder-copy .line-link:is(:hover,:focus-visible) {width:216px} .founder .founder-copy .line-link:is(:hover,:focus-visible) img {transform:none} @media(prefers-reduced-motion:reduce) {.founder .founder-copy .line-link {transition:none}} .founder + .contact-panel {margin-top:0} /* Fluid desktop composition, capped at 120% of the reference size. */ @media(min-width:761px) { body .founder.page-section { --founder-unit: min(1vw, 1.08rem); width:81.666667%; max-width:88.2rem; grid-template-columns:minmax(0,454fr) minmax(0,573fr); gap:calc(10.347222 * var(--founder-unit)); } body .founder .founder-photo, body .founder .founder-copy {max-width:none} body .founder .founder-copy {padding-top:calc(8.055556 * var(--founder-unit));padding-bottom:calc(3.333333 * var(--founder-unit))} body .founder.page-section .founder-copy h2 {font-size:12.565445cqi;margin:calc(1.666667 * var(--founder-unit)) 0 calc(2.5 * var(--founder-unit))} body .founder.page-section .founder-copy > .eyebrow {font-size:max(.875rem,2.792321cqi)} body .founder.page-section .founder-copy > p:not(.eyebrow) {max-width:91.972077%;font-size:clamp(1rem,3.490401cqi,1.5rem)} body .founder .founder-photo figcaption {width:calc(16.597222 * var(--founder-unit))} .founder .founder-signature {width:calc(12.5 * var(--founder-unit));height:calc(7.5 * var(--founder-unit));margin-bottom:calc(.555556 * var(--founder-unit))} .founder .founder-signature img {left:calc(-.78125 * var(--founder-unit));top:calc(.888194 * var(--founder-unit));width:calc(10.415694 * var(--founder-unit));height:calc(6.077708 * var(--founder-unit))} body .founder .founder-photo figcaption > span {font-size:max(1rem,calc(1.388889 * var(--founder-unit)));line-height:1.4} body .founder .founder-photo figcaption > small {font-size:max(.75rem,calc(.972222 * var(--founder-unit)));line-height:1.428571;margin-top:calc(.277778 * var(--founder-unit))} } @media(max-width:760px) { .founder.page-section {width:calc(100% - 40px);grid-template-columns:minmax(0,1fr);gap:2.25rem} .founder .founder-copy {grid-row:1;padding-block:0;justify-self:center} .founder .founder-photo {grid-row:2;justify-self:center;max-width:360px} .founder .founder-photo figcaption {left:auto;right:0;top:auto;bottom:6%;width:239px} } /* Shared eyebrow treatment, matching Meet the Founder. Keep section-specific spacing separate from these typography tokens. */ :root { --eyebrow-color:var(--beige); --eyebrow-size:16px; --eyebrow-weight:500; --eyebrow-tracking:1.28px; --heading-size:clamp(42px,5vw,72px); --heading-weight:500; --heading-leading:1.166667; --heading-tracking:.02em; } body .eyebrow, body .hero-eyebrow, body .page-section .eyebrow, body .center-heading .eyebrow, body .philosophy .eyebrow, body .founder .founder-copy>.eyebrow { font-family:'Helixa',sans-serif; font-size:var(--eyebrow-size); font-weight:var(--eyebrow-weight); font-variation-settings:'GRAD' 0,'ROND' 0,'wdth' 100; font-synthesis:none; line-height:1.125; letter-spacing:var(--eyebrow-tracking); color:var(--eyebrow-color); text-transform:uppercase; } /* One H2 type scale; retain each section's colour and layout. */ body .page-section h2, body .center-heading h2, body .philosophy h2, body .contact-panel h2, body .founder .founder-copy h2 { font-family:Arturm,sans-serif; font-size:var(--heading-size); font-weight:var(--heading-weight); line-height:var(--heading-leading); letter-spacing:var(--heading-tracking); } /* Match the Why Artocea section's outer gutters, not a separate max-width. */ body .philosophy { container-type:inline-size; width:auto; max-width:none; margin-inline:8.333vw; } /* Preserve the supplied orange-panel treatment without changing other H2s. */ body .philosophy .eyebrow {color:#785a46} body .philosophy h2 { /* Figma: 64px type within a 960px inner container. */ font-size:clamp(2rem,6.666667cqi,7rem); font-weight:400; line-height:1.125; letter-spacing:.02em; color:var(--black); background:none; max-width:85.833333%; margin:clamp(1.75rem,4.166667cqi,4rem) 0 clamp(3.5rem,11.666667cqi,10.5rem); } body .philosophy-note { font-family:Arturm,sans-serif; font-size:clamp(1.125rem,2.5cqi,2.5rem); font-weight:500; line-height:1.333333; letter-spacing:.02em; color:var(--black); } @media(max-width:760px) { body .philosophy {margin-inline:1.25rem} body .philosophy h2 {max-width:100%} body .founder .founder-copy h2 {font-size:min(var(--heading-size),12.56cqi)} } /* Non-hero presentation layer. Never scope these tokens to :root or the hero. */ /* A static, five-percent warm backdrop; never an emissive halo on the metal. */ .hero-back-glow { position: absolute; z-index: 0; pointer-events: none; left: 48%; top: 46%; width: min(72vw, 72rem); height: min(84svh, 56rem); transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgb(221 197 160 / .05) 0%, rgb(221 197 160 / .025) 35%, transparent 72%); opacity: var(--hero-back-glow-opacity, 1); } .intro-pending .hero-back-glow { visibility: hidden; } @media (max-width: 760px) { .hero-back-glow { left: 50%; top: 22rem; width: 100%; height: 32rem; } } @media (min-width: 761px) { .site-header .site-nav { gap: clamp(1.875rem, 3vw, 3rem); } .site-header .site-nav a { display: inline-flex; align-items: center; padding-block: .5em; margin-block: -.5em; color: #fff; text-decoration: none; } .site-header .site-nav .nav-label { display: inline-flex; pointer-events: none; } .site-header .site-nav .nav-letter { display: inline-block; overflow: hidden; } .site-header .site-nav .nav-letter > span { display: block; position: relative; } .site-header .site-nav .nav-letter > span::after { content: attr(data-letter); position: absolute; top: 135%; left: 0; } .site-header .site-nav a:is(:hover, :focus-visible) { color: #fff; } } @media (min-width: 761px) and (hover: hover) and (prefers-reduced-motion: no-preference) { .site-header .site-nav .nav-letter > span { transition: transform 220ms cubic-bezier(.25, .1, .25, 1); } .site-header .site-nav a:is(:hover, :focus-visible) .nav-letter > span { transform: translateY(-135%); transition-duration: 260ms; transition-delay: calc(var(--letter-index) * 7ms); } } /* Figma Services: 24/1200 inset, 68/1200 number column, regular 20/24 capabilities. */ @media (min-width: 761px) { body .services-section .service-row { padding-inline: 2cqi; grid-template-columns: 4.666667cqi minmax(0, 1fr) 10% 10%; } body .services-section .service-row .service-number { margin-left: 0; } body .services-section .service-row p { font-size: clamp(.9375rem, 1.666667cqi, 1.5rem); line-height: 1.2; } } body .services-section .service-row p { font-family: 'Helixa', sans-serif; font-weight: 400; font-style: normal; font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100; font-synthesis: none; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body .services-section .service-row { position: relative; isolation: isolate; border-radius: 0; border-bottom-color: #3C322D; transition: border-color 300ms ease, opacity 900ms var(--motion-ease), transform 900ms var(--motion-ease); } body .services-section .service-row::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 1rem; background: var(--beige); opacity: 0; transition: opacity 420ms ease; } body .services-section .service-list { border-top-color: #3C322D; transition: border-color 300ms ease; } body .services-section .service-row :is(h3, p, .service-number) { transition: color 360ms ease, opacity 360ms ease, transform 900ms var(--motion-ease); } @media (hover: hover) { body .services-section .service-row:hover { border-bottom-color: transparent; } body .services-section .service-row:hover::before { opacity: 1; } body .services-section .service-row:has(+ .service-row:hover) { border-bottom-color: transparent; } body .services-section .service-list:has(> .service-row:first-child:hover) { border-top-color: transparent; } body .services-section .service-row:hover h3 { color: #201E1C; } body .services-section .service-row:hover p { color: var(--dark-brown); opacity: 1; } body .services-section .service-row:hover .service-number { color: var(--brown); opacity: .45; } } body .services-section .service-row:focus-within { border-bottom-color: transparent; } body .services-section .service-row:focus-within::before { opacity: 1; } body .services-section .service-row:has(+ .service-row:focus-within) { border-bottom-color: transparent; } body .services-section .service-list:has(> .service-row:first-child:focus-within) { border-top-color: transparent; } body .services-section .service-row:focus-within h3 { color: #201E1C; } body .services-section .service-row:focus-within p { color: var(--dark-brown); opacity: 1; } body .services-section .service-row:focus-within .service-number { color: var(--brown); opacity: .45; } @media (prefers-reduced-motion: reduce) { body .services-section .service-row, body .services-section .service-row::before, body .services-section .service-row :is(h3, p, .service-number) { transition: none; } } /* Desktop scroll cue: supplied mouse artwork, with a stationary outline. */ @media (min-width: 761px) { .hero .scroll-cue { bottom: clamp(2.5rem, 5svh, 4rem); } .hero .scroll-cue rect { stroke-opacity: 1; } .scroll-cue-wheel { animation: scroll-cue-descent 2.2s cubic-bezier(.4, 0, .3, 1) infinite; } } @keyframes scroll-cue-descent { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } @media (prefers-reduced-motion: reduce) { .scroll-cue-wheel { animation: none; } } :where(.page-section, .hero-statement, .philosophy, .contact-panel) { --content-max: 1440px; --section-gutter: max(8.333333vw, calc((100vw - var(--content-max)) / 2)); --section-space: clamp(5.5rem, 10.4vw, 9.375rem); --section-heading: clamp(36px, 5vw, 72px); --section-body: clamp(16px, 1.25vw, 18px); --section-grey: var(--grey); --section-radius: 16px; --section-gap: clamp(1rem, 1.667vw, 1.5rem); --motion-ease: cubic-bezier(.22, 1, .36, 1); --motion-fast: 220ms; --motion-standard: 480ms; --motion-reveal: 800ms; --card-hover-duration: 650ms; --card-hover-ease: cubic-bezier(.4, 0, .2, 1); } body .page-section:not(.founder) { width: auto; margin-inline: var(--section-gutter); padding-block: var(--section-space); } body .page-section h2, body .contact-panel h2 { font-size: var(--section-heading); line-height: 1.166667; letter-spacing: .02em; font-weight: 500; } body .page-section .eyebrow, body .founder .founder-copy > .eyebrow, body .philosophy .eyebrow { font: var(--eyebrow-weight) var(--eyebrow-size)/1.125 'Helixa', sans-serif; font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100; font-synthesis: none; letter-spacing: .08em; color: var(--eyebrow-color); } .page-section .center-heading .eyebrow { margin-bottom: 1.5rem; } .page-section .center-heading { max-width: 900px; margin-inline: auto; } .page-section .center-heading h2 { background-image: linear-gradient(135deg, var(--beige) 0%, #fff 38%, #fff 100%); } .page-section :is(h2, h3, p, blockquote) { overflow-wrap: break-word; } .page-section a:focus-visible, .contact-panel a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; } /* Studio and statistics: Figma 588 × 180 cards with a 24px gap. */ body .studio-section.page-section { container-type: inline-size; width: auto; margin-inline: var(--section-gutter); padding-bottom: 5rem; } body .studio-section > .eyebrow { margin: 0 0 2rem; } body .studio-section #studio-title { margin: 0; } /* Keep the reference's three desktop lines proportional to the section width. */ @media (min-width: 761px) { body .studio-section #studio-title { font-size: min(5cqi, 4.5rem); text-indent: 12%; text-wrap: initial; } #studio-title .studio-line { display: inline; white-space: nowrap; } #studio-title .studio-break { display: inline; } } body .studio-section h2 { max-width: 100%; text-indent: 12%; font-family: Arturm, sans-serif; font-size: clamp(2rem, 5cqi, 4.5rem); font-weight: 400; line-height: 1.133333; letter-spacing: .02em; background-image: linear-gradient(135deg, var(--beige) 15.031%, rgba(255, 255, 255, .9) 33.319%); background-clip: text; -webkit-background-clip: text; color: transparent; opacity: .96; } .studio-section .studio-bottom { margin-top: 2.75rem; gap: 2.5rem; } .studio-section .studio-bottom p { max-width: 476px; font-size: 1.125rem; font-weight: 400; line-height: 1.55; } body .stats.page-section { padding-top: 0; gap: var(--section-gap); } .stats article { grid-template-columns: minmax(120px, 1fr) minmax(0, 1fr); gap: 1.5rem; min-height: 176px; padding: clamp(1.8rem, 3.333333vw, 3rem) clamp(1.5rem, 3.333vw, 3rem); border-radius: var(--section-radius); } .stats strong { font-family: Arturm, sans-serif; font-weight: 400; font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1; letter-spacing: 0; font-synthesis: none; color: var(--black); white-space: nowrap; } .stats span { font-family: 'Helixa', sans-serif; font-weight: 400; font-size: clamp(1rem, 1.388889vw, 1.5rem); line-height: 1.4; letter-spacing: 0; font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100; font-synthesis: none; max-width: 25ch; color: var(--dark-brown); } @media (max-width: 760px) { .stats .stat-break { display: none; } } /* Stable media slots: replace the placeholder class only when real media exists. */ .work-showcase { container-type: inline-size; } .work-showcase .projects { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); align-items: center; column-gap: 0; row-gap: 6cqi; margin-top: clamp(3.25rem, 10cqi, 7.5rem); } .work-item { min-width: 0; } .work-item .project, .work-item .work-caption { cursor: pointer; } .work-item--1 { grid-column: 1 / span 10; grid-row: 1; } .work-item--2 { grid-column: 13 / span 8; grid-row: 1; } .work-item--3 { grid-column: 6 / span 15; grid-row: 2; } .work-item--4 { grid-column: 1 / span 8; grid-row: 3; } .work-item--5 { grid-column: 11 / span 10; grid-row: 3; } .work-item--6 { grid-column: 1 / span 15; grid-row: 4; } .work-showcase .work-caption { margin: 2cqi 0 0; font: 400 clamp(1.125rem, 2.333333cqi, 1.75rem)/1.285714 'Helixa', sans-serif; letter-spacing: 0; color: #fff; } /* Preserve the crop offsets from the six Figma image masks. */ .work-item--1 .project-media { inset: -.444444% auto auto -1.166667%; width: 101.666667%; height: 101.777778%; } .work-item--2 .project-media { inset: -.46875% auto auto -.625%; width: 101.041667%; height: 100.9375%; } .work-item--3 .project-media { inset: -.181818% auto auto -5.222222%; width: 106.333333%; height: 106%; } .work-item--4 .project-media { inset: -.3125% auto auto -1.666667%; width: 101.666667%; height: 101.71875%; } .work-item--5 .project-media { inset: 0 auto auto -18.833333%; width: 123%; height: 123.111111%; } .work-item--6 .project-media { inset: -.363636% auto auto -.333333%; width: 101.222222%; height: 101.272727%; } .work-showcase .project { aspect-ratio: 4 / 3; min-height: 0; padding: 0; border-radius: 24px; background: var(--cream); color: var(--ink); } .project-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .project-media--placeholder { background: var(--cream); } .stats article, .why-grid article, .project-media--placeholder { transition: background-color 480ms var(--motion-ease), opacity var(--motion-reveal, 800ms) var(--motion-ease), transform var(--motion-reveal, 800ms) var(--motion-ease); } @media (hover: hover) { .stats article:hover, .why-grid article:hover, .project:hover .project-media--placeholder { background-color: #fff; } } .work-item--2 .project, .work-item--4 .project { aspect-ratio: 3 / 4; } .work-item--3 .project, .work-item--6 .project { aspect-ratio: 18 / 11; } .project-media picture { display: block; width: 100%; height: 100%; } .project-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 500ms var(--motion-ease); } .project-caption img { filter: brightness(0); } @media (hover: hover) { .project:hover .project-media:not(.project-media--placeholder) img { transform: scale(1.02); } } /* Services: 1200px reference, 192px rows, exported frames on the right. */ .services-section { container-type: inline-size; } .services-section .center-heading { max-width: none; margin-inline: 0; text-align: left; } .services-section .center-heading h2 { font-size: clamp(1.75rem, 6cqi, 4.5rem); } .services-section .service-number, .services-section .service-row p { font-family: 'Helixa', sans-serif; font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100; font-synthesis: none; } .services-section .service-number { font-weight: 300; line-height: .9; } .services-section .service-row p { font-weight: 400; } .services-section .service-list { margin-top: clamp(3.25rem, 6.11vw, 5.5rem); } .services-section .service-row { display: grid; grid-template-columns: 6.583333% minmax(0, 1fr) 10% 10%; grid-template-rows: auto auto; align-items: center; gap: 0; padding-block: 3cqi; min-height: 16cqi; } .service-row .service-number { grid-column: 1; grid-row: 1; align-self: start; margin: 1.666667cqi 0 0 1cqi; font-size: clamp(1rem, 1.666667cqi, 1.5rem); font-weight: 300; letter-spacing: .08em; color: var(--beige); opacity: .30; } .service-row .service-icon-frame { position: relative; grid-column: 3; grid-row: 1 / 3; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; } .service-icon-frame img { width: 100%; height: 100%; object-fit: contain; display: block; } .services-section .service-row h3 { grid-column: 2; grid-row: 1; margin: 0; color: #fff; font: 400 clamp(1.75rem, 4cqi, 3.6rem)/1.166667 'Helixa', sans-serif; } .services-section .service-row p { grid-column: 2; grid-row: 2; margin: 1cqi 0 0; max-width: none; color: var(--grey); opacity: 1; font-size: clamp(0.875rem, 1.5cqi, 1.35rem); font-weight: 400; line-height: 1.333333; white-space: pre-wrap; } .service-icon-frame img { position: absolute; } .service-icon-frame--product-design img { width: 150%; height: 150%; left: -25%; top: -25%; } .service-icon-frame--brand-identity img, .service-icon-frame--web-design img { width: 133.333333%; height: 133.333333%; left: -16.666667%; top: -16.666667%; } .service-icon-frame--ai-films img { width: 166.666667%; height: 166.666667%; left: -33.333333%; top: -37.5%; } /* Balance the text group with room below the title; icons do not stretch its rows. */ @media (min-width: 761px) { .services-section .service-row { position: relative; grid-template-rows: max-content max-content; align-content: center; row-gap: 2cqi; } .services-section .service-row .service-number { align-self: start; margin: 1cqi 0 0 1cqi; } .services-section .service-row p { margin-top: 0; } .services-section .service-row .service-icon-frame { position: absolute; grid-column: auto; grid-row: auto; width: 10%; right: 10%; top: 50%; translate: 0 -50%; } } /* Philosophy retains its orange panel and its own Figma 64/72 type scale. */ @media (min-width: 761px) and (max-width: 1100px) { .services-section .service-row .service-icon-frame { width: 12%; right: 4%; } } body .philosophy { margin-inline: var(--section-gutter); min-height: 0; padding: clamp(4rem, 8.333vw, 9rem); background: var(--orange); } body .philosophy .eyebrow { color: #8C5014; margin: 0; } body .philosophy h2 { max-width: 85.833333%; font-family: Arturm, sans-serif; font-size: clamp(2rem, 6.666667cqi, 4.8rem); font-weight: 400; font-synthesis: none; line-height: 1.125; letter-spacing: .02em; margin: 2rem 0 4.25rem; color: var(--black); opacity: .96; } body .philosophy-note { margin: 0; font: 500 clamp(1.125rem, 2.5cqi, 1.8rem)/1.333333 'Helixa', sans-serif; font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100; font-synthesis: none; letter-spacing: 0; color: var(--black); opacity: .8; } /* Why Artocea: exact exported image frames, equal-height content cards. */ .why .why-grid { grid-auto-rows: 1fr; gap: var(--section-gap); margin-top: clamp(3.25rem, 6.11vw, 5.5rem); } .why-grid article { container-type: inline-size; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 36%); grid-template-rows: auto 1fr; column-gap: 1rem; min-height: 300px; padding: clamp(1.75rem, 3.333vw, 3rem); border-radius: var(--section-radius); } .why-grid .why-copy { grid-column: 1; grid-row: 2; align-self: center; } /* Shared fluid title scale accommodates the longest heading on one line. */ .page-section .why-grid .eyebrow { grid-column: 1 / -1; margin: 0 0 2rem; color: var(--brown); font-size: clamp(0.75rem, 3.252cqi, 1.125rem); line-height: 1.125; letter-spacing: .08em; } .why-grid h3 { font-family: 'Helixa', sans-serif; font-size: min(2.125rem, 5.4cqi); white-space: nowrap; font-weight: 500; line-height: 1.111111; font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100; margin-bottom: 1rem; } .why-grid p:not(.eyebrow) { max-width: 28ch; font-family: 'Helixa', sans-serif; font-size: clamp(1rem, 3.659cqi, 1.5rem); font-weight: 400; line-height: 1.555556; font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100; color: var(--dark-brown); } /* Figma: 200px frame, 36px top/right inset on a 588px-wide card. */ .why-art { position: absolute; top: clamp(24px, 2.5vw, 36px); right: 6.122449%; width: 34.013605%; aspect-ratio: 1; overflow: hidden; } .why-art img { position: absolute; width: 100%; height: 100%; object-fit: contain; } .why-art--senior img { left: -11.11%; top: -5.56%; width: 111.11%; height: 111.11%; } .why-art--startup img { top: -1.96%; width: 98.04%; height: 98.04%; } .why-art--details img { left: -8.83%; top: -7.69%; width: 113.96%; height: 113.96%; } /* Desktop reference: 588 × 300; all dimensions scale with the card. */ @media (min-width: 761px) { .why-grid article { display: grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; row-gap:clamp(2.5rem,5vw,4.5rem); padding:8.163265%; min-height:300px; aspect-ratio:auto; } .page-section .why-grid .eyebrow { position: static; margin: 0; font-size: 2.721088cqi; } .why-grid .why-copy { position: relative; left:auto; top:auto; width:62%; align-self:end; } .why-grid h3 { font-size: 6.122449cqi; line-height: 1.111111; margin: 0 0 2.721088cqi; } .why-grid p:not(.eyebrow) { font-size: 3.061224cqi; line-height: 1.555556; max-width: 100%; margin: 0; } .why-art { top: 12%; } .why-grid article:last-child .why-copy { top:auto; } } @media (min-width: 761px) and (max-width: 1100px) { .why .why-grid { grid-template-columns: 1fr; } } @media (hover: hover) { .why-grid article.is-visible:hover { transform: translateY(-2px); } } /* Carousel geometry remains compatible with the existing infinite scroll math. */ .testimonials .quote-track { --card-width: min(960px, 50vw); margin-inline: calc(-1 * var(--section-gutter)); padding-inline: calc((100vw - var(--card-width)) / 2); scroll-padding-inline: calc((100vw - var(--card-width)) / 2); scroll-behavior: auto; gap: 1.5rem; } .testimonials .quote-card { flex: 0 0 var(--card-width); min-height: min(640px, 33.333333vw); padding: min(6rem, 5vw) min(5rem, 4.166667vw); gap: min(5rem, 4.166667vw); } .testimonials .quote-card blockquote { max-width: min(81.5%, 652px); font-size: clamp(1.25rem, 2.083333vw, 2.5rem); font-weight: 350; line-height: 1.25; } .testimonials .quote-card figcaption span { font-size: clamp(1.125rem, 1.53vw, 1.375rem); font-weight: 500; } .quote-logo--committee { padding: 0.4375rem; } .testimonials .quote-card > :is(blockquote, figcaption) { opacity: .5; transition: opacity 480ms var(--motion-ease); } .testimonials .quote-card:is(.is-active, :focus-within) > :is(blockquote, figcaption) { opacity: 1; } @media (hover: hover) { .testimonials .quote-track:not(.is-dragging) .quote-card:hover > :is(blockquote, figcaption) { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .testimonials .quote-card > :is(blockquote, figcaption) { transition: none; } } .testimonials .quote-controls { margin-block: 3rem 5rem; } /* Two slow, opposing logo rows. Without JS they remain native-scroll lists. */ /* Independent translate keeps hover motion separate from scroll-reveal transforms. */ .stats article, .why-grid article, .client-row > li, .testimonials .quote-card, .work-item .project { transition-property: background-color, opacity, transform, translate, box-shadow; transition-duration: 480ms, 800ms, 800ms, 400ms, 400ms; transition-timing-function: var(--motion-ease); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .stats article:hover, .why-grid article.is-visible:hover { translate: 0 -2px; } .why-grid article.is-visible:hover { transform: none; } .testimonials .quote-track:not(.is-dragging) .quote-card:hover { box-shadow: inset 0 0 0 1px rgba(22, 21, 20, .06); } } @media (prefers-reduced-motion: reduce) { .stats article, .why-grid article, .client-row > li, .testimonials .quote-card, .work-item .project { transition: none !important; translate: none !important; } } .clients-heading { max-width: 927px; } .clients-heading .eyebrow { margin-bottom: 1.5rem; } .client-rows { display: grid; gap: 1.5rem; margin-top: 5rem; margin-inline: calc(-1 * var(--section-gutter)); } .client-row { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x proximity; list-style: none; margin: 0; padding: 0; scrollbar-width: thin; scrollbar-color: var(--cream) transparent; } .client-row li { display: grid; place-items: center; flex: 0 0 auto; width: clamp(220px, 25vw, 480px); aspect-ratio: 3 / 2; border-radius: var(--section-radius); background: var(--cream); scroll-snap-align: start; transition: background-color 480ms var(--motion-ease); } .clients .client-row > li { transition: background-color 480ms var(--motion-ease), translate 400ms var(--motion-ease); } @media (min-width: 761px) { .client-row li { width: clamp(165px, 18.75vw, 360px); } } .client-row img { display: block; width: var(--logo-width, 50%); height: var(--logo-height, 40%); object-fit: contain; pointer-events: none; } /* Individual exported bounds relative to each 360 × 240 Figma card. */ .client-row img[src*="/wearattraction.svg"] { --logo-width: 41.852%; --logo-height: 23.333%; } .client-row img[src*="/design-by-committee.svg"] { --logo-width: 52.862%; --logo-height: 18.313%; } .client-row img[src*="/imultifamily.svg"] { --logo-width: 42.726%; --logo-height: 44.583%; } .client-row img[src*="/goomood.svg"] { --logo-width: 43.524%; --logo-height: 45.417%; } .client-row img[src*="/onlineminds.svg"] { --logo-width: 51.751%; --logo-height: 11.677%; } .client-row img[src*="/onivius.svg"] { --logo-width: 45.920%; --logo-height: 47.917%; } .client-row img[src*="/icarasia.svg"] { --logo-width: 45.356%; --logo-height: 39.583%; } .client-row img[src*="/happydemy.svg"] { --logo-width: 43.524%; --logo-height: 45.417%; } .client-row img[src*="/client-09.svg"] { --logo-width: 59.245%; --logo-height: 37.917%; } .client-row img[src*="/loopify.svg"] { --logo-width: 45.313%; --logo-height: 36.250%; } .client-row:focus-visible { outline: 2px solid var(--cream); outline-offset: 6px; } .client-marquee { position: relative; isolation: isolate; min-width: 0; overflow: hidden; padding-block: 0.5rem; margin-block: -0.5rem; } .client-row.is-marquee { width: max-content; overflow: visible; animation: client-drift 30s linear infinite; animation-play-state: paused; } .client-marquee:nth-child(2) .client-row.is-marquee { animation-direction: reverse; } .client-rows.is-in-view .client-row.is-marquee { animation-play-state: running; } .client-rows:is(:hover, :focus-within) .client-row.is-marquee { animation-play-state: paused; } @keyframes client-drift { to { transform: translateX(calc(-50% - 12px)); } } /* Founder composition and signature offsets stay in founder.css. */ body .founder .founder-copy > .eyebrow { color: var(--beige); font: 500 clamp(.875rem, 1.111111vw, 1.2rem)/1.125 'Helixa', sans-serif; letter-spacing: .08em; } body .founder .founder-copy > p:not(.eyebrow) { max-width: min(100%, 32.9375rem); color: var(--grey); font: 400 clamp(1rem, 1.388889vw, 1.5rem)/1.5 'Helixa', sans-serif; font-optical-sizing: none; font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100; font-synthesis: none; letter-spacing: 0; margin: 0 0 1.5em; } body .founder .founder-copy h2 { font-size: min(var(--section-heading), 12.56cqi); } body .founder .founder-photo { --reveal-travel: 12px; --motion-reveal: 700ms; } body .contact-panel { padding: clamp(4rem, 8.333333vw, 9rem) max(1.5rem, calc(var(--section-gutter) - 1rem)) 2rem; min-height: 0; color: var(--black); } .contact-panel .contact-top { grid-template-columns: 51.916667% minmax(0, 1fr); gap: 0; align-items: start; } .contact-panel .contact-top > div { container-type: inline-size; min-width: 0; --contact-type-scale: clamp(1.875rem, 10cqi, 6rem); } .contact-panel .contact-top h2 { max-width: 100%; margin: 0; font-family: Arturm, sans-serif; font-size: var(--contact-type-scale); line-height: 1.142857; font-weight: 500; letter-spacing: 0; font-synthesis: none; color: var(--black); opacity: .96; } .contact-panel .contact-top p { max-width: 79.821429%; margin: max(1rem, calc(var(--contact-type-scale) * .321429)) 0 max(1.25rem, calc(var(--contact-type-scale) * .428571)); font-family: 'Helixa', sans-serif; font-size: max(1rem, calc(var(--contact-type-scale) * .321429)); line-height: 1.5; font-weight: 350; font-synthesis: none; } .contact-panel .button { margin: 0; padding: 1.428571em 2em; border-radius: .857143em; font: 600 max(.8125rem, calc(var(--contact-type-scale) * .25))/1.714286 'Helixa', sans-serif; letter-spacing: .02em; color: var(--black); } /* Shared label weight for filled CTAs and text-style buttons. */ body .button, body .line-link, body .founder .founder-copy .line-link { font-weight: 600; font-synthesis: none; } .contact-panel .footer-wordmark { margin: clamp(4rem, 6.944444vw, 6.25rem) 0 2.9375rem; } .contact-panel .footer-bottom { display: grid; grid-template-columns: auto auto 1fr; gap: 1.5em; align-items: baseline; border-top: 1px solid var(--black); padding-top: 3rem; padding-bottom: 3rem; font: 400 clamp(.875rem, calc(.5rem + .5vw), 1.375rem)/1.5 'Helixa', sans-serif; } .contact-panel .footer-bottom > a, .contact-panel .footer-bottom nav { font-weight: 500; } /* Move only the label; the link hit area stays still to prevent hover flicker. */ .contact-panel .footer-bottom a { display: inline-block; text-decoration: none; } .contact-panel .footer-bottom a:hover { text-decoration: none; } .contact-panel .footer-bottom a > span { display: inline-block; pointer-events: none; translate: 0 0; transition: translate 350ms cubic-bezier(.25, .1, .25, 1); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .contact-panel .footer-bottom a:hover > span { translate: 0 -.07em; } } @media (prefers-reduced-motion: reduce) { .contact-panel .footer-bottom a > span { transition: none; } } .contact-panel .footer-bottom nav { justify-self: end; justify-content: flex-end; flex-wrap: wrap; gap: .75em 1.5em; font-size: inherit; } @media (max-width: 1100px) { .contact-panel .footer-bottom { grid-template-columns: 1fr auto; } .contact-panel .footer-bottom nav { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; } } @media (max-width: 760px) { .contact-panel .contact-top { grid-template-columns: 1fr; gap: 2.5rem; } .contact-panel .contact-top p { max-width: 100%; } .contact-panel .contact-mark { width: 80px; height: 80px; } .contact-panel .footer-bottom { grid-template-columns: 1fr; gap: 1rem; padding-top: 2rem; } } /* Progressive enhancement: visible by default, armed only after observer setup. */ body .page-section.reveal, body .page-section .reveal, body .philosophy.reveal, body .contact-panel .reveal { opacity: 1; transform: none; } .page-section [data-reveal], .philosophy [data-reveal], .philosophy[data-reveal], .contact-panel [data-reveal], .page-section[data-reveal] { transition: opacity var(--motion-reveal, 800ms) var(--motion-ease), transform var(--motion-reveal, 800ms) var(--motion-ease); } .stats article[data-reveal], .why-grid article[data-reveal] { transition: background-color 480ms var(--motion-ease), opacity var(--motion-reveal, 800ms) var(--motion-ease), transform var(--motion-reveal, 800ms) var(--motion-ease); } body .reveal-pending:not(.is-visible) { opacity: 0; transform: translateY(var(--reveal-travel, 20px)); } body .philosophy[data-reveal] { transition: opacity 950ms var(--motion-ease), transform 950ms var(--motion-ease); transform-origin: center bottom; } body .philosophy.reveal-pending:not(.is-visible) { opacity: 0; transform: translateY(32px) scale(.99); } /* Override the legacy visible .reveal rule for entire card surfaces. */ body :is(.stats article, .why-grid article, .work-item, .client-marquee, .quote-track).reveal-pending:not(.is-visible) { opacity: 0; transform: translateY(32px) scale(.985); } body :is(.stats article, .why-grid article, .work-item, .client-marquee, .quote-track)[data-reveal] { transform-origin: center bottom; transition-duration: 900ms; transition-timing-function: var(--motion-ease); } .service-row { --motion-reveal: 900ms; } .service-row h3, .service-row p, .service-row .service-number, .service-row .service-icon-frame { transition: opacity 900ms var(--motion-ease), transform 900ms var(--motion-ease); } .service-row.reveal-pending:not(.is-visible) { opacity: 1; transform: none; border-bottom-color: transparent; } .service-row.reveal-pending:not(.is-visible) :is(h3, p, .service-number) { opacity: 0; transform: translate(-12px, 12px); } .service-row.reveal-pending:not(.is-visible) .service-icon-frame { opacity: 0; transform: translateX(24px) scale(.98); } .service-row.is-visible h3 { transition-delay: 70ms; } .service-row.is-visible p { transition-delay: 140ms; } .service-row.is-visible .service-icon-frame { transition-delay: 210ms; } /* Quiet, one-time entrances; no scroll hijacking or changes to layout. */ .page-section h2[data-reveal] { --reveal-travel: 24px; --motion-reveal: 950ms; } .page-section .eyebrow[data-reveal] { --reveal-travel: 10px; --motion-reveal: 650ms; } .client-marquee[data-reveal], .quote-track[data-reveal] { --reveal-travel: 16px; --motion-reveal: 900ms; } .why-grid .why-copy, .why-grid .why-art { transition: opacity 850ms var(--motion-ease), translate 850ms var(--motion-ease); } .why-grid article.reveal-pending:not(.is-visible) .why-copy { opacity: 0; translate: 0 12px; } .why-grid article.reveal-pending:not(.is-visible) .why-art { opacity: 0; translate: 0 16px; } .why-grid article.is-visible .why-copy { transition-delay: 80ms; } .why-grid article.is-visible .why-art { transition-delay: 140ms; } .work-item .project-media { transition: scale 1100ms var(--motion-ease), background-color 480ms var(--motion-ease); } .work-item.reveal-pending:not(.is-visible) .project-media { scale: 1.025; } .motion-line { display: block; overflow: hidden; } .motion-line > span { display: block; transition: transform 820ms var(--motion-ease), opacity 820ms var(--motion-ease); } .reveal-pending:not(.is-visible) .motion-line > span { transform: translateY(100%); opacity: 0; } .is-visible .motion-line:nth-child(2) > span { transition-delay: 70ms; } .is-visible .motion-line:nth-child(3) > span { transition-delay: 140ms; } .is-visible .motion-line:nth-child(4) > span { transition-delay: 210ms; } .is-visible .motion-line:nth-child(n+5) > span { transition-delay: 280ms; } [data-reveal-step="1"].is-visible { transition-delay: 70ms; } [data-reveal-step="2"].is-visible { transition-delay: 140ms; } [data-reveal-step="3"].is-visible { transition-delay: 210ms; } [data-reveal-step="4"].is-visible { transition-delay: 280ms; } /* Resting cards use the same gentle easing on hover-in and hover-out. Keep translate in the transition list so reveal rules cannot make it jump. */ @media (prefers-reduced-motion: no-preference) { body .stats article.is-visible, body .why-grid article.is-visible, .clients .client-row > li, .testimonials .quote-card, .work-item .project { transition: background-color var(--card-hover-duration) var(--card-hover-ease), translate var(--card-hover-duration) var(--card-hover-ease), box-shadow var(--card-hover-duration) var(--card-hover-ease), opacity 900ms var(--motion-ease), transform 900ms var(--motion-ease); } body .stats article.is-visible, body .why-grid article.is-visible { transition-delay: 0s; } .testimonials .quote-card > :is(blockquote, figcaption) { transition: opacity var(--card-hover-duration) var(--card-hover-ease); } .work-item .project-media { transition: scale 1100ms var(--motion-ease), background-color var(--card-hover-duration) var(--card-hover-ease); } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { body .why-grid article.is-visible { translate: 0 0; transition: background-color 450ms var(--card-hover-ease), translate 450ms cubic-bezier(.32, 0, .24, 1), opacity 900ms var(--motion-ease), transform 900ms var(--motion-ease); transition-delay: 0s; } body .why-grid article.is-visible:hover { translate: 0 -4px; transition-duration: 650ms, 800ms, 900ms, 900ms; transition-timing-function: var(--card-hover-ease), cubic-bezier(.22, .61, .36, 1), var(--motion-ease), var(--motion-ease); } } body [data-masked].reveal-pending:not(.is-visible) { opacity: 1; transform: none; } @media (min-width: 761px) and (max-width: 1100px) { :where(.page-section, .hero-statement, .philosophy, .contact-panel) { --section-gutter: clamp(3rem, 6vw, 4rem); } .stats article { grid-template-columns: 1fr; gap: 1.25rem; } .services-section .service-row { grid-template-columns: 6.583333% minmax(0, 1fr) 12% 4%; min-height: 160px; } .why-grid article { grid-template-columns: minmax(0, 1fr); } .why-art { width: 34.013605%; } .founder.page-section { gap: 2.5rem; } } @media (max-width: 760px) { :where(.page-section, .hero-statement, .philosophy, .contact-panel) { --section-gutter: clamp(1.25rem, 5.56vw, 1.5rem); --section-space: 5.5rem; } body .studio-section h2 { text-indent: 0; } .studio-break { display: none; } .stats article { grid-template-columns: minmax(112px, .9fr) minmax(0, 1.1fr); gap: 1rem; min-height: 144px; padding: 1.5rem; } .work-showcase .projects { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; } .work-showcase .work-item { grid-column: 1; grid-row: auto; } .work-showcase .project { min-height: 0; border-radius: 20px; } .work-showcase .work-caption { margin-top: 1.25rem; } .studio-section .studio-bottom { gap: 1.5rem; } .services-section .service-row { grid-template-columns: 24px minmax(0, 1fr) 64px; gap: 1rem; min-height: 0; padding-block: 1.75rem; } .service-row .service-number { margin: 0.4375rem 0 0; } .service-row .service-icon-frame { align-self: start; } .services-section .service-row h3 { font-size: clamp(1.625rem, 6vw, 2.25rem); } .services-section .service-row p { grid-column: 2 / -1; margin: 0; } body .philosophy { padding: 4rem 1.5rem; } body .philosophy h2 { max-width: 100%; margin-block: 2rem 3rem; } .philosophy-break { display: none; } .why-grid article { grid-template-columns: minmax(0, 1fr); min-height: 300px; padding: 1.75rem; } .why-grid .eyebrow { margin-bottom: 1.5rem; } .why-grid h3 { font-size: min(1.75rem, 7cqi); } .why-grid p:not(.eyebrow) { max-width: 36ch; } .why-art { position: relative; top: auto; right: auto; width: 112px; grid-column: 1; grid-row: 3; justify-self: end; margin-top: 1rem; } .testimonials .quote-track { --card-width: calc(100vw - 2 * var(--section-gutter)); gap: calc(2 * var(--section-gutter)); } .testimonials .quote-card { padding: 1.75rem; min-height: 480px; gap: 2rem; } .testimonials .quote-card blockquote { max-width: 100%; font-size: clamp(1.5rem, 6vw, 1.875rem); } .testimonials .quote-controls { margin-bottom: 3.5rem; } .client-rows { margin-top: 3rem; gap: 1rem; } .client-row { gap: 1rem; } @keyframes client-drift { to { transform: translateX(calc(-50% - 8px)); } } body .founder .founder-copy h2 { white-space: normal; } } @media (prefers-reduced-motion: reduce) { body .philosophy.reveal-pending:not(.is-visible) { opacity: 1; transform: none; } body :is(.stats article, .why-grid article, .work-item, .client-marquee, .quote-track).reveal-pending:not(.is-visible) { opacity: 1; transform: none; } .service-row :is(h3, p, .service-number, .service-icon-frame) { transition: none !important; transform: none !important; } [data-reveal], .why-grid .why-copy, .why-grid .why-art, .work-item .project-media, .motion-line > span { transition: none !important; translate: none !important; scale: none !important; } .why-grid article .why-copy, .why-grid article .why-art { opacity: 1 !important; } .client-row.is-marquee { animation: none; width: auto; overflow-x: auto; } .client-row [data-marquee-copy] { display: none; } body .reveal-pending:not(.is-visible), body .reveal-pending:not(.is-visible) :is(h3, p, .service-icon-frame), .reveal-pending:not(.is-visible) .motion-line > span { opacity: 1; transform: none; } .project:hover .project-media img, .why-grid article.is-visible:hover { transform: none; } } /* Mobile adaptation of the desktop art direction. Desktop rules stay untouched. */ @media (max-width: 760px) { :where(.page-section, .philosophy, .contact-panel) { --section-gutter: clamp(1.25rem, 5vw, 2rem); --section-space: clamp(4rem, 16vw, 6rem); --section-heading: clamp(2rem, 8.5vw, 3.5rem); --eyebrow-size: .8125rem; } .site-header { padding: 1rem 1.25rem; gap: .5rem; } .site-nav { gap: .5rem; } .site-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .875rem; } .hero { --mobile-hero-unit: min(1vw, 4.02px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(24.8756 * var(--mobile-hero-unit)) calc(54.7264 * var(--mobile-hero-unit)) calc(24.8756 * var(--mobile-hero-unit)) auto auto auto; gap: 0; height: auto; min-height: 100svh; padding: calc(36.3184 * var(--mobile-hero-unit)) 8.955224% 3.75rem; background: linear-gradient(#252220, #201E1C); } .hero h1 span, .hero h1 span:last-child { position: relative; inset: auto; grid-column: 1; align-self: start; font-size: calc(22.38806 * var(--mobile-hero-unit)); line-height: 1.111111; } .hero h1 span:first-child { grid-row: 1; justify-self: start; } .hero h1 span:last-child { grid-row: 3; justify-self: end; } .hero .hero-model { grid-row: 2; width: calc(74.626866 * var(--mobile-hero-unit)); height: calc(74.626866 * var(--mobile-hero-unit)); max-width: none; margin-top: calc(-7.462687 * var(--mobile-hero-unit)); align-self: start; } .hero .hero-eyebrow { grid-row: 4; margin: calc(16.41791 * var(--mobile-hero-unit)) 0 0; font-size: .875rem; line-height: 1.285714; font-weight: 500; } .hero .hero-intro { grid-row: 5; margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.444444; } .hero .hero-details .button { grid-row: 6; width: 100%; margin-top: 2.25rem; min-height: 3.75rem; padding: 1rem 1.75rem; } .hero .scroll-cue { display: none; } .hero-intro { font-size: clamp(1rem, 4.6vw, 1.25rem); } .hero-details .button { min-height: 2.75rem; } body .studio-section #studio-title { font-size: clamp(2rem, 7.5vw, 3.5rem); line-height: 1.18; text-indent: 0; } #studio-title .studio-line { display: inline; white-space: normal; } #studio-title .studio-break { display: none; } body .studio-section.page-section { padding-bottom: 2.5rem; } .stats article { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-height: 9rem; padding: 1.5rem; gap: 1rem; } .stats strong { font-size: clamp(2.5rem, 10vw, 3.5rem); letter-spacing: 0; } .stats span { font-size: 1rem; line-height: 1.5; } .page-section .center-heading { max-width: 100%; } .center-heading h2 br { display: none; } .work-showcase .projects { margin-top: 2.5rem; } .services-section .center-heading h2 { font-size: var(--section-heading); } .services-section .service-list { margin-top: 2.5rem; } .services-section .service-row { grid-template-columns: 1.75rem minmax(0, 1fr); gap: .875rem; padding-block: 2rem; } .services-section .service-row .service-number { grid-column: 1; grid-row: 1; margin: .4em 0 0; font-size: 1rem; } .services-section .service-row h3 { grid-column: 2; grid-row: 1; font-size: clamp(1.625rem, 6.8vw, 2.5rem); } .services-section .service-row p { grid-column: 2; grid-row: 2; font-size: .9375rem; line-height: 1.65; white-space: normal; } .services-section .service-row .service-icon-frame { grid-column: 2; grid-row: 3; width: clamp(5rem, 24vw, 7rem); justify-self: end; margin-top: .5rem; } body .philosophy { width: auto; margin-inline: var(--section-gutter); padding: clamp(2rem, 8vw, 3rem) 1.5rem; } body .philosophy h2 { font-size: clamp(1.875rem, 7.2vw, 3rem); line-height: 1.2; letter-spacing: 0; margin-block: 1.5rem 2rem; } body .philosophy-note { font-size: clamp(1rem, 4.2vw, 1.25rem); line-height: 1.5; } .why-grid article { grid-template-rows: auto auto auto; padding: 1.5rem; min-height: 0; } .page-section .why-grid .eyebrow { font-size: .8125rem; margin-bottom: 1.75rem; } .why-grid h3 { font-size: clamp(1.5rem, 6.4vw, 2rem); white-space: normal; margin-bottom: .875rem; } .why-grid p:not(.eyebrow) { font-size: 1rem; line-height: 1.65; } .why-art { width: clamp(7rem, 32vw, 10rem); margin-top: 1.25rem; } .testimonials .quote-card { padding: 1.5rem; min-height: 28rem; gap: 2.5rem; } .testimonials .quote-card blockquote { font-size: clamp(1.25rem, 5.5vw, 1.75rem); line-height: 1.4; } .testimonials .quote-card figcaption { gap: .75rem; min-width: 0; } .testimonials .quote-card figcaption img { width: 2.75rem; height: 2.75rem; flex-shrink: 0; } .testimonials .quote-card figcaption span { font-size: 1rem; } .testimonials .quote-card figcaption small { font-size: .8125rem; line-height: 1.5; } .client-row li { width: clamp(11rem, 60vw, 17rem); } .founder.page-section { width: auto; margin-inline: var(--section-gutter); } .founder .founder-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.65; } .founder .founder-copy .line-link { margin-top: 2rem; min-height: 2.75rem; } .founder .founder-photo figcaption { width: 60%; } body .contact-panel { margin-inline: .5rem; padding: 3rem 1.25rem 1.5rem; } .contact-panel .contact-top h2 { font-size: clamp(1.875rem, 10cqi, 4rem); } .contact-panel .contact-top p { max-width: 100%; font-size: clamp(1rem, 3.214286cqi, 1.25rem); } .contact-panel .button { max-width: 100%; min-height: 2.75rem; } .contact-panel .footer-wordmark { margin-block: 3.5rem 2rem; } .contact-panel .footer-bottom { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: 1.5rem 1rem; gap: .5em; font-size: clamp(.6875rem, 2.8vw, .875rem); white-space: nowrap; } .contact-panel .footer-bottom nav { display: none; } .contact-panel .footer-bottom a { min-height: 2.75rem; display: inline-flex; align-items: center; } } .mobile-menu-toggle { display: none; } @media (min-width: 761px) { .hero .hero-details { bottom: calc(10% + 4svh + var(--beyond-ink-inset, 0px)); } } .mobile-menu { margin: 0; border: 0; padding: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; overflow-y: auto; background: linear-gradient(#252220, #201E1C); color: #fff; } .mobile-menu::backdrop { background: #201E1C; } .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.5rem 0 1.875rem; } .mobile-menu-header > a img { width: 6.0625rem; height: 1.25rem; display: block; } .mobile-menu-close, .mobile-menu-toggle { border: 0; padding: .375rem; background: none; color: #fff; width: 2.75rem; height: 2.75rem; cursor: pointer; } .mobile-menu-close img, .mobile-menu-toggle img { display: block; width: 2rem; height: 2rem; } .menu-icon { display: block; position: relative; width: 2rem; height: 2rem; } .menu-icon-line { position: absolute; inset: 0; transition: transform 420ms cubic-bezier(.22, .61, .36, 1); } .menu-icon-line:first-child { clip-path: inset(0 0 50% 0); transform-origin: 50% 37.5%; } .menu-icon-line:last-child { clip-path: inset(50% 0 0 0); transform-origin: 50% 59.375%; } .is-expanded .menu-icon-line:first-child { transform: translateY(.21875rem) rotate(45deg); } .is-expanded .menu-icon-line:last-child { transform: translateY(-.21875rem) rotate(-45deg); } .mobile-menu-primary a, .mobile-menu-social a { opacity: 0; translate: 0 .75rem; transition: opacity 380ms ease, translate 500ms cubic-bezier(.22, .61, .36, 1); } .mobile-menu.is-expanded nav a { opacity: 1; translate: 0 0; } .mobile-menu.is-expanded nav a:nth-child(2) { transition-delay: 40ms; } .mobile-menu.is-expanded nav a:nth-child(3) { transition-delay: 80ms; } .mobile-menu.is-expanded nav a:nth-child(4) { transition-delay: 120ms; } .mobile-menu-primary { display: grid; gap: 2rem; padding: clamp(4rem, 15.3dvh, 8.375rem) 3.5rem 0; } .mobile-menu-primary a { font: 500 clamp(2.5rem, 11.94vw, 3rem)/1.166667 Arturm, sans-serif; letter-spacing: .04em; } .mobile-menu a { color: inherit; text-decoration: none; } .mobile-menu-social { display: grid; padding: clamp(3rem, 12.8dvh, 7rem) 3.75rem max(3rem, env(safe-area-inset-bottom)); } .mobile-menu-social a { display: flex; align-items: center; min-height: 2.75rem; font-size: 1.125rem; line-height: 1.333333; font-weight: 400; } .mobile-menu[open] { animation: menu-enter 300ms ease-out; } @keyframes menu-enter { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 760px) { .menu-ready .site-header { flex-wrap: nowrap; padding: 1.125rem 1.5rem 0 1.875rem; } .menu-ready .site-header .wordmark, .menu-ready .site-header .wordmark img { width: 6.0625rem; height: 1.25rem; } .menu-ready .site-header .site-nav { display: none; } .mobile-menu-toggle { display: block; margin-left: auto; } } @media (prefers-reduced-motion: reduce) { .mobile-menu[open] { animation: none; } .menu-icon-line, .mobile-menu nav a { transition: none; } } /* Figma: 1200-wide section, 200-high desktop rows, separate capability column. */ body .services-section .service-row { grid-template-columns: 4.916667cqi minmax(0, 1fr) 24.583333cqi 10cqi; grid-template-rows: auto auto; padding: 2.833333cqi 6cqi 2.833333cqi 2cqi; min-height: 15.666667cqi; gap: 1cqi 0; align-content: center; align-items: center; } body .services-section .service-row h3 { align-self: end; letter-spacing: 0; } body .services-section .service-row .service-number { margin: 1cqi 0 0; line-height: .9; } body .services-section .service-row .service-summary { grid-column: 2; grid-row: 2; align-self: start; margin: 0; padding-right: 1em; font-size: clamp(.9375rem, 1.5cqi, 1.35rem); line-height: 1.333333; white-space: normal; } body .services-section .service-row .service-capabilities { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0 1em; list-style: none; color: #fff; font: 400 clamp(.875rem, 1.333333cqi, 1.2rem)/1.75 'Helixa', sans-serif; font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100; font-synthesis: none; letter-spacing: 0; transition: color 360ms ease, opacity 900ms var(--motion-ease), transform 900ms var(--motion-ease); } .service-capabilities li { position: relative; } .service-capabilities li::before { content: ''; position: absolute; width: .25em; height: .25em; left: -1em; top: .75em; background: url('/immutable/df0e5b234e9aaec9/assets/services/bullet-normal.svg') center / contain no-repeat; } body .services-section .service-row .service-icon-frame { position: relative; grid-column: 4; grid-row: 1 / 3; width: 100%; right: auto; top: auto; translate: none; margin: 0; align-self: center; } body .service-icon-frame--product-design img { width: 153.333333%; height: 153.333333%; left: -26.666667%; top: -26.666667%; } @media (hover: hover) { body .services-section .service-row:hover .service-capabilities li::before { background-image: url('/immutable/4e3113bc9872023e/assets/services/bullet-hover.svg'); } body .services-section .service-row:hover .service-capabilities { color: var(--dark-brown); } body .services-section .service-row:hover .service-number { opacity: 1; } } body .services-section .service-row:focus-within .service-capabilities { color: var(--dark-brown); } body .services-section .service-row:focus-within .service-capabilities li::before { background-image: url('/immutable/4e3113bc9872023e/assets/services/bullet-hover.svg'); } body .services-section .service-row:focus-within .service-number { opacity: 1; } body .services-section .service-row.reveal-pending:not(.is-visible) .service-capabilities { opacity: 0; transform: translate(-.75em, .75em); } @media (min-width: 761px) { body .services-section .service-row { grid-template-rows: 4.666667cqi 2cqi; padding-block: 4.5cqi; } body .services-section .service-row .service-number { align-self: start; margin-top: 1cqi; } body .services-section .service-row .service-icon-frame { height: 10cqi; } } @media (max-width: 760px) { body .services-section .service-row { grid-template-columns: 1.75rem minmax(0, 1fr) 5rem; grid-template-rows: auto auto auto; gap: .875rem .75rem; padding: 2rem 1rem; min-height: 0; } body .services-section .service-row .service-number { margin: .6em 0 0; font-size: 1rem; } body .services-section .service-row h3 { grid-column: 2 / -1; font-size: clamp(1.625rem, 6.8vw, 2.5rem); } body .services-section .service-row .service-summary { grid-column: 2 / -1; padding: 0; } body .services-section .service-row .service-capabilities { grid-column: 2; grid-row: 3; font-size: .875rem; margin-top: .75rem; } body .services-section .service-row .service-icon-frame { grid-column: 3; grid-row: 3; width: 100%; } } @media (min-width: 1101px) { /* Figma: 48px above the title, 16px to its description, 200px per row. Keep spanning content in the grid so it remains responsive. */ body .services-section .service-row { row-gap: 1.333333cqi; padding-top: 4cqi; padding-bottom: calc(4.666667cqi - 0.0625rem); min-height: 16.666667cqi; } body .services-section .service-row .service-capabilities, body .services-section .service-row .service-icon-frame { margin-top: .666667cqi; } body .services-section .service-list { margin-top: 6.666667cqi; } } @media (prefers-reduced-motion: reduce) { body .services-section .service-row .service-capabilities { transition: none; transform: none !important; opacity: 1 !important; } } /* Figma desktop proportions, with flexible rows when summaries wrap. */ body .services-section .center-heading h2 { line-height: 1.166667; letter-spacing: .02em; font-weight: 500; } body .services-section .center-heading .eyebrow { margin-bottom: 1.5rem; } @media (min-width: 761px) { body .services-section .service-row { grid-template-rows: auto auto; min-height: 16.666667cqi; padding-block: 3.333333cqi; row-gap: 1.333333cqi; } body .services-section .service-row h3 { font-size: clamp(1.75rem,4cqi,3.6rem); line-height: 1.166667; } body .services-section .service-row .service-capabilities, body .services-section .service-row .service-icon-frame { margin-top: 0; } } @media (min-width: 761px) and (max-width: 1100px) { body .services-section .service-row { grid-template-columns: 40px minmax(0,1fr) minmax(160px,25%) 80px; padding: 2rem 1rem; } body .services-section .service-row .service-icon-frame { height: 80px; } } /* Responsive corrections after the shared desktop presentation layers. */ /* Short, low-travel mobile entrances; native scrolling remains untouched. */ @media (max-width: 760px) and (prefers-reduced-motion: no-preference) { body [data-reveal] { --motion-ease: cubic-bezier(.22, .61, .36, 1); --reveal-travel: .875rem; --motion-reveal: 650ms; } body :is(.stats article, .why-grid article, .work-item, .client-marquee, .quote-track, .philosophy).reveal-pending:not(.is-visible) { transform: translateY(1rem); } body :is(.stats article, .why-grid article, .work-item, .client-marquee, .quote-track, .philosophy)[data-reveal] { transition-duration: 650ms; } body [data-reveal-step].is-visible { transition-delay: 0ms; } body .why-grid article .why-art { transition: opacity 550ms ease, translate 650ms cubic-bezier(.22, .61, .36, 1); transition-delay: 0ms; } body .why-grid article .why-copy { transition: opacity 550ms ease, translate 650ms cubic-bezier(.22, .61, .36, 1); transition-delay: 60ms; } body .why-grid article.reveal-pending:not(.is-visible) :is(.why-copy, .why-art) { translate: 0 .5rem; } body .services-section .service-row.reveal-pending:not(.is-visible) :is(h3, p, .service-number, .service-capabilities, .service-icon-frame) { transform: translateY(.625rem); } body .services-section .service-row :is(h3, p, .service-number, .service-capabilities, .service-icon-frame) { transition-duration: 650ms; transition-delay: 0ms; } body .motion-line > span { transition-duration: 650ms; transition-timing-function: cubic-bezier(.22, .61, .36, 1); } body .reveal-pending:not(.is-visible) .motion-line > span { transform: translateY(65%); } body .button, body .quote-controls button { transition: scale 240ms cubic-bezier(.22, .61, .36, 1), background-color 300ms ease; } body .button:active, body .quote-controls button:active:not(:disabled) { scale: .97; transition-duration: 110ms; } } /* Hide real elements too: mobile hero wrappers use display: contents. */ html.intro-pending .site-header, html.intro-pending main > :not(.hero-scroll), html.intro-pending .hero-copy, html.intro-pending .hero-copy *, html.intro-pending .scroll-cue { visibility: hidden !important; pointer-events: none !important; } @media (max-width: 760px) { body .hero h1 > span { inset: auto !important; position: relative; width: max-content; max-width: 100%; transform: none !important; } body .hero { --mobile-hero-unit: min(1vw, .25125rem); padding-top: calc(21.890547 * var(--mobile-hero-unit)); grid-template-rows: calc(78.606965 * var(--mobile-hero-unit)) repeat(2, calc(22.38806 * var(--mobile-hero-unit))) auto auto auto; } body .hero .hero-model { grid-row: 1; margin-top: 0; width: calc(74.626866 * var(--mobile-hero-unit)); height: calc(74.626866 * var(--mobile-hero-unit)); } body .hero h1 > span { line-height: 1; } body .hero h1 > span:first-child { grid-row: 2; justify-self: start; } body .hero h1 > span:last-child { grid-row: 3; justify-self: start; } body .hero .hero-eyebrow { margin-top: calc(11.940299 * var(--mobile-hero-unit)); } body .hero .hero-intro { font-weight: 400; } body .page-section :is(.center-heading, .clients-heading) { text-align: left; margin-inline: 0; } body :is(.page-section, .philosophy, .contact-panel) h2 { text-align: left; } body .stats article { padding: 1.125rem; min-height: 7rem; gap: .875rem; } body .why-grid article { grid-template-rows: auto auto auto; } body .why-grid article .why-art { grid-column: 1; grid-row: 1; justify-self: start; margin: 0 0 1.25rem; position: relative; inset: auto; } body .why-grid article > .eyebrow { grid-column: 1; grid-row: 2; margin: 0 0 1rem; } body .why-grid article .why-copy { grid-column: 1; grid-row: 3; } body .page-section:not(.founder) { width: auto; } body .stats strong { font-size: clamp(2.5rem, 10vw, 3.5rem); } body .stats span { font-size: 1rem; line-height: 1.5; } body .work-showcase .work-caption { font-size: clamp(1.125rem, 4.5vw, 1.5rem); } body .why-grid h3 { font-size: clamp(1.5rem, 6.4vw, 2rem); white-space: normal; } body .why-grid p:not(.eyebrow) { font-size: 1rem; line-height: 1.5; } body .testimonials .quote-controls { margin: 1.75rem auto 1.75rem 0; width: 6rem; height: 3rem; } body .testimonials .quote-controls button { width: 3rem; height: 3rem; } body .testimonials .quote-controls button img { position: static; width: 1.25rem; height: 1.25rem; } body .testimonials .quote-card { padding-top: 2.25rem; padding-bottom: 3rem; } body .testimonials .quote-card blockquote { max-width: 100%; font-size: clamp(1.375rem, 6vw, 1.875rem); line-height: 1.35; } body .testimonials .quote-card figcaption span { font-size: 1rem; } body .testimonials .quote-card figcaption small { font-size: .8125rem; } body .founder .founder-copy { padding-block: 0; } body .founder .founder-copy .line-link { min-height: 2.75rem; padding-block: .75rem .5rem; align-items: end; } body .founder .founder-photo { width: 82%; max-width: 18.5rem; justify-self: center; } body .founder .founder-photo figcaption { width: 68%; right: 0; } body .founder .founder-signature { width: 7.5rem; height: 4.5rem; margin-bottom: .375rem; } body .founder .founder-signature img { width: 6.25rem; height: 3.646625rem; left: -.46875rem; top: .533rem; } body .founder .founder-photo figcaption > span { font-size: .9375rem; line-height: 1.4; letter-spacing: 0; } body .founder .founder-photo figcaption > small { font-size: .6875rem; line-height: 1.45; margin-top: .25rem; } body .clients .client-row > li { width: clamp(8.8rem, 48vw, 13.6rem); } body .founder .founder-copy h2 { font-size: clamp(2rem, 8.5vw, 3.5rem); } body .founder .founder-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.5; } body .contact-panel .contact-top { grid-template-columns: minmax(0, 1fr); gap: 2rem; } body .contact-panel .contact-top > div { min-width: 0; } body .contact-panel .contact-top p { max-width: 100%; font-size: 1rem; } body .contact-panel .footer-bottom { grid-template-columns: minmax(0, 1fr) auto; } body .contact-panel { padding: 2rem 1.25rem 1rem; border-radius: 1.5rem; } body .contact-panel .contact-mark { width: 3rem; height: 3rem; } body .contact-panel .contact-top { gap: 1.75rem; } body .contact-panel .contact-top h2 { font-size: clamp(1.875rem, 8.5vw, 3rem); line-height: 1.12; } body .contact-panel .contact-top p { margin: 1.25rem 0 1.5rem; line-height: 1.5; } body .contact-panel .button { width: 100%; justify-content: space-between; padding: 1rem 1.25rem; min-height: 3.5rem; } body .contact-panel .footer-wordmark { margin: 2.5rem 0 1.5rem; } body .contact-panel .footer-bottom { padding-block: .75rem 0; gap: .5rem; font-size: clamp(.625rem, 2.65vw, .8125rem); } .hero .hero-intro { max-width: 100%; } .mobile-menu-primary, .mobile-menu-social { padding-inline: clamp(1.875rem, 9vw, 3.75rem); } } @media (max-width: 360px) { body .stats article { grid-template-columns: minmax(0, 1fr); gap: .75rem; } body .services-section .service-row { grid-template-columns: 1.5rem minmax(0, 1fr) 3.5rem; padding-inline: .5rem; column-gap: .5rem; } body .services-section .service-row .service-capabilities { padding-right: 0; font-size: .8125rem; } } @media (min-width: 761px) and (max-width: 1100px) { /* Give wrapping service descriptions their own intrinsic-height row. */ body .services-section .service-row { grid-template-columns: 3rem minmax(0, 1fr) 5rem; grid-template-rows: auto auto auto; gap: 1rem; padding: 2rem 1rem; } body .services-section .service-row h3 { grid-column: 2; font-size: clamp(1.75rem, 3.4vw, 2.5rem); } body .services-section .service-row .service-summary { grid-column: 2; grid-row: 2; padding: 0; } body .services-section .service-row .service-capabilities { grid-column: 2; grid-row: 3; columns: 2; font-size: .9375rem; } body .services-section .service-row .service-icon-frame { grid-column: 3; grid-row: 1 / 3; width: 5rem; height: 5rem; } body .services-section .service-row .service-number { margin-top: .5rem; } body .studio-section #studio-title { text-indent: 0; } body .studio-section #studio-title .studio-line { white-space: normal; } body .studio-section #studio-title .studio-break { display: none; } body .founder.page-section { width: 88%; gap: 4vw; } body .founder.page-section .founder-copy h2 { white-space: normal; } } @media (max-height: 650px) and (max-width: 760px) { .mobile-menu-primary { padding-top: 2rem; gap: 1rem; } .mobile-menu-social { padding-top: 2rem; } } /* Figma Home 119:2367 — centered desktop navigation. */ .site-header { position: fixed; padding: 3rem; flex-wrap: nowrap; } .site-header .wordmark, .site-header .wordmark img { width: 145px; height: 30px; } .site-header .site-nav { position: absolute; left: 50%; top: 53px; transform: translateX(-50%); width: auto; gap: 3rem; font: 500 1.125rem/1.5rem Arturm, sans-serif; letter-spacing: 0.045rem; } .site-header .site-nav a { color: #fff; } #approach { scroll-margin-top: 6.875rem; } .site-header a:focus-visible, .mobile-menu a:focus-visible, .mobile-menu-toggle:focus-visible, .mobile-menu-close:focus-visible { outline: 2px solid #E9C79E; outline-offset: 6px; } @media (max-width: 1023px) { .menu-ready .site-header { padding: 1.5rem 1.875rem; } .menu-ready .site-header .site-nav { display: none; } .mobile-menu-toggle { display: block; margin-left: auto; } .mobile-menu-header { padding: 1.5rem 1.875rem 0; } .mobile-menu-header > a img { width: 145px; height: 30px; } html:not(.menu-ready) .site-header { flex-wrap: wrap; gap: 1.25rem; padding: 1.5rem; } html:not(.menu-ready) .site-header .site-nav { position: static; transform: none; flex-wrap: wrap; gap: 1.25rem; } } @media (max-width: 760px) { .menu-ready .site-header, .mobile-menu-header { padding: 1.125rem 1.5rem 0 1.875rem; } .menu-ready .site-header .wordmark, .menu-ready .site-header .wordmark img, .mobile-menu-header > a img { width: 97px; height: 20px; } } /* Figma 119:2377: outlined project action, aligned with the centered links. */ .project-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.75rem 1.125rem; border: 1px solid rgba(233,199,158,.75); border-radius: 12px; color: #fff; font: 500 1.125rem/1.5rem Arturm, sans-serif; letter-spacing: 0.045rem; text-decoration: none; white-space: nowrap; transition: background-color 180ms ease, border-color 180ms ease; } .project-cta img { display: block; width: 18px; height: 18px; flex: none; } .project-cta:hover { background: rgba(233,199,158,.08); border-color: #E9C79E; } .site-header > .project-cta { position: absolute; right: 38px; top: 40px; } .mobile-menu-action { padding: 2rem clamp(1.875rem, 9vw, 3.75rem) 0; } .mobile-menu-action + .mobile-menu-social { padding-top: 2rem; } @media (max-width: 1023px) { .site-header > .project-cta { display: none; } } @media (prefers-reduced-motion: reduce) { .project-cta { transition: none; } } /* Project action: restrained champagne fill and directional feedback. */ .project-cta { transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease; } .project-cta img { transition: transform 280ms cubic-bezier(.22,.61,.36,1), filter 280ms ease; } .project-cta:focus-visible { background: #E9C79E; border-color: #E9C79E; color: #201E1C; } .project-cta:focus-visible img { filter: brightness(0); transform: translateX(2px); } @media (hover: hover) { .project-cta:hover { background: #E9C79E; border-color: #E9C79E; color: #201E1C; } .project-cta:hover img { filter: brightness(0); transform: translateX(2px); } } .project-cta:active { background: #E9C79E; color: #201E1C; } .project-cta:active img { filter: brightness(0); } #work, #about, #services, #approach, #contact { scroll-margin-top: 6.875rem; } @media (max-width: 760px) { #work, #about, #services, #approach, #contact { scroll-margin-top: 4.75rem; } } @media (prefers-reduced-motion: reduce) { .project-cta, .project-cta img { transition: none; } .project-cta img { transform: none !important; } } /* Outlined at rest; beige fill on hover and keyboard focus. */ .project-cta, .mobile-menu .project-cta { background: transparent; border-color: rgba(233,199,158,.75); color: #fff; } .project-cta img { filter: none; } .project-cta:focus-visible, .mobile-menu .project-cta:focus-visible { background: #E9C79E; border-color: #E9C79E; color: #241810; } .project-cta:focus-visible img { filter: brightness(0) saturate(100%) invert(9%) sepia(23%) saturate(1018%) hue-rotate(341deg) brightness(94%) contrast(94%); } @media (hover: hover) { .project-cta:hover, .mobile-menu .project-cta:hover { background: #E9C79E; border-color: #E9C79E; color: #241810; } .project-cta:hover img { filter: brightness(0) saturate(100%) invert(9%) sepia(23%) saturate(1018%) hue-rotate(341deg) brightness(94%) contrast(94%); } } /* Gentle acceleration and a soft settle, with restrained arrow travel. */ .project-cta { transition: background-color 520ms cubic-bezier(.45,0,.2,1), border-color 520ms cubic-bezier(.45,0,.2,1), color 520ms cubic-bezier(.45,0,.2,1); } .project-cta img { transition: transform 520ms cubic-bezier(.45,0,.2,1), filter 520ms cubic-bezier(.45,0,.2,1); } @media (prefers-reduced-motion: reduce) { .project-cta, .project-cta img { transition: none; } } /* Figma header 120:629 and project button 120:625. */ .site-header .site-nav { font-family: 'Helixa', Arial, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5rem; letter-spacing: 0.04rem; text-transform: uppercase; } .project-cta, .mobile-menu .project-cta { box-sizing: border-box; height: 48px; gap: 0.75rem; padding: 0.75rem 1rem 0.75rem 1.125rem; border-radius: 12px; font: 600 0.9375rem/1.5rem 'Helixa', Arial, sans-serif; letter-spacing: 0.0375rem; text-transform: uppercase; } .project-cta img { width: 16px; height: 16px; } .mobile-menu-primary a { font-family: 'Helixa', Arial, sans-serif; font-weight: 500; text-transform: uppercase; } @media (min-width: 1024px) { .site-header { position: fixed; padding: 2.5rem 3rem; height: 128px; flex-wrap: nowrap; align-items: center; } .site-header .wordmark, .site-header .wordmark img { width: 145px; height: 30px; } .site-header .site-nav { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); width: auto; gap: 3rem; } .site-header > .project-cta { position: absolute; top: 40px; right: 48px; } } /* Compact navigation hierarchy with a prominent full-width mobile action. */ @media (max-width: 1023px) { .mobile-menu-primary { gap: 1.5rem; } .mobile-menu-primary a { font-size: clamp(1.625rem, 5vw, 2rem); line-height: 1.25; letter-spacing: .03em; } .mobile-menu-action { padding-top: 2.25rem; } .mobile-menu-action .project-cta { display: flex; width: 100%; min-height: 60px; height: auto; padding: 1.125rem 1.375rem; justify-content: space-between; font-size: 0.9375rem; } .mobile-menu-action .project-cta img { width: 18px; height: 18px; } } @media (max-width: 760px) { .mobile-menu-primary, .mobile-menu-action, .mobile-menu-social { padding-inline: 1.875rem; } .mobile-menu-primary { padding-top: clamp(2.5rem, 9dvh, 4.5rem); } } @media (max-width: 1023px) and (max-height: 600px) { .mobile-menu-primary { padding-top: 1.5rem; gap: 1rem; } .mobile-menu-action { padding-top: 1.5rem; } } @media (max-width: 1023px) { .mobile-menu-action .project-cta { font-size: clamp(1.625rem, 5vw, 2rem); font-weight: 500; line-height: 1.25; letter-spacing: .03em; } } /* Desktop corner system: previously 24px, now 16px. Mobile retains its existing radii. */ @media (min-width: 761px) { .project-card, .work-showcase .project, .philosophy, .quote-card, body .contact-panel { border-radius: 16px; } } /* Original supplied studio image; the live logo remains a separate interactive layer. */ .hero { isolation:isolate; background-color:#201E1C; background-image:url("/immutable/a62a3128e3ec15ee/assets/optimized/studio/original-room.webp"); background-size:cover; background-position:center center; background-repeat:no-repeat; } .hero .hero-back-glow { display:none; } .hero > .studio-background { display:none; } html.intro-pending .hero { background-image:none; background-color:var(--black,#201E1C); } html.intro-pending .hero-explore, html.intro-pending .hero .scroll-cue { visibility:hidden; } /* Room reveal is driven by the same clock as the 900ms logo formation zoom. */ .hero { background-image:none; } .hero-room-image { position:absolute; inset:0; z-index:-1; pointer-events:none; background:url("/immutable/a62a3128e3ec15ee/assets/optimized/studio/original-room.webp") center/cover no-repeat; opacity:1; } html.intro-pending .hero-room-image { opacity:var(--room-reveal,0); } @media(prefers-reduced-motion:reduce) { html.intro-pending .hero-room-image { opacity:1; } } /* Home New 125:719: hero content and navigation. */ .hero h1 { visibility: hidden; pointer-events: none; } .hero .hero-eyebrow { display: none; } .site-header > .project-cta, .mobile-menu-action { display: none; } .site-header .site-nav { font: 500 1.25rem/1.5rem Arturm,sans-serif; letter-spacing: 0.05rem; text-transform: lowercase; } .mobile-menu-primary a { font-family: Arturm,sans-serif; text-transform: lowercase; } .hero .hero-details { display: flex; flex-direction: column; align-items: flex-start; gap: 2.25rem; position: absolute; left: 8.333333%; top: 19.833333%; bottom: auto; width: 342px; max-width: 30%; } .hero .hero-intro { font: 400 clamp(1.25rem,1.944444vw,1.75rem)/1.285714 'Helixa',sans-serif; color: #fff; margin: 0; } .hero .hero-details .button { margin: 0; padding: 1.5rem 2rem; gap: 0.75rem; border-radius: 12px; font: 500 1.125rem/1.5rem Arturm,sans-serif; text-transform: none; letter-spacing: 0.045rem; } .hero-explore { position: absolute; left: 8.333333%; top: 80.833333%; color: #fff; font: 400 1rem/1.5rem 'Helixa',sans-serif; text-decoration: none; z-index: 3; } .hero .scroll-cue { display: none; } @media(min-width:1024px) { .site-header .site-nav { left:auto; right:56px; transform:none; top:51px; gap:3rem; } .site-header { padding-left:3.5rem; } } @media(max-width:760px) { .hero .hero-details { top: 18%; left: 30px; width: min(290px,75%); max-width: none; gap: 1.5rem; } .hero .hero-intro { font-size: 1.375rem; } .hero .hero-details .button { padding:1.125rem 1.5rem; font-size:1rem; } .hero-explore { left:30px; top:auto; bottom:30px; } } /* Figma 125:827 — 16×24 white mouse beside the scroll prompt. */ .hero .scroll-cue { display:block; left:calc(8.333333% + 136px); top:80.833333%; bottom:auto; width:16px; height:24px; transform:none; opacity:1; } .hero .scroll-cue svg { width:16px; height:24px; } .hero .scroll-cue svg rect:first-child { stroke:#30271f; } .hero .scroll-cue svg rect:last-child { fill:#30271f; } @media(max-width:760px) { .hero .scroll-cue { left:166px; top:auto; bottom:30px; } } /* Light studio palette: keep supporting text readable on pale plaster. */ .hero .hero-intro { color:#30271f; } .hero-explore { color:#30271f; } .hero .scroll-cue svg rect:first-child { stroke:#30271f; } .hero .scroll-cue svg rect:last-child { fill:#30271f; } @media (min-width: 761px) { .hero-explore { font-size: 1.125rem; } .hero .scroll-cue { left: calc(8.333333% + 152px); } } /* Shared section gutters and Figma's black hero action. */ .hero { --content-max: 1440px; --hero-content-gutter: max(8.333333vw, calc((100vw - var(--content-max)) / 2)); } .hero .hero-details, .hero .hero-explore { left: var(--hero-content-gutter); } .hero .scroll-cue { left: calc(var(--hero-content-gutter) + 152px); } .hero .hero-details .button { background: var(--black, #201E1C); color: #fff; } .hero .hero-details .button:is(:hover,:focus-visible) { background: #30271f; } @media (min-width: 761px) { .hero .hero-details { width:362px; max-width:30%; } .hero .hero-intro { width:100%;max-width:362px;white-space:normal; } .hero .hero-intro span { display: block; white-space: nowrap; } } @media (min-width: 761px) and (max-width: 1100px) { .hero { --hero-content-gutter: clamp(3rem, 6vw, 4rem); } } @media (max-width: 760px) { .hero { --hero-content-gutter: clamp(1.25rem, 5.56vw, 1.5rem); } .hero .scroll-cue { left: calc(var(--hero-content-gutter) + 136px); } } /* Native scrolling lifts an opaque dark section over the sticky hero. */ html .hero-scroll, html.motion-enabled .hero-scroll { height: auto !important; position: relative; } html .hero-scroll > .hero { position: sticky; top: 0; } .hero-statement { position: relative; z-index: 5; min-height: 0; margin-top: 0; padding: clamp(6.25rem,11.111111vw,10rem) max(8.333333vw, calc((100vw - 90rem) / 2)) 0; background: var(--black); } .hero-statement::before { content: none; } .hero-statement-inner { width: 100%; max-width: none; margin-inline: auto; text-align: center; } .hero-statement .eyebrow { color:#E9C79E; margin:0 0 3rem; } .hero-statement h1 { margin:0; font:700 clamp(2.75rem,10vw,9rem)/.916667 Arturm,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:#fff; } @media(max-width:760px) { .hero-statement { padding:6.25rem 1.875rem 5rem; min-height:80svh; } .hero-statement h1 { font-size:clamp(2rem,8.5vw,4rem); line-height:1; letter-spacing:.02em; } } @media(prefers-reduced-motion:reduce) { html .hero-scroll > .hero { position:relative; } } /* Figma 124:705: one continuous gradient over the three-line heading. */ .hero-statement h1 { background-image: linear-gradient(315deg,#fff 77.452%,#E9C79E 96.31%); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } /* Figma 125:732: paragraph follows the heading with 160px desktop separation. */ body .studio-section { position:relative; z-index:5; background:var(--black); margin:0; padding:clamp(5rem,11.111111vw,10rem) var(--section-gutter) 4.6875rem; } body .studio-section .studio-description { max-width:none; margin:0 auto; font:400 clamp(2rem,4.166667vw,3.75rem)/1.133333 Arturm,sans-serif; letter-spacing:.02em; color:rgba(255,255,255,.96); } @media(max-width:760px) { .hero-statement { min-height:0; padding-bottom:0; } body .studio-section { padding:4.5rem var(--section-gutter) 4rem; } body .studio-section .studio-description { font-size:clamp(1.75rem,6.5vw,2.5rem); line-height:1.2; } } /* Solid section background; gradient is reserved for heading lettering. */ .hero-statement, body .studio-section { background: var(--black); background-image: none; } .hero-statement::before, .hero-statement::after, body .studio-section::before, body .studio-section::after { content: none; } /* Reset legacy studio heading rules: the Figma paragraph has no first-line indent. */ body .studio-section.page-section { width:100%; max-width:none; margin:0; box-sizing:border-box; container-type:normal; } body .studio-section #studio-title.studio-description { width:100%; max-width:none; margin:0 auto; padding:0; text-indent:0; text-align:left; white-space:normal; overflow-wrap:normal; text-wrap:wrap; font:400 clamp(2rem,4.166667vw,3.75rem)/1.133333 Arturm,sans-serif; letter-spacing:.02em; color:rgba(255,255,255,.96); } @media(max-width:760px){body .studio-section #studio-title.studio-description{font-size:clamp(1.75rem,6.5vw,2.5rem);line-height:1.2;}} /* Shared bounds keep the statement and studio copy on the same grid. */ body .hero-statement, body .studio-section.page-section { width: 100%; max-width: none; margin-inline: 0; box-sizing: border-box; padding-inline: max(8.333333vw, calc((100vw - 90rem) / 2)); } @media (max-width: 760px) { body .hero-statement, body .studio-section.page-section { padding-inline: clamp(1.25rem, 5.56vw, 1.5rem); } } /* Compact facts and coordinated, one-time scroll entrances. */ body .stats article { min-height: 0; padding: clamp(2rem, 2.8vw, 2.5rem); gap: 1.5rem; align-content: start; } body .hero-statement [data-reveal], body .studio-section .studio-description[data-reveal] { transition: opacity 900ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1); --reveal-travel: 28px; } body .hero-statement .eyebrow[data-reveal] { --reveal-travel: 12px; } body .hero-statement h1.is-visible { transition-delay: 100ms; } body .stats article[data-reveal].is-visible { transition-delay: 0ms; } body .stats article[data-reveal-step="1"].is-visible { transition-delay: 100ms; } body .stats article[data-reveal-step="2"].is-visible { transition-delay: 200ms; } @media (prefers-reduced-motion: reduce) { body .hero-statement [data-reveal], body .studio-section .studio-description[data-reveal], body .stats article[data-reveal] { transition: none; opacity: 1; transform: none; } } /* Keep the three authored lines intact while fitting their shared width. */ .hero-statement h1 { white-space: nowrap; } @media (max-width: 760px) { body .stats article { padding: 1.75rem; gap: 1.25rem; } } .hero .hero-room-image { display:none; } body .hero .hero-model { position:absolute; left:50%; top:0; width:100%; height:100%; max-width:none; aspect-ratio:auto; margin:0; grid-area:auto; transform:translateX(-50%); } @media (min-width: 761px) { body .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } body .stats article { grid-template-columns: 1fr; } } .work-contact { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1rem clamp(1rem, 1.667vw, 1.5rem); margin-top: clamp(3.5rem, 8vw, 7rem); font: 400 clamp(1.75rem, 3.333333vw, 3rem)/1.25 Arturm, sans-serif; letter-spacing: .02em; color: rgba(255,255,255,.96); } .work-contact p { margin: 0; } body .work-contact .line-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 44px; padding: 0 0 0.25rem; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; border-bottom: 0; position: relative; } .work-contact .line-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange, #FF933C); transition: right 350ms cubic-bezier(.22,1,.36,1); } .work-contact .line-link img { width: .666667em; height: .666667em; transition: transform 350ms cubic-bezier(.22,1,.36,1); } .work-contact .line-link:is(:hover, :focus-visible)::after { right: -16px; } .work-contact .line-link:is(:hover, :focus-visible) img { transform: translateX(16px); } @media (prefers-reduced-motion: reduce) { .work-contact .line-link::after, .work-contact .line-link img { transition: none; } } .work-contact .line-link:focus-visible { outline: 2px solid var(--beige); outline-offset: 6px; } @media (max-width: 600px) { .work-contact { flex-direction: column; gap: 1rem; } } /* Figma Home footer: orange panel, contact links, wordmark and legal row. */ body .contact-panel { margin:1rem; border-radius:16px; background:#FF933C; padding:clamp(4rem,7.5vw,6.75rem) max(1.5rem,calc(var(--section-gutter) - 1rem)) 4rem; } body .contact-panel .contact-top { display:grid; grid-template-columns:minmax(0,560fr) minmax(0,640fr); gap:3rem; } body .contact-panel .contact-copy { container-type:normal; } body .contact-panel .contact-top h2 { font:500 clamp(2.5rem,5vw,4.5rem)/1.166667 Arturm,sans-serif; letter-spacing:0; } body .contact-panel .contact-top p { max-width:435px; margin:2rem 0 2.75rem; font:400 clamp(1.125rem,1.666667vw,1.5rem)/1.5 'Helixa',sans-serif; } .footer-project-link { display:inline-flex; align-items:center; justify-content:space-between; width:210px; max-width:100%; gap:0.75rem; padding-bottom:0.5rem; border-bottom:2px solid currentColor; font:500 1.5rem/2rem Arturm,sans-serif; letter-spacing:.02em; text-decoration:none; } .footer-project-link img { width:20px;height:20px; transition:transform 300ms ease; } .footer-project-link:is(:hover,:focus-visible) img { transform:translateX(6px); } .contact-details { display:flex; flex-direction:column; align-items:flex-end; gap:1.5rem; padding-top:0.75rem; font-style:normal; } .contact-details a { font:500 clamp(1.25rem,2.083333vw,1.875rem)/1.15 Arturm,sans-serif; letter-spacing:.02em; text-decoration:none; overflow-wrap:anywhere; } .contact-details a:last-child { font-size:clamp(1.25rem,1.944444vw,1.75rem); } .contact-details a:hover { text-decoration:underline; text-underline-offset:6px; } .contact-panel a:focus-visible { outline:2px solid var(--black);outline-offset:6px; } body .contact-panel .footer-wordmark { display:block;width:100%;height:auto;margin:6.25rem 0 2.5rem; } body .contact-panel .footer-bottom { padding:2rem 0 0;gap:1.5rem;font-size:0.875rem;line-height:1.5rem; } @media(max-width:1100px) { body .contact-panel .contact-top { gap:2rem; } } @media(max-width:760px) { body .contact-panel { margin:0.75rem;padding:3rem 1.5rem 2rem; } body .contact-panel .contact-top { grid-template-columns:minmax(0,1fr);gap:2.5rem; } body .contact-panel .contact-top h2 { font-size:clamp(2.25rem,9vw,3.5rem); } body .contact-panel .contact-top p { margin:1.5rem 0 1.75rem; } .contact-details { align-items:flex-start;padding:0;gap:1rem; } .footer-project-link { font-size:1.25rem; } body .contact-panel .footer-wordmark { margin:4rem 0 1.75rem; } body .contact-panel .footer-bottom { grid-template-columns:1fr;gap:1rem;padding-top:1.5rem; } body .contact-panel .footer-bottom nav { justify-self:start;justify-content:flex-start;gap:0.75rem 1.25rem; } } @media(prefers-reduced-motion:reduce) { .footer-project-link img { transition:none; } } /* Reference: compact black label/arrow with a light cream underline. */ body .contact-panel .footer-project-link { width:max-content;gap:0.625rem;border-bottom-color:#fff; } /* Home New 125:719, Services 153:235–259. */ body .services-section.page-section { padding-top:clamp(7.5rem,22.222222vw,20rem);padding-bottom:clamp(7.5rem,11.111111vw,10rem); } .services-heading { text-align:center; } .services-heading .eyebrow { margin:0 0 3rem; } body .services-section .services-heading h2 { margin:0;font:700 clamp(2.5rem,10.277778vw,9.25rem)/.945946 Arturm,sans-serif;letter-spacing:.04em;background-image:linear-gradient(315deg,#fff 77.452%,#E9C79E 96.31%); } .services-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(4.5rem,9.722222vw,8.75rem); } .service-card { display:grid;grid-template-columns:35px minmax(0,1fr);gap:1.5rem;padding:1.5rem 4.5rem 5rem 0;min-width:0; } .service-card:nth-child(even) { padding-left:4.5rem;padding-right:0;border-left:1px solid #3c322d; } .service-card:nth-child(n+3) { border-top:1px solid #3c322d;padding-top:5rem;padding-bottom:2.5rem; } .service-index { font:400 1.5rem/2rem 'Helixa',sans-serif;letter-spacing:.08em;color:var(--beige);opacity:.5;padding-top:0.4375rem; } .service-card h3 { margin:0 0 0.5rem;font:400 clamp(1.75rem,3.333333vw,3rem)/1.25 Arturm,sans-serif;letter-spacing:.02em;color:#fff; } .service-card p { margin:0;max-width:440px;font:300 clamp(1.125rem,1.666667vw,1.5rem)/1.5 'Helixa',sans-serif;color:#fff; } .service-card ul { display:flex;flex-wrap:wrap;gap:0.25rem 0;list-style:none;padding:0;margin:1.5rem 0 0;color:var(--beige);font:400 1rem/1.5rem 'Helixa',sans-serif; } .service-card li:not(:last-child)::after { content:'·';margin-inline:0.625rem; } body .founder .founder-copy h2 { margin-bottom:1.5rem; } body .founder .founder-copy > p:not(.eyebrow) { font-weight:300;line-height:1.5;margin:0 0 2.25rem; } body .founder .founder-copy .line-link { display:flex;justify-content:space-between;align-items:center;width:309px;max-width:100%;padding-bottom:0.5rem;font:500 1.5rem/2.5rem Arturm,sans-serif;letter-spacing:.04em;text-transform:none;border-bottom:1px solid var(--orange); } body .founder .founder-copy .line-link img { width:24px;height:24px; } @media(max-width:1100px) { .service-card { padding-right:2rem;gap:1rem;grid-template-columns:30px minmax(0,1fr); }.service-card:nth-child(even){padding-left:2rem;} } @media(max-width:760px) { body .services-section.page-section { padding-block:6rem; } .services-heading .eyebrow { margin-bottom:2rem; } body .services-section .services-heading h2 { font-size:clamp(1.75rem,8.5vw,4rem);line-height:1;letter-spacing:.02em; } .services-grid { grid-template-columns:1fr;margin-top:4rem; } .service-card,.service-card:nth-child(even),.service-card:nth-child(n+3) { padding:2rem 0;border-left:0;border-top:1px solid #3c322d; } .service-index { font-size:1.125rem;line-height:1.625rem;padding-top:0.1875rem; } .service-card h3 { font-size:1.875rem; } .service-card ul { font-size:0.875rem;margin-top:1.25rem; } body .founder .founder-copy .line-link { font-size:1.25rem; } } /* Restrained entrances, observed once; no continuous animation. */ @media (prefers-reduced-motion:no-preference) { .services-heading [data-reveal], .service-card[data-reveal], .founder-copy [data-reveal], .contact-details[data-reveal], .contact-panel .footer-wordmark[data-reveal], .contact-panel .footer-bottom[data-reveal] { transition:opacity 850ms cubic-bezier(.22,1,.36,1),transform 1000ms cubic-bezier(.22,1,.36,1); } .services-heading .reveal-pending:not(.is-visible), .services-grid .service-card.reveal-pending:not(.is-visible) { opacity:0;transform:translateY(24px); } .service-card[data-reveal-step="1"].is-visible { transition-delay:120ms; } .contact-panel .footer-wordmark.reveal-pending:not(.is-visible) { opacity:0;transform:translateY(28px); } .contact-details.reveal-pending:not(.is-visible) { opacity:0;transform:translateY(16px); } .founder-copy .line-link img { transition:transform 350ms cubic-bezier(.22,1,.36,1); } .founder-copy .line-link:is(:hover,:focus-visible) img { transform:translateX(8px); } } @media (max-width:760px) { .service-card[data-reveal-step="1"].is-visible { transition-delay:0ms; } } @media (prefers-reduced-motion:reduce) { .services-heading [data-reveal],.service-card[data-reveal],.contact-details[data-reveal] { opacity:1!important;transform:none!important;transition:none!important; } } /* Latest Home New: medium service titles and centered section calls to action. */ .service-card h3 { font-weight:500; } body .services-contact { margin-top:clamp(4rem,10.555556vw,9.5rem); } body .services-contact .line-link { min-width:0;width:402px;max-width:100%; } @media(max-width:760px) { } /* Keep CTA labels intact and center the two wide portfolio cards. */ body .services-contact .line-link { width:max-content;white-space:nowrap;flex-shrink:0;gap:3rem; } body .work-contact .line-link img { flex-shrink:0; } @media(min-width:761px) { .work-showcase .work-item--3,.work-showcase .work-item--6 { grid-column:1 / -1;width:75%;justify-self:center; } } body .why-contact { margin-top:clamp(4rem,6.944444vw,6.25rem); } @media(max-width:760px) { body .services-contact .line-link { font-size:clamp(1.125rem,5.5vw,1.5rem);gap:1.25rem; } } /* Home New section spacing; compact CTA arrow spacing per review. */ body .why.page-section { padding-top:clamp(8rem,22.222222vw,20rem); } body .why .center-heading { margin-bottom:0; } body .why .why-grid { margin-top:clamp(4rem,6.666667vw,6rem); } body .why .center-heading .eyebrow { margin-bottom:1.5rem; } body .why .center-heading h2 { margin-bottom:0; } @media(max-width:760px) { body .why.page-section { padding-top:7rem; } } /* Stable Founder hit area: hover must not shrink the underline under its label. */ body .founder .founder-copy .line-link, body .founder .founder-copy .line-link:is(:hover,:focus-visible) { position:relative;display:inline-flex;width:max-content;max-width:100%;gap:0.625rem; justify-content:flex-start;border-bottom:0;transition:none; } body .founder .founder-copy .line-link::after { content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--orange); transition:right 350ms cubic-bezier(.22,1,.36,1); } body .founder .founder-copy .line-link:is(:hover,:focus-visible)::after { right:-8px; } body .founder .founder-copy .line-link:is(:hover,:focus-visible) img { transform:translateX(8px); } @media(prefers-reduced-motion:reduce) { body .founder .founder-copy .line-link::after { transition:none; } body .founder .founder-copy .line-link:is(:hover,:focus-visible) img { transform:none; } } body .founder .founder-copy > p:has(+ .line-link) { margin-bottom:0; } body .founder .founder-copy .line-link { margin-top:2rem; } /* Match the AMBITIOUS statement typography for both section titles. */ body .services-section .services-heading h2 { margin:0;max-width:none;text-indent:0;text-align:center; font:700 clamp(2.75rem,10vw,9rem)/.916667 Arturm,sans-serif; letter-spacing:.04em;text-transform:uppercase;opacity:1; background-image:linear-gradient(315deg,#fff 77.452%,#E9C79E 96.31%); background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent; } body .work-contact .line-link:is(:hover,:focus-visible)::after { right:-6px; } body .work-contact .line-link:is(:hover,:focus-visible) img { transform:translateX(6px); } @media(max-width:760px) { body .services-section .services-heading h2 { font-size:clamp(2rem,8.5vw,4rem);line-height:1;letter-spacing:.02em; } } @media(prefers-reduced-motion:reduce) { body .work-contact .line-link:is(:hover,:focus-visible) img { transform:none; } } /* Home New 125:719 — September 17 copy and spacing review. */ body .studio-section #studio-title.studio-description { font-size:clamp(1.75rem,3.333333vw,3rem);line-height:1.25; } body .hero-statement h1,body .services-section .services-heading h2 { font-size:clamp(2.75rem,10.277778vw,9.25rem);line-height:.945946; } body .clients .clients-heading { text-align:center;margin-inline:auto; } body .clients .client-rows { margin-top:clamp(4rem,8.333333vw,7.5rem); } body .clients.page-section { padding-top:clamp(7.5rem,22.222222vw,20rem);padding-bottom:0; } body .why .why-grid { margin-top:clamp(4rem,5.555556vw,5rem); } body .why-contact { margin-top:5rem; } body .founder .founder-copy > p:not(.eyebrow) { color:#fff; } @media(max-width:760px) { body .hero-statement h1,body .services-section .services-heading h2 { font-size:clamp(2rem,8.5vw,4rem);line-height:1; } body .studio-section #studio-title.studio-description { font-size:clamp(1.75rem,6.5vw,2.5rem);line-height:1.2; } body .clients.page-section { padding-top:6rem; } body .why-contact { margin-top:4rem; } } /* Home 125:719 / 172:491: centred horizontal project gallery. */ @supports (overflow:clip) { body { overflow-x:clip; } } body .work-slider-section { overflow:visible; } .work-scroll { margin-top:clamp(4rem,8.333333vw,7.5rem); } .work-deck { display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin; } .work-slide { flex:0 0 100%;min-width:0;scroll-snap-align:center; } .work-slide-image { aspect-ratio:5/3;border-radius:16px;overflow:hidden;background:#201E1C;border:0;outline:0; } .work-slide-image img { display:block;width:100%;height:100%;object-fit:cover; } .work-slide-image { display:block; } .work-slide-caption h3 a { text-decoration:none;transition:color 200ms ease; } .work-slide-caption h3 a:is(:hover,:focus-visible) { color:#999; } .work-edge { display:none; } .work-slider-toolbar { display:flex;align-items:flex-start;gap:1.5rem;margin-top:1.5rem; } .work-caption-layer { position:relative;flex:1;min-width:0;min-height:110px; } .work-slide-caption { position:relative;padding:0; } .has-work-slider .work-slide-caption { position:absolute;inset:0;opacity:0; } .has-work-slider .work-slide-caption:first-child { opacity:1; } .work-slide-caption .eyebrow { margin:0 0 0.75rem;text-transform:uppercase; } .work-slide-caption h3 { margin:0;color:#fff;font:500 clamp(1.375rem,2.5vw,2.25rem)/1.222222 Arturm,sans-serif;letter-spacing:.02em; } .work-scroll-mouse { position:relative;display:block;width:16px;height:24px;border:1.2px solid #B3A69E;border-radius:100px;flex:none; } .work-scroll-mouse > span { position:absolute;left:5px;top:5px;width:4px;height:6px;border-radius:100px;background:#B3A69E; } .work-deck:focus-visible { outline:2px solid var(--beige);outline-offset:6px; } @media(max-width:760px) { .work-slide-image { aspect-ratio:4/3; } .work-caption-layer { min-height:130px; } .work-scroll-mouse { display:none; } } /* Horizontal project browsing; the section stays in normal page flow. */ .work-heading {display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;} body #work .work-heading h2 {margin:0;text-align:left;font:700 clamp(3.25rem,6.6667vw,6rem)/1 Arturm,sans-serif;letter-spacing:.04em;background:linear-gradient(135deg,#E9C79E 0%,#fff 30%);background-clip:text;-webkit-background-clip:text;color:transparent;} .work-scroll {margin-top:5rem;} .work-deck {--project-width:calc(100vw - 2 * var(--section-gutter,8.333333vw));width:100vw;margin-inline:calc((100% - 100vw)/2);padding-inline:calc((100vw - var(--project-width))/2);scroll-padding-inline:calc((100vw - var(--project-width))/2);box-sizing:border-box;cursor:default;scrollbar-width:none;scroll-snap-type:x proximity;} .work-deck::-webkit-scrollbar {display:none;} .work-slide {flex:0 0 var(--project-width);transition:opacity 650ms cubic-bezier(.22,1,.36,1);opacity:.5;} .work-slide.is-active {opacity:1;} .work-slide-image img {pointer-events:none;} .work-slide-caption {transition:opacity 220ms ease;} @media(max-width:760px){ .work-scroll{margin-top:3rem;} .work-deck{scroll-snap-type:x mandatory;overscroll-behavior-x:contain;} .work-slide{scroll-snap-align:center;scroll-snap-stop:always;} } @media(prefers-reduced-motion:reduce){.work-slide,.work-slide-caption{transition:none;}} .work-cursor {position:fixed;left:0;top:0;z-index:70;width:80px;height:80px;margin:-2.5rem 0 0 -2.5rem;border-radius:50%;background:#E9C79E;display:grid;place-items:center;pointer-events:none;opacity:0;scale:.96;transition:opacity 240ms ease,scale 420ms cubic-bezier(.22,1,.36,1);will-change:transform;} .work-cursor.is-visible {opacity:1;scale:var(--balloon-scale,1);transition:opacity 240ms ease;} body .work-cursor {background:#201e1c;} @supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))) { body .work-cursor {background:rgb(32 30 28 / 80%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);} } body .work-cursor img {filter:brightness(0) invert(1);} body .work-cursor span {color:#fff;} .work-cursor img {width:24px;height:24px;grid-area:1/1;transition:transform 360ms cubic-bezier(.22,1,.36,1),opacity 240ms ease;} .work-cursor.is-left img {transform:rotate(180deg);} .work-cursor span {grid-area:1/1;font:700 0.6875rem/1 sans-serif;letter-spacing:.08em;color:#201E1C;opacity:0;} .work-cursor:is(.is-neutral,.is-pressed) img {opacity:1;} .work-cursor:is(.is-neutral,.is-pressed) span {opacity:0;} .work-cursor:not(.stories-cursor).is-neutral img {opacity:0;} .work-cursor:not(.stories-cursor).is-neutral span {opacity:1;font:900 1rem/1 Helixa,sans-serif;letter-spacing:0.08rem;} .work-cursor:not(.stories-cursor).is-neutral {width:96px;height:96px;margin:-3rem 0 0 -3rem;} .work-cursor:not(.stories-cursor) {transition:opacity 240ms ease,scale 420ms cubic-bezier(.22,1,.36,1),width 360ms ease,height 360ms ease,margin 360ms ease;} .work-cursor:not(.stories-cursor).is-visible {transition:opacity 240ms ease,width 360ms ease,height 360ms ease,margin 360ms ease;} @media(hover:hover) and (pointer:fine){.work-deck.has-arrow-cursor,.work-deck.has-arrow-cursor *{cursor:none!important;}} @media(prefers-reduced-motion:reduce){.work-cursor,.work-cursor img{transition:none;}} /* Shared Work slider captions: fluid type, with no portrait-only size jump. */ html body main:is(#top,#main-content,.editorial-main) #work .work-slide-caption h3{ max-width:90%!important; margin-inline:auto!important; } html body main:is(#top,#main-content,.editorial-main) #work .work-slide-caption h3{ font-size:clamp(1.25rem,calc(.75rem + 1vw),1.625rem)!important; } @media(min-width:600px){ html body main:is(#top,#main-content,.editorial-main) #work .work-slide-caption h3{ font-size:clamp(1.53125rem,calc(.90625rem + 1.25vw),2rem)!important; } } /* Home New 125:719 — post-hero typography and section composition, September 17. */ body .hero-statement .hero-statement-inner h1 {font-size:clamp(1.5rem,10.277778vw,9.25rem);line-height:.945946;} body .stats.page-section {padding-block:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.875rem;} body .stats article {box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:160px;background:#E9C79E;border-radius:16px;padding:1.75rem 2.25rem;gap:0.25rem;} body .stats strong {font:400 3.75rem/4.5rem Arturm,sans-serif;letter-spacing:0;color:#201e1c;} body .stats span {font:400 1.125rem/1.5rem 'Helixa',sans-serif;color:#393025;max-width:none;} body #work.page-section {padding-top:20rem;padding-bottom:0;} body .clients.page-section {padding-top:20rem;padding-bottom:0;} body .clients .clients-heading {text-align:left;margin:0;} body .clients #clients-title,body .testimonials #testimonials-title,body .founder.page-section .founder-copy #founder-title {font:700 clamp(3rem,6.666667vw,6rem)/1 Arturm,sans-serif;letter-spacing:.04em;text-align:left;text-transform:uppercase;margin:0;white-space:normal;background:linear-gradient(315deg,#fff 77.452%,#E9C79E 96.31%);background-clip:text;-webkit-background-clip:text;color:transparent;} body .clients .client-rows {margin-top:6rem;gap:1.5rem;} body .clients .client-row {gap:1.5rem;} body .clients .client-row>li {width:360px;flex:0 0 360px;height:240px;border-radius:16px;background:#E9C79E;} body .services-section.page-section {padding-top:20rem;padding-bottom:0;} body .services-section .services-heading h2 {font:700 clamp(2.75rem,10.277778vw,9.25rem)/.945946 Arturm,sans-serif;letter-spacing:.04em;} body .services-grid {margin-top:7.5rem;} body .service-card h3 {font:500 clamp(1.75rem,3.333333vw,3rem)/1.25 Arturm,sans-serif;letter-spacing:.02em;} body .service-card p {font:300 1.5rem/2.25rem 'Helixa',sans-serif;} body .service-card ul {font:400 1rem/1.5rem 'Helixa',sans-serif;} body .services-contact {margin-top:9.5rem;} body .philosophy {margin:10rem var(--section-gutter) 0;padding:7.5rem;min-height:640px;border-radius:16px;box-sizing:border-box;} body .philosophy h2 {max-width:913px;font:400 4.5rem/5rem Arturm,sans-serif;letter-spacing:.02em;margin:2.25rem 0 0;} body .why.page-section {padding-top:20rem;padding-bottom:0;} body .why #why-title {font:700 clamp(2.75rem,10.277778vw,9.25rem)/.945946 Arturm,sans-serif;letter-spacing:.04em;max-width:916px;margin:0 auto;background:linear-gradient(315deg,#fff 66.284%,#E9C79E 86.316%);background-clip:text;-webkit-background-clip:text;color:transparent;} body .why .why-grid {margin-top:7.5rem;gap:1.5rem;} body .why-grid h3 {font-family:Arturm,sans-serif;font-weight:500;letter-spacing:.02em;} body .why-grid article {background:#E9C79E;border-radius:16px;} body .why-contact {margin-top:5rem;} body .testimonials.page-section {padding-top:20rem;padding-bottom:0;} .stories-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:5rem;} .story-count {font:400 1.5rem/2rem 'Helixa',sans-serif;letter-spacing:.08em;color:#E9C79E;opacity:.5;white-space:nowrap;} .stories-layout {display:grid;grid-template-columns:minmax(0,800fr) minmax(0,376fr);gap:1.5rem;} .stories-stage {min-width:0;} .story-panel {box-sizing:border-box;margin:0;background:#fff;color:#201e1c;border-radius:16px;padding:4.5rem 4.25rem;min-height:560px;display:flex;flex-direction:column;justify-content:space-between;gap:3.25rem;} .story-panel[hidden],.story-choice[hidden] {display:none;} .story-panel blockquote {margin:0;max-width:609px;font:400 2.25rem/3rem 'Helixa',sans-serif;} .story-panel figcaption,.story-choice {display:flex;align-items:center;gap:1rem;} .story-panel figcaption>img,.story-choice>img {width:60px;height:60px;object-fit:contain;flex:none;} .story-panel figcaption span,.story-choice span {display:block;font:500 1.5rem/1.75rem 'Helixa',sans-serif;} .story-panel figcaption small,.story-choice small {display:block;margin-top:0.25rem;font:400 1rem/1.25rem 'Helixa',sans-serif;} .story-choices {display:flex;flex-direction:column;gap:1.5625rem;} .story-choice {flex:1;min-height:170px;padding:2rem 3rem;border:0;border-radius:16px;background:#E9C79E;color:#201e1c;text-align:left;cursor:pointer;transition:background 180ms ease;} .story-choice:hover {background:#E9C79E;} .story-choice:focus-visible,.stories-stage:focus-visible {outline:2px solid #FF933C;outline-offset:5px;} @media(prefers-reduced-motion:no-preference){.story-panel:not([hidden]){animation:story-appear 240ms ease;}@keyframes story-appear{from{opacity:.3}to{opacity:1}}} body .founder.page-section {padding-top:20rem;} body .founder .founder-copy {padding-top:3.75rem;} body .founder.page-section .founder-copy #founder-title {margin:0 0 2.875rem;} body .founder.page-section .founder-copy>p:not(.eyebrow) {font:300 1.5rem/2.25rem 'Helixa',sans-serif;max-width:540px;margin-bottom:2.25rem;} body .founder .founder-copy .line-link {margin-top:2rem;} body .contact-panel {border-radius:16px;} @media(min-width:761px) and (max-width:1200px){ body #work.page-section,body .clients.page-section,body .services-section.page-section,body .why.page-section,body .testimonials.page-section,body .founder.page-section {padding-top:clamp(10rem,22.222vw,20rem);} body .philosophy {padding:8.333vw;min-height:0;}body .philosophy h2{font-size:5vw;line-height:1.111111;} .story-panel{padding:2.5rem;min-height:480px;}.story-panel blockquote{font-size:1.75rem;line-height:1.333333;}.story-choice{padding:1.5rem;min-height:140px;}.story-choice span{font-size:1.125rem;}.story-choice small{font-size:0.8125rem;}.story-choice>img{width:40px;height:40px;} body .founder.page-section .founder-copy>p:not(.eyebrow){font-size:1.25rem;line-height:1.5;} } @media(max-width:760px){ body #work.page-section,body .clients.page-section,body .services-section.page-section,body .why.page-section,body .testimonials.page-section,body .founder.page-section {padding-top:6rem;} body .stats.page-section{grid-template-columns:1fr;gap:1rem;}body .stats article{grid-template-columns:100px 1fr;align-items:center;padding:1.5rem;gap:1.25rem;}body .stats strong{font-size:3.25rem;line-height:1;} body .clients .client-rows{margin-top:3rem;}body .clients .client-row>li{width:240px;flex-basis:240px;height:160px;} body .services-grid,body .why .why-grid{margin-top:4rem;}body .service-card p{font-size:1.125rem;line-height:1.75rem;}body .service-card ul{font-size:0.875rem;}body .services-contact{margin-top:4rem;} body .philosophy{margin-top:6rem;padding:3rem 1.5rem;min-height:0;}body .philosophy h2{font-size:2.25rem;line-height:2.5rem;max-width:100%;} .stories-heading{margin-bottom:3rem;}.story-count{font-size:1rem;}.stories-layout{grid-template-columns:1fr;}.story-panel{padding:2rem 1.5rem;min-height:0;gap:2.5rem;}.story-panel blockquote{font-size:1.5rem;line-height:2rem;}.story-panel figcaption span,.story-choice span{font-size:1.125rem;}.story-panel figcaption small,.story-choice small{font-size:0.875rem;}.story-choice{min-height:100px;padding:1.25rem 1.5rem;}.story-choices{gap:0.75rem;} body .founder .founder-copy{padding-top:0;}body .founder.page-section .founder-copy>p:not(.eyebrow){font-size:1.125rem;line-height:1.75rem;} } /* Philosophy 153:262 — updated 720px panel and bold three-line statement. */ body #approach.philosophy {min-height:720px;padding:8rem 7.5rem 7.5rem;background:#FF933C;border-radius:16px;} body #approach #philosophy-title {max-width:754px;margin:0;font:700 6rem/6.25rem Arturm,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#201e1c;opacity:1;background:none;-webkit-text-fill-color:currentColor;} body #approach .philosophy-description {max-width:892px;margin:5.625rem 0 0;font:400 1.5rem/2.25rem 'Helixa',sans-serif;letter-spacing:0;color:#201e1c;} @media(min-width:761px) and (max-width:1439px){ body #approach.philosophy {min-height:50vw;padding:8.888889vw 8.333333vw 8.333333vw;} body #approach #philosophy-title {font-size:6.666667vw;line-height:1.041667;} body #approach .philosophy-description {margin-top:6.25vw;font-size:clamp(1.125rem,1.666667vw,1.5rem);line-height:1.5;} } @media(max-width:760px){ body #approach.philosophy {min-height:0;padding:3rem 1.5rem;} body #approach #philosophy-title {font-size:clamp(1.625rem,6.5vw,3rem);line-height:1.041667;letter-spacing:.025em;} body #approach .philosophy-description {margin-top:2.5rem;font-size:1.125rem;line-height:1.75rem;} } /* Fit real container widths; preserve authored lines without clipping or orphan punctuation. */ body :is(#statement-title,#services-title,#why-title,#work-title,#clients-title,#testimonials-title,#founder-title,#philosophy-title) {white-space:nowrap;overflow:visible;overflow-wrap:normal;word-break:normal;min-width:0;height:auto;} body #about.studio-section.page-section {width:auto;margin-inline:var(--section-gutter);padding:clamp(4.5rem,11.111111vw,10rem) 0 5rem;} body #about #studio-title.studio-description {width:100%;max-width:100%;font-size:clamp(1.5rem,3.333333vw,3rem);line-height:1.25;white-space:normal;overflow-wrap:normal;} body .why .center-heading {width:100%;max-width:916px;} @media(max-width:760px){body #about.studio-section.page-section{padding-block:4.5rem 4rem;}body #about #studio-title.studio-description{font-size:clamp(1.375rem,5.5vw,2rem);}} /* The studio introduction keeps the four authored desktop lines. */ @media(min-width:761px){body #about #studio-title.studio-description{white-space:nowrap;overflow-wrap:normal;word-break:normal;}} @media(max-width:760px){.desktop-copy-break{display:none;}body #about #studio-title.studio-description{white-space:normal;}} /* Figma vertical rhythm at 1440px; interpolate continuously on smaller desktops. */ :root {--page-gap:clamp(10rem,22.222222vw,20rem);--gap-160:clamp(5rem,11.111111vw,10rem);--gap-120:clamp(4rem,8.333333vw,7.5rem);--gap-80:clamp(3rem,5.555556vw,5rem);} body #work.page-section,body .clients.page-section,body .services-section.page-section,body .founder.page-section {padding-top:var(--page-gap);padding-bottom:0;} body .why.page-section {padding-top:clamp(7.5rem,16.666667vw,15rem);padding-bottom:0;} body .testimonials.page-section {padding-top:clamp(8.125rem,18.125vw,16.3125rem);padding-bottom:0;} body #about.studio-section.page-section {padding-top:var(--gap-160);padding-bottom:var(--gap-80);} body .work-scroll {margin-top:clamp(2.5rem,4.722222vw,4.25rem);} body .work-caption-layer {min-height:0;height:82px;} body .clients .client-rows {margin-top:clamp(3rem,6.666667vw,6rem);} body .services-grid,body .why .why-grid {margin-top:var(--gap-120);} body .services-contact {margin-top:clamp(4.75rem,10.555556vw,9.5rem);} body #approach.philosophy {margin-top:var(--page-gap);margin-bottom:0;} body .why-contact {margin-top:var(--gap-80);} .stories-heading {margin-bottom:var(--gap-80);} body .founder + .contact-panel {margin-top:0;} @media(max-width:760px){ :root{--page-gap:6rem;--gap-160:4.5rem;--gap-120:4rem;--gap-80:3rem;} body .why.page-section,body .testimonials.page-section{padding-top:6rem;} body .work-caption-layer{height:auto;min-height:130px;} body #approach.philosophy{margin-top:6rem;} } /* Exact Home New gradient angles/stops; one background across each title. */ body #statement-title,body #services-title {background-image:linear-gradient(315deg,#fff 65.297%,#E9C79E 86.97%);} body .why #why-title {background-image:linear-gradient(315deg,#fff 65.297%,#E9C79E 86.97%);} body #work #work-title {background-image:linear-gradient(315deg,#fff 77.452%,#E9C79E 96.31%);} body .clients #clients-title {background-image:linear-gradient(315deg,#fff 77.452%,#E9C79E 96.31%);} body .testimonials #testimonials-title {background-image:linear-gradient(315deg,#fff 77.452%,#E9C79E 96.31%);} body .founder.page-section .founder-copy #founder-title {background-image:linear-gradient(315deg,#fff 77.452%,#E9C79E 96.31%);} body :is(#statement-title,#services-title,#why-title,#work-title,#clients-title,#testimonials-title,#founder-title) {background-size:100% 100%;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} /* Consistent motion: brief response, soft settling, no perpetual animation. */ @media(prefers-reduced-motion:no-preference){ :root{--site-ease:cubic-bezier(.22,1,.36,1);} body :is(.page-section,.philosophy,.contact-panel){--motion-ease:var(--site-ease);--motion-reveal:900ms;--card-hover-duration:420ms;--card-hover-ease:var(--site-ease);} body [data-reveal]{transition-timing-function:var(--site-ease);} body :is(.work-heading,.stories-heading) [data-reveal],body .stories-layout[data-reveal]{transition:opacity 900ms var(--site-ease),transform 900ms var(--site-ease);--reveal-travel:16px;} body .service-card[data-reveal],body .founder-photo[data-reveal]{transition:opacity 900ms var(--site-ease),transform 900ms var(--site-ease);} body .site-nav a,body .contact-details a,body .footer-bottom a{transition:color 280ms ease,opacity 280ms ease;} body .button{transition:background-color 300ms ease,color 300ms ease,scale 240ms var(--site-ease);} body :is(.line-link,.footer-project-link) img{transition:transform 400ms var(--site-ease);} body .line-link::after{transition:right 400ms var(--site-ease),transform 400ms var(--site-ease);} body .work-slide{transition:opacity 420ms var(--site-ease);} body .work-slide-caption{transition:opacity 320ms ease;} body .story-choice{transition:background-color 320ms ease,box-shadow 320ms ease;} body .story-panel:not([hidden]){animation:story-appear 420ms ease both;} body .motion-line>span{transition-timing-function:var(--site-ease);transition-duration:900ms;} } @media(prefers-reduced-motion:reduce){ body :is(.work-heading,.stories-heading) [data-reveal],body .stories-layout[data-reveal]{transition:none;transform:none;opacity:1;} } /* Client choices: white interaction state and a light cascading entrance. */ body .story-choice:is(:hover,:focus-visible){background-color:#fff;} @media(prefers-reduced-motion:no-preference){ .stories-layout.is-visible .story-choice:not([hidden]){animation:story-choice-arrive 700ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--story-order,0)*90ms);} @keyframes story-choice-arrive{from{opacity:0;translate:0 22px;rotate:1deg;}to{opacity:1;translate:0 0;rotate:0deg;}} body .story-choice{transition:background-color 320ms ease,box-shadow 320ms ease;} } /* Repeatable scroll response replaces the click-triggered entrance on client choices. */ body .stories-layout.is-visible .story-choice:not([hidden]){animation:none;} @media(prefers-reduced-motion:reduce){body .story-choice{translate:none!important;rotate:none!important;}} /* Fixed card geometry: only the inner content responds to scrolling. */ body .story-choices{display:grid;grid-template-rows:repeat(3,minmax(170px,1fr));gap:1.5rem;} body .story-choice{translate:none;rotate:none;transform:none;} .story-choice>img{translate:0 var(--story-shift,0px);rotate:var(--story-turn,0deg);} .story-choice>div{translate:0 var(--story-shift,0px);} @media(min-width:761px){ .stories-stage{display:grid;} .stories-stage .story-panel{grid-area:1/1;min-width:0;} .stories-stage .story-panel[hidden]{display:flex;visibility:hidden;pointer-events:none;} } @media(max-width:760px){body .story-choices{grid-template-rows:repeat(3,minmax(100px,1fr));gap:1rem;}} @media(prefers-reduced-motion:reduce){.story-choice>img,.story-choice>div{translate:none;rotate:none;}} /* Both columns share one stretched grid row and identical outside edges. */ @media(min-width:761px){ body .stories-layout{align-items:stretch;} body .stories-layout>.stories-stage,body .stories-layout>.story-choices{align-self:stretch;margin-block:0;padding-block:0;min-height:0;} body .stories-stage .story-panel{height:100%;box-sizing:border-box;margin:0;} body .story-choices{grid-template-rows:repeat(3,minmax(0,1fr));align-content:stretch;} body .story-choices .story-choice{height:100%;min-height:0;margin:0;box-sizing:border-box;align-self:stretch;translate:none!important;rotate:none!important;transform:none!important;animation:none!important;} } /* Three-slot vertical picker; native overflow preserves page-scroll boundaries. */ body .stories-layout>.story-choices.story-picker{position:relative;display:flex;flex-direction:column;gap:1.5rem;height:100%;min-height:0;max-height:100%;padding:var(--picker-padding,11.875rem) 0;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;perspective:1000px;} .story-picker::-webkit-scrollbar{display:none;} body .story-choices.story-picker .story-choice{display:flex;flex:0 0 var(--picker-card-height,170px);height:var(--picker-card-height,170px);min-height:0;scroll-snap-align:center;transform:rotateX(var(--picker-turn,0deg)) scale(var(--picker-scale,1))!important;transform-origin:center;backface-visibility:hidden;animation:none!important;} body .story-picker .story-choice>img,body .story-picker .story-choice>div{translate:none;rotate:none;} body .story-picker .story-choice[aria-pressed="true"]{background:#fff;} @media(min-width:761px){body .stories-layout{position:relative;}body .stories-layout>.story-picker{position:absolute;right:0;top:0;bottom:0;width:calc((100% - 24px)*376/1176);}body .stories-layout>.stories-stage{grid-column:1;}} @media(max-width:760px){body .stories-layout>.story-choices.story-picker{height:348px;max-height:348px;}body .story-choices.story-picker .story-choice{padding:1rem 1.5rem;}} @media(prefers-reduced-motion:reduce){body .story-choices.story-picker .story-choice{transform:none!important;}} /* Keep country names intact beneath each company. */ body .story-panel figcaption .story-country,body .story-choice .story-country{display:inline;font:inherit;letter-spacing:inherit;white-space:nowrap;} /* Client identity: three intact lines, scaled to the available card width. */ body .story-choice{container-type:inline-size;padding-inline:clamp(1.25rem,3.333333vw,3rem);} body .story-choice>div{min-width:0;flex:1;} body .story-choice>div>span{white-space:nowrap;font-size:clamp(0.875rem,7cqi,1.5rem);line-height:1.2;} body .story-choice>div>small{white-space:nowrap;font-size:clamp(0.6875rem,4.7cqi,1rem);line-height:1.5;} body .story-choice>img{width:clamp(36px,18cqi,60px);height:clamp(36px,18cqi,60px);} /* Keep the picker out of intrinsic row sizing; its viewport follows the quote. */ @media(min-width:761px){ body .stories-layout>.story-choices.story-picker{position:absolute;inset:0 0 0 auto;width:calc((100% - 24px)*.3197278912);height:100%;max-height:100%;} } /* Flat, consistent card surfaces — motion comes from vertical scrolling alone. */ body .stories-layout>.story-choices.story-picker{perspective:none;} body .story-choices.story-picker .story-choice{transform:none!important;scale:none;rotate:none!important;translate:none!important;backface-visibility:visible;transition:background-color 320ms ease;} /* Show the separator when both parts fit; only narrow identities stack. */ body .story-panel figcaption .story-meta span,body .story-choice .story-meta span {display:inline;font:inherit;letter-spacing:inherit;white-space:nowrap;} body .story-meta{white-space:normal;} body .story-panel figcaption>div{min-width:0;flex:1;} body .story-meta.is-stacked .story-separator{display:none;} body .story-panel figcaption .story-meta.is-stacked .story-country,body .story-choice .story-meta.is-stacked .story-country{display:block;} /* Main quote identity keeps the original two-line layout at every width. */ body .story-panel figcaption>div>span,body .story-panel figcaption .story-meta{white-space:nowrap;} body .story-panel figcaption .story-meta .story-separator,body .story-panel figcaption .story-meta .story-country{display:inline;} /* Picker typography stays readable; wrapping, rather than shrinking, handles space. */ body .story-choice{container-type:normal;} body .story-choice>div>span{font-size:1.5rem;line-height:1.75rem;white-space:normal;overflow-wrap:normal;} body .story-choice>div>small{font-size:1rem;line-height:1.5rem;white-space:normal;} body .story-choice>img{width:60px;height:60px;flex:0 0 60px;} body .story-choice .story-meta .story-country{white-space:nowrap;} body .story-choice .story-meta .story-company{white-space:normal;} @media(max-width:760px){ body .story-choice>div>span{font-size:1.125rem;line-height:1.5rem;} body .story-choice>div>small{font-size:0.875rem;line-height:1.25rem;} body .story-choice>img{width:44px;height:44px;flex-basis:44px;} } /* Responsive identity cards: use available space before reducing type size. */ body .stories-layout>.story-choices.story-picker{container-type:inline-size;} body .story-choices.story-picker .story-choice{padding:1.25rem clamp(1rem,6cqi,2rem);gap:clamp(0.75rem,4cqi,1.25rem);align-items:center;} body .story-choice>img{width:clamp(40px,15cqi,60px);height:clamp(40px,15cqi,60px);flex-basis:clamp(40px,15cqi,60px);} body .story-choice>div{min-width:0;} body .story-choice>div>span{font-size:1.5rem;line-height:1.2;text-wrap:balance;} body .story-choice>div>small{margin-top:0.5rem;font-size:1rem;line-height:1.4;} @container(max-width:340px){ body .story-choice>div>span{font-size:1.25rem;} body .story-choices.story-picker .story-choice{padding:1rem;gap:0.75rem;} } @container(max-width:280px){ body .story-choice>div>span{font-size:1.125rem;} body .story-choice>div>small{font-size:0.875rem;} body .story-choice>img{width:36px;height:36px;flex-basis:36px;} } @media(max-width:760px){body .stories-layout>.story-choices.story-picker{height:480px;max-height:480px;}} /* Only quote content fades; the white card stays still and opaque. */ body .stories-stage .story-panel:not([hidden]){animation:none;} /* Full card surfaces can fade beyond the edges without a clipping line or mask. */ body .stories-layout>.story-choices.story-picker{display:block;padding:0;overflow:visible;scroll-snap-type:none;mask:none;-webkit-mask:none;} body .story-choices.story-picker .story-choice{position:absolute;top:0;left:0;width:100%;margin:0;} /* More horizontal breathing room, without squeezing the identity typography. */ body .story-choices.story-picker .story-choice{padding-inline:clamp(1.5rem,9cqi,3rem);gap:clamp(1rem,5cqi,1.75rem);cursor:pointer;user-select:none;} body .story-choices.story-picker.is-dragging,body .story-choices.story-picker.is-dragging .story-choice{cursor:grabbing;} body .story-choices.story-picker .story-choice img{-webkit-user-drag:none;} @container(max-width:340px){body .story-choices.story-picker .story-choice{padding-inline:1.25rem;gap:0.875rem;}} /* Latest hero copy and footer line from Home New. */ body .hero .hero-intro{color:#201e1c;} body .contact-panel .footer-project-link{border-bottom-color:#fff;} body .story-choices.story-picker .story-choice>img,body .story-choices.story-picker .story-choice>div{transition:opacity 320ms ease;} body .story-choices.story-picker .story-choice[aria-pressed="true"]>img,body .story-choices.story-picker .story-choice[aria-pressed="true"]>div{opacity:1;} @media(prefers-reduced-motion:reduce){body .story-choices.story-picker .story-choice>img,body .story-choices.story-picker .story-choice>div{transition:none;}} /* Hover enlarges the card without changing its selected or resting colour. */ body .story-choices.story-picker .story-choice{scale:1;transform-origin:center;transition:translate 360ms cubic-bezier(.22,1,.36,1);} body .story-choices.story-picker .story-choice:is(:hover,:focus-visible){background-color:#E9C79E;} body .story-choices.story-picker .story-choice[aria-pressed="true"]{background-color:#fff;} @media(hover:hover) and (pointer:fine){body .story-choices.story-picker:not(.is-dragging) .story-choice:hover{scale:1;translate:none!important;}} @media(prefers-reduced-motion:reduce){body .story-choices.story-picker .story-choice{transition:none;}} @media(min-width:761px) and (max-width:1100px){body .stats article{padding-inline:1.5rem;}} @media(max-width:760px){body .stats article{display:flex;align-items:flex-start;gap:0.25rem;padding:1.5rem;min-height:144px;}body .stats strong{font-size:3.25rem;line-height:4rem;}} /* Card hover changes colour only, including the selected story. */ body .story-choices.story-picker .story-choice, body .story-choices.story-picker:not(.is-dragging) .story-choice:hover{scale:none!important;translate:none!important;transition:background-color 320ms ease;} body .story-choices.story-picker .story-choice:hover, body .story-choices.story-picker .story-choice[aria-pressed="true"]:hover{background-color:#E9C79E;} /* Restore the stats hover; allow the lifted rounded edge to remain visible. */ body .stats.page-section{overflow:visible;clip-path:none;} @media(hover:hover){body .stats article:hover{background-color:#fff;}} /* Reserve paint space around the 2px hover lift without moving the card row. */ body .stats.page-section{position:relative;z-index:6;padding-block:0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem;overflow:visible;} body .stats article{clip-path:none;mask:none;-webkit-mask:none;} /* Six services, three paired rows — Home New, September 17. */ body .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));} body .services-grid .service-card{box-sizing:border-box;padding-bottom:5rem;} body .services-grid .service-card:nth-child(n+3){padding-top:5rem;} body .services-grid .service-card:nth-last-child(-n+2){padding-bottom:3.25rem;} body .services-contact{margin-top:5rem;} @media(max-width:1100px) and (min-width:761px){ body .services-grid .service-card{padding-bottom:3.5rem;} body .services-grid .service-card:nth-child(n+3){padding-top:3.5rem;} body .services-grid .service-card:nth-last-child(-n+2){padding-bottom:2rem;} body .services-grid .service-card p{font-size:1.25rem;line-height:1.875rem;} } @media(max-width:760px){ body .services-grid{grid-template-columns:minmax(0,1fr);} body .services-grid .service-card:nth-child(n){padding:2rem 0;border-left:0;} body .services-grid .service-card p{font-size:1.125rem;line-height:1.75rem;} body .services-grid .service-card ul{font-size:0.875rem;line-height:1.375rem;} body .services-contact{margin-top:3rem;} } /* Latest Figma section boundaries after the expanded Services grid. */ body .founder.page-section{padding-top:clamp(8.125rem,17.986111vw,16.1875rem);} body .services-contact{margin-top:var(--gap-80);} @media(max-width:760px){body .founder.page-section{padding-top:var(--page-gap);}} /* Extend the Philosophy heading fluidly on large desktops; preserve authored lines and spacing. */ @media(min-width:1441px){ body #approach #philosophy-title{width:100%;max-width:clamp(754px,52.361111vw,1257px);font-size:clamp(6rem,6.666667vw,10rem);line-height:1.041667;} } /* Statement and introduction share the page edges and scale to their authored lines. */ @media(min-width:761px){ body .hero-statement{padding-inline:var(--section-gutter);} body .hero-statement .hero-statement-inner{width:100%;max-width:none;} body #statement-title,body #about #studio-title{width:100%;max-width:none;} } /* Give project captions more breathing room below the image. */ body .work-slider-toolbar{margin-top:clamp(2rem,3.333333vw,3rem);} body .work-caption-layer{height:auto;min-height:clamp(120px,10vw,160px);} body .work-slide-caption{padding-right:0;box-sizing:border-box;} body .work-slide-caption .eyebrow{margin-bottom:1.125rem;} @media(max-width:760px){body .work-caption-layer{min-height:180px;}body .work-slide-caption{padding-right:0;}} body .hero-statement{box-sizing:border-box;width:100%;} /* Reordered Home New: Work → Services → Philosophy → Why → Stories → Clients → Founder. */ body .why.page-section,body .testimonials.page-section{padding-top:var(--page-gap);} body .founder.page-section{padding-top:clamp(7.5rem,16.666667vw,15rem);} @media(max-width:760px){body .founder.page-section{padding-top:var(--page-gap);}} /* Latest client headline from Home New 172:709. */ body .clients .clients-heading{width:100%;max-width:1028px;margin-inline:auto;text-align:center;} body .clients #clients-title{font:700 clamp(2rem,10.277778vw,9.25rem)/.945946 Arturm,sans-serif;letter-spacing:.04em;text-align:center;white-space:nowrap;background-image:linear-gradient(315deg,#fff 65.297%,#E9C79E 86.97%);} body .clients .client-rows{margin-top:var(--gap-120);} @media(max-width:760px){body .clients #clients-title{font-size:clamp(1.75rem,8.5vw,4rem);line-height:1;letter-spacing:.02em;}} /* Hero CTA expands rightward; the label and left edge stay anchored. */ body .hero .hero-details .button{justify-content:flex-start;gap:0.75rem;transition:gap 320ms cubic-bezier(.22,1,.36,1),background-color 320ms ease;} body .hero .hero-details .button:is(:hover,:focus-visible){transform:none;translate:none;scale:none;gap:1.125rem;} body .hero .hero-details .button img{flex-shrink:0;} @media(prefers-reduced-motion:reduce){body .hero .hero-details .button{transition:none;}} /* The selected story remains unchanged on hover. */ body .story-choices.story-picker .story-choice[aria-pressed="true"]:hover{background-color:#fff;cursor:default;} body .story-choices.story-picker.is-dragging .story-choice[aria-pressed="true"]:hover{cursor:grabbing;} /* Text entrances replay only after leaving the viewport, without moving layout. */ @media(prefers-reduced-motion:no-preference){ body [data-repeat-text]{--reveal-travel:12px;--motion-reveal:560ms;} body [data-repeat-text] .motion-line>span{transition-duration:560ms;transition-timing-function:cubic-bezier(.22,1,.36,1);} } @media(prefers-reduced-motion:no-preference){ body [data-repeat-text].reveal-pending:not(.is-visible) .motion-line>span{transform:translateY(65%);} body [data-repeat-text].is-visible .motion-line:nth-child(2)>span{transition-delay:40ms;} body [data-repeat-text].is-visible .motion-line:nth-child(3)>span{transition-delay:80ms;} body [data-repeat-text].is-visible .motion-line:nth-child(4)>span{transition-delay:120ms;} body [data-repeat-text].is-visible .motion-line:nth-child(n+5)>span{transition-delay:160ms;} } /* Hold the scene behind the page until the incoming content fully covers it. */ @media(min-width:761px) and (prefers-reduced-motion:no-preference){ html.motion-enabled .hero-scroll{padding-bottom:var(--hero-cover-extension,0);margin-bottom:calc(-1 * var(--hero-cover-extension,0));} html.motion-enabled .hero-scroll>.hero{position:sticky;top:0;z-index:0;} body .hero-statement{position:relative;z-index:5;background:#201E1C;margin-top:20vh;} } /* One motion layer per heading prevents competing translations during scroll. */ @media(prefers-reduced-motion:no-preference){ body [data-repeat-text][data-masked][data-reveal]{ transform:none!important;translate:none!important;scale:none!important; opacity:1!important;transition:none!important; } body [data-repeat-text][data-masked] .motion-line>span{ transform:translate3d(0,0,0); backface-visibility:hidden;-webkit-backface-visibility:hidden; transition:transform 620ms cubic-bezier(.2,.75,.25,1),opacity 460ms ease; } body [data-repeat-text][data-masked].reveal-pending:not(.is-visible) .motion-line>span{ transform:translate3d(0,45%,0);opacity:0;transition-delay:0ms; } body [data-repeat-text][data-masked].is-visible .motion-line:nth-child(2)>span{transition-delay:40ms;} body [data-repeat-text][data-masked].is-visible .motion-line:nth-child(3)>span{transition-delay:80ms;} body [data-repeat-text][data-masked].is-visible .motion-line:nth-child(4)>span{transition-delay:120ms;} body [data-repeat-text][data-masked].is-visible .motion-line:nth-child(n+5)>span{transition-delay:160ms;} /* Keep the Philosophy title from inheriting a second scale from its panel. */ body .philosophy[data-reveal]{transform:none!important;scale:none!important;translate:none!important;} } /* Figma Home 125:719 — Services copy, colors and Philosophy, September 19. Desktop reference: 1440 viewport, 1408 panel, 919 heading, 120/112 type. */ body #services .service-card { border-color: #37322f; } body #services .service-index { color: var(--grey); opacity: .5; } body #services .service-card h3 { color: rgb(255 255 255 / 96%); } body #services .service-card p { color: #fff; } body #services .service-card ul { color: var(--grey); } @media (min-width: 761px) { body #approach.philosophy { width: calc(100% - 32px); max-width: none; margin-inline: 1rem; padding-inline: max(1.5rem, calc(var(--section-gutter) - 1rem)); container-type: inline-size; } body #approach #philosophy-title { width: 100%; max-width: 76.583333%; font-size: clamp(3rem, 10cqw, 9rem); line-height: .933333; letter-spacing: .04em; } body #approach .philosophy-description { margin-top: clamp(2.125rem, 4.444444vw, 6.6666875rem); } } /* Wide surfaces retain their backdrop; content follows the page grid. */ body .hero-statement { padding-inline: var(--section-gutter); } body .hero-statement .hero-statement-inner { width: 100%; max-width: var(--content-max, 1440px); margin-inline: auto; } body #approach.philosophy, body .contact-panel { box-sizing: border-box; width: calc(100% - 32px); max-width: none; margin-inline: 1rem; padding-inline: max(1.5rem, calc(var(--section-gutter) - 1rem)); } body .contact-panel > :is(.contact-top, .footer-wordmark, .footer-bottom) { width: 100%; max-width: var(--content-max, 1440px); margin-inline: auto; } @media (max-width: 760px) { body #approach.philosophy, body .contact-panel { width: calc(100% - 16px); margin-inline: 0.5rem; padding-inline: max(1rem, calc(var(--section-gutter) - 0.5rem)); } } /* Drawing underline, shared by all page menus. */ body .site-nav a, .draw-link, .editorial-menu nav a { position:relative;text-decoration:none; transition:color 250ms ease,transform 350ms cubic-bezier(.22,1,.36,1); } body .site-nav a::after,.draw-link::after,.editorial-menu nav a::after { content:'';position:absolute;left:0;bottom:-5px;width:100%;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform 450ms cubic-bezier(.22,1,.36,1); } body .site-nav a:is(:hover,:focus-visible)::after,.draw-link:is(:hover,:focus-visible)::after,.editorial-menu nav a:is(:hover,:focus-visible)::after,body .site-nav a[aria-current="page"]::after { transform:scaleX(1);transform-origin:left; } body .site-nav a::after,.editorial-menu nav a::after{height:2px;background:var(--orange);} body .site-nav a:is(:hover,:focus-visible),.editorial-menu nav a:is(:hover,:focus-visible){transform:none;color:#fff;} .draw-link:is(:hover,:focus-visible){transform:translateY(-2px);color:var(--beige);} body .site-nav .nav-letter>span,body .site-nav a:is(:hover,:focus-visible) .nav-letter>span{transform:none;transition:none;} .draw-link img{transition:transform 350ms ease;}.draw-link:hover img{transform:translateX(4px);} @media(prefers-reduced-motion:reduce){body .site-nav a,.draw-link,.draw-link img,.editorial-menu nav a{transition:none!important;transform:none!important;}body .site-nav a::after,.draw-link::after,.editorial-menu nav a::after{transition:none!important;}} /* One quiet motion language across Home, Work, Studio and Contact. */ /* Image stability takes priority over scroll and hover effects. */ html body main img, html body main a:is(:hover,:focus-visible) img, html body.home-page .work-slide-image img, html body main :is(.studio-photo,.studio-intro-photo,.case-image,.founder-photo,.project-media), html body main a:is(:hover,:focus-visible) :is(.case-image,.project-media){ animation:none!important;transition:none!important;transform:none; translate:none!important;scale:none!important;rotate:none!important; opacity:1;mask-image:none!important;-webkit-mask-image:none!important; } body :is(.studio-photo,.studio-intro-photo,.contact-work,.enquiry-form,.contact-panel,.philosophy,.stats article,.why-grid article,.story-panel,.quote-card,.work-item .project,.work-slide){border-radius:16px;} body :is(.studio-photo,.contact-work,.work-item .project,.work-slide){overflow:hidden;isolation:isolate;clip-path:inset(0 round 16px);} body :is(.studio-photo,.work-item .project,.work-slide) img{backface-visibility:hidden;} /* Images fade without scroll/hover zoom or translation; slider tracks stay independent. */ html body main img[data-reveal], html body main :is(.studio-photo,.studio-intro-photo,.case-image,.founder-photo,.project-media), html body main :is(.studio-photo,.project-media,.work-slide-image) img{ transform:none;translate:none!important;scale:none!important; transition-property:opacity!important;transition-duration:700ms!important; transition-timing-function:cubic-bezier(.22,1,.36,1)!important; } .copy-word-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;} .copy-word{display:inline-block;} .studio-process h3 .copy-word{background:linear-gradient(135deg,var(--beige),#fff 30%);background-clip:text;color:transparent;} .editorial-line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;} .editorial-title .editorial-line-content{display:block;background:linear-gradient(135deg,var(--beige),#fff 28%);background-clip:text;-webkit-background-clip:text;color:transparent;} @media(prefers-reduced-motion:no-preference){ body main [data-reveal].reveal-pending:not(.is-visible){opacity:0;} body main [data-reveal].reveal-pending.is-visible{opacity:1;} body [data-repeat-text][data-masked] .motion-line>span{transition:transform 1050ms cubic-bezier(.16,1,.3,1),opacity 850ms ease;} body [data-repeat-text][data-masked].reveal-pending:not(.is-visible) .motion-line>span{transform:translate3d(0,105%,0);opacity:0;} body [data-repeat-text][data-masked].is-visible .motion-line:nth-child(2)>span{transition-delay:95ms;} body [data-repeat-text][data-masked].is-visible .motion-line:nth-child(3)>span{transition-delay:190ms;} body [data-repeat-text][data-masked].is-visible .motion-line:nth-child(4)>span{transition-delay:285ms;} body [data-repeat-text][data-masked].is-visible .motion-line:nth-child(n+5)>span{transition-delay:380ms;} body [data-reveal]{--motion-ease:cubic-bezier(.16,1,.3,1);transition-duration:950ms;transition-timing-function:cubic-bezier(.16,1,.3,1);} body .motion-line>span{transition:transform 1050ms cubic-bezier(.16,1,.3,1),opacity 850ms ease;} body .is-visible .motion-line:nth-child(2)>span{transition-delay:95ms;} body .is-visible .motion-line:nth-child(3)>span{transition-delay:190ms;} body .is-visible .motion-line:nth-child(4)>span{transition-delay:285ms;} body [data-reveal-step="1"].is-visible{transition-delay:95ms;} body [data-reveal-step="2"].is-visible{transition-delay:190ms;} body [data-reveal-step="3"].is-visible{transition-delay:285ms;} body [data-reveal-step="4"].is-visible{transition-delay:380ms;} body :is(.service-card,.why-grid article,.stats article){transition-timing-function:cubic-bezier(.16,1,.3,1);} body .work-item .project-media{transition-duration:900ms;transition-timing-function:cubic-bezier(.16,1,.3,1);} } /* Shared Figma-inspired header with a continuous, feathered transparent tail. */ body .site-header,body.work-page .site-header{isolation:isolate;background:transparent;box-shadow:none;} body .site-header::before{ content:'';display:block;position:absolute;inset:0 0 auto;height:clamp(144px,12vw,184px); z-index:-1;pointer-events:none; background:linear-gradient(to bottom, rgba(32,30,28,.72) 0%,rgba(32,30,28,.69) 10%, rgba(32,30,28,.61) 20%,rgba(32,30,28,.49) 30%, rgba(32,30,28,.35) 40%,rgba(32,30,28,.22) 50%, rgba(32,30,28,.12) 60%,rgba(32,30,28,.055) 70%, rgba(32,30,28,.018) 80%,rgba(32,30,28,.003) 90%, rgba(32,30,28,0) 100%); border-radius:0;box-shadow:none;backdrop-filter:none;filter:none; } body .site-header .wordmark img{filter:none;} body .site-header .site-nav a, body .site-header .project-cta span{text-shadow:none;} @media(max-width:900px){body .site-header::before{height:128px;}} /* No gradient on the Home hero, including before its scripts initialise. */ body:has(.hero) .site-header::before{opacity:0;transition:opacity 350ms ease;} body:has(.hero) .site-header.hero-is-covered::before{opacity:1;} @media(prefers-reduced-motion:reduce){body:has(.hero) .site-header::before{transition:none;}} /* Shared navigation and Figma inner-page introductory typography. */ body .site-header,body .site-header.editorial-header{position:fixed;padding:3rem 3.888889vw;} body .site-header .site-nav,body.work-page .site-header .site-nav{position:absolute;left:auto;right:3.333333vw;top:51px;transform:none;gap:3rem;font:500 1.25rem/1.5rem Arturm,sans-serif;letter-spacing:.04em;text-transform:none;} body .site-header .site-nav a{padding:0;margin:0;border:0;} body .site-header .wordmark,body .site-header .wordmark img{width:145px;height:30px;} body .editorial-menu-button{display:none;} body .menu-glyph{display:block;position:relative;width:32px;height:32px;color:inherit;} body .editorial-menu-button .menu-glyph{color:#fff;} /* Warm gradient halo: decoration stays outside the unchanged icon geometry. */ body .editorial-menu-button .menu-glyph::before{content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;background:conic-gradient(from 35deg,transparent,#6c5942,#E9C79E,transparent 55%,#E9C79E,#6c5942,transparent);filter:blur(9px);opacity:.28;transition:opacity 480ms cubic-bezier(.22,1,.36,1),transform 640ms cubic-bezier(.22,1,.36,1);} body .editorial-menu-button:is(:hover,:focus-visible,[aria-expanded="true"]) .menu-glyph::before{opacity:.65;transform:rotate(55deg);} @media(prefers-reduced-motion:reduce){body .editorial-menu-button .menu-glyph::before{transition:none;transform:none;}} body .menu-glyph>span{position:absolute;left:4px;top:15px;width:24px;height:2px;border-radius:2px;background:currentColor;transform-origin:center;transition:transform 580ms cubic-bezier(.22,1.15,.36,1);} body .menu-glyph>span:first-child{transform:translateY(-4px);} body .menu-glyph>span:last-child{transform:translateY(4px);} body #site-mobile-menu[open] .menu-glyph>span:first-child{transform:rotate(45deg);} body #site-mobile-menu[open] .menu-glyph>span:last-child{transform:rotate(-45deg);} @keyframes menu-line-top{0%{transform:translateY(-4px);}30%{transform:translateY(0) scaleX(.85);}75%{transform:rotate(49deg);}100%{transform:rotate(45deg);}} @keyframes menu-line-bottom{0%{transform:translateY(4px);}30%{transform:translateY(0) scaleX(.85);}75%{transform:rotate(-49deg);}100%{transform:rotate(-45deg);}} body #site-mobile-menu[open] .menu-glyph>span{transition:none;} body #site-mobile-menu[open] .menu-glyph{animation:menu-icon-settle 640ms cubic-bezier(.22,1,.36,1) both;} @keyframes menu-icon-settle{from{opacity:0;transform:rotate(-12deg) scale(.94);}to{opacity:1;transform:rotate(0) scale(1);}} @media(prefers-reduced-motion:reduce){body #site-mobile-menu[open] .menu-glyph{animation:none;transition:none;}} body #site-mobile-menu[data-closing="true"] .menu-glyph{animation:none;transition:none;opacity:1;} body dialog.editorial-menu#site-mobile-menu[data-closing="true"]{overflow:hidden;min-height:0;} body #site-mobile-menu[data-closing="true"] .menu-top button{transform:none;} @media(prefers-reduced-motion:reduce){body .menu-glyph>span{transition:none;}body #site-mobile-menu[open] .menu-glyph>span{animation:none;}body #site-mobile-menu[open] .menu-glyph>span:first-child{transform:rotate(45deg);}body #site-mobile-menu[open] .menu-glyph>span:last-child{transform:rotate(-45deg);}} body #site-mobile-menu .menu-top button{transition:transform 400ms cubic-bezier(.22,1,.36,1);} body #site-mobile-menu .menu-top button:active{transform:scale(.96);} body #site-mobile-menu[open] .menu-top button img{animation:menu-close-enter 620ms both;} @keyframes menu-close-enter{ 0%{opacity:0;transform:rotate(-45deg) scale(.86);animation-timing-function:cubic-bezier(.16,1,.3,1);} 65%{opacity:1;transform:rotate(5deg) scale(1.025);animation-timing-function:ease-in-out;} 100%{opacity:1;transform:rotate(0) scale(1);} } @media(prefers-reduced-motion:reduce){body .editorial-menu-button img,body #site-mobile-menu .menu-top button{transition:none;}body .editorial-menu-button:active img,body #site-mobile-menu .menu-top button:active{transform:none;}body #site-mobile-menu[open] .menu-top button img{animation:none;}} body dialog.editorial-menu#site-mobile-menu{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;box-sizing:border-box;margin:0;padding:12.5rem 2rem 6rem;border:0;border-radius:0;background:#FF933C;color:#201e1c;overflow-y:auto;overscroll-behavior:contain;} body #site-mobile-menu .menu-top{position:absolute;inset:0 0 auto;height:0;} body #site-mobile-menu .menu-top>a{position:absolute;left:var(--menu-logo-x,24px);top:var(--menu-logo-y,24px);display:block;width:var(--menu-logo-width,97px);height:var(--menu-logo-height,20px);} body #site-mobile-menu .menu-top img{display:block;width:100%;height:100%;} body #site-mobile-menu .menu-top button{position:absolute;left:calc(var(--menu-icon-x,calc(100vw - 56px)) - 6px);top:calc(var(--menu-icon-y,24px) - 6px);display:grid;place-items:center;width:44px;height:44px;padding:0;margin:0;background:none;border:0;cursor:pointer;} body #site-mobile-menu nav.menu-primary{display:grid;justify-items:start;gap:1.5rem;margin:0;} body #site-mobile-menu nav.menu-primary a{font:700 3rem/3.375rem Arturm,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:inherit;text-decoration:none;} body #site-mobile-menu nav.menu-social{display:grid;justify-items:start;gap:2rem;margin:6.125rem 0 0;} body #site-mobile-menu nav.menu-social a{font:400 1.5rem/1.5rem 'Helixa',sans-serif;letter-spacing:0;color:inherit;text-decoration:none;} body #site-mobile-menu nav a{position:relative;} body #site-mobile-menu nav a::after{content:none;} body .skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-0.0625rem;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} body .skip-link:focus{position:fixed;top:8px;left:8px;z-index:10001;background:#fff;color:#201e1c;padding:0.75rem 1rem;} body #site-mobile-menu a:focus-visible,body #site-mobile-menu button:focus-visible{outline:2px solid currentColor;outline-offset:6px;} @media(max-width:360px){body dialog.editorial-menu#site-mobile-menu{padding-inline:2rem;}body #site-mobile-menu nav.menu-primary a{font-size:2.5rem;}} @media(max-height:700px){body dialog.editorial-menu#site-mobile-menu{padding-top:7.5rem;padding-bottom:3rem;}body #site-mobile-menu nav.menu-social{margin-top:3.5rem;}} @media(prefers-reduced-motion:reduce){body #site-mobile-menu nav a::after{transition:none;}} body .editorial-menu::backdrop{background:transparent;backdrop-filter:none;} body .editorial-menu>button{display:block;margin-left:auto;background:none;border:0;color:inherit;font:inherit;cursor:pointer;} body .editorial-menu nav{display:grid;gap:1.5rem;margin:2rem 0;} body .editorial-menu nav a{font:500 2.5rem/1.2 Arturm,sans-serif;text-decoration:none;} body .editorial-intro .editorial-lead,body .services-page .services-intro .editorial-lead,body.work-page .work-lead{font-size:2rem;line-height:2.75rem;font-weight:400;letter-spacing:.02em;} @media(max-width:760px){ body .site-header,body .site-header.editorial-header{padding:1.5rem;} body .site-header .site-nav{display:none;} body .site-header .wordmark,body .site-header .wordmark img{width:97px;height:20px;} body .editorial-menu-button{display:block;background:none;border:0;padding:0.5rem;cursor:pointer;} body .editorial-menu-button img{display:block;} body .editorial-intro .editorial-lead,body .services-page .services-intro .editorial-lead,body.work-page .work-lead{font-size:1.5rem;line-height:2.125rem;} } /* One distance and timing keep the underline edge aligned with its arrow. */ body .line-link { --link-travel:8px; --link-timing:420ms cubic-bezier(.45,0,.2,1); position:relative;border-bottom:0!important; } body .line-link::after { content:'';position:absolute;left:0;right:0!important;bottom:0; width:auto!important;height:1px;background:var(--orange,#FF933C); transform:none!important;transition:right var(--link-timing)!important; } body .line-link img { transform:none!important;translate:0 0!important; transition:translate var(--link-timing)!important; } body .line-link:is(:hover,:focus-visible)::after {right:calc(-1 * var(--link-travel))!important;} body .line-link:is(:hover,:focus-visible) img {translate:var(--link-travel) 0!important;} @media(prefers-reduced-motion:reduce){ body .line-link {--link-travel:0px;} body .line-link img,body .line-link::after {transition:none!important;} } /* Beige service-card spacing, scoped independently of other numbered lists. */ body .services-page .services-detail-list, body .why .why-grid, body .stats.page-section, body .stories-carousel .stories-stage{gap:1.5rem!important;} @media(max-width:1100px){ body .services-page .services-detail-list, body .why .why-grid, body .stats.page-section, body .stories-carousel .stories-stage{gap:1rem!important;} } /* Static cards should not suggest a tap action on mobile or tablet. */ @media(max-width:1100px){ body :is(.why-grid,.stats) article:not(:has(a,button)):hover{ background-color:var(--beige,#e9c79e)!important;translate:none!important; } body .why-grid article.is-visible:not(:has(a,button)):hover{transform:none!important;} body .testimonials .quote-track .quote-card:not(:has(a,button)):hover{box-shadow:none!important;} body .client-rows:hover:not(:focus-within) .client-row.is-marquee{animation-play-state:running;} } /* Mobile client stories: Figma 209:1067–1073, with room for longer quotes. */ @media(max-width:599px){ body:is(.home-page,.editorial-page) .testimonials.stories-carousel .stories-stage .story-panel{min-height:430px;height:auto;padding:2.25rem 2rem;gap:2rem;} body:is(.home-page,.editorial-page) .testimonials.stories-carousel .stories-stage .story-panel blockquote{font-size:1.5rem;line-height:2rem;} body:is(.home-page,.editorial-page) .testimonials.stories-carousel .stories-stage .story-panel figcaption>div>span{font-size:1.125rem;line-height:1.75rem;font-weight:500;} body:is(.home-page,.editorial-page) .testimonials.stories-carousel .stories-stage .story-panel figcaption .story-meta{font-size:0.875rem;line-height:1.25rem;} } /* Client names use the supplied Helixa Bold face at every breakpoint. */ body:is(.home-page,.editorial-page) .testimonials.stories-carousel .stories-stage .story-panel figcaption>div>span{font-family:Helixa,sans-serif;font-weight:700;} /* Preserve the updated Figma signature's natural proportions. */ body .founder .founder-signature img{height:auto;aspect-ratio:173.54 / 96.2402;} /* Keep the signature aligned and close to the founder's name. */ body .founder .founder-photo .founder-signature{width:clamp(120px,12vw,180px);height:auto;margin:0 0 0.25rem;} body .founder .founder-photo .founder-signature img{position:static;display:block;width:100%;height:auto;aspect-ratio:173.54 / 96.2402;} /* Desktop founder composition: portrait reduced 10% with lower signature lockup. */ @media(min-width:1101px){ body:is(.home-page,.editorial-page) .founder.page-section .founder-photo{width:90%;max-width:none;} body:is(.home-page,.editorial-page) .founder.page-section .founder-photo figcaption{left:50%;top:auto;bottom:11%;right:auto;} body:is(.home-page,.editorial-page) .founder.page-section .founder-copy{align-self:center;padding-top:0;padding-bottom:3rem;} } /* CTA arrows are controls, exempt from the photographic-image motion reset. */ html body main a.line-link img{translate:0 0!important;transition:translate var(--link-timing)!important;} html body main a.line-link:is(:hover,:focus-visible) img{translate:var(--link-travel) 0!important;} @media(prefers-reduced-motion:reduce){html body main a.line-link img{transition:none!important;}} /* Make actionable controls consistently discoverable with a mouse. */ body :is(button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],a[href]){cursor:pointer;} body :is(button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"]):is(:disabled,[aria-disabled="true"]){cursor:not-allowed;} body :is(.editorial-menu-button,.menu-toggle,.mobile-menu-toggle) *{cursor:inherit;} /* Shared hero-paragraph breakpoints across Home, inner pages and case studies. */ :root{--hero-copy-size:24px;--hero-copy-leading:2rem;} @media(min-width:600px){:root{--hero-copy-size:28px;--hero-copy-leading:2.25rem;}} @media(min-width:1101px){:root{--hero-copy-size:28px;--hero-copy-leading:2.25rem;}} html body :is(.hero .hero-intro,.editorial-intro .editorial-lead,.services-intro .editorial-lead,.work-lead,.case-hero>p){ font-size:var(--hero-copy-size)!important;line-height:var(--hero-copy-leading)!important; } /* Figma hero copy measure: stable within each layout, unaffected by scrolling. */ html body.home-page #top .hero .hero-details{width:335px;max-width:calc(100% - 96px);} html body.home-page #top .hero .hero-intro{width:100%;max-width:none;font-size:var(--hero-copy-size)!important;line-height:var(--hero-copy-leading)!important;} @media(max-width:599px){html body.home-page #top .hero .hero-details{width:289px;max-width:calc(100% - 48px);}} /* Work cards use the same 16px corners at every viewport width. */ html body .work-deck .work-slide, html body .work-deck .work-slide-image{border-radius:16px!important;clip-path:inset(0 round 16px)!important;overflow:hidden;} /* One content-image radius across all pages and responsive sizes. */ html body{--content-image-radius:16px;} html body main img:not([src$=".svg"]):not(.wordmark img):not(.client-row img):not(.story-panel figcaption img):not(.founder-signature img):not(.why-art img):not(.button img):not(.line-link img), html body :is(.case-image,.project-media,.work-slide-image,.studio-photo,.studio-intro-photo,.contact-work-image,.brand-poster img){ border-radius:var(--content-image-radius)!important; clip-path:inset(0 round var(--content-image-radius))!important; } html body :is(.work-item .project,.case-phone-tile,.case-phone-trio,.case-brand-board){border-radius:var(--content-image-radius)!important;clip-path:inset(0 round var(--content-image-radius))!important;} /* Tablet testimonials fit their copy instead of stretching to desktop height. */ @media(min-width:600px) and (max-width:1100px){ html body .testimonials.stories-carousel .stories-stage{align-items:flex-start;} html body .testimonials.stories-carousel .stories-stage .story-panel{height:auto;min-height:0;padding:2.5rem;gap:2rem;justify-content:flex-start;} html body .testimonials.stories-carousel .stories-stage .story-panel figcaption{margin-top:0;} } @media(min-width:600px) and (max-width:1100px){ html body:is(.home-page,.editorial-page) .clients.page-section .client-row>li{width:clamp(156.42px,21.78vw,313.83px);flex-basis:clamp(156.42px,21.78vw,313.83px);height:auto;aspect-ratio:3/2;} } /* Menu links and all nested labels/icons consistently show the hand cursor. */ html body #site-mobile-menu :is(a,button,[role="menuitem"]), html body #site-mobile-menu :is(a,button,[role="menuitem"]) *, html body .site-nav a, html body .site-nav a *, html body .mobile-menu :is(a,button), html body .mobile-menu :is(a,button) *{cursor:pointer!important;} /* Studio orange statement stays black, including Safari's text-fill paint. */ html body.editorial-page .studio-page .studio-thinking h2, html body.editorial-page .studio-page .studio-thinking h2 *{ background:none!important;color:#201e1c!important;-webkit-text-fill-color:#201e1c!important; } @media(forced-colors:active){ html body.editorial-page .studio-page .studio-thinking h2, html body.editorial-page .studio-page .studio-thinking h2 *{color:CanvasText!important;-webkit-text-fill-color:CanvasText!important;} } /* Large-desktop Work introduction uses a two-line copy measure. */ @media(min-width:1101px){ html body.work-page .work-lead{width:100%;max-width:1100px;text-wrap:pretty;} } /* Work 160:1657: keep the 1200px Figma grid as the largest artwork layout. */ @media(min-width:1101px){ html body.work-page .work-showcase .projects{width:100%;max-width:none;} html body.work-page .work-showcase .work-item{min-width:0;} html body.work-page .work-showcase .work-caption, html body.work-page .work-showcase .work-caption a{max-width:100%;white-space:normal;overflow-wrap:break-word;} } /* Home philosophy follows the approved desktop grid, not the old local gutter. */ @media(min-width:1101px){ html body.home-page #approach.philosophy{ padding-inline:calc(var(--desktop-side-margin) - 1rem); margin-top:7.5rem; } html body.home-page #approach #philosophy-title{ max-width:100%;box-sizing:border-box;font-size:clamp(3rem,8.333333vw,7.5rem);line-height:1.2; } } /* Shared footer rhythm: Figma desktop and tablet use 80/80, 16px then 32px. */ html body footer.contact-panel#contact .footer-title-copy{font-size:1em;line-height:inherit;} html body footer.contact-panel#contact .contact-copy h2{margin:0;padding:0;} html body footer.contact-panel#contact .contact-copy > p{margin:1rem 0 2rem;} @media(min-width:600px){ html body footer.contact-panel#contact .contact-copy h2{font-size:5rem;line-height:5rem;letter-spacing:-.03em;} html body footer.contact-panel#contact .contact-copy > p{font-size:1.5rem;line-height:2rem;max-width:458px;} } @media(max-width:599px){ html body footer.contact-panel#contact .contact-copy h2{font-size:2.25rem;line-height:2.75rem;} html body footer.contact-panel#contact .contact-copy > p{font-size:1.125rem;line-height:1.5rem;} } html body footer.contact-panel#contact .contact-top .contact-copy > p{margin:0.5rem 0 2rem;} @media(min-width:1101px){ html body footer.contact-panel#contact{padding-inline:calc(var(--desktop-side-margin) - 1rem);} } /* Footer content uses the same approved desktop container on every page. */ @media(min-width:1101px){ html body footer.contact-panel#contact{ --section-gutter:var(--desktop-side-margin); --content-max:var(--desktop-content-width); box-sizing:border-box;width:calc(100% - 32px);max-width:none; margin-inline:1rem;padding-inline:calc(var(--desktop-side-margin) - 1rem); } html body footer.contact-panel#contact > :is(.contact-top,.footer-wordmark,.footer-bottom){ box-sizing:border-box;width:100%;max-width:var(--desktop-content-width);margin-inline:0; } } /* Large-desktop introduction and statistics: slightly larger with more air. */ @media(min-width:1800px){ html body.home-page #top #about #studio-title.studio-description{ font-size:2.5rem;line-height:3.25rem;max-width:1120px; } html body.home-page .stats article{padding:2rem 2.5rem;gap:0.75rem;min-height:168px;} html body.home-page .stats strong, html body.home-page .stats strong *{font-size:3.375rem;line-height:3.75rem;} html body.home-page .stats article > span{font-size:1.375rem;line-height:1.875rem;} } @media(min-width:1800px){ html body.home-page #approach.philosophy{margin-top:10rem;} } /* 1920px-scale section headings and service titles. */ @media(min-width:1800px){ html body :is(.case-story > h2,.case-related > h2,.founder-copy > h2,.clients-heading > h2,.work-heading > h2,.services-heading > h2,#services-faq-title,.editorial-split > h2,.contact-reach > h2){ font-size:3.5rem!important;line-height:1.25!important; } html body.home-page #services .service-card h3{font-size:2.5rem!important;line-height:1.2!important;margin-top:0;} html body.home-page #services .service-index{ font-size:1.375rem;line-height:1.2;align-self:start;text-align:left; padding-top:0;margin-top:0;transform:none; } html body.home-page #services .service-card{align-items:start;} } /* Large desktop: one 240px gap between major content blocks. */ @media(min-width:1800px){ html body{--section-space:15rem;} html body.home-page :is(#about.studio-section,#work.page-section,.why.page-section,#services.page-section,.testimonials.page-section,.clients.page-section,.founder.page-section){ margin-top:15rem;padding-top:0; } html body.home-page #approach.philosophy{margin-top:15rem;} html body .editorial-main > section:not(.editorial-intro):not(.wide-surface){margin-top:15rem;padding-top:0;} html body .editorial-main > .wide-surface{margin-top:15rem;} html body .case-study{--case-gap:10rem;} html body.work-page .work-showcase .projects{margin-top:10rem;row-gap:10rem;} html body.work-page .work-showcase{padding-bottom:0;} html body footer.contact-panel#contact{margin-top:15rem;} } @media(min-width:1800px){ html body.home-page :is(#about.studio-section,#work.page-section,.why.page-section,#services.page-section,.testimonials.page-section,.clients.page-section,.founder.page-section){margin-top:0!important;padding-top:15rem!important;} html body .editorial-main > section:not(.editorial-intro):not(.wide-surface){margin-top:15rem!important;padding-top:0!important;} html body .editorial-main > .wide-surface{margin-top:15rem!important;} html body .case-study{padding-bottom:0;} html body footer.contact-panel#contact{margin-top:15rem!important;} } /* Founder portrait meets the footer: exception to major-section spacing. */ html body:has(.founder.page-section) footer.contact-panel#contact{margin-top:0!important;} html body .founder.page-section{padding-bottom:0!important;margin-bottom:0!important;} html body .studio-page:has(> .founder:last-child){padding-bottom:0!important;} /* Large-desktop title-to-introduction exception. */ @media(min-width:1800px){ html body.home-page #top #about.studio-section.page-section{margin-top:0!important;padding-top:11.25rem!important;} } /* Figma 124:705 uses 144px type / 160px line height. */ @media(min-width:1800px){ html body.home-page #top h1#statement-title{line-height:1.1111111111!important;} html body.home-page #top #statement-title :is(.motion-line,.motion-line > span){line-height:inherit!important;} } /* Optical adjustment for large-desktop statistics numbers only. */ @media(min-width:1800px){ html body.home-page .stats article > strong{position:relative;top:4px;} } /* Case-study artwork fills its content container; height follows the asset. */ html body .case-study .case-container > :is(.case-image,.case-brand-pair,.case-phone-trio,.case-brand-board){width:100%;max-width:none;} html body .case-study .case-image{width:100%;max-width:100%;height:auto;} /* All page H1s share Home's Figma 144/160 line-height ratio. */ html body :is(main,.hero-statement,.editorial-main) h1, html body h1#statement-title, html body h1#work-page-title{line-height:1.1111111111!important;} html body h1 :is(.editorial-line-mask,.editorial-line-content,.motion-line,[data-gradient-line]){line-height:inherit!important;} /* Desktop case-study paragraph spacing: 80% of the existing rhythm. */ @media(min-width:1101px){ html body .case-study .case-copy p+p{margin-top:1.2rem;} html body .case-designed .case-copy p+p{margin-top:1.8rem;} } /* Large-desktop coloured statement panels: 160px internal vertical space. */ @media(min-width:1800px){ html body.home-page #approach.philosophy, html body .case-study .case-statement, html body .studio-page .studio-thinking, html body .services-page .services-mix{padding-block:10rem!important;} } /* Desktop case descriptions: narrower measure leaves room beside project facts. */ @media(min-width:1101px){ html body .case-study .case-story > .case-copy{box-sizing:border-box;width:100%;max-width:none;min-width:0;padding-left:0;padding-right:20%;} } @media(min-width:1800px){ html body .case-study .case-section:first-of-type{margin-top:10rem;} html body:has(main.case-study) footer.contact-panel#contact{margin-top:10rem!important;} } /* Work hero: shared H1 rhythm; copy stays a two-line measure. */ @media(min-width:1101px){ html body.work-page .work-showcase h1#work-page-title, html body.work-page .work-showcase #work-page-title :is(.title-desktop-lines,.editorial-line-mask,.editorial-line-content){line-height:1.1111111111!important;} html body.work-page .work-showcase p.work-lead{ width:100%;max-width:1200px;font-size:clamp(1.5rem,2.222222vw,2rem)!important; line-height:1.375!important;text-wrap:balance; } } /* Shared heading rhythm: equal font sizes always have equal line heights. */ html body h2, html body.home-page #approach h2#philosophy-title, html body footer.contact-panel#contact .contact-copy h2, html body .founder.page-section .founder-copy h2#founder-title, html body .case-study .case-statement h2{line-height:1.25!important;} html body h2 :is(.editorial-line-mask,.editorial-line-content,.motion-line,[data-gradient-line],.footer-title-copy){line-height:inherit!important;} /* Display titles share Home's rhythm, including the display-sized Why heading. */ html body.home-page .why h2#why-title{line-height:1.1111111111!important;} html body.home-page .why #why-title :is(.motion-line,.editorial-line-mask,.editorial-line-content,[data-gradient-line]){line-height:inherit!important;} @media(min-width:600px){ html body footer.contact-panel#contact .contact-top .contact-copy h2{line-height:1!important;} } /* Requested 1920px refinements: taller cards and optically aligned indices. */ @media(min-width:1800px){ html body.home-page .why .why-grid article{min-height:336px;} html body.home-page .why .why-grid .why-copy h3{font-size:2.5rem!important;line-height:3rem!important;} html body.home-page #services .service-card .service-index{position:relative;top:6px;} } /* Large desktops: tighter footer title and consistent bottom-row type. */ @media(min-width:1800px){ html body footer.contact-panel#contact .contact-top .contact-copy h2{line-height:1!important;} html body footer.contact-panel#contact .contact-top .contact-copy > p{margin-top:1rem;} html body footer.contact-panel#contact .footer-bottom, html body footer.contact-panel#contact .footer-bottom :is(span,a,nav){font-size:1rem!important;line-height:1.5rem!important;} } /* Large-desktop Work hero: reduce the space surrounding the title. */ @media(min-width:1800px){ html body.work-page .work-showcase{padding-top:12.5rem;} html body.work-page .work-showcase p.work-lead{margin-top:2rem;} } /* Work images stay still while the VIEW cursor provides hover feedback. */ html body.work-page main #work .work-item .project .project-media img, html body.work-page main #work .work-item .project:is(:hover,:focus-visible) .project-media img{ transform:none!important;scale:none!important; } @media(hover:hover) and (pointer:fine){ html body.work-page #work a.project.has-open-cursor, html body.work-page #work a.project.has-open-cursor *{cursor:none!important;} } /* Related work uses the same VIEW follower and compact caption spacing. */ html body .case-related .case-related-grid h3{margin:1.5rem 0 0;} html body .case-related .case-related-grid p{margin:0.5rem 0 0;} @media(hover:hover) and (pointer:fine){ html body .case-related-grid > a .case-image.has-open-cursor{cursor:none!important;} } html body .case-related .case-related-grid a :is(h3,p), html body .case-related .case-related-grid a:is(:hover,:focus-visible) :is(h3,p){ translate:none!important;transform:none!important;transition:none!important; } /* All desktop case studies follow Envisioner's proportional text columns. */ @media(min-width:1101px){ html body .case-study .case-story{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2.5rem;} html body .case-study .case-story.case-overview{grid-template-columns:minmax(0,360fr) minmax(0,480fr) minmax(0,224fr);gap:2.5rem;} html body .case-study .case-story > .case-copy{max-width:none;} html body .case-study .case-copy p+p{margin-top:1.2rem;} html body .case-study .case-facts{margin:0;padding-top:0;line-height:1.55;} html body .case-study .case-facts div+div{margin-top:2.5rem;} html body .case-study .case-facts dt{font-weight:400;line-height:1.3;margin-bottom:1.25rem;color:#a2978d;} html body .case-study .case-facts .case-scope{line-height:inherit;} } /* Raise the shared footer wordmark without moving the bottom links. */ html body footer.contact-panel#contact > .footer-wordmark{position:relative;top:-24px;} /* Large-desktop footer: more space above the legal and social row. */ @media(min-width:1800px){ html body footer.contact-panel#contact .footer-bottom{padding-top:3rem;} } /* Figma case hero descriptions: Helixa Regular, 32/44 on desktop. */ @media(min-width:1101px){ html body .case-study .case-hero > p{font-family:Helixa,sans-serif!important;font-size:2rem!important;line-height:2.75rem!important;font-weight:400;letter-spacing:0;color:rgb(255 255 255 / 96%);} } /* Figma desktop subheadings: use the full 32/44 style consistently. */ @media(min-width:1101px){ html body :is(.editorial-intro .editorial-lead,.services-intro .editorial-lead,.work-lead,.case-hero > p){ font-family:Helixa,sans-serif!important;font-size:2rem!important;line-height:2.75rem!important;font-weight:400;letter-spacing:0; } html body .services-page .services-mix-copy, html body .services-page .services-mix-copy p{font-size:1.5rem!important;line-height:2.25rem!important;} } @media(min-width:1800px){ html body main.editorial-main.services-page > section.services-details.editorial-container{margin-top:10rem!important;} } /* Halve both contributors to the large-desktop FAQ-to-footer gap. */ @media(min-width:1800px){ html body .services-page .services-faq{margin-bottom:5.625rem;} html body:has(.services-page) footer.contact-panel#contact{margin-top:7.5rem!important;} } /* Large-desktop FAQ: tighter heading gap and slightly smaller questions. */ @media(min-width:1800px){ html body .services-page .services-faq > h2{margin-bottom:3rem;} html body .services-page .services-faq .faq-question{font-size:1.75rem;} } /* Services statement content follows the same desktop container as Home. */ @media(min-width:1101px){ html body .services-page .services-mix > .editorial-container{ width:var(--desktop-content-width);max-width:var(--desktop-content-width); margin-inline:auto;padding-inline:0;box-sizing:border-box; } } /* Studio: Figma process labels, paragraph measures and Home client alignment. */ html body .studio-page .studio-process h3, html body .studio-page .studio-process h3 * { background:none!important;color:rgba(255,255,255,.96)!important; -webkit-text-fill-color:currentColor!important; } html body .studio-page .clients .clients-heading { width:100%;max-width:none;margin-inline:0;text-align:left; } @media(min-width:1101px){ html body .studio-page .studio-years .editorial-lead { width:100%;max-width:none;font-size:2rem!important;line-height:2.75rem!important; margin-top:2rem!important; letter-spacing:-0.02rem;text-wrap:wrap; } html body .studio-page .studio-belief p { width:1354px;max-width:100%;font-size:clamp(1.75rem,3.888889vw,3.5rem)!important;line-height:1.214286!important; letter-spacing:0;text-wrap:wrap; } } @media(max-width:1100px){.studio-years-copy-break{display:none;}.studio-years-copy-break::after{content:" ";}} /* Preserve the approved five-line Studio statement on desktop. */ @media(min-width:1101px){ html body .studio-page .studio-belief-line{display:block;} } /* Align Studio client heading with the collage's shared desktop container. */ @media(min-width:1101px){ html body .studio-page .clients.page-section{ width:var(--desktop-content-width);max-width:var(--desktop-content-width); margin-inline:auto;padding-inline:0;box-sizing:border-box; } html body .studio-page .clients #clients-title{margin-inline:0;text-align:left;} } /* Contact: halve the intro-to-form gap and add 8px inside the form. */ @media(min-width:1101px){ html body .contact-page .contact-intro{padding-bottom:3.75rem!important;} html body :is(.contact-page,.audience-page) > .enquiry-form.wide-surface{padding-block:5.5rem!important;} } @media(min-width:1800px){ html body :is(.contact-page,.audience-page) > .enquiry-form.wide-surface{margin-top:5rem!important;} } /* Contact reach follows the shared container and Home statistics. */ @media(min-width:1101px){ html body .contact-page .contact-reach > h2.editorial-title{ margin-inline:var(--desktop-side-margin);text-align:left; } html body .contact-page .contact-reach .stats.page-section{ width:var(--desktop-content-width);max-width:var(--desktop-content-width); margin-inline:auto;padding-inline:0;box-sizing:border-box; } } @media(min-width:1800px){ html body .contact-page .contact-reach .stats article{ padding:2rem 2.5rem;gap:0.75rem;min-height:168px; } html body .contact-page .contact-reach .stats strong, html body .contact-page .contact-reach .stats strong *{ font-size:3.375rem!important;line-height:3.75rem!important; } html body .contact-page .contact-reach .stats article > strong{position:relative;top:4px;} html body .contact-page .contact-reach .stats article > span{font-size:1.375rem;line-height:1.875rem;} } /* Contact image panel: 16px more breathing room on each desktop edge. */ @media(min-width:1101px){ html body .contact-page .contact-work{padding-block:calc(var(--space-content) + 1rem);} } /* Contact desktop: reduce service-chip height and halve the final section gap. */ @media(min-width:1101px){ html body :is(.contact-page,.audience-page) .service-options span{padding-block:0.875rem;} } @media(min-width:1800px){ html body .contact-page .contact-reach{margin-bottom:5.625rem;} html body:has(.contact-page) footer.contact-panel#contact{margin-top:7.5rem!important;} } /* Contact: 140px above and 180px below Next Steps and Global Reach. */ @media(min-width:1800px){ html body .contact-page > .editorial-split, html body .contact-page > .contact-reach{margin-top:8.75rem!important;} html body .contact-page > .editorial-split{margin-bottom:0;} html body .contact-page > .editorial-split .editorial-values{margin-bottom:0;} html body .contact-page > .editorial-split .editorial-values li:last-child{margin-bottom:0;} html body .contact-page > .contact-work.wide-surface{margin-top:11.25rem!important;} html body .contact-page > .contact-reach{margin-bottom:0!important;padding-bottom:0;} html body:has(.contact-page) footer.contact-panel#contact{margin-top:11.25rem!important;} } /* Contact: shared section spacing, 160px above and 180px below. */ @media(min-width:1800px){ html body main.editorial-main.contact-page > section.editorial-split, html body main.editorial-main.contact-page > section.contact-reach{ margin-block:0!important;padding-top:10rem!important;padding-bottom:11.25rem!important; } html body .contact-page > .editorial-split > h2.editorial-title, html body .contact-page > .contact-reach > h2.editorial-title{ margin-block:0!important;padding-block:0!important; } html body .contact-page > .editorial-split .editorial-values, html body .contact-page > .editorial-split .editorial-values li:last-child{ margin-bottom:0!important; } html body .contact-page > .contact-work.wide-surface{margin-block:0!important;} html body:has(.contact-page) footer.contact-panel#contact{margin-top:0!important;} } @media(max-width:1100px){.contact-hero-copy-break{display:none;}} /* Shared desktop typography follows the approved content width, capped at 1920. */ @media(min-width:1101px){ html body{ --desktop-display:clamp(80px,calc(var(--desktop-content-width) * .09),144px); --desktop-heading:clamp(38px,calc(var(--desktop-content-width) * .035),56px); --desktop-lead:clamp(24px,calc(var(--desktop-content-width) * .02),32px); --desktop-card:clamp(28px,calc(var(--desktop-content-width) * .025),40px); } html body :is(main,.hero-statement,.editorial-main) h1, html body h1#statement-title,html body h1#work-page-title{ font-size:var(--desktop-display)!important;line-height:1.1111111111!important; } html body :is(.case-story>h2,.case-related>h2,.founder-copy>h2,.clients-heading>h2,.work-heading>h2,.services-heading>h2,#services-faq-title,.editorial-split>h2,.contact-reach>h2){ font-size:var(--desktop-heading)!important;line-height:1.25!important; } html body :is(.editorial-intro .editorial-lead,.services-intro .editorial-lead,.work-lead,.case-hero>p,.studio-years .editorial-lead){ font-size:var(--desktop-lead)!important;line-height:1.375!important; } html body :is(.service-card h3,.why-copy h3,.editorial-values h3,.studio-process h3){font-size:var(--desktop-card)!important;} html body .contact-page .contact-intro{grid-template-columns:minmax(0,1fr) max-content;gap:clamp(2rem,3vw,4rem);} html body .contact-page .contact-intro>div{container-type:inline-size;min-width:0;} html body .contact-page .contact-intro h1{font-size:min(var(--desktop-display),18cqi)!important;} html body .contact-page .contact-intro .editorial-lead{font-size:min(var(--desktop-lead),4.4cqi)!important;max-width:100%;} html body .contact-page .contact-intro aside{font-size:var(--desktop-lead);} html body .contact-page .contact-intro aside a{font-size:var(--desktop-lead);} html body .studio-page .studio-belief p{font-size:clamp(2.25rem,calc(var(--desktop-content-width) * .035),3.5rem)!important;width:calc(var(--desktop-content-width) * .84625);} } @media(min-width:1101px) and (max-width:1799px){ .studio-years-copy-break{display:none;} html body .studio-page .studio-years .editorial-lead{max-width:100%;} } @media(min-width:1101px){ html body .case-study .case-hero > p, html body .studio-page .studio-years .editorial-lead{font-size:var(--desktop-lead)!important;line-height:1.375!important;} } /* Services: spacing from the orange section to the FAQ. */ @media(min-width:1800px){ html body main.editorial-main.services-page > section.services-faq{margin-top:11.25rem!important;} } /* Match the 20px reduction above the founder on Home and Studio. */ @media(min-width:1800px){ html body.home-page section#founder.founder.page-section{padding-top:13.75rem!important;} html body main.editorial-main.studio-page > section#founder.founder.page-section{margin-top:13.75rem!important;} } /* Keep the native hand cursor consistent across all actionable controls. */ html body :is(a[href],button,input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],select,summary,[role="button"],[role="link"],.service-options label):not(:disabled):not([aria-disabled="true"]), html body :is(a[href],button,summary,[role="button"],[role="link"],.service-options label):not(:disabled):not([aria-disabled="true"]) *{ cursor:pointer!important; } html body :is(button,input,select):disabled, html body [aria-disabled="true"], html body [aria-disabled="true"] *{cursor:default!important;} .founder-copy-break{display:none;} @media(min-width:1101px){ html body .founder .founder-copy{container-type:inline-size;container-name:founder-copy;} } /* Studio metrics reuse the Home cards and desktop container. */ @media(min-width:1101px){ html body main.studio-page > .stats.page-section{width:var(--desktop-content-width);margin-inline:auto;padding-inline:0;} } @media(min-width:1800px){ html body main.studio-page > .stats.page-section article{padding:2rem 2.5rem;gap:0.75rem;min-height:168px;} html body main.studio-page > .stats.page-section strong, html body main.studio-page > .stats.page-section strong *{font-size:3.375rem;line-height:3.75rem;} html body main.studio-page > .stats.page-section article>strong{position:relative;top:4px;} html body main.studio-page > .stats.page-section article>span{font-size:1.375rem;line-height:1.875rem;} } html body main.editorial-main.studio-page > section.stats.page-section{padding:0;margin-top:7.5rem!important;} @media(max-width:760px){html body main.editorial-main.studio-page > section.stats.page-section{margin-top:3.5rem!important;}} /* Authored lines apply only when the actual copy column can hold them. */ @container founder-copy (min-width:560px){ .founder-copy-break{display:inline;} } /* Home trial: reveal the opening statement promptly upon viewport entry. */ @media(prefers-reduced-motion:no-preference){ html body.home-page #statement-title .motion-line>span{transition-duration:650ms,550ms;} html body.home-page #statement-title.is-visible .motion-line:nth-child(2)>span{transition-delay:65ms;} html body.home-page #statement-title.is-visible .motion-line:nth-child(3)>span{transition-delay:130ms;} html body.home-page #studio-title[data-reveal]{transition-duration:550ms!important;transition-delay:0ms!important;} } /* Home middle display titles, updated Figma reference September 28. */ @media(min-width:1101px){ html body.home-page .why h2#why-title, html body.home-page .testimonials h2#testimonials-title{ width:100%!important;max-width:100%;margin-inline:auto;text-align:center!important; font-family:'GC Gudlak',sans-serif;font-size:var(--desktop-display)!important; font-weight:700!important;line-height:1.1111111111!important; letter-spacing:.02em!important;text-transform:uppercase; } html body.home-page :is(#why-title,#testimonials-title) .motion-line>span{margin-inline:auto;} html body.home-page .stories-heading{justify-content:center;} } /* Home editorial folds: title first, supporting copy on the following screen. */ @media(min-width:1101px){ html body.home-page .hero-statement, html body.home-page .why .center-heading, html body.home-page .testimonials .stories-heading{ min-height:100svh;box-sizing:border-box;display:flex;align-items:center;justify-content:center; padding-block:5rem!important;margin-block:0!important; } html body.home-page #top #about.studio-section.page-section{ min-height:100svh;box-sizing:border-box;display:flex;align-items:center;justify-content:center; padding-block:5rem!important;margin-block:0!important; } html body.home-page #top #about #studio-title.studio-description{ font-size:clamp(2rem,3.333333vw,3rem)!important;line-height:1.166666667!important; max-width:1080px;width:100%;margin:0 auto;text-align:center!important; letter-spacing:0;font-weight:400;color:rgb(255 255 255 / 96%); } } @media(min-width:1101px) and (max-width:1439px){ html body.home-page #top #about #studio-title .intro-line-break{display:none;} } html body.home-page .hero-statement h1#statement-title{ text-align:center!important;margin-inline:auto!important; } html body.home-page #statement-title .motion-line>span{margin-inline:auto;} @media(prefers-reduced-motion:no-preference){ html body.home-page :is(#statement-title,#studio-title,#why-title,#testimonials-title)[data-masked] .motion-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;} html body.home-page :is(#statement-title,#studio-title,#why-title,#testimonials-title)[data-masked] .motion-line>span{ display:block;transition:transform 950ms cubic-bezier(.16,1,.3,1),opacity 750ms ease; } html body.home-page :is(#statement-title,#studio-title,#why-title,#testimonials-title)[data-masked].is-visible .motion-line:nth-child(2)>span{transition-delay:120ms;} html body.home-page :is(#statement-title,#studio-title,#why-title,#testimonials-title)[data-masked].is-visible .motion-line:nth-child(3)>span{transition-delay:240ms;} html body.home-page :is(#statement-title,#studio-title,#why-title,#testimonials-title)[data-masked].is-visible .motion-line:nth-child(4)>span{transition-delay:360ms;} } /* Keep the paragraph's own fold, with less empty space after the title. */ @media(min-width:1101px){ html body.home-page #top #about.studio-section.page-section{min-height:60svh;} } /* Figma Home introduction: 280px after the title, 320px before Case studies. */ @media(min-width:1101px){ html body.home-page .hero-statement{align-items:flex-end;padding-bottom:5rem!important;} html body.home-page #top #about.studio-section.page-section{ min-height:0;padding-top:12.5rem!important;padding-bottom:15rem!important; } html body.home-page #top section#work.work-slider-section.page-section{ margin-top:0!important;padding-top:5rem!important; } } @media(min-width:1101px){ html body.home-page #top section#work.work-slider-section.page-section{padding-top:3.125rem!important;} } /* Latest Figma Home introduction: Helixa Regular 60/68. */ @media(min-width:1101px){ html body.home-page #top #about #studio-title.studio-description{ font-size:clamp(2.25rem,3.888889vw,3.5rem)!important;line-height:1.1428571429!important; } } @media(prefers-reduced-motion:no-preference){ html body.home-page #studio-title[data-masked].is-visible .motion-line:nth-child(5)>span{transition-delay:480ms;} } /* Halve the title's effective top space, including the former full-fold filler. */ @media(min-width:1101px){ html body.home-page .hero-statement{ min-height:0; padding-top:max(2.5rem,calc((100svh - var(--desktop-display) * 3.653212 - 5rem) / 2))!important; } } /* Content-only elastic settle: transform/opacity, no animated clipping or JS tweens. */ @keyframes content-rise-settle{ 0%{opacity:0;transform:translate3d(0,48px,0)} 68%{opacity:1;transform:translate3d(0,-3px,0)} 86%{opacity:1;transform:translate3d(0,1px,0)} 100%{opacity:1;transform:translate3d(0,0,0)} } @media(prefers-reduced-motion:no-preference){ html body.home-page main [data-reveal]:not(.hero *):not([data-masked]).reveal-pending.is-visible{ transition:none;animation:content-rise-settle 1100ms cubic-bezier(.22,.61,.36,1) both; } html body.home-page main [data-masked]:not(.hero *).is-visible .motion-line>span{ transition:none;animation:content-rise-settle 1100ms cubic-bezier(.22,.61,.36,1) both; } html body.home-page main [data-masked]:not(.hero *).is-visible .motion-line:nth-child(2)>span{animation-delay:100ms} html body.home-page main [data-masked]:not(.hero *).is-visible .motion-line:nth-child(3)>span{animation-delay:200ms} html body.home-page main [data-masked]:not(.hero *).is-visible .motion-line:nth-child(4)>span{animation-delay:300ms} html body.home-page main [data-masked]:not(.hero *).is-visible .motion-line:nth-child(n+5)>span{animation-delay:400ms} } @media(prefers-reduced-motion:reduce){ html body.home-page main [data-reveal]:not(.hero *),html body.home-page main .motion-line:not(.hero *)>span{animation:none!important;transition:none!important;transform:none!important;opacity:1!important;} } /* Scroll-through introduction. The WebGL hero remains outside this stage. */ html body.home-page #hero-statement.intro-scroll-enabled{ height:366svh;min-height:0;display:block;padding-block:0!important; } html body.home-page .intro-scroll-enabled .intro-scroll-stage{ position:sticky;top:0;height:100svh;display:grid;align-items:center; } html body.home-page .intro-scroll-enabled .hero-statement-inner, html body.home-page #top .intro-scroll-enabled #about.studio-section.page-section{ grid-area:1/1;width:100%;min-height:0;margin:0!important;padding:0!important; } html body.home-page .intro-scroll-enabled #about{flex-direction:column;} html body.home-page .intro-scroll-enabled :is(#statement-title,#studio-title){opacity:1!important;transform:none!important;animation:none!important;} html body.home-page .intro-scroll-enabled :is(#statement-title,#studio-title) .motion-line>span{ opacity:1!important;transform:none!important;animation:none!important;transition:none!important; } @media(prefers-reduced-motion:reduce){ html body.home-page .intro-scroll-stage{display:block;} } html body.home-page .intro-studio-link{margin-top:3rem;color:rgb(255 255 255 / 96%);} html body.home-page .intro-studio-link .line-link{border-bottom:2px solid var(--orange,#FF933C);white-space:nowrap;} html body.home-page .intro-scroll-enabled .intro-studio-link, html body.home-page .intro-scroll-enabled .intro-studio-link *{opacity:1!important;transform:none!important;animation:none!important;} @media(max-width:760px){ html body.home-page .intro-studio-link{margin-top:2rem;} } html body.home-page .intro-scroll-enabled #studio-title .scroll-letter{display:inline;opacity:.28;transition:opacity 160ms linear;} @media(prefers-reduced-motion:reduce){html body.home-page #studio-title .scroll-letter{opacity:1!important;transition:none!important;}} /* Home New: September 29 editorial expertise rows. */ html body.home-page .intro-studio-link .line-link{text-transform:none;} html body.home-page #top #services.home-expertise{display:block;width:var(--desktop-content-width,calc(100% - 48px));max-width:1600px;margin-inline:auto;padding:10rem 0 0;} html body.home-page #top #services.home-expertise #services-title{font:500 clamp(2rem,3.333333vw,3rem)/1.333333 'GC Gudlak',sans-serif;letter-spacing:.02em;text-transform:none;white-space:normal;margin:0;} html body.home-page .expertise-rows{margin-top:1rem;} html body.home-page .expertise-row{display:block;padding:2rem 0 3rem;border-bottom:1px solid #B3A69E66;} html body.home-page .expertise-number{display:block;font:400 1.25rem/1.75rem 'Helixa',sans-serif;color:#B3A69E;opacity:.5;text-align:left;} html body.home-page #top #services.home-expertise .expertise-row h3{margin:0.5rem 0 0;font:500 clamp(2.5rem,6.666667vw,6rem)/1.25 'GC Gudlak',sans-serif;letter-spacing:.02em;text-transform:uppercase;background:linear-gradient(135deg,#d3b393 0%,#fff 36%);background-clip:text;-webkit-background-clip:text;color:transparent;} html body.home-page .expertise-row p{margin:0;max-width:none;text-align:left;} html body.home-page .expertise-row .expertise-description{font:400 1.5rem/2rem 'Helixa',sans-serif;letter-spacing:.01em;color:#fff;} html body.home-page .expertise-row .expertise-capabilities{margin-top:0.5rem;font:400 1.125rem/1.5rem 'Helixa',sans-serif;color:#B3A69E;} html body.home-page #top .home-belief{width:var(--desktop-content-width,calc(100% - 48px));max-width:1600px;margin:0 auto;padding:20rem 0 7.5rem;} html body.home-page .home-belief p{max-width:1160px;margin:0;font:400 clamp(1.75rem,3.333333vw,3rem)/1.166667 'Helixa',sans-serif;color:rgb(255 255 255 / 96%);} @media(max-width:760px){ html body.home-page #top #services.home-expertise{width:calc(100% - 48px);padding-top:5rem;} html body.home-page #top #services.home-expertise .expertise-row h3{font-size:clamp(1.75rem,7.7vw,3.5rem);line-height:1.25;} html body.home-page .expertise-row{padding:1.75rem 0 2rem;} html body.home-page .expertise-number{font-size:1rem;line-height:1.5rem;} html body.home-page .expertise-row .expertise-description{margin-top:1rem;font-size:1.25rem;line-height:1.75rem;} html body.home-page .expertise-row .expertise-capabilities{font-size:1rem;line-height:1.5rem;} html body.home-page #top .home-belief{width:calc(100% - 48px);padding:5rem 0;} } html body.home-page #top #services.home-expertise .expertise-row h3{font-family:'GC Gudlak',sans-serif!important;} /* Scale the title from its left edge, with the same easing on hover and release. */ html body.home-page #top #services.home-expertise .expertise-row h3{display:grid;background:none;color:inherit;} html body.home-page .expertise-row h3>span{grid-area:1/1;font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;background:linear-gradient(135deg,#d3b393 0%,#fff 36%);background-clip:text;-webkit-background-clip:text;color:transparent;} html body.home-page .expertise-title-regular{display:block;width:fit-content;max-width:100%;font-weight:500;opacity:1;transform:scale(1);transform-origin:left center;transition:transform 650ms cubic-bezier(.22,1,.36,1);} html body.home-page .expertise-title-bold{display:none;} @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ html body.home-page .expertise-row:hover .expertise-title-regular{transform:scale(1.025);} } @media(prefers-reduced-motion:reduce){html body.home-page .expertise-title-regular{transition:none;}} html body.home-page #top #services.home-expertise .expertise-row h3>span{font-family:'GC Gudlak',sans-serif!important;} html body.home-page .expertise-row :is(.expertise-description,.expertise-capabilities){font-weight:350;} /* Large desktop Stories: compact section lead-in and half title padding. */ @media(min-width:1800px){ html body.home-page #top .testimonials.page-section{padding-top:10rem!important;} html body.home-page #top .testimonials .stories-heading{min-height:0;padding-block:2.5rem!important;} } /* Client relationships: authored desktop lines and the intro's letter reveal. */ html body.home-page #top .home-belief p{max-width:1200px;margin-inline:auto;text-align:center;font:400 clamp(1.75rem,3.888889vw,3.5rem)/1.142857 'Helixa',sans-serif;opacity:1!important;transform:none!important;animation:none!important;} html body.home-page .home-belief p>span{display:block;white-space:nowrap;} html body.home-page .home-belief .scroll-letter{opacity:.28;transition:opacity 160ms linear;} @media(max-width:760px){ html body.home-page #top .home-belief p{font-size:1.5rem;line-height:2rem;} html body.home-page .home-belief p>span{display:inline;white-space:normal;} } @media(hover:hover) and (pointer:fine){ html body.home-page .expertise-row:hover .expertise-title-regular{font-weight:700;} } @media(prefers-reduced-motion:reduce){html body.home-page .home-belief .scroll-letter{opacity:1!important;transition:none;}} /* One spacing owner for the Stories title, without a viewport-height spacer. */ @media(min-width:761px){ html body.home-page #top .testimonials.page-section{padding-top:0!important;} html body.home-page #top .testimonials .stories-heading{min-height:0;margin-block:0!important;padding-top:10rem!important;padding-bottom:7.5rem!important;} html body.home-page #top .testimonials .stories-heading h2{margin-block:0!important;} html body.home-page #top .testimonials .stories-layout{margin-top:0!important;} } /* Shared Home/Studio client cards: fluid sizing capped at 360 × 240. */ html body:is(.home-page,.editorial-page) #top .clients.page-section .figma-client-rows .client-row>li{ --client-card-width:clamp(180px,calc(120px + 12.5vw),360px); width:var(--client-card-width); flex:0 0 var(--client-card-width); height:auto; aspect-ratio:3/2; } /* Center the Why Artocea prompt and link together at every viewport size. */ html body.home-page #top .why .why-contact.work-contact{ margin-inline:auto; } /* Stories lead-in and the client relationship reading fold. */ @media(min-width:761px){ html body.home-page #top .testimonials .stories-heading{padding-top:15rem!important;} } html body.home-page #top .home-belief.belief-scroll-enabled{ height:calc(280svh + 160px);box-sizing:border-box;max-width:none;width:100%;padding:5rem 0 5rem!important;position:relative; } html body.home-page .belief-scroll-enabled .belief-scroll-stage{ position:sticky;top:0;height:100svh;display:grid;place-items:center; } html body.home-page .belief-scroll-copy{width:var(--desktop-content-width,calc(100% - 48px));max-width:1200px;margin-inline:auto;} @media(max-width:760px){html body.home-page .belief-scroll-copy{width:calc(100% - 48px);}} /* Keep the reference founder lines intact throughout desktop widths. */ @media(min-width:1101px){ html body:is(.home-page,.editorial-page) #top .founder.page-section .founder-copy{container-type:inline-size;} html body:is(.home-page,.editorial-page) #top .founder.page-section .founder-copy>p:not(.eyebrow){ font-size:clamp(1rem,4.2cqw,2rem);line-height:1.333333;max-width:none;width:100%;white-space:nowrap;letter-spacing:0; } html body .founder .founder-copy-break{display:inline;} } /* The studio invitation follows the completed paragraph reveal. */ html body.home-page .intro-scroll-enabled #about .intro-studio-link{ opacity:var(--intro-link-opacity,0)!important; } /* Gently fade in the invitation after the paragraph has finished revealing. */ html body.home-page .intro-scroll-enabled #about .intro-studio-link{ transition:opacity 700ms cubic-bezier(.22,1,.36,1); } @media(prefers-reduced-motion:reduce){ html body.home-page #about .intro-studio-link{transition:none;} } /* Add 80px to the three desktop section gaps in the September 29 review. */ @media(min-width:761px){ html body.home-page #top #services.home-expertise{padding-top:15rem!important;padding-bottom:5rem;} html body.home-page #top .testimonials .stories-heading{padding-top:20rem!important;} } @media(min-width:1800px){ html body.home-page #top #services.home-expertise{padding-top:20rem!important;} } /* Give client marks a little more breathing room within their cards. */ html body:is(.home-page,.editorial-page) #top .clients .figma-client-rows .client-row>li>img{ transform:none; } /* Tighten the space between the Why title and its cards by 40px. */ @media(min-width:761px){ html body.home-page #top .why .why-grid{margin-top:3.4375rem;} } /* Pin the editorial titles with one scroll owner and no competing reveal. */ html body.home-page #top .editorial-title-track.is-pinned-title{height:230svh;position:relative;} html body.home-page #top .is-pinned-title :is(.center-heading,.stories-heading){ position:sticky;top:0;height:100svh;min-height:0;box-sizing:border-box; display:grid;place-items:center;padding:2rem 0!important;margin:0!important; opacity:1!important;transform:none!important;animation:none!important; } html body.home-page #top .is-pinned-title .editorial-title-content{width:100%;text-align:center;} html body.home-page #top .is-pinned-title :is(h2,.motion-line>span){opacity:1!important;transform:none!important;animation:none!important;transition:none!important;} html body.home-page #top .is-pinned-title #why-title{font-size:min(var(--desktop-display,12vw),18svh)!important;} html body.home-page #top .is-pinned-title #testimonials-title{font-size:min(var(--desktop-display,12vw),23svh)!important;} @media(max-width:760px){ html body.home-page #top .is-pinned-title :is(#why-title,#testimonials-title){font-size:clamp(2rem,10vw,4.5rem)!important;} } /* Figma 389:1603: centered testimonial deck, 900 × 540 at full size. */ html body.home-page #top .stories-stack-section .stories-layout{display:block;width:100%;max-width:none;overflow:visible;} html body.home-page #top .stories-stack-section .stories-stage{display:grid;width:min(900px,calc(100vw - 48px));margin-inline:auto;gap:1.5rem;overflow:visible;transform:none;} html body.home-page #top .stories-stack-section .story-panel{ box-sizing:border-box;width:100%;min-width:0;min-height:540px;height:auto;margin:0;padding:4.5rem; display:flex;flex-direction:column;justify-content:space-between;gap:3rem;border-radius:16px; background:#fff;color:#201e1c;transform-origin:50% 80%;box-shadow:0 8px 32px #0000000a; } html body.home-page #top .stories-stack-section .story-panel blockquote{margin:0;font:400 2.25rem/3rem 'Helixa',sans-serif;letter-spacing:0;color:#201e1c;} html body.home-page #top .stories-stack-section .story-panel figcaption{display:flex;align-items:center;gap:1rem;margin:0;color:#201e1c;} html body.home-page #top .stories-stack-section .story-panel figcaption img{width:60px;height:60px;object-fit:contain;} html body.home-page #top .stories-stack-section .story-panel figcaption>div>span{font:700 1.5rem/1.75rem 'Helixa',sans-serif;} html body.home-page #top .stories-stack-section .story-meta{font:400 1rem/1.25rem 'Helixa',sans-serif;margin-top:0.25rem;display:block;} html body.home-page #top .has-scroll-stack .stories-layout{height:calc((var(--stack-count) - 1) * 150svh + 205svh);} html body.home-page #top .has-scroll-stack .testimonial-stack-pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;} html body.home-page #top .has-scroll-stack .stories-stage{position:relative;display:grid;} html body.home-page #top .has-scroll-stack .story-panel{grid-area:1/1;transition:none;will-change:transform;} html body.home-page #top .stories-stack-section .story-panel :is(blockquote,figcaption){opacity:1!important;transform:none!important;animation:none!important;} @media(max-width:1000px){ html body.home-page #top .stories-stack-section .story-panel{padding:2.5rem;min-height:460px;gap:2rem;} html body.home-page #top .stories-stack-section .story-panel blockquote{font-size:1.75rem;line-height:2.375rem;} } @media(max-width:760px){ html body.home-page #top .stories-stack-section .story-panel{padding:1.75rem;min-height:420px;gap:1.75rem;} html body.home-page #top .stories-stack-section .story-panel blockquote{font-size:1.375rem;line-height:1.875rem;} html body.home-page #top .stories-stack-section .story-panel figcaption>div>span{font-size:1.125rem;line-height:1.5rem;} html body.home-page #top .stories-stack-section .story-meta{font-size:0.8125rem;line-height:1.125rem;} } html body.home-page #top .stories-stack-section .story-panel blockquote{width:100%;max-width:738px;} /* Crossfade the surface color without making the front testimonial transparent. */ html body.home-page #top .has-scroll-stack .story-panel{ transition:background-color 400ms cubic-bezier(.22,1,.36,1); } @media(prefers-reduced-motion:reduce){ html body.home-page #top .stories-stack-section .story-panel{transition:none;} } /* Overlap the title's outgoing fold so the deck follows without an empty screen. */ html body.home-page #top .stories-stack-section.has-scroll-stack .stories-layout{ margin-top:-35svh!important; position:relative; } @media(prefers-reduced-motion:reduce){ html body.home-page #top .stories-stack-section .stories-layout{margin-top:0!important;} } /* Keep the cards solid while their vertical positions follow native scrolling. */ html body.home-page #top .why-grid>article.why-card-floating{ opacity:var(--why-card-opacity,1)!important;animation:none!important;transition:none!important; will-change:translate,opacity; } html body.home-page #top .why .why-grid{gap:1.5rem!important;} /* Reveal the contact prompt only after the cards settle and scrolling continues. */ html body #top .why .why-contact.why-contact-delayed{ opacity:0!important;transition:opacity 700ms cubic-bezier(.22,1,.36,1)!important; pointer-events:none;animation:none!important; } html body #top .why .why-contact.why-contact-delayed.why-contact-ready{opacity:1!important;pointer-events:auto;} /* Bring the cards into the outgoing title fold, with a subtle scale settle. */ @media(prefers-reduced-motion:no-preference){ html body #top .why .editorial-title-track.is-pinned-title + .why-grid{margin-top:-25svh!important;position:relative;} } html body #top .why-grid>article.why-card-floating{transform-origin:50% 0;will-change:translate,scale;} /* Hold the settled composition before revealing its invitation. */ html body #top .why-cards-hold.is-active{position:relative;padding-bottom:0;height:calc(var(--cards-height,700px) + 110svh);margin-top:0;} html body #top .why-cards-hold.is-active .why-cards-pin{position:sticky;top:24px;} html body #top .why-cards-hold .why-grid{margin-top:0!important;} html body #top .why-cards-hold .why-contact{margin-top:3rem!important;} html body #top .why-grid>article.why-card-floating{opacity:var(--why-card-opacity,1)!important;} /* Smooth surface-only hover, independent of the scroll animation. */ html body #top .why .why-grid>article, html body.home-page #top .why .why-grid>article.why-card-floating{ transition:background-color 650ms cubic-bezier(.22,1,.36,1)!important; } @media(hover:hover) and (pointer:fine){ html body #top .why .why-grid>article:hover{background-color:#fff!important;} } @media(prefers-reduced-motion:reduce){ html body #top .why .why-grid>article{transition:none!important;} } /* Softly follow native scrolling while each title line reveals. */ @media(prefers-reduced-motion:no-preference){ html body.home-page #top #statement-title .motion-line>span, html body.home-page #top .is-pinned-title .motion-line>span, html body #top :is(#philosophy-title,#work-title,#clients-title,#services-title,#founder-title) .motion-line>span{ transition:transform 260ms cubic-bezier(.2,.65,.3,1),opacity 260ms ease-out!important; } } /* The card invitation fades as one stationary group. */ html body #top .why .why-contact, html body #top .why .why-contact :is(p,a,span){ transform:none!important;translate:none!important;scale:none!important;animation:none!important; } html body #top .why .why-contact :is(p,a,span){ opacity:1!important;transition:none!important; } html body.home-page #top .home-belief + .clients.page-section{padding-top:5rem!important;} html body #top .clients .client-rows.client-carousel-arrival{ opacity:var(--clients-enter,0)!important; translate:0 calc(48px * (1 - var(--clients-enter,0)))!important; transition:opacity 320ms ease-out,translate 320ms cubic-bezier(.22,1,.36,1)!important; } html body #top .founder .founder-fade{ opacity:0!important;transform:none!important;translate:none!important;animation:none!important; transition:opacity 1000ms cubic-bezier(.22,1,.36,1) var(--founder-fade-delay,0ms)!important; } html body #top .founder .founder-fade.founder-fade-visible{opacity:1!important;} html body #top .founder .founder-fade :is(img,span){opacity:1!important;transform:none!important;translate:none!important;animation:none!important;} @media(prefers-reduced-motion:reduce){html body #top .founder .founder-fade{opacity:1!important;transition:none!important;}} html body .contact-panel .footer-arrival{ opacity:0!important;animation:none!important;transform:none!important;translate:none!important; transition:opacity 1000ms cubic-bezier(.22,1,.36,1) var(--footer-delay,0ms)!important; } html body .contact-panel .footer-arrival.footer-arrived{opacity:1!important;} html body .contact-panel .footer-arrival :is(span,img,a){opacity:1!important;animation:none!important;transform:none!important;translate:none!important;} @media(prefers-reduced-motion:reduce){html body .contact-panel .footer-arrival{opacity:1!important;transition:none!important;}} html body #top #work .case-arrival{ opacity:0!important; transition:opacity 1000ms cubic-bezier(.22,1,.36,1) var(--case-delay,0ms)!important; } html body #top #work .case-arrival.case-arrived{opacity:1!important;} @media(prefers-reduced-motion:reduce){html body #top #work .case-arrival{opacity:1!important;transition:none!important;}} /* Lightweight staggered CSS entrance; heading hover remains independent. */ @keyframes expertise-content-arrive{ from{filter:opacity(0);translate:0 28px;} to{filter:opacity(1);translate:0 0;} } @media(prefers-reduced-motion:no-preference){ html body #top .home-expertise .expertise-enter>:is(.expertise-number,h3,.expertise-description,.expertise-capabilities){ opacity:0!important; } html body #top .home-expertise .expertise-enter.expertise-entered>:is(.expertise-number,h3,.expertise-description,.expertise-capabilities){ opacity:1!important; animation:expertise-content-arrive 950ms cubic-bezier(.22,1,.36,1) both!important; } html body #top .home-expertise .expertise-enter.expertise-entered>h3{animation-delay:70ms!important;} html body #top .home-expertise .expertise-enter.expertise-entered>.expertise-description{animation-delay:140ms!important;} html body #top .home-expertise .expertise-enter.expertise-entered>.expertise-capabilities{animation-delay:210ms!important;} } html body #top #approach .approach-copy-arrival{ opacity:0!important;translate:0 24px!important;transform:none!important;animation:none!important; transition:opacity 1100ms cubic-bezier(.22,1,.36,1),translate 1100ms cubic-bezier(.22,1,.36,1)!important; } html body #top #approach .approach-copy-arrival.approach-copy-visible{opacity:1!important;translate:0 0!important;} @media(prefers-reduced-motion:reduce){html body #top #approach .approach-copy-arrival{opacity:1!important;translate:none!important;transition:none!important;}} /* Service content transitions independently from its title's hover scale. */ @media(prefers-reduced-motion:no-preference){ html body #top #services.home-expertise .expertise-enter>:is(.expertise-number,h3,.expertise-description,.expertise-capabilities){ animation:none!important;filter:none!important;opacity:0!important;translate:0 24px!important; transition:opacity 1000ms cubic-bezier(.22,1,.36,1),translate 1000ms cubic-bezier(.22,1,.36,1)!important; } html body #top #services.home-expertise .expertise-enter.expertise-entered>:is(.expertise-number,h3,.expertise-description,.expertise-capabilities){opacity:1!important;translate:0 0!important;} html body #top #services.home-expertise .expertise-enter>h3{transition-delay:80ms!important;} html body #top #services.home-expertise .expertise-enter>.expertise-description{transition-delay:160ms!important;} html body #top #services.home-expertise .expertise-enter>.expertise-capabilities{transition-delay:240ms!important;} html body #top #services.home-expertise .expertise-enter{border-bottom-color:transparent;transition:border-bottom-color 1100ms ease 240ms;} html body #top #services.home-expertise .expertise-enter.expertise-entered{border-bottom-color:rgba(211,179,147,.3);} } /* Override older always-visible rules on founder and footer content. */ html body #top .founder.page-section .founder-fade, html body #top footer.contact-panel .footer-arrival{ opacity:0!important;translate:0 20px!important;transform:none!important;animation:none!important; transition:opacity 1300ms cubic-bezier(.22,1,.36,1),translate 1300ms cubic-bezier(.22,1,.36,1)!important; transition-delay:var(--founder-fade-delay,var(--footer-delay,0ms))!important; } html body #top .founder.page-section .founder-fade.founder-fade-visible, html body #top footer.contact-panel .footer-arrival.footer-arrived{opacity:1!important;translate:0 0!important;} @media(prefers-reduced-motion:reduce){ html body #top .founder.page-section .founder-fade, html body #top footer.contact-panel .footer-arrival{opacity:1!important;translate:none!important;transition:none!important;} } html body .contact-panel .footer-line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;} html body .contact-panel .footer-line-content{display:block;transition:opacity 220ms linear,translate 220ms cubic-bezier(.22,1,.36,1)!important;} html body .contact-panel .contact-details>a{transition:opacity 220ms linear,translate 220ms cubic-bezier(.22,1,.36,1)!important;} /* Founder elements move as whole blocks; disable nested competing reveals. */ html body #top .founder .founder-photo img, html body #top .founder .founder-copy>p :is(span,br), html body #top .founder .founder-copy>a :is(span,img){ animation:none!important;transform:none!important;translate:none!important;opacity:1!important; } /* Fixed-duration CSS motion is visible at any scroll speed; no animation library. */ @keyframes site-text-fade-rise{ from{filter:opacity(0);transform:translate3d(0,20px,0);} to{filter:opacity(1);transform:translate3d(0,0,0);} } @media(prefers-reduced-motion:no-preference){ html body main .site-text-reveal:not(.h2-fade-title):not(.page-scroll-motion){filter:opacity(0);} html body main .site-text-reveal.site-text-visible:not(.h2-fade-title):not(.page-scroll-motion){ opacity:1!important;translate:none!important; animation:site-text-fade-rise 1100ms cubic-bezier(.22,1,.36,1) var(--text-reveal-delay,0ms) both!important; } } @media(prefers-reduced-motion:reduce){html body main .site-text-reveal{filter:none!important;animation:none!important;}} @keyframes title-word-rise{from{transform:translate3d(0,120%,0);}to{transform:translate3d(0,0,0);}} html body.home-page #top .cuberto-title .motion-line>span{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;} html body.home-page #top .cuberto-title .title-word-mask{display:inline-block;overflow:clip;vertical-align:top;margin:-.12em 0;padding:0;} html body.home-page #top .cuberto-title .title-word{display:inline-block;padding:.12em 0;transform:translate3d(0,120%,0);} html body.home-page #top .cuberto-title.cuberto-title-visible .title-word{animation:title-word-rise 1250ms cubic-bezier(.16,1,.3,1) var(--word-delay,0ms) both;} @media(prefers-reduced-motion:reduce){html body.home-page #top .cuberto-title .title-word{transform:none!important;animation:none!important;}} /* A single reversible owner for the title masks. */ html body.home-page #top .cuberto-title{filter:none!important;animation:none!important;} html body.home-page #top .cuberto-title .title-word{ animation:none!important;transform:translate3d(0,120%,0); transition:transform 1550ms cubic-bezier(.22,.8,.2,1) var(--word-delay,0ms)!important; } html body.home-page #top .cuberto-title.cuberto-title-visible .title-word{transform:translate3d(0,0,0);animation:none!important;} @media(prefers-reduced-motion:reduce){html body.home-page #top .cuberto-title .title-word{transform:none!important;transition:none!important;}} /* Scroll progress owns line movement; avoid lag from a second CSS transition. */ html body.home-page #top .cuberto-title.scroll-sensitive-title .title-word{transition:none!important;} /* Service text and divider share the same reversible scroll progress. */ html body #top .home-expertise .expertise-scroll{position:relative;border-bottom-color:transparent!important;} html body #top .home-expertise .expertise-scroll::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(211,179,147,.3);transform:scaleX(var(--service-line,0));transform-origin:left center;} html body #top .home-expertise .expertise-scroll>:is(.expertise-number,h3,.expertise-description,.expertise-capabilities){animation:none!important;filter:none!important;transition:none!important;} /* Footer headings reveal through full line masks, without a competing parent fade. */ html body #top .contact-panel .contact-copy>h2.footer-masked-title{opacity:1!important;transform:none!important;translate:none!important;filter:none!important;animation:none!important;} html body #top .contact-panel .footer-masked-title .footer-line-content{transition:none!important;} @media(prefers-reduced-motion:reduce){html body #top .contact-panel .footer-masked-title .footer-line-content{translate:none!important;transition:none!important;}} /* Animate carousel containers without interfering with slide/caption selection. */ html body #top #work .case-scroll-reveal{animation:none!important;transition:none!important;filter:none!important;} @media(prefers-reduced-motion:reduce){html body #top #work .case-scroll-reveal{opacity:1!important;translate:none!important;}} /* Continuous desktop sizing: retain mobile rules and the WebGL hero composition. */ @media(min-width:1024px){ html body #top :is(.home-expertise,.why-grid,.founder-copy,.contact-copy){min-width:0;} html body.home-page #top #services.home-expertise{container-type:inline-size;} html body.home-page #top #services.home-expertise .expertise-row h3{font-size:clamp(2.75rem,7.4cqw,7rem)!important;line-height:1.2!important;overflow-wrap:normal;} html body.home-page #top .expertise-row .expertise-description{font-size:clamp(1.25rem,1.5vw,1.75rem);line-height:1.4;} html body.home-page #top .expertise-row .expertise-capabilities{font-size:clamp(1rem,1.125vw,1.3125rem);line-height:1.5;} html body.home-page #top .why-grid{gap:1.5rem!important;} html body.home-page #top .why-grid article{min-width:0;padding:clamp(1.75rem,3vw,3rem);} html body.home-page #top .why-grid h3{font-size:clamp(1.625rem,2.25vw,2.5rem)!important;line-height:1.2!important;} html body.home-page #top .why-grid .why-copy p{font-size:clamp(1rem,1.15vw,1.25rem)!important;line-height:1.5!important;} html body.home-page #top .stories-stack-section .stories-stage{width:min(900px,calc(100vw - 2 * clamp(48px,7vw,120px)));} html body.home-page #top .stories-stack-section .story-panel{padding:clamp(2.25rem,4.5vw,4.5rem);min-height:clamp(420px,65svh,540px);gap:clamp(1.5rem,3vw,3rem);} html body.home-page #top .stories-stack-section .story-panel blockquote{font-size:clamp(1.5625rem,min(2.25vw,4.7svh),2.25rem);line-height:1.333333;} html body #top .contact-panel .contact-copy{container-type:inline-size;} html body #top .contact-panel .contact-copy>h2{font-size:clamp(3.5rem,10.8cqw,9rem)!important;line-height:1.2!important;} html body #top .contact-panel .footer-title-copy{font-size:1em!important;line-height:1.2!important;} html body #top .contact-panel .contact-details{min-width:0;} html body #top .contact-panel .contact-details>a{font-size:clamp(1.25rem,2.2vw,2.25rem);overflow-wrap:anywhere;} html body #top .footer-bottom{gap:clamp(1rem,2vw,2rem);flex-wrap:wrap;} html body #top .work-slide-caption h3{font-size:clamp(1.5rem,2vw,2.25rem)!important;line-height:1.3!important;} } @media(min-width:1024px){ html body.home-page #top .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} html body.home-page #top .why-grid article{container-type:inline-size;min-height:clamp(270px,21vw,336px);} html body.home-page #top .why-grid .why-art{width:clamp(120px,32cqw,220px);height:clamp(120px,32cqw,220px);right:clamp(20px,3cqw,36px);} html body.home-page #top .why-grid .why-art img{width:100%;height:100%;object-fit:contain;} html body.home-page #top .why-grid .why-copy{max-width:62%;min-width:0;} html body.home-page #top .why-grid .why-copy h3{font-size:clamp(1.5rem,5.8cqw,2.5rem)!important;line-height:1.2!important;} html body.home-page #top .why-grid .eyebrow{font-size:clamp(0.8125rem,1.1vw,1.125rem);} html body #top .founder-photo{max-width:100%;} html body #top .founder-photo>img{width:100%;height:auto;object-fit:contain;} html body #top :is(.case-image,.case-brand-board,.case-brand-pair,.case-phone-trio) img{max-width:100%;height:auto;} html body #top .contact-panel .footer-wordmark img{width:100%;max-width:100%;height:auto;} } /* Keep compact-screen navigation anchored to the viewport, with equal edge insets. */ @media(max-width:1100px){ html body .site-header.editorial-header{position:fixed!important;inset:0 0 auto!important;width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:clamp(1.5rem,3.9vw,2.5rem) clamp(1.5rem,3.9vw,2.5rem)!important;} html body .site-header.editorial-header .wordmark{display:block;flex:0 0 auto;width:clamp(112px,14.2vw,145px)!important;height:auto!important;margin:0!important;} html body .site-header.editorial-header .wordmark img{display:block;width:100%!important;height:auto!important;} html body .site-header.editorial-header .editorial-menu-button{position:relative!important;inset:auto!important;flex:0 0 auto;margin:0 0 0 auto!important;width:48px!important;height:48px!important;transform:none!important;} } /* Full-bleed client rails must not widen the document on large screens. */ html body.home-page #top .clients .client-rows{width:100vw;max-width:100vw;margin-inline:calc((100% - 100vw)/2);overflow-x:clip;} html body .site-header.editorial-header .editorial-menu-button{box-sizing:border-box!important;} /* Header uses viewport gutters, independent of the editorial content container. */ html body .site-header.editorial-header{ position:fixed!important;inset:0 0 auto!important;box-sizing:border-box!important; width:100%!important;max-width:none!important;margin:0!important; display:flex!important;align-items:center!important;justify-content:space-between!important; padding:2.5rem!important; } html body .site-header.editorial-header .wordmark{flex:0 0 auto;margin:0!important;} html body .site-header.editorial-header .editorial-menu-button{position:relative!important;inset:auto!important;margin:0 0 0 auto!important;box-sizing:border-box!important;transform:none!important;} @media(max-width:600px){html body .site-header.editorial-header{padding:1.5rem!important;}} /* Native hand on actions; only active work VIEW surfaces replace it. */ html body :is(a[href],button,summary,[role="button"],[role="link"],input[type="submit"],input[type="button"],input[type="reset"],input[type="checkbox"],input[type="radio"],select,.service-options label):not(:disabled):not([aria-disabled="true"]), html body :is(a[href],button,summary,[role="button"],[role="link"],.service-options label):not(:disabled):not([aria-disabled="true"]) * { cursor:pointer!important; } @media(hover:hover) and (pointer:fine){ html body .work-deck.has-arrow-cursor a[href], html body .work-deck.has-arrow-cursor a[href] *, html body #work a.project.has-open-cursor, html body #work a.project.has-open-cursor *, html body .case-related-grid a .case-image.has-open-cursor, html body .case-related-grid a .case-image.has-open-cursor * { cursor:none!important; } } /* Preserve authored desktop paragraph lines at every desktop width. */ @media(min-width:1024px){ html body.home-page #top #about #studio-title.studio-description { font-size:clamp(1.875rem,3.333333vw,3rem)!important;line-height:1.2!important;max-width:1080px;width:100%; } html body.home-page #top #about #studio-title .intro-line-break { display:inline!important; } } /* Scale the complete testimonial composition together on desktop. */ @media(min-width:1024px){ html body.home-page #top .stories-stack-section .stories-stage { width:min(900px,68vw,100svh);container-type:inline-size; } html body.home-page #top .stories-stack-section .story-panel { padding:8cqw;min-height:60cqw;gap:5.333333cqw;border-radius:2cqw; } html body.home-page #top .stories-stack-section .story-panel blockquote { font-size:4cqw;line-height:1.333333;max-width:none; } html body.home-page #top .stories-stack-section .story-panel figcaption { gap:1.777778cqw; } html body.home-page #top .stories-stack-section .story-panel figcaption img { width:6.666667cqw;height:6.666667cqw; } html body.home-page #top .stories-stack-section .story-panel figcaption>div>span { font-size:2.666667cqw;line-height:1.2; } html body.home-page #top .stories-stack-section .story-meta { font-size:1.777778cqw;line-height:1.3; } } /* More room for founder copy and a quieter invitation on compact desktops. */ @media(min-width:1101px) and (max-width:1600px){ html body:is(.home-page,.editorial-page) #top .founder.page-section { grid-template-columns:minmax(0,42fr) minmax(0,52fr);column-gap:6%; } html body:is(.home-page,.editorial-page) #top .founder.page-section .founder-copy>p:not(.eyebrow) { width:100%;max-width:none;font-size:4cqw;line-height:1.5; } } @media(min-width:761px) and (max-width:1600px){ html body .founder .founder-copy .line-link, html body .founder .founder-copy .line-link span { font-size:clamp(1.125rem,1.5vw,1.375rem)!important;line-height:1.4!important;letter-spacing:0; } html body .founder .founder-copy .line-link { width:fit-content;max-width:100%;gap:1rem; } html body .founder .founder-copy .line-link img { width:1em;height:1em; } } /* Shared compact-desktop type scale: secondary copy follows viewport size. */ @media(min-width:761px) and (max-width:1600px){ html body { --compact-link:clamp(18px,1.5vw,24px);--compact-copy:clamp(16px,1.25vw,20px);--compact-meta:clamp(13px,1vw,16px); } html body :is(.line-link,.studio-founder-link) img { width:1em!important;height:1em!important; } html body :is(.expertise-description,.expertise-capabilities,.work-project-services,.project-services,.philosophy-note,.studio-process p,.editorial-values p,.case-story>p,.contact-top p,.contact-copy>p) { font-size:var(--compact-copy)!important;line-height:1.5!important; } html body :is(.eyebrow,.founder-photo small,.footer-bottom,.footer-bottom a,.case-meta,.project-meta) { font-size:var(--compact-meta)!important;line-height:1.5!important; } html body :is(.editorial-lead,.work-lead,.studio-thinking p) { font-size:clamp(1.25rem,1.75vw,1.75rem)!important;line-height:1.5!important; } } @media(min-width:1024px) and (max-width:1600px){ html body.home-page #top .why .why-grid>article { height:auto;min-height:0;grid-template-rows:auto auto;row-gap:clamp(1.75rem,2.5vw,2.5rem);padding:clamp(1.75rem,3vw,3rem);align-content:start; } html body.home-page #top .why .why-grid>article>.eyebrow { margin:0; } html body.home-page #top .why .why-grid>article .why-copy { align-self:start;margin:0; } html body.home-page #top .why .why-grid>article .why-copy p { margin-bottom:0; } } @media(min-width:1024px){ html body #top #approach { container-type:inline-size; } html body #top #approach #philosophy-title { font-size:clamp(4rem,9cqw,9rem)!important;line-height:1.2!important; } html body #top #approach .philosophy-description { font-size:2.15cqw!important;line-height:1.5!important;width:60ch;max-width:100%; } } /* Compact desktops retain the founder's two-column composition. */ @media(min-width:1024px) and (max-width:1600px){ html body:is(.home-page,.editorial-page) #top .founder.page-section { display:grid!important;grid-template-columns:minmax(0,42fr) minmax(0,52fr)!important;column-gap:6%!important;align-items:center; } html body #top .founder.page-section .founder-copy { min-width:0;container-type:inline-size;padding-top:0; } html body #top .founder.page-section .founder-copy>p:not(.eyebrow) { font-size:4cqw!important;line-height:1.5!important;width:100%;max-width:none;white-space:nowrap; } html body #top .founder.page-section .founder-copy-break { display:inline; } html body #top .founder.page-section .founder-photo { width:100%;min-width:0;max-width:none;margin:0; } html body #top .founder.page-section .founder-copy #founder-title { font-size:clamp(2.25rem,9cqw,4rem)!important;line-height:1.2!important; } } @media(min-width:1024px) and (max-width:1600px){ html body #top .founder.page-section>.founder-photo { grid-column:1!important;grid-row:1!important; } html body #top .founder.page-section>.founder-copy { grid-column:2!important;grid-row:1!important;width:100%;max-width:100%; } } /* Keep the founder heading beside the portrait, below the head's top edge. */ @media(min-width:1024px) and (max-width:1600px){ html body #top .founder.page-section>.founder-copy { align-self:center;padding-top:clamp(3rem,5vw,5rem)!important;padding-bottom:0!important;box-sizing:border-box; } html body #top .founder.page-section .founder-copy #founder-title { max-width:100%;margin-left:0; } } /* Responsive hierarchy shared by Home, editorial pages, and case studies. */ html body :is(.editorial-main,.case-study,.work-page main) :is(h1,h2,h3){line-height:1.2;} html body :is(.editorial-container,.case-container,.services-detail-card,.case-story,.editorial-split)>*{min-width:0;} html body :is(.studio-process li,.editorial-values li)::before{top:0;text-align:left;} html body .contact-work li{align-items:flex-start;} @media(min-width:1024px){ html body :is(.editorial-main,.case-study) :is(.editorial-lead,.case-hero>p){font-size:clamp(1.375rem,2vw,2rem)!important;line-height:1.4!important;} html body :is(.services-detail-copy,.services-detail-copy p,.services-mix-copy p,.case-copy p,.editorial-values p,.studio-process p){font-size:clamp(1.125rem,1.5vw,1.5rem)!important;line-height:1.5!important;} html body .founder.page-section{display:grid!important;grid-template-columns:minmax(0,42fr) minmax(0,52fr)!important;column-gap:6%!important;align-items:center;} html body .founder.page-section>.founder-photo{grid-column:1!important;grid-row:1!important;width:100%;max-width:none;margin:0;} html body .founder.page-section>.founder-copy{grid-column:2!important;grid-row:1!important;min-width:0;width:100%;container-type:inline-size;align-self:center;padding-top:clamp(3rem,5vw,5rem);padding-bottom:0;} html body .founder.page-section .founder-copy>p:not(.eyebrow){font-size:clamp(1.125rem,4cqw,2rem)!important;line-height:1.5!important;width:100%;max-width:none;white-space:nowrap;} html body .founder.page-section .founder-copy-break{display:inline;} html body .founder.page-section #founder-title{font-size:clamp(2.25rem,9cqw,4.5rem)!important;line-height:1.2!important;} } @media(max-width:1023px){ html body{--responsive-body:clamp(16px,1.1vw + 12px,20px);--responsive-lead:clamp(20px,1.7vw + 13px,28px);--responsive-link:clamp(16px,1vw + 12px,20px);--responsive-meta:clamp(13px,.65vw + 10px,16px);} html body .editorial-main{--editorial-gutter:clamp(1.5rem,4vw,2.5rem);} html body :is(.editorial-container,.case-study .case-container){width:calc(100% - 2 * clamp(24px,4vw,40px));max-width:100%;margin-inline:auto;} html body :is(.editorial-intro,.case-study .case-hero){padding-top:clamp(8.25rem,18vw,11rem);} html body :is(.editorial-main h1.editorial-title,.case-study h1,.work-page #work-page-title){font-size:clamp(2rem,8.2vw,5rem)!important;line-height:1.2!important;letter-spacing:0!important;} html body :is(.editorial-main h2.editorial-title,.case-study h2,.clients #clients-title,.founder #founder-title){font-size:clamp(1.875rem,5.4vw,3.375rem)!important;line-height:1.2!important;} html body :is(.editorial-lead,.work-lead,.case-study .case-hero>p,.studio-belief p,.services-statement){font-size:var(--responsive-lead)!important;line-height:1.45!important;max-width:100%;} html body :is(.services-detail-copy,.services-detail-copy p,.services-mix-copy p,.case-study .case-copy p,.editorial-values p,.studio-process p,.studio-thinking p,.founder .founder-copy>p,.contact-copy>p,.contact-top p){font-size:var(--responsive-body)!important;line-height:1.55!important;white-space:normal!important;} html body .line-link img{width:1em!important;height:1em!important;} html body :is(.eyebrow,.case-facts dt,.case-facts dd,.case-related p,.work-project-services,.services-detail-heading ul,.footer-bottom,.footer-bottom a){font-size:var(--responsive-meta)!important;line-height:1.5!important;} html body :is(.editorial-values h3,.studio-process h3,.services-detail-heading h2,.case-related h3,.work-caption,.work-slide-caption h3){font-size:clamp(1.5rem,3.6vw,2.25rem)!important;line-height:1.25!important;} html body :is(.editorial-section,.studio-belief,.studio-thinking,.services-mix){margin-top:clamp(4.5rem,12vw,7.5rem);} html body :is(.studio-thinking,.services-mix){padding-block:clamp(3rem,8vw,5rem);} html body :is(.studio-thinking h2,.services-mix h2,.case-study .case-statement h2){font-size:clamp(2rem,7.2vw,4.5rem)!important;line-height:1.2!important;min-height:0;max-width:100%;} html body :is(.services-mix-copy,.contact-work-bottom){gap:2rem;} html body .case-study{--case-gap:clamp(4rem,10vw,6.5rem);} html body .case-study .case-statement-inner{width:calc(100% - 32px);max-width:100%;} html body .case-study .case-statement p{font-size:var(--responsive-body)!important;line-height:1.5;margin-top:2rem;} html body .founder .founder-copy-break{display:none!important;} html body .founder.page-section .founder-copy{width:100%;padding-top:0!important;} html body .founder.page-section .founder-photo>img{width:100%;height:auto;max-width:100%;object-fit:contain;} html body .contact-panel{padding-inline:clamp(1.5rem,4vw,2.5rem);} html body .contact-panel .contact-top{grid-template-columns:minmax(0,1fr);gap:2rem;} html body .contact-panel .contact-copy>h2{font-size:clamp(2.25rem,7.2vw,4.5rem)!important;line-height:1.2!important;} html body .contact-panel .contact-copy>h2 :is(.footer-title-copy,.footer-line-mask,.footer-line-content){font-size:inherit;line-height:inherit;} html body .contact-panel .contact-details a{font-size:clamp(1.125rem,3vw,1.75rem)!important;overflow-wrap:anywhere;} html body .footer-bottom{flex-wrap:wrap;gap:1rem 1.5rem;} html body .footer-wordmark{width:100%;height:auto;max-width:100%;} html body :is(.enquiry-field,.enquiry-field input,.enquiry-field textarea){font-size:var(--responsive-body)!important;line-height:1.5;min-width:0;max-width:100%;} html body .enquiry-form legend{font-size:clamp(1.5rem,3.6vw,2.25rem)!important;line-height:1.3;} html body .service-options{gap:0.75rem;} html body .service-options span{font-size:var(--responsive-meta);line-height:1.4;padding:0.75rem 1rem;} html body .contact-intro aside a{font-size:clamp(1.25rem,3vw,1.75rem);white-space:normal;overflow-wrap:anywhere;} } @media(min-width:761px) and (max-width:1023px){ html body .services-detail-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:2rem;gap:2rem;min-height:0;} html body .editorial-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;} html body .services-principles{grid-template-columns:1fr;} html body .case-study .case-story{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:2rem;} html body .studio-process li{box-sizing:border-box;width:60%;} html body .studio-process li:nth-child(2){margin-left:13%;} html body .studio-process li:nth-child(3){margin-left:26%;} html body .studio-process li:nth-child(4){margin-left:40%;width:60%;} } @media(max-width:760px){ html body .site-header.editorial-header{padding:1.5rem!important;} html body :is(.editorial-split,.services-detail-card,.services-mix-copy,.case-study .case-story,.case-study .case-overview,.case-study .case-related-grid){grid-template-columns:minmax(0,1fr)!important;gap:1.75rem;} html body .case-study .case-facts{grid-column:1;} html body .services-detail-card{padding:1.75rem 1.5rem;min-height:0;} html body .services-detail-heading h2{margin-top:1.5rem;} html body .studio-process li::before,html body .editorial-values li::before{top:0!important;text-align:left!important;} html body .contact-panel .contact-copy>h2{font-size:clamp(2rem,8.6vw,3.5rem)!important;} html body .contact-panel .contact-details{min-width:0;width:100%;} html body .enquiry-actions{flex-direction:column;align-items:flex-start;} html body .enquiry-actions button{min-height:48px;font-size:1rem;padding:1rem 1.5rem;} html body .founder .founder-photo figcaption{max-width:100%;} } /* Studio's legacy founder rules must use the same responsive container as Home. */ @media(min-width:1024px){ html body #founder.founder.page-section>.founder-copy{container-type:inline-size!important;width:100%!important;max-width:none!important;padding-top:clamp(3rem,5vw,5rem)!important;padding-bottom:0!important;} html body #founder.founder.page-section>.founder-photo{width:100%!important;max-width:none!important;align-self:end;} html body #founder.founder.page-section .founder-copy>p:not(.eyebrow){font-size:clamp(1.125rem,4cqw,2rem)!important;max-width:none!important;width:100%!important;line-height:1.5!important;white-space:nowrap!important;} html body #founder.founder.page-section .founder-copy #founder-title{font-size:clamp(2.25rem,9cqw,4.5rem)!important;line-height:1.2!important;} html body #founder.founder.page-section .founder-copy-break{display:inline!important;} } /* Continuous type sizes across tablet/desktop breakpoint boundaries. */ html body :is(.editorial-main h1.editorial-title,.case-study h1,.work-page #work-page-title){font-size:clamp(2rem,8.2vw,7.5rem)!important;line-height:1.2!important;} html body :is(.editorial-main,.case-study) :is(.editorial-lead,.case-hero>p), html body.work-page .work-lead{font-size:clamp(1.25rem,2.5vw,2rem)!important;line-height:1.45!important;} html body :is(.services-detail-copy,.services-detail-copy p,.services-mix-copy p,.case-study .case-copy p,.editorial-values p,.studio-process p){font-size:clamp(1.125rem,1.5vw,1.5rem)!important;line-height:1.55!important;} html body :is(.editorial-main h2.editorial-title,.case-study .case-story h2){font-size:clamp(1.875rem,4.5vw,4rem)!important;line-height:1.2!important;} /* September 29: one desktop hierarchy for inner heroes, colored panels and footers. */ @media(min-width:1024px){ html body {--inner-hero-size:clamp(72px,8.2vw,120px);--inner-lead-size:clamp(20px,1.666667vw,28px);--panel-title-size:clamp(64px,6.666667vw,112px);--panel-copy-size:clamp(18px,1.666667vw,28px);} html body :is(.editorial-main h1.editorial-title,.case-study h1,.work-page #work-page-title){font-size:var(--inner-hero-size)!important;line-height:1.1!important;} html body :is(.editorial-main,.case-study) :is(.editorial-lead,.case-hero>p),html body.work-page .work-lead{font-size:var(--inner-lead-size)!important;line-height:1.45!important;} html body.work-page .work-showcase .work-caption,html body.work-page .work-showcase .work-caption a{font-size:clamp(1.375rem,1.666667vw,1.75rem)!important;line-height:1.2!important;} html body :is(#top #approach #philosophy-title,.studio-thinking h2,.services-mix h2,.case-study .case-statement #case-statement-title){font-size:var(--panel-title-size)!important;line-height:1.15!important;min-height:0!important;padding-block:0;max-width:100%;} html body :is(#approach .philosophy-description,.studio-thinking p,.services-page .services-mix-copy p,.case-study .case-statement p){font-size:var(--panel-copy-size)!important;line-height:1.5!important;margin-top:2.5rem!important;} html body .services-page .services-mix-copy{margin-top:2.5rem!important;font-size:var(--panel-copy-size)!important;line-height:1.5!important;} html body .services-page .services-mix-copy p{margin-top:0!important;} html body :is(.studio-page,.contact-page) .editorial-values h3{font-size:clamp(1.5rem,2.083333vw,2.125rem)!important;line-height:1.2!important;} html body :is(.studio-page,.contact-page) .editorial-values p{font-size:clamp(1.125rem,1.388889vw,1.375rem)!important;line-height:1.5!important;} html body :is(.studio-page,.contact-page) .editorial-values li::before{top:2px!important;font-size:clamp(1rem,1.388889vw,1.375rem)!important;line-height:1.2!important;text-align:left!important;} html body .services-page .services-detail-number{font-size:clamp(1rem,1.388889vw,1.375rem)!important;line-height:1.3!important;} html body .services-page .services-statement{font-size:clamp(1.5rem,2.222222vw,2.5rem)!important;line-height:1.4!important;min-height:0!important;} html body .services-page .services-faq #services-faq-title{margin-bottom:2rem!important;} html body .services-page .services-faq .faq-question{font-size:clamp(1.25rem,1.666667vw,1.75rem)!important;line-height:1.35!important;} html body .services-page .services-faq .faq-answer p{font-size:clamp(1rem,1.25vw,1.25rem)!important;line-height:1.5!important;} html body footer#contact.contact-panel{box-sizing:border-box;width:calc(100% - 32px)!important;max-width:none!important;margin:1rem!important;padding:clamp(4rem,7.777778vw,8rem) clamp(3rem,7.222222vw,7.5rem) 2rem!important;} html body footer#contact.contact-panel .contact-top{display:grid!important;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)!important;gap:8%!important;align-items:start!important;} html body footer#contact.contact-panel .contact-top .contact-copy{container-type:normal!important;min-width:0;} html body footer#contact.contact-panel .contact-top .contact-copy>h2{font-size:clamp(3.5rem,5.555556vw,6rem)!important;line-height:1.15!important;font-weight:500!important;letter-spacing:0!important;margin:0!important;} html body footer#contact.contact-panel .contact-top .contact-copy>h2 *{font-size:inherit!important;line-height:inherit!important;} html body footer#contact.contact-panel .contact-top .contact-copy>p{font-size:clamp(1.25rem,1.666667vw,1.75rem)!important;line-height:1.5!important;max-width:100%!important;margin:2rem 0 0!important;} html body footer#contact.contact-panel .footer-project-link{margin-top:2.5rem!important;} html body footer#contact.contact-panel .contact-details{margin:0!important;padding:0!important;min-width:0;align-self:start!important;} html body footer#contact.contact-panel .contact-details a{font-size:clamp(1.25rem,2.083333vw,2.25rem)!important;line-height:1.4!important;} html body :is(#top,.studio-page) #founder.founder.page-section{width:calc(100% - 2 * clamp(48px,8.333333vw,120px))!important;max-width:1440px!important;margin-inline:auto!important;grid-template-columns:minmax(0,42fr) minmax(0,52fr)!important;column-gap:6%!important;} html body :is(#top,.studio-page) #founder .founder-copy>p:not(.eyebrow){font-size:clamp(1.125rem,4cqw,2rem)!important;line-height:1.5!important;margin:0 0 2rem!important;} html body :is(#top,.studio-page) #founder .founder-copy #founder-title{font-size:clamp(2.25rem,9cqw,4.5rem)!important;line-height:1.2!important;margin:0 0 2.5rem!important;} } /* Colored surfaces use solid ink, including their animated line wrappers. */ html body .services-page .services-detail-heading h2, html body .services-page .services-detail-heading h2 *, html body .services-page #services-mix-title, html body .services-page #services-mix-title *, html body main.case-study .case-statement #case-statement-title, html body main.case-study .case-statement #case-statement-title *, html body main.case-study .case-statement p {background:none!important;color:#201e1c!important;-webkit-text-fill-color:#201e1c!important;} @media(min-width:1024px){ html body .services-page .services-mix .services-mix-copy>p{margin-top:0!important;} html body footer#contact.contact-panel .contact-copy>h2, html body footer#contact.contact-panel .contact-copy>p, html body footer#contact.contact-panel .contact-details>a{font-family:Helixa,sans-serif!important;} } @media(min-width:1024px){ html body #top #approach .philosophy-description{font-size:var(--panel-copy-size)!important;line-height:1.5!important;} html body .services-page #services-mix-title + .services-mix-copy>p{margin-top:0!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values h3{font-size:clamp(1.5rem,2.083333vw,2.125rem)!important;line-height:1.2!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values p{font-size:clamp(1.125rem,1.388889vw,1.375rem)!important;line-height:1.5!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values li::before{top:2px!important;font-size:clamp(1rem,1.388889vw,1.375rem)!important;line-height:1.2!important;} html body .services-page #services-faq-title + .faq-item{padding-top:1.5rem!important;} } /* Mobile composition: centered Home reading stages and consistent inner pages. */ @media(max-width:760px){ html body.home-page #top :is(.center-heading,.stories-heading){text-align:center!important;} html body.home-page #hero-statement.intro-scroll-enabled{height:330svh!important;} html body.home-page #top .editorial-title-track.is-pinned-title{height:150svh!important;} html body.home-page #top :is(.intro-studio-link,.why-contact,.work-contact){white-space:nowrap;} html body.home-page #top :is(.intro-studio-link,.why-contact,.work-contact) :is(p,a,span){white-space:nowrap;} html body.home-page #top .has-scroll-stack .stories-layout{transform:none!important;opacity:1!important;} html body.home-page #top .testimonial-stack-pin{height:100svh;top:0;display:grid;place-items:center;} html body.home-page #top .stories-stage{width:calc(100vw - 48px);margin:auto;} html body.home-page #top .story-panel{min-height:0!important;padding:clamp(1.5rem,6vw,2.25rem)!important;gap:2rem!important;} html body.home-page #top .story-panel blockquote{font-size:clamp(1.125rem,4.8vw,1.5rem)!important;line-height:1.4!important;} html body :is(.editorial-main h1.editorial-title,.case-study h1,.work-page #work-page-title){font-size:clamp(2.125rem,9.2vw,4.25rem)!important;line-height:1.2!important;} html body :is(.editorial-main,.case-study,body.work-page main) h2{ text-align:left!important;} html body :is(.editorial-main,.case-study,body.work-page main) h2 :is(.editorial-line-mask,.editorial-line-content,.motion-line){text-align:left!important;} html body footer#contact .footer-bottom{display:flex!important;flex-flow:row wrap!important;align-items:center;gap:1.25rem!important;} html body footer#contact .footer-bottom>span{order:1;} html body footer#contact .footer-bottom>a{order:2;} html body footer#contact .footer-bottom>nav{order:3;flex:0 0 100%;width:100%;margin-top:0.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;} } /* Native hand cursor remains available with a mouse at every screen size. */ html body :is(a[href],button,summary,[role="button"],[role="link"],select,label[for]):not(:disabled):not([aria-disabled="true"]){cursor:pointer!important;} @media(hover:hover) and (pointer:fine){ html body .work-deck.has-arrow-cursor a[href],html body .work-deck.has-arrow-cursor a[href] *,html body #work a.project.has-open-cursor,html body #work a.project.has-open-cursor *,html body .case-related-grid a .case-image.has-open-cursor,html body .case-related-grid a .case-image.has-open-cursor *{cursor:none!important;} } .philosophy-copy-break{display:none;} @media(min-width:1024px){ html body #top #approach .philosophy-description{width:100%;max-width:none;} .philosophy-copy-break{display:block;} html body.home-page #top #about #studio-title.studio-description{font-size:clamp(1.75rem,3.055556vw,2.75rem)!important;} html body.home-page #top .home-belief p{font-size:clamp(1.75rem,3.055556vw,2.75rem)!important;line-height:1.3!important;} html body.home-page #top .stories-stack-section .stories-stage{width:min(810px,62vw,90svh)!important;} html body :is(#top,.studio-page) #founder.founder.page-section .founder-copy>p:not(.eyebrow){font-size:clamp(1.125rem,3.7cqw,1.875rem)!important;margin-bottom:1.5rem!important;} html body :is(#top,.studio-page) #founder .founder-copy>.line-link{margin-top:0.5rem!important;} html body footer#contact.contact-panel{padding-top:clamp(4rem,6.1vw,6.5rem)!important;padding-bottom:0!important;} html body footer#contact.contact-panel .contact-top .contact-copy>h2{font-size:clamp(3.25rem,4.9vw,5.25rem)!important;} html body footer#contact.contact-panel .contact-top .contact-copy>p{font-size:clamp(1.125rem,1.527778vw,1.625rem)!important;margin-top:1.5rem!important;} html body footer#contact.contact-panel .contact-details a{font-size:clamp(1.25rem,1.805556vw,2rem)!important;} html body footer#contact.contact-panel .footer-bottom{padding-block:2.5rem!important;} } /* Compact desktop refinements for Work, Services and Contact. */ @media(min-width:1024px){ html body.work-page .work-showcase h1#work-page-title{font-size:clamp(4.25rem,7.6vw,7rem)!important;line-height:1.06!important;} html body.work-page .work-showcase #work-page-title :is(.title-desktop-lines,.editorial-line-mask,.editorial-line-content){line-height:1.06!important;} html body.work-page .work-showcase p.work-lead{font-size:clamp(1.1875rem,1.527778vw,1.625rem)!important;line-height:1.35!important;} html body.work-page .work-showcase .work-item{width:94%;justify-self:center;} html body .services-page .services-statement{font-size:clamp(1.75rem,2.5vw,2.75rem)!important;line-height:1.4!important;} html body .services-page .services-mix{padding-block:clamp(5rem,9.166667vw,9rem)!important;} html body .services-page .services-mix #services-mix-title,html body .services-page #services-mix-title :is(.editorial-line-mask,.editorial-line-content){line-height:1.08!important;} html body :is(.contact-page,.audience-page)>.enquiry-form.wide-surface{padding-block:4rem!important;} html body :is(.contact-page,.audience-page) .enquiry-form legend{font-size:1.875rem!important;line-height:1.3!important;margin-bottom:1.5rem;} html body :is(.contact-page,.audience-page) .enquiry-form fieldset{margin-bottom:2rem;} html body :is(.contact-page,.audience-page) .service-options{gap:1rem;} html body :is(.contact-page,.audience-page) .service-options span{font-size:1.25rem!important;line-height:1.4;padding:0.75rem 1.25rem;} html body :is(.contact-page,.audience-page) .enquiry-field{font-size:1.5rem!important;line-height:1.4;margin-top:1.5rem;} html body :is(.contact-page,.audience-page) .enquiry-actions{margin-top:2.5rem;gap:1.5rem;} html body :is(.contact-page,.audience-page) .enquiry-actions button{font-size:1.125rem;padding:1.125rem 1.625rem;} } html body :is(.menu-button,.editorial-menu-button,.menu-toggle,.site-nav a),html body :is(.menu-button,.editorial-menu-button,.menu-toggle,.site-nav a) *{cursor:pointer!important;} /* One solid-ink footer title on every route and every motion wrapper. */ html body footer#contact.contact-panel .contact-copy>h2, html body footer#contact.contact-panel .contact-copy>h2 *{ color:#201e1c!important;-webkit-text-fill-color:#201e1c!important; background:none!important;background-image:none!important; background-clip:border-box!important;-webkit-background-clip:border-box!important; } .founder-reading-stage{display:flow-root;} html body .founder-reading-stage #founder{margin-bottom:0!important;} /* Complete the copy reveal before the reading hold begins. */ html body .founder-reading-stage .founder-copy>p, html body .founder-reading-stage .founder-copy>a{opacity:1!important;translate:none!important;--page-opacity:1!important;--page-rise:0px!important;} @media(min-width:1024px){ html body .services-page .services-mix h2#services-mix-title{line-height:1.08!important;} } /* Clickability is mandatory, including icon strokes and animated labels. */ html body #site-mobile-menu :is(a,button),html body #site-mobile-menu :is(a,button) *, html body #mobile-menu :is(a,button),html body #mobile-menu :is(a,button) *, html body .site-header :is(a,button),html body .site-header :is(a,button) *, html body button:not(:disabled),html body button:not(:disabled) *, html body [role="button"]:not([aria-disabled="true"]),html body [role="button"]:not([aria-disabled="true"]) *{ cursor:pointer!important; } /* Shared reading interval: native scroll holds every colored feature panel. */ .panel-reading-track{display:flow-root;position:relative;} html body .panel-reading-track> :is(#approach,.studio-thinking,.services-mix,.case-statement,footer.contact-panel){margin-block:0!important;transform:none!important;} .panel-reading-track:has(>.studio-thinking),.panel-reading-track:has(>.services-mix){margin-top:clamp(4.5rem,12vw,10rem);} html body .panel-reading-track[data-reading="true"] :is(h2,p,a,.footer-bottom,.footer-wordmark,.contact-details){--page-opacity:1!important;--page-rise:0px!important;opacity:1!important;} .statement-desktop-break{display:none;} @media(min-width:1024px){ html body :is(.editorial-main,.case-study) :is(.editorial-lead,.case-hero>p),html body.work-page .work-showcase p.work-lead{line-height:1.55!important;} html body footer#contact.contact-panel .footer-mobile-break{display:block!important;} html body footer#contact.contact-panel .footer-bottom{padding-bottom:3.5rem!important;} .statement-desktop-break{display:block;} html body .services-page .services-statement{font-size:clamp(1.625rem,2.5vw,3rem)!important;line-height:1.25!important;max-width:100%;} } /* Consistent compact hero rhythm; animation wrappers inherit the same leading. */ html body :is(.editorial-main h1.editorial-title,.case-study h1,.work-showcase h1#work-page-title), html body :is(.editorial-main h1.editorial-title,.case-study h1,.work-showcase h1#work-page-title) :is(.title-desktop-lines,.title-mobile-lines,.editorial-line-mask,.editorial-line-content){line-height:1.05!important;} html body.work-page .work-showcase h1#work-page-title,html body.work-page .work-showcase #work-page-title :is(.title-desktop-lines,.title-mobile-lines,.editorial-line-mask,.editorial-line-content){line-height:1.05!important;} /* Compact desktop hero and footer spacing, shared across inner routes. */ @media(min-width:1024px) and (max-width:1600px){ html body :is(.editorial-main .editorial-intro,.case-study .case-hero), html body.work-page .work-showcase{padding-top:clamp(8.5rem,11.111111vw,11rem)!important;} html body :is(.editorial-main h1.editorial-title,.case-study h1), html body.work-page .work-showcase h1#work-page-title{font-size:clamp(4.25rem,6.944444vw,7rem)!important;line-height:1.02!important;margin-top:0!important;margin-bottom:0!important;} html body :is(.editorial-main h1.editorial-title,.case-study h1) :is(.title-desktop-lines,.editorial-line-mask,.editorial-line-content), html body.work-page .work-showcase #work-page-title :is(.title-desktop-lines,.editorial-line-mask,.editorial-line-content){line-height:1.02!important;} html body :is(.editorial-intro .editorial-lead,.case-study .case-hero>p), html body.work-page .work-showcase p.work-lead{margin-top:1.5rem!important;margin-bottom:0!important;} html body.work-page .work-showcase .projects{margin-top:7rem!important;} html body.work-page .work-showcase .work-item{justify-self:start!important;margin-left:0!important;margin-right:auto!important;} html body footer#contact.contact-panel .contact-top .contact-copy>p{margin-top:1rem!important;margin-bottom:0!important;} html body footer#contact.contact-panel .footer-project-link{margin-top:1.5rem!important;} html body footer#contact.contact-panel>.footer-wordmark{top:0!important;margin-top:3rem!important;margin-bottom:0!important;} html body footer#contact.contact-panel>.footer-bottom{margin-top:0!important;padding-top:1.5rem!important;} } @media(min-width:1024px) and (max-width:1600px){ html body :is(.editorial-main h1.editorial-title,.case-study h1,.work-showcase h1#work-page-title){font-size:clamp(4.25rem,6.944444vw,7rem)!important;line-height:1.02!important;} html body :is(.editorial-main h1.editorial-title,.case-study h1,.work-showcase h1#work-page-title) :is(.title-desktop-lines,.title-mobile-lines,.editorial-line-mask,.editorial-line-content){line-height:1.02!important;} } /* Clip horizontal artwork without creating a scroll container that breaks sticky. */ html body .editorial-main,html body main.case-study{overflow:clip!important;} @media(min-width:1024px){ html body .services-page .services-statement, html body .studio-page .studio-belief p{font-size:clamp(1.75rem,3.055556vw,2.75rem)!important;line-height:1.3!important;} html body .studio-page>.panel-reading-track+section.editorial-section{margin-top:6rem!important;} html body .studio-page{padding-bottom:0!important;margin-bottom:0!important;} html body .studio-page .founder-reading-stage #founder{padding-bottom:0!important;} html body .studio-page .founder-photo,html body .studio-page .founder-photo>img{margin-bottom:0!important;} } /* Keep the wordmark clear of the footer divider on every page. */ html body footer#contact.contact-panel>.footer-wordmark{margin-bottom:clamp(1.5rem,2.777778vw,2.5rem)!important;} html body footer#contact.contact-panel>.footer-bottom{margin-top:0!important;} /* Keep founder copy clear of the portrait's head while raising its reading position. */ @media(min-width:1024px){ html body :is(#top,.studio-page) #founder.founder.page-section>.founder-copy{padding-top:2rem!important;} } html body .panel-reading-track[data-founder-joined]>footer#contact.contact-panel{margin-top:0!important;} @media(min-width:1024px){ html body .studio-page .studio-belief>p{width:100%!important;max-width:none!important;} html body .studio-page .studio-belief-line{display:block;white-space:nowrap;} } @media(min-width:1024px){ html body .contact-page .contact-intro{padding-bottom:6.5rem!important;} } @media(min-width:1024px) and (max-width:1600px){ html body .studio-page>.panel-reading-track+section.editorial-section{margin-top:12rem!important;} } /* Preserve the designed three-line Studio history copy on desktop. */ @media(min-width:1024px){ html body.editorial-page .studio-page .studio-years h2.editorial-title, html body.editorial-page .studio-page .studio-years h2.editorial-title :is(.editorial-line-mask,.editorial-line-content){line-height:1.08!important;} html body.editorial-page .studio-page .studio-years p.editorial-lead{font-size:clamp(1.25rem,1.666667vw,1.75rem)!important;line-height:1.5!important;margin-top:2rem!important;width:max-content!important;max-width:100%!important;} html body .studio-page .studio-years .studio-years-copy-break{display:block!important;} } /* 1440 composition: one total hero-to-content interval. */ @media(min-width:1024px) and (max-width:1600px){ html body.work-page .work-showcase .projects, html body .studio-page .studio-intro-photo, html body .services-page>.services-details, html body .case-study .case-hero>.case-image{margin-top:7.5rem!important;} html body .services-page>.services-intro{padding-bottom:0!important;margin-bottom:0!important;} html body .contact-page .contact-intro{padding-bottom:7.5rem!important;margin-bottom:0!important;} html body :is(.contact-page,.audience-page)>.enquiry-form.wide-surface{margin-top:0!important;} html body .case-study .case-hero>p{margin-bottom:0!important;} html body :is(.studio-page,.contact-page) .editorial-values li{margin-bottom:2.5rem!important;} html body :is(.studio-page,.contact-page) .editorial-values li:last-child{margin-bottom:0!important;} html body :is(#top,.studio-page) #founder.founder.page-section>.founder-copy{padding-top:0.5rem!important;} html body :is(#top,.studio-page) #founder .founder-copy #founder-title{margin-bottom:1.75rem!important;} html body footer#contact.contact-panel>.footer-bottom{padding-top:2.25rem!important;} } /* Statement wrappers retain the same separation as neighboring case-study blocks. */ html body .case-study>.panel-reading-track:has(>.case-statement){margin-top:clamp(4.5rem,11.111111vw,10rem)!important;} /* Fixed panel separation and compact reading lists on smaller screens. */ @media(min-width:1024px) and (max-width:1600px){ html body footer#contact.contact-panel .contact-top .contact-copy>p{margin-top:0.75rem!important;} html body :is(#top,.editorial-main,.case-study)>.panel-reading-track:has(>:is(#approach,.studio-thinking,.services-mix,.case-statement)){margin-top:7.5rem!important;margin-bottom:7.5rem!important;} html body :is(#top,.editorial-main,.case-study)>.panel-reading-track:has(>:is(#approach,.studio-thinking,.services-mix,.case-statement))+section{margin-top:0!important;} html body .studio-page>.panel-reading-track+section.editorial-section{margin-top:0!important;} } @media(max-width:1600px){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values{row-gap:0!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values li{margin-top:0!important;margin-bottom:1.75rem!important;padding-top:0!important;padding-bottom:0!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values li:last-child{margin-bottom:0!important;} } @media(max-width:760px){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values li{margin-bottom:1.5rem!important;} } /* Tablet/mobile composition: native flow, deliberate spacing, shared gutters. */ @media(max-width:1023px){ html body{--compact-gutter:1.5rem;} html body :is(.editorial-main,.case-study){--editorial-gutter:var(--compact-gutter);} html body :is(.editorial-container,.case-study .case-container){width:calc(100% - 2 * var(--compact-gutter))!important;margin-inline:auto!important;} html body :is(.editorial-main,#top,.case-study) h2{text-align:left!important;} html body.home-page #top :is(#statement-title,#why-title,#testimonials-title){text-align:center!important;} html body :is(.panel-reading-track,.founder-reading-stage){height:auto!important;translate:none!important;} html body .panel-reading-track>*,html body .founder-reading-stage #founder{position:relative!important;top:auto!important;} html body .panel-reading-track:not(:has(footer)){margin-block:6rem!important;} html body :is(.hero-scroll,.intro-scroll-stage,.belief-scroll-stage,.editorial-title-track,.editorial-title-track .center-heading,.editorial-title-track .stories-heading,.testimonial-stack-pin,.why-cards-hold,.why-cards-pin){height:auto!important;min-height:0!important;position:relative!important;top:auto!important;} html.motion-enabled body .hero-scroll{padding-bottom:0!important;margin-bottom:0!important;} html.motion-enabled body .hero-scroll>.hero{position:relative!important;top:auto!important;} html body.home-page #top #hero-statement{height:auto!important;padding-block:6rem!important;} html body.home-page #top .intro-scroll-stage{display:block!important;} html body.home-page #top :is(.hero-statement-inner,#about){position:relative!important;grid-area:auto!important;opacity:1!important;transform:none!important;} html body.home-page #top #about{margin-top:6rem!important;} html body.home-page #top .home-belief{height:auto!important;padding-block:6rem!important;} html body.home-page #top .editorial-title-track{margin-bottom:4rem!important;} html body.home-page #top .stories-layout{height:auto!important;} html body.home-page #top .stories-stage{display:grid!important;gap:1.5rem!important;width:100%!important;} html body.home-page #top .story-panel{grid-area:auto!important;position:relative!important;transform:none!important;opacity:1!important;} html body :is(.studio-process li,.editorial-values li){width:100%!important;margin-left:0!important;} html body.editorial-page main.editorial-main :is(.studio-process li,.editorial-values li){margin-top:0!important;margin-bottom:1.75rem!important;padding-block:0!important;} html body :is(.studio-process h3,.editorial-values h3){line-height:1.2!important;} html body :is(.studio-process p,.editorial-values p){margin-top:0.75rem!important;white-space:normal!important;} html body :is(.studio-process p,.editorial-values p) br{display:none;} html body .services-page .services-detail-card{min-height:0!important;gap:1.5rem!important;margin-bottom:1.25rem!important;} html body .services-page .services-faq .faq-question{font-size:calc(clamp(1.25rem,3vw,1.625rem) - 0.1666875rem)!important;} html body :is(.project-image,.project-media,.work-image,.work-item img,.work-slide img,.project>img,.case-image,.case-image img){border-radius:16px!important;} html body :is(#top,.studio-page) #founder.founder.page-section{display:flex!important;flex-direction:column!important;width:calc(100% - 2 * var(--compact-gutter))!important;margin-inline:auto!important;gap:3rem!important;padding-top:6rem!important;padding-bottom:0!important;} html body :is(#top,.studio-page) #founder.founder.page-section>.founder-copy{order:0!important;width:100%!important;padding:0!important;} html body :is(#top,.studio-page) #founder.founder.page-section>.founder-photo{order:1!important;width:min(100%,480px)!important;margin:0!important;align-self:flex-start!important;position:relative;} html body :is(#top,.studio-page) #founder.founder.page-section .founder-copy>p:not(.eyebrow){white-space:normal!important;font-size:clamp(1.125rem,3.2258vw,1.5rem)!important;line-height:1.4!important;} html body :is(#top,.studio-page) #founder .founder-copy-break{display:none!important;} html body :is(#top,.studio-page) #founder .founder-photo figcaption{left:auto!important;right:0!important;bottom:7%!important;width:max-content!important;max-width:100%!important;} html body #founder .founder-photo figcaption>span{font-size:clamp(1.25rem,3.2258vw,1.5rem)!important;white-space:nowrap!important;} html body #founder .founder-photo figcaption>small{font-size:clamp(0.6875rem,1.88vw,0.875rem)!important;white-space:nowrap!important;} html body footer#contact.contact-panel{height:auto!important;min-height:0!important;margin-bottom:0!important;padding-bottom:0!important;} html body footer#contact.contact-panel>.footer-wordmark{top:0!important;margin-bottom:1.5rem!important;} html body footer#contact.contact-panel>.footer-bottom{padding-bottom:2rem!important;} html body :is(main#top,main.editorial-main,main.case-study){padding-bottom:0!important;margin-bottom:0!important;} html body .panel-reading-track:has(footer){margin-bottom:0!important;padding-bottom:0!important;} } @media(min-width:600px) and (max-width:1023px){ html body{--compact-gutter:3rem;} html body.home-page #top :is(.hero-statement,.home-belief){padding-inline:3rem!important;box-sizing:border-box;} html body.home-page #top :is(.why-grid,.stories-layout,.clients-heading){width:100%!important;margin-inline:0!important;} html body.home-page #top #about{padding-inline:3rem!important;} html body.home-page #top #about #studio-title{font-size:2.25rem!important;line-height:3rem!important;} html body :is(.editorial-main,#top,.case-study) h2{font-size:3rem!important;line-height:1.3!important;} html body.home-page #top :is(#statement-title,#why-title,#testimonials-title){font-size:clamp(4rem,10.7527vw,5.5rem)!important;line-height:1.2!important;} html body .services-page .services-statement,html body .studio-page .studio-belief p{font-size:2.25rem!important;line-height:3rem!important;padding-inline:0!important;} html body :is(.wide-surface,#approach.philosophy,.case-statement){width:calc(100% - 32px)!important;margin-inline:1rem!important;box-sizing:border-box;} html body .wide-surface>.editorial-container,html body .case-study .case-statement-inner{width:calc(100% - 64px)!important;margin-inline:2rem!important;} html body.home-page #top #approach.philosophy{padding-inline:2rem!important;text-align:left!important;} html body #approach :is(h2,p),html body :is(.studio-thinking,.services-mix,.case-statement) :is(h2,p){text-align:left!important;} html body .services-page .services-details{width:calc(100% - 96px)!important;margin-inline:3rem!important;} html body .services-page .services-detail-card{padding:2rem!important;grid-template-columns:1fr!important;} html body .services-page .services-detail-heading h2{font-size:1.875rem!important;line-height:1.2!important;margin-top:1.25rem!important;} html body :is(.editorial-values h3,.studio-process h3){font-size:1.75rem!important;line-height:1.2!important;} html body.home-page #top .hero .hero-details{left:48px!important;top:132px!important;bottom:auto!important;width:335px!important;max-width:calc(100% - 96px)!important;gap:1.5rem!important;} html body.home-page #top .hero .hero-intro{font-size:1.75rem!important;line-height:2.25rem!important;} html body footer#contact.contact-panel{padding-inline:2rem!important;width:calc(100% - 32px)!important;margin-inline:1rem!important;} html body .contact-reach>.editorial-title{margin-inline:3rem!important;} } @media(max-width:1023px){ html body :is(#top,.studio-page) #founder.founder.page-section>.founder-photo{max-width:480px!important;min-width:0!important;flex:none!important;} html body .work-slide-image{border-radius:16px!important;overflow:hidden;} html body.home-page #top .panel-reading-track:has(footer){margin-block:0!important;} } @media(min-width:600px) and (max-width:1023px){ html body.home-page #top :is(#work,.why,.testimonials,#services,.home-belief){width:calc(100% - 96px)!important;margin-inline:3rem!important;padding-inline:0!important;} html body.home-page #top #about{width:100%!important;margin-inline:0!important;padding-inline:0!important;} html body.home-page #top .hero-statement{padding-inline:3rem!important;} html body.home-page #top .hero-statement-inner{width:100%!important;margin-inline:0!important;} html body .clients .clients-heading{margin-inline:3rem!important;width:calc(100% - 96px)!important;} html body.home-page #top .clients .clients-heading{margin-inline:0!important;width:100%!important;} html body :is(.studio-page,.contact-page) .editorial-split{grid-template-columns:1fr!important;} } @media(max-width:1023px){ html body.home-page #top .stories-stack-section .stories-stage{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;gap:1.25rem!important;scrollbar-width:thin;scroll-padding:0;} html body.home-page #top .stories-stack-section .story-panel{flex:0 0 100%!important;min-width:0!important;box-sizing:border-box;scroll-snap-align:center;scroll-snap-stop:always;visibility:visible!important;pointer-events:auto!important;} .testimonial-controls{display:flex;justify-content:center;align-items:center;gap:1.25rem;margin-top:1.5rem;} .testimonial-controls button{width:44px;height:44px;border:1px solid #a9957c;border-radius:50%;background:none;color:white;font-size:1.5rem;cursor:pointer;} .testimonial-controls span{font:1rem/1.5rem Helixa,sans-serif;color:white;} } @media(min-width:1024px){.testimonial-controls{display:none;}} @media(max-width:599px){ html body :is(.editorial-section,.studio-belief,.studio-process,.contact-reach,.services-faq,.case-story,.case-overview,.case-related){margin-block:7.5rem!important;} html body .panel-reading-track:not(:has(footer)){margin-block:7.5rem!important;} html body.home-page #top :is(.why,.testimonials,.home-expertise,.clients,.work-slider-section){margin-block:7.5rem!important;padding-block:0!important;} html body.home-page #top :is(#hero-statement,.home-belief){padding-block:7.5rem!important;} html body.home-page #top #about{margin-top:7.5rem!important;} html body.home-page #top .editorial-title-track{margin-bottom:7.5rem!important;} html body :is(#top,.studio-page) #founder.founder.page-section{padding-top:7.5rem!important;} html body.home-page #top .stories-stack-section .stories-layout{margin-top:0!important;} } /* Colored surfaces always use a left-aligned reading edge. */ html body :is(#approach.philosophy,.studio-thinking,.services-mix,.case-statement,.services-detail-card,.why-card,footer.contact-panel), html body :is(#approach.philosophy,.studio-thinking,.services-mix,.case-statement,.services-detail-card,.why-card,footer.contact-panel) :is(h2,h3,p,.motion-line,.editorial-line-mask,.editorial-line-content){text-align:left!important;} html body.home-page #top footer#contact.contact-panel .contact-top .contact-copy>h2, html body footer#contact.contact-panel .contact-top .contact-copy>h2, html body footer#contact.contact-panel .contact-top .contact-copy>h2 *{text-align:left!important;justify-content:flex-start!important;align-items:flex-start!important;} html body footer#contact.contact-panel .contact-top .contact-copy>h2{margin-left:0!important;margin-right:0!important;width:100%!important;} html body footer#contact.contact-panel .footer-title-copy{display:block!important;width:100%!important;} @media(max-width:1023px){ html body footer#contact.contact-panel{overflow:clip!important;} html body.home-page #top .stories-stack-section .stories-stage{padding:0!important;} } @media(max-width:599px){ html body.home-page #top :is(.intro-studio-link,.why-contact,.work-contact){white-space:normal!important;} html body.home-page #top :is(.intro-studio-link,.why-contact,.work-contact) .line-link{white-space:nowrap!important;} } @media(max-width:1023px){html body.home-page #top .stories-stack-section .stories-layout{margin-inline:0!important;width:100%!important;}} @media(min-width:600px) and (max-width:1023px){html body.editorial-page main.services-page .services-details .services-statement{font-size:2.25rem!important;line-height:3rem!important;padding-inline:0!important;}} @media(max-width:1023px){ html body.home-page #top #work.work-slider-section{width:calc(100% - 2 * var(--compact-gutter))!important;margin-inline:var(--compact-gutter)!important;padding-inline:0!important;} html body.home-page #top #work .work-deck{--project-width:calc(100vw - 2 * var(--compact-gutter));width:100vw!important;margin-inline:calc(-1 * var(--compact-gutter))!important;padding-inline:var(--compact-gutter)!important;scroll-padding-inline:var(--compact-gutter)!important;} html body.home-page #top #work .work-slide{flex-basis:var(--project-width)!important;} html body.home-page #top #work :is(.work-slide-image,.work-slide-image img,.work-slide-image picture){border-radius:16px!important;overflow:hidden!important;} html body.home-page #top #work .work-slider-toolbar{margin-inline:0!important;width:100%!important;} html body.home-page #top .stories-stack-section .story-panel{border-radius:16px!important;} html body.home-page #top .stories-stack-section .stories-stage{scrollbar-width:none!important;} html body.home-page #top .stories-stack-section .stories-stage::-webkit-scrollbar{display:none;} } @media(min-width:600px) and (max-width:1023px){html body.home-page #top section:is(.testimonials,.why,.home-expertise,.clients).page-section{padding-inline:0!important;width:calc(100% - 96px)!important;margin-inline:3rem!important;}html body.home-page #top .testimonials.stories-stack-section .stories-layout{width:100%!important;margin-inline:0!important;}} /* Three editorial Home titles retain centered lines at every breakpoint. */ html body.home-page #top :is(#statement-title,#why-title,#testimonials-title), html body.home-page #top :is(#statement-title,#why-title,#testimonials-title) *{text-align:center!important;} @media(max-width:599px){ html body.home-page #top #about #studio-title.studio-description, html body.home-page #top #about #studio-title.studio-description *, html body.home-page #top .home-belief p, html body.home-page #top .home-belief p *{text-align:left!important;} } /* Compact stacked deck: swipe between cards without pinning page scroll. */ @media(max-width:1023px){ html body.home-page #top .stories-stack-section .stories-stage{display:grid!important;overflow:visible!important;gap:0!important;scroll-snap-type:none!important;padding-top:1.75rem!important;touch-action:pan-y;isolation:isolate;} html body.home-page #top .stories-stack-section .story-panel{grid-area:1/1!important;width:100%!important;align-self:stretch;transform-origin:center top;transition:transform 350ms ease,opacity 250ms ease!important;} html body.home-page #top .stories-stack-section .story-panel[data-stack-depth="0"]{z-index:3;transform:none!important;opacity:1!important;background:#fff!important;pointer-events:auto!important;} html body.home-page #top .stories-stack-section .story-panel[data-stack-depth="1"]{z-index:2;transform:translateY(-14px) scaleX(.93)!important;opacity:1!important;background:#b9a082!important;pointer-events:none!important;} html body.home-page #top .stories-stack-section .story-panel[data-stack-depth="2"]{z-index:1;transform:translateY(-28px) scaleX(.86)!important;opacity:1!important;background:#51483c!important;pointer-events:none!important;} html body.home-page #top .stories-stack-section .story-panel[data-stack-depth="hidden"]{visibility:hidden!important;opacity:0!important;pointer-events:none!important;} html body.home-page #top .stories-stack-section .story-panel:not([data-stack-depth="0"]) :is(blockquote,figcaption){visibility:hidden!important;} html body.home-page #top .stories-stack-section .story-panel{border-radius:16px!important;} } @media(prefers-reduced-motion:reduce){html body.home-page #top .stories-stack-section .story-panel{transition:none!important;}} /* Project imagery keeps the same 16px corner geometry on every screen. */ html body :is(#top,#work,.case-study,.case-designed) :is(.work-slide-image,.project-media,.case-image,.case-artwork,.case-phone-tile,.case-phone-trio){border-radius:16px!important;overflow:hidden;} html body :is(#top,#work,.case-study,.case-designed) :is(.work-slide-image,.project-media,.case-artwork) :is(img,picture){border-radius:16px!important;} html body.home-page #top :is(#statement-title,#why-title,#testimonials-title){width:100%!important;max-width:none!important;margin-inline:auto!important;} html body.home-page #top :is(#statement-title,#why-title,#testimonials-title) :is(.motion-line,.motion-line>span,.title-word-mask){display:block!important;width:100%!important;text-align:center!important;} html body.home-page #top :is(.hero-statement-inner,.editorial-title-content){width:100%!important;} @media(min-width:600px) and (max-width:1023px){ html body.home-page #top #about #studio-title.studio-description, html body.home-page #top .home-belief p{font-size:2.25rem!important;line-height:3rem!important;font-weight:400!important;text-align:center!important;} } @media(max-width:599px){html body.home-page main#top section.home-belief.page-section p,html body.home-page main#top section.home-belief.page-section p *{text-align:left!important;}} /* Tablet section rhythm: one 160px interval, owned by the incoming block. */ @media(min-width:600px) and (max-width:1023px){ html body.home-page main#top>section:is(.work-slider-section,.why,.home-expertise,.testimonials,.home-belief,.clients){margin-block:0!important;padding-top:10rem!important;padding-bottom:0!important;} html body.home-page main#top>.panel-reading-track:not(:has(footer)){margin-top:10rem!important;margin-bottom:0!important;} html body :is(#top,.studio-page) #founder.founder.page-section{padding-top:10rem!important;padding-bottom:0!important;margin-block:0!important;} html body :is(.editorial-main,.case-study)>.panel-reading-track:not(:has(footer)){margin-top:10rem!important;margin-bottom:0!important;} html body :is(.editorial-main,.case-study)>:is(.editorial-section,.studio-belief,.studio-gallery,.contact-reach,.services-faq,.case-story,.case-overview,.case-related){margin-top:10rem!important;margin-bottom:0!important;} html body.home-page main#top .editorial-title-track{margin-bottom:10rem!important;} html body.home-page main#top #about{margin-top:10rem!important;} } /* Mobile spacing has one owner per boundary; never add section margin to padding. */ @media(max-width:599px){ html body.home-page main#top>section:is(.work-slider-section,.why,.home-expertise,.testimonials,.home-belief,.clients){margin-block:0!important;padding-top:7.5rem!important;padding-bottom:0!important;} html body.home-page main#top>.panel-reading-track:not(:has(footer)){margin-top:7.5rem!important;margin-bottom:0!important;} html body.home-page main#top #hero-statement{padding-top:7.5rem!important;padding-bottom:0!important;} html body.home-page main#top #about{margin-top:7.5rem!important;margin-bottom:0!important;padding-block:0!important;min-height:0!important;} html body.home-page main#top :is(.hero-statement-inner,.belief-scroll-copy){padding-block:0!important;margin-block:0!important;min-height:0!important;height:auto!important;} html body.home-page main#top .home-belief p{margin-block:0!important;text-align:left!important;} html body.home-page main#top #about #studio-title{margin-block:0!important;text-align:left!important;} html body.home-page main#top .intro-studio-link{margin-top:2rem!important;margin-bottom:0!important;} html body.home-page main#top :is(.intro-studio-link,.why-contact,.work-contact) :is(p,a,span){margin-left:0!important;} html body.home-page main#top .editorial-title-track{margin-block:0 7.5rem!important;padding-block:0!important;} html body.home-page main#top :is(.center-heading,.stories-heading,.editorial-title-content){height:auto!important;min-height:0!important;padding-block:0!important;margin-block:0!important;} html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) .founder-reading-stage{margin-block:0!important;} html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) #founder.founder.page-section{padding-top:7.5rem!important;margin-block:0!important;} } @media(max-width:1023px){ html body.home-page main#top :is(.stories-layout,.testimonial-stack-pin){overflow:visible!important;} html body.home-page main#top .stories-stack-section .stories-stage{padding-top:2.25rem!important;} html body.home-page main#top .stories-stack-section .story-panel[data-stack-depth="1"]{transform:translateY(-18px) scaleX(.93)!important;} html body.home-page main#top .stories-stack-section .story-panel[data-stack-depth="2"]{transform:translateY(-36px) scaleX(.86)!important;} } @media(min-width:1024px){html body.home-page main#top>.panel-reading-track:has(>#approach){margin-top:10rem!important;}} @media(min-width:600px) and (max-width:1023px){ html body{--content-image-radius:16px!important;} html body.home-page main#top #work :is(.work-slide,.work-slide-image,.work-slide-image picture,.work-slide-image img), html body.work-page #work :is(.project,.project-media,.project-media img), html body .case-study :is(.case-image,.case-artwork){border-radius:16px!important;clip-path:inset(0 round 16px)!important;} html body.home-page main#top #approach #philosophy-title, html body :is(.studio-thinking,.services-mix,.case-statement) h2{font-size:4.5rem!important;line-height:5.625rem!important;text-align:left!important;} html body :is(#approach,.studio-thinking,.services-mix,.case-statement) h2 :is(.motion-line,.editorial-line-mask,.editorial-line-content){line-height:inherit!important;} html body.home-page main#top .stories-stack-section .story-panel{min-height:389px!important;padding:2.5rem!important;gap:2.5rem!important;} html body.home-page main#top .home-belief p{margin-block:0!important;} html body.home-page main#top .clients .clients-heading,html body.home-page main#top .clients #clients-title{margin-top:0!important;padding-top:0!important;} } @media(max-width:599px){ html body.home-page main#top #about .intro-studio-link{margin:2rem 0 0!important;} html body.home-page main#top #about .intro-studio-link>*{margin-left:0!important;margin-right:0!important;} } @media(min-width:600px) and (max-width:1023px){html body.home-page main#top section#clients.clients.page-section{padding-top:10rem!important;}} .story-swipe-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} @media(max-width:1023px){ body.home-page .stories-stack-section .stories-stage .story-panel{transition:transform 380ms cubic-bezier(.22,.61,.36,1),opacity 300ms ease!important} body.home-page .stories-stack-section .stories-stage .story-panel[data-swipe-exit="up"]{transform:translate3d(0,-115%,0) rotate(-3deg)!important;opacity:0!important;pointer-events:none} body.home-page .stories-stack-section .stories-stage .story-panel[data-swipe-exit="down"]{transform:translate3d(0,115%,0) rotate(3deg)!important;opacity:0!important;pointer-events:none} } @media(prefers-reduced-motion:reduce){body.home-page .stories-stack-section .stories-stage .story-panel{transition:none!important}} /* Center every footer content row on the shared page grid at every width. */ html body footer#contact.contact-panel > :is(.contact-top,.footer-wordmark,.footer-bottom){margin-left:auto!important;margin-right:auto!important;box-sizing:border-box;max-width:100%!important} @media(min-width:1101px){ html body footer#contact.contact-panel{padding-inline:0!important} html body footer#contact.contact-panel > :is(.contact-top,.footer-wordmark,.footer-bottom){width:var(--desktop-content-width)!important;max-width:calc(100% - 64px)!important} } /* Home: Figma mouse cue remains anchored while the intro title/copy change. */ body.home-page .intro-mouse-cue{display:none} @media(min-width:1024px) and (prefers-reduced-motion:no-preference){ html body.home-page .intro-mouse-cue.is-active{display:block;position:fixed;left:50%;bottom:48px;width:16px;height:24px;box-sizing:border-box;border:1.2px solid #B3A69E;border-radius:100px;transform:translateX(-50%);pointer-events:none;z-index:3} html body.home-page .intro-mouse-cue::after{content:'';position:absolute;left:4.8px;top:4.8px;width:4px;height:6px;border-radius:100px;background:#B3A69E;animation:scroll-cue-descent 2.2s cubic-bezier(.4,0,.3,1) infinite} } /* Both desktop paragraphs: original clamp(28px,3.055556vw,44px) × 1.2. */ @media(min-width:1101px){ html body.home-page #top #about #studio-title.studio-description, html body.home-page #top .home-belief p{font-size:clamp(2.1rem,3.666667vw,3.3rem)!important;line-height:1.3!important} } /* Inner heroes occupy the first viewport before following content begins. */ html body .editorial-main :is(.service-hero,.contact-intro){box-sizing:border-box;min-height:0!important;padding-bottom:0!important;margin-bottom:var(--hero-next-gap,7.5rem)!important} html body .studio-intro-photo,html body .case-hero>.case-image{margin-top:var(--hero-next-gap,5rem)!important} html body.work-page .work-showcase>.projects{margin-top:var(--hero-next-gap,5rem)!important} /* One layout system for editorial orange statement panels. */ html body :is(#approach.philosophy,.studio-thinking,.services-mix,.services-redesign .service-promise,.case-study .case-statement){box-sizing:border-box;border-radius:16px!important;padding:7.5rem max(2rem,calc(var(--desktop-side-margin,8.333vw) - 1rem))!important;text-align:left!important} html body :is(#approach.philosophy,.studio-thinking,.services-mix,.services-redesign .service-promise,.case-study .case-statement)>:is(.editorial-container,.service-container,.case-statement-inner){width:100%!important;max-width:none!important;margin-inline:0!important;padding:0!important;box-sizing:border-box} html body :is(#approach.philosophy,.studio-thinking,.services-mix,.services-redesign .service-promise,.case-study .case-statement) h2{font-size:var(--panel-title-size,clamp(4rem,6.666667vw,7rem))!important;line-height:1.2!important;margin:0!important;padding:0!important;text-align:left!important} html body :is(#approach.philosophy,.studio-thinking,.services-mix,.services-redesign .service-promise,.case-study .case-statement) h2 *{line-height:inherit!important} html body :is(#approach.philosophy,.studio-thinking,.services-mix,.services-redesign .service-promise,.case-study .case-statement) p{font-size:var(--panel-copy-size,1.75rem)!important;line-height:1.5!important;margin-top:2.5rem!important;text-align:left!important} @media(min-width:600px) and (max-width:1023px){ html body :is(#approach.philosophy,.studio-thinking,.services-mix,.services-redesign .service-promise,.case-study .case-statement){padding:5rem 2rem!important} html body :is(#approach.philosophy,.studio-thinking,.services-mix,.services-redesign .service-promise,.case-study .case-statement) h2{font-size:4.5rem!important;line-height:1.25!important} } @media(max-width:599px){ html body :is(#approach.philosophy,.studio-thinking,.services-mix,.services-redesign .service-promise,.case-study .case-statement){padding:4rem 1.5rem!important} html body :is(#approach.philosophy,.studio-thinking,.services-mix,.services-redesign .service-promise,.case-study .case-statement) h2{font-size:clamp(1.875rem,8.8vw,3.25rem)!important} html body :is(#approach.philosophy,.studio-thinking,.services-mix,.services-redesign .service-promise,.case-study .case-statement) p{font-size:1.25rem!important;line-height:1.875rem!important;margin-top:2rem!important} } /* Footer boundary has one spacing owner across all pages and breakpoints. */ html body{--footer-section-gap:10rem} html body .panel-reading-track:has(>footer#contact.contact-panel), html body.home-page main#top>.panel-reading-track:has(>footer#contact.contact-panel){margin-top:var(--footer-section-gap)!important} html body.work-page .work-showcase{padding-bottom:0!important;margin-bottom:0!important} html body .editorial-main{padding-bottom:0!important} html body .editorial-main>:last-child{margin-bottom:0!important} html body footer#contact.contact-panel{margin-top:var(--footer-section-gap)!important} html body .panel-reading-track>footer#contact.contact-panel{margin-top:0!important} @media(max-width:599px){html body{--footer-section-gap:7.5rem}} /* Figma Studio 160:1563 and Contact 160:1610 — shared type and deliberate spacing. */ html body :is(.editorial-intro .editorial-lead,.service-hero>p,.case-hero>p,.work-lead){font-size:2rem!important;line-height:2.75rem!important;} html body .studio-page .editorial-intro .studio-lead{max-width:967px!important;width:100%;text-wrap:wrap!important;} html body .studio-page .studio-intro-photo{object-position:center bottom;aspect-ratio:5/3;border-radius:16px!important;} html body .studio-page>.panel-reading-track:has(>.studio-thinking){margin-bottom:0!important;} html body .studio-page>:is(.panel-reading-track,.studio-thinking)+section.editorial-section.editorial-split{margin-top:10rem!important;} html body.editorial-page main.editorial-main :is(.editorial-values,.studio-process) h3, html body.editorial-page main.editorial-main :is(.editorial-values,.studio-process) h3 *{background-image:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;} html body.editorial-page main.editorial-main :is(.editorial-values,.studio-process) li::before{top:0!important;left:0!important;text-align:left!important;transform:none!important;} html body .contact-work ol>li{align-items:flex-start!important;} html body .contact-work ol>li::before{align-self:flex-start;transform:none!important;} html body :is(.contact-page,.audience-page)>.enquiry-form.wide-surface{padding-block:7.5rem!important;border-radius:16px!important;} html body :is(.contact-page,.audience-page) .enquiry-form legend{font:700 2.5rem/3rem Helixa,sans-serif!important;} html body :is(.contact-page,.audience-page) .service-options{max-width:1020px;gap:1.5rem;} html body :is(.contact-page,.audience-page) .service-options span{font-size:1.5rem!important;line-height:2rem!important;padding:1rem 1.5rem;} html body :is(.contact-page,.audience-page) .enquiry-field{font-size:2rem!important;line-height:3rem!important;} html body :is(.contact-page,.audience-page) .enquiry-actions p{color:#201e1c;} html body .contact-page .contact-work h2.editorial-title, html body .contact-page .contact-work h2.editorial-title .editorial-line-content{font-size:6rem!important;line-height:1.2!important;} html body:has(.contact-page){--footer-section-gap:5rem;} html body .contact-page>.contact-reach{margin-bottom:0!important;padding-bottom:0!important;} @media(min-width:1600px){ html body :is(.contact-page,.audience-page) .enquiry-form>.editorial-container{max-width:var(--desktop-content-width);margin-inline:auto;} } @media(min-width:600px) and (max-width:1023px){ html body :is(.editorial-intro .editorial-lead,.service-hero>p,.case-hero>p,.work-lead){font-size:1.75rem!important;line-height:2.5rem!important;} html body :is(.contact-page,.audience-page)>.enquiry-form.wide-surface{padding-block:6rem!important;} html body .contact-page .contact-work h2.editorial-title,html body .contact-page .contact-work h2.editorial-title .editorial-line-content{font-size:4.5rem!important;} } @media(max-width:599px){ html body :is(.editorial-intro .editorial-lead,.service-hero>p,.case-hero>p,.work-lead){font-size:1.375rem!important;line-height:2rem!important;} html body .studio-page>:is(.panel-reading-track,.studio-thinking)+section.editorial-section.editorial-split{margin-top:7.5rem!important;} html body :is(.contact-page,.audience-page)>.enquiry-form.wide-surface{padding-block:4rem!important;} html body :is(.contact-page,.audience-page) .enquiry-form legend{font-size:1.75rem!important;line-height:2.25rem!important;} html body :is(.contact-page,.audience-page) .service-options{gap:0.75rem;} html body :is(.contact-page,.audience-page) .service-options span{font-size:1.125rem!important;line-height:1.625rem!important;padding:0.75rem 1rem;} html body :is(.contact-page,.audience-page) .enquiry-field{font-size:1.375rem!important;line-height:2rem!important;} html body .contact-page .contact-work h2.editorial-title,html body .contact-page .contact-work h2.editorial-title .editorial-line-content{font-size:clamp(2.25rem,9vw,3.375rem)!important;} html body:has(.contact-page){--footer-section-gap:3.75rem;} } /* Keep each number beside the title, including narrow screens. */ @media(max-width:599px){ html body.editorial-page main.editorial-main :is(.studio-process,.editorial-values) li{position:relative;padding-left:2.5rem!important;} html body.editorial-page main.editorial-main :is(.studio-process,.editorial-values) li::before{position:absolute!important;display:block;margin:0!important;top:0!important;left:0!important;} } /* Requested founder/footer join and large-desktop principle rhythm. */ html body .panel-reading-track[data-founder-joined], html body.home-page main#top>.panel-reading-track[data-founder-joined]{margin-top:0!important;} html body :is(#top,.studio-page) .founder-reading-stage #founder.founder.page-section{padding-bottom:0!important;align-items:end!important;} html body :is(#top,.studio-page) #founder .founder-photo{align-self:end!important;margin-bottom:0!important;} html body :is(#top,.studio-page) #founder .founder-photo>img{display:block;margin-bottom:0!important;} @media(min-width:1101px){ html body.editorial-page main.editorial-main.studio-page .editorial-values>li:not(:last-child){margin-bottom:6rem!important;} } html body.editorial-page main.editorial-main .editorial-intro .editorial-lead, html body.editorial-page main.editorial-main .service-hero>p, html body .case-study .case-hero>p, html body.work-page .work-showcase .work-lead{font-size:2rem!important;line-height:2.75rem!important;} @media(min-width:600px) and (max-width:1023px){ html body.editorial-page main.editorial-main .editorial-intro .editorial-lead, html body.editorial-page main.editorial-main .service-hero>p, html body .case-study .case-hero>p, html body.work-page .work-showcase .work-lead{font-size:1.75rem!important;line-height:2.5rem!important;} } @media(max-width:599px){ html body.editorial-page main.editorial-main .editorial-intro .editorial-lead, html body.editorial-page main.editorial-main .service-hero>p, html body .case-study .case-hero>p, html body.work-page .work-showcase .work-lead{font-size:1.375rem!important;line-height:2rem!important;} } /* The footer ends the document; it never reserves a scroll-hold region. */ html body .panel-reading-track:has(>footer#contact.contact-panel){height:auto!important;padding-bottom:0!important;margin-bottom:0!important;translate:none!important;} html body .panel-reading-track>footer#contact.contact-panel{position:relative!important;top:auto!important;margin-bottom:0!important;} /* Preserve the designed outer inset without restoring the footer scroll hold. */ html body:is(.home-page,.work-page,.editorial-page){padding-bottom:1rem!important;} html body.editorial-page:has(.contact-page){padding-bottom:1.125rem!important;} html body footer#contact.contact-panel{margin-bottom:0!important;} @media(min-width:1024px) and (prefers-reduced-motion:no-preference){ html body.home-page .intro-mouse-cue.is-active{z-index:40;bottom:48px;} } /* Client marks use their final layout size from first paint, never a zoom transform. */ html body .clients .figma-client-rows .client-row>li>img{ width:calc(var(--client-logo-width) * .9)!important; height:auto!important;transform:none!important;scale:none!important; transition:none!important;animation:none!important; } html body.home-page #top .clients .figma-client-rows .client-row>li>img{ width:calc(var(--client-logo-width) * .81)!important;transform:none!important; } html body .clients :is(.client-marquee,.client-row>li){scale:none!important;} /* Founder is physically joined to the footer, before and after wrapper hydration. */ html body.home-page main#top:has(#founder)>.panel-reading-track:has(>footer#contact.contact-panel), html body.editorial-page:has(.studio-page #founder)>.panel-reading-track:has(>footer#contact.contact-panel), html body.home-page main#top:has(#founder)>footer#contact.contact-panel, html body.editorial-page:has(.studio-page #founder)>footer#contact.contact-panel{ margin-top:0!important; } html body :is(main#top,main.studio-page)>.founder-reading-stage{ height:auto!important;min-height:0!important;margin-bottom:0!important;padding-bottom:0!important; } html body :is(main#top,main.studio-page) #founder.founder.page-section{ min-height:0!important;padding-bottom:0!important;margin-bottom:0!important; } html body :is(main#top,main.studio-page) #founder .founder-photo{ padding-bottom:0!important;translate:none!important;transform:none!important; } html body :is(main#top,main.studio-page) #founder .founder-photo>img{object-position:center bottom!important;} /* Requested H1-sized Studio/Contact headings share the existing inner-hero scale. */ html body{--shared-inner-h1:clamp(32px,8.2vw,120px);--numbered-item-gap:4.8rem;} @media(min-width:1024px) and (max-width:1600px){html body{--shared-inner-h1:clamp(68px,6.944444vw,112px);}} @media(max-width:1023px){html body{--shared-inner-h1:clamp(34px,9.2vw,68px);--numbered-item-gap:1.4rem;}} @media(max-width:760px){html body{--numbered-item-gap:1.2rem;}} html body.editorial-page main.editorial-main :is(.studio-process>h2.editorial-title,.studio-years>.editorial-container>h2.editorial-title,.contact-work h2.editorial-title), html body.editorial-page main.editorial-main :is(.studio-process>h2.editorial-title,.studio-years>.editorial-container>h2.editorial-title,.contact-work h2.editorial-title) .editorial-line-content{ font-size:var(--shared-inner-h1)!important;line-height:1.2!important;font-family:'GC Gudlak',sans-serif!important;font-weight:700!important; } html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values>li:not(:last-child){margin-bottom:var(--numbered-item-gap)!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values>li:last-child{margin-bottom:0!important;} html body.editorial-page main.editorial-main :is(.studio-process,.editorial-values) li::before{top:4px!important;} html body .studio-page .studio-intro-photo{width:100%!important;height:auto!important;object-fit:cover!important;aspect-ratio:5/3!important;} /* One H1 type scale and line box, including every reveal wrapper. */ html body :is(.editorial-main h1.editorial-title,.case-study .case-hero h1,.work-showcase #work-page-title, .studio-page .studio-process>h2.editorial-title,.studio-page .studio-years>.editorial-container>h2.editorial-title,.contact-page .contact-work h2.editorial-title){ font-size:var(--shared-inner-h1)!important;line-height:1.2!important; } html body :is(.editorial-main h1.editorial-title,.case-study .case-hero h1,.work-showcase #work-page-title, .studio-page .studio-process>h2.editorial-title,.studio-page .studio-years>.editorial-container>h2.editorial-title,.contact-page .contact-work h2.editorial-title) :is(.editorial-line-mask,.editorial-line-content,.title-desktop-lines,.title-mobile-lines){ font-size:inherit!important;line-height:inherit!important; } /* Render the desk photograph in its original proportions, without a forced frame ratio. */ html body.editorial-page main.studio-page img.studio-intro-photo{ width:100%!important;height:auto!important;min-height:0!important;max-height:none!important; aspect-ratio:auto!important;object-fit:contain!important;transform:none!important;scale:none!important; } /* Match number and heading line boxes, retaining the requested four-pixel offset. */ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values li::before{ top:4px!important;line-height:calc(clamp(1.5rem,2.083333vw,2.125rem) * 1.2)!important; } html body.editorial-page main.editorial-main.studio-page .studio-process li::before{top:4px!important;line-height:1.5!important;} /* Final desk-photo rule: width follows the container; height follows the source. */ html body.editorial-page main.studio-page .editorial-intro img.studio-desk-photo{ display:block!important;width:100%!important;height:auto!important; aspect-ratio:1024/683!important;min-height:0!important;max-height:none!important; object-fit:contain!important;transform:none!important;scale:none!important; } /* Mobile Home review: left reading edge, no nested paragraph gutters or padding. */ @media(max-width:599px){ html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title,#work-title,#services-title,#clients-title,#founder-title), html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title,#work-title,#services-title,#clients-title,#founder-title) :is(span,.motion-line,.title-word-mask,.title-word){text-align:left!important;} html body.home-page main#top :is(.hero-statement-inner,.stories-heading,.center-heading){align-items:flex-start!important;justify-items:start!important;text-align:left!important;} html body.home-page main#top #hero-statement{padding-inline:1.5rem!important;} html body.home-page main#top #about{width:100%!important;margin-inline:0!important;padding:0!important;min-height:0!important;} html body.home-page main#top #about #studio-title{width:100%!important;max-width:none!important;padding:0!important;margin:0!important;text-align:left!important;} html body.home-page main#top .home-belief{width:calc(100% - 48px)!important;margin-inline:1.5rem!important;padding-inline:0!important;padding-bottom:0!important;min-height:0!important;} html body.home-page main#top .home-belief :is(.belief-scroll-stage,.belief-scroll-copy,p){width:100%!important;max-width:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;text-align:left!important;} html body.home-page main#top :is(.why-contact,.work-contact)>p{margin:0!important;padding:0!important;} html body.home-page main#top :is(.why-contact,.work-contact)>.line-link{margin-top:0!important;} html body.home-page{padding-bottom:0.5rem!important;} html body.home-page main#top footer#contact.contact-panel{width:calc(100% - 16px)!important;margin-left:0.5rem!important;margin-right:0.5rem!important;margin-bottom:0!important;} } /* Figma's 1200 × 720 photo frame crops the source; it never stretches the person. */ html body.editorial-page main.studio-page .editorial-intro figure.studio-desk-frame{ position:relative!important;display:block!important;width:100%!important;height:auto!important; aspect-ratio:5/3!important;min-height:0!important;max-height:none!important; padding:0!important;margin-inline:0!important;margin-bottom:0!important;overflow:hidden!important;border-radius:16px!important; } html body.editorial-page main.studio-page .studio-desk-frame>img.studio-desk-image{ position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important; min-height:0!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center top!important; transform:none!important;scale:none!important;border-radius:0!important; } /* Compact outgoing cards must override the front-card transform, just as desktop does. */ @media(max-width:1023px){ html body.home-page main#top .stories-stack-section .stories-stage .story-panel{ transition:transform 550ms cubic-bezier(.22,.61,.36,1),opacity 450ms ease,background-color 550ms ease!important; } html body.home-page main#top .stories-stack-section .stories-stage .story-panel[data-swipe-exit="up"]{ z-index:5!important;transform:translate3d(5%,-135svh,0) rotate(9deg)!important;opacity:0!important; } html body.home-page main#top .stories-stack-section .stories-stage .story-panel[data-swipe-exit="down"]{ z-index:5!important;transform:translate3d(-5%,135svh,0) rotate(-9deg)!important;opacity:0!important; } } @media(prefers-reduced-motion:reduce){html body.home-page main#top .stories-stack-section .stories-stage .story-panel{transition:none!important;}} /* Slightly more breathing room between Home service listings. */ html body.home-page main#top #services.home-expertise .expertise-row{padding-top:2.5rem!important;padding-bottom:3.5rem!important;} @media(max-width:760px){html body.home-page main#top #services.home-expertise .expertise-row{padding-top:2.25rem!important;padding-bottom:2.5rem!important;}} /* September 30: requested mobile spacing and whole-word display titles. */ @media(max-width:599px){ html body footer#contact.contact-panel .contact-details{display:flex!important;flex-direction:column!important;gap:0.75rem!important;} html body footer#contact.contact-panel .contact-details>a{margin-block:0!important;} html body.home-page main#top .why .why-contact{margin-top:1.5rem!important;} html body.home-page main#top .why .editorial-title-track{margin-bottom:3.75rem!important;} html body.home-page main#top .why>.why-grid{margin-top:1.5rem!important;} html body.home-page main#top :is(#statement-title,#why-title){font-size:clamp(2.375rem,15.5vw,5.5rem)!important;line-height:1.2!important;letter-spacing:0!important;} html body.home-page main#top :is(#statement-title,#why-title) :is(span,.motion-line,.title-word-mask,.title-word){font-size:inherit!important;line-height:inherit!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;} html body main:is(#top,.editorial-main,.case-study,.work-showcase) :is(h1,h2,h3,h4), html body main:is(#top,.editorial-main,.case-study,.work-showcase) :is(h1,h2,h3,h4) *{text-align:left!important;} html body .editorial-main :is(.editorial-lead,.service-hero>p),html body .case-study .case-hero>p,html body.work-page .work-lead{margin-top:1.25rem!important;} html body .editorial-main :is(.service-hero,.contact-intro){margin-bottom:calc(var(--hero-next-gap,7.5rem) / 2)!important;} html body .studio-intro-photo,html body .case-hero>.case-image,html body.work-page .work-showcase>.projects{margin-top:calc(var(--hero-next-gap,5rem) / 2)!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) :is(.editorial-values,.studio-process) li:not(:last-child){margin-bottom:2rem!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) :is(.editorial-values,.studio-process) h3{font-size:1.375rem!important;line-height:1.2!important;} html body.editorial-page main.contact-page .contact-reach>h2.editorial-title{font-size:clamp(1.875rem,8vw,2.75rem)!important;text-align:left!important;} } /* Mobile case studies: larger reading type and Envisioner Figma 407:1588 media. */ .envisioner-responsive-media{display:block;} .envisioner-mobile-apps{display:none;} @media(max-width:599px){ html body main.case-study .case-hero h1{font-size:clamp(2.25rem,10vw,3.75rem)!important;line-height:1.2!important;} html body main.case-study :is(.case-copy,.case-copy p,.case-hero>p,.case-statement p){font-size:1.5rem!important;line-height:1.5!important;} html body main.case-study :is(.case-facts,.case-facts dd,.case-related p){font-size:1.25rem!important;line-height:1.5!important;} html body main.case-study .case-facts dt{font-size:1rem!important;line-height:1.5!important;} html body main.case-study .case-story h2{font-size:2.375rem!important;line-height:1.2!important;} html body main.case-study .case-related h3{font-size:1.625rem!important;line-height:1.3!important;} html body main.case-envisioner .envisioner-responsive-media{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:354/400;} html body main.case-envisioner .envisioner-responsive-media>.case-image{position:absolute;width:100%!important;height:100%!important;object-fit:cover!important;max-width:none!important;} html body main.case-envisioner .envisioner-media-hero>.case-image{width:193.785%!important;height:104.5%!important;left:-51.412%;top:0;} html body main.case-envisioner .envisioner-media-lifestyle>.case-image{width:200.282%!important;height:133.25%!important;left:-57.91%;top:-16.75%;} html body main.case-envisioner .envisioner-media-dashboard>.case-image{width:114.124%!important;height:113.5%!important;left:-11.017%;top:-5.5%;} html body main.case-envisioner .envisioner-media-ai-laptop>.case-image{width:196.045%!important;height:115.5%!important;left:-42.09%;top:-6.25%;} html body main.case-envisioner .envisioner-media-discovery>.case-image{width:153.39%!important;height:101.75%!important;left:-24.01%;top:-1%;} html body main.case-envisioner .envisioner-media-result>.case-image{width:189.548%!important;height:126%!important;left:-51.98%;top:-11.5%;} html body main.case-envisioner .envisioner-media-identity{aspect-ratio:354/780;} html body main.case-envisioner .case-brand-pair{grid-template-columns:1fr!important;gap:3rem!important;} html body main.case-envisioner .case-brand-tile{aspect-ratio:354/400!important;} html body main.case-envisioner .envisioner-desktop-media{display:none!important;} html body main.case-envisioner .envisioner-mobile-apps{display:flex;gap:2rem;padding:3rem 2.25rem;box-sizing:border-box;width:100vw;margin-left:calc((100% - 100vw)/2);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:2.25rem;background:#fde8d9 url('/immutable/9702717db487045c/assets/envisioner/mobile/phone-bg.svg') left center/600px 480px no-repeat;} html body main.case-envisioner .envisioner-mobile-apps>img{display:block;flex:0 0 auto;width:auto;height:384px;max-width:none;object-fit:contain;scroll-snap-align:start;box-shadow:11px 11px 25px #281e1929;} html body main.case-envisioner .envisioner-mobile-apps.creator-apps{gap:1.875rem;padding-inline:2rem;background:#f7e7ec url('/immutable/b9f77a95dad35009/assets/envisioner/mobile/creator-bg.webp') center/cover;} } /* Follow-up: slightly smaller mobile display headings and closer testimonial deck. */ @media(max-width:599px){ html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title){font-size:clamp(2.25rem,14vw,5rem)!important;line-height:1.12!important;letter-spacing:0!important;} html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title) :is(span,.motion-line,.title-word-mask,.title-word){font-size:inherit!important;line-height:inherit!important;} html body.home-page main#top .testimonials .editorial-title-track{margin-bottom:3rem!important;} html body.home-page main#top .stories-stack-section .stories-layout{margin-top:0!important;} } /* Mobile review: card breathing room, contact alignment, and Studio 407:1827 crop. */ html body.editorial-page main.studio-page .studio-desk-frame>picture{display:contents;} html body.editorial-page main.studio-page .studio-desk-frame>picture>img.studio-desk-image{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center top!important;transform:none!important;scale:none!important;border-radius:0!important;} @media(max-width:599px){ html body.home-page main#top .stories-stack-section .story-panel{padding-top:2.5rem!important;} html body.home-page main#top .stories-stack-section .story-panel figcaption img{width:48px!important;height:48px!important;object-fit:contain!important;} html body.editorial-page main:is(.contact-page,.audience-page)>.enquiry-form.wide-surface{padding-block:3rem!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) :is(.studio-process,.editorial-values) li::before{top:3px!important;margin:0!important;line-height:1.2!important;font-size:1rem!important;} html body.editorial-page main.contact-page .contact-work ol>li{align-items:flex-start!important;gap:0.75rem!important;} html body.editorial-page main.contact-page .contact-work ol>li::before{font-size:1rem!important;line-height:1.2!important;margin-top:0.25rem!important;align-self:flex-start!important;} html body.editorial-page main.contact-page .contact-reach>h2.editorial-title{width:calc(100% - 48px)!important;max-width:none!important;margin-left:1.5rem!important;margin-right:1.5rem!important;} html body.editorial-page main.contact-page .contact-reach>h2.editorial-title :is(span,.editorial-line-mask,.editorial-line-content){text-align:left!important;width:100%!important;margin-inline:0!important;} html body.editorial-page main.studio-page .editorial-intro figure.studio-desk-frame{aspect-ratio:354/400!important;} html body.editorial-page main.studio-page .studio-desk-frame>picture>img.studio-desk-image{width:188.700565%!important;height:100%!important;left:-42.655367%!important;right:auto!important;object-fit:cover!important;object-position:center bottom!important;} } /* Supplied portraits retain their authored desktop and mobile proportions. */ html body.editorial-page main.studio-page .studio-desk-frame>picture>img.studio-desk-image{width:100%!important;height:100%!important;left:0!important;object-fit:contain!important;object-position:center!important;} .case-mobile-artwork{display:none;} @media(max-width:599px){ html body main.case-study .case-overview>.case-facts{margin-top:1.25rem!important;} html body main.case-study .case-desktop-artwork{display:none!important;} html body main.case-study .case-mobile-artwork{display:flex;flex-direction:column;gap:3rem;width:100%;} html body main.case-study .case-mobile-artwork>img{display:block;width:100%!important;height:auto!important;object-fit:contain!important;border-radius:16px;} html body main.case-study .case-mobile-phone-row{display:flex;gap:2rem;padding:3rem 2rem;box-sizing:border-box;width:100vw;margin-left:calc((100% - 100vw)/2);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:2rem;background:#392d49;} html body main.case-study .case-mobile-phone-row>img{flex:none;width:189px!important;height:384px!important;max-width:none!important;object-fit:contain!important;scroll-snap-align:start;border-radius:0!important;} html body main.case-study .phone-row-avvo-3{background:#6c4fda;} html body main.case-study .phone-row-miela-6{background:#000;} html body main.case-study .phone-row-connect-2{background:linear-gradient(108deg,#ff6fc3,#ff804e);} } /* FAQ enters fully on viewport entry; opening remains an accessible accordion. */ html body .services-faq .faq-motion{position:relative;border-bottom-color:transparent!important;} html body .services-faq .faq-motion::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#ffffff30;transform:scaleX(0);transform-origin:left;transition:transform 650ms cubic-bezier(.22,1,.36,1);} html body .services-faq .faq-motion .faq-question{opacity:0;translate:0 20px;transition:opacity 450ms ease,translate 550ms cubic-bezier(.22,1,.36,1);} html body .services-faq .faq-motion.faq-visible::after{transform:scaleX(1);} html body .services-faq .faq-motion.faq-visible .faq-question{opacity:1;translate:0 0;} html body .services-faq .faq-answer p{translate:0 12px;transition:translate 420ms cubic-bezier(.22,1,.36,1);} html body .services-faq .faq-item[data-open="true"] .faq-answer p{translate:0 0;} @media(prefers-reduced-motion:reduce){html body .services-faq .faq-motion .faq-question{opacity:1;translate:none;transition:none;}html body .services-faq .faq-motion::after{transform:none;transition:none;}html body .services-faq .faq-answer p{translate:none;transition:none;}} /* Authoritative Studio portrait sizing: natural image ratio, full content width. */ html body.editorial-page main.editorial-main.studio-page .editorial-intro figure.studio-desk-frame{ display:block!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;padding:0!important;margin-inline:0!important;overflow:hidden!important;border-radius:16px!important; } html body.editorial-page main.editorial-main.studio-page .editorial-intro figure.studio-desk-frame>picture{display:block!important;width:100%!important;height:auto!important;} html body.editorial-page main.editorial-main.studio-page .editorial-intro figure.studio-desk-frame>picture>img.studio-desk-image{ position:static!important;inset:auto!important;display:block!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;transform:none!important;scale:none!important;border-radius:16px!important;margin:0!important; } /* Hibba Bottega statement color approved by the user. */ html body main.case-hibba-bottega .case-statement{background:#FFC896!important;} .privacy-page .privacy-copy{margin-top:3rem;font:1.25rem/1.6 Helixa,sans-serif;max-width:960px;} .privacy-page .privacy-copy h2{font-size:2rem;line-height:1.25;margin:2.5rem 0 1rem;} .privacy-page .privacy-copy h3{font-size:1.5rem;line-height:1.3;margin:1.75rem 0 0.75rem;} .privacy-page .privacy-copy p,.privacy-page .privacy-copy ul{margin-block:1rem;} .privacy-page .privacy-copy li{margin-block:0.5rem;} .privacy-page .privacy-copy a{text-decoration:underline;} /* Complete viewport entrances, independent of scroll speed. */ html body #top .home-expertise .expertise-scroll>.service-item-arrival, html body #top #approach .philosophy-description.service-item-arrival{opacity:0!important;translate:0 32px!important;animation:none!important;transition:opacity 580ms ease var(--arrival-delay,0ms),translate 650ms cubic-bezier(.22,1,.36,1) var(--arrival-delay,0ms)!important;} html body #top .home-expertise .expertise-scroll>.service-item-arrival.home-arrived, html body #top #approach .philosophy-description.service-item-arrival.home-arrived{opacity:1!important;translate:0 0!important;} html body #top .home-expertise .service-line-arrival::after{transform:scaleX(0);transition:transform 750ms cubic-bezier(.22,1,.36,1);} html body #top .home-expertise .service-line-arrival.home-arrived::after{transform:scaleX(1);} html body .site-header{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;} html body .site-header::before,html body .site-header::after{content:none!important;display:none!important;} html body .site-header>.wordmark,html body .site-header>.editorial-menu-button,html body .site-header>.site-nav{translate:0 0;transition:translate 550ms cubic-bezier(.22,1,.36,1),opacity 350ms ease;} html body .site-header.header-scroll-hidden>.wordmark{translate:calc(-100% - 8vw) 0;opacity:0;pointer-events:none;} html body .site-header.header-scroll-hidden>.editorial-menu-button,html body .site-header.header-scroll-hidden>.site-nav{translate:calc(100% + 8vw) 0;opacity:0;pointer-events:none;} @media(prefers-reduced-motion:reduce){html body .site-header>*{transition:none!important;}html body #top .service-item-arrival{opacity:1!important;translate:none!important;transition:none!important;}} /* Work introduction: Figma's three desktop lines, natural mobile wrapping. */ html body.work-page .work-showcase p.work-lead{letter-spacing:0!important;text-wrap:wrap;max-width:100%;} .work-copy-break{display:none;} @media(min-width:1200px){.work-copy-break{display:inline;}html body.work-page .work-showcase p.work-lead{width:100%;}} /* Shared header stays above page artwork on every route. */ html body .site-header.editorial-header{z-index:1000!important;pointer-events:none;isolation:isolate;background:none!important;box-shadow:none!important;filter:none!important;backdrop-filter:none!important;} html body .site-header.editorial-header>:is(.wordmark,.editorial-menu-button,.site-nav){pointer-events:auto;} html body .site-header.editorial-header.header-scroll-hidden>:is(.wordmark,.editorial-menu-button,.site-nav){pointer-events:none;} html body .site-header.editorial-header::before,html body .site-header.editorial-header::after{content:none!important;background:none!important;box-shadow:none!important;} /* Studio is the reference for all inner-page introductory descriptions. */ html body{--inner-description-size:32px;--inner-description-leading:2.75rem;} @media(min-width:600px) and (max-width:1023px){html body{--inner-description-size:28px;--inner-description-leading:2.5rem;}} @media(max-width:599px){html body{--inner-description-size:22px;--inner-description-leading:2rem;}} html body.editorial-page main.editorial-main .editorial-intro .editorial-lead, html body.editorial-page main.editorial-main .service-hero>p, html body main.case-study .case-hero>p, html body.work-page .work-showcase p.work-lead{font-family:Helixa,sans-serif!important;font-size:var(--inner-description-size)!important;line-height:var(--inner-description-leading)!important;font-weight:400!important;letter-spacing:0!important;} html body :is(.contact-page,.audience-page) .enquiry-form fieldset{margin-bottom:4.5rem!important;} @media(max-width:599px){html body :is(.contact-page,.audience-page) .enquiry-form fieldset{margin-bottom:3.5rem!important;}} /* Project captions use solid type on Home, Work, and related case studies. */ html body :is(.work-caption,.work-slide-caption h3,.case-related h3,.project-name), html body :is(.work-caption,.work-slide-caption h3,.case-related h3,.project-name) *{background:none!important;background-image:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;} /* Final contact spacing for tablet and small/medium desktop. */ @media(min-width:600px) and (max-width:1599px){ html body.editorial-page main:is(.contact-page,.audience-page)>.enquiry-form.wide-surface{padding-block:4rem!important;} html body .editorial-main.contact-page .contact-intro{margin-bottom:4rem!important;padding-bottom:0!important;} } @media(min-width:600px) and (max-width:1023px){ html body.editorial-page main:is(.contact-page,.audience-page)>.enquiry-form.wide-surface{padding-block:3rem!important;} html body .editorial-main.contact-page .contact-intro{margin-bottom:3rem!important;} } /* Service dividers draw once with the row entrance, independently of text motion. */ html body.home-page main#top #services .expertise-row.service-line-arrival { position:relative;border-bottom-color:transparent!important; } html body.home-page main#top #services .expertise-row.service-line-arrival::after { content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:#B3A69E66;transform:scaleX(0)!important;transform-origin:left center!important; transition:transform 900ms cubic-bezier(.22,1,.36,1)!important; } html body.home-page main#top #services .expertise-row.service-line-arrival.home-arrived::after { transform:scaleX(1)!important; } @media(prefers-reduced-motion:reduce){ html body.home-page main#top #services .expertise-row.service-line-arrival::after {transform:none!important;transition:none!important;} } /* Desktop mouse cues; touch layouts use text instead of swipe artwork. */ .scroll-label-desktop,.scroll-label-touch {display:none;} @media(max-width:1023px){ html body .inner-hero-scroll-cue { width:max-content!important;height:auto!important;border:0!important;border-radius:0!important; background:none!important;font:400 0.75rem/1rem Helixa,sans-serif!important; color:#B3A69E!important;white-space:nowrap;text-align:center; } html body .inner-hero-scroll-cue::after {display:none!important;} .scroll-label-desktop {display:none;} .scroll-label-touch {display:inline;} html body.home-page .intro-mouse-cue.is-active { display:block!important;position:fixed;left:50%;bottom:28px;transform:translateX(-50%);pointer-events:none;z-index:40; width:max-content!important;height:auto!important;border:0!important;border-radius:0!important; background:none!important;font:400 0.75rem/1rem Helixa,sans-serif!important;color:#B3A69E; white-space:nowrap;text-align:center; } html body.home-page .intro-mouse-cue::before {content:'Swipe to Explore';} html body.home-page .intro-mouse-cue::after {display:none!important;} } @media(max-width:1023px){ html body.home-page .intro-mouse-cue.is-active, html body .inner-hero-scroll-cue {font-size:0.875rem!important;line-height:1.25rem!important;} } /* Bring the footer description a little closer to its question on desktop. */ @media(min-width:1101px){ html body footer#contact.contact-panel .contact-top .contact-copy>p{margin-top:1.25rem!important;} } @media(min-width:1101px) and (max-width:1600px){ html body footer#contact.contact-panel .contact-top .contact-copy>p{margin-top:0.5rem!important;} } /* Tablet founder credit: compact single-line name, inset from the right. */ @media(min-width:600px) and (max-width:1100px){ html body :is(main#top,main.studio-page) #founder .founder-photo figcaption{ left:auto!important;right:16px!important;width:max-content!important;max-width:calc(100% - 32px)!important; } html body :is(main#top,main.studio-page) #founder .founder-photo figcaption>span{ font-size:1.375rem!important;line-height:1.75rem!important;white-space:nowrap!important; } } /* Subtler mouse indicators; preserve the scroll-controlled visibility fades. */ @media(min-width:1024px){ html body :is(.intro-mouse-cue,.inner-hero-scroll-cue,.hero .scroll-cue){ scale:.9;filter:opacity(.9); } } /* Shared responsive scale. Figma desktop sizes are ceilings, not viewport multipliers. Phone <=600, portrait tablet <=900, landscape tablet <=1199, desktop >=1200. */ :root{ --layout-gutter:clamp(1.25rem,8.333333vw,10rem); --layout-width:1440px; --type-display:clamp(2.25rem,6.666667vw,6rem); --type-lead:clamp(1.25rem,calc(0.875rem + 1.25vw),2rem); --space-section:clamp(5rem,16.666667vw,15rem); --space-content:clamp(3rem,8.333333vw,7.5rem); } @media(min-width:1920px){:root{--layout-gutter:max(10rem,calc((100vw - var(--layout-width))/2));}} body .editorial-main{--editorial-gutter:var(--layout-gutter);} body .editorial-container,body.work-page .work-showcase{width:calc(100% - 2 * var(--layout-gutter));max-width:var(--layout-width);margin-inline:auto;} body .editorial-intro,body.work-page .work-showcase{padding-top:clamp(9rem,16.736111vw,15.0625rem);} body .editorial-main .editorial-title,body.work-page #work-page-title{font-size:var(--type-display);line-height:1.041667;} body .editorial-intro .editorial-lead,body .services-page .services-intro .editorial-lead,body.work-page .work-lead{font-size:var(--type-lead);line-height:1.375;max-width:min(100%,919px);} body .studio-page .studio-lead{max-width:min(100%,904px);} body.work-page .work-lead{max-width:min(100%,877px);} body .contact-intro .editorial-lead{max-width:min(100%,707px);} body .editorial-section,body .studio-thinking,body .studio-belief,body .services-mix{margin-top:var(--space-section);} body .editorial-intro .editorial-lead,body.work-page .work-lead{margin-top:clamp(2rem,4.166667vw,3.75rem);} body .studio-intro-photo,body .services-details,body.work-page .work-showcase .projects{margin-top:var(--space-content);} body .editorial-split>* ,body .contact-intro>*,body .services-detail-card>*,body .contact-top>*{min-width:0;} body .editorial-values h3,body .studio-page .editorial-values h3,body .services-principles .editorial-values h3{font-size:clamp(1.625rem,2.5vw,2.25rem);line-height:1.111111;white-space:normal;} body .studio-process h3{font-size:clamp(2rem,3.888889vw,3.5rem);} body .studio-belief p,body .services-statement{font-size:clamp(1.75rem,3.888889vw,3.5rem);line-height:1.214286;} body .studio-thinking h2,body .services-mix h2{font-size:clamp(2.5rem,8.333333vw,7.5rem);min-height:0;max-width:100%;} body .studio-thinking,body .services-mix{padding-block:var(--space-content);} body .services-mix-copy{margin-top:clamp(2.25rem,5.555556vw,5rem);gap:clamp(2rem,5.486111vw,4.9375rem);} body .services-statement{min-height:0;margin-block:clamp(5rem,11.111111vw,10rem);} body .services-detail-card{padding:clamp(1.5rem,4.166667vw,3.75rem);gap:clamp(1.75rem,4.166667vw,3.75rem);min-height:0;} body .services-detail-heading h2{font-size:clamp(1.75rem,3.333333vw,3rem);margin-top:clamp(1.5rem,3.333333vw,3rem);} body .services-detail-copy{font-size:clamp(1.125rem,1.666667vw,1.5rem);line-height:1.5;} body .services-detail-heading ul{font-size:clamp(1rem,1.388889vw,1.25rem);line-height:1.5;} body .services-principles{margin-bottom:var(--space-section);} .editorial-title .title-mobile-lines{display:none;} @media(max-width:600px){ .editorial-title .title-desktop-lines{display:none;} .editorial-title .title-mobile-lines{display:block;} } .footer-mobile-break{display:none;} @media(max-width:600px){.footer-mobile-break{display:block;}} /* Shared mobile footer rhythm, including the Home-specific stylesheet. */ @media(max-width:600px){ body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact{display:flex;flex-direction:column;padding:2.75rem 1.5rem 2.25rem;width:calc(100% - 16px);max-width:none;margin:0 0.5rem 0.5rem;box-sizing:border-box;border-radius:16px;} body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact .contact-top{grid-template-columns:1fr;gap:2.75rem;} body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact .contact-top h2{font-size:2.25rem;line-height:2.75rem;max-width:274px;} body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact .contact-top p{font-size:1.125rem;line-height:1.5rem;margin:1.75rem 0 2rem;} body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact .footer-project-link{font-size:1.25rem;line-height:2rem;width:180px;} body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact .contact-details{padding:0;gap:1.125rem;align-items:flex-start;} body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact .contact-details a{font-size:1.5rem;line-height:2rem;} body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact .contact-details a:last-child{font-size:1.375rem;} body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact .footer-bottom{order:2;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.5rem;font-size:0.875rem;line-height:1.5rem;margin-top:3.5rem;padding:0 0 0.5rem;border-top:0;border-bottom:1px solid currentColor;} body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact .footer-bottom nav{display:none;} body:is(.home-page,.work-page,.editorial-page) footer.contact-panel#contact .footer-wordmark{order:3;width:100%;height:auto;margin:1.5rem 0 0;} } /* Portraits sit on the footer edge; copy never pushes them above it. */ body .studio-founder,body .founder.page-section{align-items:end;margin-bottom:0;padding-bottom:0;overflow:visible;} body .studio-founder figure,body .founder .founder-photo{align-self:end;margin-bottom:0;overflow:visible;} body .studio-founder-photo,body .founder .founder-photo>img{display:block;width:100%;height:auto;object-fit:contain;object-position:center bottom;} body .studio-founder>div{padding-bottom:4rem;} body.editorial-page:has(.studio-founder) .contact-panel{margin-top:0;} body .studio-founder figure{max-width:560px;} body .studio-founder p{font-size:clamp(1.125rem,1.666667vw,1.5rem);line-height:1.5;} body .studio-founder figcaption{max-width:100%;white-space:normal;} body .contact-intro{grid-template-columns:minmax(0,707fr) minmax(220px,373fr);gap:clamp(2rem,5vw,4.5rem);padding-bottom:var(--space-content);} body .contact-intro aside{font-size:clamp(1.125rem,1.666667vw,1.5rem);} body .contact-intro aside a{font-size:clamp(1.25rem,1.944444vw,1.75rem);overflow-wrap:anywhere;white-space:normal;} body .enquiry-form{padding-block:clamp(2.5rem,5.555556vw,5rem);} body .enquiry-form legend{font-size:clamp(1.625rem,2.5vw,2.25rem);line-height:1.333333;} body .service-options{gap:clamp(0.75rem,1.666667vw,1.5rem);} body .service-options span{font-size:clamp(1rem,1.666667vw,1.5rem);line-height:1.333333;padding:clamp(0.75rem,1.111111vw,1rem) clamp(1rem,1.666667vw,1.5rem);} body .enquiry-field{font-size:clamp(1.25rem,2.222222vw,2rem);line-height:1.375;} body .enquiry-field input,body .enquiry-field textarea{min-width:0;max-width:100%;} body .enquiry-field+.enquiry-field{margin-top:clamp(2.25rem,4.444444vw,4rem);} body .contact-page .editorial-split,body .contact-work{margin-top:clamp(5rem,11.111111vw,10rem);} body .contact-work{padding-block:var(--space-content);} body .contact-work li{font-size:clamp(1.375rem,1.944444vw,1.75rem);line-height:1.3;} body .contact-reach{margin-block:clamp(6rem,12.5vw,11.25rem);} body.work-page .work-showcase .projects{row-gap:var(--space-content);} body.work-page .work-showcase .work-caption{font-size:clamp(1.25rem,1.944444vw,1.75rem);line-height:1.285714;} body .site-header,body .site-header.editorial-header{padding-block:clamp(1.5rem,3.333333vw,3rem);} body .site-header .site-nav,body.work-page .site-header .site-nav{top:calc(clamp(24px,3.333333vw,48px) + 3px);gap:clamp(1.5rem,3.333333vw,3rem);font-size:clamp(1.0625rem,1.388889vw,1.25rem);} body .editorial-menu{max-height:calc(100dvh - 32px);overflow:auto;} body .editorial-menu-button{min-width:44px;min-height:44px;} body .editorial-menu>button{min-height:44px;} body .contact-panel .contact-top h2{font-size:clamp(2rem,5vw,4.5rem);} body .contact-panel .contact-top p{font-size:clamp(1.125rem,1.666667vw,1.5rem);} body .contact-panel .footer-wordmark{margin-top:clamp(3rem,6.944444vw,6.25rem);} body .contact-panel .footer-bottom,body .contact-panel .footer-bottom nav{flex-wrap:wrap;} body .contact-panel .footer-bottom nav{gap:0.75rem 1.5rem;} body .contact-panel a{overflow-wrap:anywhere;} /* Home: cap oversized desktop details while preserving the WebGL scene. */ body:not(.editorial-page):not(.work-page){--section-gutter:var(--layout-gutter);} body .hero{--hero-content-gutter:var(--layout-gutter);} body .hero .hero-intro{font-size:clamp(1.125rem,1.944444vw,1.75rem);} body .hero .hero-intro span{white-space:normal;} body .hero-statement h1{font-size:clamp(2.25rem,10vw,9rem);} body .services-section .services-heading h2{font-size:clamp(2.25rem,10.277778vw,9.25rem);} body #approach #philosophy-title{font-size:clamp(2.25rem,8.333333vw,7.5rem);} body #services .service-card h3{font-size:clamp(1.75rem,3.333333vw,3rem);} body .story-panel blockquote{font-size:clamp(1.375rem,2.5vw,2.25rem);line-height:1.333333;} body .story-panel{padding:clamp(1.75rem,4.722222vw,4.25rem);} @media(min-width:901px) and (max-width:1199px){ body .studio-page .editorial-split,body .services-principles,body .contact-page .editorial-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;} body .editorial-split>.editorial-title{font-size:clamp(2.5rem,5vw,3.75rem);} body .studio-process li,body .studio-process li:nth-child(n){width:60%;} body .studio-process li:nth-child(2){margin-left:13%;}body .studio-process li:nth-child(3){margin-left:26%;}body .studio-process li:nth-child(4){margin-left:40%;} body #services .service-card{padding-right:1.5rem;} body #services .service-card:nth-child(even){padding-left:1.5rem;padding-right:0;} body .services-detail-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} } @media(max-width:900px){ :root{--layout-gutter:clamp(1.25rem,5vw,2.75rem);--space-section:clamp(5rem,12vw,6.75rem);} body .site-header .site-nav,body.work-page .site-header .site-nav{display:none;} body .editorial-menu-button{display:block;background:none;border:0;padding:0.5rem;cursor:pointer;} body .editorial-menu-button img{display:block;} body .studio-page .editorial-split,body .services-principles,body .contact-page .editorial-split{grid-template-columns:1fr;gap:3rem;} body .contact-intro{grid-template-columns:1fr;gap:2rem;} body .contact-intro aside{text-align:left;} body .studio-process li,body .studio-process li:nth-child(n){width:100%;margin-left:0;} body .studio-founder{grid-template-columns:minmax(0,1fr);gap:3rem;} body .studio-founder figure{width:min(75%,400px);margin-inline:auto;} body .studio-founder figure,body .founder .founder-photo{grid-row:2;} body .studio-founder>div,body .founder .founder-copy{grid-row:1;padding-bottom:0;} body .studio-founder figcaption{position:absolute;left:auto;right:0;bottom:5%;max-width:65%;} body .studio-founder figcaption strong{font-size:1rem;line-height:1.4;} body .studio-founder figcaption span{font-size:0.75rem;line-height:1.4;} body .studio-founder figcaption img{width:100px;height:60px;} body .founder.page-section{grid-template-columns:minmax(0,1fr);gap:3rem;} body .founder .founder-photo{width:min(75%,400px);justify-self:center;} body .services-detail-card{grid-template-columns:1fr;gap:2rem;} body .services-detail-heading h2{margin-top:1.5rem;} body .services-mix-copy{grid-template-columns:1fr;gap:1.75rem;} body .enquiry-actions,body .contact-work-bottom{flex-direction:column;align-items:flex-start;gap:2rem;} body .contact-panel .contact-top{grid-template-columns:1fr;gap:2rem;} body .contact-panel .contact-details{align-items:flex-start;} body .contact-panel .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;} body .contact-panel .footer-bottom nav{justify-content:flex-start;} body #services .services-grid{grid-template-columns:1fr;} body #services .service-card,body #services .service-card:nth-child(n){padding:2rem 0;border-left:0;border-top:1px solid #37322f;} body .hero .hero-details{max-width:42%;} } @media(min-width:601px) and (max-width:900px){ body .contact-reach .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;} body .contact-reach .stats article{padding:1.5rem;min-width:0;} body .contact-reach .stats strong{font-size:3rem;} body .contact-reach .stats span{font-size:1rem;} body .studio-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;} body .studio-gallery .wide{grid-column:span 2;} } @media(max-width:600px){ :root{--layout-gutter:1.5rem;--type-display:clamp(2rem,8.5vw,3rem);--type-lead:clamp(1.25rem,5.2vw,1.5rem);} body .editorial-main{--editorial-gutter:1.5rem;} body .wide-surface{width:calc(100% - 16px);margin-inline:0.5rem;box-sizing:border-box;} body .wide-surface>.editorial-container{width:calc(100% - 48px);margin-inline:1.5rem;} body .services-details.editorial-container{width:calc(100% - 16px);margin-inline:0.5rem;} body .services-detail-card{padding-inline:1.5rem;} body .services-details .services-statement{margin-inline:1rem;font-size:2rem;line-height:2.5rem;} body .studio-gallery{margin-inline:0.5rem;} body .contact-reach .stats{width:calc(100% - 16px);margin-inline:0.5rem;} body .site-header,body .site-header.editorial-header{padding:1.25rem var(--layout-gutter);} body .editorial-intro,body.work-page .work-showcase{padding-top:9rem;} body .editorial-main .editorial-title,body .services-page .services-intro .editorial-title{font-size:var(--type-display);letter-spacing:.02em;} body.work-page #work-page-title{font-size:clamp(1.75rem,6.8vw,2.5rem);letter-spacing:.02em;} body .editorial-intro .editorial-lead,body.work-page .work-lead{margin-top:2rem;} body .editorial-values li{padding-left:2.25rem;} body .studio-gallery{margin-inline:0.5rem;gap:0.75rem;} body .services-detail-heading ul{display:block;} body .services-detail-heading li{display:inline;} body .services-detail-heading li+li::before{margin-inline:0.375rem;} body .service-options{gap:0.625rem;} body .service-options span{font-size:1rem;padding:0.75rem 1.125rem;} body .enquiry-actions button{width:100%;justify-content:space-between;padding:1.25rem;white-space:normal;} body .contact-work li{gap:0.75rem;} body .contact-reach .stats{grid-template-columns:1fr;} body .contact-panel .footer-bottom{display:grid;grid-template-columns:1fr;} body .hero .hero-details{max-width:none;width:min(76%,300px);} body .hero .hero-details .button{padding:1rem 1.25rem;min-height:48px;} body .hero-statement h1{font-size:clamp(2rem,8.5vw,3.25rem);} body .hero .hero-intro{font-size:1.25rem;} body .services-section .services-heading h2{font-size:clamp(1.875rem,8.5vw,3.25rem);} body #approach #philosophy-title{max-width:100%;font-size:clamp(2rem,8vw,3rem);} body .work-showcase .work-item{width:100%;grid-column:1;grid-row:auto;} body.work-page .work-showcase .projects{grid-template-columns:1fr;row-gap:3.5rem;} } @media(max-height:600px) and (orientation:landscape){ body .site-header,body .site-header.editorial-header{padding-block:1rem;} body .site-header .site-nav,body.work-page .site-header .site-nav{top:19px;} body .hero{min-height:560px;} body .editorial-menu nav{gap:1rem;margin-block:1.25rem;} body .editorial-menu nav a{font-size:1.75rem;} } /* Inner-page Figma typography refresh, September 20. */ body .editorial-main .editorial-lead,body.work-page .work-lead{font-family:'Helixa',sans-serif;font-weight:400;letter-spacing:0;line-height:1.375;} body .studio-page .studio-lead{max-width:min(100%,935px);} body.work-page .work-lead{max-width:min(100%,760px);} body .services-page .services-intro .editorial-lead{max-width:min(100%,893px);} body .contact-intro .editorial-lead{max-width:min(100%,676px);} body .studio-years .editorial-lead{font-size:var(--type-lead);max-width:785px;} body .editorial-main .editorial-split>.editorial-title,body .editorial-main .studio-founder .editorial-title{font:500 clamp(2rem,3.888889vw,3.5rem)/1.142857 Arturm,sans-serif;letter-spacing:.02em;text-transform:none;} body .studio-page .editorial-values h3,body .services-principles .editorial-values h3,body .contact-page .editorial-values h3{font:500 clamp(1.625rem,2.222222vw,2rem)/1.25 'Helixa',sans-serif;letter-spacing:0;white-space:normal;} body .editorial-values p{margin-top:0.75rem;line-height:1.75rem;} body .editorial-values li{margin-bottom:3.75rem;} body .studio-process h3{font:500 clamp(1.75rem,2.777778vw,2.5rem)/1.2 'Helixa',sans-serif;letter-spacing:0;background:none;color:#fff;} body .studio-belief p,body .services-statement{font-family:'Helixa',sans-serif;letter-spacing:0;} body .studio-thinking h2,body .services-mix h2{font-size:clamp(2.25rem,6.666667vw,6rem);line-height:1.041667;padding:0;} body .studio-thinking h2{max-width:750px;} body .services-mix h2{max-width:979px;} body .services-mix-copy{margin-top:3.75rem;} body .services-detail-heading h2{font:500 clamp(1.75rem,2.777778vw,2.5rem)/1.2 'Helixa',sans-serif;letter-spacing:0;margin:3rem 0 0.75rem;} body .services-detail-heading ul{font-size:1rem;line-height:1.5rem;} body .services-detail-copy{font-size:clamp(1.125rem,1.388889vw,1.25rem);line-height:1.6;align-self:end;margin-bottom:0;} body.work-page .work-showcase .work-caption{font:400 clamp(1.375rem,2.222222vw,2rem)/1.25 'Helixa',sans-serif;letter-spacing:0;} body .contact-work li{font:500 clamp(1.5rem,2.222222vw,2rem)/1.25 'Helixa',sans-serif;letter-spacing:0;} /* Mobile inner-page titles and the same compact stats used on Home. */ @media(max-width:600px){ body .editorial-main .editorial-split>h2.editorial-title, body .editorial-main .studio-founder h2.editorial-title{font-size:2.25rem;line-height:2.5rem;letter-spacing:.02em;} body .editorial-main,body.work-page{--inner-mobile-heading:clamp(36px,10.5vw,56px);} body .editorial-main .editorial-title, body .editorial-main .studio-thinking h2, body .editorial-main .services-mix h2{font-size:var(--inner-mobile-heading);line-height:1.08;letter-spacing:.04em;} body.work-page .work-showcase .work-item .project, body.home-page .work-slide, body.home-page .work-slide-image, body .editorial-main .studio-photo, body .editorial-main .studio-intro-photo, body .editorial-main .contact-work{border-radius:16px;clip-path:inset(0 round 16px);overflow:hidden;} body .editorial-main h1.editorial-title, body .services-page .services-intro h1.editorial-title, body.work-page h1#work-page-title{font-size:var(--inner-mobile-heading);line-height:1.08;letter-spacing:.04em;max-width:100%;} body .editorial-main h1 .editorial-line-content, body.work-page h1#work-page-title .editorial-line-content{white-space:normal;max-width:100%;} body .contact-reach .stats.page-section{width:calc(100% - 16px);max-width:none;margin:2.5rem 0.5rem 0;gap:0.75rem;padding:0;box-sizing:border-box;} body .contact-reach .stats article{display:flex;flex-direction:row;justify-content:space-between;align-items:center;box-sizing:border-box;min-height:88px;padding:1.25rem 1.5rem;gap:1rem;} body .contact-reach .stats strong{font-size:2.25rem;line-height:3rem;} body .contact-reach .stats span{font-size:1rem;line-height:1.5rem;text-align:right;max-width:191px;} } @media(max-width:900px){ body .editorial-values li{margin-bottom:2.5rem;} body .services-detail-heading h2{margin-top:1.5rem;} body .services-mix-copy{margin-top:2.25rem;} } /* Match Home and the overlay header without a size or position jump. */ @media(min-width:601px) and (max-width:1199px){ body.home-page .work-contact>p{margin:0;} body.home-page .work-contact .line-link{margin:0;} } body .studio-collage{width:calc(100% - 48px);max-width:1392px;margin:var(--space-content) auto 0;} body .studio-collage>img{display:block;width:100%;height:auto;object-fit:contain;} @media(max-width:600px){ body .studio-collage{width:calc(100% - 16px);} body .studio-belief+.studio-years{margin-top:7.5rem;} /* Touch screens must not depend on hover to show the founder CTA line. */ body .studio-founder .studio-founder-link::after, body.home-page .founder .founder-copy .line-link::after{content:'';display:block;position:absolute;left:0;right:0;bottom:-5px;width:100%;height:1px;background:#FF933C;opacity:1;transform:scaleX(1);} body :is(main,footer) :is(h1,h2,h3,h4,h5,h6){text-align:left;} body .clients.page-section .clients-heading{width:100%;max-width:none;margin-inline:0;text-align:left;} body .clients.page-section #clients-title, body .editorial-main .editorial-title, body .contact-reach>.editorial-title{text-align:left;} body.editorial-page .clients.page-section .clients-heading{box-sizing:border-box;width:calc(100vw - 48px);margin-left:calc((100% - 100vw)/2 + 1.5rem);} body.editorial-page .clients.page-section #clients-title{font-size:3rem;line-height:3.375rem;letter-spacing:.04em;white-space:normal;max-width:100%;margin:0;} body.editorial-page .clients .client-rows{width:100vw;max-width:none;margin-top:3rem;margin-inline:calc((100% - 100vw)/2);gap:0.75rem;} body.editorial-page .clients .client-row{padding-inline:0;gap:0.75rem;} body.editorial-page .clients .client-row>li{width:180px;flex-basis:180px;height:120px;border-radius:8px;} body.editorial-page .clients .client-row>li img{max-width:110px;max-height:60px;} body .site-header.editorial-header{padding:1.5rem;} body .site-header.editorial-header .wordmark, body .site-header.editorial-header .wordmark img{width:116px;height:24px;} body .site-header.editorial-header .editorial-menu-button{padding:0;width:32px;height:32px;min-width:32px;min-height:32px;} } :root{--title-gradient:linear-gradient(135deg,#d3b393 11.441%,#fff 27.923%);} /* Figma H2_Inner: GC Gudlak Medium, 56/64, tracking 2%. */ body :is(.case-story > h2,.case-related > h2,.founder-copy > h2,.clients-heading > h2,.work-heading > h2,.services-heading > h2,#home-trust-title,#services-faq-title,.editorial-split > h2,.contact-reach > h2) { font-family: 'GC Gudlak', sans-serif !important; font-size: var(--desktop-heading,clamp(2.125rem, 3.889vw, 3.5rem)) !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: .02em !important; text-transform: none !important; background: var(--title-gradient) !important; background-clip: text !important; -webkit-background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; overflow: visible; } body .case-designed :is(.case-story,.case-related) > h2 > span { background: none; color: inherit; -webkit-text-fill-color: inherit; } /* Animated editorial lines own their gradient; never paint it on the mask. */ body .case-related > h2{width:fit-content;max-width:100%;} body :is(.editorial-split,.contact-reach) > h2.editorial-title { background: none !important; } body .editorial-title .editorial-line-content { background-clip: text !important; -webkit-background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } @media (max-width: 599px) { body :is(.case-story > h2,.case-related > h2,.founder-copy > h2,.clients-heading > h2,.work-heading > h2,.services-heading > h2,#home-trust-title,#services-faq-title,.editorial-split > h2,.contact-reach > h2) { font-size: 2.125rem !important; line-height: 2.75rem !important; } } @media (min-width: 1101px) { body :is(.case-story > h2,.case-related > h2,.founder-copy > h2,.clients-heading > h2,.work-heading > h2,.services-heading > h2,#home-trust-title,#services-faq-title,.editorial-split > h2,.contact-reach > h2) { font-size: clamp(1.9125rem, 3.5001vw, 3.15rem) !important; } } /* Figma Home 172:582: paint across the heading, not the full section. */ body .clients.page-section #clients-title{width:fit-content;max-width:100%;background-image:var(--title-gradient)!important;} /* Shared Figma title gradient, including independently animated text lines. */ body :is(#statement-title,#services-title,#why-title,#work-title,#clients-title,#testimonials-title,#founder-title,#work-page-title,.editorial-title,.case-story>h2,.case-related>h2,.founder-copy>h2,.clients-heading>h2,.work-heading>h2,.services-heading>h2,#services-faq-title,.editorial-split>h2,.contact-reach>h2), body :is(h1,h2,h3) :is([data-gradient-line],.editorial-line-content){ background-image:var(--title-gradient)!important; background-clip:text!important;-webkit-background-clip:text!important; color:transparent!important;-webkit-text-fill-color:transparent!important; } /* Size the paint area to the visible lettering rather than the section width. */ html body :is(h1,h2,h3) [data-gradient-line]{ width:fit-content;max-width:100%; background-image:var(--title-gradient)!important; background-size:100% 100%!important;background-position:0 0!important; } html body :is(#services-title,#why-title,#work-title,#clients-title,#testimonials-title,#founder-title,.editorial-title){width:fit-content;max-width:100%;} /* The wrapper is never a paint layer: only the animated glyph spans paint. */ html body :is(#statement-title,h1,h2,h3)[data-masked]:has([data-gradient-line]), html body :is(#statement-title,h1,h2,h3):has(.editorial-line-content){ background-image:none!important;background-color:transparent!important; } html body :is(h1,h2,h3) [data-gradient-line]{ background-clip:text!important;-webkit-background-clip:text!important; color:transparent!important;-webkit-text-fill-color:transparent!important; } /* H1 scale is continuous across mobile, tablet and desktop. */ html body :is(main,.hero-statement,.editorial-main) h1, html body h1#statement-title, html body h1#work-page-title{ font-size:var(--desktop-display,clamp(1.75rem,10.4vw,9rem))!important; line-height:1.1111111111!important; } /* Preserve tablet/mobile sizes while sharing the desktop section scale. */ html body{--section-h2-size:36px;} @media(min-width:1101px) and (max-width:1439px){html body{--section-h2-size:32px;}} @media(min-width:1440px) and (max-width:1599px){html body{--section-h2-size:36px;}} @media(min-width:1600px){html body{--section-h2-size:40px;}} /* Shared section H2s use the updated case-study scale on every page. */ html body main:is(#top,#main-content,.editorial-main) :is( .case-story>h2,.case-related>h2,.editorial-split>h2,.contact-reach>h2, .founder-copy>h2,.clients-heading>h2,.work-heading>h2,.services-heading>h2, .services-detail-heading>h2,h2.editorial-title:not(.studio-process h2):not(.studio-years h2):not(.contact-work h2):not(:where(#contact-global-title)),h2#services-title, h2#work-title,h2#clients-title,h2#founder-title,h2#home-trust-title, h2#services-faq-title,h2#contact-faq-title ){ font-family:'GC Gudlak',sans-serif!important; font-size:var(--section-h2-size,2.25rem)!important;font-weight:500!important; line-height:1.25!important;letter-spacing:.02em!important;text-transform:none!important; } html body main:is(#top,#main-content,.editorial-main) :is( .case-story>h2,.case-related>h2,.editorial-split>h2,.contact-reach>h2, .founder-copy>h2,.clients-heading>h2,.work-heading>h2,.services-heading>h2, .services-detail-heading>h2,h2.editorial-title:not(.studio-process h2):not(.studio-years h2):not(.contact-work h2):not(:where(#contact-global-title)),h2#services-title, h2#work-title,h2#clients-title,h2#founder-title,h2#home-trust-title, h2#services-faq-title,h2#contact-faq-title ) :is(span,.motion-line,.editorial-line-mask,.editorial-line-content,.title-word-mask,.title-word){ font-size:inherit!important;line-height:inherit!important; } @media(max-width:599px){ html body main:is(#top,#main-content,.editorial-main) :is( .case-story>h2,.case-related>h2,.editorial-split>h2,.contact-reach>h2, .founder-copy>h2,.clients-heading>h2,.work-heading>h2,.services-heading>h2, .services-detail-heading>h2,h2.editorial-title:not(.studio-process h2):not(.studio-years h2):not(.contact-work h2):not(:where(#contact-global-title)),h2#services-title, h2#work-title,h2#clients-title,h2#founder-title,h2#home-trust-title, h2#services-faq-title,h2#contact-faq-title ){font-size:2.125rem!important;} } /* Home tablet, Figma 252:904. Phones and desktop keep their own layouts. */ @media (min-width:600px) and (max-width:1100px) { body.home-page :is(.work-heading,.services-heading,.clients-heading,.founder-copy)>h2 { font-size:3rem!important;line-height:4.25rem!important;letter-spacing:.02em!important; } body.home-page #services .services-heading h2 {width:100%;max-width:none;} body.home-page #services .services-heading h2 br {display:none;} body.home-page #services .service-card:nth-child(n) { display:block;min-height:284px;padding:2rem 0;box-sizing:border-box; } body.home-page #services .service-card>div {display:block;} body.home-page #services .service-index {display:block;font-size:1.25rem;line-height:1.75rem;margin:0 0 1.5rem;} body.home-page #services .service-card h3 {font-size:2.25rem;line-height:3rem;margin:0 0 0.75rem;padding:0;} body.home-page #services .service-card p {font-size:1.5rem;line-height:2rem;max-width:609px;margin:0;} body.home-page #services .service-card ul {font-size:1.125rem;line-height:1.5rem;margin:0.75rem 0 0;} body.home-page .why .why-grid {gap:1.5rem;} body.home-page .why .why-grid article {position:relative;display:block;min-height:280px;height:auto;padding:2.25rem;box-sizing:border-box;} body.home-page .why .why-grid .eyebrow {margin:0;font-size:1rem;line-height:1.125rem;letter-spacing:.04em;} body.home-page .why .why-grid .why-copy {position:relative;inset:auto;margin-top:4.5rem;width:calc(100% - 220px);max-width:none;} body.home-page .why .why-grid .why-copy h3 {font-size:2.25rem;line-height:3rem;margin:0 0 0.625rem;} body.home-page .why .why-grid .why-copy p {font-size:1.125rem;line-height:1.75rem;max-width:280px;margin:0;} body.home-page .why .why-grid .why-art {position:absolute;top:36px;right:24px;left:auto;bottom:auto;width:200px;height:200px;margin:0;} } /* Native affordance on every interactive hit area, not only its label. */ html body :is(a[href],button,summary,[role="button"],[role="link"],label,select,input[type="submit"],input[type="button"],input[type="checkbox"],input[type="radio"]), html body :is(a[href],button,summary,[role="button"],[role="link"],label) *{cursor:pointer!important;} html body :is(button,input,select):disabled{cursor:not-allowed!important;} /* A stale VIEW state must never suppress a hand outside the hovered preview. */ @media(hover:hover) and (pointer:fine){ html body .work-deck.has-arrow-cursor, html body .work-deck.has-arrow-cursor *{cursor:none!important;} html body .work-deck.has-arrow-cursor *{cursor:inherit!important;} html body #work a.project.has-open-cursor,html body #work a.project.has-open-cursor *, html body .case-related-grid .case-image.has-open-cursor{cursor:pointer!important;} html:not(:has(dialog[open])) body #work a.project.has-open-cursor:hover, html:not(:has(dialog[open])) body #work a.project.has-open-cursor:hover *, html:not(:has(dialog[open])) body .work-deck.has-arrow-cursor a:hover, html:not(:has(dialog[open])) body .work-deck.has-arrow-cursor a:hover *, html:not(:has(dialog[open])) body .case-related-grid .case-image.has-open-cursor:hover{cursor:none!important;} } html:has(dialog[open]) body .work-cursor{visibility:hidden!important;} /* Paint animated glyphs only at the leaf. Nested background-clip:text surfaces can paint overlapping copies while Chromium composites transformed children. */ html body.home-page main#top [data-masked], html body.home-page main#top [data-masked] .motion-line, html body.home-page main#top [data-masked] .motion-line>span:has(.title-word), html body.home-page main#top [data-masked] .title-word-mask{background:none!important;background-image:none!important;} html body.home-page main#top .cuberto-title .title-word{background-image:linear-gradient(135deg,#d3b393,#fff 38%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} html body :is(.editorial-title,.page-scroll-motion):has(.editorial-line-content){background:none!important;} html{scrollbar-gutter:stable;} html body .services-faq h2+.faq-item{border-top:1px solid rgba(211,179,147,.35);} html body .services-faq .faq-question{line-height:1.2!important;} html body .services-faq .faq-answer p{line-height:1.45!important;} html body .contact-page .services-faq h2{font:500 clamp(1.75rem,3.9vw,3.5rem)/1.25 Helixa,sans-serif;} .founder-photo-enter{opacity:0;translate:0 28px;transition:opacity 650ms ease,translate 750ms cubic-bezier(.22,1,.36,1);} .founder-photo-enter.founder-photo-ready{opacity:1;translate:0 0;} html body .celebration-copy h2{font-family:'GC Gudlak',sans-serif;line-height:1.15;letter-spacing:0;} html body .celebration-copy :is(p,a,small),html body .celebration-close{font-family:Helixa,sans-serif;} @media(max-width:1023px){ html body.home-page main#top .compact-scroll-stories .stories-layout{height:var(--compact-track-height)!important;min-height:0!important;display:block!important;} html body.home-page main#top .compact-scroll-stories .testimonial-stack-pin{position:sticky!important;top:var(--compact-pin-top)!important;height:auto!important;} html body.home-page main#top .compact-scroll-stories .stories-stage{display:grid!important;width:100%!important;overflow:visible!important;} html body.home-page main#top .compact-scroll-stories .story-panel{grid-area:1/1!important;width:100%!important;min-width:0!important;position:relative!important;transition:none!important;} html body.home-page main#top .compact-scroll-stories .story-panel :is(blockquote,figcaption){transition:none!important;} html body.home-page main#top .compact-scroll-stories .story-panel blockquote{font-size:clamp(1.125rem,2.8vw,1.5625rem)!important;line-height:1.4!important;} html body .studio-process li::before,html body .editorial-values li::before{top:0!important;align-self:start!important;} html body .contact-work li{align-items:flex-start!important;} html body .contact-work li::before{margin-top:0.1875rem!important;} html body .studio-belief{margin-bottom:3rem!important;} html body .studio-belief+.stats{margin-top:0!important;} html body.home-page main#top .home-belief+.clients.page-section{padding-top:2.5rem!important;} } @media(max-width:599px){ html body.home-page #top .hero{min-height:100svh!important;} html body.home-page #top .hero-model{width:100%!important;max-width:none!important;} html body.home-page main#top #statement-title{font-size:clamp(2.25rem,10.6vw,3.875rem)!important;line-height:1.1!important;} html body.home-page main#top #statement-title .motion-line{white-space:normal!important;} html body .founder-copy>a{margin-top:1.5rem!important;padding-top:0!important;padding-bottom:0.5rem!important;} html body .intro-studio-link{margin-top:1.5rem!important;padding-top:0!important;padding-bottom:0.5rem!important;} html body.home-page #top .why-contact{margin-top:1.5rem!important;} html body .founder-copy p{font-size:1.25rem!important;line-height:1.45!important;} html body .studio-belief p,html body.home-page .home-belief p{font-size:1.625rem!important;line-height:1.4!important;} html body footer.contact-panel .contact-copy h2{font-size:clamp(2.375rem,10.8vw,3rem)!important;line-height:1.12!important;} html body footer.contact-panel .contact-copy>p{max-width:270px!important;} html body footer.contact-panel .contact-details>a{font-size:1.375rem!important;line-height:1.4!important;} html body .services-page.services-redesign .service-hero h1{font-size:clamp(2.375rem,10.9vw,4rem)!important;line-height:1.1!important;overflow-wrap:normal!important;word-break:normal!important;} html body .services-page.services-redesign .service-hero h1 *{line-height:inherit!important;} html body :is(.contact-page,.audience-page)>.enquiry-form.wide-surface{padding-block:2.25rem!important;} html body :is(.contact-page,.audience-page) .enquiry-form legend{font-size:clamp(1.125rem,5.4vw,1.625rem)!important;font-weight:700!important;white-space:nowrap;line-height:1.3!important;} html body :is(.contact-page,.audience-page) .enquiry-field{font-size:1.5rem!important;line-height:2.125rem!important;} html body .contact-page .contact-work h2.editorial-title,html body .contact-page .contact-work h2.editorial-title *{font-size:clamp(2.75rem,12.6vw,4.25rem)!important;line-height:1.1!important;} html body main.case-study .case-related>h2{font-size:clamp(1.75rem,8.5vw,2.625rem)!important;white-space:nowrap!important;} html body main.case-study .case-related>h2 .editorial-line-mask{display:inline!important;} html body main.case-study .case-related h3{font-size:1.5rem!important;line-height:1.3!important;} html body main.case-study .case-related-grid{row-gap:3rem!important;} html body .services-faq .faq-question{font-size:1.25rem!important;line-height:1.2!important;} } @media(prefers-reduced-motion:reduce){.founder-photo-enter{opacity:1;translate:none;transition:none;}} .detail-number{opacity:0;translate:0 14px;transition:opacity 500ms ease,translate 650ms cubic-bezier(.22,1,.36,1);} .intro-studio-link.detail-draw{opacity:0;translate:0 14px;transition:opacity 500ms ease,translate 650ms cubic-bezier(.22,1,.36,1);} .detail-number.detail-arrived{opacity:1;translate:0 0;} .intro-studio-link.detail-arrived{opacity:1;translate:0 0;} html body .services-faq h2+.faq-motion{border-top-color:transparent;} html body .services-faq h2+.faq-motion::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:rgba(211,179,147,.35);transform:scaleX(0);transform-origin:left;transition:transform 650ms ease;} html body .services-faq h2+.faq-motion.faq-visible::before{transform:scaleX(1);} @media(prefers-reduced-motion:reduce){.detail-number{opacity:1;translate:none;transition:none;}.intro-studio-link.detail-draw{opacity:1;translate:none;transition:none;}} html body .services-page.services-redesign .services-faq .faq-question{line-height:1.2!important;} html body .services-page.services-redesign .services-faq .faq-answer{line-height:1.45!important;} @media(prefers-reduced-motion:reduce) and (max-width:1023px){ html body.home-page main#top .stories-stage{display:flex!important;flex-direction:column!important;gap:1.5rem!important;height:auto!important;} html body.home-page main#top .story-panel{position:relative!important;display:block!important;transform:none!important;opacity:1!important;visibility:visible!important;background:#fff!important;} html body.home-page main#top .story-panel :is(blockquote,figcaption){visibility:visible!important;opacity:1!important;} } /* Restore the orange panel’s solid ink, independent of dark-section headings. */ html body.home-page main#top #philosophy-title, html body.home-page main#top #philosophy-title .title-word{background:none!important;background-image:none!important;color:#201e1c!important;-webkit-text-fill-color:#201e1c!important;} /* Desktop refinements requested October 1; compact layouts retain their spacing. */ @media(min-width:1024px){ html body .services-faq .faq-item,html body .services-page #services-faq-title + .faq-item{padding-top:2rem!important;} html body .contact-page>.services-faq{margin-top:4rem!important;padding-top:0!important;} html body .contact-page>.stats{padding-bottom:0!important;margin-bottom:0!important;} html body.editorial-page main.editorial-main .studio-years p.editorial-lead{width:30.40625em!important;max-width:100%!important;margin-top:1.5rem!important;} html body .studio-page .studio-years .studio-years-copy-break{display:none!important;} html body .studio-page .studio-collage{margin-top:6rem!important;} html body.work-page #work .work-lead{width:28.03125em!important;max-width:100%!important;margin-top:1.5rem!important;} html body.editorial-page main.editorial-main .service-hero>p{width:32.875em!important;max-width:100%!important;margin-top:1.5rem!important;} } html body.work-page .work-showcase>.projects{margin-top:5rem!important;} @media(max-width:1023px){html body.work-page .work-showcase>.projects{margin-top:2.5rem!important;}} @media(min-width:1024px){.footer-fast-line{display:block;will-change:transform;}footer.contact-panel .contact-details .footer-line-mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;}} html body.home-page .scroll-letter{transition:color 180ms ease;color:#B3A69E;} @media(prefers-reduced-motion:reduce){html body.home-page .scroll-letter{color:#fff!important;transition:none;}} @media(min-width:1024px){html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title),html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title) .motion-line{line-height:1.08!important;}} @media(min-width:1920px){ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top .home-belief p{font-size:3.96rem!important;line-height:1.3!important;max-width:100%!important;} } html body footer.contact-panel .contact-copy>h2,html body footer.contact-panel .contact-copy>h2 *,html body footer.contact-panel .contact-details>a,html body footer.contact-panel .contact-details>a *{background-image:none!important;color:#201e1c!important;-webkit-text-fill-color:#201e1c!important;} @media(max-width:1023px) and (prefers-reduced-motion:no-preference){ html body.home-page main#top #hero-statement.intro-scroll-enabled{height:290svh!important;padding-block:0!important;} html body.home-page main#top #hero-statement .intro-scroll-stage{position:sticky!important;top:0!important;height:100svh!important;display:grid!important;align-items:center!important;} html body.home-page main#top #hero-statement.intro-scroll-enabled :is(.hero-statement-inner,#about){grid-area:1/1!important;margin:0!important;padding:0!important;width:100%!important;position:relative!important;} html body.home-page main#top .editorial-title-track.is-pinned-title{height:175svh!important;position:relative!important;margin-bottom:0!important;} html body.home-page main#top .is-pinned-title :is(.center-heading,.stories-heading){position:sticky!important;top:0!important;height:100svh!important;display:grid!important;place-items:center!important;padding:2rem 0!important;} html body.home-page main#top .home-belief.belief-scroll-enabled{height:200svh!important;padding-block:0!important;} html body.home-page main#top .belief-scroll-enabled .belief-scroll-stage{position:sticky!important;top:0!important;height:100svh!important;display:grid!important;place-items:center!important;} html body.home-page .intro-mouse-cue.is-active{display:block!important;position:fixed;left:50%;bottom:28px;width:36px;height:40px;border:0!important;border-radius:0;background:url('/immutable/268382365c1468b5/assets/icons/swipe-up.svg') center/contain no-repeat;transform:translateX(-50%);z-index:40;pointer-events:none;} html body.home-page .intro-mouse-cue::after{display:none!important;} } @media(max-width:1023px){ html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title),html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title) *{text-align:center!important;} html body.home-page main#top :is(.hero-statement-inner,.stories-heading,.center-heading){text-align:center!important;align-items:center!important;justify-items:center!important;} } @media(max-width:1023px){html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title) :is(span,.motion-line,.title-word-mask,.title-word){text-align:center!important;}} /* Mobile Figma 209:757: full-bleed viewport hero and authored reading sizes. */ @media(max-width:1023px){ html:has(body.home-page){scrollbar-gutter:auto;} html body.home-page main#top .hero{width:100%;height:100svh!important;min-height:100svh!important;max-height:100svh;padding:0!important;margin:0!important;overflow:hidden;} html body.home-page main#top .hero .hero-model{inset:0!important;width:100%!important;height:100%!important;margin:0!important;transform:none!important;max-width:none!important;} html body.home-page main#top .hero .hero-copy{position:absolute;inset:0;display:block;} html body.home-page main#top .hero .hero-details{position:absolute;display:flex;flex-direction:column;top:clamp(100px,14svh,144px)!important;left:24px!important;bottom:auto!important;width:289px!important;max-width:calc(100% - 48px)!important;gap:1.5rem!important;} html body.home-page main#top .hero .hero-intro{font-size:1.5rem!important;line-height:2rem!important;margin:0!important;} html body.home-page main#top .hero .hero-details .button{margin:0!important;height:60px;min-height:60px;font-size:1.25rem!important;line-height:1.5rem;padding:1.125rem 1.75rem;} html body.home-page main#top .why .why-grid{margin-top:1.5rem!important;} html body.home-page main#top .stories-heading{margin-bottom:0!important;} html body.home-page main#top .home-belief+.clients{margin-top:0!important;} } @media(max-width:599px){ html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title){font-size:clamp(1.8125rem,8.9552vw,2.25rem)!important;line-height:1.111111!important;letter-spacing:.02em!important;margin-inline:auto!important;width:100%!important;} html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title) .motion-line{line-height:inherit!important;white-space:nowrap!important;} html body.home-page main#top #about #studio-title.studio-description{font-size:1.25rem!important;line-height:1.75rem!important;width:304px!important;max-width:calc(100vw - 64px)!important;margin-inline:auto!important;text-align:center!important;} html body.home-page main#top .home-belief p{font-size:1.25rem!important;line-height:1.75rem!important;width:324px!important;max-width:calc(100vw - 64px)!important;margin-inline:auto!important;text-align:center!important;} } @media(max-width:1023px){ html body.home-page main#top .editorial-title-track.is-pinned-title .editorial-title-content{width:100%!important;justify-self:center!important;margin-inline:auto!important;} } @media(max-width:599px){ html body.home-page main#top .why #why-title, html body.home-page main#top .testimonials #testimonials-title{font-size:clamp(1.8125rem,8.9552vw,2.25rem)!important;line-height:1.111111!important;width:100%!important;max-width:286px!important;margin-inline:auto!important;} } /* Centre inner hero headings only, not section headings or project captions. */ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study) h1, html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study) h1 *{text-align:center!important;} html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study) h1{margin-inline:auto!important;} /* Centre only inner hero supporting copy; retain authored widths and breaks. */ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p), html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p) *{ text-align:center!important; } html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){margin-inline:auto!important;} /* Contact hero: Figma 160:1610, centred title/copy/email stack. */ html body.editorial-page main.editorial-main.contact-page .contact-intro{display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro>div{width:100%!important;max-width:998px;container-type:normal!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro h1{font-size:clamp(2.5rem,8.333333vw,7.5rem)!important;line-height:1.066667!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro .editorial-lead{width:668px!important;max-width:100%!important;margin-top:2rem!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro aside{display:flex!important;position:static!important;align-items:center;justify-content:center;flex-wrap:wrap;gap:0.75rem!important;margin:3rem 0 0!important;text-align:center!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro aside :is(p,a){font-size:1.5rem!important;line-height:2.25rem!important;margin:0!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro aside a{color:#FF933C!important;} @media(max-width:599px){ html body.editorial-page main.editorial-main.contact-page .contact-intro aside{margin-top:1.5rem!important;gap:0.5rem!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro aside :is(p,a){font-size:1rem!important;line-height:1.5rem!important;} } /* Stable desktop spacing from the last hero text to the following content. */ @media(min-width:1024px){ html body.editorial-page main.editorial-main :is(.service-hero,.contact-intro){padding-bottom:0!important;margin-bottom:7.5rem!important;} html body.editorial-page main.editorial-main .service-offerings{margin-top:0!important;padding-top:0!important;} html body.work-page main#top .work-showcase>.projects{margin-top:9rem!important;} html body.editorial-page main.editorial-main .studio-intro-photo, html body.editorial-page main.case-study .case-hero>:is(.case-image,picture,.case-mobile-artwork){margin-top:7.5rem!important;} html body.editorial-page main.case-study .case-hero>p{margin-bottom:7.5rem!important;} html body.editorial-page main.case-study .case-hero>p+:is(.case-image,picture,.case-mobile-artwork){margin-top:0!important;} } /* Each authored hero line remains a line at every screen size. */ html body:not(.home-page) main :is(.service-hero,.case-hero,.work-showcase) h1 .editorial-line-content{white-space:nowrap!important;} /* Case artwork stays still: no entrance, scale, parallax, or opacity transitions. */ html body.editorial-page main.case-study :is(.case-image,.case-artwork,.case-brand-tile,.case-desktop-artwork,.case-mobile-artwork), html body.editorial-page main.case-study :is(.case-image,.case-artwork,.case-brand-tile,.case-desktop-artwork,.case-mobile-artwork) img{ animation:none!important;transition:none!important;transform:none!important;translate:none!important;scale:none!important;opacity:1!important;will-change:auto!important; } /* Desktop inner hero H1s: 20% larger, scoped to hero containers. */ @media(min-width:1024px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1{font-size:clamp(5.4rem,9.84vw,9rem)!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro h1{font-size:clamp(3rem,10vw,9rem)!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro>div{max-width:1198px;} } @media(min-width:1024px) and (max-width:1600px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1{font-size:clamp(5.1rem,8.333333vw,8.4rem)!important;} } /* Scoped title rhythm: hero and colored statement panels only. */ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1:is(#work-page-title,.editorial-title,h1), html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1:is(#work-page-title,.editorial-title,h1) *{line-height:var(--inner-hero-leading,1)!important;} html body main:is(#top,#main-content,.editorial-main,.case-study) :is(.service-promise,.services-mix,.studio-thinking,.case-statement,#approach) :is(h2,h2 *), html body footer.contact-panel .contact-copy :is(h2,h2 *){line-height:1.05!important;} /* Keep the native hand above custom cursor layers, including icon descendants. */ html body #site-mobile-menu :is(a,button),html body #site-mobile-menu :is(a,button) *, html body .site-header button.editorial-menu-button,html body .site-header button.editorial-menu-button *{cursor:pointer!important;} html body #site-mobile-menu :is(a,button)::before,html body #site-mobile-menu :is(a,button)::after, html body .site-header button.editorial-menu-button::before,html body .site-header button.editorial-menu-button::after{cursor:pointer!important;pointer-events:none!important;} html:has(#site-mobile-menu[open]) body :is(.work-cursor,.stories-cursor){display:none!important;} /* Home reading rhythm and separation. */ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top .home-belief p{line-height:1.25!important;} html body.home-page main#top .testimonials{margin-top:2.5rem!important;} html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) #founder.founder.page-section>.founder-copy{position:relative;top:-24px;} html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) #founder.founder.page-section .founder-copy>.line-link{margin-top:2rem!important;} @media(max-width:1023px){html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) #founder.founder.page-section>.founder-copy{top:-12px;}html body.home-page main#top .testimonials{margin-top:1.5rem!important;}} .footer-fast-line{display:block;} footer.contact-panel .footer-line-mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;} /* More breathing room between Home service rows and the following statement. */ html body.home-page main#top #services .expertise-row{padding-block:2rem!important;} html body.home-page main#top .panel-reading-track:has(>#approach), html body.home-page main#top>#approach{margin-top:2.5rem!important;} html body.editorial-page main.services-page .service-hero{margin-bottom:9rem!important;} html body.home-page main#top section.testimonials.page-section.stories-stack-section{margin-top:2.5rem!important;} @media(max-width:1023px){ html body.home-page main#top #services .expertise-row{padding-block:1.75rem!important;} html body.home-page main#top .panel-reading-track:has(>#approach),html body.home-page main#top>#approach{margin-top:1.5rem!important;} html body.home-page main#top section.testimonials.page-section.stories-stack-section{margin-top:1.5rem!important;} } /* Contact: numbers share the heading's top edge; FAQ has balanced row spacing. */ html body.editorial-page main.contact-page .editorial-values li{position:relative!important;padding-left:3.5rem!important;} html body.editorial-page main.contact-page .editorial-values li::before{position:absolute!important;top:0!important;left:0!important;margin:0!important;line-height:1.2!important;text-align:left!important;} html body.editorial-page main.contact-page .editorial-values li h3{margin-top:0!important;} html body.editorial-page main.contact-page #contact-faq{padding-top:1.5rem!important;margin-top:2rem!important;padding-bottom:0!important;margin-bottom:7.5rem!important;} html body.editorial-page main.contact-page #contact-faq .faq-item{padding-top:2rem!important;padding-bottom:2rem!important;} html body .site-header.editorial-header:not(.header-scroll-hidden)>button.editorial-menu-button{pointer-events:auto!important;cursor:pointer!important;} html body .site-header.editorial-header>button.editorial-menu-button *{pointer-events:none!important;cursor:pointer!important;} @media(max-width:599px){html body.editorial-page main.contact-page #contact-faq{margin-bottom:5rem!important;}html body.editorial-page main.contact-page #contact-faq .faq-item{padding-block:1.5rem!important;}} /* Triple the current 40px / 24px gap above the Home orange panel. */ html body.home-page main#top>.panel-reading-track:has(>#approach){margin-top:7.5rem!important;} @media(max-width:1023px){html body.home-page main#top>.panel-reading-track:has(>#approach){margin-top:4.5rem!important;}} html body.editorial-page main.editorial-main.contact-page .editorial-values li::before{top:0!important;} html body.editorial-page main.case-study .case-hero>p:has(+.inner-hero-scroll-cue){margin-bottom:0!important;} /* Center only the Home editorial headlines and their supporting copy on compact screens. */ @media(max-width:1023px){ html body.home-page main#top .testimonials .editorial-title-track, html body.home-page main#top .testimonials .stories-heading{width:100%!important;max-width:none!important;justify-self:stretch!important;align-self:stretch!important;justify-items:center!important;} html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title){text-align:center!important;margin-inline:auto!important;} html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top .home-belief p{text-align:center!important;align-items:center!important;justify-content:center!important;margin-inline:auto!important;} html body.home-page main#top .intro-studio-link, html body.home-page main#top .why-contact{margin-inline:auto!important;} } @media(max-width:1023px){html body.home-page main#top section.home-belief p,html body.home-page main#top section.home-belief p *{text-align:center!important;}} @media(max-width:1023px){html body.home-page main#top .stories-heading .editorial-title-content{width:100%!important;justify-self:stretch!important;text-align:center!important;}html body.home-page main#top .stories-heading .editorial-title-content #testimonials-title{margin-inline:auto!important;}} /* FAQ copy and rules enter together; accordion height remains independently controlled. */ @media(prefers-reduced-motion:no-preference){ html body .services-faq .faq-item.faq-motion .faq-answer-inner{opacity:0;translate:0 18px;transition:opacity 550ms ease,translate 650ms cubic-bezier(.22,1,.36,1);} html body .services-faq .faq-item.faq-motion.faq-visible .faq-answer-inner{opacity:1;translate:0 0;} } /* Twice the approved Home services-to-panel spacing. */ html body.home-page main#top>.panel-reading-track:has(>#approach){margin-top:15rem!important;} @media(max-width:1023px){html body.home-page main#top>.panel-reading-track:has(>#approach){margin-top:9rem!important;}} /* Compact editorial layout: override the legacy left-aligned reading layouts. */ @media(max-width:1023px){ html body.home-page main#top #about .intro-studio-link{margin:1.5rem auto 0!important;} html body.home-page main#top #about .intro-studio-link>*{margin-inline:auto!important;} html body.home-page main#top section.home-belief.page-section .belief-scroll-copy, html body.home-page main#top section.home-belief.page-section .belief-scroll-copy p, html body.home-page main#top section.home-belief.page-section .belief-scroll-copy p>*{text-align:center!important;margin-inline:auto!important;} html body.home-page main#top section.testimonials.stories-stack-section .stories-heading .editorial-title-content{width:100%!important;max-width:none!important;justify-self:center!important;align-self:center!important;margin:0!important;} html body.home-page main#top section.testimonials.stories-stack-section #testimonials-title{width:100%!important;max-width:100%!important;margin:0 auto!important;text-align:center!important;} html body.home-page main#top section.testimonials.stories-stack-section #testimonials-title *{text-align:center!important;} html body.home-page main#top #hero-statement.intro-scroll-enabled{height:240svh!important;} html body.home-page main#top .editorial-title-track.is-pinned-title{height:145svh!important;} html body.home-page main#top section.home-belief.belief-scroll-enabled{height:145svh!important;} html body.home-page main#top .testimonials .stories-layout{margin-top:0!important;margin-bottom:0!important;padding-block:0!important;} html body.home-page main#top section.home-belief+.clients.page-section{padding-top:1.5rem!important;margin-top:0!important;} html body .studio-page .studio-belief p{font-size:clamp(1.25rem,3.2vw,1.75rem)!important;line-height:1.4!important;} } /* Orange surfaces always use solid dark ink, including animated line children. */ html body :is(#approach,.service-promise,.services-mix,.studio-thinking,.case-statement) h2, html body :is(#approach,.service-promise,.services-mix,.studio-thinking,.case-statement) h2 *{background:none!important;background-image:none!important;color:#201e1c!important;-webkit-text-fill-color:#201e1c!important;} @media(max-width:1023px){ html body.home-page main#top .stories-heading:has(#testimonials-title){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:1fr!important;} html body.home-page main#top .stories-heading:has(#testimonials-title) .editorial-title-content{grid-column:1/-1!important;grid-row:1!important;width:100%!important;} } @media(max-width:599px){ html body.editorial-page main.editorial-main.contact-page .editorial-values li{padding-left:0!important;} html body.editorial-page main.editorial-main.contact-page .editorial-values li::before{position:static!important;display:block!important;margin:0 0 0.75rem!important;} html body.editorial-page main.contact-page .contact-work li{flex-direction:column!important;align-items:flex-start!important;gap:0.5rem!important;} html body.home-page main#top section.home-belief.page-section p{font-size:1.25rem!important;line-height:1.4!important;} } @media(prefers-reduced-motion:no-preference){ html body.home-page #services .expertise-row.detail-rule{position:relative;border-bottom-color:transparent!important;} html body.home-page #services .expertise-row.detail-rule::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#B3A69E66;transform:scaleX(0);transform-origin:left;transition:transform 650ms cubic-bezier(.22,1,.36,1);} html body.home-page #services .expertise-row.detail-rule.detail-arrived::after{transform:scaleX(1);} } @media(max-width:599px){ html body :is(main#top,main.editorial-main) #founder.founder.page-section .founder-copy>p:not(.eyebrow){font-size:1.25rem!important;line-height:1.45!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol li, html body.editorial-page main.editorial-main.studio-page .editorial-values li{padding-left:0!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol li::before, html body.editorial-page main.editorial-main.studio-page .editorial-values li::before{position:static!important;display:block!important;margin:0 0 0.75rem!important;} html body.editorial-page main:is(#top,.editorial-main).services-page.services-redesign .service-hero h1.editorial-title{font-size:clamp(2.375rem,10.9vw,4rem)!important;line-height:1.1!important;} html body.editorial-page main:is(#top,.editorial-main).services-page.services-redesign .service-hero h1.editorial-title *{line-height:inherit!important;} } @media(max-width:1023px){ html body.editorial-page main.case-study .case-related>h2{width:max-content!important;max-width:100%!important;white-space:nowrap!important;} html body.editorial-page main.case-study .case-related>h2 .editorial-line-mask, html body.editorial-page main.case-study .case-related>h2 .editorial-line-content{display:inline-block!important;white-space:nowrap!important;} html body.editorial-page main.case-study .case-related>h2 .editorial-line-mask+.editorial-line-mask{margin-left:.22em!important;} } @media(prefers-reduced-motion:no-preference){ html body .detail-index::before{opacity:0;translate:0 10px;transition:opacity 450ms ease,translate 550ms cubic-bezier(.22,1,.36,1);} html body .detail-index.detail-arrived::before{opacity:1;translate:0 0;} } @media(max-width:599px){.services-redesign .service-hero h1{--inner-hero-leading:1.1;}} /* Compact desktops: keep the complete hero group inside the viewport. */ @media(min-width:1024px) and (max-width:1600px){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p), html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p) *{font-size:clamp(1.25rem,1.75vw,1.625rem)!important;line-height:1.4!important;} } @media(min-width:1024px){ html body.editorial-page main.contact-page #contact-faq{margin-top:0!important;padding-top:9rem!important;} html body.editorial-page main.contact-page .contact-reach{margin-bottom:0!important;} } @media(min-width:600px) and (max-width:1023px){ html body.editorial-page main.contact-page #contact-faq{margin-top:0!important;padding-top:6.5rem!important;} html body.editorial-page main.contact-page .contact-reach{margin-bottom:0!important;} } @media(max-width:599px){ html body.editorial-page main.contact-page #contact-faq{margin-top:0!important;padding-top:5rem!important;} html body.editorial-page main.contact-page .contact-reach{margin-bottom:0!important;} html body .services-faq .faq-question .faq-toggle-icon{width:16px!important;height:16px!important;min-width:16px!important;flex:0 0 16px!important;} } /* Separate inner-page content from the footer; founder pages remain flush. */ html body.work-page footer#contact.contact-panel, html body.editorial-page:has(main:not(.studio-page)) footer#contact.contact-panel{margin-top:7.5rem!important;} @media(max-width:1023px){ html body.work-page footer#contact.contact-panel, html body.editorial-page:has(main:not(.studio-page)) footer#contact.contact-panel{margin-top:5rem!important;} } /* Home studio introduction: centered on every screen, with room before its CTA. */ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top #about #studio-title.studio-description *{text-align:center!important;} html body.home-page main#top #about #studio-title.studio-description{margin-inline:auto!important;} html body.home-page main#top #about .intro-studio-link{margin:2.5rem auto 0!important;} html body.home-page main#top #about .intro-studio-link>*{margin-inline:auto!important;} @media(min-width:1024px){html body.home-page main#top #about .intro-studio-link{margin-top:3.5rem!important;}} /* Tablet portrait refinements from Figma 252:904. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.home-page main#top .hero .hero-details{left:40px!important;top:clamp(170px,20svh,240px)!important;width:335px!important;gap:1.5rem!important;} html body.home-page main#top .hero .hero-intro{font-size:1.75rem!important;line-height:2.25rem!important;} html body.home-page main#top .hero .hero-details .button{width:max-content!important;max-width:100%;} html body.home-page main#top #hero-statement.intro-scroll-enabled{height:205svh!important;min-height:205svh!important;} html body.home-page main#top #about #studio-title.studio-description{font-size:2rem!important;line-height:2.75rem!important;width:602px!important;max-width:calc(100vw - 96px)!important;} html body.home-page main#top #about #studio-title .intro-line-break{display:inline!important;} html body.home-page main#top #about #studio-title .intro-first-break{display:none!important;} html body.home-page main#top .compact-scroll-stories .story-panel{min-height:420px!important;padding:3.25rem!important;border-radius:16px!important;} html body.home-page main#top .compact-scroll-stories .story-panel blockquote{font-size:1.625rem!important;line-height:2.1625rem!important;} html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1{font-size:clamp(4rem,9.1vw,6rem)!important;} html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){font-size:1.375rem!important;line-height:1.45!important;width:80%!important;max-width:80%!important;margin-inline:auto!important;} html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p) *{font-size:inherit!important;line-height:inherit!important;} html body.work-page main#top .work-caption,html body.work-page main#top .work-caption a{font-size:1.875rem!important;line-height:1.25!important;} html body.editorial-page main.case-study .case-facts{display:flex!important;flex-direction:column!important;grid-column:1/-1!important;gap:1.75rem!important;margin-left:0!important;} html body.editorial-page main.case-study .case-facts>div{width:100%!important;margin:0!important;} html body.editorial-page main.studio-page .clients .clients-heading{width:calc(100% - 96px)!important;margin-inline:3rem!important;text-align:left!important;} } html body main :is(.project-media,.project-media picture,.project-media img,.work-card,.work-card img){border-radius:16px!important;} html body main .project-media{overflow:hidden!important;} /* Stable paint surfaces for clipped text, including WebKit. */ html body .editorial-line-mask,html body .motion-line{overflow:hidden!important;} html body .editorial-line-content,html body .motion-line>span{-webkit-backface-visibility:hidden;backface-visibility:hidden;} @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.studio-page .clients.page-section{width:calc(100% - 96px)!important;margin-inline:3rem!important;} html body.editorial-page main.studio-page .clients .clients-heading{width:100%!important;margin-inline:0!important;} } html body.home-page main#top #work :is(.work-slide,.work-slide-image,.work-slide-image picture,.work-slide-image img){border-radius:16px!important;} html body.home-page main#top #work .work-slide-image{overflow:hidden!important;} /* No empty spacer or exposed background seam between the room and introduction. */ html body.home-page main#top #hero-statement{margin-top:0!important;background:#201e1c!important;} @media(max-width:1100px){ html body.home-page main#top #hero-statement .intro-scroll-stage{align-items:start!important;padding-top:5rem!important;box-sizing:border-box;} html body.home-page main#top #hero-statement .hero-statement-inner{align-self:start!important;} html body.home-page main#top #hero-statement #about{align-self:center!important;} } /* Tablet portrait only: compact links and a calmer section-title hierarchy. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.home-page main#top #about .intro-studio-link, html body.home-page main#top .why-contact{margin-inline:auto!important;} html body.home-page main#top #about .intro-studio-link>*, html body.home-page main#top .why-contact>*{margin-inline:0!important;flex:0 0 auto!important;} html body main:is(#top,#main-content,.editorial-main,.case-study) h2{font-size:3rem!important;line-height:1.15!important;} html body.home-page main#top :is(#why-title,#testimonials-title){font-size:4rem!important;line-height:1.15!important;} html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach,.service-promise,.services-mix,.studio-thinking,.case-statement) h2{font-size:3.75rem!important;line-height:1.15!important;} html body.work-page main#top h2.work-caption{font-size:1.875rem!important;} html body footer#contact.contact-panel .contact-copy h2{font-size:3.75rem!important;line-height:1.1!important;} html body main.case-study .case-related>h2{font-size:2.5rem!important;} html body .services-faq .faq-item .faq-question{font-size:1.5rem!important;line-height:1.35!important;} html body.editorial-page main.contact-page #contact-faq{padding-top:8rem!important;} html body.editorial-page main .services-faq:not(#contact-faq){padding-top:2rem!important;} html body.editorial-page main.contact-page .contact-intro .contact-hero-copy-break{display:block!important;} html body.home-page main#top #work :is(.work-slide,.work-slide-image,.work-slide-image picture,.work-slide-image img), html body.work-page main#top :is(.project-media,.project-media picture,.project-media img), html body main.case-study .case-related :is(a,picture,img){border-radius:16px!important;} } @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.home-page main#top #hero-statement .intro-scroll-stage{align-items:center!important;padding-top:0!important;} html body.home-page main#top #hero-statement .hero-statement-inner{align-self:center!important;} html body.home-page main#top .why #why-title, html body.home-page main#top .testimonials #testimonials-title{font-size:4rem!important;line-height:1.15!important;} html body.home-page .intro-mouse-cue.is-active{display:block!important;visibility:visible!important;} } /* Mobile typography: a stronger hero with quieter, narrower supporting copy. */ @media(max-width:599px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1, html body.editorial-page main.editorial-main.contact-page .contact-intro h1, html body.editorial-page main:is(#top,.editorial-main).services-page.services-redesign .service-hero h1.editorial-title{font-size:clamp(2.375rem,11.7vw,3rem)!important;} html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){font-size:1.125rem!important;line-height:1.45!important;width:80%!important;max-width:80%!important;margin-inline:auto!important;} html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p) *{font-size:inherit!important;line-height:inherit!important;} html body.home-page main#top #hero-statement #statement-title{font-size:clamp(1.9375rem,9.7vw,2.5rem)!important;line-height:1.12!important;} html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form .enquiry-field :is(input,textarea){font-size:1.25rem!important;line-height:1.4!important;} html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form .service-options label span{font-size:1rem!important;} html body.editorial-page main.contact-page #contact-faq{padding-top:6.5rem!important;} } html body.home-page main#top .why #why-title br{display:block!important;} html body.home-page main#top .why #why-title .motion-line{display:block!important;white-space:nowrap!important;} @media(max-width:599px){html body.home-page main#top .why #why-title{width:100%!important;max-width:100%!important;font-size:clamp(1.6875rem,8.3vw,2.25rem)!important;}} /* Contact tablet portrait: use the same section-heading scale above and below stats. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.contact-page .contact-reach>h2.editorial-title, html body.editorial-page main.contact-page #contact-faq #contact-faq-title{font-size:clamp(2.25rem,5.4vw,3.375rem)!important;line-height:1.2!important;font-weight:500!important;letter-spacing:0!important;} html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form .enquiry-field :is(input,textarea){font-size:1.5rem!important;line-height:1.4!important;} html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form .service-options label span{font-size:1.125rem!important;} } /* Shared scroll-drawn rules; the border stays hidden while its rule reveals. */ @media(prefers-reduced-motion:no-preference){ html body .services-faq .faq-item.faq-motion{border-bottom-color:transparent!important;} html body .services-faq h2+.faq-item.faq-motion{border-top-color:transparent!important;} html body .services-faq .faq-motion::after, html body .services-faq h2+.faq-motion::before, html body.home-page #services .expertise-row.detail-rule::after{transform-origin:left center!important;transition:transform 800ms cubic-bezier(.22,1,.36,1)!important;} } @media(max-width:599px){ html body main .services-faq .faq-item{padding-block:1.5rem!important;} html body main .services-faq .faq-question{line-height:1.2!important;} html body main .services-faq .faq-answer p{line-height:1.4!important;} } /* Social navigation stays at the panel bottom without overlapping short screens. */ html body dialog.editorial-menu#site-mobile-menu[open]{display:flex!important;flex-direction:column!important;padding-bottom:max(2.5rem,env(safe-area-inset-bottom))!important;} html body #site-mobile-menu nav.menu-primary{flex-shrink:0!important;} html body #site-mobile-menu nav.menu-social{flex-shrink:0!important;margin-top:auto!important;margin-bottom:0!important;padding-top:2rem!important;} @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1, html body.editorial-page main.editorial-main.contact-page .contact-intro h1{font-size:clamp(4.25rem,9.65vw,6.375rem)!important;} } /* Authored desktop copy breaks must not strand words on narrower layouts. */ @media(max-width:1439px){ html body.editorial-page main.services-page .service-hero>p br, html body.editorial-page main.studio-page .editorial-intro>.studio-lead br {display:none!important;} html body.editorial-page main.services-page .service-hero>p, html body.editorial-page main.studio-page .editorial-intro>.studio-lead { text-wrap:pretty!important;white-space:normal!important;word-break:normal!important; } } /* Contact FAQ uses the same desktop section-heading scale as Global Reach. */ @media(min-width:1101px){ html body.editorial-page main.contact-page #contact-faq #contact-faq-title { font-size:var(--desktop-heading,3.5rem)!important;line-height:1.25!important; } } @media(min-width:1024px) and (max-width:1799px){ html body.editorial-page main.contact-page #contact-faq .faq-item .faq-question { font-size:clamp(1.5rem,1.666667vw,1.75rem)!important;line-height:1.35!important; } } /* Tighter spacing after inner-page hero copy. */ html body.editorial-page main.editorial-main :is(.service-hero,.contact-intro) {margin-bottom:4rem!important;} html body.editorial-page main.editorial-main .studio-intro-photo, html body.editorial-page main.case-study .case-hero>.case-image, html body.work-page .work-showcase>.projects {margin-top:4rem!important;} /* Smaller mobile inner-hero titles preserve all authored line breaks. */ @media(max-width:599px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1, html body.editorial-page main.editorial-main.contact-page .contact-intro h1, html body.editorial-page main:is(#top,.editorial-main).services-page.services-redesign .service-hero h1.editorial-title { font-size:clamp(2rem,10.5vw,2.75rem)!important; } } @media(max-width:599px){ html body.editorial-page main.studio-page .editorial-intro>.studio-lead { width:100%!important;max-width:100%!important;font-size:clamp(0.8125rem,4vw,1.125rem)!important;line-height:1.45!important; } html body.editorial-page main.studio-page .editorial-intro>.studio-lead .studio-mobile-copy-line { display:block!important;white-space:nowrap!important;font-size:inherit!important;line-height:inherit!important; } } /* Shared content-image corners at every breakpoint. */ html body main:is(#top,#main-content,.editorial-main,.case-study) :is( .work-slide-image,.project-media,.work-card,.service-image,.case-image, .studio-intro-photo,.studio-photo,.studio-collage,.contact-work-image, .case-desktop-artwork,.case-mobile-artwork,.case-related picture) { border-radius:16px!important;clip-path:inset(0 round 16px)!important;overflow:hidden; } html body main:is(#top,#main-content,.editorial-main,.case-study) :is( .work-slide-image,.project-media,.work-card,.service-image,.case-image, .studio-intro-photo,.studio-photo,.studio-collage,.case-related) :is(picture,img) { border-radius:16px!important; } /* Tablet menu: slightly larger navigation and clearer social separation. */ @media(min-width:600px) and (max-width:1100px){ html body dialog#site-mobile-menu nav.menu-primary a {font-size:clamp(2.75rem,6.7vw,3.5rem)!important;line-height:1.2!important;} html body dialog#site-mobile-menu nav.menu-social {padding-top:3.5rem!important;} } @media(min-width:600px) and (max-width:1100px){ html body dialog.editorial-menu#site-mobile-menu { --menu-width:min(480px,calc(100vw - 48px));width:var(--menu-width)!important; } } /* Contact numbered copy uses the same tablet number gutter as Studio. */ @media(min-width:600px) and (max-width:1100px){ html body.editorial-page main.editorial-main:is(.contact-page,.studio-page) .editorial-values li{padding-left:2.5rem!important;} } /* Contact form: continuous type and option sizing from phones to large desktops. */ html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form legend{ font-size:clamp(1.5rem,calc(1rem + 1.25vw),2.5rem)!important; line-height:1.25!important;white-space:normal!important; } html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form .enquiry-field, html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form .enquiry-field :is(input,textarea){ font-size:clamp(1.25rem,calc(0.75rem + 1.041667vw),2rem)!important; line-height:1.5!important; } html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form .service-options{ gap:clamp(0.75rem,1.25vw,1.5rem)!important; } html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form .service-options label span{ font-size:clamp(1rem,calc(0.75rem + .625vw),1.5rem)!important; line-height:1.333333!important;font-weight:700!important; padding:.666667em 1em!important;border-radius:.5em!important; min-height:44px;box-sizing:border-box;display:flex;align-items:center; } /* Keep the white header wordmark legible over light content while scrolling. */ html body .site-header .wordmark{overflow:visible!important;} html body .site-header .wordmark img{ filter:drop-shadow(0 1px 1.5px rgba(49,38,27,.22)) drop-shadow(0 5px 8px rgba(49,38,27,.18))!important; } /* Content-sized colored panels on tablets and smaller desktops. */ @media(min-width:600px) and (max-width:1599px){ html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement){ height:auto!important;min-height:0!important; padding-block:clamp(3rem,4.5vw,4.5rem)!important; } html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{margin-top:2rem!important;} } /* Inner hero descriptions share a fluid scale and retain authored desktop lines. */ @media(min-width:600px){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){ font-size:clamp(0.875rem,1.666667vw,1.75rem)!important;line-height:1.45!important; width:100%!important;max-width:100%!important;text-wrap:pretty; } html body main .editorial-intro .studio-lead .studio-mobile-copy-line{display:inline!important;white-space:normal!important;} html body main :is(.editorial-intro .studio-lead,.service-hero>p,.work-lead) br{display:block!important;} } @media(min-width:600px){ html body.editorial-page main.services-page .service-hero>p br, html body.editorial-page main.studio-page .editorial-intro>.studio-lead br{display:block!important;} } /* Tablet navigation and Contact service list: a lighter, consistent scale. */ @media(min-width:600px) and (max-width:1100px){ html body dialog#site-mobile-menu nav.menu-primary a{font-size:clamp(2.5rem,6vw,3.125rem)!important;line-height:1.2!important;} html body.editorial-page main.contact-page .contact-work li{font-size:clamp(1.5rem,3.4vw,2rem)!important;line-height:1.4!important;} html body.editorial-page main.contact-page .contact-work li::before{font-size:.65em!important;line-height:inherit!important;} } /* One mobile subheading scale for Work, Services, Studio, Contact and case heroes. */ @media(max-width:599px){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){ font-size:clamp(0.8125rem,4vw,1.125rem)!important;line-height:1.45!important; } } /* Work mobile hero: natural wrapping inside a centered reading width. */ @media(max-width:599px){ html body.work-page main :is(.work-showcase,.work-showcase#work) .work-lead{ width:80%!important;max-width:80%!important;margin-inline:auto!important; text-align:center!important;white-space:normal!important;text-wrap:pretty!important; } html body.work-page main .work-showcase .work-lead br{display:none!important;} } /* Tablet portrait: centered hero descriptions with natural wrapping. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){ width:95%!important;max-width:95%!important;margin-inline:auto!important;text-align:center!important; white-space:normal!important;text-wrap:pretty!important; } html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p) br{display:block!important;} html body.editorial-page main.studio-page .editorial-intro>.studio-lead .studio-mobile-copy-line{display:inline!important;white-space:normal!important;} } /* Tablet and small-desktop case details follow the copy column. */ @media(min-width:600px) and (max-width:1439px){ html body.editorial-page main.case-study .case-story.case-overview{ display:grid!important;grid-template-columns:minmax(0,30fr) minmax(0,60fr)!important; column-gap:clamp(1.5rem,5vw,3.5rem)!important; } html body.editorial-page main.case-study .case-overview>.case-copy{grid-column:2!important;min-width:0;} html body.editorial-page main.case-study .case-overview>.case-facts{grid-column:2!important;margin-left:0!important;min-width:0;} } /* Medium-desktop copy size shared by small desktops and both tablet orientations. */ @media(min-width:600px) and (max-width:1599px){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){font-size:1.5rem!important;line-height:1.45!important;} } @media(min-width:600px) and (max-width:1439px){ html body.editorial-page main.case-study .case-overview>.case-facts{ display:flex!important;flex-direction:column!important;gap:1.75rem!important; } html body.editorial-page main.case-study .case-overview>.case-facts>div{width:100%!important;margin:0!important;} } /* More breathing room in all matching colored panels around 1440px. */ @media(min-width:1366px) and (max-width:1599px){ html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement){padding-block:6rem!important;} } /* 1440px editorial review: compact copy and roomier colored panels. */ @media(min-width:1366px) and (max-width:1599px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1{font-size:calc(clamp(5.1rem,8.333333vw,8.4rem) - 0.5rem)!important;} html body.editorial-page main.services-page.services-redesign .service-description h2, html body.editorial-page main.services-page.services-redesign .service-support-item h3{font-size:2.75rem!important;line-height:1.2!important;} html body.editorial-page main.services-page.services-redesign :is(.service-copy p,.service-support-item p){font-size:1.25rem!important;line-height:1.4!important;} html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement){padding-block:7.5rem!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values>li:not(:last-child){margin-bottom:3.5rem!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values h3{font-size:1.75rem!important;line-height:1.2!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values p{font-size:1.25rem!important;line-height:1.4!important;max-width:54ch!important;margin-top:1rem!important;} } /* Authored two-line numbered copy only for the 1440 desktop layout. */ .numbered-copy-break{display:none;} @media(min-width:1366px) and (max-width:1599px){ html body.editorial-page main.editorial-main.studio-page .studio-process p{font-size:calc(clamp(1.125rem,1.5vw,1.5rem) - 0.25rem)!important;line-height:1.4!important;text-wrap:balance;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-values p{max-width:none!important;} html body.editorial-page main.editorial-main .editorial-values .numbered-copy-break{display:block!important;} } /* Give each process step room for two lines while retaining the stagger. */ .process-copy-break{display:none;} @media(min-width:1101px){ html body.editorial-page main.editorial-main.studio-page section.studio-process ol li:nth-child(n){box-sizing:border-box;width:48%!important;margin-top:3.5rem!important;margin-bottom:0!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol li:nth-child(1){margin-left:0!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol li:nth-child(2){margin-left:17%!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol li:nth-child(3){margin-left:35%!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol li:nth-child(4){margin-left:52%!important;} html body.editorial-page main.editorial-main.studio-page .studio-process p{text-wrap:wrap;max-width:none!important;} html body.editorial-page main.editorial-main.studio-page .studio-process .process-copy-break{display:block!important;} } @media(min-width:1101px){ html body.editorial-page main.editorial-main.studio-page .editorial-values .numbered-copy-break{display:block!important;} } /* Shift desktop numbered lists toward the right container edge. */ @media(min-width:1101px){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .editorial-split>.editorial-values{margin-left:clamp(1.5rem,3.333333vw,4rem)!important;min-width:0;} } /* A subtle reduction for the remaining desktop inner-hero sizes. */ @media(min-width:1101px) and (max-width:1365px), (min-width:1600px) and (max-width:1600px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1{font-size:calc(clamp(5.1rem,8.333333vw,8.4rem) - 0.25rem)!important;} } @media(min-width:1601px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1{font-size:calc(clamp(5.4rem,9.84vw,9rem) - 0.25rem)!important;} } /* One numbered-list layout for Studio principles and Contact next steps. */ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li{ display:grid!important;grid-template-columns:2ch minmax(0,1fr);column-gap:1rem;align-items:baseline;padding-left:0!important; font-size:clamp(1rem,1.388889vw,1.375rem); } html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li::before{ position:static!important;grid-column:1;grid-row:1;align-self:start!important;top:auto!important;left:auto!important;margin:0!important; font-family:Helixa,sans-serif!important;font-size:inherit!important;line-height:1.2!important;letter-spacing:0!important; } html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>h3{ grid-column:2;grid-row:1;margin:0!important;font-family:Helixa,sans-serif!important;font-weight:500!important; font-size:clamp(1.375rem,2.083333vw,2.125rem)!important;line-height:1.2!important; } html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>p{ grid-column:2;grid-row:2;margin-top:1rem!important;font-size:clamp(1rem,1.388889vw,1.375rem)!important;line-height:1.4!important; } @media(min-width:1366px) and (max-width:1599px){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>h3{font-size:1.75rem!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>p{font-size:1.25rem!important;} } /* Mobile reading widths and stacked numbers; Contact work list stays inline. */ @media(max-width:599px){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li{display:block!important;padding-left:0!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li::before, html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li::before{position:static!important;display:block!important;margin:0 0 0.75rem!important;transform:none!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li{padding-left:0!important;} html body.editorial-page main.editorial-main.studio-page .studio-belief p{font-size:1.375rem!important;line-height:1.4!important;} html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p), html body.work-page main :is(.work-showcase,.work-showcase#work) .work-lead{width:90%!important;max-width:90%!important;margin-inline:auto!important;} html body.editorial-page main.services-page.services-redesign .service-container.service-offerings{width:calc(100% - 40px)!important;} html body.editorial-page main.services-page.services-redesign :is(.service-overview,.service-copy,.service-copy p){width:100%!important;max-width:none!important;} html body.editorial-page main.services-page.services-redesign .service-support>h2, html body.editorial-page main.services-page.services-redesign .service-support>h2 *{font-family:Helixa,sans-serif!important;font-weight:400!important;background:none!important;background-image:none!important;color:#d3b393!important;-webkit-text-fill-color:#d3b393!important;} } @media(max-width:599px){ html body.editorial-page main.case-study .case-related h3{font-size:1.375rem!important;line-height:1.3!important;} html body.editorial-page main.case-study .case-related p{font-size:1rem!important;line-height:1.4!important;} html body main.case-envisioner .envisioner-mobile-apps:not(.creator-apps){background:#fde8d9 radial-gradient(ellipse at 90% 75%,#f8b68f80,transparent 65%)!important;background-attachment:local!important;} html body.home-page main#top .stories-stack-section .stories-stage{width:calc(100vw - 32px)!important;max-width:none!important;margin-left:calc(50% - 50vw + 1rem)!important;margin-right:0!important;} html body.home-page main#top .stories-stack-section .stories-stage .story-panel{min-height:380px!important;padding:2.5rem 1.5rem!important;box-sizing:border-box;} html body.home-page main#top .stories-stack-section .stories-stage .story-panel blockquote{font-size:1.25rem!important;line-height:1.4!important;} } /* Tablet portrait review, isolated from mobile and landscape layouts. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body dialog.editorial-menu#site-mobile-menu{padding-left:2rem!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split{grid-template-columns:minmax(0,1fr)!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values{width:100%!important;max-width:none!important;margin-left:0!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>h3, html body.editorial-page main.editorial-main.studio-page .studio-process h3{font-size:1.75rem!important;line-height:1.2!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>p, html body.editorial-page main.editorial-main.studio-page .studio-process p{font-size:1.25rem!important;line-height:1.45!important;max-width:none!important;} html body.editorial-page main.editorial-main.studio-page .studio-process ol>li:nth-child(n){width:100%!important;margin-left:0!important;} html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form legend{font-size:1.875rem!important;line-height:1.25!important;} html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form .enquiry-field, html body.editorial-page main:is(.contact-page,.audience-page) .enquiry-form .enquiry-field :is(input,textarea){font-size:1.5rem!important;line-height:1.4!important;} html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement){padding-block:4.5rem!important;} html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{font-size:1.5rem!important;line-height:1.4!important;} html body.editorial-page main.services-page.services-redesign .service-support>h2, html body.editorial-page main.services-page.services-redesign .service-support>h2 *{font-family:Helixa,sans-serif!important;font-size:1.5rem!important;font-weight:400!important;line-height:1.4!important;background:none!important;color:#d3b393!important;-webkit-text-fill-color:#d3b393!important;} html body.work-page footer#contact.contact-panel{margin-top:2.5rem!important;} html body.work-page main#top{padding-bottom:0!important;margin-bottom:0!important;} html body.editorial-page main.case-study .case-story>h2, html body.editorial-page main.case-study .case-related>h2{font-size:2.75rem!important;line-height:1.2!important;} html body.editorial-page main.case-study .case-story .case-copy, html body.editorial-page main.case-study .case-story .case-copy p{font-size:1.25rem!important;line-height:1.5!important;} html body.editorial-page main.case-study .case-related h3{font-size:1.5rem!important;line-height:1.3!important;} } @media(min-width:600px){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li::before, html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li::before{transform:translateY(4px)!important;} } @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .stats.page-section{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:1.5rem!important;width:calc(100% - 96px)!important;max-width:none!important;margin-inline:auto!important;padding-inline:0!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .stats.page-section article{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:1.5rem!important;min-height:144px!important;padding:2rem!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .stats.page-section article>strong{flex-shrink:0;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .stats.page-section article>span{font-size:1.375rem!important;line-height:1.3!important;text-align:right;} } /* Tablet landscape: consistent roomy statement panels and compact contact details. */ @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body footer#contact.contact-panel .contact-details{display:flex!important;flex-direction:column!important;gap:1rem!important;} html body footer#contact.contact-panel .contact-details>a{margin-block:0!important;} html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement){padding-block:6rem!important;} } /* Shared support label: solid desktop beige at every viewport. */ html body.editorial-page main.services-page.services-redesign .service-support>h2, html body.editorial-page main.services-page.services-redesign .service-support>h2 *{background:none!important;background-image:none!important;color:#d3b393!important;-webkit-text-fill-color:#d3b393!important;font-family:Helixa,sans-serif!important;font-weight:400!important;} html body.editorial-page main.services-page.services-redesign .service-support>h2{margin-bottom:2rem!important;} html body.editorial-page main.services-page.services-redesign .service-support-item{margin-bottom:2.25rem!important;} html body.editorial-page main.services-page.services-redesign .service-support-item h3{padding-block:0!important;margin-bottom:0.25rem!important;} @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body main :is(.services-faq,#contact-faq) .faq-answer p{font-size:1.5rem!important;line-height:1.45!important;} html body dialog.editorial-menu#site-mobile-menu{padding-left:0!important;} html body dialog#site-mobile-menu nav:is(.menu-primary,.menu-social){margin-left:3.4375rem!important;} } /* Slightly smaller service typography on landscape tablets. */ @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.services-page.services-redesign .service-description h2, html body.editorial-page main.services-page.services-redesign .service-support-item h3{font-size:2.75rem!important;line-height:1.2!important;} html body.editorial-page main.services-page.services-redesign :is(.service-copy p,.service-support-item p){font-size:1.25rem!important;line-height:1.45!important;} } @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.services-page.services-redesign .service-overview .service-copy{width:100%!important;max-width:none!important;} } @media(max-width:599px){ html body.editorial-page main.editorial-main.studio-page .studio-belief p{font-size:1.5rem!important;line-height:1.3!important;} } /* Tablet portrait service copy inset. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.services-page.services-redesign .service-overview .service-copy{width:90%!important;max-width:none!important;} } /* Compact, bold numbered points on portrait tablets. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li:not(:last-child){margin-bottom:2.5rem!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>h3, html body.editorial-page main.editorial-main.studio-page .studio-process h3{font-weight:700!important;} html body.editorial-page main.editorial-main.studio-page .studio-process ol>li:nth-child(n+2){margin-top:2.5rem!important;} } /* Home and Studio share the same founder presentation at every breakpoint. */ @media(min-width:600px) and (max-width:1100px){ body.editorial-page .studio-page .founder-copy>h2{font-size:3rem!important;line-height:4.25rem!important;letter-spacing:.02em!important;} } @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.studio-page #founder .founder-copy a.line-link.line-link.line-link.line-link{font-size:1rem!important;line-height:1.75rem!important;letter-spacing:0.04rem!important;gap:1rem!important;padding-bottom:0.5rem!important;} } @media(min-width:1800px){html body.editorial-page main.studio-page #founder.founder.page-section{margin-top:0!important;padding-top:13.75rem!important;}} /* Portrait tablet service headings: smaller type and closer descriptions. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.services-page.services-redesign .service-description h2{font-size:2.25rem!important;line-height:1.2!important;margin-bottom:1rem!important;} html body.editorial-page main.services-page.services-redesign .service-number{font-size:1.25rem!important;line-height:1.75rem!important;} html body.editorial-page main.services-page.services-redesign .service-copy>p:first-child{margin-top:0!important;} } /* One FAQ type scale throughout tablet widths, including resized previews. */ @media(min-width:600px) and (max-width:1366px){ html body.editorial-page main :is(#services-faq,#contact-faq,.services-faq) .faq-item .faq-question{font-size:1.625rem!important;line-height:1.3!important;} html body.editorial-page main :is(#services-faq,#contact-faq,.services-faq) .faq-item .faq-answer .faq-answer-inner>p{font-size:1.5rem!important;line-height:1.45!important;} } /* Shared footer description break on every page and viewport. */ html body footer#contact.contact-panel .contact-top .contact-copy>p{max-width:100%!important;} html body footer#contact.contact-panel .contact-copy .footer-description-break{display:block!important;} /* Uniform portrait-tablet statement panels. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement){padding-block:5.5rem!important;} html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{width:80%!important;max-width:80%!important;} } /* Align inline step numbers with the heading's top edge. */ @media(min-width:600px){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li::before, html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li::before{top:0!important;align-self:start!important;transform:none!important;line-height:1!important;} } /* Shared list styling at every width; never depend on viewport orientation. */ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li:not(:last-child){margin-bottom:2.5rem!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>h3, html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li>h3{font-weight:700!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>h3 *, html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li>h3 *{font-weight:inherit!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>p, html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li>p{margin-top:0.75rem!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li:nth-child(n+2){margin-top:2.5rem!important;} /* Shared statement copy measure across all viewport sizes. */ html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{width:80%!important;max-width:80%!important;white-space:normal!important;} /* Landscape service titles: compact type including animated text wrappers. */ @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.services-page.services-redesign .service-description h2.editorial-title{font-size:2.25rem!important;line-height:1.15!important;margin:0 0 0.75rem!important;padding:0!important;} html body.editorial-page main.services-page.services-redesign .service-description h2.editorial-title *{font-size:inherit!important;line-height:inherit!important;} html body.editorial-page main.services-page.services-redesign .service-number{font-size:1.25rem!important;line-height:1.2!important;margin-bottom:0.75rem!important;} html body.editorial-page main.services-page.services-redesign .service-description .service-copy{margin-top:0!important;padding-top:0!important;} html body.editorial-page main.services-page.services-redesign .service-copy>p:first-child{margin-top:0!important;} } @media(min-width:600px){ html body:not(.home-page).editorial-page main.editorial-main.contact-page section.editorial-intro.contact-intro .editorial-lead br.contact-hero-copy-break{display:block!important;} } /* Shared list numbers: slightly larger, with a four-pixel optical offset. */ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li::before, html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li::before{font-size:clamp(1.125rem,1.55vw,1.5rem)!important;} @media(min-width:600px){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li::before, html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li::before{top:0!important;transform:translateY(4px)!important;line-height:1.2!important;} } @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li{padding-left:2.25rem!important;} html body.editorial-page main.editorial-main.studio-page section.editorial-split ol.editorial-values>li{column-gap:0.75rem!important;} } /* Landscape tablet optical alignment: process +2px, other lists -4px. */ @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li::before{transform:translateY(6px)!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li::before{transform:translateY(0)!important;} } /* Large desktop lists: more breathing room and optical number alignment. */ @media(min-width:1600px){ html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li:nth-child(n+2){margin-top:3.5rem!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li:not(:last-child){margin-bottom:3.5rem!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li::before{transform:translateY(calc(4px + 2pt))!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li::before{transform:translateY(calc(4px - 2pt))!important;} } /* Standard desktop number alignment, including 1440px screens. */ @media(min-width:1367px) and (max-width:1599px){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li::before{transform:translateY(calc(4px - 2pt))!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li::before{transform:translateY(calc(4px + 2pt))!important;} } .studio-statement-desktop-break{display:none;} /* Compact desktop review, scoped away from touch-tablet layouts. */ @media(min-width:1200px) and (max-width:1365px) and (hover:hover) and (pointer:fine){ html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li:nth-child(n+2){margin-top:3.5rem!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li>p{font-size:1.125rem!important;line-height:1.45!important;text-wrap:balance;} html body.editorial-page main.editorial-main.studio-page section.studio-process .process-copy-break{display:none!important;} html body.editorial-page main.editorial-main.studio-page .studio-thinking .studio-statement-desktop-break{display:block!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) section.editorial-split ol.editorial-values>li>h3{font-size:calc(clamp(1.375rem,2.083333vw,2.125rem) - 2pt)!important;} html body.editorial-page main.editorial-main.studio-page section.studio-process ol>li>h3{font-size:calc(1.75rem - 2pt)!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) :is(.studio-process,.studio-years,.contact-work)>h2.editorial-title, html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) .studio-years .editorial-container>h2.editorial-title{font-size:calc(var(--shared-inner-h1) - 0.625rem)!important;line-height:1.08!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) :is(.studio-process,.studio-years,.contact-work) h2.editorial-title :is(.editorial-line-mask,.editorial-line-content){font-size:inherit!important;line-height:1.12!important;} } @media(min-width:1200px) and (max-width:1365px) and (hover:hover) and (pointer:fine){ html body.editorial-page main.editorial-main.contact-page .contact-work h2.editorial-title{font-size:calc(var(--shared-inner-h1) - 0.625rem)!important;line-height:1.08!important;} html body.editorial-page main.editorial-main.contact-page .contact-work ol>li{font-size:calc(2rem - 2pt)!important;} } /* Consistent text, arrow and underline spacing on compact desktop links. */ @media(min-width:1200px) and (max-width:1365px) and (hover:hover) and (pointer:fine){ html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) #founder .founder-copy>a.line-link.line-link.line-link.line-link{font-size:1rem!important;line-height:1.75rem!important;letter-spacing:0.04rem!important;gap:1rem!important;padding-top:0!important;padding-bottom:0.5rem!important;align-items:center!important;} html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) #founder .founder-copy>a.line-link.line-link.line-link.line-link span{font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;} } /* Preserve reveal-mask clearance while slightly tightening desktop headings. */ @media(min-width:1200px) and (max-width:1365px) and (hover:hover) and (pointer:fine){ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) :is(.studio-process,.studio-years,.contact-work) h2.editorial-title{font-size:calc(var(--shared-inner-h1) - 0.625rem)!important;line-height:1.12!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) :is(.studio-process,.studio-years,.contact-work) h2.editorial-title .editorial-line-mask{padding-top:0!important;padding-bottom:.08em!important;margin-bottom:-.08em!important;} } /* Bring all compact-desktop inner hero subtitles eight pixels closer. */ @media(min-width:1200px) and (max-width:1365px) and (hover:hover) and (pointer:fine){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){position:relative!important;top:-8px!important;} } @media(max-width:599px){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){width:96%!important;max-width:96%!important;margin-inline:auto!important;} html body.work-page main :is(.work-showcase,.work-showcase#work) .work-lead{width:96%!important;max-width:96%!important;} } /* Shared finish across Work artwork and Contact hero copy. */ html body.work-page main #work.work-showcase .projects .work-item :is(.project,.project-media,picture,img){border-radius:16px!important;} html body.work-page main #work.work-showcase .projects .work-item :is(.project,.project-media,picture){overflow:hidden!important;} html body:not(.home-page).editorial-page main.editorial-main.contact-page section.editorial-intro.contact-intro .editorial-lead br.contact-hero-copy-break{display:block!important;} /* One paragraph measure for statement panels in either tablet orientation. */ @media(min-width:600px) and (max-width:1366px){ html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{width:80%!important;max-width:80%!important;white-space:normal!important;} } /* Consistent, tighter leading for the three large Studio/Contact headings. */ html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) :is(.studio-process,.studio-years,.contact-work) h2.editorial-title, html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) :is(.studio-process,.studio-years,.contact-work) h2.editorial-title :is(.editorial-line-mask,.editorial-line-content,.title-desktop-lines,.title-mobile-lines){line-height:1.08!important;} html body.editorial-page main.editorial-main:is(.studio-page,.contact-page) :is(.studio-process,.studio-years,.contact-work) h2.editorial-title .editorial-line-mask{padding-bottom:.08em!important;margin-bottom:-.08em!important;} /* Work artwork has one visible clipping boundary, including portrait tablets. */ html body.work-page main#top section#work.work-showcase .projects .work-item .project{border-radius:16px!important;clip-path:inset(0 round 16px)!important;overflow:hidden!important;isolation:isolate;} html body.work-page main#top section#work.work-showcase .projects .work-item .project :is(.project-media,picture,img){border-radius:0!important;clip-path:none!important;} html body.work-page main#top section#work.work-showcase .projects .work-item .project picture{display:block;} /* Landscape tablets: halve the actual Work/case-study footer boundary. */ @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body.work-page, html body.editorial-page:has(main.case-study){--footer-section-gap:5rem;} html body.editorial-page main.case-study{padding-bottom:calc(var(--case-gap) / 2)!important;} html body.editorial-page main.case-study{padding-bottom:calc(var(--case-gap) / 2)!important;} html body.work-page main#top #work.work-showcase{padding-bottom:0!important;margin-bottom:0!important;} html body:is(.work-page,.editorial-page:has(main.case-study)) .panel-reading-track:has(>footer#contact.contact-panel){margin-top:5rem!important;} html body:is(.work-page,.editorial-page:has(main.case-study)) footer#contact.contact-panel{margin-top:5rem!important;} html body:is(.work-page,.editorial-page:has(main.case-study)) .panel-reading-track>footer#contact.contact-panel{margin-top:0!important;} } /* Tablet source images contain baked-in corners; crop those before the 16px mask. */ @media(max-width:1100px){ html body.work-page main#top section#work.work-showcase .projects .work-item .project .project-media img{transform:scale(1.10)!important;transform-origin:center!important;} } /* Landscape Work: leave more room after the final project before the footer. */ @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body.work-page main#top #work.work-showcase .projects{row-gap:7.5rem!important;} html body.work-page main#top>.panel-reading-track:has(>footer#contact.contact-panel), html body.work-page main#top>footer#contact.contact-panel{margin-top:10rem!important;} html body.work-page main#top>.panel-reading-track>footer#contact.contact-panel{margin-top:0!important;} } @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.work-page main#top>.panel-reading-track:has(>footer#contact.contact-panel), html body.work-page main#top>footer#contact.contact-panel{margin-top:9rem!important;} html body.work-page main#top>.panel-reading-track>footer#contact.contact-panel{margin-top:0!important;} } /* Case-study hero copy: consistent portrait-tablet measure. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase).case-study .case-hero>p{width:80%!important;max-width:80%!important;margin-inline:auto!important;text-align:center!important;} } @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main:is(#top,#main-content,.case-study).case-study :is(.case-story,.case-overview,.case-related) h2{font-size:2.25rem!important;line-height:1.15!important;} html body.editorial-page main:is(#top,#main-content,.case-study).case-study :is(.case-story,.case-overview,.case-related) h2 :is(span,.editorial-line-mask,.editorial-line-content){font-size:inherit!important;line-height:inherit!important;} } @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.case-study section.case-related .case-related-grid h3{font-size:1.375rem!important;line-height:1.3!important;} } /* Portrait tablets: compact boundary beneath related case studies. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.case-study{padding-bottom:0!important;margin-bottom:0!important;} html body.editorial-page main.case-study>.case-related{margin-bottom:0!important;padding-bottom:0!important;} html body.editorial-page:has(main.case-study) .panel-reading-track:has(>footer#contact.contact-panel), html body.editorial-page:has(main.case-study)>footer#contact.contact-panel{margin-top:6rem!important;} html body.editorial-page:has(main.case-study) .panel-reading-track>footer#contact.contact-panel{margin-top:0!important;} } @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.case-study section.case-related .case-related-grid{margin-top:2.5rem!important;} } /* One authored line for the shared related-project heading at every size. */ html body.editorial-page main.case-study section.case-related>h2#related-title, html body.editorial-page main.case-study section.case-related>h2#related-title :is(span,.editorial-line-mask,.editorial-line-content){white-space:nowrap!important;} /* Equal outer spacing around the statement and related-work sections. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.case-study>.case-statement, html body.editorial-page main.case-study>.panel-reading-track:has(>.case-statement){margin-top:6rem!important;margin-bottom:0!important;} html body.editorial-page main.case-study>.panel-reading-track>.case-statement{margin-block:0!important;} html body.editorial-page main.case-study>section.case-related{margin-top:6rem!important;margin-bottom:0!important;} } /* Desktop Work cards share the grid edges regardless of their column span. */ @media(min-width:1101px) and (hover:hover) and (pointer:fine){ html body.work-page main#top #work.work-showcase .projects>.work-item{width:100%;max-width:none;justify-self:stretch;margin-inline:0;} } /* 1400/1440 desktop: halve the case-study footer boundary. */ @media(min-width:1366px) and (max-width:1599px) and (hover:hover) and (pointer:fine){ html body.editorial-page:has(main.case-study){--footer-section-gap:5rem;} html body.editorial-page main.case-study{padding-bottom:calc(var(--case-gap) / 2)!important;} } /* Mobile app-screen strips share Envisioner's native horizontal scrolling. Round individual artwork, not the full-bleed scroll strip's parent. */ @media(max-width:599px){ html body main#main-content.case-study .case-mobile-artwork.has-phone-scroll{ overflow:visible!important;clip-path:none!important;border-radius:0!important;min-width:0; } html body main#main-content.case-study :is(.case-mobile-phone-row,.envisioner-mobile-apps){ display:flex;flex-wrap:nowrap;overflow-x:auto!important;overflow-y:hidden!important; overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom; scroll-snap-type:x proximity;scroll-padding-inline:2rem;scrollbar-width:none; } html body main#main-content.case-study :is(.case-mobile-phone-row,.envisioner-mobile-apps)::-webkit-scrollbar{display:none;} html body main#main-content.case-study .case-mobile-phone-row>img{ flex:0 0 auto!important;width:auto!important;height:384px!important;max-width:none!important; object-fit:contain!important;scroll-snap-align:start; } html body main#main-content.case-study :is(.case-mobile-phone-row,.envisioner-mobile-apps):focus-visible{outline:2px solid #FF933C;outline-offset:-2px;} } /* Inner hero type: ten percent below the existing desktop sizes. */ @media(min-width:1366px) and (hover:hover) and (pointer:fine){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1{font-size:calc(clamp(4.59rem,7.5vw,7.56rem) - 0.45rem)!important;} } @media(min-width:1600px) and (max-width:1600px) and (hover:hover) and (pointer:fine){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1{font-size:calc(clamp(4.59rem,7.5vw,7.56rem) - 0.225rem)!important;} } @media(min-width:1601px) and (hover:hover) and (pointer:fine){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1{font-size:calc(clamp(4.86rem,8.856vw,8.1rem) - 0.225rem)!important;} } @media(min-width:900px) and (max-width:1366px) and (orientation:landscape) and (pointer:coarse){ html body.editorial-page main.case-study .case-story .case-copy, html body.editorial-page main.case-study .case-story .case-copy p{font-size:calc(clamp(1.125rem,1.5vw,1.5rem) + 0.125rem)!important;line-height:1.5!important;} } /* Inner-page H1 descriptions are 4px smaller only on large desktops. */ @media(min-width:1600px){ html body:not(.home-page){--inner-description-size:28px;--inner-description-leading:2.5rem;} } /* Inner H1 subtext across small and standard desktop layouts. */ @media(min-width:1101px) and (max-width:1599px){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){ font-size:1.375rem!important; } } /* Match case-study hero descriptions to the shared large-desktop size. */ @media(min-width:1600px){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study,.work-showcase) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){ font-size:1.75rem!important; } } /* Consistent heading hierarchy throughout inner pages and case studies. */ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase){ --inner-h1-size:var(--shared-inner-h1,clamp(32px,8.2vw,120px)); --inner-h2-size:var(--section-h2-size,36px);--inner-h3-size:28px; } @media(min-width:1366px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase){--inner-h1-size:calc(clamp(73.44px,7.5vw,120.96px) - 7.2px);} } @media(min-width:1600px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase){--inner-h1-size:calc(clamp(77.76px,8.856vw,129.6px) - 3.6px);} } @media(max-width:599px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase){--inner-h2-size:34px;--inner-h3-size:24px;} } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase) :is(h1,h1#work-page-title){ font-family:'GC Gudlak',sans-serif!important;font-weight:700!important; font-size:var(--inner-h1-size)!important;line-height:1.1111111111!important;letter-spacing:.02em!important; } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase) :is(h2:not(footer h2):not(.work-caption):not(.editorial-title):not(.studio-thinking h2):not(.services-mix h2):not(.service-promise h2):not(.case-statement h2),h2#services-faq-title,h2#contact-faq-title){ font-family:'GC Gudlak',sans-serif!important;font-weight:500!important; font-size:var(--inner-h2-size)!important;line-height:1.25!important;letter-spacing:.02em!important; } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase) :is(h1,h2:not(footer h2):not(.work-caption):not(.editorial-title):not(.studio-thinking h2):not(.services-mix h2):not(.service-promise h2):not(.case-statement h2)) :is(span,.editorial-line-mask,.editorial-line-content,.motion-line,.title-word-mask,.title-word){ font-size:inherit!important;line-height:inherit!important; } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase) h3{ font-family:Helixa,sans-serif!important;font-size:var(--inner-h3-size)!important;line-height:1.25!important; } /* Shared tablet heading scale for every inner page and case study. */ @media(min-width:600px) and (max-width:1100px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase){ --inner-h1-size:clamp(55.2px,9.2vw,101.2px); --inner-h2-size:var(--section-h2-size,36px);--inner-h3-size:28px; } } /* Contact FAQ heading matches the standard reach heading above it. */ html body:not(.home-page) main.contact-page:is(#top,#main-content,.editorial-main) :is(.contact-reach>h2,h2#contact-faq-title){ font-family:'GC Gudlak',sans-serif!important;font-weight:500!important; font-size:var(--section-h2-size,2.25rem)!important;line-height:1.25!important;letter-spacing:.02em!important; } html body:not(.home-page) main.contact-page:is(#top,#main-content,.editorial-main) h2#contact-faq-title :is(span,.motion-line,.editorial-line-content,.editorial-line-mask,[data-gradient-line]){ font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important; } @media(max-width:599px){ html body:not(.home-page) main.contact-page:is(#top,#main-content,.editorial-main) :is(.contact-reach>h2,h2#contact-faq-title){font-size:2.125rem!important;} } /* Founder uses the standard section H2, rather than display-title sizing. */ html body main:is(#top,#main-content,.editorial-main) #founder.founder.page-section .founder-copy h2#founder-title{ font-family:'GC Gudlak',sans-serif!important;font-size:var(--section-h2-size,2.25rem)!important;font-weight:500!important; line-height:1.25!important;letter-spacing:.02em!important; } html body main:is(#top,#main-content,.editorial-main) #founder.founder.page-section .founder-copy h2#founder-title :is(span,[data-gradient-line]){ font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important; } @media(max-width:599px){ html body main:is(#top,#main-content,.editorial-main) #founder.founder.page-section .founder-copy h2#founder-title{font-size:2.125rem!important;} } /* Shared rhythm for inner-page display headings; Home retains its approved styling. */ html body{--hero-title-line-height:1.07;--panel-title-line-height:.985;} html body:not(.home-page){--display-title-line-height:1.1;} /* All hero H1s share the same tightened rhythm. */ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase) h1{ line-height:var(--hero-title-line-height)!important; } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase) h1 :is(.editorial-line-mask,.editorial-line-content,.title-desktop-lines,.title-mobile-lines,.motion-line,[data-gradient-line]){ line-height:var(--hero-title-line-height)!important; } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase) h1 .editorial-line-mask{ padding-block:.12em!important;margin-block:-.12em!important; } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase) h1 .editorial-line-content{ padding-block:.16em!important;margin-block:-.16em!important; } /* Tight line spacing must not crop the display font’s ascenders or curves. */ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase) h1, html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase) h1 :is(.editorial-line-mask,.editorial-line-content,.title-desktop-lines,.title-mobile-lines,.motion-line,[data-gradient-line]){ overflow:visible!important;clip-path:none!important;height:auto!important;max-height:none!important; } /* Inner-page colored display panels share the tighter title rhythm. */ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2){ line-height:var(--panel-title-line-height)!important; } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2) :is(.editorial-line-mask,.editorial-line-content,.motion-line,[data-gradient-line]){ line-height:inherit!important;overflow:visible!important;clip-path:none!important; } /* Remove added mask height from inner-page colored display headings. */ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2){ line-height:var(--panel-title-line-height)!important; } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2) :is(.editorial-line-mask,.editorial-line-content,.motion-line){ line-height:inherit!important;padding-block:0!important;margin-block:0!important; overflow:visible!important;clip-path:none!important; } /* Home uses the same hero rhythm as inner pages, including animated lines. */ html body.home-page main#top #hero-statement h1#statement-title{line-height:var(--hero-title-line-height)!important;} html body.home-page main#top #hero-statement h1#statement-title :is(span,.motion-line,.title-word-mask,.title-word){line-height:var(--hero-title-line-height)!important;} /* Compensated paint space keeps Home hero glyphs clear of reveal masks. */ html body.home-page main#top #hero-statement h1#statement-title .motion-line{ overflow:visible!important;clip-path:none!important; } html body.home-page main#top #hero-statement h1#statement-title .title-word-mask{ padding-block:.18em!important;margin-block:-.18em!important; } html body.home-page main#top #hero-statement h1#statement-title .title-word{ padding-block:.16em!important;margin-block:-.16em!important; } /* Colored display panels share a slightly tighter heading rhythm, including Home. */ html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2){ line-height:var(--panel-title-line-height)!important; } html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2) :is(span,.motion-line,.editorial-line-mask,.editorial-line-content){ line-height:inherit!important;overflow:visible!important;clip-path:none!important; } /* Reveal padding must not increase the distance between hero baselines. */ html body.home-page main#top #hero-statement h1#statement-title .motion-line{ height:auto!important; min-height:0!important;box-sizing:content-box!important; padding-block:0!important;margin-block:0!important; overflow:visible!important; } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase) h1 .editorial-line-mask{ height:auto!important; min-height:0!important;box-sizing:content-box!important; padding-block:0!important;margin-block:0!important; overflow:visible!important; } /* Hero reveal surfaces inherit the heading metrics and retain natural height. */ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase) h1 :is(.editorial-line-mask,.editorial-line-content,.title-desktop-lines,.title-mobile-lines){ font-size:inherit!important;height:auto!important;min-height:0!important; line-height:var(--hero-title-line-height)!important; } html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase):is(#top,#main-content,.editorial-main,.case-study,.work-showcase) h1 .editorial-line-mask{ display:flow-root!important; } /* Match Home's nested reveal boxes to the natural inner-hero line boxes. */ html body.home-page main#top #hero-statement h1#statement-title :is(.motion-line,.motion-line>span,.title-word-mask){ display:flow-root!important;font-size:inherit!important; height:auto!important;min-height:0!important; padding-block:0!important;margin-block:0!important; line-height:var(--hero-title-line-height)!important; } html body.home-page main#top #hero-statement h1#statement-title .title-word-mask{ padding-block:.16em!important;margin-block:-.16em!important; } html body.home-page main#top #hero-statement h1#statement-title .title-word{ display:block!important;font-size:inherit!important; padding-block:.16em!important;margin-block:-.16em!important; line-height:var(--hero-title-line-height)!important; } /* One display-heading treatment for every colored statement panel. */ html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2){ font-family:'GC Gudlak',sans-serif!important;font-weight:700!important; font-size:var(--panel-title-size,clamp(4rem,6.666667vw,7rem))!important; letter-spacing:.02em!important;line-height:var(--panel-title-line-height)!important; min-height:0!important;padding-block:0!important;margin-block:0!important; } html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2) *{ font-family:inherit!important;font-weight:inherit!important;font-size:inherit!important; letter-spacing:inherit!important;line-height:inherit!important; } @media(max-width:1023px){html body{--panel-title-size:72px;}} @media(max-width:599px){html body{--panel-title-size:clamp(30px,8.8vw,52px);}} /* Identical reveal geometry on Home and every colored statement panel. */ html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2) .editorial-line-mask{ display:flow-root!important;height:auto!important;min-height:0!important; padding-block:.12em!important;margin-block:-.12em!important; overflow:hidden!important;clip-path:none!important; } html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2) .editorial-line-content{ display:block!important;height:auto!important;min-height:0!important; padding-block:0!important;margin-block:0!important; overflow:visible!important;clip-path:none!important; } /* Home hero uses the same leading as the other Home display titles. */ html body.home-page{--home-display-leading:1.12;} @media(min-width:1024px){html body.home-page{--home-display-leading:1.08;}} html body.home-page main#top #hero-statement h1#statement-title, html body.home-page main#top #hero-statement h1#statement-title :is(span,.motion-line,.title-word-mask,.title-word){ line-height:var(--home-display-leading)!important; } html body.home-page main#top #hero-statement h1#statement-title :is(.motion-line,.motion-line>span){ display:grid!important;overflow:visible!important;padding-block:0!important;margin-block:0!important; } html body.home-page main#top #hero-statement h1#statement-title .title-word-mask{ overflow:clip!important;padding-block:.16em!important;margin-block:-.16em!important; } html body.home-page main#top #hero-statement h1#statement-title[data-reveal-settled="true"] .title-word-mask{ overflow:visible!important; } /* Preserve the Studio founder's authored lines just like Home. */ @media(min-width:1024px){ html body.editorial-page main.editorial-main.studio-page #founder.founder.page-section .founder-copy>p{ white-space:nowrap!important; } html body.editorial-page main.editorial-main.studio-page #founder.founder.page-section .founder-copy-break{display:inline!important;} } html body.editorial-page main.editorial-main.studio-page .studio-years>figure.studio-collage{margin-top:7.5rem!important;} @media(max-width:1100px){html body.editorial-page main.editorial-main.studio-page .studio-years>figure.studio-collage{margin-top:5.5rem!important;}} @media(max-width:760px){html body.editorial-page main.editorial-main.studio-page .studio-years>figure.studio-collage{margin-top:4rem!important;}} @media(min-width:1600px){html body.editorial-page main.editorial-main.studio-page .studio-years>figure.studio-collage{margin-top:6rem!important;}} /* Studio: reduce only the client-slider-to-founder boundary by ten percent. */ html body.editorial-page main.editorial-main.studio-page #founder.founder.page-section{padding-top:6.75rem!important;} @media(min-width:600px) and (max-width:1023px){ html body.editorial-page main.editorial-main.studio-page #founder.founder.page-section{padding-top:9rem!important;} } @media(min-width:1800px){ html body.editorial-page main.editorial-main.studio-page #founder.founder.page-section{padding-top:12.375rem!important;} } /* A small reduction at the requested large-desktop breakpoint only. */ @media(min-width:1920px){ html body.editorial-page main:is(.contact-page,.audience-page)>.enquiry-form.wide-surface{padding-block:6.75rem!important;} } /* Studio founder: preserve the supplied paragraph line breaks. */ html body.editorial-page main.editorial-main.studio-page #founder.founder.page-section .founder-copy>p{white-space:normal!important;} @media(min-width:1024px){ html body.editorial-page main.editorial-main.studio-page #founder .studio-founder-copy-line{display:block;white-space:nowrap;} } @media(max-width:1023px){ html body.editorial-page main.editorial-main.studio-page #founder .studio-founder-copy-line{display:inline;white-space:normal;} } /* Shared large reading-copy scale, taken from Home at each breakpoint. */ html body{--large-reading-size:2.25rem;} @media(min-width:1101px){html body{--large-reading-size:clamp(2.1rem,3.666667vw,3.3rem);}} @media(min-width:1920px){html body{--large-reading-size:3.96rem;}} @media(max-width:599px){html body{--large-reading-size:1.25rem;}} html body.home-page main#top .home-belief p, html body.home-page main#top #about #studio-title.studio-description, html body.editorial-page main.editorial-main.studio-page .studio-belief p, html body.editorial-page main.editorial-main.contact-page .contact-conversation>p{ font-size:var(--large-reading-size)!important; } /* Portrait tablets: smaller supporting text in every colored display panel. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{ font-size:1.2rem!important; } html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p *{font-size:inherit!important;} } /* Keep landscape-tablet air above the footer divider after legacy footer rules. */ @media(min-width:600px) and (max-width:1366px) and (orientation:landscape){ html body:is(.home-page,.work-page,.editorial-page) footer#contact.contact-panel.contact-panel>.footer-wordmark{ margin-bottom:4rem!important; } } @media(min-width:600px) and (max-width:1366px) and (orientation:landscape){ html body:is(.home-page,.work-page,.editorial-page) footer#contact.contact-panel.contact-panel>.footer-bottom{padding-top:2.75rem!important;} } /* Portrait tablets: the actual boundary below Studio's hero photograph. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.editorial-main.studio-page>.editorial-intro{padding-bottom:0!important;margin-bottom:0!important;} html body.editorial-page main.editorial-main.studio-page .studio-intro-photo{margin-bottom:0!important;} html body.editorial-page main.editorial-main.studio-page>section#studio-steps.editorial-section, html body.editorial-page main.editorial-main.studio-page>.panel-reading-track:has(>#studio-steps){margin-top:5rem!important;padding-top:0!important;} html body.editorial-page main.editorial-main.studio-page>.panel-reading-track>#studio-steps{margin-top:0!important;padding-top:0!important;} } /* The Studio intro must end at its photo on portrait tablets. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.editorial-main.studio-page>section.editorial-intro{ height:auto!important;min-height:0!important;max-height:none!important; padding-bottom:0!important;margin-bottom:0!important; } html body.editorial-page main.editorial-main.studio-page>section#studio-steps.editorial-section{ margin-top:4rem!important;padding-top:0!important; } } /* Landscape tablets: modestly narrower colored-panel copy and smaller client cards. */ @media(min-width:600px) and (max-width:1366px) and (orientation:landscape){ html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{ width:90%!important; } html body:is(.home-page,.editorial-page) main .clients.page-section .figma-client-rows .client-row>li{ width:calc(clamp(180px,calc(120px + 12.5vw),360px) * .75)!important; flex-basis:calc(clamp(180px,calc(120px + 12.5vw),360px) * .75)!important; height:auto!important;aspect-ratio:3/2; } html body :is(main#top,main.studio-page) #founder .founder-photo figcaption>span{ font-size:1.25rem!important; } } @media(min-width:1101px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.editorial-main.studio-page .clients.page-section .figma-client-rows .client-row>li{ width:270px!important;flex-basis:270px!important; } } /* Landscape Home copy: narrow its existing measure, overriding the later Home stylesheet. */ @media(min-width:600px) and (max-width:1100px) and (orientation:landscape){ html body.home-page main#top #approach.philosophy p.philosophy-description{ width:72%!important;max-width:72%!important; } } @media(min-width:1101px) and (max-width:1366px) and (orientation:landscape){ html body.home-page main#top #approach.philosophy p.philosophy-description{ width:57.6%!important;max-width:57.6%!important; } } /* Studio portrait tablets: one explicit photo-to-heading boundary. */ @media(min-width:600px) and (max-width:1366px) and (orientation:portrait){ html body.editorial-page main.editorial-main.studio-page>section.editorial-intro{ display:flow-root!important;height:auto!important;min-height:0!important; margin-bottom:0!important;padding-bottom:0!important; } html body.editorial-page main.editorial-main.studio-page>section.editorial-intro>figure.studio-intro-photo{ margin-bottom:0!important; } html body.editorial-page main.editorial-main.studio-page>section#studio-steps.editorial-section{ margin-top:4rem!important;padding-top:0!important; } html body.editorial-page main.editorial-main.studio-page>section#studio-steps>h2#studio-steps-title{ padding-top:0!important;margin-top:0!important; } } @media(min-width:600px) and (max-width:1100px){ html body.editorial-page main.editorial-main.studio-page section.clients.page-section{padding-top:7rem!important;} } @media(min-width:1101px) and (max-width:1366px){ html body.editorial-page main.editorial-main.studio-page section.clients.page-section{padding-top:8.5rem!important;} } /* Landscape tablets only: metadata two pixels larger and related titles matching Work. */ @media(min-width:600px) and (max-width:1023px) and (orientation:landscape){ html body.editorial-page main.case-study .case-facts :is(dt,dd){font-size:calc(var(--responsive-meta,1rem) + 0.125rem)!important;} html body.editorial-page main.case-study .case-related h3{font-size:1.125rem!important;line-height:1.25!important;} } @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.case-study .case-facts dt{font-size:1rem!important;} html body.editorial-page main.case-study .case-facts dd{font-size:1.125rem!important;} html body.editorial-page main.case-study .case-related h3{font-size:1.125rem!important;line-height:1.25!important;} } @media(min-width:1101px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.case-study .case-facts dt{font-size:calc(clamp(0.75rem,.972222vw,0.875rem) + 0.125rem)!important;} html body.editorial-page main.case-study .case-facts dd{font-size:calc(clamp(1rem,1.25vw,1.125rem) + 0.125rem)!important;} } /* Portrait tablets: match landscape related-project names at 18px. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.case-study .case-related .case-related-grid h3{ font-size:1.125rem!important;line-height:1.25!important; } } /* Tablet project-card titles: override the older, more specific 22px rule. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait), (min-width:600px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.case-study section.case-related .case-related-grid :is(a,article)>h3, html body.editorial-page main.case-study section.case-related .case-related-grid :is(a,article)>h3 *{ font-size:1.5rem!important;line-height:1.25!important; } } /* Portrait case metadata matches the landscape-tablet 16px/18px hierarchy. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.case-study .case-overview>.case-facts dt{ font-size:1rem!important;line-height:1.3!important; } html body.editorial-page main.case-study .case-overview>.case-facts dd{ font-size:1.125rem!important;line-height:1.55!important; } html body.editorial-page main.case-study .case-overview>.case-facts dd :is(span,a){ font-size:inherit!important;line-height:inherit!important; } } /* Tablet case facts: slightly closer labels and values. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait), (min-width:600px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.case-study .case-overview>.case-facts dt{ margin-bottom:0.625rem!important; } } /* Studio Stories: more compact description and image boundary on portrait tablets. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.editorial-main.studio-page section.studio-years .editorial-container>p.editorial-lead{ font-size:1.25rem!important;line-height:1.4!important; width:85%!important;max-width:620px!important; margin:1.5rem auto 0!important; } html body.editorial-page main.editorial-main.studio-page section.studio-years>figure.studio-collage{ margin-top:4.5rem!important; } } /* Studio portrait tablets: less air before the orange panel, a little more after it. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.editorial-main.studio-page section.studio-belief{ padding-bottom:1.5rem!important; } html body.editorial-page main.editorial-main.studio-page section.studio-years.editorial-section{ padding-top:11rem!important; } } @media(min-width:600px) and (max-width:760px) and (orientation:portrait){ html body.editorial-page main.editorial-main.studio-page section.studio-belief{ padding-bottom:.75rem!important; } html body.editorial-page main.editorial-main.studio-page section.studio-years.editorial-section{ padding-top:8rem!important; } } /* Shared colored-panel title reduction on tablet portrait. */ @media(min-width:600px) and (max-width:1023px) and (orientation:portrait){ html body{--panel-title-size:4rem;} } @media(min-width:1024px) and (max-width:1100px) and (orientation:portrait){ html body{--panel-title-size:calc(clamp(4rem,6.666667vw,7rem) - .5rem);} } /* Inner-page colored panels share a left reading edge at every viewport. */ html body:not(.home-page) main:is(#main-content,.editorial-main,.case-study) :is(.studio-thinking,.services-mix,.service-promise,.case-statement), html body:not(.home-page) main:is(#main-content,.editorial-main,.case-study) :is(.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h2,h2 *,p,p *){ text-align:left!important; } html body:not(.home-page) main:is(#main-content,.editorial-main,.case-study) :is(.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h2,p){ margin-inline:0!important; } html body:not(.home-page) main:is(#main-content,.editorial-main,.case-study) :is(.studio-thinking,.services-mix,.service-promise,.case-statement) :is(.editorial-container,.service-container,.case-statement-inner){ align-items:start!important;justify-items:start!important; } /* All invitations: reduce the enlarged question and link text by 1px. */ html body main:is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main) .question-link>:is(p,span){font-size:calc(var(--invitation-question-size) + 1px)!important;} html body main:is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main) a.line-link.line-link.line-link.line-link.line-link.line-link.line-link.line-link{font-size:calc(var(--invitation-link-size) + 1px)!important;} html body main:is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main) a.line-link>span{font-size:inherit!important;} @media(min-width:1101px){ html body main:is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main) .question-link>:is(p,span){font-size:calc(var(--invitation-question-size) + 2px)!important;} html body main:is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main) a.line-link.line-link.line-link.line-link.line-link.line-link.line-link.line-link{font-size:calc(var(--invitation-link-size) + 2px)!important;} } @media(max-width:599px){ html body main:is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main) a.line-link.line-link.line-link.line-link.line-link.line-link.line-link.line-link{font-size:1.0625rem!important;} } /* 1600px desktop range: smaller, narrower supporting copy in colored panels. */ @media(min-width:1600px) and (max-width:1919px){ html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{font-size:calc(var(--panel-copy-size,clamp(18px,1.666667vw,28px)) - 4px)!important;width:57.6%!important;max-width:57.6%!important;} html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p *{font-size:inherit!important;} } /* Desktop founder links use the same text-to-underline geometry as invitations. */ @media(min-width:1101px){ html body main:is(#top,#studio-page):is(#top,#studio-page) #founder.founder.page-section .founder-copy>a.line-link{padding-block:0!important;line-height:1.333333!important;min-height:0!important;height:auto!important;} html body main:is(#top,#studio-page):is(#top,#studio-page) #founder.founder.page-section .founder-copy>a.line-link::after{top:auto!important;bottom:-.25em!important;height:1px!important;} html body main:is(#top,#studio-page):is(#top,#studio-page) #founder.founder.page-section .founder-copy>a.line-link>span{line-height:inherit!important;} } /* 1440px range: founder underlines sit 2px lower on Home and Studio. */ @media(min-width:1440px) and (max-width:1599px){ html body main:is(#top,#studio-page):is(#top,#studio-page) #founder.founder.page-section .founder-copy>a.line-link::after{bottom:calc(-.25em - 2px)!important;} } /* Work listing: tighter title-to-capabilities spacing on every desktop. */ @media(min-width:1101px){ html body.work-page main#top #work.work-showcase .work-item h2.work-caption{margin-bottom:4px!important;} html body.work-page main#top #work.work-showcase .work-item .project-capabilities{margin-top:0!important;} } /* Every page ends flush with its footer, without an outer bottom gutter. */ html:has(footer#contact.contact-panel), html body:has(footer#contact.contact-panel){padding-bottom:0!important;margin-bottom:0!important;} html body main:has(footer#contact.contact-panel), html body .panel-reading-track:has(>footer#contact.contact-panel){padding-bottom:0!important;margin-bottom:0!important;} html body footer#contact.contact-panel{margin-bottom:0!important;} /* All desktops: wider inner-hero supporting copy. */ @media(min-width:1101px){ html body.editorial-page main.editorial-main .editorial-intro .studio-lead{width:100%!important;max-width:min(100%,1066px)!important;} html body.editorial-page main.editorial-main .service-hero>p{width:100%!important;max-width:min(100%,979px)!important;} html body.work-page main#top #work.work-showcase p.work-lead{width:100%!important;max-width:min(100%,1213px)!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro .editorial-lead{width:736px!important;max-width:100%!important;} } /* Desktop hero supporting copy uses the shared wider measure. */ @media(min-width:1101px){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study):is(#main-content,#top,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){width:100%!important;max-width:min(100%,var(--hero-copy-measure,1066px))!important;text-wrap:wrap!important;margin-inline:auto!important;} html body:not(.home-page) main .studio-lead{--hero-copy-measure:1066px;} html body:not(.home-page) main .service-hero>p{--hero-copy-measure:979px;} html body.work-page main .work-lead{--hero-copy-measure:1213px;} html body:not(.home-page) main .contact-intro .editorial-lead{--hero-copy-measure:736px;} html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study):is(#main-content,#top,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p) br{display:block!important;} html body.editorial-page main.editorial-main.studio-page .editorial-intro .studio-lead .studio-mobile-copy-line{display:inline!important;white-space:normal!important;} } /* 1440px desktops: inner hero H1s are five percent smaller. */ @media(min-width:1440px) and (max-width:1599px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase){--inner-h1-size:calc((clamp(73.44px,7.5vw,120.96px) - 7.2px) * .95);} } /* Keep authored hero copy lines consistent across desktop widths. */ @media(min-width:1101px){ html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main):is(#main-content,#top,.editorial-main) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead){white-space:nowrap!important;text-wrap:initial!important;} html body.editorial-page main.editorial-main.studio-page .editorial-intro .studio-lead .studio-mobile-copy-line{display:inline!important;white-space:inherit!important;} html body.editorial-page main.editorial-main.contact-page .contact-intro .editorial-lead .contact-copy-line{display:block!important;white-space:inherit!important;} html body:not(.home-page) main.case-study.case-study .case-hero>p{max-width:min(100%,38em)!important;text-wrap:wrap!important;} } /* Inner hero text stays inside its content bounds at every viewport. */ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,.work-showcase) h1{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;} html body:not(.home-page):is(.editorial-page,.work-page) main:is(#main-content,#top,.editorial-main,.case-study):is(#main-content,#top,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){white-space:normal!important;overflow-wrap:break-word!important;} html body.editorial-page main.editorial-main.studio-page .editorial-intro .studio-lead .studio-mobile-copy-line, html body.editorial-page main.editorial-main.contact-page .contact-intro .editorial-lead .contact-copy-line{white-space:normal!important;} /* 1280–1599px: colored-panel descriptions use 75 percent width. */ @media(min-width:1280px) and (max-width:1599px){ html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{width:75%!important;max-width:75%!important;} } /* Studio client cards share Home sizing, gaps, corners, and logo proportions. */ html body.editorial-page main#studio-page.editorial-main.studio-page .clients{--matched-client-width:clamp(180px,calc(120px + 12.5vw),360px);--matched-client-gap:24px;--matched-client-row-gap:24px;--matched-client-radius:16px;} html body.editorial-page main#studio-page.editorial-main.studio-page .clients .figma-client-rows{gap:var(--matched-client-row-gap)!important;} html body.editorial-page main#studio-page.editorial-main.studio-page .clients .figma-client-rows .client-row{gap:var(--matched-client-gap)!important;} html body.editorial-page main#studio-page.editorial-main.studio-page .clients.page-section .figma-client-rows .client-row>li{width:var(--matched-client-width)!important;flex:0 0 var(--matched-client-width)!important;height:auto!important;aspect-ratio:3/2;border-radius:var(--matched-client-radius)!important;background:#E9C79E!important;} html body.editorial-page main#studio-page.editorial-main.studio-page .clients .figma-client-rows .client-row>li>img{width:calc(var(--client-logo-width) * .81)!important;height:auto!important;max-width:none!important;max-height:none!important;object-fit:contain!important;} @media(max-width:1199px){html body.editorial-page main#studio-page.editorial-main.studio-page .clients{--matched-client-gap:16px;--matched-client-row-gap:16px;--matched-client-radius:12px;}} @media(max-width:599px){html body.editorial-page main#studio-page.editorial-main.studio-page .clients{--matched-client-row-gap:12px;--matched-client-radius:8px;}} @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){html body.editorial-page main#studio-page.editorial-main.studio-page .clients{--matched-client-width:calc(clamp(180px,calc(120px + 12.5vw),360px) * 1.0925);}} @media(min-width:600px) and (max-width:1366px) and (orientation:landscape){html body.editorial-page main#studio-page.editorial-main.studio-page .clients{--matched-client-width:calc(clamp(180px,calc(120px + 12.5vw),360px) * .75);}} @media(min-width:1280px) and (max-width:1439px){html body.editorial-page main#studio-page.editorial-main.studio-page .clients{--matched-client-width:calc(clamp(180px,calc(120px + 12.5vw),360px) * 1.1);--matched-client-gap:16px;--matched-client-row-gap:16px;--matched-client-radius:12px;}} @media(min-width:1280px) and (max-width:1366px) and (orientation:landscape){html body.editorial-page main#studio-page.editorial-main.studio-page .clients{--matched-client-width:calc(clamp(180px,calc(120px + 12.5vw),360px) * .825);}} /* Contact stats match Home with dimensions and typography reduced ten percent. */ html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{--stat-card-height:129.6px;--stat-card-padding:21.6px;--stat-card-left:21.6px;--stat-number-size:43.2px;--stat-number-leading:43.2px;--stat-label-size:18px;--stat-label-leading:21.6px;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:21.6px!important;width:min(918px,90%)!important;max-width:100%!important;margin-inline:auto!important;} html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats article{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;width:100%!important;min-width:0!important;height:var(--stat-card-height)!important;min-height:0!important;padding:var(--stat-card-padding)!important;padding-left:var(--stat-card-left)!important;gap:7.2px!important;border-radius:14.4px!important;box-sizing:border-box!important;background:#E9C79E!important;color:#393025!important;} html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats strong{font:500 var(--stat-number-size)/var(--stat-number-leading) "GC Gudlak",sans-serif!important;letter-spacing:.02em!important;margin:0!important;} html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats strong span{font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;} html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats article>span{font:400 var(--stat-label-size)/var(--stat-label-leading) Helixa,sans-serif!important;letter-spacing:0!important;white-space:normal!important;overflow-wrap:break-word;} @media(min-width:1280px) and (max-width:1439px){html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{width:min(925.965px,77.16375%)!important;--stat-card-padding:32.4px 21.6px 21.6px;--stat-card-left:25.2px;--stat-label-leading:23.4px;}} @media(min-width:1440px) and (max-width:1599px){html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{width:min(894.24px,74.52%)!important;--stat-card-padding:32.4px 32.4px 25.2px;--stat-card-left:28.8px;}} @media(min-width:1600px){html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{--stat-card-height:144px;--stat-card-left:28.8px;}} @media(min-width:1600px) and (max-width:1919px){html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{--stat-label-size:18.9px;}} @media(min-width:1800px){html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{--stat-number-size:48.6px;--stat-number-leading:54px;--stat-label-size:19.8px;--stat-label-leading:27px;gap:28.8px!important;}} @media(min-width:1920px){html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{--stat-card-padding:21.6px 32.4px;--stat-card-left:28.8px;}} @media(max-width:1100px){html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{grid-template-columns:1fr!important;width:90%!important;gap:14.4px!important;--stat-card-height:100.8px;--stat-card-padding:28.8px;--stat-card-left:28.8px;--stat-number-size:36px;--stat-number-leading:43.2px;} html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats article{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;} html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats article>span{text-align:right!important;}} @media(max-width:599px){html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{--stat-card-height:79.2px;--stat-card-padding:18px 21.6px;--stat-card-left:21.6px;--stat-number-size:28.8px;--stat-number-leading:43.2px;--stat-label-size:14.4px;--stat-label-leading:21.6px;gap:10.8px!important;}} /* Desktop Contact: tighten both sides of the stats row by 16px. */ @media(min-width:1101px){ html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{margin-top:2.875rem!important;margin-bottom:0!important;} html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-content>.contact-global-stats+p{margin-top:3.625rem!important;} } @media(min-width:1101px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{margin-top:2rem!important;} html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-content>.contact-global-stats+p{margin-top:2.5rem!important;} } /* 1280px Contact: orange reach mark is five percent smaller. */ @media(min-width:1280px) and (max-width:1439px){ html body.editorial-page main.editorial-main.contact-page #contact-global-panel img.contact-global-mark{width:45.6px!important;height:auto!important;} } /* Services and Contact: one compact gap from the FAQ to the footer. */ @media(min-width:1101px){ html body.editorial-page main.editorial-main:is(.services-page,.contact-page) .services-faq.services-faq{margin-bottom:0!important;padding-bottom:0!important;} html body.editorial-page:has(main.editorial-main:is(.services-page,.contact-page)) .panel-reading-track:has(>footer#contact.contact-panel){margin-top:5rem!important;} html body.editorial-page:has(main.editorial-main:is(.services-page,.contact-page)) footer#contact.contact-panel{margin-top:5rem!important;} html body.editorial-page:has(main.editorial-main:is(.services-page,.contact-page)) .panel-reading-track>footer#contact.contact-panel{margin-top:0!important;} } /* 1280–1599px desktops: tighter FAQ row spacing on Services and Contact. */ @media(min-width:1280px) and (max-width:1599px){ html body.editorial-page main.editorial-main:is(.services-page,.contact-page) section.services-faq:is(#services-faq,#contact-faq) .faq-item{padding-top:24px!important;padding-bottom:24px!important;} } /* 1440px desktops: tighter space above FAQ titles. */ @media(min-width:1440px) and (max-width:1599px){ html body.editorial-page main.editorial-main.services-page>section.services-faq{margin-top:6.561rem!important;} html body.editorial-page main.editorial-main.contact-page #contact-faq.services-faq{margin-top:8.748rem!important;padding-top:5.2488rem!important;} } @media(min-width:1280px) and (max-width:1599px){ html body.editorial-page main.editorial-main:is(.services-page,.contact-page) .services-faq :is(h2#services-faq-title,h2#contact-faq-title){line-height:1.05!important;} html body.editorial-page main.editorial-main:is(.services-page,.contact-page) .services-faq :is(h2#services-faq-title,h2#contact-faq-title) :is(span,.editorial-line-mask,.editorial-line-content,.motion-line){line-height:inherit!important;} } /* 1280px desktops: more space above FAQ titles. */ @media(min-width:1280px) and (max-width:1439px){ html body.editorial-page main.editorial-main.services-page>section.services-faq{margin-top:14.85rem!important;} html body.editorial-page main.editorial-main.contact-page #contact-faq.services-faq{margin-top:19.8rem!important;padding-top:11.88rem!important;} } @media(min-width:1280px) and (max-width:1366px) and (orientation:landscape){ html body.editorial-page main.editorial-main.contact-page #contact-faq.services-faq{margin-top:0!important;padding-top:9.9rem!important;} } @media(min-width:1280px) and (max-width:1439px){ html body.editorial-page main.editorial-main:is(.services-page,.contact-page) .services-faq :is(h2#services-faq-title,h2#contact-faq-title){line-height:1.02!important;} } /* 1280px desktops: slightly smaller FAQ toggle icons. */ @media(min-width:1280px) and (max-width:1439px){ html body.editorial-page main.editorial-main:is(.services-page,.contact-page) .services-faq .faq-question .faq-toggle-icon{width:18px!important;min-width:18px!important;flex:0 0 18px!important;height:18px!important;} html body.editorial-page main.editorial-main:is(.services-page,.contact-page) .services-faq .faq-question img.faq-toggle-icon{height:auto!important;} } /* 1440px desktops: FAQ icons are five percent smaller. */ @media(min-width:1440px) and (max-width:1599px){ html body.editorial-page main.editorial-main:is(.services-page,.contact-page) section.services-faq:is(#services-faq,#contact-faq) .faq-question .faq-toggle-icon{scale:.95!important;} } /* 1440px desktops: a little more breathing room between FAQ rows. */ @media(min-width:1440px) and (max-width:1599px){ html body.editorial-page main.editorial-main:is(.services-page,.contact-page) section.services-faq:is(#services-faq,#contact-faq) .faq-item{padding-top:26px!important;padding-bottom:26px!important;} } /* 1280–1599px desktops: FAQ answers are three pixels smaller. */ @media(min-width:1280px) and (max-width:1599px){ html body.editorial-page main.editorial-main.services-page section#services-faq .faq-answer .faq-answer-inner>p{font-size:calc(clamp(1rem,1.25vw,1.25rem) - 3px)!important;} html body.editorial-page main.editorial-main.contact-page section#contact-faq .faq-answer .faq-answer-inner>p{font-size:calc(1.5rem - 3px)!important;} } /* 1280–1599px desktops: closer FAQ questions and answers. */ @media(min-width:1280px) and (max-width:1599px){ html body.editorial-page main.editorial-main.services-page section#services-faq .faq-answer .faq-answer-inner>p{margin-top:6px!important;} html body.editorial-page main.editorial-main.contact-page section#contact-faq .faq-answer .faq-answer-inner>p{margin-top:14px!important;} } /* 1440px Contact: slightly smaller global-reach supporting paragraph. */ @media(min-width:1440px) and (max-width:1599px){ html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-content>p, html body main.audience-page .audience-promise>p{font-size:calc(1.9rem - 1px)!important;line-height:2.375rem!important;} } /* Desktop enquiry forms: more space below the help prompt. */ @media(min-width:1101px){ html body .enquiry-form fieldset>legend~.service-options{margin-top:8px!important;} } /* 1280px Contact: slightly shorter submit button. */ @media(min-width:1280px) and (max-width:1439px){ html body.editorial-page main.editorial-main:is(.contact-page,.audience-page) .enquiry-form .enquiry-actions button.artocea-cta.artocea-cta{padding-top:22px!important;padding-bottom:22px!important;min-height:68px!important;height:auto!important;} } /* 1280px desktops: inner hero H1s are five percent smaller. */ @media(min-width:1280px) and (max-width:1365px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase){--inner-h1-size:calc(var(--shared-inner-h1,clamp(32px,8.2vw,120px)) * .95);} } @media(min-width:1366px) and (max-width:1439px){ html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study,.work-showcase){--inner-h1-size:calc((clamp(73.44px,7.5vw,120.96px) - 7.2px) * .95);} } /* Colored panels: contain copy and center their descriptions. */ html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) :is(.editorial-container,.service-container,.case-statement-inner){width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:0!important;padding-inline:0!important;box-sizing:border-box!important;} html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h2,p){min-width:0!important;box-sizing:border-box!important;white-space:normal!important;overflow-wrap:break-word!important;} html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(.studio-thinking,.services-mix,.service-promise,.case-statement) p{margin-left:auto!important;margin-right:auto!important;text-align:center!important;position:relative!important;left:auto!important;right:auto!important;translate:none!important;} html body:not(.home-page) main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(.studio-thinking,.services-mix,.service-promise,.case-statement) p *{text-align:inherit!important;white-space:normal!important;} /* Center colored-panel titles and their animated line wrappers. */ html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) h2{width:100%!important;max-width:100%!important;margin-inline:auto!important;text-align:center!important;} html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) h2 *{text-align:center!important;} /* Colored-panel descriptions use a centered seventy-five percent measure. */ html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{width:75%!important;max-width:75%!important;margin-inline:auto!important;text-align:center!important;} /* 1440px cases: slightly smaller project titles under Explore More. */ @media(min-width:1440px) and (max-width:1599px){ html body.editorial-page main#main-content.case-study.case-study section.case-related .case-related-grid :is(a,article)>h3{font-size:calc(var(--inner-h3-size,28px) - 1px)!important;} } /* 1280px and above: tighter case-project title-to-capabilities spacing. */ @media(min-width:1280px){ html body.editorial-page main#main-content.case-study.case-study section.case-related .case-related-grid :is(a,article)>h3{margin-bottom:0!important;} html body.editorial-page main#main-content.case-study.case-study section.case-related .case-related-grid :is(a,article)>h3+p{margin-top:4px!important;} } /* AEGIS mobile laptop: full-height artwork with native horizontal scrolling. */ @media(max-width:599px){ html body.editorial-page main#main-content.case-aegis section.case-section:has(h2#aegis-dashboard) .case-mobile-artwork.case-laptop-scroll{display:block!important;overflow-x:auto!important;overflow-y:hidden!important;width:100%!important;max-width:100%!important;height:540px!important;gap:0!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:16px;} html body.editorial-page main#main-content.case-aegis section.case-section:has(h2#aegis-dashboard) .case-laptop-scroll :is(picture,img.case-image){display:block!important;width:auto!important;max-width:none!important;min-width:100%;height:540px!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;} html body.editorial-page main#main-content.case-aegis section.case-section:has(h2#aegis-dashboard) .case-laptop-scroll:focus-visible{outline:2px solid #FF933C;outline-offset:3px;} } /* AEGIS mobile laptop: remove outer side gutters. */ @media(max-width:599px){ html body.editorial-page main#main-content.case-aegis section.case-section:has(h2#aegis-dashboard) .case-mobile-artwork.case-laptop-scroll{width:100vw!important;max-width:none!important;margin-inline:calc((100% - 100vw) / 2)!important;border-radius:0!important;} html body.editorial-page main#main-content.case-aegis section.case-section:has(h2#aegis-dashboard) .case-laptop-scroll img.case-image{border-radius:0!important;clip-path:none!important;} } .case-laptop-scroll-label{display:none;} @media(max-width:599px){ html body.editorial-page main#main-content.case-aegis section.case-section:has(h2#aegis-dashboard)>p.case-laptop-scroll-label{display:block!important;width:100%!important;max-width:none!important;margin:16px 0 0!important;padding:0!important;font:400 .825rem/1.1rem Helixa,sans-serif!important;color:#B3A69E!important;text-align:center!important;letter-spacing:0!important;} } /* Studio mobile route: dark base with an orange scroll-progress overlay. */ @media(max-width:599px){ html body.editorial-page main#studio-page.studio-page #studio-steps :is(.curve-base,.curve-fill,.route-join-base,.route-join-fill){filter:none!important;} html body.editorial-page main#studio-page.studio-page #studio-steps .curve-base path, html body.editorial-page main#studio-page.studio-page #studio-steps .steps-route-joins .route-join-base{stroke:#63452f!important;} html body.editorial-page main#studio-page.studio-page #studio-steps .curve-fill path, html body.editorial-page main#studio-page.studio-page #studio-steps .steps-route-joins .route-join-fill{stroke:#FF933C!important;} } /* 1920px colored panels: shared centered 947px Figma copy width. */ @media(min-width:1920px){ html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{width:947px!important;max-width:100%!important;margin-inline:auto!important;text-align:center!important;white-space:normal!important;text-wrap:wrap!important;} html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p br{display:none!important;} html body main:is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study):is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p *{white-space:normal!important;text-align:inherit!important;} } /* Figma 246:727: fixed Studio statement copy width on 1920px desktops. */ @media(min-width:1920px){ html body.editorial-page main#studio-page#studio-page#studio-page#studio-page#studio-page .studio-thinking p{width:947px!important;max-width:100%!important;margin-inline:auto!important;text-align:center!important;} } html body main#studio-page .studio-thinking p br.studio-statement-reference-break{display:none!important;} @media(min-width:1920px){ html body.editorial-page main#studio-page#studio-page#studio-page#studio-page#studio-page .studio-thinking p br.studio-statement-reference-break{display:block!important;} } /* Mobile colored panels: use the same wider statement copy width everywhere. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{ width:90%!important;max-width:90%!important;text-wrap:wrap!important; } } /* Shared mobile H2 and FAQ scale: ten percent smaller. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) h2{font-size:1.6875rem!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) h2{font-size:clamp(27px,7.92vw,46.8px)!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.studio-process,.studio-years,.contact-work) h2{font-size:clamp(1.8rem,9.45vw,2.475rem)!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) h2 :is(span,.motion-line,.editorial-line-mask,.editorial-line-content,.title-word-mask,.title-word){font-size:inherit!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) .faq-question{font-size:calc(1.4625rem - 2px)!important;} } /* Own the mobile Work/footer separation on the project section itself. */ @media(max-width:599px){ html body.work-page.work-page main#top#top #work.work-showcase{padding-bottom:3.75rem!important;} } /* Equal breathing room beneath mobile FAQ titles. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main) .services-faq>h2{margin-bottom:3rem!important;} } /* Mobile Studio: closer client section and a little more room before Stories. */ @media(max-width:599px){ html body.editorial-page main#studio-page.studio-page section.clients.page-section{padding-top:3rem!important;margin-top:0!important;} html body.editorial-page main#studio-page.studio-page section.studio-years.editorial-section{padding-top:7rem!important;} } /* Mobile action typography: 2px smaller text and 2px tighter leading. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) a.line-link.line-link.line-link.line-link.line-link.line-link.line-link.line-link{font-size:calc(1.0625rem - 2px)!important;line-height:calc(1.0625rem * 1.333333 - 2px)!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) a.case-website-link{font-size:calc(.875rem - 2px)!important;line-height:calc(2rem - 2px)!important;} html body :is(.artocea-cta,.line-link,.case-website-link)>span{font-size:inherit!important;line-height:inherit!important;} } /* Contact mobile lead: continuous copy with natural wrapping. */ @media(max-width:599px){ html body.editorial-page main.editorial-main.contact-page.contact-page .contact-intro .editorial-lead>.contact-copy-line{display:inline!important;white-space:normal!important;text-wrap:wrap!important;} } /* Contact FAQ authored break on phones only. */ html body #contact-faq-title>.title-mobile-lines{display:none!important;} html body #contact-faq-title>.title-desktop-lines{display:block!important;} @media(max-width:599px){ html body #contact-faq-title>.title-desktop-lines{display:none!important;} html body #contact-faq-title>.title-mobile-lines{display:block!important;} } /* Mobile Contact reach mark: 25 percent smaller, with a tighter title gap. */ @media(max-width:599px){ html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-mark{width:36px!important;height:auto!important;} html body.editorial-page main.editorial-main.contact-page #contact-global-panel h2#contact-global-title{margin-top:2rem!important;} } /* A little more internal room in mobile capability cards. */ @media(max-width:599px){ html body.editorial-page main.services-page.services-gallery-layout.services-gallery-layout .service-capabilities{padding:2rem!important;} } /* Studio founder CTA follows the shared smaller mobile link scale. */ @media(max-width:599px){ html body.editorial-page main#studio-page#studio-page#studio-page#studio-page#studio-page#studio-page #founder.founder.page-section .founder-copy>a.line-link{font-size:calc(1.0625rem - 2px)!important;line-height:calc(1.0625rem * 1.333333 - 2px)!important;} } /* Center Studio mobile section titles and founder copy. */ @media(max-width:599px){ html body.editorial-page main#studio-page#studio-page#studio-page#studio-page#studio-page#studio-page :is(#studio-steps-title,#clients-title,#founder-title){width:100%!important;max-width:100%!important;margin-inline:auto!important;text-align:center!important;} html body.editorial-page main#studio-page#studio-page#studio-page#studio-page#studio-page#studio-page :is(#studio-steps-title,#clients-title,#founder-title) *{text-align:center!important;} html body.editorial-page main#studio-page#studio-page #founder .founder-copy{text-align:center!important;} html body.editorial-page main#studio-page#studio-page #founder .founder-copy>p{text-align:center!important;} html body.editorial-page main#studio-page#studio-page #founder.founder.page-section .founder-copy>a.line-link{margin-inline:auto!important;} } /* Mobile project cards: shared title and label detailing on Work and Explore More. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#work.work-showcase .work-item h2.work-caption,.case-related .case-related-grid h3){font-family:Helixa,sans-serif!important;font-size:calc(1.603125rem - 2px)!important;line-height:1.2!important;font-weight:700!important;letter-spacing:-.01em!important;margin-bottom:4px!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#work.work-showcase .work-item h2.work-caption,.case-related .case-related-grid h3) *{font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#work.work-showcase .work-item .project-capabilities,.case-related .case-related-grid h3+p){font-family:Helixa,sans-serif!important;font-size:1rem!important;line-height:1.5!important;font-weight:350!important;color:#B3A69E!important;margin-top:0!important;} } /* Mobile case paragraphs and inner-page hero subtext. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study).case-study :is(.case-copy,.case-copy p){font-size:1.25rem!important;line-height:1.4!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study).case-study .case-statement p{font-size:calc(1.5rem - 2px)!important;line-height:1.35!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study).case-study :is(.case-copy,.case-statement) p *{font-size:inherit!important;line-height:inherit!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){font-size:1.125rem!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p) *{font-size:inherit!important;} } /* Portrait-tablet inner hero copy: four pixels smaller and a narrower measure. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){font-size:calc(1.5rem - 4px)!important;width:80%!important;max-width:640px!important;white-space:normal!important;text-wrap:wrap!important;margin-inline:auto!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p) *{font-size:inherit!important;} } /* Mobile FAQ toggles align with the center of the first text line. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) .faq-question{align-items:flex-start!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) .faq-question .faq-toggle-icon{align-self:flex-start!important;margin-top:calc((1lh - 24px) / 2)!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) .faq-item[data-open="true"] .faq-question img.faq-toggle-icon{margin-top:calc((1lh - 2px) / 2)!important;} } /* All mobile footers: supporting copy two pixels larger. */ @media(max-width:599px){ html body footer#contact#contact.contact-panel .contact-top .contact-copy>p{font-size:calc(var(--responsive-body,1rem) + 2px)!important;} html body footer#contact#contact.contact-panel .contact-top .contact-copy>p *{font-size:inherit!important;} } /* Slightly wider Contact statistics cards on phones. */ @media(max-width:599px){ html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{width:96%!important;} } /* Bring mobile Contact statistics closer to the reach heading. */ @media(max-width:599px){ html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{margin-top:2rem!important;} } /* Center mobile FAQ and More headings with the shared section-title treatment. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#related-title){text-align:center!important;width:100%!important;max-width:100%!important;margin-inline:auto!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#related-title) *{text-align:center!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) #more-services-title{text-align:left!important;font-family:Helixa,sans-serif!important;font-size:1.25rem!important;font-weight:400!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:normal!important;background:none!important;color:#d3b393!important;-webkit-text-fill-color:#d3b393!important;} } /* Preserve the plain More label through animated text wrappers. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) #more-services-title,html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) #more-services-title *{font-family:Helixa,sans-serif!important;font-size:1.25rem!important;font-weight:400!important;line-height:1.3!important;letter-spacing:0!important;text-align:left!important;background:none!important;background-clip:border-box!important;-webkit-background-clip:border-box!important;color:#d3b393!important;-webkit-text-fill-color:#d3b393!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) .service-support-item h3,html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) .service-support-item h3 :is(.editorial-line-mask,.editorial-line-content){width:100%!important;max-width:100%!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;height:auto!important;} } /* Mobile additional services match the primary service headings. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) #more-services-title{margin-bottom:1.5rem!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) .service-support-item h3{font-size:1.6875rem!important;line-height:1.25!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) .service-support-item h3 *{font-size:inherit!important;line-height:inherit!important;} } /* Large desktop: more room above the shared footer wordmark. */ @media(min-width:1920px){ html body:is(.home-page,.work-page,.editorial-page) footer#contact.contact-panel.contact-panel>.footer-wordmark{ margin-top:7.5rem!important; } } /* Preserve the approved solid beige support label through animated wrappers. */ html body.editorial-page main.services-page #more-services-title#more-services-title#more-services-title, html body.editorial-page main.services-page #more-services-title#more-services-title#more-services-title *{ background:none!important; background-clip:border-box!important; -webkit-background-clip:border-box!important; color:#d3b393!important; -webkit-text-fill-color:#d3b393!important; } /* Tablet FAQ titles share a clear gap before the first divider. */ @media(min-width:600px) and (max-width:1366px){ html body.editorial-page main.editorial-main .services-faq.services-faq>h2:is(#services-faq-title,#contact-faq-title){ margin-bottom:3rem!important; } } /* Portrait-tablet hero text wraps naturally within the shared measure. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.editorial-main.contact-page .contact-intro .editorial-lead .contact-copy-line{display:inline!important;white-space:normal!important;} } /* Studio tablet hero: scale to keep the three intended phrases intact. */ @media(min-width:600px) and (max-width:1366px){ html body.editorial-page main#studio-page#studio-page#studio-page#studio-page .editorial-intro>h1.editorial-title{ font-size:clamp(2.5rem,7.5vw,6.25rem)!important; line-height:1.08!important; width:100%!important; max-width:100%!important; } html body.editorial-page main#studio-page#studio-page#studio-page#studio-page .editorial-intro>h1.editorial-title :is(.editorial-line-mask,.editorial-line-content){ font-size:inherit!important; line-height:inherit!important; white-space:nowrap!important; max-width:100%!important; } } /* Shared tablet hero subtext scales smoothly in either orientation. */ @media(min-width:600px) and (max-width:1366px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){font-size:clamp(1.125rem,2.4vw,1.375rem)!important;line-height:1.4!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p) *{font-size:inherit!important;line-height:inherit!important;} } /* Large desktop question prompts and line links: two percent smaller. */ @media(min-width:1920px){ html body main:is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main) .question-link>:is(p,span){font-size:calc((var(--invitation-question-size) + 2px) * .98)!important;} html body main:is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main) a.line-link.line-link.line-link.line-link.line-link.line-link.line-link.line-link{font-size:calc((var(--invitation-link-size) + 2px) * .98)!important;} } /* Large desktop founder CTAs share the invitation line-link size. */ @media(min-width:1920px){ html body:is(.home-page,.editorial-page) main:is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page) #founder .founder-copy>a.line-link{font-size:calc((var(--invitation-link-size) + 2px) * .98)!important;} } /* Desktop footer fills the viewport; spare height belongs above the wordmark. */ @media(min-width:1101px){ html body footer#contact.contact-panel.contact-panel{ display:flex!important;flex-direction:column!important; box-sizing:border-box!important;min-height:100svh!important;height:auto!important; } html body footer#contact.contact-panel.contact-panel>.contact-top{flex:0 0 auto;margin-bottom:clamp(1.5rem,4svh,3rem)!important;} html body footer#contact.contact-panel.contact-panel.contact-panel>.footer-wordmark{flex:0 0 auto;top:0!important;margin-top:auto!important;} html body footer#contact.contact-panel.contact-panel>.footer-bottom{flex:0 0 auto;} } /* Other desktops: question prompts five percent smaller. */ @media(min-width:1101px) and (max-width:1919px){ html body main:is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main) .question-link>:is(p,span){font-size:calc((var(--invitation-question-size) + 2px) * .95)!important;} } /* Slightly tighter spacing between invitation questions and their links. */ html body main:is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main):is(#top,#studio-page,#main-content,.editorial-main) .question-link{column-gap:.5rem!important;row-gap:.5rem!important;} /* Restore the mobile footer display title independently of section H2 sizing. */ @media(max-width:599px){ html body footer#contact#contact#contact#contact#contact#contact#contact.contact-panel .contact-copy>h2{font-size:clamp(2.375rem,10.8vw,3rem)!important;line-height:1.12!important;} html body footer#contact#contact#contact#contact#contact#contact#contact.contact-panel .contact-copy>h2 *{font-size:inherit!important;line-height:inherit!important;} } /* Success dialog uses the original line CTA treatment outside the page main. */ html body .enquiry-celebration .celebration-home.line-link{ --link-travel:8px;position:relative;display:inline-flex;align-items:center; font:900 calc(var(--invitation-link-size) + 1px)/1.333333 Helixa,sans-serif!important; letter-spacing:.04em!important;text-transform:uppercase;gap:.75rem!important; width:max-content;max-width:100%;padding:0!important;border:0!important;text-decoration:none; } html body .enquiry-celebration .celebration-home.line-link span{font:inherit!important;letter-spacing:inherit!important;} html body .enquiry-celebration .celebration-home.line-link::after{content:'';position:absolute;left:0;right:0;bottom:-.25em;height:1px;background:#ff933c;transition:right 420ms cubic-bezier(.45,0,.2,1);} html body .enquiry-celebration .celebration-home.line-link img{width:var(--invitation-arrow-size);height:var(--invitation-arrow-size);flex:0 0 var(--invitation-arrow-size);transition:translate 420ms cubic-bezier(.45,0,.2,1);} html body .enquiry-celebration .celebration-home.line-link:is(:hover,:focus-visible)::after{right:-8px;} html body .enquiry-celebration .celebration-home.line-link:is(:hover,:focus-visible) img{translate:8px 0;} @media(min-width:1101px){html body .enquiry-celebration .celebration-home.line-link{font-size:calc(var(--invitation-link-size) + 2px)!important;}} @media(min-width:1920px){html body .enquiry-celebration .celebration-home.line-link{font-size:calc((var(--invitation-link-size) + 2px) * .98)!important;}} @media(max-width:599px){html body .enquiry-celebration .celebration-home.line-link{font-size:calc(1.0625rem - 2px)!important;line-height:calc(1.0625rem * 1.333333 - 2px)!important;}html body .enquiry-celebration .celebration-home.line-link img{width:24px;height:24px;flex-basis:24px;}} @media(prefers-reduced-motion:reduce){html body .enquiry-celebration .celebration-home.line-link::after,html body .enquiry-celebration .celebration-home.line-link img{transition:none;}html body .enquiry-celebration .celebration-home.line-link:is(:hover,:focus-visible)::after{right:0;}html body .enquiry-celebration .celebration-home.line-link:is(:hover,:focus-visible) img{translate:0 0;}} /* Success copy: closer supporting text, more space before the line button. */ html body .enquiry-celebration .celebration-copy>p{margin-top:1.25rem!important;margin-bottom:4rem!important;} /* Updated page subtitles share a narrower, naturally wrapped measure. */ @media(min-width:600px){ html body main:is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main) :is(.work-lead,.service-hero>p,.editorial-intro .studio-lead,.contact-intro .editorial-lead){width:75%!important;max-width:850px!important;margin-inline:auto!important;white-space:normal!important;text-wrap:wrap!important;} } @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body main:is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main) :is(.work-lead,.service-hero>p,.editorial-intro .studio-lead,.contact-intro .editorial-lead){max-width:600px!important;} } /* Inner hero subtitles sit closer to titles, with slightly smaller large-desktop copy. */ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead){margin-top:1.75rem!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) .case-hero>p{margin-top:.625rem!important;} @media(max-width:1100px){html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){margin-top:1.25rem!important;}} @media(min-width:1600px){html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){font-size:26px!important;}html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p) *{font-size:inherit!important;}} /* Inner hero entrances begin only after the navigation loader and fonts are ready. */ @media(prefers-reduced-motion:no-preference){ html body:has(>.inner-page-curtain[data-images-ready="false"]):not([data-navigation-revealing="true"]) :is( .editorial-intro h1 .editorial-line-content,.service-hero h1 .editorial-line-content, .case-hero h1 .editorial-line-content,#work-page-title .editorial-line-content, .editorial-intro .editorial-lead,.editorial-intro aside,.service-hero>p,.work-lead,.case-hero>p, .studio-intro-photo,.inner-hero-scroll-cue){animation-play-state:paused!important;} html body:has(>.inner-page-curtain) main :is(.editorial-intro,.service-hero,.case-hero) h1 .editorial-line-content,html body:has(>.inner-page-curtain) main #work-page-title .editorial-line-content{animation-delay:0ms!important;} html body:has(>.inner-page-curtain) main :is(.editorial-intro,.service-hero,.case-hero,#work-page-title) .editorial-line-mask:nth-child(2) .editorial-line-content{animation-delay:110ms!important;} html body:has(>.inner-page-curtain) main :is(.editorial-intro,.service-hero,.case-hero,#work-page-title) .editorial-line-mask:nth-child(n+3) .editorial-line-content{animation-delay:220ms!important;} html body:has(>.inner-page-curtain) :is(.editorial-intro .editorial-lead,.editorial-intro aside,.service-hero>p,.work-lead,.case-hero>p,.studio-intro-photo,.inner-hero-scroll-cue){animation-delay:300ms!important;} html body:has(>.inner-page-curtain[data-images-ready="false"]):not([data-navigation-revealing="true"]) :is(.case-hero-badge,.page-hero-badge){opacity:0!important;} html body:has(>.inner-page-curtain[data-images-ready="true"]) :is(.case-hero-badge,.page-hero-badge){animation:inner-label-ready-enter 600ms cubic-bezier(.22,1,.36,1) both!important;} } @keyframes inner-label-ready-enter{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} /* Desktop hero subtitles: narrower shared reading width. */ @media(min-width:1101px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){width:65%!important;max-width:760px!important;margin-inline:auto!important;white-space:normal!important;text-wrap:wrap!important;} } /* One desktop title/subtitle spacing rule for the four main page heroes. */ @media(min-width:1101px){ html body main:is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main) :is(.work-showcase,.service-hero,.editorial-intro):has(h1>.editorial-line-mask:nth-child(2):last-child) h1{margin-bottom:0!important;padding-bottom:0!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main) :is(.work-showcase,.service-hero,.editorial-intro):has(h1>.editorial-line-mask:nth-child(2):last-child) h1>.editorial-line-mask:last-child, html body main:is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main) :is(.work-showcase,.service-hero,.editorial-intro):has(h1>.editorial-line-mask:nth-child(2):last-child) h1>.editorial-line-mask:last-child>.editorial-line-content{padding-bottom:0!important;margin-bottom:0!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main) :is(.work-showcase,.editorial-intro):has(h1>.editorial-line-mask:nth-child(2):last-child) :is(.work-lead,.editorial-lead), html body main:is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main) .service-hero:has(>h1>.editorial-line-mask:nth-child(2):last-child)>p{margin-top:12px!important;padding-top:0!important;top:0!important;} } /* Inner pages stay fully hidden until fonts and the navigation loader are ready. */ html body:has(>.inner-page-curtain[data-images-ready="false"]):not([data-navigation-revealing="true"])>:not(.inner-page-curtain,#navigation-transition,script,style,link), html body:has(>.inner-page-curtain[data-images-ready="false"]):not([data-navigation-revealing="true"])>:not(.inner-page-curtain,#navigation-transition,script,style,link) *{ visibility:hidden!important;pointer-events:none!important;animation-play-state:paused!important; } /* Final wipe releases content directly, even before React hydration completes. */ html body[data-navigation-revealing="true"]:has(>.inner-page-curtain){--inner-content-opacity:1;--inner-content-visibility:visible;} @media(prefers-reduced-motion:no-preference){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,#work-page-title) .editorial-line-content{animation-delay:0ms!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,#work-page-title) .editorial-line-mask:nth-child(2) .editorial-line-content{animation-delay:110ms!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero,#work-page-title) .editorial-line-mask:nth-child(n+3) .editorial-line-content{animation-delay:220ms!important;} } /* Inner pages only: reveal hero text during the second wipe, then the rest. Home already presents its live scene before this phase; never hide it here. */ html body:has(>.inner-page-curtain)[data-navigation-revealing="true"]:has(>#navigation-transition[data-phase="revealing"]) :is(header.site-header,.site-header,.editorial-header,footer.contact-panel,main>:not(.editorial-intro,.service-hero,.case-hero,.work-showcase),.studio-intro-photo,.case-hero>:not(h1,p,.case-hero-badge,.page-hero-badge,.inner-hero-scroll-space),.work-showcase>:not(h1,p,.page-hero-badge,.inner-hero-scroll-space),.inner-hero-scroll-cue), html body:has(>.inner-page-curtain)[data-navigation-revealing="true"]:has(>#navigation-transition[data-phase="revealing"]) :is(header.site-header,.site-header,.editorial-header,footer.contact-panel,main>:not(.editorial-intro,.service-hero,.case-hero,.work-showcase),.studio-intro-photo,.case-hero>:not(h1,p,.case-hero-badge,.page-hero-badge,.inner-hero-scroll-space),.work-showcase>:not(h1,p,.page-hero-badge,.inner-hero-scroll-space),.inner-hero-scroll-cue) *{ visibility:hidden!important;pointer-events:none!important;animation-play-state:paused!important; } /* Extra breathing room around Contact's large conversation paragraph only. */ @media(min-width:1101px){html body main:is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main).contact-page section.contact-conversation{padding-top:16rem!important;padding-bottom:15rem!important;}} @media(min-width:600px) and (max-width:1100px){html body main:is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main).contact-page section.contact-conversation{padding-block:10.2rem!important;}} @media(max-width:599px){html body main:is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main).contact-page section.contact-conversation{padding-block:11.1rem!important;}} /* Shared title paint belongs to the visible text, never its animation mask. */ html body main:is(#top,#main-content,#studio-page,.editorial-main) :is(#clients-title,#studio-stories-title,#contact-global-title,#studio-steps-title){ background-image:var(--title-gradient)!important;background-clip:text!important; -webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important; } html body main:is(#top,#main-content,#studio-page,.editorial-main) :is(#clients-title,#studio-stories-title,#contact-global-title,#studio-steps-title):has(.editorial-line-content){ background:none!important;background-clip:border-box!important;-webkit-background-clip:border-box!important; } html body main:is(#top,#main-content,#studio-page,.editorial-main) :is(#clients-title,#studio-stories-title,#contact-global-title,#studio-steps-title) .editorial-line-mask{ background:none!important;background-clip:border-box!important;-webkit-background-clip:border-box!important; } html body main:is(#top,#main-content,#studio-page,.editorial-main) :is(#clients-title,#studio-stories-title,#contact-global-title,#studio-steps-title) .editorial-line-content{ width:fit-content!important;max-width:100%!important;margin-inline:auto!important; background-image:var(--title-gradient)!important;background-size:100% 100%!important; background-clip:text!important;-webkit-background-clip:text!important; color:transparent!important;-webkit-text-fill-color:transparent!important; } /* Content photographs and case artwork use a fixed physical corner radius. */ html body main:is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main) :is( .case-hero-video,.case-hero-still,.case-hero-artwork,.case-image,.case-aegis-board, .case-mobile-artwork,.case-desktop-artwork,.case-refreshed-scroll, .studio-intro-photo,.studio-photo,.studio-collage,.service-image,.project-media,.work-card,.work-slide-image, .envisioner-desktop-media,.envisioner-mobile-apps){ border-radius:16px!important;clip-path:inset(0 round 16px)!important;overflow:hidden!important; } html body main:is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main):is(#top,#main-content,#studio-page,.editorial-main) :is(.case-hero-still,.case-hero-video,.studio-intro-photo,.studio-photo) :is(img,video,picture){ border-radius:0!important;clip-path:none!important; } /* A little more breathing room inside mobile testimonial cards. */ @media(max-width:599px){ html body.home-page main#top .testimonials.stories-stack-section .stories-stage .story-panel{ padding-left:calc(1.5rem + 8px)!important; } } /* Keep glyph tops, descenders and side bearings inside animated title masks. Negative margins preserve the authored line spacing. */ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(h2,h3,h4) :is(.editorial-line-mask,.motion-line){ height:auto!important;max-height:none!important;min-height:0!important; padding-block:.16em!important;margin-block:-.16em!important; overflow:hidden!important;clip-path:inset(0 -.08em)!important;contain:none!important; } html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(h1,h2,h3,h4){ overflow:visible!important;max-height:none!important; } /* Portrait tablet: center the requested section headings and founder content. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body main:is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page) :is(#studio-steps-title,#clients-title,#founder-title){ text-align:center!important;margin-inline:auto!important; } html body main:is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page) :is(#studio-steps-title,#clients-title,#founder-title) :is(.editorial-line-mask,.editorial-line-content,.motion-line,.title-word-mask,.title-word){ text-align:center!important;justify-content:center!important; } html body main:is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page) :is(#studio-steps-title,#clients-title,#founder-title) :is(.editorial-line-mask,.motion-line){ width:100%!important;margin-inline:auto!important; } html body main:is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page) .clients .clients-heading{ text-align:center!important;align-items:center!important;justify-items:center!important; } html body main:is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page) #founder .founder-copy{ text-align:center!important; } html body main:is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page) #founder .founder-copy>p{ width:90%!important;max-width:90%!important;margin-inline:auto!important;text-align:center!important; } html body main:is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page) #founder .founder-copy>a.line-link{ margin-inline:auto!important; } } /* Center the Contact global title and its authored lines at every viewport. */ html body.editorial-page main.editorial-main.contact-page section#contact-global-panel h2#contact-global-title.editorial-title{ width:100%!important;margin-inline:auto!important;text-align:center!important; } html body.editorial-page main.editorial-main.contact-page section#contact-global-panel h2#contact-global-title.editorial-title .editorial-line-mask{ width:100%!important;text-align:center!important; } html body.editorial-page main.editorial-main.contact-page section#contact-global-panel h2#contact-global-title.editorial-title .editorial-line-content{ width:fit-content!important;margin-inline:auto!important;text-align:center!important; } /* Requested portrait-tablet Studio spacing and portrait alignment. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main#studio-page.studio-page>section#studio-steps.editorial-section, html body.editorial-page main#studio-page.studio-page>.panel-reading-track:has(>#studio-steps){ margin-top:10rem!important;padding-top:0!important; } html body.editorial-page main#studio-page.studio-page>.panel-reading-track>#studio-steps{ margin-top:0!important;padding-top:0!important; } html body.editorial-page main#studio-page #founder.founder.page-section{ justify-items:center!important;align-items:center!important; } html body.editorial-page main#studio-page #founder.founder.page-section .founder-photo{ margin-inline:auto!important;align-self:center!important;justify-self:center!important; } } /* Portrait-tablet founder: fit gradient paint to the lettering. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main#studio-page #founder.founder.page-section h2#founder-title:has(.editorial-line-content){ background:none!important; } html body.editorial-page main#studio-page #founder.founder.page-section h2#founder-title .editorial-line-mask{ background:none!important;background-clip:border-box!important;-webkit-background-clip:border-box!important; } html body.editorial-page main#studio-page #founder.founder.page-section h2#founder-title .editorial-line-content{ width:fit-content!important;max-width:100%!important;margin-inline:auto!important; background-image:var(--title-gradient)!important;background-size:100% 100%!important;background-position:0 0!important; background-clip:text!important;-webkit-background-clip:text!important; color:transparent!important;-webkit-text-fill-color:transparent!important; } } /* Case metadata: requested device-specific size adjustments. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.case-study .case-overview>.case-facts dd{ font-size:1.25rem!important; } } @media(max-width:599px){ html body.editorial-page main.case-study .case-overview>.case-facts dt{ font-size:calc(1rem - 1px)!important; } html body.editorial-page main.case-study .case-overview>.case-facts dd{ font-size:calc(1.25rem - 1px)!important; } } html body.editorial-page main.case-study .case-overview>.case-facts dd :is(span,a){ font-size:inherit!important;line-height:inherit!important; } /* Portrait tablets: a slightly wider reading area in coloured statement panels. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{ width:90%!important;max-width:90%!important;margin-inline:auto!important; } } /* Metadata labels use the actual Helixa Bold face at every breakpoint. */ html body.editorial-page main.case-study .case-overview>.case-facts dt, html body.editorial-page main.case-study .case-overview>.case-facts dt *{ font-family:Helixa,sans-serif!important;font-weight:700!important; } /* Mobile coloured statements match the orange Services panel. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement){height:auto!important;min-height:0!important;padding:4rem 1.5rem!important;box-sizing:border-box;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{font-family:Helixa,sans-serif!important;font-size:1.1875rem!important;font-weight:400!important;line-height:1.5!important;letter-spacing:0!important;width:100%!important;max-width:100%!important;margin:2rem auto 0!important;text-align:center!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p *{font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;} } /* Mobile case facts: closer labels and founder-style website CTA. */ @media(max-width:599px){ html body.editorial-page main:is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study).case-study .case-facts dt:not(.sr-only){margin-bottom:.5rem!important;} html body.editorial-page main:is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study).case-study a.case-website-link{font-family:Helixa,sans-serif!important;font-weight:900!important;font-size:calc(1.0625rem - 2px)!important;line-height:calc(1.0625rem * 1.333333 - 2px)!important;letter-spacing:.04em!important;gap:1rem!important;padding-bottom:.5rem!important;width:max-content!important;max-width:100%!important;} html body.editorial-page main:is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study).case-study a.case-website-link::after{height:1px!important;bottom:0!important;} html body.editorial-page main:is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study):is(#top,#main-content,.case-study).case-study a.case-website-link>img{width:24px!important;height:24px!important;flex:0 0 24px!important;} } /* Connect hero: the visible frame owns all four corners. */ html body.editorial-page main#main-content.case-connect .case-hero :is(.case-hero-artwork,.case-hero-still,.case-hero-video,.case-desktop-artwork,.case-mobile-artwork){ width:100%!important;max-width:100%!important;box-sizing:border-box; border-radius:16px!important;clip-path:inset(0 round 16px)!important;overflow:hidden!important; } /* Inner word wrappers must not add a second layer of line spacing. */ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(h2,h3,h4) :is(.title-word-mask,.title-word){padding-block:0!important;margin-block:0!important;line-height:inherit!important;} html body.home-page main#top :is(#why-title,#testimonials-title){line-height:1.25!important;} html body.home-page main#top :is(#why-title,#testimonials-title) :is(.motion-line,.motion-line>span,.title-word-mask,.title-word){line-height:inherit!important;} /* Large desktop statement copy keeps a bounded, centered reading measure. */ @media(min-width:1400px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{width:75%!important;max-width:1000px!important;margin-inline:auto!important;font-size:var(--panel-copy-size,28px)!important;line-height:1.5!important;text-align:center!important;white-space:normal!important;text-wrap:balance;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p *{font-size:inherit!important;line-height:inherit!important;white-space:normal!important;} } /* Only edge-to-edge mobile case scrollers have square outer corners. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.envisioner-mobile-apps.case-refreshed-scroll,.case-laptop-scroll){border-radius:0!important;clip-path:none!important;overflow-x:auto!important;overflow-y:hidden!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.envisioner-mobile-apps.case-refreshed-scroll,.case-laptop-scroll)>img{border-radius:0!important;clip-path:none!important;} } /* Retain masked word entrances at every viewport without adding line gaps. */ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(h2,h3,h4) .word-reveal-mask{display:inline-block!important;vertical-align:top!important;overflow:hidden!important;clip-path:inset(0 -.08em)!important;padding:0!important;margin:0!important;line-height:inherit!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(h2,h3,h4) .word-reveal-glyph{display:inline-block!important;line-height:inherit!important;} /* Studio process heading: left on desktop and landscape tablet only. */ @media(min-width:1101px),(min-width:600px) and (orientation:landscape){ html body.editorial-page main#studio-page#studio-page#studio-page#studio-page#studio-page#studio-page#studio-page#studio-page h2#studio-steps-title{margin-inline:0!important;text-align:left!important;} html body.editorial-page main#studio-page#studio-page#studio-page#studio-page#studio-page#studio-page#studio-page#studio-page h2#studio-steps-title :is(.editorial-line-mask,.editorial-line-content,.motion-line,.title-word-mask,.title-word){margin-inline:0!important;text-align:left!important;justify-content:flex-start!important;} } /* One physical line box per authored display line; nested spans add no leading. */ html body.home-page main#top#top#top#top#top#top#top#top#top :is(#why-title,#testimonials-title){line-height:1.25!important;} html body.home-page main#top#top#top#top#top#top#top#top#top :is(#why-title,#testimonials-title) .motion-line{display:block!important;height:1.25em!important;min-height:0!important;max-height:none!important;padding:0!important;margin:0!important;overflow:hidden!important;clip-path:inset(0 -.08em)!important;} html body.home-page main#top#top#top#top#top#top#top#top#top :is(#why-title,#testimonials-title) :is(.motion-line>span,.title-word-mask,.title-word){display:block!important;font-size:inherit!important;line-height:inherit!important;padding:0!important;margin-block:0!important;height:auto!important;min-height:0!important;} /* Hero H1 leading follows the Home hero reference without changing type sizes. */ html body:not(.home-page) main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) h1{line-height:1.1111111111!important;} html body:not(.home-page) main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) h1 :is(.title-desktop-lines,.title-mobile-lines,.editorial-line-mask,.editorial-line-content,.motion-line,.motion-line>span,.title-word-mask,.title-word){font-size:inherit!important;line-height:inherit!important;padding-block:0!important;margin-block:0!important;height:auto!important;min-height:0!important;max-height:none!important;} /* The client relationship copy uses the same stationary reading stage as the intro. */ html body.home-page main#top#top#top#top .home-belief.belief-scroll-enabled{height:calc(280svh + 160px)!important;min-height:0!important;padding:5rem 0!important;} html body.home-page main#top#top#top#top .belief-scroll-enabled .belief-scroll-stage{position:sticky!important;top:0!important;height:100svh!important;display:grid!important;place-items:center!important;} html body.home-page main#top#top#top#top .belief-scroll-copy{transform:none!important;} /* Mobile H2s share Trusted by teams leading; animation wrappers add no extra gap. */ @media(max-width:599px){ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) h2{line-height:1.25!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) h2 :is(.motion-line,.motion-line>span,.editorial-line-mask,.editorial-line-content,.title-word-mask,.title-word){font-size:inherit!important;line-height:inherit!important;padding-block:0!important;margin-block:0!important;height:auto!important;min-height:0!important;max-height:none!important;} } /* Hero masks retain clipping and use the Service reference line-box spacing. */ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero) h1 .editorial-line-mask,html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) h1#work-page-title .editorial-line-mask{display:block!important;overflow:hidden!important;overflow:clip!important;clip-path:inset(0)!important;contain:paint!important;isolation:isolate;height:auto!important;min-height:0!important;max-height:none!important;padding-block:0!important;margin-block:0!important;line-height:inherit!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro,.service-hero,.case-hero) h1 .editorial-line-content,html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) h1#work-page-title .editorial-line-content{display:block!important;padding-block:0!important;margin-block:0!important;line-height:inherit!important;} /* Human thinking shares the Home hero H1 leading at every device width. */ html body.home-page main#top#top#top#top#top#top#top#top#top#top#top#top#top#top h2#why-title{line-height:1.1111111111!important;} html body.home-page main#top#top#top#top#top#top#top#top#top#top#top#top#top#top h2#why-title .motion-line{display:block!important;height:1.1111111111em!important;padding-block:0!important;margin-block:0!important;overflow:hidden!important;clip-path:inset(0 -.08em)!important;} html body.home-page main#top#top#top#top#top#top#top#top#top#top#top#top#top#top h2#why-title :is(.motion-line>span,.title-word-mask,.title-word,.word-reveal-mask,.word-reveal-glyph){font-size:inherit!important;line-height:inherit!important;padding-block:0!important;margin-block:0!important;} /* Stories uses the same display leading and masks as Home hero text. */ html body.home-page main#top#top#top#top#top#top#top#top#top#top#top#top#top#top h2#testimonials-title{line-height:1.1111111111!important;} html body.home-page main#top#top#top#top#top#top#top#top#top#top#top#top#top#top h2#testimonials-title .motion-line{display:block!important;height:1.1111111111em!important;padding-block:0!important;margin-block:0!important;overflow:hidden!important;clip-path:inset(0 -.08em)!important;} html body.home-page main#top#top#top#top#top#top#top#top#top#top#top#top#top#top h2#testimonials-title :is(.motion-line>span,.title-word-mask,.title-word,.word-reveal-mask,.word-reveal-glyph){font-size:inherit!important;line-height:inherit!important;padding-block:0!important;margin-block:0!important;} /* The paragraph occupies the same reading position as the departing card. */ html body.home-page main#top#top#top#top#top .home-belief .belief-scroll-copy.belief-handoff-copy{position:fixed!important;top:0!important;bottom:0!important;left:0!important;right:0!important;height:100svh!important;display:grid!important;align-content:center!important;margin-inline:auto!important;z-index:5;pointer-events:none;} /* Mobile founder paragraphs share Home’s centered reading measure. */ @media(max-width:599px){ html body main:is(#top,#studio-page):is(#top,#studio-page):is(#top,#studio-page) #founder.founder.page-section .founder-copy>p:not(.eyebrow){width:98%!important;max-width:98%!important;margin-inline:auto!important;text-align:center!important;} } /* H2s fade in place; their authored glyphs are never clipped by masks. */ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(h2,h3,h4).h2-fade-title{overflow:visible!important;clip-path:none!important;contain:none!important;transform:none!important;translate:none!important;animation:none!important;transition:none!important;} html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(h2,h3,h4).h2-fade-title :is(.motion-line,.motion-line>span,.editorial-line-mask,.editorial-line-content,.title-word-mask,.title-word,.word-reveal-mask,.word-reveal-glyph){overflow:visible!important;clip-path:none!important;contain:none!important;transform:none!important;translate:none!important;animation:none!important;transition:none!important;} html body footer :is(h2,h3,h4).h2-fade-title,html body footer :is(h2,h3,h4).h2-fade-title :is(.footer-line-mask,.footer-fast-line,.footer-title-copy){overflow:visible!important;clip-path:none!important;transform:none!important;translate:none!important;animation:none!important;} /* H2 headings never use clipping masks; H1 mask rules remain untouched. */ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(h2,h3,h4).h2-fade-title,html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(h2,h3,h4).h2-fade-title :is(.motion-line,.editorial-line-mask,.title-word-mask,.word-reveal-mask){overflow:visible!important;clip-path:none!important;mask:none!important;-webkit-mask:none!important;contain:none!important;} html body footer :is(h2,h3,h4).h2-fade-title,html body footer :is(h2,h3,h4).h2-fade-title :is(.footer-line-mask,.title-word-mask,.word-reveal-mask){overflow:visible!important;clip-path:none!important;mask:none!important;-webkit-mask:none!important;contain:none!important;} /* H2 line surfaces remain opaque; only the complete heading fades. */ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(h2,h3,h4).h2-fade-title :is(.motion-line>span,.editorial-line-content,.title-word,.word-reveal-glyph){opacity:1!important;visibility:visible!important;transform:none!important;translate:none!important;animation:none!important;transition:none!important;overflow:visible!important;clip-path:none!important;} /* Services uses the same FAQ bottom margins as Contact. */ html body.editorial-page main.editorial-main.services-page section#services-faq.services-faq{ padding-bottom:0!important;margin-bottom:15rem!important; } @media(max-width:1100px){ html body.editorial-page main.editorial-main.services-page section#services-faq.services-faq{margin-bottom:9rem!important;} } @media(max-width:599px){ html body.editorial-page main.editorial-main.services-page section#services-faq.services-faq{margin-bottom:6rem!important;} } /* Section H2 paint survives both plain text and the shared fade wrappers. Keep solid titles on colored panels and service-support labels intentional. */ html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study) h2.h2-fade-title:not(:where(#approach *,.service-promise *,.services-mix *,.studio-thinking *,.case-statement *,.service-support *)):not(:has(.editorial-line-content,[data-gradient-line])), html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study) h2.h2-fade-title:not(:where(#approach *,.service-promise *,.services-mix *,.studio-thinking *,.case-statement *,.service-support *)) :is(.editorial-line-content,[data-gradient-line]){ background-image:var(--title-gradient)!important;background-size:100% 100%!important;background-position:0 0!important; background-clip:text!important;-webkit-background-clip:text!important; color:transparent!important;-webkit-text-fill-color:transparent!important; } html body main:is(#top,#main-content,#studio-page,.editorial-main,.case-study) h2.h2-fade-title :is(.editorial-line-content,[data-gradient-line]){ width:fit-content;max-width:100%; } /* Studio portrait H2s use the same per-line paint as How Good Ideas Take Shape. These spans only paint text; the existing whole-heading fade owns motion. */ @media(max-width:599px), (min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main#studio-page :is(h2#clients-title,h2#founder-title):has(>.studio-gradient-line){ background:none!important; } html body.editorial-page main#studio-page :is(h2#clients-title,h2#founder-title)>.studio-gradient-line{ display:inline-block;max-width:100%; background-image:var(--title-gradient)!important;background-size:100% 100%!important; background-position:0 0!important;background-clip:text!important;-webkit-background-clip:text!important; color:transparent!important;-webkit-text-fill-color:transparent!important; } } @media(max-width:599px){ html body.editorial-page main#studio-page>.founder-reading-stage{padding-top:2rem;} } /* Keep the Home services invitation compact on landscape tablets. */ @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape) and (pointer:coarse){ html body.home-page main#top #services.home-expertise .expertise-row:last-child{padding-bottom:2rem!important;} html body.home-page main#top #services .expertise-invitation{margin-top:2rem!important;} html body.home-page main#top>.panel-reading-track:has(>#approach){margin-top:7.5rem!important;} } /* October 15: restrained Home and Contact refinements for portrait tablets only. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.home-page main#top#top #work .work-slide-caption h3{font-size:1.75rem!important;line-height:1.25!important;} html body.home-page main#top #work #work-title{font-size:2.375rem!important;} html body.home-page main#top .why .why-grid{gap:1.125rem!important;} html body.home-page main#top #home-trust .home-trust-cards{width:86%;margin-inline:auto;} html body.editorial-page main.editorial-main.contact-page #contact-global-panel .contact-global-stats{width:84%!important;} html body.home-page main#top .stories-stack-section .story-panel figcaption>div>span{font-size:1.375rem!important;line-height:1.25!important;} html body.home-page main#top .stories-stack-section .story-panel .story-meta{font-size:.875rem!important;line-height:1.4!important;} html body.home-page main#top .stories-stack-section .story-panel .story-meta>span{font-size:inherit!important;} html body.home-page main#top>.founder-reading-stage{padding-top:2rem;} html body.home-page main#top #founder.founder.page-section .founder-copy>p:not(.eyebrow){font-size:min(1.5rem,calc((100vw - 96px) / 26))!important;white-space:nowrap!important;} html body.home-page main#top #founder .founder-copy-break{display:inline!important;} } /* Related case thumbnails use a smaller radius; body artwork keeps 16px. */ html body main#main-content#main-content#main-content#main-content.case-study .case-related .case-image{border-radius:var(--related-image-radius,8px)!important;clip-path:inset(0 round var(--related-image-radius,8px))!important;} /* Round each mobile composition, not the surrounding multi-image stack. */ @media(max-width:599px){ html body main#main-content#main-content#main-content#main-content.case-study .case-responsive-mobile.case-mobile-artwork{border-radius:0!important;clip-path:none!important;overflow:visible!important;} } /* Mobile subtitles share a viewport-based measure across different page containers. */ @media(max-width:599px){ html body:not(.home-page) main:is(#top,#main-content,#studio-page,.editorial-main,.case-study):is(#top,#main-content,#studio-page,.editorial-main,.case-study) :is(.editorial-intro .editorial-lead,.service-hero>p,.work-lead,.case-hero>p){ width:75vw!important;max-width:100%!important;min-width:0!important;margin-inline:auto!important;box-sizing:border-box!important;white-space:normal!important;text-wrap:wrap!important; } } /* Explore More thumbnails: portrait-tablet corner size. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body main.case-study .case-related{--related-image-radius:12px;} } /* Approved Figma sizes and case. Existing motion rules remain the owners. */ /* Arrow and underline share one travel distance and easing on every line CTA. */ html body main:is(#top,#main-content,.editorial-main) a:is(.line-link,.case-website-link) { --link-travel:8px;--link-timing:420ms cubic-bezier(.45,0,.2,1); position:relative;border-bottom:0!important; } html body main:is(#top,#main-content,.editorial-main) a:is(.line-link,.case-website-link)::after { content:'';position:absolute;left:0;right:0!important;bottom:0; width:auto!important;height:1px;background:#ff933c;transform:none!important; transition:right var(--link-timing)!important; } html body main:is(#top,#main-content,.editorial-main) a:is(.line-link,.case-website-link) img { transform:none!important;translate:0 0!important; transition:translate var(--link-timing)!important; } html body main:is(#top,#main-content,.editorial-main) a:is(.line-link,.case-website-link):is(:hover,:focus-visible)::after { right:calc(-1 * var(--link-travel))!important; } html body main:is(#top,#main-content,.editorial-main) a:is(.line-link,.case-website-link):is(:hover,:focus-visible) img { translate:var(--link-travel) 0!important; } @media(prefers-reduced-motion:reduce) { html body main:is(#top,#main-content,.editorial-main) a:is(.line-link,.case-website-link) {--link-travel:0px;} html body main:is(#top,#main-content,.editorial-main) a:is(.line-link,.case-website-link)::after, html body main:is(#top,#main-content,.editorial-main) a:is(.line-link,.case-website-link) img {transition:none!important;} } html body.home-page main#top .hero .hero-details .button.artocea-cta { font:700 var(--black-button-font-size,18px)/24px Helixa,sans-serif!important;letter-spacing:.1px!important; height:68px!important;min-height:68px!important;padding:0 24px 0 28px!important; } html body main#top a.line-link.line-link.line-link.line-link, html body main a.line-link.line-link.line-link.line-link { font:900 1.125rem/2rem Helixa,sans-serif!important;letter-spacing:0.045rem!important; text-transform:uppercase!important;width:max-content!important;max-width:100%!important; gap:0.75rem!important;padding-bottom:0.25rem!important; } html body main#top a.line-link.line-link.line-link.line-link span, html body main a.line-link.line-link.line-link.line-link span {font:inherit!important;letter-spacing:inherit!important;} html body main#top .founder-copy a.line-link.line-link.line-link.line-link, html body main .founder-copy a.line-link.line-link.line-link.line-link {gap:1rem!important;padding-bottom:0.5rem!important;} html body main#top a.line-link.line-link.line-link.line-link img, html body main a.line-link.line-link.line-link.line-link img {width:24px!important;height:24px!important;flex:0 0 24px!important;} html body main#top a.line-link.line-link.line-link.line-link::after, html body main a.line-link.line-link.line-link.line-link::after {height:1px;background:#ff933c;} /* Restore the source-3 mobile CTA dimensions, retaining the approved styling. */ @media(max-width:760px) { html body :is(a,button).artocea-cta.artocea-cta, html body.home-page main#top .hero .hero-details .button.artocea-cta { min-height:68px!important;height:68px!important;padding:0 24px 0 28px!important; } } @media(max-width:1023px) { html body :is(a,button).artocea-cta.artocea-cta, html body.home-page main#top .hero .hero-details .button.artocea-cta { padding-right:24px!important; } } /* Home and Studio line CTAs use the founder link as their shared size standard. */ body:is(.home-page,.editorial-page){--founder-link-size:1.125rem;--founder-link-leading:2rem;} @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ body:is(.home-page,.editorial-page){--founder-link-size:1rem;--founder-link-leading:1.75rem;} } @media(min-width:1200px) and (max-width:1365px) and (hover:hover) and (pointer:fine){ body:is(.home-page,.editorial-page){--founder-link-size:1rem;--founder-link-leading:1.75rem;} } html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) :is(#about,#home-trust,#founder,.why) :is(.intro-studio-link,.why-contact.work-contact,.founder-copy)>a.line-link.line-link.line-link.line-link img{flex:0 0 24px!important; } /* Anchor every line CTA underline to its text line, independent of legacy padding. */ html body main a:is(.line-link,.case-website-link)::after, html body main:is(#top,#main-content,.editorial-main) a:is(.line-link,.case-website-link)::after{ top:calc(1lh + 2px)!important; bottom:auto!important; height:1px!important; } /* Shared hero-sized arrows for filled buttons and line links on every page. */ html body :is(a,button):is(.artocea-cta,.line-link,.case-website-link)>img{ width:24px!important; height:24px!important; min-width:24px!important; max-width:24px!important; flex:0 0 24px!important; object-fit:contain; } /* Question-and-link invitations share a centered group at every viewport. Leave display untouched so existing mobile hiding rules still apply. */ html body main:is(#top,#main-content,.editorial-main,.studio-page) :is(.intro-studio-link.intro-studio-link.intro-studio-link,.work-contact.work-contact.work-contact){ margin-inline:auto!important; } /* Scale the large-desktop 24px question / 18px link together, without tablet overrides. */ html body{ --invitation-question-size:clamp(1.18125rem,calc(1.479167vw - 0.15rem),1.625rem); --invitation-link-size:clamp(0.84375rem,.9375vw,1.125rem); --invitation-arrow-size:clamp(1.18125rem,calc(1.0625vw + 0.225rem),1.5rem); } @media(min-width:600px){ html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.studio-page) :is(#about,#home-trust,#founder,#services,.why,.work-contact) :is(.intro-studio-link.intro-studio-link.intro-studio-link,.work-contact.work-contact.work-contact)>:is(span,p){ position:relative;top:-2px; } html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.studio-page) a.line-link.line-link.line-link.line-link.line-link.line-link.line-link.line-link{ font-size:var(--invitation-link-size)!important;line-height:1.333333!important;letter-spacing:.04em!important; padding:0!important;top:auto!important;align-self:center!important;align-items:center!important; } html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.studio-page) a.line-link.line-link.line-link.line-link.line-link.line-link.line-link.line-link::after{ top:auto!important;bottom:-.25em!important; } html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.studio-page) a.line-link.line-link.line-link.line-link.line-link.line-link.line-link.line-link img{ width:var(--invitation-arrow-size,var(--invitation-question-size))!important;height:var(--invitation-arrow-size,var(--invitation-question-size))!important;min-width:var(--invitation-arrow-size,var(--invitation-question-size))!important;max-width:var(--invitation-arrow-size,var(--invitation-question-size))!important;flex:0 0 var(--invitation-arrow-size,var(--invitation-question-size))!important; } html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.studio-page) :is(#about,#home-trust,#founder,#services,.why,.work-contact) a.line-link.line-link.line-link.line-link.line-link.line-link.line-link.line-link img{flex:0 0 var(--invitation-arrow-size,var(--invitation-question-size))!important; } } /* Home line links share the same underline position at every screen size. */ html body.home-page main#top a.line-link.line-link.line-link.line-link.line-link.line-link.line-link.line-link::after{ top:auto!important;bottom:calc(-.25em - 2px)!important; } /* Four pixels closer than the current shared gap on large desktops. */ @media(min-width:1600px){ } /* Hide invitations only on mobile; tablet and small desktop share the same group. */ @media(max-width:599px){ html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.studio-page) :is(#about,#home-trust,#services,.why,.work-contact) :is(.intro-studio-link.intro-studio-link.intro-studio-link.intro-studio-link.intro-studio-link,.work-contact.work-contact.work-contact.work-contact.work-contact){margin:0!important;padding:0!important; } } @media(min-width:600px) and (max-width:1599px){ } /* Slightly tighter compact invitation gap. */ @media(min-width:600px) and (max-width:1599px){ } /* Each word has its own mask; authored line containers keep their geometry. */ /* Preserve the display face through the new word wrappers. */ html body.home-page main#top #services.home-expertise .expertise-row h3, html body.home-page main#top #services.home-expertise .expertise-row h3 *, html body .services-page .services-detail-heading h2, html body .services-page .services-detail-heading h2 * { font-family:'GC Gudlak',sans-serif!important; } html body.home-page main#top #work .work-slider-toolbar, html body.home-page main#top #work .work-caption-layer {opacity:1!important;transform:none!important;} html body.home-page main#top #work .work-slide-caption :is(h3,p) { opacity:1!important;translate:none!important; } html body #site-mobile-menu nav.menu-social {padding-bottom:1.25rem!important;} html body #site-mobile-menu nav.menu-social a {font-weight:700!important;} @media(min-width:1024px){ html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) #founder.founder.page-section>.founder-photo { width:90%!important;max-width:none!important;align-self:end!important; } html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) #founder.founder.page-section>.founder-photo>img { width:100%!important;height:auto!important; } html body:is(.home-page,.editorial-page) main:is(#top,.studio-page) #founder.founder.page-section .founder-copy>p:not(.eyebrow) { line-height:1.25!important; } html body footer#contact.contact-panel .contact-details {padding-top:1rem!important;} } /* Every colored statement panel uses the same centered content alignment. */ html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement){ text-align:center!important; } html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2,h3,p,h2>span,.motion-line,.editorial-line-mask,.editorial-line-content,.title-word-mask,.title-word){ text-align:center!important; } html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) :is(h1,h2,h3,p){ margin-inline:auto!important; } /* Center the content boxes themselves, including case heading reveal wrappers. */ html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement)>:is(.editorial-container,.service-container,.case-statement-inner){ width:100%!important; max-width:100%!important; margin-inline:auto!important; box-sizing:border-box; } html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) h2{ width:100%!important; max-width:100%!important; margin-inline:auto!important; justify-self:center!important; } html body:is(.home-page,.editorial-page,.work-page) main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) h2 :is(.editorial-line-mask,.editorial-line-content,.motion-line){ width:100%!important; max-width:100%!important; margin-inline:auto!important; } /* Home-only adjustments approved October 1. Motion remains in its existing owners. */ html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title) .motion-line { font-size:inherit!important;line-height:inherit!important; } html body.home-page main#top #hero-statement #studio-title .scroll-letter { transition:color 120ms linear!important; } @media(prefers-reduced-motion:reduce) { html body.home-page main#top #hero-statement #studio-title .scroll-letter {transition:none!important;} } html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p { line-height:1.18!important; } html body.home-page main#top #about .intro-studio-link { margin-top:4rem!important; } html body.home-page main#top #why-title br {display:block!important;} html body.home-page main#top #work .work-slide { flex-basis:calc(var(--project-width) * .9)!important; } html body.home-page main#top #work .work-slide-image { width:100%!important;height:auto!important; } html body.home-page main#top #work .work-slider-toolbar {margin-top:1.25rem!important;} html body.home-page main#top #work .work-project-services {margin-block:0 0.375rem!important;} /* Keep the original sticky transitions, with shorter travel and no trailing hold. */ html body.home-page main#top #hero-statement.intro-scroll-enabled {height:220svh!important;} html body.home-page main#top .editorial-title-track.is-pinned-title {height:170svh!important;} html body.home-page main#top section.home-belief.belief-scroll-enabled {height:180svh!important;} html body.home-page main#top .why-cards-hold.is-active { height:calc(var(--cards-height,700px) + 24svh)!important; } html body.home-page main#top .has-scroll-stack .stories-layout { height:var(--story-track-height)!important; } @media(max-width:1023px){ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p {line-height:1.3!important;} html body.home-page main#top #about .intro-studio-link {margin-top:3.25rem!important;} html body.home-page main#top .editorial-title-track.is-pinned-title {height:140svh!important;} html body.home-page main#top section.home-belief.belief-scroll-enabled {height:140svh!important;} } /* Keep each question and its link on one shared responsive type scale. */ @media(max-width:760px) { } @media(max-width:760px) { html body.home-page main#top #hero-statement.intro-scroll-enabled .intro-scroll-stage { align-items:center!important;padding-block:0!important; } html body.home-page main#top #hero-statement.intro-scroll-enabled .hero-statement-inner { align-self:center!important;margin-block:0!important; } } html body.home-page main#top :is(#about,.why,#home-trust) :is(.intro-studio-link,.why-contact.work-contact) {margin-inline:auto!important;white-space:normal!important; } html body.home-page main#top :is(#about,.why,#home-trust) :is(.intro-studio-link,.why-contact.work-contact)>* { margin-inline:0!important;flex:0 1 auto!important; } html body.home-page main#top :is(#about,.why,#home-trust) :is(.intro-studio-link,.why-contact.work-contact)>:is(span,p) {margin-block:0!important; } html body.home-page main#top :is(#about,.why,#home-trust) :is(.intro-studio-link,.why-contact.work-contact)>a.line-link.line-link.line-link.line-link img {flex:0 0 24px!important; } @media(min-width:1024px) { html body.home-page main#top #about .intro-studio-link>a.line-link.line-link.line-link.line-link img {flex-basis:24px!important; } } /* Bring Case Studies closer to the outgoing introduction on every screen. */ html body.home-page main#top>section#work.work-slider-section.page-section { margin-top:0!important;padding-top:3rem!important; } @media(max-width:1023px){ html body.home-page main#top>section#work.work-slider-section.page-section {padding-top:2rem!important;} } /* Shorter handoffs into the requested card groups. */ html body.home-page main#top #work .work-scroll {margin-top:2.5rem!important;} @media(prefers-reduced-motion:no-preference){ html body.home-page main#top .why .editorial-title-track.is-pinned-title + .why-cards-hold { margin-top:-12svh!important; } } @media(max-width:1023px){ html body.home-page main#top #work .work-scroll {margin-top:1.75rem!important;} } /* Remove extra section padding around the post-testimonial paragraph. */ html body.home-page main#top>section.home-belief.page-section, html body.home-page main#top>section#clients.clients.page-section { margin-top:0!important;padding-top:2rem!important;padding-bottom:0!important; } @media(prefers-reduced-motion:no-preference){ html body.home-page main#top>section.home-belief.belief-scroll-enabled { height:140svh!important;min-height:0!important; } } /* Keep Home paragraph wrapping natural and avoid isolated final words. */ html body.home-page main#top p { text-wrap:pretty!important;word-break:normal!important;overflow-wrap:normal!important; } /* Shorter native-scroll reading tracks, consistent across screen sizes. */ @media(prefers-reduced-motion:no-preference){ html body.home-page main#top #hero-statement.intro-scroll-enabled { height:190svh!important;min-height:190svh!important; } html body.home-page main#top .editorial-title-track.is-pinned-title {height:140svh!important;} html body.home-page main#top .why-cards-hold.is-active {height:calc(var(--cards-height,700px) + 12svh)!important;} } /* Mobile/tablet Home: closer handoffs with the desktop hero-cover treatment. */ @media(max-width:1023px){ html body.home-page main#top .why .why-contact.work-contact {margin-bottom:4rem!important; } html body.home-page main#top>section#work.work-slider-section.page-section {padding-top:1rem!important;padding-bottom:0!important;} html body.home-page main#top>section#work + section {padding-top:3rem!important;} html body.home-page main#top .testimonials .stories-layout {margin-top:-10svh!important;} html body.home-page main#top>section#clients.clients.page-section {padding-top:1rem!important;margin-top:0!important;} } @media(max-width:1023px){ html body.home-page main#top .hero .hero-details .button.artocea-cta { padding:0 24px 0 28px!important; } html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p { font-size:1.375rem!important;line-height:1.3!important; } } @media(max-width:1023px) and (prefers-reduced-motion:no-preference){ html body.home-page main#top .hero-scroll {position:relative!important;height:auto!important;overflow:visible!important;} html body.home-page main#top .hero-scroll>.hero {position:sticky!important;top:0!important;} html body.home-page main#top #hero-statement {position:relative!important;z-index:5;background:#201e1c!important;} html body.home-page main#top #hero-statement.intro-scroll-enabled {height:175svh!important;min-height:175svh!important;} html body.home-page main#top .editorial-title-track.is-pinned-title {height:125svh!important;} html body.home-page main#top>section.home-belief.belief-scroll-enabled {height:125svh!important;} } @media(prefers-reduced-motion:reduce){ html body.home-page main#top .testimonials .stories-layout {margin-top:0!important;} } /* Matching mobile/tablet invitation spacing, including the underline offset. */ @media(max-width:1023px){ html body.home-page main#top :is(#about,.why,#home-trust) :is(.intro-studio-link,.why-contact.work-contact)>a.line-link.line-link.line-link.line-link {margin-top:0!important; } html body.home-page main#top :is(#about,.why,#home-trust) :is(.intro-studio-link,.why-contact.work-contact) {margin-bottom:4rem!important; } } /* Compact layouts use content height here rather than empty viewport-sized tracks. */ @media(max-width:1023px){ html body.home-page main#top>section.testimonials.stories-stack-section {padding-top:3rem!important;margin-top:0!important;} html body.home-page main#top>section.home-belief.belief-scroll-enabled { height:auto!important;min-height:0!important;padding-top:2.5rem!important;padding-bottom:0!important; } html body.home-page main#top .home-belief .belief-scroll-stage { position:relative!important;top:auto!important;height:auto!important;min-height:0!important; } html body.home-page main#top>section#clients.clients.page-section {padding-top:2.5rem!important;} } /* Stories shares Human Thinking's compact pinned-title handoff. */ @media(max-width:1023px) and (prefers-reduced-motion:no-preference){ html body.home-page main#top .testimonials .editorial-title-track.is-pinned-title { height:125svh!important;min-height:0!important;margin-block:0!important;padding-block:0!important; } html body.home-page main#top .testimonials .editorial-title-track.is-pinned-title .stories-heading { position:sticky!important;top:0!important;height:100svh!important;min-height:0!important; display:grid!important;place-items:center!important; } html body.home-page main#top .testimonials .stories-layout {margin-top:-12svh!important;} } /* Hide both Home question-and-link groups on mobile and tablet. */ @media(max-width:1023px){ html body.home-page main#top #about .intro-studio-link.intro-studio-link.intro-studio-link, html body.home-page main#top .why .why-contact.work-contact {margin:0!important;padding:0!important; } } @media(max-width:1023px){ html body.home-page main#top :is(#about,.why,#home-trust) :is(.intro-studio-link,.why-contact.work-contact) {margin:0!important;padding:0!important; } } /* Second Home paragraph: desktop-style full-screen reading hold on touch layouts. */ @media(max-width:1023px) and (prefers-reduced-motion:no-preference){ html body.home-page main#top>section.home-belief.belief-scroll-enabled { height:140svh!important;min-height:140svh!important;padding-block:0!important; } html body.home-page main#top .home-belief.belief-scroll-enabled .belief-scroll-stage { position:sticky!important;top:0!important;height:100svh!important;min-height:100svh!important; display:grid!important;place-items:center!important;padding:0!important; } } /* Requested mobile breathing room and four-line tablet paragraphs. */ @media(max-width:599px){ html body.home-page main#top>section#services.home-expertise.page-section {padding-top:5.5rem!important;} } @media(min-width:600px) and (max-width:1023px){ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p { font-size:clamp(1.5rem,3.6vw,2.25rem)!important;line-height:1.4!important; width:100%!important;max-width:100%!important;text-align:center!important; } html body.home-page main#top #about #studio-title .intro-line-break {display:inline!important;} html body.home-page main#top #about #studio-title .intro-line-break br {display:block!important;} html body.home-page main#top section.home-belief.page-section p[data-scroll-copy]>span { display:block!important;white-space:nowrap!important; } } /* Hide both Home question/CTA groups on tablets, including landscape touch screens. */ @media(max-width:1100px), (max-width:1366px) and (pointer:coarse){ html body.home-page main#top :is(.intro-studio-link,.why-contact.work-contact){margin:0!important;padding:0!important;} } /* 1440px desktop review: smaller CTA labels, with existing arrow/line detailing. */ @media(min-width:1366px) and (max-width:1599px){ } /* Tablet landscape Home CTA rhythm. */ @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape){ html body.home-page main#top .why .why-contact.work-contact{margin-top:3rem!important;padding:0!important;} html body.home-page main#top a.line-link.line-link.line-link.line-link, html body.home-page main#top .founder-copy a.line-link.line-link.line-link.line-link{font-size:1rem!important;line-height:1.75rem!important;letter-spacing:0.04rem!important;gap:1rem!important;padding-bottom:0.5rem!important;} html body.home-page :is(a,button).artocea-cta.artocea-cta, html body.home-page main#top .hero .hero-details .button.artocea-cta{font:700 var(--black-button-font-size,18px)/24px Helixa,sans-serif!important;letter-spacing:.1px!important;min-height:68px!important;height:68px!important;padding:0 24px 0 28px!important;} } @media(max-width:599px){ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p{font-size:1.5rem!important;line-height:1.3!important;} } @media(max-width:599px){html body.home-page main#top #studio-title .intro-mobile-first-phrase{white-space:nowrap!important;}} .home-mobile-copy-break{display:none!important;} @media(max-width:599px){ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p{width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px)!important;text-align:center!important;} html body.home-page main#top .home-mobile-copy-break{display:block!important;} html body.home-page main#top #about #studio-title .intro-line-break{display:none!important;} html body.home-page main#top section.home-belief.page-section p[data-scroll-copy]>span{display:inline!important;white-space:normal!important;} } /* Center widened mobile copy within its narrower section containers. */ @media(max-width:599px){ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p{margin-left:calc(50% - 50vw + 1rem)!important;margin-right:0!important;} } @media(max-width:599px){ html body.home-page main#top .testimonials.stories-stack-section .stories-layout{width:calc(100vw - 32px)!important;max-width:none!important;margin-left:calc(50% - 50vw + 1rem)!important;margin-right:0!important;padding-inline:0!important;box-sizing:border-box;} html body.home-page main#top .testimonials.stories-stack-section .stories-layout .stories-stage{width:100%!important;max-width:none!important;margin-inline:0!important;box-sizing:border-box;} html body.home-page main#top .testimonials.stories-stack-section .stories-stage .story-panel{width:100%!important;margin-inline:0!important;box-sizing:border-box;} } @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.home-page main#top #approach.philosophy{padding-block:5.5rem!important;} html body.home-page main#top #approach.philosophy .philosophy-description{width:80%!important;max-width:80%!important;} } html body.home-page main#top #approach.philosophy .philosophy-description{width:80%!important;max-width:80%!important;white-space:normal!important;} @media(min-width:1200px) and (max-width:1365px) and (hover:hover) and (pointer:fine){ html body.home-page main#top .hero .hero-details{gap:1.25rem!important;} html body.home-page main#top .hero .hero-details .hero-intro{margin-block:0!important;padding-block:0!important;line-height:1.3!important;} html body.home-page main#top .hero .hero-details .button.artocea-cta{min-height:68px!important;height:68px!important;padding:0 24px 0 28px!important;margin-top:0!important;} } @media(min-width:1200px) and (max-width:1365px) and (hover:hover) and (pointer:fine){ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p{font-size:calc(clamp(2.1rem,3.666667vw,3.3rem) - 0.125rem)!important;} } /* Mobile review: centered copy, clearer title rhythm and section spacing. */ @media(max-width:599px){ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p{position:relative!important;left:50%!important;justify-self:start!important;box-sizing:border-box!important;width:calc(100vw - 32px)!important;max-width:none!important;margin-left:calc(1rem - 50vw)!important;margin-right:0!important;text-align:center!important;} html body.home-page main#top>section#services.home-expertise.page-section{padding-top:11rem!important;} html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title){line-height:calc(1.111111em + 0.25rem)!important;} html body.home-page main#top :is(#statement-title,#why-title,#testimonials-title) :is(.motion-line,.title-word-mask,.title-word){line-height:inherit!important;} html body.home-page main#top>section#work + section{padding-top:2rem!important;} } /* Halve the Case Studies handoff on landscape tablets. */ @media(min-width:1024px) and (max-width:1366px) and (orientation:landscape) and (pointer:coarse){ html body.home-page main#top>section#work.work-slider-section.page-section{padding-bottom:0!important;margin-bottom:0!important;} html body.home-page main#top>section#work + section{padding-top:7.5rem!important;} } /* Repair mobile paragraph overflow without translating the reading surfaces. */ @media(max-width:599px){ html{overflow-x:clip!important;} html body.home-page{overflow-x:clip!important;} html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p{position:relative!important;left:auto!important;right:auto!important;justify-self:center!important;width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:0!important;box-sizing:border-box!important;text-align:center!important;} html body.home-page main#top section.home-belief.page-section{width:calc(100% - 32px)!important;margin-inline:1rem!important;padding-inline:0!important;box-sizing:border-box!important;} html body.home-page main#top section.home-belief.page-section :is(.belief-scroll-stage,.belief-scroll-copy){width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:0!important;padding-inline:0!important;box-sizing:border-box!important;} html body.home-page main#top #hero-statement #about{max-width:100%!important;min-width:0!important;box-sizing:border-box!important;} html body.home-page .intro-mouse-cue.is-active, html body .inner-hero-scroll-cue{left:50%!important;right:auto!important;transform:translateX(-50%)!important;} } /* Mobile section labels: four pixels smaller than their existing scales. */ @media(max-width:599px){ html body.home-page main#top .clients h2#clients-title{font-size:calc(clamp(1.875rem,5.4vw,3.375rem) - 0.25rem)!important;} html body.home-page main#top :is(#services h2#services-title,#work h2#work-title){font-size:2.75rem!important;} html body.home-page main#top :is(#clients-title,#services-title,#work-title) :is(.motion-line,.title-word-mask,.title-word){font-size:inherit!important;} } /* Let the two desktop copy lines use the available card text column. */ @media(min-width:1101px) and (hover:hover) and (pointer:fine){ html body.home-page main#top .why-grid .why-copy p{max-width:none;width:100%;} html body.home-page main#top .why-grid .why-copy p .why-desktop-copy-line{display:block;white-space:nowrap;} } /* Third intro stage: Figma 487:673, sharing the paragraph's centre. */ html body.home-page main#top #home-trust{width:min(1020px,calc(100% - 96px));margin:6.25rem auto;text-align:center;box-sizing:border-box} html body.home-page main#top #home-trust-title{margin:0 0 4rem} html body.home-page main#top #home-trust .home-trust-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.875rem;text-align:left} html body.home-page main#top #home-trust article{background:#e9c79e;border-radius:16px;padding:1.5rem 2rem;color:#393025;min-width:0} html body.home-page main#top #home-trust article strong{display:block;font:500 3rem/1 'GC Gudlak',sans-serif;color:#201e1c;margin-bottom:0.75rem} html body.home-page main#top #home-trust article strong span{font-weight:300} html body.home-page main#top #home-trust article>span{font:400 1.125rem/1.5rem Helixa,sans-serif} html body.home-page main#top #home-trust .intro-studio-link{margin-top:3rem} html body.home-page main#top #home-trust .line-link{text-transform:uppercase;font-size:1.125rem} @media(prefers-reduced-motion:no-preference){ html body.home-page main#top #hero-statement.intro-scroll-enabled{height:300svh!important;min-height:300svh!important} html body.home-page main#top #hero-statement.intro-scroll-enabled #home-trust{grid-area:1/1;position:relative;margin:0 auto!important;opacity:0} } @media(max-width:767px){ html body.home-page main#top #home-trust{width:calc(100% - 48px)} html body.home-page main#top #home-trust-title{margin-bottom:1.75rem} html body.home-page main#top #home-trust .home-trust-cards{gap:0.75rem} html body.home-page main#top #home-trust article{padding:1.25rem 1rem} html body.home-page main#top #home-trust article strong{font-size:2.25rem} html body.home-page main#top #home-trust article>span{font-size:0.875rem;line-height:1.25rem} html body.home-page main#top #home-trust .intro-studio-link{margin-top:1.75rem} } @media(max-width:599px){ html body.home-page main#top #home-trust .home-trust-cards{grid-template-columns:1fr;gap:0.625rem} html body.home-page main#top #home-trust article{display:flex;align-items:center;gap:1.25rem;padding:1rem 1.25rem} html body.home-page main#top #home-trust article strong{min-width:90px;margin-bottom:0} } @media(max-height:650px) and (min-width:600px){html body.home-page main#top #home-trust-title{margin-bottom:1.5rem}html body.home-page main#top #home-trust .intro-studio-link{margin-top:1.5rem}} /* Contact's stats-card treatment, within Home's existing 1020px stage. */ html body.home-page main#top #home-trust .home-trust-cards{gap:2rem} html body.home-page main#top #home-trust article{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:144px;padding:1.5rem 2rem;gap:0.5rem;box-sizing:border-box} html body.home-page main#top #home-trust article strong{font-size:3rem;line-height:3rem;letter-spacing:.02em;margin:0;min-width:0;flex-shrink:0} html body.home-page main#top #home-trust article>span{font-size:1.25rem;line-height:1.5rem} @media(min-width:1800px){ html body.home-page main#top #home-trust article{padding:2rem 2.5rem;gap:0.75rem;min-height:168px} html body.home-page main#top #home-trust article strong{font-size:3.375rem;line-height:3.75rem;position:relative;top:4px} html body.home-page main#top #home-trust article>span{font-size:1.375rem;line-height:1.875rem} } @media(min-width:600px) and (max-width:1100px){ html body.home-page main#top #home-trust .home-trust-cards{grid-template-columns:1fr;gap:1rem} html body.home-page main#top #home-trust article{flex-direction:row;align-items:center;justify-content:space-between;min-height:112px;padding:2rem;gap:1.5rem} html body.home-page main#top #home-trust article strong{font-size:2.5rem;line-height:3rem} html body.home-page main#top #home-trust article>span{text-align:right} } @media(max-width:599px){ html body.home-page main#top #home-trust .home-trust-cards{gap:0.75rem} html body.home-page main#top #home-trust article{flex-direction:row;align-items:center;justify-content:space-between;min-height:88px;padding:1.25rem 1.5rem;gap:0.75rem} html body.home-page main#top #home-trust article strong{font-size:2rem;line-height:3rem} html body.home-page main#top #home-trust article>span{font-size:1rem;line-height:1.5rem;text-align:right;max-width:191px} } html body.home-page main#top #services .expertise-rows{margin-top:2.5rem} @media(max-width:599px){html body.home-page main#top #services .expertise-rows{margin-top:2rem}} /* Shared stat glyphs: prevent body-font overrides from changing Home numerals. */ html body.home-page main#top #home-trust article strong, html body.home-page main#top #home-trust article strong .stat-value, html body.home-page main#top #home-trust article strong .stat-plus{ font-family:'GC Gudlak',sans-serif!important;font-style:normal!important;font-synthesis:none; font-weight:500!important;letter-spacing:.02em!important; } html body.home-page main#top #home-trust article strong .stat-value, html body.home-page main#top #home-trust article strong .stat-plus{font-size:inherit!important;line-height:inherit!important} html body.home-page main#top #home-trust article strong .stat-plus{font-weight:300!important} @media(max-width:599px){ html body.home-page main#top .hero .hero-details p.hero-intro{width:100%!important;max-width:289px!important;margin-inline:auto!important;text-align:center!important} html body.home-page main#top .hero .hero-details p.hero-intro *{text-align:inherit!important} } /* Give tablet and smaller desktop stats enough room for unbroken labels. */ @media(min-width:600px) and (max-width:1599px){ html body.home-page main#top #home-trust{width:min(1200px,calc(100% - 64px))} html body.home-page main#top #home-trust article>span{max-width:none;white-space:nowrap} } @media(min-width:1101px) and (max-width:1599px){ html body.home-page main#top #home-trust .home-trust-cards{gap:1.5rem} html body.home-page main#top #home-trust article{padding-inline:1.5rem} } .hero-mobile-copy-break{display:none} @media(max-width:599px){ html body.home-page main#top .hero .hero-details{left:24px!important;right:24px!important;top:clamp(110px,18.5svh,150px)!important;width:auto!important;max-width:none!important;align-items:center!important;gap:1.75rem!important;text-align:center!important} html body.home-page main#top .hero .hero-details p.hero-intro{max-width:340px!important;font-size:clamp(1.25rem,5.97vw,1.5rem)!important;line-height:1.333333!important;letter-spacing:-.01em!important;text-wrap:initial!important} html body.home-page main#top .hero .hero-details .hero-mobile-copy-break{display:block} html body.home-page main#top .hero .hero-details .button.artocea-cta{font:700 var(--black-button-font-size,18px)/24px Helixa,sans-serif!important;letter-spacing:.1px!important;text-transform:none!important;white-space:nowrap!important;text-wrap:nowrap!important;flex-wrap:nowrap!important;min-width:max-content!important;min-height:68px!important;height:68px!important;padding:0 24px 0 28px!important;width:247px!important;max-width:100%!important;margin-inline:auto!important;justify-content:space-between!important;gap:1rem!important;border-radius:12px!important} html body.home-page main#top .hero .hero-details .button.artocea-cta img{width:24px!important;height:24px!important;flex:0 0 24px!important} } .trust-mobile-break{display:none} @media(max-width:599px){.trust-mobile-break{display:block}} /* Desktop Home statement: 20% narrower than the shared 80% copy measure. */ @media(min-width:1101px){ html body.home-page main#top #approach.philosophy .philosophy-description{ width:64%!important; max-width:64%!important; } } /* Desktop case-study cards: 90% of their previous displayed width. */ @media(min-width:1101px){ html body.home-page main#top #work .work-slide{ flex-basis:calc(var(--project-width) * .81)!important; } } /* Captions share the section heading edge; the slider aligns itself to that heading. */ @media(min-width:1101px){ html body.home-page main#top #work .work-slider-toolbar{ width:calc((100vw - 2 * var(--section-gutter,8.333333vw)) * .81)!important; max-width:none!important; margin-inline:0!important; } } /* Keep every slider image corner consistent across responsive breakpoints. */ html body.home-page main#top #work :is(.work-slide,.work-slide-image,.work-slide-image picture,.work-slide-image img){ border-radius:16px!important; clip-path:inset(0 round 16px)!important; } /* Tablet: keep the invitation clear of the stats cards. */ @media(min-width:600px) and (max-width:1100px){ html body.home-page main#top #home-trust .intro-studio-link.intro-studio-link{ margin-top:2.5rem!important; margin-bottom:0!important; padding:0!important; } } /* Stories heading stays centered across the page at every viewport. */ html body.home-page main#top .testimonials.stories-stack-section .stories-heading{ width:100%!important; max-width:none!important; margin-inline:auto!important; justify-content:center!important; justify-items:center!important; align-items:center!important; text-align:center!important; } html body.home-page main#top .testimonials.stories-stack-section #testimonials-title, html body.home-page main#top .testimonials.stories-stack-section #testimonials-title :is(span,.motion-line,.title-word-mask,.title-word){ text-align:center!important; margin-inline:auto!important; } /* Keep the stats invitation centered with the shared text baseline. */ html body.home-page main#top #home-trust .intro-studio-link.intro-studio-link{ margin-inline:auto!important; } @media(max-width:599px){ html body.home-page main#top #home-trust .intro-studio-link.intro-studio-link{ margin:0!important; padding:0!important; } } /* October 6 tablet review: shared copy rhythm and inline invitations. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.home-page main#top #about #studio-title.studio-description, html body.home-page main#top section.home-belief.page-section p{ font-size:clamp(1.5rem,3.6vw,2.25rem)!important;line-height:1.4!important; } html body.home-page main#top section.home-belief.page-section p[data-scroll-copy]>span{white-space:normal!important;} html body.home-page main#top #approach.philosophy .philosophy-description{font-size:1.25rem!important;line-height:1.5!important;} html body.home-page main#top :is(#about,.why,#home-trust) :is(.intro-studio-link,.why-contact.work-contact){margin-top:2.5rem!important; } } @media(min-width:900px) and (max-width:1366px) and (orientation:landscape) and (pointer:coarse){ html body.home-page main#top #home-trust .intro-studio-link.intro-studio-link{margin-top:2.5rem!important;margin-bottom:2.5rem!important;} } /* Explicit round corners prevent inherited squircle styling on touch devices. */ html body.home-page main#top #work :is(.work-slide,.work-slide-image,.work-slide-image picture,.work-slide-image img){ border-radius:16px!important;corner-shape:round!important;clip-path:inset(0 round 16px)!important; } /* Portrait invitations use the existing landscape type and spacing. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.home-page main#top :is(#about,.why,#home-trust) :is(.intro-studio-link.intro-studio-link.intro-studio-link,.why-contact.work-contact.work-contact){position:static!important;margin:3rem auto 0!important;padding:0!important; } } /* Twenty percent less space around Home's large reading paragraph. */ html body.home-page main#top section.home-belief.page-section{padding-block:4rem!important;} @media(min-width:600px) and (max-width:1023px){html body.home-page main#top section.home-belief.page-section{padding-block:8rem 0!important;}} @media(max-width:599px){html body.home-page main#top section.home-belief.page-section{padding-block:6rem 0!important;}} /* One mobile scale for section headings across the site. */ @media(max-width:599px){ html body main:is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main) :is(h2#clients-title,h2#services-title,h2#work-title,h2#founder-title,h2#testimonials-title,h2#services-faq-title,.case-story>h2,.case-related>h2,.founder-copy>h2,.editorial-split>h2,.contact-reach>h2,.privacy-copy h2,h2#contact-faq-title,.services-detail-heading>h2,h2.editorial-title:not(:is(.services-mix,.service-promise,.studio-thinking,.case-statement,.studio-process,.studio-years,.contact-work) h2)), html body.home-page main#top :is(#services h2#services-title,#work h2#work-title){ font-size:1.875rem!important;line-height:1.25!important; height:auto!important;min-width:0!important;max-width:100%!important; white-space:normal!important;overflow-wrap:break-word;overflow:visible; } html body main:is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main) :is(h2#clients-title,h2#services-title,h2#work-title,h2#founder-title,h2#testimonials-title,h2#services-faq-title,.case-story>h2,.case-related>h2,.founder-copy>h2,.editorial-split>h2,.contact-reach>h2,.privacy-copy h2,h2#contact-faq-title,.services-detail-heading>h2,h2.editorial-title:not(:is(.services-mix,.service-promise,.studio-thinking,.case-statement,.studio-process,.studio-years,.contact-work) h2)) :is(span,.motion-line,.editorial-line-mask,.editorial-line-content,.title-word-mask,.title-word){ font-size:inherit!important;line-height:inherit!important;max-width:100%!important; white-space:normal!important;overflow-wrap:break-word; } /* Give animated glyphs breathing room within their reveal masks. */ html body main:is(#top,#main-content,.editorial-main):is(#top,#main-content,.editorial-main) h2 :is(.motion-line,.editorial-line-mask){padding-block:.14em;margin-block:-.14em;} } /* Keep the authored Contact sentence break at every viewport. */ html body main.contact-page .contact-intro .editorial-lead>.contact-copy-line{display:block!important;max-width:100%;font:inherit;letter-spacing:inherit;white-space:normal;} /* Shared description measure for colored statement panels. */ html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{ width:60%!important;max-width:60%!important;white-space:normal!important; } @media(max-width:1100px),(hover:none) and (pointer:coarse){ html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{ width:80%!important;max-width:80%!important; } } /* These three display headings share the mobile inner-hero H1 scale. */ @media(max-width:599px){ html body.editorial-page main:is(#top,#main-content,.editorial-main) :is(.studio-process,.studio-years,.contact-work) h2.editorial-title{ font-size:clamp(2rem,10.5vw,2.75rem)!important;line-height:1.1111111111!important; } html body.editorial-page main:is(#top,#main-content,.editorial-main) :is(.studio-process,.studio-years,.contact-work) h2.editorial-title :is(span,.editorial-line-mask,.editorial-line-content){ font-size:inherit!important;line-height:inherit!important; } } /* Work mobile footer gap: 120px -> 60px. */ @media(max-width:599px){html body.work-page{--footer-section-gap:3.75rem;}} @media(max-width:599px){ html body.home-page main#top .stories-stack-section .stories-stage .story-panel blockquote{ font-size:1.375rem!important;line-height:1.4!important;width:90%!important;max-width:90%!important; } html body :is(#top,.studio-page) #founder .founder-photo figcaption{ right:12px!important;bottom:calc(7% + 12px)!important; } html body #founder .founder-photo figcaption>small{font-size:0.8125rem!important;} } /* A wider reading measure for colored panels on phones only. */ @media(max-width:599px){ html body main:is(#top,#main-content,.editorial-main,.case-study) :is(#approach.philosophy,.studio-thinking,.services-mix,.service-promise,.case-statement) p{ width:90%!important;max-width:90%!important; } } /* Three times the original related-cases/footer gap, owned by the case main. */ html body.editorial-page:has(main.case-study){--case-footer-space:12rem;} html body.editorial-page main#main-content.case-study{padding-bottom:var(--case-footer-space)!important;margin-bottom:0!important;} html body.editorial-page main#main-content.case-study>.case-related{padding-bottom:0!important;margin-bottom:0!important;} @media(min-width:600px) and (max-width:1100px){ html body.editorial-page:has(main.case-study){--case-footer-space:9rem;} } @media(max-width:599px){ html body.editorial-page:has(main.case-study){--case-footer-space:6rem;} html body.editorial-page:has(main:is(.services-page,.contact-page)){--footer-section-gap:3rem;} html body.work-page{--footer-section-gap:1.875rem;} html body.editorial-page main.editorial-main:is(.services-page,.contact-page){padding-bottom:0!important;margin-bottom:0!important;} html body.work-page main#top #work.work-showcase{padding-bottom:0!important;margin-bottom:0!important;} } html body.editorial-page:has(main.case-study) .panel-reading-track:has(>footer#contact.contact-panel), html body.editorial-page:has(main.case-study)>footer#contact.contact-panel{margin-top:var(--footer-section-gap)!important;} html body.editorial-page:has(main.case-study) .panel-reading-track>footer#contact.contact-panel{margin-top:0!important;} html body.editorial-page:has(main.case-study) .panel-reading-track:has(>footer#contact.contact-panel), html body.editorial-page:has(main.case-study) footer#contact.contact-panel{margin-top:0!important;} html body main:is(#main-content,#top,main):is(#main-content,#top,main) .inner-layout-hero>.page-hero-badge{ display:table!important;position:static!important;width:auto!important;max-width:100%!important;box-sizing:border-box; margin:0 0 2.25rem!important;padding:0.5rem 0.75rem!important;border-radius:12px;background:#FF933C;color:#201E1C; font:900 1rem/1.125rem Helixa,sans-serif;letter-spacing:0.04rem;text-transform:uppercase;text-align:center!important; } @supports(corner-shape:squircle){html body main .page-hero-badge{corner-shape:squircle;}} @media(max-width:1100px), (hover:none) and (pointer:coarse){ html body main:is(#main-content,#top,main):is(#main-content,#top,main) .inner-layout-hero>.page-hero-badge{margin:0 auto 2rem!important;font-size:0.875rem;letter-spacing:0.035rem;border-radius:10px;} } @media(max-width:599px){html body main:is(#main-content,#top,main):is(#main-content,#top,main) .inner-layout-hero>.page-hero-badge{margin-bottom:1.75rem!important;font-size:0.75rem;letter-spacing:0.03rem;}} @media(prefers-reduced-motion:no-preference){ html body:has(>.inner-page-curtain[data-images-ready="false"]) .page-hero-badge{opacity:0;} html body:has(>.inner-page-curtain[data-images-ready="true"]) .page-hero-badge{animation:page-badge-enter 480ms cubic-bezier(.22,1,.36,1) both;} } @keyframes page-badge-enter{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} /* Work cards remain left aligned independently of the centered hero. */ html body.work-page main#top #work.work-showcase .projects, html body.work-page main#top #work.work-showcase .projects :is(.work-caption,.project-capabilities){text-align:left!important;} @media(max-width:599px){ html body main:is(#main-content,#top,main):is(#main-content,#top,main) :is(.page-hero-badge,.case-hero-badge){font-size:0.75rem!important;line-height:1.125rem!important;letter-spacing:0.03rem!important;} } /* Tablet Work gallery: equal outer gutters and full-width cards. */ @media(min-width:600px) and (max-width:1100px){ html body.work-page main#top #work.work-showcase{width:calc(100% - 96px)!important;max-width:none!important;margin-inline:auto!important;padding-inline:0!important;box-sizing:border-box!important;} html body.work-page main#top #work.work-showcase>.projects{width:100%!important;max-width:none!important;margin-inline:0!important;padding-inline:0!important;box-sizing:border-box!important;} html body.work-page main#top #work.work-showcase .work-item{width:100%!important;max-width:none!important;margin-inline:0!important;justify-self:stretch!important;} html body.work-page main#top #work.work-showcase .work-item>.project{width:100%!important;max-width:none!important;margin-inline:0!important;box-sizing:border-box!important;} } /* Labels must never stretch to fill a grid row or flex column. */ html body main:is(#main-content,#top,main):is(#main-content,#top,main) .inner-layout-hero>.page-hero-badge{width:fit-content!important;justify-self:start!important;align-self:flex-start!important;flex:none!important;} @media(max-width:1100px), (hover:none) and (pointer:coarse){ html body main:is(#main-content,#top,main):is(#main-content,#top,main) .inner-layout-hero>.page-hero-badge{align-self:center!important;justify-self:center!important;} } /* Desktop badge-to-title gap. Touch layouts retain their existing spacing. */ @media(min-width:1101px) and (hover:hover) and (pointer:fine){ html body main:is(#main-content,#top,main):is(#main-content,#top,main):is(#main-content,#top,main) :is(.case-hero,.inner-layout-hero)>:is(.page-hero-badge,.case-hero-badge){margin-bottom:1.75rem!important;} } /* Final badge sizing across page and case-study heroes. */ @media(min-width:600px){ html body main:is(#main-content,#top,main):is(#main-content,#top,main):is(#main-content,#top,main) :is(.page-hero-badge,.case-hero-badge){font-size:0.875rem!important;line-height:1.125rem!important;letter-spacing:0.035rem!important;} } @media(max-width:599px){ html body main:is(#main-content,#top,main):is(#main-content,#top,main):is(#main-content,#top,main) :is(.page-hero-badge,.case-hero-badge){padding:0.375rem 0.625rem!important;} } /* Extra breathing room between case badges and titles on large desktops. */ @media(min-width:1600px) and (hover:hover) and (pointer:fine){ html body main:is(#main-content,#top,main):is(#main-content,#top,main):is(#main-content,#top,main) .case-hero>.case-hero-badge{margin-bottom:2.75rem!important;} } /* Home's approved reading typography, shared by Studio and Contact. */ html body{--large-reading-size:2.25rem;--large-reading-leading:1.3;} @media(min-width:1101px){html body{--large-reading-size:clamp(2.1rem,calc(2.5vw + .262rem),calc(3.96rem * .95 - 8px));--large-reading-leading:1.25;}} @media(min-width:1200px) and (max-width:1365px) and (hover:hover) and (pointer:fine){html body{--large-reading-size:calc(clamp(2.1rem,calc(2.5vw + .262rem),calc(3.96rem * .95 - 8px)) - 0.125rem);}} @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){html body{--large-reading-size:clamp(1.5rem,3.6vw,2.25rem);--large-reading-leading:1.4;}} @media(max-width:599px){html body{--large-reading-size:1.5rem;}} html body.home-page main#top section.home-belief.page-section p, html body.home-page main#top #about #studio-title.studio-description, html body.editorial-page main.editorial-main.studio-page section.studio-belief p, html body.editorial-page main.editorial-main.contact-page section.contact-conversation>p{ font-family:Helixa,sans-serif!important;font-weight:400!important; font-size:var(--large-reading-size)!important;line-height:var(--large-reading-leading)!important;letter-spacing:0!important; } /* Authored line spans and animated letters must inherit the paragraph metrics. */ html body.home-page main#top section.home-belief.page-section p *, html body.home-page main#top #about #studio-title.studio-description *, html body.editorial-page main.editorial-main.studio-page section.studio-belief p *, html body.editorial-page main.editorial-main.contact-page section.contact-conversation>p *{ font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important; } /* Portrait tablets: equal, generous gutters around both reading paragraphs. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.editorial-main.studio-page section.studio-belief, html body.editorial-page main.editorial-main.contact-page section.contact-conversation{ box-sizing:border-box;width:calc(100% - 96px)!important;max-width:none!important; margin-inline:3rem!important;padding-inline:0!important; } html body.editorial-page main.editorial-main.studio-page section.studio-belief p, html body.editorial-page main.editorial-main.contact-page section.contact-conversation>p{ width:100%!important;max-width:100%!important;margin-inline:0!important; } } /* Keep the verified Figma lines on portrait tablets, inside the approved gutters. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.editorial-page main.editorial-main.studio-page section.studio-belief .studio-belief-line, html body.editorial-page main.editorial-main.contact-page section.contact-conversation .contact-conversation-line{ display:block!important;white-space:nowrap!important; } } /* All reading blocks use the same fluid size, including their animated text spans. */ html body.home-page main#top#top#top section.home-belief.page-section p, html body.home-page main#top#top#top #about #studio-title.studio-description, html body.editorial-page main.editorial-main.editorial-main.editorial-main.studio-page section.studio-belief p, html body.editorial-page main.editorial-main.editorial-main.editorial-main.contact-page section.contact-conversation>p{ font-family:Helixa,sans-serif!important;font-weight:400!important; font-size:var(--large-reading-size)!important;line-height:var(--large-reading-leading)!important;letter-spacing:0!important; } html body.home-page main#top#top#top :is(section.home-belief.page-section p,#about #studio-title.studio-description) *, html body.editorial-page main.editorial-main.editorial-main.editorial-main :is(section.studio-belief p,section.contact-conversation>p) *{ font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important; } /* Keep each authored reading line across desktop and tablet, without overflow. */ @media(min-width:600px){ html body.home-page main#top#top#top :is(section.home-belief.page-section p,#about #studio-title.studio-description), html body.editorial-page main.editorial-main.editorial-main.editorial-main :is(section.studio-belief p,section.contact-conversation>p){ font-size:min(var(--large-reading-size),calc((100vw - 96px) / 27))!important; } html body.editorial-page main.editorial-main.editorial-main.editorial-main :is(section.studio-belief p,section.contact-conversation>p){width:100%!important;max-width:none!important;} html body.editorial-page main.editorial-main.editorial-main.editorial-main :is(.studio-belief-line,.contact-conversation-line){display:block!important;white-space:nowrap!important;} html body.home-page main#top#top#top #about #studio-title .intro-line-break{display:inline!important;} html body.home-page main#top#top#top #about #studio-title .intro-line-break br{display:block!important;} html body.home-page main#top#top#top :is(section.home-belief.page-section p,#about #studio-title.studio-description) .home-mobile-copy-break{display:none!important;} html body.home-page main#top#top#top section.home-belief.page-section p>span{display:block!important;white-space:nowrap!important;} } /* Studio and Contact share one explicit owner at every screen size. */ html body.editorial-page main:is(#studio-page,.contact-page):is(#studio-page,.contact-page):is(#studio-page,.contact-page) :is(section.studio-belief,section.contact-conversation)>p{ font-family:Helixa,sans-serif!important;font-weight:400!important; font-size:var(--large-reading-size)!important;line-height:var(--large-reading-leading)!important; letter-spacing:0!important;text-align:center!important; } html body.editorial-page main:is(#studio-page,.contact-page):is(#studio-page,.contact-page):is(#studio-page,.contact-page) :is(section.studio-belief,section.contact-conversation)>p *{ font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important; } @media(min-width:600px){ html body.editorial-page main:is(#studio-page,.contact-page):is(#studio-page,.contact-page):is(#studio-page,.contact-page) :is(section.studio-belief,section.contact-conversation)>p{ font-size:min(var(--large-reading-size),calc((100vw - 96px) / 27))!important; } } /* Studio and Contact retain their larger, naturally wrapped portrait copy. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body{--large-reading-size:clamp(1.75rem,4vw,2.5rem);} html body.editorial-page main:is(#studio-page,.contact-page):is(#studio-page,.contact-page):is(#studio-page,.contact-page) :is(section.studio-belief,section.contact-conversation)>p{ font-size:var(--large-reading-size)!important;white-space:normal!important; } html body.editorial-page main.editorial-main.editorial-main.editorial-main :is(.studio-belief-line,.contact-conversation-line){ display:inline!important;white-space:normal!important; } } /* Home keeps desktop-authored reading lines within portrait-tablet gutters. */ @media(min-width:600px) and (max-width:1100px) and (orientation:portrait){ html body.home-page main#top#top#top :is(section.home-belief.page-section p,#about #studio-title.studio-description){width:calc(100vw - 96px)!important;max-width:100%!important;margin-inline:auto!important;} }