/* diegomotion.net — site styles. One family (Archivo variable, width axis 62–125) does display, headings and body. */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-wdth-italic.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}

:root{
  --bg:#000;
  --fg:#f2efe9;
  --mute:#8d8a84;
  --line:#242321;
  --accent:#ff6a2b;
  --gutter:clamp(20px,4vw,56px);
  --max:1440px;
  --sec:clamp(72px,9vw,128px);
  --gap:clamp(10px,1.2vw,16px);
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);font:400 17px/1.55 var(--font);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-color:var(--mute);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.muted{color:var(--mute)}
.mt{margin-top:var(--gap)}

/* type scale (1.25 ratio from 17px) */
.display{font-weight:800;font-stretch:125%;letter-spacing:-.025em;line-height:.92;font-size:clamp(44px,8.5vw,128px);margin:0;text-transform:uppercase}
.h1{font-weight:800;font-stretch:118%;letter-spacing:-.02em;line-height:1;font-size:clamp(34px,4.6vw,64px);margin:0 0 .6em}
.h2{font-weight:750;font-stretch:112%;letter-spacing:-.015em;line-height:1.05;font-size:clamp(26px,3.2vw,42px);margin:0 0 .7em}
.h3{font-weight:700;font-stretch:108%;letter-spacing:-.01em;line-height:1.15;font-size:clamp(20px,2.1vw,27px);margin:0 0 .6em}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.45;max-width:52ch;margin:0 0 1.6em}
.prose{max-width:66ch}
.prose p{margin:0 0 1em}
.prose h1,.prose h2{font-weight:750;font-stretch:112%;letter-spacing:-.015em;line-height:1.05;font-size:clamp(26px,3.2vw,42px);margin:0 0 .7em}
.prose h3,.prose h4{font-weight:700;font-stretch:108%;line-height:1.15;font-size:clamp(20px,2.1vw,27px);margin:1.4em 0 .5em}
.prose h4{font-size:19px;font-stretch:104%}
.prose ul,.prose ol{padding-left:1.2em}
.prose a{text-decoration-color:var(--fg)}

.btn{display:inline-block;border:1px solid var(--fg);border-radius:999px;padding:.72em 1.5em;font-weight:600;font-stretch:104%;text-decoration:none;line-height:1.1;transition:background .18s,color .18s}
.btn:hover{background:var(--fg);color:var(--bg)}

/* header */
.hdr{display:flex;width:100%;align-items:center;gap:24px;padding:18px var(--gutter);max-width:var(--max);margin-inline:auto;position:relative;z-index:5}
.home .hdr{position:absolute;left:0;right:0;top:0;width:100%}
.hdr-logo img{width:clamp(120px,11vw,160px);height:auto}
.hdr-nav{display:flex;align-items:center;flex:1;gap:24px}
.nav-list,.nav-social,.nav-sub{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
.nav-list{margin-inline:auto}
.nav-social{gap:22px}
.nav-link{background:none;border:0;color:inherit;font:inherit;font-weight:500;cursor:pointer;padding:0;text-decoration:none;position:relative;line-height:1.2}
.nav-link[aria-current]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.4em}
.nav-social a{text-decoration:none;font-weight:500;color:var(--mute)}
.home .nav-social a,.home .nav-link{color:var(--fg);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.nav-social a:hover{color:var(--fg)}
.nav-item.has-sub{position:relative}
.nav-sub{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);flex-direction:column;align-items:flex-start;gap:0;background:#0a0a0a;border:1px solid var(--line);min-width:160px;padding:6px 0;display:none}
.nav-sub a{display:block;padding:9px 16px;text-decoration:none;white-space:nowrap}
.nav-sub a:hover,.nav-sub a[aria-current]{color:var(--accent)}
.nav-item.has-sub.open .nav-sub,.nav-item.has-sub:hover .nav-sub,.nav-item.has-sub:focus-within .nav-sub{display:flex}
.hdr-menu{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:inherit;font:inherit;padding:8px 14px;border-radius:999px;cursor:pointer}
@media (max-width:860px){
  .hdr{flex-wrap:wrap;gap:12px}
  .hdr-menu{display:inline-block}
  .hdr-nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding:18px 0 8px;border-top:1px solid var(--line)}
  .hdr.open .hdr-nav{display:flex}
  .home .hdr.open{background:var(--bg)}
  .nav-list{flex-direction:column;align-items:flex-start;gap:14px;margin:0}
  .nav-sub{position:static;transform:none;border:0;background:none;padding:6px 0 0 14px;display:none}
  .nav-item.has-sub.open .nav-sub{display:flex}
  .nav-item.has-sub:hover .nav-sub{display:none}
  .nav-item.has-sub.open:hover .nav-sub{display:flex}
  .nav-link{font-size:20px}
  .nav-social{gap:18px;padding-top:4px}
}

/* hero */
.hero{position:relative;min-height:min(100svh,960px);display:flex;align-items:flex-end;overflow:hidden;background:#1a0a10}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));pointer-events:none}
.hero-text{position:relative;z-index:1;width:100%;padding-block:clamp(40px,6vw,72px)}
.hero-tag{font-weight:700;font-stretch:110%;font-size:clamp(17px,1.7vw,24px);line-height:1.25;max-width:34ch;margin:.7em 0 1.3em;text-wrap:balance}

/* sections */
.sec{padding-block:var(--sec) 0}
.sec:last-of-type{padding-bottom:var(--sec)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;border-top:1px solid var(--line);padding-top:18px;margin-bottom:28px}
.sec-head .h2,.sec-head .h3{margin:0}
.more{font-weight:500}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:start}
.about-photo{margin:0}
.about-photo img{width:100%}
.reel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);margin-bottom:28px}
@media (max-width:860px){.about-grid,.reel-grid{grid-template-columns:1fr}}

/* quotes: horizontal scroll row */
.quotes{list-style:none;margin:0;padding:0 0 10px;display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,420px);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.quote{scroll-snap-align:start;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:14px}
.quote blockquote{margin:0;font-size:16px;line-height:1.5}
.quote p{margin:0}
.quote .who{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:14px;font-weight:500;margin-top:auto}
.quote .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.quote .who p{margin:0}

/* media grids */
.grid.tall .cell{aspect-ratio:9/16;overflow:hidden}
.grid.tall .cell .player{height:100%}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.cols-2{--cols:2}.cols-3{--cols:3}.cols-4{--cols:4}.cols-5{--cols:5}
.cell{position:relative;background:#0b0b0b}
.cell a{display:block;text-decoration:none}
.cell img,.cell video{width:100%;height:100%;object-fit:cover}
.cell .cap{display:block;padding:10px 0 0;font-size:14px;color:var(--mute)}
.cell a:hover .cap,.cell a:hover .ptitle{color:var(--fg)}
.portfolio .ptitle{display:block;padding:14px 0 0;font-weight:700;font-stretch:108%;font-size:clamp(17px,1.4vw,20px);line-height:1.2}
@media (max-width:860px){.cols-4,.cols-5{--cols:3}}
@media (max-width:600px){.grid{--cols:2}.cols-3.portfolio{--cols:1}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:700px){.two{grid-template-columns:1fr}}

/* players */
.player{margin:0;background:#0b0b0b;aspect-ratio:var(--ar,1.7778)}
.player video{width:100%;height:100%;object-fit:cover;background:#000}
.verticals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
@media (max-width:1000px){.verticals{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.verticals{grid-auto-flow:column;grid-auto-columns:72vw;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.verticals .player{scroll-snap-align:start}}
.loop{width:100%}
.bts{margin-top:clamp(40px,5vw,72px)}

/* youtube lite embed */
.yt{margin:0;position:relative;aspect-ratio:16/9;background:#0b0b0b;max-width:100%}
.yt-play{all:unset;cursor:pointer;display:block;position:absolute;inset:0}
.yt-play img{width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.yt-play:hover img{filter:brightness(1)}
.yt-btn{position:absolute;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.6);border:1.5px solid var(--fg)}
.yt-btn::after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--fg)}
.yt-play:hover .yt-btn{background:var(--accent);border-color:var(--accent)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* generic pages */
.page .section + .section{margin-top:clamp(32px,4vw,56px)}
.page .img{margin:0 0 24px;max-width:960px}
.page figcaption{font-size:14px;color:var(--mute);padding-top:8px}
.page .player,.page .yt{max-width:1100px;margin-bottom:24px}
.crumb{margin:0 0 14px;font-weight:500}
.crumb a{color:var(--mute);text-decoration:none}
.crumb a:hover{color:var(--fg)}
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.pager{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:clamp(40px,5vw,72px);padding-top:18px;font-weight:600}
.pager a{text-decoration:none;max-width:45%}
.pager .right{text-align:right}
.pager a:hover{color:var(--accent)}

/* footer */
.ftr{margin-top:var(--sec);border-top:1px solid var(--line);padding-block:clamp(40px,5vw,64px) 32px}
.ftr .sec-head{border-top:0;padding-top:0}
.ig-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.ig-grid li{aspect-ratio:1;overflow:hidden;background:#0b0b0b}
.ig-grid img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ftr-bar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:clamp(36px,4vw,56px);padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
.ftr-bar p{margin:0}
.ftr-bar strong{color:var(--fg)}
.ftr-legal{text-align:right}
@media (max-width:700px){.ftr-bar{grid-template-columns:1fr}.ftr-legal{text-align:left}}

@media (prefers-reduced-motion:reduce){.btn,.cell img,.yt-play img{transition:none}}

/* ---------- Phase 2 additions ---------- */
.hero-line{font-weight:750;font-stretch:112%;font-size:clamp(20px,2.4vw,32px);line-height:1.15;max-width:22ch;margin:.6em 0 .4em;text-wrap:balance}
.hero-sub{font-size:clamp(16px,1.4vw,19px);line-height:1.45;max-width:46ch;margin:0 0 1.4em;color:var(--fg);opacity:.92}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.btn.solid{background:var(--fg);color:var(--bg)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:#000}
.btn.small{padding:.5em 1.1em;font-size:14px}
.nav-cta a.btn{color:var(--fg)}
.nav-cta a.btn:hover{color:var(--bg)}
.home .nav-cta a.btn{text-shadow:none}
.kicker{font-size:14px;font-weight:600;color:var(--mute);margin:0 0 .6em}
.h4{font-weight:700;font-stretch:106%;font-size:17px;line-height:1.25;margin:14px 0 6px}
.h4 .meta{font-weight:500;color:var(--mute);font-stretch:100%;margin-left:.5em;white-space:nowrap}
.small{font-size:14px}
.links{margin-top:1.4em;font-weight:500}

/* proof strip */
.proof{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.proof li{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.proof .num{font-weight:800;font-stretch:118%;letter-spacing:-.02em;font-size:clamp(34px,4vw,56px);line-height:1}
.proof .lbl{font-size:15px;line-height:1.4;color:var(--fg);max-width:26ch}
.proof-line{margin:18px 0 0;font-size:14px}
@media (max-width:860px){.proof{grid-template-columns:1fr 1fr}}

/* ad cards */
.ads{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);align-items:start}
.ads .ad p{margin:0;font-size:14px;line-height:1.45;color:var(--mute)}
@media (max-width:1000px){.ads{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.ads{grid-template-columns:1fr 1fr}}

/* case study card */
.case{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center;text-decoration:none;border-top:1px solid var(--line);padding-top:28px}
.case .lede{margin-bottom:1.2em}
.case .btn{pointer-events:none}
.case:hover .btn{background:var(--fg);color:var(--bg)}
.case:hover .h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.case-media{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap)}
.case-media img,.case-media video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#0b0b0b}
@media (max-width:860px){.case{grid-template-columns:1fr}}

/* also row */
.also-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.also-grid .player{margin-top:16px}
@media (max-width:860px){.also-grid{grid-template-columns:1fr}}

/* contact */
.contact-block{border-top:1px solid var(--line);padding-top:28px;max-width:720px}
.contact-block .h1{margin-bottom:.3em}
.contact-block .small{margin-top:1.6em}

/* case study page */
.cs .lede{max-width:60ch}
.cs-media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:clamp(24px,3vw,40px) 0;max-width:900px}
.cs-media video,.cs-media .player{aspect-ratio:9/16;width:100%;object-fit:cover;margin:0;max-width:none}
.cs-media .player video{object-fit:cover}
@media (max-width:860px){.cs-media{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-media>*:nth-child(n+4){display:none}}
.cs-body{max-width:68ch}
.cs-sec{border-top:1px solid var(--line);padding-top:18px;margin-top:28px}
.cs-sec .h3{margin-bottom:.4em}
.cs .prose ul{padding-left:1.1em}
.cs .prose li{margin-bottom:.6em}