:root{
  --cream:#F0EADF; --ember:#E8743B; --navy:#2C3B4D;
  --line: rgba(44,59,77,.18);
  --sans:'Hanken Grotesk','Helvetica Neue',sans-serif;
  --mono:'Fragment Mono',ui-monospace,monospace;
  --gap:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream)}
body{background:var(--cream);color:var(--navy);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
video{display:block;width:100%;height:100%;object-fit:cover}
.pad{padding-inline:clamp(16px,3vw,40px)}
.mono{font:400 12px/1.5 var(--mono);letter-spacing:.03em;text-transform:uppercase}
.grain{pointer-events:none;position:fixed;inset:0;z-index:90;opacity:.06;mix-blend-mode:multiply;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding-block:20px;color:#fff;mix-blend-mode:difference}
.nav .logo{font:900 22px/1 var(--sans);letter-spacing:-.06em}
.nav nav{display:flex;gap:28px}
.nav nav a:hover{text-decoration:underline}

/* ---------- 01 hero: motion film ---------- */
.hero{position:relative;width:100%;aspect-ratio:16/9;background:var(--navy);overflow:hidden}
@media (max-aspect-ratio: 4/5){.hero{aspect-ratio:9/16}}
.hero .cue{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference}

/* ---------- 02 showreel ---------- */
.reel{padding-block:clamp(40px,6vw,80px) 0}
.reel .head{display:flex;justify-content:space-between;padding-bottom:14px}
.reel .frame{position:relative;aspect-ratio:16/9;background:var(--navy);overflow:hidden}

/* ---------- media card + sound button ---------- */
.m{position:relative;overflow:hidden;background:var(--navy)}
.m iframe,.reel .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.m::after{content:"";position:absolute;inset:0;background:var(--ember);mix-blend-mode:multiply;opacity:0;transition:opacity .4s;pointer-events:none}
@media (hover:hover){.card:hover .m::after{opacity:.28}}
a,button,.card,.r{-webkit-tap-highlight-color:transparent}
@media (hover:none){.grain{display:none}.m::after{display:none}}
.snd{position:absolute;z-index:3;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(240,234,223,.92);color:var(--navy);transition:transform .2s,background .2s}
.snd:hover{transform:scale(1.08)}
.watch{position:absolute;z-index:3;right:10px;bottom:10px;height:36px;padding:0 14px;border:0;border-radius:18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:rgba(240,234,223,.92);color:var(--navy);transition:background .2s,color .2s}
.watch i{font-style:normal;font-size:9px}
.card:hover .watch{background:var(--ember);color:#fff}
.snd.on{background:var(--ember)}
.snd svg{width:18px;height:18px}
.snd .w{display:none}
.snd.on .w{display:inline}
.snd.on .x{display:none}

/* ---------- 03 work mosaic ---------- */
.work{padding-block:clamp(70px,9vw,120px) 0}
.work h2{font:800 clamp(28px,4vw,64px)/.92 var(--sans);letter-spacing:-.05em;max-width:14ch}
.work h2 .dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--ember);vertical-align:.02em}
.work .intro{display:flex;justify-content:space-between;align-items:end;gap:16px;padding-bottom:36px}
.mosaic{display:flex;flex-direction:column;gap:calc(var(--gap)*2.5)}
.row{display:flex;gap:var(--gap)}
.card{display:block;min-width:0}
.row.solo{justify-content:center}
.row.solo .card{max-width:62%}
.card .c{display:flex;justify-content:space-between;gap:12px;padding-top:10px}
.card h3{font:600 17px/1.15 var(--sans);letter-spacing:-.01em}
.card .mono{opacity:.7;white-space:nowrap}
.card.v .c{flex-direction:column;gap:2px}

/* ---------- 04 disciplines (stripes) ---------- */
.disc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:clamp(70px,8vw,110px)}
.disc div{padding:24px 16px 40px 0;border-right:1px solid var(--line)}
.disc div+div{padding-left:16px}
.disc div:last-child{border-right:0}
.disc b{display:block;font:800 clamp(28px,3.4vw,52px)/.9 var(--sans);letter-spacing:-.04em;margin-top:28px;transition:color .2s}
.disc div:hover b{color:var(--ember)}

/* ---------- 05 project index (table) ---------- */
.index{padding-block:clamp(70px,8vw,110px) 0}
.index .hd,.index .r{display:grid;grid-template-columns:60px 2fr 1.4fr 1fr 110px;gap:16px;align-items:baseline}
.index .hd{padding:10px 0;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);opacity:.6}
.index .r{padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s,color .15s,padding .25s}
.index .r b{text-transform:none;font:600 clamp(19px,2vw,28px)/1.05 var(--sans);letter-spacing:-.02em}
.index .r:hover{background:var(--navy);color:var(--cream);padding-inline:12px}
.index .r:hover b{color:var(--ember)}
.peek{position:fixed;z-index:60;width:260px;pointer-events:none;opacity:0;transition:opacity .15s;transform:translate(-50%,-112%);border:3px solid var(--ember);background:var(--navy)}
.peek.on{opacity:1}
.peek img{display:block;width:100%;height:auto}

/* ---------- 06 insights ---------- */
.ins{padding-block:clamp(70px,8vw,110px) 0}
.ins .top{display:flex;justify-content:space-between;align-items:end;padding-bottom:22px}
.ins h2{font:800 clamp(28px,4vw,64px)/.92 var(--sans);letter-spacing:-.05em}
.ins .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.ins a{display:block}
.ins .img{aspect-ratio:4/5;overflow:hidden;background:var(--navy)}
.ins img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.8,.1,1)}
.ins a:hover img{transform:scale(1.05)}
.ins h4{font:600 19px/1.15 var(--sans);letter-spacing:-.015em;margin-top:8px}
.ins .meta{display:flex;gap:10px;margin-top:12px}
.ins .meta span:first-child{color:var(--ember)}
.ins a:hover h4{color:var(--ember)}

/* ---------- refuse to look average ---------- */
.refuse{padding-block:clamp(90px,12vw,180px) clamp(40px,5vw,70px)}
.refuse h2{font:800 clamp(52px,11vw,176px)/.9 var(--sans);letter-spacing:-.055em}
.refuse .avg{position:relative;color:rgba(44,59,77,.36)}
.refuse .avg::after{content:"";position:absolute;left:-1.5%;right:-1.5%;top:54%;height:.075em;background:var(--ember)}
.refuse .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(36px,5vw,64px);padding-top:16px;border-top:1px solid var(--line)}
.refuse .foot a{border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.refuse .foot a:hover{color:var(--ember);border-color:var(--ember)}

/* ---------- footer ---------- */
footer{margin-top:clamp(80px,10vw,140px);background:var(--navy);color:var(--cream);padding-block:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
footer .mail{color:var(--ember);border-bottom:1px solid transparent;transition:border-color .2s}
footer .mail:hover{border-color:var(--ember)}

/* ---------- lightbox player ---------- */
.card,.index .r{cursor:pointer}
.lb{position:fixed;inset:0;z-index:100;background:rgba(20,28,38,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 16px 24px}
.lb[hidden]{display:none}
.lb-box{position:relative;width:min(92vw,calc((100svh - 140px)*var(--ar,1.7778)));aspect-ratio:var(--ar,1.7778);background:#000}
.lb-box iframe,.lb-box video{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-snd{position:absolute;z-index:5;top:12px;right:12px;border:0;cursor:pointer;background:var(--ember);color:#fff;padding:12px 16px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.lb-snd[hidden]{display:none}
.lb-snd:hover{background:var(--cream);color:var(--navy)}
.lb-x{position:absolute;top:18px;right:20px;background:none;border:0;color:var(--cream);cursor:pointer;padding:8px}
.lb-x:hover{color:var(--ember)}
.lb-t{color:var(--cream)}
footer a:not(.mail):hover{color:var(--ember)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .nav>a.mono{display:none}
  .nav nav{gap:16px;font-size:11px}
  .row{flex-wrap:wrap}
  .row .card{flex:1 1 100% !important}
  .row.solo .card{max-width:none}
  .row .card.v{flex:1 1 calc(50% - var(--gap)/2) !important}
  .card .c{flex-direction:column;gap:2px}
  .disc{grid-template-columns:1fr 1fr}
  .disc div:nth-child(2){border-right:0}
  .disc div:nth-child(3){padding-left:0}
  .index .hd{display:none}
  .index .r{grid-template-columns:36px 1fr;row-gap:4px}
  .index .r span:nth-child(n+3){grid-column:2}
  .index .r span:nth-child(4),.index .r span:nth-child(5){display:none}
  .ins .grid{grid-template-columns:1fr 1fr;row-gap:28px}
  .peek{display:none}
}

/* ================= inner pages ================= */
.page{padding-top:clamp(110px,14vw,170px)}
.page-head{padding-bottom:clamp(36px,5vw,60px);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end}
.page-head h1{font:800 clamp(44px,8vw,128px)/.88 var(--sans);letter-spacing:-.055em}
.page-head h1 .dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--ember);vertical-align:.02em}
.page-head p{max-width:420px;font:500 17px/1.45 var(--sans);opacity:.8}
.nav.solid{mix-blend-mode:normal;color:var(--navy);background:rgba(240,234,223,.92);backdrop-filter:saturate(1.2) blur(6px)}

/* insights list */
.ins-list{padding-block:clamp(36px,5vw,60px) 0}
.ins-list .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,40px) var(--gap)}
.ins-list .feat{grid-column:span 2}
.ins-list .feat .img{aspect-ratio:16/10}
.ins-list a{display:block}
.ins-list .img{aspect-ratio:4/5;overflow:hidden;background:var(--navy)}
.ins-list img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.8,.1,1)}
.ins-list a:hover img{transform:scale(1.04)}
.ins-list .meta{display:flex;gap:10px;margin-top:12px}
.ins-list .meta span:first-child{color:var(--ember)}
.ins-list h3{font:600 clamp(19px,1.6vw,24px)/1.15 var(--sans);letter-spacing:-.015em;margin-top:8px}
.ins-list .feat h3{font-size:clamp(24px,2.4vw,36px)}
.ins-list p{font:400 15px/1.5 var(--sans);opacity:.75;margin-top:8px;max-width:52ch}
.ins-list a:hover h3{color:var(--ember)}

/* article */
.article{max-width:760px;margin-inline:auto}
.article .kicker{display:flex;gap:14px;flex-wrap:wrap}
.article .kicker span:first-child{color:var(--ember)}
.article h1{font:800 clamp(38px,6vw,84px)/.92 var(--sans);letter-spacing:-.05em;margin-top:18px}
.article .lede{font:500 clamp(18px,1.8vw,22px)/1.45 var(--sans);margin-top:22px;opacity:.85}
.article-cover{margin:clamp(36px,5vw,56px) calc(50% - 50vw + clamp(16px,3vw,40px)) 0;max-width:none}
.article-cover img{width:100%;max-height:78vh;object-fit:cover;display:block}
.prose{padding-top:clamp(36px,5vw,56px);font:400 18px/1.7 var(--sans)}
.prose h2{font:700 clamp(24px,2.6vw,34px)/1.1 var(--sans);letter-spacing:-.025em;margin:2.2em 0 .6em}
.prose h3{font:700 21px/1.2 var(--sans);margin:1.8em 0 .5em}
.prose p,.prose ul,.prose ol{margin-bottom:1.15em}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:700}
.prose blockquote{border-left:3px solid var(--ember);padding-left:18px;font-size:21px;line-height:1.45;margin:1.6em 0}
.prose img{max-width:100%;height:auto;display:block;margin:1.6em 0}
.article-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:56px;padding-top:22px}
.article-foot a:hover{color:var(--ember)}
.more{padding-top:clamp(70px,8vw,110px)}
.more h2{font:800 clamp(28px,4vw,56px)/.92 var(--sans);letter-spacing:-.05em;margin-bottom:22px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,90px);padding-top:clamp(36px,5vw,60px)}
.contact .info{display:flex;flex-direction:column;gap:28px}
.contact .info b{display:block;font:600 clamp(20px,2vw,26px)/1.2 var(--sans);letter-spacing:-.015em;margin-top:6px;text-transform:none}
.contact .info a:hover b{color:var(--ember)}
.form{display:flex;flex-direction:column;gap:22px}
.form label{display:block;margin-bottom:8px}
.form input,.form textarea{width:100%;font:500 18px/1.4 var(--sans);color:var(--navy);background:transparent;border:0;border-bottom:1px solid var(--navy);padding:10px 0;outline:none;border-radius:0}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--ember)}
.form ::placeholder{color:rgba(44,59,77,.45)}
.form button{align-self:flex-start;font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--navy);color:var(--cream);border:0;padding:17px 26px;cursor:pointer;transition:background .2s}
.form button:hover{background:var(--ember);color:var(--navy)}
.form button:disabled{opacity:.6;cursor:default}
.form-status{min-height:1.4em}
.form-status.error{color:#b4421a}
.form-success{border-top:1px solid var(--navy);padding-top:24px}
.form-success h3{font:800 clamp(30px,4vw,52px)/.95 var(--sans);letter-spacing:-.04em;margin-bottom:12px}
.form-success h3 span{color:var(--ember)}

@media (max-width:760px){
  .page-head{grid-template-columns:1fr}
  .ins-list .grid{grid-template-columns:1fr}
  .ins-list .feat{grid-column:auto}
  .contact{grid-template-columns:1fr}
  .prose{font-size:17px}
}

/* ================= landing pages (for-dentists / medspas / law firms / partners) ================= */
.verticals{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:18px 0;border-bottom:1px solid var(--line)}
.verticals>span{opacity:.5}
.verticals a{display:inline-flex;gap:6px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.verticals a:hover{color:var(--ember);border-color:var(--ember)}
.lp-kicker{display:block;color:var(--ember);margin-bottom:18px}
.lp .page-head{align-items:end;grid-template-columns:1.5fr 1fr}
.lp .page-head h1{font-size:clamp(40px,7vw,108px)}
.lp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding-top:clamp(28px,3vw,40px)}
.btn-mz{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--navy);color:var(--cream);padding:17px 26px;transition:background .2s,color .2s}
.btn-mz:hover{background:var(--ember);color:var(--navy)}
.lp-cta .note{max-width:44ch;opacity:.6}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.stats div{padding:clamp(22px,3vw,34px) 20px clamp(22px,3vw,34px) 0;border-right:1px solid var(--line)}
.stats div+div{padding-left:20px}
.stats div:last-child{border-right:0}
.stats b{display:block;font:800 clamp(34px,5vw,72px)/.9 var(--sans);letter-spacing:-.05em;color:var(--ember)}
.stats p{font:400 14px/1.45 var(--sans);opacity:.75;margin-top:12px;max-width:30ch}
.lp-sec{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;gap:clamp(20px,4vw,60px);padding-block:clamp(44px,6vw,84px);border-bottom:1px solid var(--line)}
.lp-sec>div{min-width:0}
.lp-sec .tag{color:var(--ember)}
.lp-sec h2{font:800 clamp(30px,4.4vw,64px)/.94 var(--sans);letter-spacing:-.05em;max-width:18ch}
.lp-sec .lede{font:500 clamp(17px,1.5vw,20px)/1.5 var(--sans);opacity:.85;margin-top:20px;max-width:56ch}
.lp-sec p.body{font:400 17px/1.6 var(--sans);margin-top:16px;max-width:62ch;opacity:.9}
.lp-list{list-style:none;margin-top:28px;border-top:1px solid var(--navy)}
.lp-list li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line);font:600 clamp(17px,1.6vw,22px)/1.3 var(--sans);letter-spacing:-.01em}
.lp-list li span{font:400 12px/1.9 var(--mono);color:var(--ember)}
.meta4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;border-top:1px solid var(--navy)}
.meta4 div{padding-top:12px}
.meta4 span{display:block;opacity:.55}
.meta4 strong{display:block;font:600 16px/1.3 var(--sans);margin-top:6px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:30px}
.compare figure{margin:0}
.compare .im{position:relative;background:var(--navy)}
.compare img{display:block;width:100%;height:auto}
.compare .tag2{position:absolute;left:10px;top:10px;background:var(--cream);color:var(--navy);padding:6px 10px}
.compare .after .tag2{background:var(--ember);color:#fff}
.compare figcaption{font:400 14px/1.45 var(--sans);margin-top:10px;opacity:.8}
.compare figcaption b{display:block;font-weight:700;opacity:1}
.film{position:relative;aspect-ratio:16/9;background:var(--navy);margin-top:28px;overflow:hidden}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.siteprev{margin-top:30px;border:1px solid var(--navy)}
.siteprev .bar{height:30px;background:var(--navy);display:flex;align-items:center;gap:6px;padding:0 12px}
.siteprev .bar i{width:8px;height:8px;border-radius:50%;background:rgba(240,234,223,.4)}
.siteprev .scr{position:relative;aspect-ratio:16/9;background:var(--navy);overflow:hidden}
.siteprev video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.siteprev+p{margin-top:10px;opacity:.65}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:30px;border-top:1px solid var(--navy);border-left:1px solid var(--line)}
.prices div{padding:20px 18px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.prices .n{display:block;opacity:.6}
.prices .v{display:block;font:800 clamp(26px,2.6vw,38px)/1 var(--sans);letter-spacing:-.04em;margin-top:12px}
.prices p{font:400 14px/1.5 var(--sans);opacity:.75;margin-top:10px}
.lp-end{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:end;padding-block:clamp(56px,8vw,110px)}
.lp-end h2{font:800 clamp(34px,6vw,92px)/.9 var(--sans);letter-spacing:-.055em;max-width:14ch}
.lp-end h2 em{font-style:normal;color:var(--ember)}
.lp-end .r{max-width:40ch}
.lp-end .r p{font:400 17px/1.5 var(--sans);opacity:.8;margin-bottom:22px}
.fine{font:400 13px/1.6 var(--sans);opacity:.65;max-width:78ch;margin-top:22px}
.rate-scroll{overflow-x:auto;margin-top:30px;-webkit-overflow-scrolling:touch}
.rate{width:100%;border-collapse:collapse;min-width:640px}
.rate th{text-align:left;font:400 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;opacity:.55;padding:12px 16px 12px 0;border-bottom:1px solid var(--navy);white-space:nowrap}
.rate td{padding:18px 16px 18px 0;border-bottom:1px solid var(--line);vertical-align:top;font:400 15px/1.5 var(--sans)}
.rate td strong{font-weight:700}
.rate .sub{display:block;opacity:.65;font-size:13px;margin-top:4px}
.rate td.p{font:800 20px/1.2 var(--sans);letter-spacing:-.02em;white-space:nowrap}
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3vw,40px);margin-top:30px}
.terms h3{font:700 21px/1.2 var(--sans);letter-spacing:-.015em;margin-bottom:8px}
.terms p{font:400 15px/1.55 var(--sans);opacity:.8}
.pdot{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--ember);margin-left:.1em}
@media (max-width:900px){
  .lp .page-head{grid-template-columns:1fr}
  .lp-sec{grid-template-columns:1fr;gap:14px}
  .meta4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .stats{grid-template-columns:1fr}
  .stats div,.stats div+div{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
  .stats div:last-child{border-bottom:0}
  .compare{grid-template-columns:1fr}
}

/* hidden link to /partners: the © in the footer */
footer a.pl{color:inherit;text-decoration:none;cursor:inherit}