@font-face {
  font-family:Barlow;
  src:url(assets/barlow-condensed-800.ttf) format("truetype");
  font-weight:800;
  font-display:swap}
@font-face {
  font-family:DM;
  src:url(assets/dm-sans-400.ttf) format("truetype");
  font-weight:400;
  font-display:swap}
@font-face {
  font-family:DM;
  src:url(assets/dm-sans-600.ttf) format("truetype");
  font-weight:600;
  font-display:swap}
:root {
  --navy:#0a2037;
  --peach:#ffad70;
  --white:#f2f4f6;
  --muted:#bcc9d5;
  --line:#42566b}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%}
body {
  margin:0;
  background:var(--navy);
  color:var(--white);
  font-family:DM,Arial,sans-serif;
  font-size:17px;
  line-height:1.55}
a {
  color:inherit;
  text-decoration:none}
a:focus-visible {
  outline:3px solid var(--peach);
  outline-offset:7px}
.skip {
  position:fixed;
  top:-100px;
  background:var(--peach);
  color:var(--navy);
  padding:12px;
  z-index:10}
.skip:focus {
  top:8px}
header {
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4.5vw;
  max-width:1800px;
  margin:auto}
.brand {
  font-family:Barlow,Impact,sans-serif;
  font-weight:800;
  font-size:38px;
  line-height:.8;
  color:var(--peach);
  display:flex;
  align-items:baseline;
  gap:6px;
  letter-spacing:-1px}
.brand span {
  font-family:DM,Arial,sans-serif;
  font-size:11px;
  letter-spacing:.13em}
nav {
  display:flex;
  gap:42px;
  align-items:center;
  font-size:14px}
nav a {
  padding:8px 0}
nav a:hover,.text-link:hover {
  color:var(--peach)}
main {
  max-width:1800px;
  margin:auto}
h1,h2,h3,p {
  margin-top:0}
h1,h2,h3 {
  font-family:Barlow,Impact,sans-serif;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:.9}
h1 {
  font-size:clamp(66px,8.1vw,142px);
  margin-bottom:30px;
  color:var(--peach)}
h2 {
  font-size:clamp(40px,4vw,68px);
  margin-bottom:25px}
h3 {
  font-size:40px;
  margin-bottom:18px}
p {
  max-width:40em}
.hero {
  min-height:650px;
  min-height:calc(100dvh - 86px);
  max-height:1050px;
  display:grid;
  grid-template-columns:1fr 28%;
  align-items:center;
  gap:4%;
  padding:40px 8vw 65px 4.5vw;
  overflow:hidden}
.hero-copy {
  position:relative;
  z-index:1}
.hero-copy>p {
  max-width:36ch;
  color:var(--muted);
  font-size:18px;
  margin-bottom:30px}
.button {
  display:inline-flex;
  gap:60px;
  align-items:center;
  justify-content:space-between;
  white-space:nowrap;
  background:var(--peach);
  color:var(--navy);
  padding:17px 23px;
  font-size:14px;
  font-weight:600;
  transition:transform .18s ease,background .18s ease}
.button:hover {
  background:#ffbd8b;
  transform:translateY(-3px)}
.button:active {
  transform:translateY(1px)}
.mascot {
  width:100%;
  aspect-ratio:.53;
  overflow:hidden;
  position:relative;
  background:var(--navy)}
.mascot img {
  position:absolute;
  width:480%;
  height:auto;
  max-width:none;
  left:-63%;
  top:-69%;
  mix-blend-mode:normal}
.intro {
  margin:0 4.5vw;
  padding:100px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:7vw}
.intro h2 {
  color:var(--peach)}
.text-link {
  font-size:15px;
  display:inline-flex;
  gap:50px;
  border-bottom:1px solid;
  padding-bottom:7px}
.lead {
  font-size:clamp(23px,2.2vw,36px);
  line-height:1.25;
  letter-spacing:-.025em}
.intro-copy>p:last-child {
  color:var(--muted);
  font-size:16px;
  max-width:30ch;
  margin-bottom:0}
footer {
  max-width:1800px;
  margin:auto;
  padding:36px 4.5vw;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font-size:12px}
footer p {
  margin:0;
  color:var(--muted)}
footer>a:last-child {
  font-size:14px}
footer .brand {
  font-size:30px}
.studio {
  padding:60px 4.5vw 80px;
  display:grid;
  grid-template-columns:1fr 30%;
  column-gap:10vw;
  align-items:center}
.role {
  font-size:14px;
  color:var(--muted);
  margin-bottom:24px}
.studio h1 {
  font-size:clamp(60px,7.8vw,132px)}
.studio-intro {
  font-size:22px;
  margin-bottom:0}
.studio .mascot {
  max-width:360px;
  justify-self:center}
.studio-story {
  padding-top:100px;
  max-width:650px}
.studio-story h2 {
  color:var(--peach)}
.studio-story p {
  max-width:45ch;
  color:var(--muted)}
.studio-story .button {
  margin-top:16px}
.contact {
  padding:60px 4.5vw 75px;
  display:flex;
  align-items:flex-start;
  flex-direction:column}
.contact h1 {
  font-size:clamp(80px,11.4vw,190px);
  margin-bottom:28px}
.contact-intro {
  font-size:20px;
  margin-bottom:26px}
.email {
  font-size:clamp(22px,3.1vw,48px);
  letter-spacing:-.04em;
  border-bottom:2px solid var(--peach);
  padding-bottom:12px;
  color:var(--peach);
  word-break:break-word}
.email span {
  display:inline-block;
  margin-left:36px}
@media(min-width:1600px) {
  .hero {
  padding-right:8vw}
.hero h1 {
  font-size:150px}
}
@media(max-width:1000px) {
  .hero {
  grid-template-columns:1fr 27%;
  gap:4%;
  padding-right:4.5vw;
  min-height:570px}
h1 {
  font-size:8.8vw}
header {
  height:74px}
.intro {
  padding:65px 0}
.studio {
  column-gap:5vw}
.studio h1 {
  font-size:8vw}


}
@media(max-width:650px) {
  body {
  font-size:16px}

header {
  padding:0 20px;
  height:75px}
.brand {
  font-size:32px}
.brand span {
  font-size:9px}
nav {
  gap:24px;
  font-size:12px}
.hero {
  min-height:0;
  max-height:none;
  grid-template-columns:1fr;
  position:relative;
  padding:45px 20px 40px;
  gap:35px}
.hero h1 {
  font-size:clamp(56px,12vw,78px);
  margin-bottom:24px}
.hero-copy>p {
  font-size:15px;
  max-width:30ch}
.hero .mascot {
  width:34%;
  min-width:120px;
  max-width:190px;
  justify-self:end;
  margin-right:10px}
.button {
  gap:55px;
  padding:15px 20px}
.intro {
  margin:0 20px;
  padding:50px 0;
  grid-template-columns:1fr;
  gap:35px}
.intro h2 {
  font-size:44px}
.intro-copy .lead {
  font-size:28px}



footer {
  padding:30px 20px;
  flex-wrap:wrap;
  gap:25px}
footer p {
  order:3;
  flex-basis:100%;
  font-size:11px}
.studio {
  padding:45px 20px 50px;
  grid-template-columns:1fr;
  gap:40px}
.studio h1 {
  font-size:16vw}
.studio .mascot {
  width:45%;
  justify-self:end;
  margin-top:0}
.studio-story {
  padding-top:0}
.studio-story h2 {
  font-size:44px}
.studio-intro {
  font-size:19px}

.contact {
  padding:45px 20px 45px;
  min-height:0}
.contact h1 {
  font-size:17vw}
.contact-intro {
  font-size:18px}
.email {
  font-size:clamp(22px,6.2vw,38px)}
.email span {
  margin-left:8px}












}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  transition:none!important;
  animation:none!important}
}

/* Company and representation pages, using the selected first design. */
nav [aria-current="page"] {color:var(--peach)}
.studio-emblem {width:100%;height:auto;max-width:400px;justify-self:center}
.production-contact>p {margin-bottom:14px;font-size:18px}
.production-contact>p span {display:block;color:var(--muted);font-size:13px;margin-top:3px}
.representation {margin:0 4.5vw;padding:25px 0 95px}
.representation>h2 {color:var(--peach);margin-bottom:40px}
.rep-row {display:grid;grid-template-columns:1fr 1.3fr 1.4fr;gap:25px;padding:30px 0;border-top:1px solid var(--line);align-items:start}
.rep-row h3 {font-size:clamp(28px,2.7vw,42px);margin:0;line-height:1.05}
.territory {margin:0;color:var(--muted);font-size:14px}
.rep-links {display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:15px;min-width:0}
.rep-links a {overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:5px}
.rep-links a:hover {color:var(--peach)}
@media(max-width:650px) {
 .studio-emblem {width:80%;max-width:300px;justify-self:center}
 .representation {margin:0 20px;padding:15px 0 55px}
 .representation>h2 {font-size:42px;margin-bottom:28px}
 .rep-row {grid-template-columns:1fr;gap:12px;padding:25px 0}
 .rep-row h3 {font-size:34px}
 .production-contact>p {font-size:17px}
}

/* Comfortable touch targets without changing the approved composition. */
@media(max-width:1000px),(pointer:coarse) {
 nav a,footer>a:last-child,.text-link,.rep-links a {min-height:44px;display:inline-flex;align-items:center}
 nav a {padding-block:10px;gap:6px}
 footer>a:last-child {gap:6px}
 .rep-links {gap:2px}
 .rep-links a {max-width:100%}
 .production-contact {max-width:100%;min-width:0}
}