:root{
  --bg:#f4f1ea;
  --ink:#11110f;
  --muted:#6d6a64;
  --line:#cac6bd;
  --accent:#d84d2a;
  --black:#111;
  --shell:min(1180px, calc(100vw - 48px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
.shell{width:var(--shell);margin-inline:auto}
.site-header{width:var(--shell);margin:0 auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:10}
.mini-wordmark{font-family:"Roboto Condensed",sans-serif;font-weight:500;letter-spacing:.36em;font-size:15px}
nav{display:flex;gap:36px;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:.15em;font-size:13px}
nav a{padding:12px 0;position:relative}
nav a:after{content:"";position:absolute;left:0;right:100%;bottom:7px;height:1px;background:var(--ink);transition:right .25s ease}
nav a:hover:after{right:0}
.hero{padding:72px 0 74px}
.hero-wordmark{font-family:"Roboto Condensed",sans-serif;font-weight:500;letter-spacing:.21em;font-size:clamp(52px,9vw,122px);line-height:.92;display:flex;gap:.34em;flex-wrap:wrap;margin-bottom:42px}
.hero-wordmark span:nth-child(2){color:var(--accent)}
.hero-copy{max-width:650px;font-size:clamp(19px,2vw,27px);line-height:1.35;margin:0;font-weight:400;letter-spacing:-.02em}
.work{padding:32px 0 86px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;border-top:1px solid var(--line);padding-top:18px}
.section-heading h1,.section-heading h2{margin:0;font-family:"Roboto Condensed",sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.25em;font-weight:500}
.section-heading span{text-transform:uppercase;letter-spacing:.17em;font-size:11px;color:var(--muted)}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:row dense;gap:5px}
.tile{position:relative;min-height:300px;overflow:hidden;background:#d8d4cb;grid-column:span 3;isolation:isolate}
.tile.wide{grid-column:span 6;min-height:330px}.tile.feature-wide{grid-column:span 6;min-height:430px}.tile.square{grid-column:span 4;min-height:340px}.tile.portrait{grid-column:span 3;min-height:430px}
.image-tile img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.image-tile:hover img,.video-project:hover img{transform:scale(1.025);filter:saturate(1.04)}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.74) 100%);z-index:1}
.tile-copy{position:absolute;z-index:2;left:24px;right:24px;bottom:21px;color:white}.tile-copy h2{margin:0 0 8px;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;font-size:clamp(24px,2.5vw,40px);line-height:.95;letter-spacing:.02em;font-weight:500}.tile-copy p{margin:0;font-size:11px;letter-spacing:.13em;text-transform:uppercase;opacity:.92}
.play{position:absolute;right:20px;top:20px;z-index:3;width:42px;height:42px;border:1px solid rgba(255,255,255,.9);border-radius:50%;color:#fff;display:grid;place-items:center;font-size:11px;padding-left:2px;background:rgba(0,0,0,.12);backdrop-filter:blur(3px)}
.video-project{cursor:pointer}
.brand-tile{padding:25px;display:flex;flex-direction:column;justify-content:space-between;min-height:340px;transition:filter .2s ease,transform .25s ease}
.brand-tile:hover{filter:saturate(1.06);transform:translateY(-1px)}
.brand-top{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.14em;font-size:11px}.brand-top .arrow{font-size:22px;line-height:1}.brand-tile small{text-transform:uppercase;letter-spacing:.15em;font-size:10px}.brand-tile h2{font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;font-weight:500;font-size:clamp(44px,6vw,88px);line-height:.83;letter-spacing:-.03em;margin:12px 0 0}.brand-tile:not(.wide) h2{font-size:clamp(36px,4vw,62px)}
.fiji{background:#54bcd0;color:#062c36}.olipop{background:#e7c86e;color:#351d1b}.oofos{background:#d7cabc;color:#261e19}.uber{background:#111;color:#fff}.google{background:#cc4a3e;color:#fff}
.about{padding:42px 0 100px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding-top:34px}.about-lead{font-size:clamp(35px,5vw,65px);line-height:.98;letter-spacing:-.045em;margin:0;max-width:560px}.about-body{max-width:570px;font-size:18px;line-height:1.55}.about-body p{margin:0 0 22px}.profile-links{display:flex;gap:24px;margin-top:34px;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:12px}.profile-links a{border-bottom:1px solid var(--ink);padding-bottom:3px}
.contact{background:#121212;color:#f6f3ec}.contact-inner{padding:58px 0 34px}.contact-label{text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:#b7b4ae;margin:0 0 28px}.contact-main{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:54px}.contact-main h2{font-size:clamp(48px,7vw,94px);line-height:.96;font-weight:400;letter-spacing:-.04em;margin:0}.contact-main strong{font-weight:700;letter-spacing:-.055em}.contact-main .on{text-transform:uppercase;font-weight:700;color:#ef6c49}.contact-button{white-space:nowrap;border:1px solid #ef6c49;padding:17px 24px;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:12px;transition:background .2s,color .2s}.contact-button:hover{background:#ef6c49;color:#111}.contact-bottom{border-top:1px solid #4a4946;padding-top:25px;display:grid;grid-template-columns:1.3fr 1.5fr 1fr 1fr;gap:24px;font-size:12px;color:#d3d0ca}.contact-bottom>span:first-child{font-family:"Roboto Condensed",sans-serif;letter-spacing:.3em}
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:28px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.84);backdrop-filter:blur(5px)}.modal-card{position:relative;z-index:1;width:min(1080px,96vw);background:#111;color:#fff;padding:20px;box-shadow:0 30px 90px rgba(0,0,0,.5)}.modal-close{position:absolute;right:14px;top:8px;border:0;background:transparent;color:#fff;font-size:36px;line-height:1;cursor:pointer;z-index:3}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:4px 46px 16px 0}.modal-head h2{font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-weight:500;margin:0;font-size:18px}.video-tabs{display:flex;gap:8px}.video-tabs button{border:1px solid #555;background:transparent;color:#ddd;padding:7px 10px;font:inherit;font-size:11px;cursor:pointer}.video-tabs button.active{border-color:#ef6c49;color:#fff}.video-wrap{position:relative;aspect-ratio:16/9;background:#000}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:900px){:root{--shell:min(100% - 28px,1180px)}.site-header{min-height:72px}.mini-wordmark{font-size:13px;letter-spacing:.28em}nav{gap:18px;font-size:11px}.hero{padding:48px 0 58px}.hero-wordmark{font-size:clamp(54px,13vw,90px);gap:.24em}.work-grid{grid-template-columns:repeat(6,1fr)}.tile,.tile.portrait,.tile.square{grid-column:span 3}.tile.wide,.tile.feature-wide{grid-column:span 6}.about-grid{grid-template-columns:1fr;gap:36px}.contact-main{align-items:flex-start;flex-direction:column}.contact-bottom{grid-template-columns:1fr 1fr}}
@media(max-width:600px){nav a:nth-child(2){display:none}.hero-wordmark{display:block;line-height:.87}.hero-wordmark span{display:block}.hero-copy{font-size:20px}.section-heading{align-items:flex-start}.section-heading span{font-size:9px}.work-grid{display:block}.tile,.tile.wide,.tile.feature-wide,.tile.square,.tile.portrait{min-height:0;aspect-ratio:1.2/1;margin-bottom:5px}.tile.portrait{aspect-ratio:.83/1}.brand-tile{aspect-ratio:1.2/1!important;padding:20px}.tile-copy{left:18px;bottom:17px}.contact-main h2{font-size:48px}.contact-bottom{grid-template-columns:1fr;gap:13px}.modal{padding:12px}.modal-card{padding:12px}.modal-head{display:block;padding-right:35px}.video-tabs{margin-top:10px}.site-header nav{gap:14px}}


/* V6 — dark editorial direction */
:root{
  --bg:#0d0e0e;
  --ink:#f2f0e9;
  --muted:#aaa8a2;
  --line:#333432;
  --accent:#e45835;
  --black:#090a0a;
}
body{background:var(--bg);color:var(--ink)}
.site-header{border-bottom-color:var(--line)}
nav a:after{background:var(--accent)}
.hero{padding:62px 0 58px}
.hero-wordmark{margin-bottom:34px;color:var(--ink)}
.hero-wordmark span:nth-child(2){color:var(--ink)}
.hero-copy{color:#d9d7d1;max-width:720px;font-size:clamp(18px,1.7vw,24px)}
.work{padding-top:24px}
.section-heading{border-top-color:var(--line)}
.section-heading span{color:var(--muted)}
.tile{background:#171818;border:1px solid #202120}
.image-tile img{filter:saturate(.9) brightness(.88)}
.image-tile:hover img,.video-project:hover img{filter:saturate(1.02) brightness(.94)}
.shade{background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.82) 100%)}
.about{padding:44px 0 92px}
.about .section-heading{margin-bottom:0}
.about-grid{grid-template-columns:minmax(0,760px);padding-top:36px;gap:0}
.about-body{max-width:760px;font-size:18px;line-height:1.62;color:#cbc9c3}
.about-intro{font-size:clamp(28px,3.6vw,48px);line-height:1.08;letter-spacing:-.035em;color:var(--ink);margin-bottom:28px!important}
.profile-links a{border-bottom-color:#777}
.contact{background:#080909}
.contact-label{display:none}
.contact-inner{padding-top:58px}
.contact-main h2{font-size:clamp(48px,6.5vw,88px);font-weight:400}
.contact-button{border-color:var(--accent)}
.contact-button:hover{background:var(--accent)}
.contact-bottom{border-top-color:#30312f}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}


/* V6.1 — brighter brand moments + recurring ON signature */
.accent-on{color:var(--accent)!important}
.mini-wordmark .accent-on{font-weight:600}
.hero-wordmark span:nth-child(2){color:var(--accent)}
.contact-bottom .accent-on{font-weight:600}

/* Let the brand work punctuate the dark editorial canvas. */
.brand-tile{border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fiji{background:#50c9df;color:#062b33}
.oofos{background:#2779df;color:#f7f8fa}
.olipop{background:#ef7e73;color:#2d1515}
.uber{background:#f0ede5;color:#101111}
.google{background:#f1c84c;color:#191919}
.brand-tile:hover{filter:saturate(1.12) brightness(1.03)}
.brand-tile .arrow{transition:transform .2s ease}
.brand-tile:hover .arrow{transform:translate(2px,-2px)}
.youtube-fallback{display:inline-block;margin-top:14px;color:#ddd;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:11px;border-bottom:1px solid var(--accent);padding-bottom:3px}

/* V6.2: subtle RIGHT ON signature in closing line */
.song-on{color:var(--accent);font-weight:inherit}


/* V6.3: complete row rhythm + RIGHT/ON footer accent */
.song-right,.song-on{color:var(--accent);font-weight:inherit}
.fiji-fill{grid-column:span 8;min-height:340px}
@media(max-width:900px){.fiji-fill{grid-column:span 6}}
@media(max-width:600px){.fiji-fill{aspect-ratio:1.2/1!important}}

/* V6.5 — finalized capabilities line */
.capabilities{margin:18px 0 0;max-width:1040px;color:var(--muted);font-family:"Roboto Condensed",sans-serif;font-size:clamp(11px,1vw,14px);font-weight:500;letter-spacing:.09em;line-height:1.8;text-transform:uppercase}
.capabilities span{color:var(--accent);padding:0 .28em}
@media(max-width:600px){.capabilities{font-size:11px;letter-spacing:.065em;line-height:1.9}.capabilities span{padding:0 .18em}}

/* V6.6 — stripped-back centered hero */
.hero{text-align:center;padding:72px 0 72px}
.hero-wordmark{justify-content:center;margin-bottom:26px}
.capabilities{margin:0 auto;max-width:1100px;text-align:center}
@media(max-width:600px){
  .hero{padding:52px 0 58px}
  .hero-wordmark{display:flex;justify-content:center;gap:.22em;line-height:.92;font-size:clamp(43px,13vw,66px)}
  .hero-wordmark span{display:inline}
  .capabilities{max-width:340px}
}