/* gregowen.co.uk — static build. Values follow the Figma V2 frames (desktop 1440, mobile 390). */
@font-face{font-family:Geist;src:url(/assets/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url(/assets/fonts/host-grotesk-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url(/assets/fonts/host-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url(/assets/fonts/host-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#0d0d0d;--grey:#777;--grey-2:#636363;--line:#d9d9d9;--paper:#fff;--hero:#eee;--blue:#0900fe;
  --gut:32px;--sans:Geist,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;--body:"Host Grotesk",Geist,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,ul,ol,dl,dd,figure{margin:0;padding:0}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:8px 14px;border-radius:999px}
.skip:focus{left:8px}

.mono{font-family:var(--mono);font-size:13px;line-height:1.4;letter-spacing:.02em;text-transform:uppercase}
.grey{color:var(--grey)}
.link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s ease}
.link:hover{background-size:100% 1px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;font-family:var(--body);font-weight:500;font-size:16px;line-height:1.25;border:1px solid var(--ink);transition:background-color .25s,color .25s,border-color .25s}
.btn--blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--blue:hover{background:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:#fff}
.btn--white{border-color:#fff;color:#fff}
.btn--white:hover{background:#fff;color:var(--blue)}

/* ---------- site header (case pages, 404) ---------- */
.top{display:flex;justify-content:space-between;align-items:center;padding:24px var(--gut);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.01em;position:relative;z-index:5}
.top__nav{display:flex;gap:32px}
.logo{font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}

/* ---------- homepage hero ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh;background:var(--hero)}
.hero__title{display:flex;flex-direction:column;justify-content:space-between;padding:24px var(--gut) 32px;min-height:inherit}
.hero__h{font-weight:400;font-size:clamp(28px,2.36vw,40px);line-height:1.06;letter-spacing:-.005em;max-width:15.5em}
.hero__h .w{cursor:pointer;transition:color .2s}
.hero__h .w:hover{color:var(--blue)}
.hero__role{margin-top:24px;color:var(--grey)}
.hero__reel{position:relative;overflow:hidden;background:#0d0d0d;color:#fff;min-height:inherit}
.hero__nav{position:absolute;z-index:3;top:24px;left:160px;display:flex;gap:32px;font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.01em;color:#fff;mix-blend-mode:difference}
.hero__foot{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:32px;display:flex;justify-content:space-between;align-items:center}
.hero__foot .mono{color:#fff}
.hero__mnav{display:none}

/* reel */
.reel{position:absolute;inset:0;background:#0d0d0d}
.reel__s{position:absolute;inset:0;visibility:hidden;background:var(--bg,#0d0d0d)}
.reel__s.on{visibility:visible}
.reel__i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;max-height:88%;object-fit:contain;transform:translate(-50%,-50%);user-select:none}
.reel__i--crop{height:var(--h);max-height:none;object-fit:cover;object-position:top center}
.reel__i--cover{left:0;top:0;width:100%;height:100%;max-height:none;object-fit:cover;transform:none}
.reel__i--shadow{box-shadow:0 18px 40px rgba(0,0,0,.45)}
.reel--calm .reel__s{visibility:visible;opacity:0;transition:opacity .9s ease}
.reel--calm .reel__s.on{opacity:1}
.hero__reel.is-full{position:fixed;inset:0;z-index:50;min-height:0}
.hero__reel.is-full .hero__nav{display:none}

/* ---------- homepage sections ---------- */
.sec{padding:0 var(--gut) 160px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid var(--line);padding-top:16px}
.sec-h__t{display:flex;align-items:baseline;gap:24px}
.sec-h__t h2{font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.01em}
.sec-h .mono{color:var(--grey)}

.intro{padding:96px var(--gut);display:grid;grid-template-columns:560px 592px;justify-content:space-between;gap:64px}
.intro__p{font-size:20px;line-height:1.4;letter-spacing:-.005em}
.intro__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-content:start}
.fact dt{color:var(--grey);margin-bottom:8px}
.fact dd{font-family:var(--body);font-size:16px;line-height:1.5}

.work{padding:96px var(--gut) 160px;display:flex;flex-direction:column;gap:64px}
.card{display:flex;flex-direction:column;gap:24px}
.card__img{position:relative;overflow:hidden;border-radius:5px;background:#e6e6e6;aspect-ratio:3/2}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__img img{transform:scale(1.03)}
.card__meta{display:flex;justify-content:space-between;gap:16px;font-family:var(--body)}
.card__t{font-weight:500;font-size:19.2px;line-height:1.25}
.card__tags{font-weight:300;font-size:16px;line-height:1.5;text-align:right}
.feat{display:grid;grid-template-columns:787fr 525fr;gap:64px;align-items:start}
.feat .card__img{aspect-ratio:787/574;background:#00126e}
.feat__img{background:linear-gradient(180deg,#00106b 0%,#0a8fd7 100%)}
.feat__img img{object-fit:cover;object-position:50% 12%;transform-origin:50% 30%}
.feat__copy{display:flex;flex-direction:column;gap:24px}
.feat__copy .mono{color:var(--grey)}
.feat__sum{font-size:40px;line-height:1.15;letter-spacing:-.015em}
.feat__det{color:var(--grey);font-family:var(--body);font-size:16px;line-height:1.5;max-width:30em}
.feat__copy .btn{align-self:flex-start}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 22px}

.info{padding:0 var(--gut) 160px;display:flex;flex-direction:column;gap:96px}
.about{display:grid;grid-template-columns:320px 1fr;gap:64px}
.about__s{font-size:40px;line-height:1.15;letter-spacing:-.015em;max-width:24.8em}
.about__b{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px;max-width:992px;color:var(--grey);font-family:var(--body);line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.stat{border-top:1px solid var(--line);padding-top:24px;display:flex;flex-direction:column;gap:16px}
.stat__v{font-weight:500;font-size:clamp(72px,7.2vw,104px);line-height:.96;letter-spacing:-.035em;color:var(--blue)}
.stat__c{color:var(--grey);font-family:var(--body);line-height:1.5;max-width:26em}

.list{margin-top:24px}
.svc{display:grid;grid-template-columns:120px 1fr 400px;gap:32px;align-items:baseline;border-top:1px solid var(--line);padding:24px 0}
.svc__n{font-weight:500;font-size:clamp(40px,4.45vw,64px);line-height:1;letter-spacing:-.025em}
.svc__d{color:var(--grey);font-family:var(--body);line-height:1.5}
.svc .mono,.exp .mono{color:var(--grey)}
.exp{display:grid;grid-template-columns:120px 1fr 1fr 200px 200px;gap:32px;align-items:baseline;border-top:1px solid var(--line);padding:24px 0;font-size:20px;line-height:1.4}
.exp__d{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--grey)}
.exp__t{text-align:right}
.ct{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:24px}
.ct h3{font-weight:400;color:var(--grey);margin-bottom:16px}
.ct li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-top:1px solid var(--line);padding:16px 0;font-size:20px;line-height:1.4}
.ct li .mono{color:var(--grey);text-align:right}

/* ---------- footer ---------- */
.foot{background:var(--blue);color:#fff;padding:160px var(--gut) 0;overflow:hidden}
.foot__c{display:flex;flex-direction:column;gap:32px}
.foot__av{font-weight:500;font-size:clamp(36px,4.45vw,64px);line-height:1;letter-spacing:-.025em}
.foot__mail{font-size:clamp(24px,2.8vw,40px);line-height:1.15;letter-spacing:-.015em;align-self:flex-start}
.foot__mail:hover{opacity:.75}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:1px solid #fff;padding-top:24px;margin-top:96px}
.foot__cols h3{font-weight:400;margin-bottom:8px;opacity:.7}
.foot__cols li,.foot__cols p{font-family:var(--body);line-height:1.5}
.foot__legal{display:flex;justify-content:space-between;gap:16px;margin-top:96px}
.foot__mark{font-weight:600;font-size:18.7vw;line-height:.85;letter-spacing:-.05em;text-align:center;white-space:nowrap;margin:24px -.04em -.03em;user-select:none}
.copied{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-family:var(--body);font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60}
.copied.on{opacity:1;transform:translate(-50%,0)}

/* word thumbnail */
.tip{position:fixed;left:0;top:0;width:250px;aspect-ratio:250/179;border-radius:4px;object-fit:cover;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-115%) scale(.92);transition:opacity .2s,transform .25s}
.tip.on{opacity:1;transform:translate(-50%,-115%) scale(1)}

/* ---------- case study ---------- */
.cs-title{padding:144px var(--gut) 40px}
.cs-title .mono{color:var(--grey-2)}
.cs-title h1{font-weight:500;font-size:clamp(52px,8.9vw,128px);line-height:.906;letter-spacing:-.04em;margin:24px 0}
.cs-wrap{padding:0 var(--gut)}
.cols{display:grid;grid-template-columns:680fr 280fr 416fr;align-items:start}
.cs-intro{padding:48px var(--gut) 0}
.cs-intro .cols>:first-child{grid-column:1/3}
.cs-statement{font-weight:300;font-size:clamp(36px,4.45vw,64px);line-height:1.0625;letter-spacing:-.02em;max-width:13.75em}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;grid-column:3}
.meta dt{font-weight:500}
.meta dd{color:var(--grey-2);white-space:pre-line}
.cs-lead{padding:120px var(--gut) 144px}
.cs-lead__l{font-size:clamp(24px,2.22vw,32px);line-height:1.1875;letter-spacing:-.01em;max-width:21.25em}
.cs-lead__b{grid-column:3;font-size:20px;line-height:1.4;white-space:pre-line}
.cs-row{display:flex;gap:16px;padding:0 var(--gut) 16px}
.cs-row>*{min-width:0}
.cs-quote{padding:144px var(--gut) 160px;display:flex;justify-content:flex-end}
.cs-quote p{font-weight:300;font-size:clamp(32px,3.9vw,56px);line-height:1.07;letter-spacing:-.02em;max-width:16.3em;width:66.3%}
.cs-cap{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 var(--gut) 16px;align-items:start}
.cap .mono{display:block;margin-bottom:10px}
.cap p{max-width:300px}
.cs-label{padding:120px var(--gut) 32px}
.cs-label .mono{display:block;margin-bottom:10px}
.cs-label p{max-width:300px}
.next{display:grid;grid-template-columns:760fr 616fr;align-items:end;padding:200px var(--gut) 160px;gap:32px}
.next .mono{color:var(--grey-2)}
.next h2{font-weight:500;font-size:clamp(48px,6.67vw,96px);line-height:.96;letter-spacing:-.035em;margin-top:24px;transition:color .25s}
.next:hover h2{color:var(--blue)}
.next__img{justify-self:end;width:100%;max-width:448px;aspect-ratio:448/299;border-radius:5px;overflow:hidden}
.next__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.next:hover .next__img img{transform:scale(1.04)}

/* plates: children positioned in % of the plate, radii/shadows scale with its width */
.plate{position:relative;overflow:hidden;container-type:inline-size;background:var(--pbg,transparent)}
.plate>*{position:absolute}
.pi{overflow:hidden}
.pi>img{width:100%;height:100%;object-fit:cover}
.pi--contain>img{object-fit:contain}
.pi--crop>img{position:absolute;left:0;top:var(--ty);height:auto}
.pb{background:#fff;overflow:hidden}
.pb__bar{position:absolute;left:0;right:0;top:0;background:#efefef}
.pb__bar i{position:absolute;border-radius:50%;background:#d0d0d0}
.pb__s{position:absolute;left:0;right:0;bottom:0;overflow:hidden}
.pb__s img{width:100%;height:100%;object-fit:cover;object-position:top}
.pb__s.pi--crop img{position:absolute;top:var(--ty);height:auto}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.no-js .rv{opacity:1;transform:none}

/* 404 */
.nf{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:32px;padding:96px var(--gut)}
.nf h1{font-weight:500;font-size:clamp(52px,8.9vw,128px);line-height:.906;letter-spacing:-.04em}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  .intro{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr}
  .about .mono{display:block}
  .exp{grid-template-columns:80px 1fr 1fr 170px;}
  .exp__t{display:none}
  .svc{grid-template-columns:80px 1fr 320px}
  .hero__nav{left:var(--gut)}
}
@media (max-width:960px){
  .feat{grid-template-columns:1fr;gap:32px}
  .grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .cs-intro .cols>:first-child,.meta,.cs-lead__b{grid-column:auto}
  .meta,.cs-lead__b{margin-top:40px;max-width:520px}
  .foot__cols{grid-template-columns:1fr 1fr}
}

/* ---------- mobile (Figma 390 frame) ---------- */
@media (max-width:767px){
  :root{--gut:20px}
  .top{padding:16px var(--gut);font-size:18px}
  .top__nav{gap:14px}
  .logo{font-size:18px}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__title{padding:16px var(--gut) 20px;min-height:440px;min-height:min(440px,52svh)}
  .hero__mnav{display:flex;justify-content:space-between;align-items:center}
  .hero__mnav nav{display:flex;gap:14px;font-weight:500;font-size:18px;line-height:1.2}
  .hero__title>.logo{display:none}
  .hero__h{font-size:28px;margin-top:40px}
  .hero__nav{display:none}
  .hero__reel{height:520px;min-height:0}
  .hero__foot{bottom:20px;left:var(--gut);right:var(--gut)}
  .intro{grid-template-columns:1fr;gap:40px;padding:56px var(--gut) 64px}
  .facts{gap:24px}
  .work{padding:56px var(--gut) 96px;gap:40px}
  .sec-h{flex-direction:column;gap:8px}
  .feat__sum{font-size:28px}
  .grid{grid-template-columns:1fr;gap:40px}
  .info{padding:0 var(--gut) 96px;gap:48px}
  .about{gap:16px}
  .about__s{font-size:26px}
  .about__b{grid-template-columns:1fr;gap:16px;margin-top:24px}
  .sec{padding:0 var(--gut) 96px}
  .svc{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .svc__n{font-size:36px}
  .exp{grid-template-columns:1fr;gap:4px;padding:20px 0}
  .exp__t{display:block;text-align:left}
  .exp>:first-child{margin-bottom:4px}
  .ct{grid-template-columns:1fr;gap:48px}
  .ct li{font-size:18px}
  .foot{padding-top:96px}
  .foot__cols{grid-template-columns:1fr;gap:24px;margin-top:64px}
  .foot__legal{flex-direction:column;margin-top:64px}
  .cs-title{padding:72px var(--gut) 32px}
  .cs-title h1{margin:16px 0}
  .cs-intro{padding-top:40px}
  .cs-lead{padding:72px var(--gut) 80px}
  .cs-lead__b{font-size:18px}
  .cs-row{flex-direction:column;gap:8px;padding-bottom:8px}
  .cs-row>*{flex:none!important;width:100%}
  .cs-quote{padding:80px var(--gut) 96px}
  .cs-quote p{width:100%}
  .cs-cap{grid-template-columns:1fr;gap:24px;padding-bottom:8px}
  .cs-label{padding:72px var(--gut) 24px}
  .next{grid-template-columns:1fr;padding:120px var(--gut) 96px}
  .next__img{justify-self:start}
}