/* THREEWAY / art direction — separate compositions, shared visual language */
/* 00. Two offset typographic lines, deliberately open space. */
.hero{padding-top:2.5rem;padding-bottom:5rem;min-height:calc(94svh - 106px);display:flex;flex-direction:column;justify-content:space-between}.hero-meta{display:grid;grid-template-columns:1fr auto;align-items:start;gap:2rem}.hero-meta p:nth-child(2){justify-self:center}.hero-down{font-size:2rem;line-height:1;padding:0 8px}.hero h1{font-size:clamp(4rem,12.1vw,13.8rem);font-weight:600;letter-spacing:-.082em;line-height:.93;margin-block:3.5rem 3rem}.hero h1>span{display:block}.hero h1>span:nth-child(2){padding-left:24%;color:var(--color-primary)}.hero-period{color:var(--color-text)}.hero-bottom{display:grid;grid-template-columns:1.35fr 1fr;gap:3rem;align-items:end}.hero-statement{font-size:clamp(1.7rem,2.8vw,3rem);letter-spacing:-.04em;line-height:1.15}.hero-statement em{font-family:var(--font-editorial);font-weight:400}.hero-description{font-size:1rem;max-width:440px;color:var(--color-muted)}.hero-bottom .actions{gap:1.5rem}
/* 01. The work becomes the surface. Native horizontal scroll, never scroll-jacking. */
.work-stage{background:var(--color-text);color:var(--color-background);padding-block:4rem 2.5rem}.work-heading{display:grid;grid-template-columns:1fr 2fr auto;gap:2rem;align-items:end;margin-bottom:3rem}.work-heading>.eyebrow{align-self:start;color:#c0c4c4}.work-heading h2{font-size:clamp(3rem,5.7vw,6.4rem)}.rail-controls{display:flex;gap:.5rem}.rail-controls button{background:none;color:inherit;border:1px solid currentColor;width:48px;height:48px;font-size:1.5rem}.rail-controls button:hover{background:var(--color-background);color:var(--color-text)}.rail-controls button:disabled{opacity:.3}.work-track{display:flex;gap:2vw;padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;scrollbar-color:#777 transparent;padding-bottom:1.5rem}.work-track>.project{flex:0 0 87vw;scroll-snap-align:start;min-width:0}.project-visual{display:flex;position:relative;isolation:isolate;width:100%;height:clamp(380px,61vw,680px);overflow:hidden;flex-direction:column;justify-content:space-between;padding:2.5rem;background:#dce8ed;color:#213742}.project-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}.project-visual:hover>img{transform:scale(1.025)}.project:nth-child(even) .project-visual{background:#bfc8bd;color:#303c2e}.demo-label,.placeholder-caption{position:relative;z-index:2;font-size:.75rem;letter-spacing:.05em}.placeholder-title{font-size:clamp(2.5rem,6vw,6.5rem);line-height:1;letter-spacing:-.065em;position:relative;z-index:2;max-width:70%}.placeholder-title>span{color:var(--color-primary)}.project-placeholder-index{position:absolute;right:1.5rem;bottom:-.2em;font-size:clamp(16rem,36vw,40rem);font-weight:600;line-height:1;letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px currentColor;--stroke-color:#889fa9;-webkit-text-stroke-color:var(--stroke-color);opacity:.6;z-index:0;pointer-events:none}.project:nth-child(even) .project-placeholder-index{--stroke-color:#798c76}.project-caption{display:flex;justify-content:space-between;align-items:start;gap:1rem;padding-top:1.2rem}.project-caption h3{font-size:1.4rem;letter-spacing:-.03em}.project-caption p{margin-top:.3rem;font-size:.8rem;opacity:.7}.project-arrow{position:absolute;right:1rem;bottom:1rem;background:white;padding:.7rem 1.4rem;font-size:2rem}.work-bottom{display:flex;justify-content:space-between;gap:2rem;align-items:center;margin-top:1rem}.work-bottom .text-link:hover{color:#a7cafd}.portfolio-section{padding-bottom:var(--space-6)}.projects-grid{display:grid;grid-template-columns:1fr;gap:6rem}.projects-grid .project:nth-child(even){width:80%;justify-self:end}.project{min-width:0}
/* 02. Quiet text, then a large typographic baseline. */
.manifest{padding-block:var(--space-6)}.manifest-copy{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;margin-top:4rem;align-items:end}.manifest h2{font-size:clamp(3rem,6.5vw,7rem)}.manifest-body{max-width:460px;margin-left:auto}.manifest-body p+p{margin-top:1.5rem}.manifest-body p{color:var(--color-muted)}.manifest-words{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;max-width:none;padding-top:5rem;font-size:clamp(1.6rem,3.7vw,4rem);letter-spacing:-.055em}.manifest-words span:nth-child(even){font-family:var(--font-editorial);font-style:italic}
/* 03. Four large, tactile rows. Native details keep everything usable without JS. */
.services-section{padding-block:5rem 7rem;background:var(--color-surface)}.services-heading{display:flex;justify-content:space-between;align-items:start;margin-bottom:3.5rem}.services-heading>p:last-child{font-size:.875rem}.service-row{border-top:1px solid #a9afac}.service-row:last-child{border-bottom:1px solid #a9afac}.service-row summary{list-style:none;display:grid;grid-template-columns:60px 1fr 50px;gap:1rem;align-items:center;cursor:pointer;padding:2.5rem 1rem;transition:background .25s,color .25s}.service-row summary::-webkit-details-marker{display:none}.service-row summary h3{font-size:clamp(2rem,5.5vw,6rem);letter-spacing:-.065em;transition:transform .3s}.service-toggle{font-size:3rem;font-weight:300;line-height:1;justify-self:end;transition:transform .3s}.service-row[open] .service-toggle{transform:rotate(45deg)}.service-row summary:hover,.service-row[open] summary{background:var(--color-primary);color:white}.service-row summary:hover h3{transform:translateX(12px)}.service-expansion{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;padding:2.5rem 5rem 3rem}.service-expansion p{max-width:500px}.service-expansion>p{font-size:1.25rem;line-height:1.5}.service-expansion>div>p{color:var(--color-muted)}.service-expansion .text-link{margin-top:1.5rem}
/* 04. Editorial margin and deliberately unequal columns. */
.editorial{display:grid;grid-template-columns:1fr 2.2fr;gap:7%;padding-block:clamp(6rem,13vw,14rem)}.editorial-margin{display:flex;flex-direction:column;justify-content:space-between;align-items:start}.editorial-margin>p:last-child{font-size:.85rem;border-top:1px solid var(--color-border);padding-top:1rem}.editorial-sign{font-family:var(--font-editorial);font-style:italic;font-size:clamp(8rem,19vw,20rem);line-height:1;color:var(--color-primary)}.editorial h2{font-size:clamp(2.5rem,4.8vw,5.3rem);line-height:1.08}.editorial h2 em{color:var(--color-primary)}.editorial-columns{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:3.5rem;color:var(--color-muted)}
/* 05. Start is a product, with its own composition. */
.start-feature{background:var(--color-primary);color:white;padding-block:3rem}.start-top{display:flex;justify-content:space-between;gap:2rem}.start-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:8%;padding-block:5rem}.start-layout h2{font-size:clamp(7rem,16vw,18rem);font-weight:600;letter-spacing:-.09em;line-height:.9;position:relative}.start-layout h2>span:first-child{display:block;font-size:.2em;letter-spacing:-.04em;line-height:1.4;font-weight:400}.start-asterisk{font-family:var(--font-editorial);font-weight:400;font-size:.5em;vertical-align:top;line-height:1;display:inline-block;padding-top:.1em}.start-caption{font-size:clamp(1.5rem,2.7vw,3rem);line-height:1.2;letter-spacing:-.035em;margin-top:2.5rem}.start-content{padding-top:1rem}.start-content h3{font-size:clamp(1.7rem,2.4vw,2.7rem);line-height:1.12;letter-spacing:-.04em}.start-content>p{margin-top:1.5rem;max-width:440px;color:#ecf2ff}.start-price{font-size:clamp(2.5rem,4vw,4.5rem);letter-spacing:-.04em;margin-top:2rem}.start-price span{font-size:.875rem;letter-spacing:0}.start-content .button{background:white;color:var(--color-text);border-color:white;margin-top:1rem}.start-content .button:hover{background:var(--color-text);color:white;border-color:var(--color-text)}.start-footnote{border-top:1px solid #ffffff66;padding-top:1.5rem;max-width:none;font-size:.8rem;color:#edf2ff}.start-footnote a{text-decoration:underline;margin-left:1rem}
/* 06. A typographic pause. */
.honesty-type{padding-block:clamp(6rem,14vw,15rem)}.honesty-type>h2{font-size:clamp(3rem,7.7vw,8.5rem);margin-block:3rem 5rem;line-height:1.02}.honesty-type h2 em{position:relative;white-space:nowrap}.honesty-type h2 em::after{content:'';height:2px;position:absolute;left:0;right:0;bottom:-.09em;background:var(--color-primary)}.honesty-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14%}.honesty-bottom>p{color:var(--color-muted);max-width:410px}.honesty-promise{font-size:clamp(1.7rem,3vw,3.2rem);line-height:1.2;letter-spacing:-.045em;margin-top:1.5rem}
/* 07. Compact price ledger, offset against a large heading. */
.pricing-section{display:grid;grid-template-columns:1fr 1.65fr;gap:7%;padding-block:5rem 7rem;border-top:1px solid var(--color-text)}.pricing-heading h2{margin-block:2.5rem}.pricing-heading>p:last-child{max-width:290px;color:var(--color-muted);font-size:.9rem}.price-row{display:grid;grid-template-columns:1fr auto 25px;gap:.8rem 1.5rem;padding:1.7rem 0;border-top:1px solid var(--color-border);align-items:baseline}.price-row h3{font-size:1.8rem}.price-row>p{grid-column:1/3;grid-row:2;font-size:.875rem;max-width:480px;color:var(--color-muted)}.price{font-size:2rem;letter-spacing:-.06em;white-space:nowrap}.price small{font-size:.75rem;letter-spacing:0}.individual-price{font-size:1rem;letter-spacing:-.02em}.price-arrow{font-size:1.4rem}.price-row:hover h3,.price-row:hover .price-arrow{color:var(--color-primary)}.price-note{font-size:.75rem;max-width:650px;color:var(--color-muted);margin-top:1.5rem}
/* 08. Sticky counter, natural page scroll. */
.process-section{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-block:6rem;border-top:1px solid var(--color-border);align-items:start}.process-anchor{position:sticky;top:3rem}.process-anchor h2{font-size:clamp(2.2rem,3.8vw,4.2rem);margin-block:2rem}.process-anchor>p:not(.eyebrow){max-width:340px;color:var(--color-muted)}.process-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}.process-list li{border-top:1px solid var(--color-border);padding-top:1.5rem}.process-list h3{font-size:2rem;margin:1.5rem 0}.process-list p{color:var(--color-muted)}.process-section .process-list{grid-template-columns:1fr;gap:0}.process-section .process-list li{min-height:300px;padding-block:2rem 5rem;transition:color .3s}.process-section .process-list h3{font-size:clamp(2.3rem,4vw,4.2rem)}.process-section .process-list p{max-width:400px}.process-section .is-active h3{color:var(--color-primary)}
/* 09. Horizontal reading, entirely under the visitor's control. */
.opinions{padding-block:5rem;background:var(--color-surface)}.opinions-heading{display:grid;grid-template-columns:1fr 2fr auto;gap:2rem;align-items:end;margin-bottom:4rem}.opinions-heading>.eyebrow{align-self:start}.opinions-track{display:flex;gap:6vw;padding-inline:var(--gutter);overflow:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;padding-bottom:2rem}.testimonial{margin:0;min-width:0;flex:0 0 66vw;max-width:1000px;border-top:1px solid var(--color-border);padding-top:2rem;scroll-snap-align:start}.testimonial blockquote{margin:2rem 0;font-family:var(--font-editorial);font-size:clamp(1.8rem,3.2vw,3.5rem);letter-spacing:-.04em;line-height:1.25}.testimonial figcaption{display:flex;gap:1rem;align-items:center;font-size:.875rem}.testimonial figcaption small{display:block;color:var(--color-muted)}
/* 10. A brief studio note. */
.studio-note{padding-block:var(--space-6);display:grid;grid-template-columns:.6fr 1.4fr 1fr;gap:4rem;align-items:start}.studio-note h2{font-size:clamp(2.5rem,4vw,4.5rem)}.studio-note>div{align-self:end}.studio-note>div>p{color:var(--color-muted)}.studio-note .text-link{margin-top:2rem}
/* 11. A full-bleed ending rather than another content block. */
.cta{background:var(--color-primary);color:white;padding-block:3rem 4rem}.cta-top{display:flex;justify-content:space-between;gap:2rem}.cta-top>p:last-child{font-size:.875rem;max-width:440px}.cta h2{font-size:clamp(3rem,10.9vw,12.5rem);letter-spacing:-.075em;line-height:1;margin-block:5rem}.cta h2 a{display:block}.cta h2 a>span[aria-hidden]{font-size:.7em;display:inline-block;transition:transform .3s;margin-left:.05em}.cta h2 a:hover>span[aria-hidden]{transform:translate(8px,-8px)}.cta-break{display:none}.cta-bottom{display:flex;justify-content:space-between;gap:3rem}.cta-bottom>p{font-size:clamp(1.5rem,2.3vw,2.5rem);font-family:var(--font-editorial);font-style:italic;line-height:1.2;letter-spacing:-.035em}.cta-bottom>div{display:flex;align-items:start;flex-direction:column;gap:1rem}.cta-email{font-size:1.3rem;letter-spacing:-.02em}.cta .text-link:hover{color:white;opacity:.75}.cta :focus-visible,.start-feature :focus-visible,.work-stage :focus-visible{outline-color:currentColor}
@media(min-width:1800px){.hero h1{font-size:13.5rem}.work-track>.project{flex-basis:min(87vw,1550px)}}
@media(max-width:1100px){.hero h1{font-size:12vw}.hero-bottom{grid-template-columns:1fr 1.2fr}.hero-bottom .actions{gap:1rem}.hero .text-link{font-size:.8rem}.work-heading{grid-template-columns:.7fr 1.5fr auto}.editorial{gap:4%}.start-layout{gap:5%}.pricing-section{grid-template-columns:1fr 1.5fr;gap:4%}.price-row{gap:.8rem}.price-row h3{font-size:1.5rem}.price{font-size:1.5rem}.studio-note{grid-template-columns:.6fr 1.5fr 1fr;gap:2rem}.service-row summary{grid-template-columns:40px 1fr 40px}.service-expansion{gap:2rem;padding-inline:3rem}}
@media(max-width:760px){.hero{min-height:auto;padding-block:2rem 4rem}.hero-meta{grid-template-columns:1fr auto;gap:1rem}.hero-meta p:nth-child(2){display:none}.hero h1{font-size:12.6vw;line-height:1.05;margin-block:3.5rem;letter-spacing:-.085em}.hero h1>span:nth-child(2){padding-left:13%}.hero-bottom{grid-template-columns:1fr;gap:2rem}.hero-statement{font-size:1.9rem}.hero-description{font-size:1rem}.hero-bottom .actions{margin-top:1.5rem;gap:1rem}.hero .text-link{font-size:.875rem}.work-stage{padding-top:2.5rem}.work-heading{grid-template-columns:1fr auto;gap:2rem;margin-bottom:2rem}.work-heading>.eyebrow{grid-column:1/-1}.work-heading h2{font-size:2.8rem}.rail-controls button{width:42px;height:46px}.work-track{gap:1rem}.work-track>.project{flex-basis:calc(100vw - var(--gutter)*2)}.project-visual{height:420px;padding:1.5rem}.placeholder-title{font-size:2.5rem;max-width:100%}.project-placeholder-index{font-size:18rem;right:1rem;bottom:.05em}.placeholder-caption{font-size:.7rem;max-width:28ch}.demo-label{font-size:.65rem;letter-spacing:.04em}.project-caption h3{font-size:1.2rem}.work-bottom .eyebrow{display:none}.work-bottom{justify-content:flex-end}.projects-grid{gap:3rem}.projects-grid .project:nth-child(even){width:100%}.manifest{padding-block:5rem}.manifest-copy{grid-template-columns:1fr;gap:2rem;margin-top:2rem}.manifest h2{font-size:3.3rem}.manifest-body{margin-left:15%;font-size:1rem}.manifest-words{padding-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:.3rem 1rem;font-size:1.9rem}.services-section{padding-block:3rem}.services-heading{gap:1rem;margin-bottom:2rem}.services-heading>p:last-child{font-size:.75rem}.service-row summary{grid-template-columns:22px 1fr 28px;gap:.7rem;padding:1.8rem .2rem}.service-row summary h3{font-size:clamp(1.7rem,5.8vw,2.6rem);letter-spacing:-.055em}.service-toggle{font-size:2rem}.service-number{font-size:.65rem}.service-row summary:hover h3{transform:none}.service-expansion{grid-template-columns:1fr;gap:1rem;padding:1.5rem .5rem 2rem}.service-expansion>p{font-size:1.1rem}.editorial{grid-template-columns:1fr;padding-block:5rem;gap:2.5rem}.editorial-margin{flex-direction:row;gap:1.5rem;align-items:center}.editorial-sign{font-size:5rem}.editorial-margin>p:last-child{display:none}.editorial h2{font-size:clamp(2.2rem,7.8vw,3.5rem)}.editorial-columns{grid-template-columns:1fr;gap:1.5rem;margin:2rem 0 0 15%}.start-feature{padding-block:2rem}.start-top>span{display:none}.start-layout{grid-template-columns:1fr;gap:3rem;padding-block:3rem}.start-layout h2{font-size:clamp(6rem,29vw,12rem)}.start-caption{font-size:1.7rem;margin-top:1.5rem}.start-content{padding-top:0}.start-content h3{font-size:1.9rem}.start-price{font-size:3rem}.start-footnote a{display:block;margin:1rem 0 0}.honesty-type{padding-block:5rem}.honesty-type>h2{font-size:clamp(2.2rem,7.7vw,3.5rem);margin-block:2.5rem 3rem;line-height:1.1}.honesty-bottom{grid-template-columns:1fr;gap:2.5rem}.honesty-bottom>div{margin-left:15%}.honesty-promise{font-size:2rem}.pricing-section{grid-template-columns:1fr;gap:2.5rem;padding-block:3rem 5rem}.pricing-heading h2{margin-block:1.5rem}.pricing-heading>p:last-child{max-width:none}.price-row{grid-template-columns:1fr auto 18px;gap:.7rem}.price-row h3{font-size:1.3rem}.price{font-size:1.5rem}.price small{font-size:.6rem}.individual-price{font-size:.75rem}.price-row>p{font-size:.875rem}.process-section{grid-template-columns:1fr;gap:3rem;padding-block:4rem}.process-anchor{position:static}.process-anchor h2{font-size:2.8rem}.process-section .process-list li{min-height:0;padding-block:1.5rem 2.5rem}.process-section .process-list h3{font-size:2.2rem}.process-list{grid-template-columns:1fr 1fr;gap:2rem}.process-list h3{font-size:1.5rem}.process-list p{font-size:.9rem}.opinions{padding-block:3rem}.opinions-heading{grid-template-columns:1fr auto;gap:2rem;margin-bottom:2.5rem}.opinions-heading>.eyebrow{grid-column:1/-1}.opinions-heading h2{font-size:2.8rem}.opinions-track{gap:1.5rem}.testimonial{flex-basis:calc(100vw - var(--gutter)*2)}.testimonial blockquote{font-size:1.8rem}.studio-note{grid-template-columns:1fr;gap:2rem;padding-block:5rem}.studio-note h2{font-size:3rem}.studio-note>div{margin-left:15%}.cta{padding-block:2.5rem}.cta-top{flex-direction:column;gap:1.5rem}.cta h2{font-size:18.5vw;margin-block:3rem;line-height:.95}.cta-break{display:inline}.cta-bottom{flex-direction:column;gap:2rem}.cta-bottom>p{font-size:1.6rem}.cta-email{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){.process-anchor{position:static}.service-row summary:hover h3{transform:none}.cta h2 a:hover>span[aria-hidden]{transform:none}}
@media(max-width:760px){.work-heading,.opinions-heading{grid-template-columns:minmax(0,1fr)}.work-heading>.eyebrow,.opinions-heading>.eyebrow{grid-column:1}.work-heading .rail-controls,.opinions-heading .rail-controls{justify-self:end;margin-top:-1rem}.manifest-words{display:flex;justify-content:flex-start;gap:.4rem 1.5rem}}

.work-track::-webkit-scrollbar,.opinions-track::-webkit-scrollbar{display:none}