:root{color-scheme:dark;--ink:#f9efe4;--muted:#ccbdb7;--base:#0d1927;--navy:#172e46;--accent:#62d8e4;--line:#ffffff26;--serif:"Instrument Serif",Georgia,serif;font:16px/1.55 "DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--base)}
*{box-sizing:border-box}body,figure,p,h1,h2,h3{margin:0}a{color:inherit;text-underline-offset:.25em}a:hover{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.skip{position:absolute;left:1rem;top:-6rem;padding:1rem;background:var(--base);z-index:3}.skip:focus{top:1rem}.wrap{width:min(1280px,calc(100% - 8vw));margin-inline:auto}
.bar{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line)}.brand{font:1.7rem/.84 var(--serif);text-decoration:none}.brand span,.label{color:var(--accent)}nav{display:flex;gap:clamp(1rem,4vw,3rem)}nav a{text-decoration:none;font-size:.9rem}
.hero{display:grid;grid-template-columns:1fr .9fr;gap:clamp(1.5rem,6vw,7rem);align-items:center;padding-block:clamp(2rem,6vw,6rem)}.hero-copy{padding-block:1rem}.label{text-transform:uppercase;font-size:.73rem;font-weight:700;letter-spacing:.16em}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:.95}h1{font-size:clamp(3.45rem,8.5vw,9rem);margin-block:1rem 1.45rem;letter-spacing:-.045em}h1 em{color:var(--accent);font-weight:400}.intro{color:var(--muted);max-width:35ch;font-size:clamp(1rem,1.55vw,1.25rem);margin-bottom:1.65rem}
.button{display:inline-flex;gap:1.3rem;align-items:center;min-height:48px;padding:.7rem 1.15rem;border:1px solid var(--accent);color:var(--ink);text-decoration:none;font-weight:600}.button:hover{color:var(--base);background:var(--accent)}
.hero-media img,.thumb img{display:block;width:100%;height:100%;object-fit:cover}.hero-media a{display:block;aspect-ratio:1.1;background:var(--navy);overflow:hidden}.hero-media img{object-position:50% 32%}figcaption{padding-top:.65rem;color:var(--muted);font-size:.77rem}.hero-media figcaption{display:flex;justify-content:space-between;gap:1rem}
.work{border-top:1px solid var(--line);padding-block:3rem 5rem}h2{font-size:clamp(3rem,5.6vw,5.5rem)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:1.65rem}.tile{display:block;text-decoration:none}.thumb{aspect-ratio:1.26;overflow:hidden;background:var(--navy)}.thumb img{object-position:50% 32%}.type-cover{display:grid;place-items:center;height:100%;font:italic clamp(3rem,8vw,6rem) var(--serif);color:var(--accent);background:radial-gradient(ellipse at 40% 15%,#2a506d,transparent 80%),#13273d}.tile-title{display:flex;justify-content:space-between;gap:.5rem;align-items:end;padding:.9rem 0;border-bottom:1px solid var(--line)}h3{font-size:clamp(1.85rem,3.2vw,3.4rem);margin-top:.4rem}
.about{background:var(--navy)}.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:1.5rem;padding-block:clamp(2.5rem,6vw,6rem)}.split p{max-width:42ch;color:var(--muted);font-size:1.2rem}footer{padding-block:1.5rem;display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}.project{padding-block:2.5rem 4rem}.project .intro{max-width:56ch}.back{display:inline-block;margin-bottom:2rem}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-block:2rem}.gallery img{display:block;width:100%;height:auto;background:var(--navy)}iframe{display:block;width:min(100%,850px);aspect-ratio:16/9;border:0;background:var(--navy);margin-bottom:1.5rem}
@media(max-width:740px){.hero,.split,.gallery{grid-template-columns:1fr}.hero{gap:1.25rem}h1{font-size:clamp(3.4rem,13vw,6.4rem)}.grid{grid-template-columns:1fr;gap:1.5rem}.thumb{aspect-ratio:1.6}.work{padding-bottom:2.5rem}}
:root{--serif:"Barlow Condensed","Arial Narrow",sans-serif;font-family:Inter,system-ui,sans-serif}
.brand{font-weight:600;line-height:.9}
h1,h2,h3{font-weight:600;letter-spacing:-.02em}h1{font-size:clamp(4rem,9.6vw,9rem)}h1 em{font-style:normal;font-weight:600}.empty{color:var(--muted);margin-top:1rem}
.pattern{min-width:0;isolation:isolate;position:relative;overflow:hidden;aspect-ratio:1.13;background:radial-gradient(ellipse at 30% 15%,#355e79,transparent 85%),#183149;border:1px solid #62d8e466}
.pattern::before{position:absolute;inset:0;content:"";background:repeating-linear-gradient(90deg,#f7e2d522 0 1px,transparent 1px 28px),repeating-linear-gradient(0deg,#f7e2d522 0 1px,transparent 1px 28px);mask-image:linear-gradient(135deg,#000,transparent 90%)}
.pattern span{position:absolute;border:1px dashed #a0f1f5aa;inset:10% 14% 9% 26%;border-radius:65% 16% 44% 30%;transform:rotate(-26deg)}
.pattern span:nth-child(2){inset:13% 18% 5% 21%;border-style:solid;transform:rotate(-18deg)}
.pattern span:nth-child(3){inset:20% 22% 13% 30%;transform:rotate(-22deg)}
@media(max-width:740px){h1{font-size:clamp(3.75rem,14vw,7rem)}}
.collection + .collection{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.type-cover{font-family:var(--serif);font-style:normal;padding:1rem;text-align:center;line-height:1;font-size:clamp(2rem,4vw,4rem)}
@media(max-width:380px){.bar{gap:.65rem}nav{gap:.75rem}nav a{font-size:.8rem}h1{font-size:clamp(3.1rem,14vw,3.75rem)}}
.thumb.poster{aspect-ratio:2/3}
.thumb.poster img{object-fit:contain;object-position:center}
.film-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),230px))}
.film-hero a{background:radial-gradient(ellipse at center,#264762,#112438);aspect-ratio:1.1}
.film-hero img{object-fit:contain;object-position:center}
.hero-posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:.65rem;padding:2rem .5rem;isolation:isolate;background:radial-gradient(ellipse at center,#38617c,transparent 75%)}
.hero-posters a{display:block;aspect-ratio:2/3;overflow:hidden;border:1px solid #f9efe460;box-shadow:0 15px 35px #0008;transform:translateY(10%) rotate(-8deg)}
.hero-posters a:nth-child(2){transform:translateY(-8%) scale(1.1);z-index:1}
.hero-posters a:nth-child(3){transform:translateY(10%) rotate(8deg)}
.hero-posters img,.thumb.poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.film-grid{grid-template-columns:repeat(auto-fill,minmax(min(42%,165px),1fr))}
.film-grid h3{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 .55rem;line-height:1.03}
.film-grid .tile-title{align-items:start}
.credit-role,.credit-year{color:var(--muted);font-size:.85rem}
.credit-year{margin-top:.25rem;font-variant-numeric:tabular-nums}
@media(max-width:740px){.hero-posters{max-width:460px;margin-inline:auto;width:100%}}
.hero h1 em{display:block;font-size:.62em;line-height:1.04}
.about-copy p + p{margin-top:1rem}
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(1.5rem,5vw,5.5rem)}
.craft-hero{min-width:0}
.craft-frame{aspect-ratio:1.12;overflow:hidden;background:#1a334f;border:1px solid #62d8e466}
.craft-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.craft-hero figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1.5rem;padding-top:.8rem}
.craft-hero figcaption a{color:var(--ink);font-weight:600}
@media(max-width:740px){.hero{grid-template-columns:minmax(0,1fr)}.craft-frame{aspect-ratio:1}}

/* The production still fills the hero, with the coat framed beside the copy. */
.hero:has(.craft-hero){
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  width:100%;
  min-height:clamp(520px,76svh,840px);
  padding:clamp(4rem,9vw,9rem) max(4vw,calc((100vw - 1280px)/2)) 6rem;
  overflow:hidden;
}
.hero:has(.craft-hero) .hero-copy{position:relative;z-index:1;width:min(55%,680px)}
.hero:has(.craft-hero) .intro{color:var(--ink)}
.craft-hero{position:absolute;inset:0;margin:0}
.craft-frame{position:absolute;inset:0;aspect-ratio:auto;border:0;background:#0e2032}
.craft-frame img{position:absolute;right:0;width:76%;object-position:50% 36%}
.craft-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#0b1928 19%,#0b1928 25%,transparent 72%),linear-gradient(0deg,#0b1928 0%,transparent 30%);
}
.craft-hero figcaption{position:absolute;bottom:1.25rem;right:4vw;left:4vw;justify-content:flex-end;color:var(--ink)}
@media(max-width:740px){
  .hero:has(.craft-hero){align-items:flex-end;min-height:680px;padding:20rem 4vw 5.5rem}
  .hero:has(.craft-hero) .hero-copy{width:100%}
  .craft-frame img{width:100%;height:78%;object-position:center 29%}
  .craft-frame::after{background:linear-gradient(0deg,#0b1928 12%,#0b1928 24%,transparent 70%)}
  .craft-hero figcaption{justify-content:flex-start}
}

/* Keep the photography full bleed and the portfolio easy to scan. */
.hero:has(.craft-hero) .hero-copy{width:min(58%,760px)}
.hero h1{margin-block:.7rem 1.3rem}
.craft-frame img{width:82%}
.craft-frame::after{background:linear-gradient(90deg,#0b1928 5%,#0b1928e8 26%,#0b192848 56%,transparent 79%),linear-gradient(0deg,#0b1928 0%,transparent 29%)}
.film-grid{column-gap:1.25rem;row-gap:2rem;grid-template-columns:repeat(auto-fill,minmax(min(43%,177px),1fr))}
.film-grid article,.film-grid .tile{min-width:0}
.tile .thumb{transition:filter .18s ease}
.tile:hover .thumb{filter:brightness(1.12)}
.service-section{border-top:1px solid var(--line);padding-block:clamp(2.75rem,6vw,5rem)}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:1.65rem}
.service-grid article{border-top:2px solid var(--accent);padding:1.25rem;background:var(--navy)}
.service-grid h3{font-size:clamp(1.8rem,3vw,2.45rem);margin:0 0 .75rem}
.service-grid p{color:var(--muted);max-width:38ch}
@media(max-width:740px){
  .bar nav{gap:clamp(.6rem,3vw,1rem)}
  .hero:has(.craft-hero) .hero-copy{width:100%}
  .craft-frame img{width:100%}
  .craft-frame::after{background:linear-gradient(0deg,#0b1928 11%,#0b1928 22%,#0b192888 43%,transparent 73%)}
  .service-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.tile .thumb{transition:none}}
.studio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.85rem,2vw,1.5rem);margin-top:1.65rem}
.studio-grid figure{min-width:0;margin:0}
.studio-section figure img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--navy)}
@media(max-width:600px){.studio-grid{grid-template-columns:1fr}.studio-grid figure{width:100%;max-width:420px;margin-inline:auto}}
.studio-section figcaption{font-size:1rem;color:var(--ink)}

/* Give the production photography room and distinguish the page sections. */
.hero:has(.craft-hero){border-bottom:1px solid #62d8e480}
.hero .button{background:var(--accent);color:#102435;box-shadow:0 8px 28px #081522aa}
.hero .button:hover{background:#a0f1f5;border-color:#a0f1f5}
.hero .intro{font-weight:500;text-shadow:0 2px 14px #07111d}
.craft-frame::after{
  background:linear-gradient(90deg,#0b1928 6%,#0b1928e8 25%,#0b19284d 56%,transparent 77%),
    linear-gradient(0deg,#0b1928 0%,transparent 26%);
}
.craft-hero figcaption{gap:.35rem .9rem;align-items:center}
.craft-hero figcaption span:not([aria-hidden]){padding:.35rem .65rem;background:#0e2031ed;border:1px solid #ffffff38}
.work{border-top:0}
.tile .thumb{border:1px solid #ffffff25;border-radius:3px}
.tile .thumb img{transition:transform .32s ease}
.tile:hover .thumb img,.tile:focus-visible .thumb img{transform:scale(1.035)}
.tile-title>span{display:grid;place-items:center;width:1.75rem;height:1.75rem;flex:none;border:1px solid var(--line);border-radius:50%;transition:background .2s ease,color .2s ease}
.tile:hover .tile-title>span,.tile:focus-visible .tile-title>span{background:var(--accent);color:var(--base)}
#services{width:100%;padding-inline:max(4vw,calc((100% - 1280px)/2));background:radial-gradient(ellipse at 20% 0%,#244663,transparent 70%),#14283e}
#services article{background:#101f30;border:1px solid #62d8e466;border-top:2px solid var(--accent);padding:clamp(1rem,2.4vw,2rem)}
.studio-section{border-top:0}
.studio-section figure img{border-radius:3px;box-shadow:0 10px 28px #050b1360}
.studio-section figcaption{border-bottom:1px solid var(--line);padding-bottom:.65rem}
.about{background:linear-gradient(115deg,#203e5b,#13263b 70%)}
@media(min-width:741px) and (prefers-reduced-motion:no-preference){
  .craft-frame img{animation:hero-settle 1.25s ease-out both}
  @keyframes hero-settle{from{transform:scale(1.045)}to{transform:scale(1)}}
}
@media(max-width:740px){
  .craft-frame::after{background:linear-gradient(0deg,#0b1928 12%,#0b1928 22%,#0b192888 43%,transparent 73%)}
}
@media(prefers-reduced-motion:reduce){
  .tile .thumb img,.tile-title>span{transition:none}
  .tile:hover .thumb img,.tile:focus-visible .thumb img{transform:none}
}

.about-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem)}
.about-portrait{display:block;width:100%;max-width:480px;height:auto;border-radius:3px;box-shadow:0 12px 36px #050b1355}
.about-copy h2{margin-bottom:1.25rem}
@media(max-width:740px){.about-layout{grid-template-columns:1fr}.about-portrait{margin-inline:auto}}

.bar nav a,.studio-section figcaption{font-family:"Instrument Sans",Inter,system-ui,sans-serif}
.bar nav a{font-weight:600;letter-spacing:.015em}
.studio-section figcaption{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:700;letter-spacing:-.02em}



.brand{display:inline-flex;align-items:center;font-family:"Instrument Sans",Inter,system-ui,sans-serif;font-size:1rem;line-height:1;color:var(--ink)}
.brand .brand-name{display:grid;gap:.2rem;color:inherit}
.brand .brand-top{font-size:.67em;letter-spacing:.2em;text-transform:uppercase;color:inherit;font-weight:700}
.brand .brand-bottom{display:flex;align-items:baseline;font-size:1.65em;letter-spacing:-.055em;color:inherit;font-weight:700}
@media(max-width:380px){.brand{font-size:.86rem}}

.brand .brand-top{color:var(--accent)}
.brand .brand-bottom{letter-spacing:-.035em}

.brand{gap:.65rem}
.brand-badge{width:2.65rem;height:2.65rem;flex:none;color:var(--accent)}
.brand-pin-cutout{fill:#0d1927}
.brand .brand-top,.brand .brand-bottom{font-size:1.17em;letter-spacing:-.035em;text-transform:none;color:var(--ink)}
.brand .brand-name{gap:.08rem}
@media(max-width:380px){.brand{gap:.4rem}.brand-badge{width:2.05rem;height:2.05rem}}
.brand-badge{display:block;border-radius:50%;background:url("/images/logo-concepts.png") 5.08% 73.12% / 810% 403% no-repeat}
.craft-hero .craft-credit{display:grid;gap:.2rem;padding:.55rem .85rem;background:var(--navy);border:1px solid var(--accent);border-radius:3px;text-decoration:none}
.craft-hero .craft-credit:hover{background:var(--accent);color:var(--base)}
.craft-credit small{font-size:inherit;font-weight:400}

.credit-stage{background:radial-gradient(ellipse at 18% 20%,#244663,transparent 70%),var(--base);border-block:1px solid var(--line);padding-block:2rem clamp(3rem,7vw,7rem)}
.credit-layout{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.credit-layout.no-poster{grid-template-columns:minmax(0,1fr)}
.credit-poster img,.credit-feature img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px}
.credit-poster img{box-shadow:0 18px 48px #050b1399}
.credit-content h1{font-size:clamp(3rem,7vw,7.5rem);overflow-wrap:anywhere;margin-top:0}
.credit-content dl{display:flex;flex-wrap:wrap;gap:1rem 3rem;border-block:1px solid var(--line);padding-block:1rem;margin:0 0 1.5rem}
.credit-content dl:empty{display:none}
.credit-content dt{color:var(--muted);font-size:.8rem}
.credit-content dd{margin:.18rem 0 0;color:var(--accent);font-weight:700;font-size:1.15rem}
.credit-feature{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:2rem;align-items:center;padding-block:3rem}
.credit-feature p{margin-top:1rem}
.credit-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-block:2rem}
.credit-nav a{display:grid;align-content:start;gap:.4rem;border:1px solid var(--line);padding:1rem;text-decoration:none}
.credit-nav a:hover{border-color:var(--accent)}
@media(max-width:640px){.credit-layout,.credit-feature{grid-template-columns:1fr}.credit-poster{max-width:240px}.credit-feature img{max-width:300px}}
.credit-content .credit-team dd{color:var(--ink);font-size:1rem;font-weight:600}

.brand-lettering{display:block;flex:none;width:7.65rem;height:auto;overflow:visible;fill:var(--ink);font:700 19px "Instrument Sans",Inter,system-ui,sans-serif;font-kerning:normal}
@media(max-width:380px){.brand-lettering{width:6.1rem}}

.bar nav,footer.wrap{align-items:center}
.instagram-link{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;color:var(--accent)}
.instagram-link:hover{color:var(--ink)}
.instagram-link svg{width:21px;height:21px}
@media(max-width:420px){.bar{flex-wrap:wrap;padding-block:.75rem}.bar nav{margin-left:auto}}

.footer-links{display:flex;align-items:center;gap:.65rem;flex:none}
.union-link{display:grid;place-items:center;min-height:44px}
.union-link img{display:block;width:clamp(104px,16vw,148px);height:auto}
@media(max-width:440px){footer.wrap{flex-wrap:wrap}.footer-links{margin-left:auto}}

/* Keep the full emblem and union name while masking the dashboard subtitle. */
.union-link img{clip-path:polygon(0 0,100% 0,100% 61%,24% 61%,24% 100%,0 100%)}

/* Center the union name independently of the removed subtitle. */
.union-link{display:flex;align-items:center;width:clamp(112px,17vw,148px);position:relative}
.union-link img{width:100%;clip-path:inset(0 76% 0 0)}
.union-link::after{content:"";position:absolute;left:24%;width:76%;aspect-ratio:224/33;background:url("/images/iatse-491.png") right top / 131.7% auto no-repeat;pointer-events:none}

.collection-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.about-copy .inquiry-button{margin-top:1.5rem}

.inquiry-icon{width:22px;height:22px;flex:none;color:var(--accent)}
.inquiry-button:hover .inquiry-icon,.inquiry-button:focus-visible .inquiry-icon{color:var(--base)}

#services{background:linear-gradient(115deg,#244663b8,#14283edb),url("/images/navy-twill.jpg") center / 760px auto,#14283e}
.about{background:linear-gradient(115deg,#203e5bb0,#13263bde),url("/images/navy-twill.jpg") center / 760px auto,#13263b}

.load-credits{margin:2rem auto 0;display:flex;font:inherit;cursor:pointer;background:transparent}
.load-credits[hidden]{display:none}