/* Denim Vision — shared styles for project pages (/work/...) and capability pages (/services/...) */
@font-face{font-family:'Exmouth';src:url('/fonts/exmouth.ttf') format('truetype');font-display:swap}
:root{
  --cherry:#b3001b; --cherry-deep:#6a0010; --cherry-hi:#ff2a3d;
  --ink:#0a0a0b; --paper:#f3f1ec; --fg:#f5f5f3; --dim:#8b8b86; --line:#d6d4cd; --ghost:#dcd9d1;
  --font:'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --script:'Exmouth','Snell Roundhand','Apple Chancery',cursive;
  --rail:52px;
  --gl:max(20px,env(safe-area-inset-left,0px)); --gr:max(20px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background-color:var(--ink);color:var(--fg)}
body{background-image:radial-gradient(rgba(255,255,255,.075) .9px,transparent 1.4px);background-size:5px 5px;background-attachment:fixed}
body{font-family:var(--font);font-size:14px;line-height:1.3;font-weight:400;text-transform:uppercase;letter-spacing:.01em;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%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")}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-transform:inherit}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}
.page{padding-left:var(--rail)}
.small{font-size:12px;letter-spacing:.02em}
.g{font-weight:600;letter-spacing:-.03em;line-height:.9;text-transform:uppercase}
.s{font-family:var(--script);text-transform:none;font-weight:400;letter-spacing:0;line-height:.75;white-space:nowrap;pointer-events:none}
.oval{display:inline-block;border:1.5px solid currentColor;border-radius:50%;padding:.15em .7em;line-height:1}
.meta{display:grid;grid-template-columns:auto 1fr;column-gap:28px;row-gap:3px;margin:0}
.meta dt::before{content:"// "}
.meta dd{margin:0;text-align:right;font-style:italic;letter-spacing:.12em;text-transform:lowercase}
.repeat{overflow:hidden;white-space:nowrap;display:grid;gap:1px}
.repeat>span:nth-child(2){margin-left:-6ch}
.repeat>span:nth-child(3){margin-left:-2ch}

/* halftone + grain on every placeholder frame */
.frame{background-size:125% 125%!important;animation:drift 20s ease-in-out infinite alternate}
.frame.has-media::after{display:none}
.frame::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.5) .9px,transparent 1.3px);background-size:4px 4px;mix-blend-mode:multiply;pointer-events:none}
@keyframes drift{from{background-position:0% 30%}to{background-position:100% 70%}}
.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.has-media .ph,.has-media~.ph{display:none}
.ph{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.65);white-space:nowrap;z-index:2}

[hidden]{display:none!important}
.player{position:relative;background:#000;color:#fff;overflow-x:clip}
@keyframes plin{from{opacity:0}to{opacity:1}}
.pl-top{position:fixed;top:0;left:0;right:0;z-index:6;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:18px;align-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) var(--gr) 14px var(--gl);text-shadow:0 1px 12px rgba(0,0,0,.5);pointer-events:none}
.pl-top>*{pointer-events:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-tags{display:flex;gap:5px}
.pl-tags span{border:1px solid currentColor;border-radius:99px;padding:1px 8px;font-size:11px;line-height:1.4}
.pl-x{width:32px;height:32px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;justify-self:end;text-shadow:none}
.pl-introwrap{height:165svh;position:relative}
.pl-intro{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.pl-bg{position:absolute;inset:0}
.pl-bg>*{width:100%;height:100%;object-fit:cover;display:block}
.pl-shade{position:absolute;inset:0;background:#000;opacity:.15}
.pl-big{position:relative;z-index:2;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;column-gap:.45em;padding:0 var(--gr) 0 var(--gl);margin:0;text-align:center;font-size:clamp(38px,7vw,128px);font-weight:500;letter-spacing:-.02em;line-height:.95;text-shadow:0 0 34px rgba(255,255,255,.35);transform-origin:50% 50%}
.pl-big .s{font-size:1.35em;line-height:.8;letter-spacing:0;white-space:normal}
.pl-watch{position:relative;z-index:3;margin-top:-65svh;min-height:100svh;display:grid;place-items:center;padding:14svh var(--gr) 14svh var(--gl)}
.pl-frame{position:relative;background:#0b0b0b;max-width:100%;box-shadow:0 40px 140px rgba(0,0,0,.85)}
.pl-frame .pm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pl-frame video.pm{cursor:pointer}
.pl-play{position:absolute;left:50%;top:50%;z-index:2;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:14px;background:#fff;color:#000;display:grid;place-items:center;transition:transform .2s,opacity .25s}
.pl-play:hover{transform:scale(1.08)}
.pl-frame.playing .pl-play{opacity:0;pointer-events:none}
.pl-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:14px;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .25s}
/* once a film has started, the controls stay on screen so viewers can always pause, play and scrub */
.pl-frame.started .pl-ctrl{opacity:1}
.pl-ctrl button{width:28px;height:28px;display:grid;place-items:center;flex:none}
.pl-bar{flex:1;height:28px;position:relative;cursor:pointer;touch-action:none}
.pl-bar::before{content:"";position:absolute;left:0;right:0;top:12px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);transition:height .15s,top .15s}
.pl-bar:hover::before{top:11px;height:5px}
.pl-bar i{position:absolute;left:0;top:12px;height:3px;border-radius:2px;width:0;background:var(--cherry-hi);transition:height .15s,top .15s}
.pl-bar:hover i{top:11px;height:5px}
.pl-bar b{position:absolute;top:7px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:#fff;left:0;box-shadow:0 0 0 3px rgba(0,0,0,.25)}
.pl-time{font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap}
.pl-high{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:clamp(120px,30svh,340px);padding:22svh var(--gr) 16svh var(--gl)}
.pl-high.tall{grid-template-columns:repeat(3,1fr);row-gap:clamp(100px,22svh,260px)}
.pl-high figure{margin:0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity 1.1s}
.pl-high figure:nth-child(even){margin-top:clamp(40px,10svh,140px)}
.pl-high figure.off{opacity:.12;transform:translateY(70px)}
.pl-high img{width:100%;height:auto;display:block}
.pl-cred{min-height:100svh;display:grid;justify-items:center;align-content:center;gap:12svh;padding:18svh var(--gr) 20svh var(--gl);color:#8d8d8d;font-size:clamp(14px,1.3vw,20px);line-height:1.35}
.pl-about{max-width:52ch;text-align:center;display:grid;gap:26px;margin:0}
.pl-about p{margin:0;text-wrap:balance}
.pl-groups{width:min(1300px,100%);display:grid;gap:44px}
.pl-group h4{margin:0 0 8px;text-align:center;font-weight:400;font-size:inherit}
.pl-group dl{display:grid;grid-template-columns:1fr auto;column-gap:24px;row-gap:3px;margin:0}
.pl-group dd{margin:0;text-align:right}
.pl-nextp{display:block;width:100%;text-align:center;padding:12svh var(--gr) 22svh var(--gl);border-top:1px solid #1d1d1f;transition:color .25s}
.pl-nextp .small{color:#8d8d8d}
.pl-nextp b{display:block;margin-top:12px;font-size:clamp(34px,6vw,104px);font-weight:500;letter-spacing:-.02em;line-height:.95}
.pl-nextp:hover{color:var(--cherry-hi)}
.pl-tabs{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:6;display:flex;gap:4px;padding:4px;border-radius:11px;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pl-tabs button{padding:7px 12px;border-radius:7px;color:rgba(255,255,255,.55);font-size:14px;transition:background .2s,color .2s}
.pl-tabs button:hover{color:#fff}
.pl-tabs button[aria-current="true"]{background:rgba(255,255,255,.18);color:#fff}
a.pl-x{text-decoration:none}
.pl-cta-line{display:flex;justify-content:center;padding:0 var(--gr) 10svh var(--gl)}
.pl-cta-line a{border:1px solid currentColor;border-radius:99px;padding:12px 26px;font-size:15px;text-transform:none}
.pl-cta-line a:hover{background:#fff;color:#000}

.cap-page{z-index:168}
.cp-what{position:relative;z-index:3;margin-top:-60svh;min-height:95svh;display:grid;align-content:center;justify-items:center;gap:28px;text-align:center;padding:12svh var(--gr) 12svh var(--gl)}
.cp-what .lead{margin:0;max-width:24ch;font-size:clamp(24px,3.1vw,50px);font-weight:500;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
.cp-steps{padding:10svh var(--gr) 14svh var(--gl);position:relative}
.cp-steps>.small,.cp-get>.small,.cp-work>.small{color:var(--dim);display:block;margin-bottom:28px}
.cp-step{display:grid;grid-template-columns:minmax(90px,1fr) 2fr 2fr;gap:24px;align-items:start;padding:44px 0;border-top:1px solid #222;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s}
.cp-step.off{opacity:.15;transform:translateY(50px)}
.cp-step .n{font-size:clamp(64px,9vw,150px);font-weight:600;letter-spacing:-.05em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px #fff}
.cp-step h3{margin:0;font-size:clamp(26px,3.2vw,52px);font-weight:500;letter-spacing:-.02em;line-height:1}
.cp-step p{margin:0;text-transform:none;font-size:clamp(15px,1.25vw,19px);line-height:1.5;color:#bdbdbd;max-width:46ch}
.cp-step:hover .n{color:var(--cherry-hi);-webkit-text-stroke-color:var(--cherry-hi)}
.cp-get{padding:6svh var(--gr) 14svh var(--gl);text-align:center}
.cp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:0 auto}
.cp-chips span{border:1px solid #fff;border-radius:99px;padding:8px 18px;font-size:clamp(14px,1.3vw,18px)}
.cp-work{padding:4svh var(--gr) 12svh var(--gl)}
.cp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cp-tile{text-align:left;display:grid;gap:10px}
.cp-tile .im{aspect-ratio:4/5;max-width:100%;background:#151515 center/cover no-repeat;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cp-tile:hover .im{transform:scale(.97)}
.cp-tile b{font-weight:600}
.cp-cta{display:grid;justify-items:center;gap:22px;text-align:center;padding:10svh var(--gr) 8svh var(--gl);border-top:1px solid #1d1d1f}
.cp-cta .g{font-size:clamp(48px,8vw,140px)}
.cp-cta .s{display:block;color:var(--cherry-hi);font-size:clamp(90px,13vw,230px);margin-top:-.3em;transform:rotate(-6deg)}
.cp-cta .btn{border:1px solid currentColor;border-radius:99px;padding:12px 26px;font-size:15px}
.cp-cta .btn:hover{background:#fff;color:#000}

/* index pages: /work/ and /services/ */
.ix-page{padding:calc(90px + env(safe-area-inset-top,0px)) var(--gr) 80px var(--gl);background:#000;min-height:100svh}
.ix-page h1{font-size:clamp(56px,10vw,170px);font-weight:600;letter-spacing:-.03em;line-height:.9;margin:0 0 10px;position:relative}
.ix-page h1 .s{position:absolute;left:clamp(150px,28vw,480px);top:-.1em;color:var(--cherry-hi);font-size:1.4em;transform:rotate(-8deg)}
.ix-page .lead{color:var(--dim);margin:0 0 50px;max-width:60ch;text-transform:none;font-size:15px}
.ix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:40px 18px}
.ix-card{display:grid;gap:10px}
.ix-card .im{aspect-ratio:4/5;max-width:100%;background:#151515 center/cover no-repeat;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ix-card:hover .im{transform:scale(.97)}
.ix-card b{display:block;font-size:clamp(18px,1.6vw,24px);font-weight:600;letter-spacing:-.02em}
.ix-card .k{color:var(--dim)}

@media (max-width:820px){
  .cp-step{grid-template-columns:1fr;gap:12px}.cp-tiles{grid-template-columns:1fr 1fr}.cp-what{margin-top:-45svh}
  .pl-top{grid-template-columns:1fr auto}.pl-top .pl-mid,.pl-tags{display:none}
  .pl-high,.pl-high.tall{grid-template-columns:1fr 1fr;column-gap:10px}
  .pl-watch{margin-top:-50svh}
  .pl-group dl{grid-template-columns:1fr}.pl-group dd{text-align:left;margin-bottom:6px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}