/* Endcap services — article pages, in the studio's current (gen 2) system.
   Dark ground, Fraunces italic light display, Hanken Grotesk body. No JavaScript. */
:root{color-scheme:dark;--bg:#0C0C0C;--ink:#D7E2EA;--muted:rgba(215,226,234,.62);--faint:rgba(215,226,234,.42);--line:rgba(215,226,234,.15);--ease:cubic-bezier(.22,1,.36,1);
  /* Older inline styles on these pages reference the previous palette names. Map them onto the current one. */
  --clay-ink:rgba(215,226,234,.62);--clay-glow:rgba(215,226,234,.62);--off-white:#D7E2EA;--deep-forest:#0C0C0C;--stark-black:#D7E2EA;--studio-red:#D7E2EA}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,ul,ol{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:#D7E2EA;color:#0C0C0C}
:where(a,button):focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip-link{position:absolute;left:16px;top:12px;z-index:70;padding:10px 16px;background:var(--ink);color:var(--bg);transform:translateY(-200%);text-decoration:none}
.skip-link:focus{transform:none}

.serif{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.045em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}

/* ------- chrome ------- */
.site-header{padding:24px 24px 0}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;font-size:26px;letter-spacing:-.045em;line-height:1;text-decoration:none;color:var(--ink)}
.site-nav{display:flex;gap:28px;align-items:center}
.site-nav a{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.02em;font-size:15px;color:rgba(215,226,234,.85);text-decoration:none;position:relative;transition:opacity .3s}
.site-nav a::after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.site-nav a:hover{opacity:1}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.site-nav a[aria-current=page]::after{transform:scaleX(1)}
@media(min-width:768px){.site-header{padding:32px 40px 0}}
@media(max-width:600px){.site-nav{gap:18px}.site-nav a{font-size:14px}}

/* ------- article ------- */
.article-wrap{max-width:1152px;margin:0 auto;padding:0 24px}
article{max-width:720px;margin:0 auto;padding:88px 0 96px}
.eyebrow{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.02em;font-size:15px;color:var(--faint);display:block;text-transform:none}
.eyebrow.mono{font-family:'Fraunces',Georgia,serif;font-size:15px;letter-spacing:-.02em;text-transform:none;font-weight:300}
.meta{color:var(--faint);margin-top:10px}
.display,article h1{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.045em;line-height:.98;font-variation-settings:'SOFT' 0,'WONK' 0}
article h1{font-size:clamp(2.6rem,6.2vw,4.6rem);margin-top:26px;color:var(--ink)}
.soft{font-style:italic;font-variation-settings:'SOFT' 30,'WONK' 1}
.lede{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.015em;font-size:1.35rem;line-height:1.45;color:rgba(215,226,234,.78);margin-top:30px;padding-bottom:36px;border-bottom:1px solid var(--line)}
article h2{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.035em;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.05;margin:60px 0 0;color:var(--ink)}
article h3{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.025em;font-size:1.45rem;line-height:1.15;margin:40px 0 0}
article p{margin-top:18px;color:rgba(215,226,234,.74)}
article ul,article ol{margin:18px 0 0 22px;padding:0;color:rgba(215,226,234,.74)}
article li{margin-top:12px}
article li::marker{color:var(--faint)}
article strong{font-weight:500;color:var(--ink)}
article a{text-decoration:underline;text-decoration-color:rgba(215,226,234,.35);text-underline-offset:4px;transition:text-decoration-color .3s}
article a:hover{text-decoration-color:currentColor}

.service-figure{margin-top:44px}
.service-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center}
.service-figure.tall img{aspect-ratio:4/3;object-position:50% 40%}
.service-figure figcaption{display:flex;justify-content:space-between;gap:20px;padding:12px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:12px;letter-spacing:.01em;text-transform:none;color:var(--faint)}
.service-figure figcaption.mono{font-family:'Hanken Grotesk',sans-serif;font-size:12px;letter-spacing:.01em;text-transform:none;font-weight:400}
.rule{border:0;border-top:1px solid var(--line);margin:48px 0}
.pull{border-left:1px solid rgba(215,226,234,.35);padding:6px 0 6px 22px;margin-top:26px;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;font-size:1.2rem;color:rgba(215,226,234,.78)}
.related-service{border-left:1px solid rgba(215,226,234,.35);padding:4px 0 4px 16px;margin:40px 0 0;color:var(--muted);font-size:.95rem}

/* in-article CTA */
.cta-band{border-top:1px solid var(--line);padding:40px 0 0;margin-top:64px}
.cta-band p.big{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.035em;font-size:clamp(1.9rem,3.8vw,2.7rem);line-height:1.05;margin-top:14px;color:var(--ink)}
.cta-band .actions{margin-top:26px;display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.button,.cta-band .button,.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ink);color:var(--bg);padding:13px 30px;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.02em;font-size:16px;text-decoration:none;text-transform:none;transition:opacity .2s}
.cta-band .button.mono{font-family:'Fraunces',Georgia,serif;font-size:16px;letter-spacing:-.02em;text-transform:none;font-weight:300}
.button:hover,.pill:hover{opacity:.8}
.button:active,.pill:active{transform:scale(.98)}
.cta-band a.quiet,.actions a.quiet{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;font-size:16px;letter-spacing:-.02em;text-decoration:none;color:rgba(215,226,234,.8);border-bottom:1px solid rgba(215,226,234,.35);padding-bottom:2px;transition:border-color .3s}
.actions a.quiet:hover{border-color:currentColor}

/* related */
.related{border-top:1px solid var(--line)}
.related .inner{max-width:1152px;margin:0 auto;padding:56px 24px 80px}
.related .inner>p{color:var(--faint)!important}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:24px}
.related-grid a{background:var(--bg);padding:26px;text-decoration:none;display:block;transition:background .4s var(--ease)}
.related-grid a:hover{background:#141719}
.related-grid a>span{color:var(--faint)!important}
.related-grid .t{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.025em;font-size:1.35rem;line-height:1.15;margin-top:14px;color:var(--ink)}

/* ------- footer (same index as the homepage) ------- */
.site-footer{background:var(--bg);color:var(--ink);overflow-x:clip;padding:64px 24px 32px}
.site-footer .inner{max-width:1152px;margin:0 auto}
.site-footer .top{display:flex;flex-direction:column;gap:40px;padding-bottom:64px}
.site-footer .cols{display:grid;grid-template-columns:1fr;gap:32px}
.site-footer .col{display:flex;flex-direction:column;gap:10px}
.site-footer .label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.site-footer .col a{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.02em;font-size:14px;color:rgba(215,226,234,.7);text-decoration:none;transition:opacity .3s}
.site-footer .col a:hover{color:var(--ink)}
.site-footer .word{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.045em;line-height:.9;padding-bottom:.2em;font-size:12vw;color:var(--ink);user-select:none}
.site-footer .base{display:flex;flex-direction:column;gap:12px;padding-top:32px;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.02em;font-size:14px;color:rgba(215,226,234,.5)}
.site-footer .base a{text-decoration:none;color:inherit}
.site-footer .base a:hover{opacity:.8}
@media(min-width:640px){.site-footer .cols{grid-template-columns:repeat(3,auto);gap:48px}}
@media(min-width:768px){.site-footer{padding:64px 40px 32px}.site-footer .top{flex-direction:row;align-items:flex-start;justify-content:space-between}.site-footer .cols{justify-content:end}.site-footer .col{align-items:flex-end;text-align:right}.site-footer .base{flex-direction:row;justify-content:space-between}}

/* ------- listing line: campaign layout on the same tokens ------- */
.ll-page article{max-width:none;padding:56px 0 96px}
.ll-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px 56px;align-items:end;padding-bottom:48px;border-bottom:1px solid var(--line)}
.ll-hero .copy .lede{border-bottom:0;padding-bottom:0;max-width:38rem}
.ll-kicker{font-family:'Hanken Grotesk',sans-serif;font-size:12px;letter-spacing:.02em;color:var(--faint);margin-top:14px}
.ll-hero .copy h1{margin-top:12px}
.ll-hero .actions{margin-top:30px;display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.ll-hero .service-figure{margin:0}
.ll-hero .service-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:48% 42%}
.ll-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-bottom:1px solid var(--line)}
.ll-beats .beat{padding:40px 36px 44px 0;border-right:1px solid var(--line)}
.ll-beats .beat:last-child{border-right:0;padding-right:0}
.ll-beats h2{margin:12px 0 0;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.ll-beats p{margin-top:14px;max-width:32ch}
.ll-mail{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start;background:#141719;border:1px solid var(--line);color:var(--ink);padding:48px 48px 52px;margin-top:56px}
.ll-mail h2{margin:14px 0 0}
.ll-mail .intro{margin-top:18px;max-width:36ch}
.ll-mail .letter{background:rgba(215,226,234,.04);border:1px solid var(--line);padding:28px 28px 32px}
.ll-mail .letter .row{display:flex;gap:16px;margin-top:10px;font-size:.95rem}
.ll-mail .letter .row:first-child{margin-top:0}
.ll-mail .letter .k{color:var(--faint);min-width:5.5rem}
.ll-mail .letter .body{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);color:rgba(215,226,234,.85)}
.ll-flow{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ll-flow .step{padding:36px 40px 40px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.ll-flow .step:nth-child(even){padding-right:0;padding-left:40px;border-right:0}
.ll-flow .step:nth-last-child(-n+2){border-bottom:0}
.ll-flow h2{margin:10px 0 0;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.ll-flow p{margin-top:12px;max-width:42ch}
.ll-ask{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start;margin-top:56px;padding-bottom:8px}
.ll-ask ul{margin:0;list-style:none}
.ll-ask li{margin:0;padding:14px 0;border-top:1px solid var(--line);font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.02em;font-size:1.2rem;color:var(--ink)}
.ll-ask li:last-child{border-bottom:1px solid var(--line)}
.ll-narrow{max-width:720px;margin:56px auto 0}
@media(max-width:860px){
  .ll-flow,.ll-ask{grid-template-columns:1fr}.ll-flow .step{padding:28px 0;border-right:0}.ll-flow .step:nth-child(even){padding-left:0}.ll-flow .step:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.ll-flow .step:last-child{border-bottom:0}
  .ll-hero,.ll-beats,.ll-mail{grid-template-columns:1fr}.ll-hero .service-figure img{aspect-ratio:16/11;object-position:50% 38%}.ll-beats .beat{border-right:0;border-bottom:1px solid var(--line);padding:32px 0}.ll-beats .beat:last-child{border-bottom:0}.ll-mail{padding:36px 24px 40px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}