/* User-supplied blond palette; dark brown is reserved for readable ink. */
:root {
  --blond-1:#C0B592;
  --blond-2:#F0E2B6;
  --blond-3:#F3E8C5;
  --blond-4:#F6EED3;
  --blond-5:#F9F3E2;
  --blond-6:#FCF9F0;
  --sc-canvas:var(--blond-6);
  --sc-surface:var(--blond-5);
  --sc-ink:#302B24;
  --sc-ink-soft:#6B6251;
  --sc-accent:#625237;
  --sc-accent-ink:var(--blond-6);
  --line:rgb(139 122 80 / .24);
  --sc-e1:0 2px 8px rgb(60 48 26 / .05);
  --sc-e2:0 12px 32px rgb(60 48 26 / .08);
  --sc-e3:0 24px 60px rgb(60 48 26 / .15);
}
body{background:var(--blond-6);color:var(--sc-ink)}
::selection{background:var(--blond-2);color:var(--sc-ink)}
.site-header{background:rgb(252 249 240 / .9);border-color:var(--line)}
.skip{background:var(--blond-6)}
.button{background:var(--sc-ink);color:var(--blond-6)}
.button:hover{background:#514633}
.navigation,.inline-link,.eyebrow,.hero h1 span,.hero-lead,.client-strip p,
.client-names span,.contact>p:not(.eyebrow),.contact-links,.footer,
.art-caption,.work-tab,.case-platform,.case-result>span,.case-panel>p:not(.case-platform),
.chart-top,.chart-row,.data-note,.process-label,.process-intro,.phase-tabs button,
.phase-panel p,.idea-plane>span,.edit-heading,.edit-heading span+span,.process-caption,
.video-review figcaption span,.main-quote figcaption span,.short-quote figcaption span,
.short-quote>a,.about-copy>p:not(.eyebrow),.services-intro p,.service summary small,
.service summary i,.service-body p,.service-scope,.service-note{color:var(--sc-ink-soft)}
.client-strip,.footer,.work-tabs,.results-chart,.phase-tabs,.short-quote,.service-list,.service{border-color:var(--line)}
.work-tab.is-active,.phase-tabs button.is-active{color:var(--sc-ink);border-color:var(--sc-accent)}
.work-art{background:var(--blond-5)}
.work-image-link,.reel-plane{box-shadow:0 24px 44px -18px rgb(60 48 26 / .38)}
.chart-track{background:var(--blond-4)}
.chart-track i{background:var(--blond-1)}
.chart-row.is-selected{color:var(--sc-ink)}
.chart-row.is-selected i{background:var(--sc-accent)}
.workshop{background:var(--blond-4)}
.idea-plane,.edit-plane{background:var(--blond-6);border-color:var(--blond-5);box-shadow:0 18px 38px -16px rgb(60 48 26 / .3)}
.idea-plane i{background:var(--blond-1)}
.edit-track span{background:var(--blond-3);border-color:var(--blond-1);color:var(--sc-ink-soft)}
.edit-track span:nth-child(2){background:var(--blond-2)}
.edit-text-track{background:var(--blond-4);border-color:var(--blond-1);color:var(--sc-ink-soft)}
.video-review video{background:var(--blond-3)}
.quote-sign{color:var(--blond-1)}
.about{background:var(--blond-3)}
.about-photo figcaption{background:rgb(252 249 240 / .9);color:var(--sc-ink)}

/* Independent supplied screenshots, with one accessible detail panel at a time. */
.hero{height:auto;min-height:0;background:var(--blond-6);overflow:clip;padding-bottom:30px}
.hero-copy{padding-top:42px;z-index:40}
.hero h1{font-size:clamp(48px,5.4vw,82px)}
.phone-carousel{--phone-w:clamp(156px,13vw,205px);--phone-step:clamp(95px,11.8vw,176px);position:relative;margin-top:240px}
.phone-stage{position:relative;height:585px;isolation:isolate}
.phone-list{position:absolute;inset:0;margin:0;padding:0;list-style:none;perspective:1400px}
.phone-slot{position:absolute;left:50%;top:0;width:var(--phone-w);aspect-ratio:800/1739;z-index:var(--layer);transform:translateX(calc(-50% + var(--slot) * var(--phone-step))) translateY(calc(var(--depth) * 24px));transition:transform 550ms var(--ease);perspective:1000px}
.phone-screen{display:block;position:relative;width:100%;padding:0;border:3px solid #302b24;border-radius:26px;background:#302b24;cursor:pointer;box-shadow:0 18px 25px -15px rgb(48 43 36 / .4);transform:rotateY(var(--yaw)) rotateZ(var(--roll)) scale(calc(1 - var(--depth) * .055));transform-origin:center 70%;transition:transform 380ms var(--ease),box-shadow 380ms var(--ease);overflow:hidden;touch-action:pan-y}
.phone-screen img{display:block;width:100%;height:auto;aspect-ratio:800/1739;object-fit:contain;border-radius:22px;user-select:none;-webkit-user-drag:none}
/* A readable editorial crop of the supplied profile screenshots, not simulated app UI. */
.phone-screen--profile{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;aspect-ratio:800/1739;padding:18px 9px 12px;background:#fffcf5;color:var(--sc-ink);container-type:inline-size;text-align:left}
.profile-instagram{background:#222723;color:var(--blond-6)}
.profile-heading{display:grid;gap:3px}
.profile-heading strong{font-size:17px;letter-spacing:-.04em;line-height:1.1}
.profile-heading>span{font-size:9px;line-height:1.4;letter-spacing:-.02em;white-space:nowrap}
.profile-proof-label{display:block;font-size:9px;line-height:1.4;margin:12px 0 7px;opacity:.8}
.profile-reels{display:grid;gap:7px}
.profile-reel{display:flex;align-items:center;gap:6px}
.profile-thumb{position:relative;display:block;flex:0 0 27%;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:var(--blond-1)}
.phone-screen .profile-thumb img{position:absolute;max-width:none;width:300%;height:auto;aspect-ratio:auto;left:calc(var(--reel-column) * -100%);top:-329%;border-radius:0;object-fit:initial}
.profile-instagram .profile-thumb img{top:-353%}
.profile-reel-result{flex:1;min-width:0;text-align:center}
.profile-reel-result strong{display:block;padding:3px 1px;border:2px solid #927b42;border-radius:50%;font-size:14.5cqw;line-height:1.2;letter-spacing:-.045em;font-weight:650;white-space:nowrap}
.profile-instagram .profile-reel-result strong{border-color:var(--blond-2);color:var(--blond-6)}
.profile-reel-result>span{display:block;font-size:8px;line-height:1.4;margin-top:2px}
.profile-signoff{display:block;text-align:center;font-size:9px;margin-top:15px;opacity:.7}
.phone-screen:focus-visible{outline:3px solid var(--sc-accent);outline-offset:6px;border-radius:26px}
.phone-slot.is-lifted,.phone-slot:focus-within{z-index:20}
.phone-slot.is-inspected{z-index:21}
.phone-slot.is-lifted .phone-screen,.phone-screen:focus-visible{transform:translateY(-34px) rotateY(0) rotateZ(0) scale(1.12);box-shadow:0 32px 45px -15px rgb(48 43 36 / .4)}
@media(hover:hover) and (pointer:fine){
  .phone-slot:hover{z-index:20}
  .phone-slot:hover .phone-screen{transform:translateY(-34px) rotateY(0) rotateZ(0) scale(1.12);box-shadow:0 32px 45px -15px rgb(48 43 36 / .4)}
}
.metric-ground{position:absolute;z-index:25;inset:auto 0 0;height:260px;background:linear-gradient(transparent,var(--blond-6) 54%);pointer-events:none}
.hero-metric{position:absolute;z-index:30;inset:auto 0 26px;text-align:center;pointer-events:none}
.metric-number{display:flex;justify-content:center;align-items:baseline;gap:18px;color:var(--sc-ink);line-height:1}
#views-count{font-size:clamp(120px,13.5vw,195px);font-weight:550;letter-spacing:-.085em;font-variant-numeric:tabular-nums;min-width:1.15em;line-height:1.08}
.metric-unit{font-size:clamp(32px,4vw,56px);font-weight:500;letter-spacing:-.055em}
.hero-metric p{font-size:18px;letter-spacing:-.02em;line-height:1.5;margin-top:4px}
.hero-metric .metric-organic{font-size:12px;letter-spacing:0;line-height:1.5;margin-top:8px;color:var(--sc-ink-soft)}
.metric-organic span{padding:0 5px;color:var(--blond-1)}
.carousel-controls{position:relative;z-index:35;display:flex;align-items:center;justify-content:center;gap:30px;margin:0 auto;width:min(100% - 40px,440px)}
.carousel-arrow{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;background:transparent;border:1px solid var(--blond-1);border-radius:50%;color:var(--sc-ink);cursor:pointer;font-size:22px;transition:background 150ms,transform 150ms}
.carousel-arrow:hover{background:var(--blond-3)}
.carousel-arrow:active{transform:scale(.95)}
.carousel-caption{text-align:center;min-width:230px;min-height:49px}
.carousel-caption p{font-size:14px;font-weight:550;line-height:1.5}
.carousel-caption p span{font-weight:400;color:var(--sc-ink-soft)}
.carousel-caption a,.carousel-caption>span{display:inline-block;font-size:12px;color:var(--sc-ink-soft);line-height:1.5;margin-top:6px}
.carousel-caption a:hover{color:var(--sc-ink);text-decoration:underline;text-underline-offset:4px}
.carousel-caption [hidden]{display:none}
.phone-info{position:absolute;bottom:calc(100% + 72px);left:calc(50% + var(--info-shift,0px));width:278px;max-width:calc(100vw - 32px);padding:14px 16px 8px;background:var(--blond-6);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px -15px rgb(48 43 36 / .3);text-align:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(6px);transition:opacity 160ms,transform 200ms var(--ease),visibility 160ms}
.phone-info::after{content:'';position:absolute;top:100%;left:0;right:0;height:95px}
.phone-slot.is-inspected .phone-info{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.phone-work{font-size:13px;line-height:1.4;color:var(--sc-ink-soft)}
.phone-result{display:flex;align-items:baseline;justify-content:center;gap:7px;font-size:12px;line-height:1.3;margin-top:4px;white-space:nowrap}
.phone-result strong{font-size:28px;letter-spacing:-.045em;font-weight:600}
.phone-contribution{font-size:20px;font-weight:550;line-height:1.2;letter-spacing:-.035em;margin:7px 0 9px}
.phone-highlights{font-size:12px;line-height:1.4;margin-top:5px;color:var(--sc-ink-soft)}
.phone-proof-note{font-size:12px;line-height:1.4;margin-top:5px;color:var(--sc-ink-soft)}
.phone-audience{font-size:11px;line-height:1.4;margin:0 0 3px;color:var(--sc-ink-soft)}
.phone-links{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:2px;position:relative;z-index:1}
.phone-links a{display:inline-flex;align-items:center;min-height:36px;font-size:13px;text-decoration:underline;text-decoration-color:var(--blond-1);text-underline-offset:4px;white-space:nowrap}
.phone-links a:hover{color:var(--sc-accent)}
.carousel-data-note{font-size:12px;color:var(--sc-ink-soft);text-align:center;margin:18px 24px 0;line-height:1.5}
.client-strip{padding-top:44px}
.no-js .phone-list{position:relative;display:flex;gap:28px;padding:30px 24px;overflow-x:auto;perspective:none}
.no-js .phone-slot{position:relative;left:auto;top:auto;flex:0 0 190px;aspect-ratio:auto;transform:none}
.no-js .phone-screen{transform:none;pointer-events:none}
.no-js .carousel-controls{display:none}
.no-js .phone-stage{height:auto}
.no-js .metric-ground{display:none}
.no-js .hero-metric{position:relative;inset:auto;padding:20px 0 30px}
.no-js .phone-carousel{margin-top:35px}
.no-js .phone-info{position:relative;left:auto;bottom:auto;width:100%;max-width:none;padding:12px 0;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;pointer-events:auto}
.no-js .phone-info::after{display:none}
.no-js .phone-links{flex-wrap:wrap;gap:0 14px}

@media(max-width:1100px){.about-photo figcaption{background:none}}
@media(max-width:760px){
  .hero{padding-bottom:24px}
  .hero-copy{padding-top:30px}
  .hero h1{font-size:clamp(36px,7.4vw,54px)}
  .hero-lead{font-size:16px;padding-inline:8px}
  .phone-carousel{--phone-w:182px;--phone-step:166px;margin-top:232px}
  .phone-stage{height:516px}
  .phone-slot{transform:translateX(calc(-50% + var(--slot) * var(--phone-step))) translateY(calc(var(--depth) * 14px))}
  .phone-screen{border-radius:23px}
  .phone-screen img{border-radius:19px}
  .phone-slot.is-lifted .phone-screen,.phone-screen:focus-visible{transform:translateY(-20px) rotateY(0) rotateZ(0) scale(1.08)}
  .metric-ground{height:230px;background:linear-gradient(transparent,var(--blond-6) 56%)}
  .hero-metric{bottom:25px}
  #views-count{font-size:128px}
  .metric-number{gap:12px}
  .metric-unit{font-size:34px}
  .hero-metric p{font-size:16px;margin-top:0}
  .carousel-controls{gap:16px}
  .carousel-caption{min-width:0;flex:1}
  .carousel-caption p span{display:block;font-size:12px}
  .carousel-caption p{font-size:14px}
  .carousel-arrow{width:44px;height:44px}
  .client-strip{padding-top:32px}
  .phone-info{bottom:calc(100% + 49px)}
  .phone-info::after{height:75px}
  .phone-links a{min-height:44px}
  .carousel-data-note{font-size:12px;margin-inline:30px}
}
@media(max-width:380px){
  .hero h1{font-size:34px}
  .hero-lead{font-size:15px}
  .hero-actions{gap:16px}
  .hero-actions .button{padding-inline:18px;font-size:13px;gap:14px}
  .hero-actions .inline-link{font-size:12px}
  #views-count{font-size:116px}
  .metric-unit{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  .phone-slot,.phone-screen,.carousel-arrow,.phone-info{transition:none!important}
  .phone-screen{transform:none!important}
  .phone-slot.is-lifted .phone-screen,.phone-slot:hover .phone-screen{outline:3px solid var(--sc-accent);outline-offset:5px}
}
@media(prefers-reduced-transparency:reduce){.site-header,.about-photo figcaption{background:var(--blond-6);backdrop-filter:none}}