
/* Single deliberate look: paper ground, KW black. No dark variant by design. */
:root{
  --paper:#F6F4EE; --ink:#111111; --soft:#5F5B54; --line:#D9D5CB; --block:#111111; --on-block:#F4F1EB;
  --sans:"Avenir Next","Avenir","Nunito Sans","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,6vw,66px);
  --t-lead:clamp(19px,2.35vw,27px); --t-body:clamp(15px,1.5vw,18px); --t-h:clamp(28px,3.6vw,40px); --t-cap:clamp(15px,1.7vw,22px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:var(--t-body);line-height:1.4;-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* fixed + menu */
.plus{position:fixed;z-index:30;right:var(--gut);top:calc(env(safe-area-inset-top,0px) + clamp(22px,5vw,62px));width:48px;height:48px;display:grid;place-items:center;mix-blend-mode:difference;color:#fff}
.plus svg{width:44px;height:44px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.plus[aria-expanded="true"] svg{transform:rotate(45deg)}
.menu{position:fixed;inset:0;z-index:20;background:var(--paper);background-image:inherit;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,4vh,44px);padding-inline:var(--gut);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu.open{opacity:1;visibility:visible}
.menu a{font-size:clamp(30px,5.4vw,58px);line-height:1.1;width:max-content}
.menu a:hover{opacity:.55}

/* header on inner pages */
.top{padding:clamp(24px,5vw,60px) var(--gut) 0;min-height:clamp(90px,14vw,170px)}
.top img{width:clamp(96px,13vw,150px)}

/* hero */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#222}
.hero>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.hero .mark{position:absolute;z-index:2;left:50%;top:74%;transform:translate(-50%,-50%);width:min(48vw,400px)}

.wrap{padding-inline:var(--gut)}
.lead{padding-block:clamp(70px,11vw,150px) clamp(60px,9vw,130px);display:grid;gap:1.25em;font-size:var(--t-lead);line-height:1.22;font-weight:400;max-width:1500px}
.lead p{margin:0;max-width:44em}
.lead .go{font-size:var(--t-body);margin-top:.6em;display:flex;gap:2.2em;flex-wrap:wrap}
.go a,.link{border-bottom:1px solid currentColor;padding-bottom:3px}
.go a:hover,.link:hover{opacity:.55}
.wide img{width:100%;height:auto;aspect-ratio:1400/924;object-fit:cover;object-position:50% 0}

/* results carousel (sits where her testimonials sit) */
.results{padding-block:clamp(60px,8vw,110px) clamp(30px,4vw,60px)}
.track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,10vw,150px);min-height:11em}
.res p{margin:0 0 1.3em;max-width:24em;font-size:var(--t-cap);line-height:1.3}
.res .who{font-weight:600;font-size:var(--t-body)}
.res a:hover{opacity:.55}
.arrows{display:flex;gap:clamp(36px,6vw,68px);margin-top:clamp(30px,5vw,70px)}
.arrows svg{width:54px;height:22px}
.arrows button:hover{opacity:.5}

/* outlet strip (sits where her social strip sits) */
.label{text-align:center;font-weight:600;font-size:16px;letter-spacing:.04em;color:var(--soft);margin:0 0 26px}
.strip{overflow:hidden;padding:10px 0 clamp(50px,7vw,90px);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip-track{display:flex;align-items:center;width:max-content;animation:strip 45s linear infinite}
.strip:hover .strip-track,.strip:focus-within .strip-track{animation-play-state:paused}
.strip a{flex:none;display:block;margin-right:clamp(34px,6vw,84px)}
.strip img{height:clamp(20px,2.6vw,32px);width:auto;max-width:none;display:block;opacity:.9}
@keyframes strip{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip{overflow-x:auto;padding-left:var(--gut)}.strip-track [aria-hidden]{display:none}}

/* work grid, edge to edge like her clients page */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,14.5vw,158px);row-gap:clamp(40px,7vw,80px);padding-bottom:clamp(70px,10vw,140px)}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;transition:opacity .4s}
.card:hover img{opacity:.86}
.card .cap{padding:clamp(14px,2.2vw,30px) clamp(14px,2.8vw,30px) 0;display:grid;gap:.35em}
.card .t{font-size:var(--t-cap);line-height:1.25}
.card .m{font-size:12px;letter-spacing:.09em;color:var(--soft)}
.pagehead{font-size:var(--t-h);font-weight:400;line-height:1.15;margin:0;padding:clamp(20px,4vw,50px) var(--gut) clamp(40px,6vw,80px);text-wrap:balance}

/* inner pages */
.inner{padding-inline:var(--gut);padding-bottom:clamp(80px,12vw,160px)}
.inner>img.ph{width:100%;height:clamp(280px,56vw,760px);object-fit:cover;object-position:50% 25%}
.inner>img.ph.top{object-position:50% 0}
.cols{padding:clamp(40px,7vw,90px) clamp(0px,2.8vw,30px) 0;display:grid;gap:clamp(60px,10vw,140px)}
.cols h1,.cols h2{font-size:var(--t-cap);font-size:clamp(22px,2.5vw,28px);font-weight:400;line-height:1.2;margin:0 0 1em;max-width:16em;text-wrap:balance}
.cols h1{font-size:var(--t-h);max-width:18em}
.cols p{margin:0 0 1em;max-width:36em;font-size:clamp(16px,1.8vw,21px);line-height:1.35}
.svc{display:grid;gap:clamp(50px,9vw,120px)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px 40px;border-top:1px solid var(--line);padding-top:clamp(30px,5vw,60px)}
.steps h3{font-size:clamp(17px,1.8vw,21px);font-weight:600;margin:0 0 .4em}
.steps p{font-size:var(--t-body);color:var(--soft);margin:0}

/* case page */
.case .meta{font-size:12px;letter-spacing:.09em;color:var(--soft);margin:0 0 14px}
.casegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,8vw,120px);align-items:start}
.casegrid img.ph{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}
.casegrid img.ph.mag{aspect-ratio:135/179;object-fit:contain}
.case h1{font-size:var(--t-h);font-weight:400;line-height:1.12;margin:0 0 clamp(30px,5vw,60px);text-wrap:balance}
.case dl{margin:0;display:grid;gap:clamp(22px,3vw,34px)}
.case dt{font-size:12px;letter-spacing:.09em;color:var(--soft);margin-bottom:6px}
.case dd{margin:0;font-size:clamp(17px,1.9vw,22px);line-height:1.32;max-width:26em}
.case .stat{margin-top:clamp(34px,5vw,60px);padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.case .stat span{font-size:clamp(22px,2.6vw,30px)}
.case .stat img{height:26px;width:auto}
.next{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(60px,9vw,120px);font-size:var(--t-cap)}
.next a:hover{opacity:.55}

/* footer block */
footer{background:var(--block);color:var(--on-block);padding:clamp(40px,4.5vw,52px) var(--gut) calc(clamp(40px,4.5vw,52px) + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
footer img{width:clamp(110px,12vw,150px)}
footer .r{text-align:right;display:grid;gap:4px;margin-left:auto}
footer .r a:hover{opacity:.6}
footer small{font-size:inherit;margin-top:clamp(30px,6vw,70px)}

@keyframes rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.hero .mark{animation:rise 1.2s .15s both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media (max-width:640px){
  .track{grid-template-columns:1fr}.track .res.second{display:none}
  .casegrid{grid-template-columns:1fr}
  .grid{column-gap:12px}
  .card .m{font-size:10.5px}
}

/* KW editorial refresh, September 2026. */
@font-face{font-family:KW Helvetica;src:url('/fonts/NeueHelveticaPro55Roman/font.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--paper:#f8f8f3;--sans:'KW Helvetica','Helvetica Neue',Arial,sans-serif;--gut:clamp(22px,3vw,48px);--t-body:16px;--t-lead:clamp(24px,2.7vw,38px);--t-cap:clamp(18px,1.7vw,24px)}
body{background-image:none;line-height:1.45}
.skip{position:fixed;top:-80px;left:20px;z-index:100;background:var(--paper);padding:12px}.skip:focus{top:10px}
.site-header{height:112px;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gut);position:relative;z-index:30;background:var(--paper)}
.brand img{width:116px;height:auto}.desktop-nav{display:flex;gap:23px;font-size:14px}.desktop-nav a{padding:8px 0;border-bottom:1px solid transparent}.desktop-nav a:hover,.desktop-nav a[aria-current=page]{border-bottom-color:currentColor}
.home .site-header{position:absolute;inset:0 0 auto;background:transparent;color:white;height:82px}.home .brand{visibility:hidden}
.menu-toggle{display:none}.menu[hidden]{display:none}
.hero{height:100svh;min-height:540px}.hero .mark{top:50%;width:clamp(270px,37vw,530px);animation:none}.hero::after{background:rgba(0,0,0,.18)}
.lead{padding:100px var(--gut) 108px;gap:30px;max-width:1320px;line-height:1.28}.lead p{max-width:34em}.lead h1{font-size:inherit}.lead .go{font-size:15px;gap:28px;margin-top:10px}
.wide{padding-inline:var(--gut)}.wide img{aspect-ratio:16/10;object-position:50% 22%}
.results{padding-block:90px 75px}.track{gap:12vw;min-height:150px}.res p{font-size:23px}.res .who{font-weight:400;font-size:14px}.arrows{margin-top:38px}.arrows button{padding:12px 0}.arrows svg{width:42px}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:7.4vw;row-gap:42px;padding:0 0 90px}.card .cap{padding:15px 20px 0}.card .t{font-size:17px;line-height:1.4}.card .m{font-size:10px;letter-spacing:.045em;line-height:1.5}.card img{aspect-ratio:3/4}
.label{font-size:13px;font-weight:400;letter-spacing:.12em;margin:0 0 34px}.pagehead{font-size:28px;padding-block:46px 48px}
.clients-heading{font-size:13px;font-weight:400;letter-spacing:.07em;margin:22px var(--gut) 42px;color:var(--soft)}
.clients-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 7.4vw}.client-card img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;transition:opacity .25s}.client-card:hover img{opacity:.85}.client-card h2{margin:13px 20px 0;font-size:17px;line-height:1.4;font-weight:400}.archive-link{margin:65px var(--gut) 100px;font-size:15px}
.inner{padding-top:35px}.inner:not(.case){display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start;padding-top:62px}.inner:not(.case)>img.ph{height:auto;aspect-ratio:3/4;object-position:center;position:sticky;top:30px}.inner:not(.case) .cols{padding:0;gap:50px}.cols h1{font-size:clamp(28px,3vw,42px);line-height:1.15}.cols h2{font-size:23px}.cols p{font-size:18px;line-height:1.55}.svc{gap:35px}.steps{grid-template-columns:1fr 1fr;gap:28px}.steps h3{font-size:16px;font-weight:400}.steps p{font-size:15px}.case{padding-top:55px}.case h1{font-size:clamp(30px,3.2vw,44px)}.case dd{font-size:19px;line-height:1.5}
footer{background:var(--paper);color:var(--ink);border-top:1px solid #e2e2d9;padding:45px var(--gut);align-items:flex-start;font-size:14px}footer .r{gap:7px}footer small{font-size:11px;margin-top:35px}footer img{width:116px}
@media(max-width:900px){.grid,.clients-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:7vw}.inner:not(.case){gap:5vw}.steps{grid-template-columns:1fr}.lead{padding-block:75px}.res p{font-size:21px}}
@media(max-width:640px){
.site-header{height:92px;padding:18px 22px}.brand img{width:94px}.desktop-nav{display:none}.home .site-header{height:82px}.menu-toggle{display:flex;position:relative;z-index:32;width:44px;height:44px;flex-direction:column;justify-content:center;gap:7px;align-items:center}.menu-toggle span{width:25px;height:1px;background:currentColor;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:absolute;inset:0 0 auto;min-height:360px;padding:98px 25px 35px;gap:22px;display:flex;background:var(--paper);color:var(--ink);justify-content:flex-start;opacity:1;visibility:visible;z-index:31}.menu a{font-size:30px}.site-header:has(.menu.open){color:var(--ink)}
.hero{min-height:480px}.hero>img.bg{object-position:48% 22%}.hero .mark{width:72vw;max-width:340px}.lead{padding:62px 24px 65px;font-size:25px;gap:25px}.lead .go{font-size:14px}.wide{padding:0}.wide img{aspect-ratio:4/5;object-position:47% center}.results{padding-block:56px}.track{min-height:155px}.grid,.clients-grid{gap:30px 20px}.card .cap,.client-card h2{padding:0;margin:12px 12px 0}.card .t,.client-card h2{font-size:15px}.card .m{font-size:9px}.clients-heading{margin:28px 22px 32px;font-size:12px}.archive-link{margin:45px 22px 65px}.pagehead{font-size:25px;padding-top:30px}.inner:not(.case){display:flex;flex-direction:column;padding-top:25px;gap:40px}.inner:not(.case)>img.ph{position:static;aspect-ratio:4/3;object-position:50% 20%}.inner:not(.case) .cols{padding:0}.cols h1{font-size:32px}.cols p{font-size:17px}.steps{grid-template-columns:1fr 1fr}.steps p{font-size:14px}.case{padding-top:25px}.case dd{font-size:18px}footer{padding:35px 22px;font-size:13px}footer .r{max-width:220px}footer img{width:85px}
}

/* Preserve the original portrait composition of the Caviar Kaspia photograph. */
.campaign-feature{padding:0 var(--gut)}.campaign-feature figure{max-width:760px;margin:0 auto}.campaign-feature img{display:block;width:100%;height:auto}.campaign-feature figcaption{padding-top:18px;font-size:14px;line-height:1.6}.campaign-feature figcaption a{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.campaign-feature figcaption a span{border-bottom:1px solid currentColor}.campaign-feature figcaption small{display:block;font-size:11px;color:var(--soft);margin-top:8px}@media(max-width:640px){.campaign-feature{padding:0}.campaign-feature figcaption{padding:16px 22px 0;font-size:13px}}

/* Mobile review: consistent image spacing, readable captions and stable case links. */
.next a{display:flex;gap:8px;align-items:flex-start;max-width:48%}.next a>span[aria-hidden]{flex:none}.next a:last-child{text-align:right;margin-left:auto}.case .stat img{max-width:100%;height:auto;max-height:32px;object-fit:contain}
@media(max-width:640px){.inner:not(.case){gap:32px}.inner:not(.case)>img.ph{aspect-ratio:auto;height:auto}.inner:not(.case)>.cols{width:100%;padding-top:0}.card .m{font-size:11px;letter-spacing:.035em}.next{font-size:16px;gap:24px}.next a{min-height:44px}.case .stat{align-items:flex-start}.case .stat span{font-size:21px}footer .r{font-size:13px}footer small{max-width:200px}}

/* Campaign photography and client endorsements. */
.campaign-feature{display:grid;grid-template-columns:1fr 1fr;gap:28px}.campaign-feature figure{max-width:none;width:100%;margin:0}.campaign-feature img{aspect-ratio:2/3;object-fit:cover}.campaign-feature figcaption a{display:block}.campaign-feature figcaption a span{display:table;margin-top:5px}
.testimonials{padding-block:100px 90px}.testimonial-track{display:grid;grid-template-columns:1fr 1fr;gap:10vw;min-height:320px}.testimonial{margin:0;display:flex;flex-direction:column;justify-content:space-between}.testimonial[hidden]{display:none}.testimonial blockquote{margin:0 0 28px}.testimonial p{font-size:clamp(20px,2vw,27px);line-height:1.45;margin:0;font-weight:400}.testimonial figcaption{font-size:15px}.testimonial figcaption span{display:block;font-size:13px;color:var(--soft);margin-top:5px}.testimonial-controls{display:flex;gap:30px;align-items:center;margin-top:35px}.testimonial-controls button{display:flex;align-items:center;justify-content:center;width:56px;height:48px;padding:0}.testimonial-controls svg{width:48px;height:22px}.testimonial-controls span{font-size:12px;color:var(--soft);margin-left:auto}.testimonial-controls button:hover{opacity:.55}
.inner:not(.case)>img[src*="tuhw-activation"]{aspect-ratio:3/2;position:static}
@media(max-width:640px){.campaign-feature{grid-template-columns:1fr;gap:40px}.testimonials{padding-block:60px}.testimonial-track{grid-template-columns:1fr;min-height:365px;gap:0}.testimonial p{font-size:22px}.testimonial-controls{margin-top:25px}.testimonial figcaption{font-size:15px}}
