:root{--bg:#090909;--panel:#121212;--text:#f5f2e9;--muted:#aaa69d;--orange:#ff5b22;--blue:#00b9ff;--line:#2b2b2b;--max:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;position:relative;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:100;background:#fff;color:#000;padding:.7rem 1rem}


/* INTERACTIVE BACKGROUND LINES
   The canvas remains behind every section, image and control and never captures clicks. */
.motion-lines{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.72;
  mix-blend-mode:screen;
}
main,footer{position:relative;z-index:1}
.site-header{height:78px;position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - var(--max))/2));background:linear-gradient(#090909ee,#09090999);backdrop-filter:blur(14px);border-bottom:1px solid #ffffff18}
.brand{text-decoration:none;font-size:1.45rem;font-weight:800;letter-spacing:-.06em}
.brand span{font-size:1.85em;font-weight:400;color:var(--orange);vertical-align:-.12em}
.site-header nav{display:flex;gap:2rem}
.site-header nav a{text-decoration:none;color:#d8d5ce;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
.site-header nav a:hover,.site-header nav a:focus{color:var(--orange)}
.nav-toggle{display:none}

/* HERO BANNER */
.hero{min-height:100svh;position:relative;display:grid;align-items:end;overflow:hidden;background:#e9e6c5;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-6%;z-index:-3;background:url("assets/hires/header_home.jpg") center/cover no-repeat;filter:blur(30px) saturate(.9);transform:scale(1.08);opacity:.62}
.hero-art{position:absolute;z-index:-2;top:50%;left:15%;width:130%;max-width:none;height:auto;object-fit:contain;object-position:center;image-rendering:auto;transform:translateY(-50%);filter:saturate(1.05)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#070707f2 0%,#070707b5 42%,#07070722 78%),linear-gradient(0deg,#090909 0%,transparent 34%)}
.hero-content{position:relative;z-index:2;width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:150px 0 15vh}
.eyebrow{color:var(--orange);font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.hero h1{font-size:clamp(4rem,10vw,9.5rem);line-height:.8;letter-spacing:-.085em;margin:.2em 0 .3em;max-width:1050px}
.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #f5f2e9}
.lede{max-width:650px;color:#d0cdc5;font-size:clamp(1.05rem,2vw,1.35rem)}
.actions{display:flex;gap:.8rem;margin-top:2rem}
.button{padding:.9rem 1.25rem;border:1px solid #ffffff55;text-decoration:none;font-weight:700}
.button.primary{background:var(--orange);border-color:var(--orange);color:#090909}
.button.ghost:hover{border-color:var(--orange);color:var(--orange)}
.scroll-cue{position:absolute;right:5vw;bottom:3rem;z-index:3;text-decoration:none;color:#d0cdc5;font-size:.8rem;text-transform:uppercase;letter-spacing:.15em}

.section{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:clamp(5rem,10vw,9rem) 0}
.section-heading{display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:end;margin-bottom:3rem}
.section-heading .eyebrow{grid-column:1}
.section-heading h2{grid-column:1/3;font-size:clamp(2.8rem,6vw,6rem);line-height:.92;letter-spacing:-.06em;margin:0}
.section-heading>p:last-child{grid-column:2;color:var(--muted);max-width:550px}

/* PROJECT CARDS */
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.project-card{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel);cursor:pointer;border:1px solid #ffffff15}
.project-card img{width:100%;height:100%;object-fit:cover;image-rendering:auto;transition:transform .6s ease,filter .4s}
.project-card:hover img{transform:scale(1.06);filter:brightness(.48)}
.card-overlay{position:absolute;inset:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(transparent 35%,#000d);transition:background .3s}
.card-overlay span{position:absolute;top:1.25rem;right:1.25rem;color:#fff9}
.card-overlay h3{font-size:clamp(1.8rem,4vw,3.4rem);line-height:1;margin:0;letter-spacing:-.05em}
.card-overlay p{margin:.35rem 0 0;color:#ddd}
.card-overlay button{align-self:flex-start;margin-top:1rem;border:0;background:var(--orange);padding:.7rem 1rem;font-weight:800;cursor:pointer;opacity:0;transform:translateY(8px);transition:.25s}
.project-card:hover button,.project-card:focus-within button{opacity:1;transform:none}

/* SHOWREEL BANNER */
.image-break{min-height:65vh;position:relative;display:grid;place-items:center;overflow:hidden;background:#120d0a;isolation:isolate}
.image-break::before{content:"";position:absolute;inset:-6%;z-index:-3;background:url("assets/hires/header_showreel.jpg") center/cover no-repeat;filter:blur(28px) brightness(.5);transform:scale(1.08);opacity:.88}
.image-break img{position:absolute;z-index:-2;top:50%;left:50%;width:118%;max-width:none;height:auto;transform:translate(-50%,-50%);object-fit:contain;filter:brightness(.42)}
.image-break p{position:relative;z-index:1;text-align:center;font-size:clamp(2rem,6vw,6rem);line-height:1;letter-spacing:-.055em;padding:0 1rem}
.image-break strong{color:var(--orange)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:7vw;border-bottom:1px solid var(--line)}
.split h2,.development h2,.contact h2{font-size:clamp(2.7rem,5vw,5.5rem);line-height:.95;letter-spacing:-.06em;margin:.25em 0}
.body-copy{font-size:1.2rem;color:#d0cdc5}

/* DEVELOPMENT BANNER */
.development{display:grid;grid-template-columns:1fr;align-items:center;gap:2rem}
.development>img{width:100%;height:auto;aspect-ratio:76/13;object-fit:contain;background:#0d0d0d;border:1px solid #ffffff15;box-shadow:0 22px 60px #0008}
.development-copy{max-width:820px}

/* PEOPLE BANNER */
.wide-art{width:100%;height:auto;aspect-ratio:76/13;object-fit:contain;background:#0d0d0d;border:1px solid #ffffff15;box-shadow:0 22px 60px #0008}


/* TERMS & PRIVACY */
.terms{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0b0b0bd9;
  isolation:isolate;
}
.terms-banner{
  position:relative;
  display:grid;
  align-items:end;
  overflow:hidden;
  background:#17130f;
  isolation:isolate;
}
.terms-banner::before{
  content:"";
  position:absolute;
  inset:-6%;
  z-index:-3;
  background:url("assets/hires/header_portfolio.jpg") center/cover no-repeat;
  filter:blur(28px) brightness(.48) saturate(.9);
  transform:scale(1.08);
  opacity:.9;
}
.terms-banner>img{
  position:absolute;
  z-index:-2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.58) saturate(.92);
}
.terms-banner-shade{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,#080808ed 0%,#0808089e 48%,#08080825 82%),
    linear-gradient(0deg,#0b0b0b 0%,transparent 48%);
}
.terms-banner-content{
  position:relative;
  width:min(var(--max),calc(100% - 48px));
  margin:0 auto;
  padding:clamp(5rem,10vw,8rem) 0 clamp(3rem,7vw,5rem);
}
.terms-banner-content h2{
  max-width:900px;
  margin:.15em 0 0;
  font-size:clamp(3.4rem,8vw,8rem);
  line-height:.86;
  letter-spacing:-.075em;
}
.terms-content{
  width:min(var(--max),calc(100% - 48px));
  margin:0 auto;
  padding:clamp(4rem,8vw,7rem) 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.terms-card{
  position:relative;
  padding:clamp(1.5rem,3vw,2.4rem);
  border:1px solid #ffffff1c;
  background:#121212dc;
  backdrop-filter:blur(10px);
}
.terms-card-wide{grid-column:1/-1}
.terms-number{
  position:absolute;
  top:1rem;
  right:1.25rem;
  margin:0;
  color:#ffffff42;
  font-size:.78rem;
  letter-spacing:.16em;
}
.terms-card h3{
  max-width:85%;
  margin:0 0 1.2rem;
  font-size:clamp(1.65rem,3vw,2.7rem);
  line-height:1;
  letter-spacing:-.045em;
}
.terms-card p:not(.terms-number){
  max-width:78ch;
  margin:.8rem 0 0;
  color:#cfcbc2;
  font-size:clamp(1rem,1.5vw,1.12rem);
}
.footer-legal-link{
  display:inline-block;
  margin:0 0 .8rem;
  color:#d8d5ce;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid #ffffff38;
  transition:color .2s ease,border-color .2s ease;
}
.footer-legal-link:hover,.footer-legal-link:focus-visible{
  color:var(--orange);
  border-color:var(--orange);
}


/* CONTACT BANNER */
.contact{position:relative;min-height:72vh;display:grid;align-items:center;overflow:hidden;background:#20140f;isolation:isolate}
.contact::before{content:"";position:absolute;inset:-6%;z-index:-3;background:url("assets/hires/header_contact.jpg") center/cover no-repeat;filter:blur(28px) brightness(.55);transform:scale(1.08);opacity:.92}
.contact>img{position:absolute;z-index:-2;top:50%;left:50%;width:122%;max-width:none;height:auto;transform:translate(-50%,-50%);object-fit:contain;filter:brightness(.4)}
.contact-copy{position:relative;z-index:2;width:min(var(--max),calc(100% - 48px));margin:auto}
.contact-copy .email-link{display:inline-block;font-size:clamp(1.3rem,3vw,1rem);text-decoration:none;border-bottom:2px solid var(--orange);transition:color .2s ease,border-color .2s ease}
.contact-copy .email-link:hover,.contact-copy .email-link:focus-visible{color:var(--orange);border-color:var(--text)}
.social-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.social-link{display:grid;place-items:center;width:3.35rem;height:3.35rem;padding:0;border:1px solid #ffffff45;border-radius:50%;background:#0909098a;color:var(--text);text-decoration:none;backdrop-filter:blur(8px);transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease}
.social-link:hover,.social-link:focus-visible{transform:translateY(-2px) scale(1.04);border-color:var(--orange);background:var(--orange);color:#090909;outline:none}
.social-icon{width:1.45rem;height:1.45rem;display:block;fill:currentColor}

footer{width:min(var(--max),calc(100% - 48px));margin:auto;padding:3rem 0;display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;color:var(--muted)}
.footer-centre{text-align:center}
.footer-centre p{margin:0 0 .55rem}
.footer-socials{display:flex;justify-content:center;gap:.65rem}
.footer-socials a{display:grid;place-items:center;width:2.35rem;height:2.35rem;border:1px solid #ffffff2f;border-radius:50%;color:#d8d5ce;text-decoration:none;transition:transform .2s ease,color .2s ease,border-color .2s ease,background .2s ease}
.footer-socials a:hover,.footer-socials a:focus-visible{transform:translateY(-2px);color:#090909;background:var(--orange);border-color:var(--orange);outline:none}
.footer-social-icon{width:1.05rem;height:1.05rem;display:block;fill:currentColor}
footer>p:last-child{text-align:right;margin:0}
.video-dialog{width:min(1000px,92vw);background:#111;color:#fff;border:1px solid #444;padding:1.2rem}
.video-dialog::backdrop{background:#000d;backdrop-filter:blur(7px)}
.video-frame{aspect-ratio:16/9;background:#000}
.video-frame video{width:100%;height:100%}
.close-dialog{float:right;border:0;background:none;color:#fff;font-size:2.4rem;cursor:pointer}
.video-dialog h2{font-size:2rem;margin:.7rem 0 .2rem}
.video-dialog p{color:var(--muted)}
.reveal{opacity:0;transform:translateY(22px);transition:.7s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1100px){
  /* Use the high-resolution banners as real cover images on tablets.
     This removes the narrow horizontal strip caused by width-only scaling. */
  .hero::before{background-position:62% center;filter:blur(18px) saturate(.9);opacity:.68}
  .hero-art{inset:0;width:100%;max-width:none;height:100%;transform:none;object-fit:cover;object-position:62% center}
  .hero-content{padding:140px 0 11vh}

  .image-break::before{background-position:center}
  .image-break img{inset:0;width:100%;max-width:none;height:100%;transform:none;object-fit:cover;object-position:center}

  .development>img,.wide-art{height:clamp(260px,36vw,420px);aspect-ratio:auto;object-fit:cover;object-position:center}

  .terms-banner>img{object-position:center}

  .contact::before{background-position:56% center}
  .contact>img{inset:0;width:100%;max-width:none;height:100%;transform:none;object-fit:cover;object-position:56% center}
}

@media(max-width:760px){
  .motion-lines{opacity:.48}
  .site-header{padding:0 20px}
  .nav-toggle{display:block;background:none;color:#fff;border:1px solid #555;padding:.55rem .75rem}
  .site-header nav{display:none;position:absolute;top:78px;left:0;right:0;background:#0a0a0a;padding:1rem 20px;flex-direction:column;gap:1rem}
  .site-header nav.open{display:flex}

  /* The banner now fills the complete hero instead of appearing as a thin band. */
  .hero{min-height:100svh}
  .hero::before{background-position:62% center;filter:blur(14px) saturate(.9);opacity:.5}
  .hero-art{inset:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:62% center}
  .hero-content{width:calc(100% - 40px);padding:clamp(130px,20vh,190px) 0 10vh}
  .hero h1{max-width:100%;font-size:clamp(3.35rem,15.5vw,5.6rem);line-height:.84}
  .hero-shade{background:linear-gradient(0deg,#090909f7 0%,#090909d5 48%,#09090972 76%,#09090933 100%)}
  .scroll-cue{display:none}

  .section{width:calc(100% - 40px)}
  .section-heading,.split{grid-template-columns:1fr}
  .section-heading h2,.section-heading>p:last-child{grid-column:1}
  .project-grid{grid-template-columns:1fr}
  .project-card{aspect-ratio:16/11}
  .actions{flex-direction:column;align-items:flex-start}

  /* Keep the artwork large enough to read on phones without distorting it. */
  .image-break{min-height:60svh}
  .image-break img{inset:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center}

  .development>img,.wide-art{width:100%;height:clamp(220px,58vw,360px);aspect-ratio:auto;object-fit:cover;object-position:center}

  .terms-banner>img{object-position:center}
  .terms-banner-content{width:calc(100% - 40px);padding:7rem 0 3rem}
  .terms-banner-content h2{font-size:clamp(3.1rem,15vw,5.4rem)}
  .terms-content{width:calc(100% - 40px);grid-template-columns:1fr;padding:3.5rem 0}
  .terms-card-wide{grid-column:auto}

  .contact{min-height:72svh}
  .contact::before{background-position:56% center;opacity:.8}
  .contact>img{inset:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:56% center;filter:brightness(.34)}
  .contact-copy{width:calc(100% - 40px)}
  .contact h2{font-size:clamp(2.5rem,11vw,4rem)}

  .social-links{flex-direction:row;align-items:center}
  footer{grid-template-columns:1fr;gap:1rem;align-items:start}
  .footer-centre{text-align:left}
  .footer-socials{justify-content:flex-start}
  footer p{margin:0}
  footer>p:last-child{text-align:left}
}

@media(max-width:420px){
  .hero-content{padding-top:120px}
  .hero h1{font-size:clamp(3rem,15vw,4.2rem)}
  .development>img,.wide-art{height:220px}
  .terms-banner{min-height:430px}
  .terms-card{padding:1.35rem}
  .contact{min-height:680px}
}

@media(prefers-reduced-motion:reduce){
  .motion-lines{opacity:.34}
}