*{box-sizing:border-box}
:root{
  --bg:#0c0c0c;
  --fg:#f0eee8;
  --muted:#aaa7a0;
  --line:rgba(240,238,232,.18);
  --red:#ff3b30;
  --lime:#c7ff4a;
  --font:"Manrope",Arial,sans-serif;
  --mono:"DM Mono",monospace;
}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);
  overflow-x:hidden;cursor:none
}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* Keep Unicode arrows typographic on iOS/Safari instead of emoji-style glyphs. */
.project-arrow,
.journal-arrow,
.contact-toggle-arrow,
.header-cta,
.scramble-text,
.mobile-menu a{
  font-variant-emoji:text;
}
.noise{
  position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:90;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.site-header{
  position:fixed;z-index:100;top:0;left:0;right:0;height:78px;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;padding:0 32px;border-bottom:1px solid transparent;
  mix-blend-mode:difference;color:#fff;transition:.3s
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.02em}
.brand-mark{
  width:25px;height:25px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;
  font-size:13px
}
.desktop-nav{display:flex;gap:29px;font-size:13px}
.desktop-nav a,.header-cta{position:relative}
.desktop-nav a:after,.header-cta:after{
  content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .3s ease
}
.desktop-nav a:hover:after,.header-cta:hover:after{transform:scaleX(1);transform-origin:left}
.header-cta{justify-self:end;font-size:13px}
.menu-btn{display:none;background:none;border:0;color:inherit;width:38px;height:38px;padding:9px}
.menu-btn span{display:block;height:1px;background:currentColor;margin:7px 0}
.mobile-menu{display:none}

.hero{
  min-height:100vh;padding:118px 30px 34px;position:relative;display:flex;flex-direction:column;
  justify-content:space-between;overflow:hidden
}
.hero-kicker{color:var(--muted)}
.hero-copy{position:relative;z-index:2;margin-top:8vh}
.hero-title{margin:0;font-size:clamp(70px,12.3vw,190px);line-height:.78;letter-spacing:-.075em;font-weight:500}
.hero-title .line{display:block}
.hero-title .line:nth-child(2){margin-left:8vw}
.hero-title .accent-line{color:var(--red);margin-left:26vw;font-style:italic}
.hero-title em{font-size:.34em;vertical-align:top;font-style:normal;display:inline-block;transform:translateY(-.2em)}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:3}
.hero-intro{font-size:clamp(16px,1.8vw,25px);line-height:1.25;max-width:570px;letter-spacing:-.035em;margin:0}
.scroll-hint{display:flex;align-items:center;gap:14px;color:var(--muted)}
.scroll-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:scale(2);opacity:.35}}
.hero-orbit{position:absolute;width:440px;height:440px;right:-90px;top:18%;opacity:.32}
.orbit-ring{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%}
.orbit-word{
  position:absolute;left:50%;top:50%;font:400 13px var(--mono);letter-spacing:.18em;white-space:nowrap;
  transform-origin:0 0;animation:spin 18s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

.ticker-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:18px 0}
.ticker-track{display:flex;width:max-content;align-items:center;gap:28px;animation:ticker 28s linear infinite;font-size:18px;letter-spacing:-.03em}
.ticker-track i{font-style:normal;color:var(--red)}
@keyframes ticker{to{transform:translateX(-50%)}}

.work-section,.studios-section,.journal-section{padding:130px 30px}
.section-head{display:grid;grid-template-columns:2fr 1fr;gap:30px;align-items:end;margin-bottom:65px}
.section-index{display:block;color:var(--muted);margin-bottom:22px}
.section-head h2{font-size:clamp(50px,7vw,110px);line-height:.9;letter-spacing:-.065em;font-weight:500;margin:0}
.section-head p{max-width:400px;color:var(--muted);line-height:1.45;margin:0 0 8px;font-size:14px}

.project{margin-bottom:120px}
.project-media{display:block;height:min(72vw,820px);overflow:hidden;background:#151515}
.project-art{width:100%;height:100%;position:relative;overflow:hidden;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.project-art::before{
  content:"";
  position:absolute;
  inset:-4px;
  background:var(--project-background);
  filter:blur(2px);
  transform:scale(1.01);
}
.project-art > *{z-index:1}
.project-media:hover .project-art{transform:scale(1.018)}
.art-1{
  --project-background:
    linear-gradient(120deg,rgba(5,5,5,.48),rgba(5,5,5,.18)),
    url("image/rainz.jpeg") center center / cover no-repeat;
  background:
    linear-gradient(120deg,rgba(5,5,5,.48),rgba(5,5,5,.18)),
    url("image/rainz.jpeg") center center / cover no-repeat,
    #151515;
}
.chrome-word{
  position:absolute;left:5%;top:50%;transform:translateY(-52%);font-size:clamp(72px,17vw,260px);
  font-weight:800;letter-spacing:-.08em;color:#ece8e1;text-shadow:0 12px 40px rgba(0,0,0,.45)
}
.floating-pill{position:absolute;border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:9px 14px;font:400 10px var(--mono);letter-spacing:.08em}
.pill-a{right:8%;top:14%;transform:rotate(7deg)}
.pill-b{right:22%;bottom:12%;transform:rotate(-5deg)}
.art-2{
  --project-background:
    linear-gradient(145deg,rgba(3,10,12,.34),rgba(7,24,29,.48)),
    url("image/cybertagDistrict2.jpeg") center center / cover no-repeat;
  background:
    linear-gradient(145deg,rgba(3,10,12,.34),rgba(7,24,29,.48)),
    url("image/cybertagDistrict2.jpeg") center center / cover no-repeat,
    #061011;
}
.cyber-grid{
  position:absolute;inset:0;background-image:linear-gradient(rgba(86,255,228,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(86,255,228,.12) 1px,transparent 1px);
  background-size:50px 50px;transform:perspective(600px) rotateX(55deg) scale(1.7);transform-origin:center bottom
}
.cyber-title{position:absolute;left:5%;bottom:6%;font-size:clamp(65px,13vw,205px);font-weight:700;line-height:.76;letter-spacing:-.07em;color:#b7ffe9}
.project-tag{position:absolute;top:8%;right:6%;border:1px solid rgba(183,255,233,.5);padding:10px 14px;color:#b7ffe9}
.art-3{
  --project-background:
    linear-gradient(120deg,rgba(239,229,212,.18),rgba(199,181,153,.22)),
    url("image/bite.jpeg") center center / cover no-repeat;
  background:
    linear-gradient(120deg,rgba(239,229,212,.18),rgba(199,181,153,.22)),
    url("image/bite.jpeg") center center / cover no-repeat,
    #efe5d4;
}
.bite-logo{position:absolute;left:7%;top:50%;transform:translateY(-50%);font-size:clamp(80px,16vw,250px);font-weight:800;line-height:.72;letter-spacing:-.08em;color:#14100d}
.art-3 .project-tag{color:#14100d;border-color:rgba(20,16,13,.4)}
.food-orbit{position:absolute;border:2px solid #14100d;border-radius:50%}
.orbit-one{width:44vw;height:44vw;max-width:620px;max-height:620px;right:-7vw;top:7%}
.orbit-two{width:24vw;height:24vw;max-width:360px;max-height:360px;right:11vw;top:25%;border-style:dashed}
.project-meta{display:grid;grid-template-columns:1.2fr 1fr auto;gap:25px;padding:18px 0;border-bottom:1px solid var(--line);align-items:end}
.project-meta>div{display:flex;align-items:baseline;gap:18px}
.project-meta h3{font-size:30px;letter-spacing:-.045em;margin:0;font-weight:500}
.project-meta p{margin:0;color:var(--muted);font-size:13px}
.project-arrow{font-size:24px}

.statement-section{padding:130px 30px;background:var(--fg);color:#111}
.statement-section .section-index{color:#555}
.statement{font-size:clamp(44px,7.5vw,118px);line-height:.94;letter-spacing:-.065em;margin:70px 0 80px;max-width:1500px}
.statement span{color:#888}
.statement-foot{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid #bbb;padding-top:22px}
.statement-foot p{max-width:540px;line-height:1.5;margin:0;color:#454545}
.statement-foot a{justify-self:end;border-bottom:1px solid #111;padding-bottom:4px}

.studios-section{position:relative}
.studio-list{position:relative;z-index:2;width:100%}
.studio-row{
  display:grid;grid-template-columns:70px 1fr 1fr 40px;gap:20px;align-items:center;padding:32px 0;
  border-top:1px solid var(--line);transition:.3s;cursor:pointer
}
.studio-row:last-child{border-bottom:1px solid var(--line)}
.studio-row h3{font-size:clamp(56px,9vw,140px);font-weight:500;letter-spacing:-.065em;margin:0;line-height:.85;transition:.3s}
.studio-services{font-size:13px;color:var(--muted);max-width:480px;line-height:1.5}
.studio-symbol{font-size:24px;transition:.3s}
.studio-row:hover h3,.studio-row.active h3{color:var(--red);transform:translateX(12px)}
.studio-row:hover .studio-symbol,.studio-row.active .studio-symbol{transform:rotate(45deg);color:var(--red)}
.studio-visual{height:560px;margin-top:80px;position:relative;overflow:hidden;border:1px solid var(--line)}
.studio-panel{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:.6s ease;pointer-events:none}
.studio-panel.active{opacity:1;transform:scale(1)}
.panel-creative{background:#ecdfcf}
.poster-stack{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:20px;transform:rotate(-4deg)}
.poster{width:27%;aspect-ratio:.72;display:flex;align-items:flex-end;padding:22px;font-weight:800;font-size:clamp(35px,5vw,76px);line-height:.82;letter-spacing:-.065em;color:#111;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.p1{background:#ff3b30;transform:rotate(-5deg)}
.p2{background:#f6f1e7;transform:translateY(-22px) rotate(2deg)}
.p3{background:#c7ff4a;transform:rotate(7deg);writing-mode:vertical-rl}
.panel-tech{background:#050b08;display:grid;place-items:center}
.terminal{width:min(76%,900px);border:1px solid #6cff9c;color:#6cff9c;padding:32px;font-family:var(--mono);box-shadow:0 0 60px rgba(70,255,140,.12)}
.terminal>span{font-size:11px;opacity:.6}
.terminal pre{font:400 clamp(28px,5vw,70px)/1.15 var(--mono);white-space:pre-wrap;margin:50px 0}
.terminal-cursor{width:13px;height:24px;background:#6cff9c;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.panel-game{background:linear-gradient(#5b1734,#ff6a4c 52%,#111 53%);overflow:hidden}
.game-world{position:absolute;inset:0}
.sun{position:absolute;width:180px;height:180px;border-radius:50%;background:#ffd5a8;left:50%;top:18%;transform:translateX(-50%)}
.terrain{position:absolute;bottom:-10%;left:-10%;width:120%;height:48%;background:#111;clip-path:polygon(0 60%,15% 35%,28% 55%,40% 25%,55% 50%,68% 20%,82% 48%,100% 25%,100% 100%,0 100%)}
.t2{bottom:-17%;opacity:.65;transform:scaleX(1.05) translateX(7%);background:#391126}
.t3{bottom:-25%;opacity:.5;transform:scaleX(1.1) translateX(-8%);background:#771d38}
.crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:300 70px var(--mono);color:#fff}

.manifesto-section{padding:100px 30px 150px;overflow:hidden}
.manifesto-word{
  font-size:clamp(90px,20vw,310px);font-weight:700;line-height:.76;letter-spacing:-.085em;
  white-space:nowrap;transform:translateX(-4vw);transition:color .25s
}
.manifesto-word:nth-child(even){transform:translateX(8vw)}
.manifesto-word:hover{color:var(--red)}
.manifesto-word.outline{color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.manifesto-word.outline:hover{color:var(--red);-webkit-text-stroke-color:var(--red)}

.journal-section{border-top:1px solid var(--line)}
.journal-list{border-top:1px solid var(--line)}
.journal-item{
  position:relative;display:grid;grid-template-columns:180px 1fr 110px 40px;gap:20px;align-items:center;
  padding:34px 0;border-bottom:1px solid var(--line);min-height:120px
}
.journal-item h3{margin:0;font-size:clamp(26px,4vw,58px);font-weight:500;letter-spacing:-.05em;line-height:1}
.journal-date{color:var(--muted)}
.journal-arrow{font-size:22px}
.journal-preview{
  width:220px;height:145px;position:fixed;left:0;top:0;opacity:0;pointer-events:none;z-index:50;
  transform:scale(.8) rotate(-4deg);transition:opacity .2s,transform .2s;background:#333
}
.journal-item:hover .journal-preview{opacity:1;transform:scale(1) rotate(-2deg)}
.preview-a{background:linear-gradient(135deg,#ff3b30,#151515)}
.preview-b{background:linear-gradient(135deg,#c7ff4a,#23340b)}
.preview-c{background:linear-gradient(135deg,#c8c0ff,#19132e)}

.culture-section{padding:0 30px 130px}
.culture-banner{min-height:680px;background:#d9ff45;color:#0e1107;position:relative;overflow:hidden;padding:42px;display:flex;align-items:flex-end}
.culture-copy{position:relative;z-index:2;width:65%}
.culture-copy h2{font-size:clamp(60px,10vw,150px);line-height:.82;letter-spacing:-.075em;font-weight:600;margin:20px 0 30px}
.culture-copy p{max-width:520px;font-size:19px;line-height:1.4}
.culture-graphic{position:absolute;right:0;top:0;width:42%;height:100%;border-left:1px solid rgba(14,17,7,.35)}
.frame-line{position:absolute;border:1.5px solid #0e1107}
.f1{width:60%;height:54%;right:11%;top:12%;transform:rotate(5deg)}
.f2{width:60%;height:54%;right:17%;top:20%;transform:rotate(-4deg)}
.f3{width:34%;height:68%;right:27%;top:14%;transform:rotate(10deg)}
.culture-stamp{position:absolute;right:11%;bottom:8%;font:500 16px/1.1 var(--mono);border:1px solid #0e1107;border-radius:50%;width:130px;height:130px;display:grid;place-items:center;text-align:center;transform:rotate(-8deg)}

.contact-section{padding:45px 30px 20px;min-height:100vh;display:flex;flex-direction:column}
.contact-top{display:flex;justify-content:space-between;color:var(--muted)}
.contact-title{font-size:clamp(72px,12.5vw,200px);line-height:.8;letter-spacing:-.078em;font-weight:500;margin:auto 0 70px}
.contact-title span{color:var(--red);font-style:italic}
.contact-link{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;font-size:clamp(30px,5vw,72px);letter-spacing:-.05em}
.contact-link span:last-child{transition:.3s}
.contact-link:hover span:last-child{transform:rotate(45deg);color:var(--red)}
footer{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;margin-top:90px;padding-top:30px}
.footer-brand{font-size:30px;font-weight:700;letter-spacing:-.05em}
.footer-links{display:flex;gap:20px;justify-content:center;font-size:12px}
.footer-copy{justify-self:end;color:var(--muted)}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%}
.cursor-dot{width:5px;height:5px;background:#fff;mix-blend-mode:difference}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);mix-blend-mode:difference;transition:width .2s,height .2s,border-color .2s}

@media (max-width:900px){
  body{cursor:auto}
  .cursor-dot,.cursor-ring{display:none}
  .site-header{grid-template-columns:1fr auto;padding:0 18px;height:64px}
  .desktop-nav,.header-cta{display:none}
  .menu-btn{display:block;justify-self:end;cursor:pointer}
  .mobile-menu{
    display:block;position:fixed;inset:0;background:#ff3b30;color:#0c0c0c;z-index:95;
    transform:translateY(-100%);transition:.55s cubic-bezier(.76,0,.24,1)
  }
  .mobile-menu.open{transform:none}
  .mobile-menu-inner{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:90px 20px 40px;gap:6px}
  .mobile-menu a{font-size:13vw;line-height:.95;letter-spacing:-.065em;font-weight:600}
  .hero{padding:100px 18px 22px;min-height:100svh}
  .hero-copy{margin-top:15vh}
  .hero-title{font-size:19vw;line-height:.82}
  .hero-title .line:nth-child(2){margin-left:0}
  .hero-title .accent-line{margin-left:12vw}
  .hero-bottom{display:block}
  .hero-intro{font-size:17px;max-width:90%}
  .scroll-hint{margin-top:30px}
  .hero-orbit{width:260px;height:260px;right:-100px;top:20%}
  .work-section,.studios-section,.journal-section{padding:90px 18px}
  .section-head{grid-template-columns:1fr;gap:22px;margin-bottom:45px}
  .section-head h2{font-size:16vw}
  .project{margin-bottom:72px}
  .project-media{height:115vw;max-height:none}
  .project-meta{grid-template-columns:1fr auto;padding-top:14px}
  .project-meta p{grid-column:1/-1;grid-row:2}
  .project-meta h3{font-size:24px}
  .chrome-word{font-size:23vw;left:0}
  .cyber-title{font-size:18vw;left:5%;bottom:8%}
  .bite-logo{font-size:24vw}
  .orbit-one{width:90vw;height:90vw;right:-43vw;top:20%}
  .orbit-two{width:52vw;height:52vw;right:-4vw;top:31%}
  .statement-section{padding:90px 18px}
  .statement{font-size:12vw;margin:50px 0 65px}
  .statement-foot{grid-template-columns:1fr;gap:30px}
  .statement-foot a{justify-self:start}
  .studios-section{min-height:auto}
  .studio-row{grid-template-columns:42px 1fr 28px;gap:8px;padding:25px 0}
  .studio-row h3{font-size:15vw}
  .studio-services{grid-column:2/3;margin-top:8px;font-size:12px}
  .studio-symbol{grid-column:3;grid-row:1/3}
  .studio-visual{height:90vw;max-height:530px;margin-top:55px}
  .poster-stack{gap:6px}
  .poster{width:31%;padding:10px;font-size:8vw}
  .terminal{width:86%;padding:18px}
  .terminal pre{font-size:7vw}
  .manifesto-section{padding:75px 18px 100px}
  .manifesto-word{font-size:25vw}
  .journal-item{grid-template-columns:1fr auto;gap:10px;padding:24px 0}
  .journal-item>span:first-child{grid-column:1}
  .journal-item h3{grid-column:1/3;font-size:8vw}
  .journal-date{grid-column:1}
  .journal-arrow{grid-column:2;grid-row:1}
  .journal-preview{display:none}
  .culture-section{padding:0 18px 90px}
  .culture-banner{min-height:700px;padding:24px;align-items:flex-start}
  .culture-copy{width:100%;z-index:3}
  .culture-copy h2{font-size:17vw;margin-top:28px}
  .culture-graphic{width:100%;height:55%;top:auto;bottom:0;border-left:0;border-top:1px solid rgba(14,17,7,.35)}
  .contact-section{padding:32px 18px 16px;min-height:100svh}
  .contact-title{font-size:19vw;margin:auto 0 50px}
  footer{grid-template-columns:1fr;gap:28px}
  .footer-links{justify-content:flex-start;flex-wrap:wrap}
  .footer-copy{justify-self:start}
}


/* --- V3: Theatives brand + sci-fi atmosphere --- */
.brand img{
  display:block;
  width:148px;
  height:auto;
  max-height:44px;
  object-fit:contain;
  object-position:left center;
}

.global-space{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 52% -10%,rgba(32,48,62,.28),transparent 40%),
    linear-gradient(#08090a,#090a0d 52%,#070708);
}
.space-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(95px);
  opacity:.13;
}
.glow-a{
  width:520px;height:520px;right:-190px;top:18%;
  background:#377ec3;
}
.glow-b{
  width:560px;height:560px;left:-250px;top:64%;
  background:#70d8e8;opacity:.06;
}
.space-grid{
  position:absolute;
  width:130%;
  height:72%;
  left:-15%;
  bottom:-43%;
  opacity:.055;
  background-image:
    linear-gradient(rgba(150,215,255,.38) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,215,255,.38) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(680px) rotateX(68deg);
  transform-origin:center top;
}
.space-ring{
  position:absolute;
  border:1px solid rgba(175,225,255,.055);
  border-radius:50%;
}
.ring-a{width:860px;height:860px;left:-520px;top:24%}
.ring-b{width:1120px;height:1120px;right:-760px;top:65%}

/* Preserve V1 hero composition; only replace atmosphere */
.hero{
  background:
    linear-gradient(180deg,rgba(5,6,8,.12),rgba(5,6,8,.42)),
    radial-gradient(circle at 72% 35%,rgba(78,119,146,.08),transparent 31%);
  isolation:isolate;
}
.hero-scifi{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-kicker,.hero-copy,.hero-bottom,.hero-orbit{
  z-index:3;
}
.scifi-planet{
  position:absolute;
  width:min(58vw,820px);
  aspect-ratio:1;
  right:-12vw;
  top:-9vw;
  opacity:.86;
}
.planet-core{
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 24%,rgba(255,255,255,.22),transparent 8%),
    radial-gradient(circle at 35% 37%,rgba(116,161,185,.30),transparent 27%),
    radial-gradient(circle at 70% 68%,rgba(15,18,23,.18),rgba(1,2,4,.98) 68%),
    linear-gradient(145deg,#32414b,#030406);
  box-shadow:
    -72px 18px 120px rgba(82,144,175,.12),
    inset -80px -45px 110px #000;
}
.planet-shadow{
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:linear-gradient(108deg,transparent 20%,rgba(0,0,0,.08) 44%,rgba(0,0,0,.94) 69%);
}
.planet-ring{
  position:absolute;
  width:108%;
  height:24%;
  left:-4%;
  top:45%;
  border:1px solid rgba(155,219,255,.18);
  border-radius:50%;
  transform:rotate(-15deg);
  box-shadow:0 0 34px rgba(125,203,255,.06);
}
.wireframe{
  position:absolute;
  border:1px solid rgba(125,203,255,.11);
  transform:rotate(45deg);
}
.wf-a{width:155px;height:155px;left:13%;top:24%}
.wf-b{width:72px;height:72px;left:30%;top:15%}
.wf-c{width:230px;height:230px;right:0;top:29%}
.wf-d{width:110px;height:110px;right:16%;top:47%}
.particle{
  position:absolute;
  border-radius:50%;
  background:#d6f7ff;
  box-shadow:0 0 18px rgba(170,231,255,.9);
}
.pt-a{width:3px;height:3px;left:20%;top:43%}
.pt-b{width:2px;height:2px;left:38%;top:20%}
.pt-c{width:3px;height:3px;right:33%;top:70%}
.horizon-line{
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:9%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(145,209,239,.12),transparent);
  transform:rotate(-2deg);
}

/* Faint "live" terminal readout, sitting behind the hero copy on the right */
.hero-terminal{
  position:absolute;
  right:6%;
  left:auto;
  top:38%;
  width:min(320px,32vw);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.01em;
  color:rgba(160,214,238,.32);
  white-space:pre;
}
.terminal-line{
  min-height:1.5em;
}
.terminal-value{
  color:rgba(255,255,255,.2);
}
.terminal-cursor{
  display:inline-block;
  width:7px;
  height:12px;
  margin-left:2px;
  background:rgba(160,214,238,.42);
  vertical-align:-1px;
  animation:heroTerminalBlink 1s steps(1,end) infinite;
}
@keyframes heroTerminalBlink{
  50%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .terminal-cursor{animation:none;opacity:.5}
}
@media (max-width:900px){
  .hero-terminal{
    left:auto;
    right:18px;
    top:150px;
    transform:none;
    width:min(52vw,210px);
    font-size:11px;
    line-height:1.3;
    white-space:pre-wrap;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .terminal-line{min-height:1.3em}
  .wf-c{width:120px;height:120px;right:-2%;top:16%}
  .wf-d{width:60px;height:60px;right:26%;top:25%}

  /* Freeze the orbiting THEATIVES word — no spin on mobile */
  .orbit-word{animation:none}
}

@media (max-width:600px){
  .hero-terminal{
    right:14px;
    top:134px;
    width:min(56vw,190px);
    font-size:10.5px;
    line-height:1.25;
  }
  .terminal-line{min-height:1.25em}
  .wf-c{width:96px;height:96px;right:-4%;top:14%}
  .wf-d{width:48px;height:48px;right:24%;top:22%}
}

@media (max-width:390px){
  .hero-terminal{
    right:12px;
    top:126px;
    width:min(60vw,175px);
    font-size:10px;
    line-height:1.2;
  }
  .terminal-line{min-height:1.2em}
  .wf-c{width:82px;height:82px;top:13%}
  .wf-d{width:40px;height:40px;top:20%}
}

/* Keep old studio section, but integrate the visual panel tighter */
.studios-section{
  border-top:1px solid var(--line);
}
.studio-visual{
  background:rgba(8,9,11,.55);
  backdrop-filter:blur(4px);
}

/* Work now comes after Studios */
.work-section{
  border-top:1px solid var(--line);
}

/* Hero orbit is retained from V1 but softened into the sci-fi scene */
.hero-orbit{
  opacity:.18;
}
.orbit-ring{
  border-color:rgba(165,219,245,.16);
}

@media (max-width:900px){
  .brand img{width:118px;max-height:38px}
  .scifi-planet{
    width:120vw;
    right:-54vw;
    top:2vh;
    opacity:.72;
  }
  .wf-a{left:8%;top:27%;width:105px;height:105px}
  .wf-b{left:38%;top:18%;width:52px;height:52px}
}


/* =========================================================
   V4 — collapsible Studios + Locomotive-inspired text motion
   ========================================================= */

.studio-accordion{
  border-top:1px solid var(--line);
}

.studio-item{
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.studio-trigger{
  width:100%;
  min-height:162px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  display:grid;
  grid-template-columns:70px 1.1fr 1fr 44px;
  gap:20px;
  align-items:center;
  text-align:left;
  cursor:pointer;
}

.studio-name{
  display:block;
  font-size:clamp(58px,9vw,140px);
  font-weight:500;
  line-height:.84;
  letter-spacing:-.068em;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),color .35s ease;
}

.studio-trigger .studio-services{
  max-width:470px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.studio-plus{
  justify-self:end;
  width:24px;
  height:24px;
  position:relative;
}

.studio-plus:before,
.studio-plus:after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:1px;
  background:currentColor;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .3s;
}
.studio-plus:after{transform:rotate(90deg)}

.studio-item.active .studio-name{
  color:var(--red);
  transform:translateX(12px);
}
.studio-item.active .studio-plus:after{transform:rotate(0)}
.studio-item.active .studio-plus:before,
.studio-item.active .studio-plus:after{background:var(--red)}

.studio-collapse{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .72s cubic-bezier(.16,1,.3,1),opacity .35s ease;
}
.studio-collapse > *{overflow:hidden}

.studio-item.active .studio-collapse{
  grid-template-rows:1fr;
  opacity:1;
}

.studio-collapse-inner{
  min-height:0;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:32px;
  padding:0 0 34px;
}

.studio-detail{
  padding:38px 0 28px 90px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
}

.studio-detail > .mono{color:var(--muted)}
.studio-detail h3{
  margin:26px 0 18px;
  font-size:clamp(36px,4.8vw,74px);
  line-height:.94;
  letter-spacing:-.055em;
  font-weight:500;
}
.studio-detail p{
  margin:0;
  max-width:460px;
  color:#b9b6b0;
  font-size:14px;
  line-height:1.58;
}
.studio-detail > a{margin-top:28px}

.studio-live{
  height:520px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#101012;
}

/* Creative world */
.creative-live{
  background:
    radial-gradient(circle at 75% 25%,#ff9389 0,#bd3126 18%,#36100d 50%,#080808 100%);
}
.creative-orbit{
  position:absolute;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  animation:studioOrbit 12s linear infinite;
}
.creative-live .orbit-a{width:430px;height:430px;right:-80px;top:-80px}
.creative-live .orbit-b{width:250px;height:250px;right:90px;top:92px;border-style:dashed;animation-direction:reverse}
.creative-poster{
  position:absolute;
  left:7%;
  bottom:8%;
  font-size:clamp(58px,8vw,126px);
  font-weight:800;
  line-height:.72;
  letter-spacing:-.075em;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.cp-b{
  left:auto;right:5%;bottom:8%;
  font-size:clamp(30px,4vw,62px);
  color:rgba(255,255,255,.3);
  transform:rotate(90deg) translateY(-100%);
  transform-origin:right bottom;
}
.creative-code{position:absolute;left:5%;top:6%;color:rgba(255,255,255,.6)}
.studio-item.active .creative-poster.cp-a{animation:posterFloat 5s ease-in-out infinite}

/* Tech world */
.tech-live{
  background:radial-gradient(circle at 48% 30%,#0d343b,#071416 44%,#030606 100%);
}
.tech-grid-v4{
  position:absolute;
  inset:-35%;
  background-image:
    linear-gradient(rgba(105,255,245,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(105,255,245,.15) 1px,transparent 1px);
  background-size:40px 40px;
  transform:perspective(620px) rotateX(62deg) rotateZ(-9deg);
  transform-origin:center bottom;
}
.tech-sphere{
  position:absolute;
  width:245px;height:245px;
  right:22%;top:22%;
  border:1px solid rgba(160,255,255,.4);
  border-radius:50%;
  box-shadow:inset -50px -50px 90px #000,0 0 80px rgba(100,255,255,.12);
  animation:spherePulse 5s ease-in-out infinite;
}
.tech-chip{
  position:absolute;
  border:1px solid rgba(150,255,255,.45);
  color:#baffff;
  background:rgba(20,80,80,.08);
  backdrop-filter:blur(4px);
  padding:12px 16px;
  box-shadow:0 0 35px rgba(92,255,255,.07);
}
.chip-a{left:12%;top:18%;transform:rotate(-7deg)}
.chip-b{right:13%;top:23%;transform:rotate(7deg)}
.chip-c{left:36%;bottom:14%;transform:rotate(3deg)}
.scan-line{
  position:absolute;
  left:0;right:0;height:1px;top:-10%;
  background:linear-gradient(90deg,transparent,#9dffff,transparent);
  box-shadow:0 0 18px #79ffff;
  opacity:.45;
  animation:scan 4s linear infinite;
}

/* Game world */
.game-live{
  background:linear-gradient(#30122b,#9b3155 44%,#ff8855 60%,#120c12 61%);
}
.game-sun-v4{
  position:absolute;width:190px;height:190px;border-radius:50%;
  background:#ffd3a2;left:54%;top:15%;transform:translateX(-50%);
  box-shadow:0 0 60px rgba(255,200,140,.22);
}
.game-land{
  position:absolute;left:-5%;width:110%;height:52%;bottom:-8%;
  clip-path:polygon(0 66%,13% 36%,26% 57%,39% 18%,52% 53%,67% 27%,83% 51%,100% 29%,100% 100%,0 100%);
}
.gl-a{background:#110f16}
.gl-b{background:#2b1225;bottom:-16%;transform:translateX(7%);opacity:.76}
.gl-c{background:#531c34;bottom:-24%;transform:translateX(-7%);opacity:.6}
.game-reticle{
  position:absolute;left:50%;top:50%;
  font:300 76px var(--mono);
  transform:translate(-50%,-50%);
  animation:reticlePulse 2.6s ease-in-out infinite;
}
.game-readout{position:absolute;left:4%;top:6%;color:rgba(255,255,255,.65)}

@keyframes studioOrbit{to{transform:rotate(360deg)}}
@keyframes posterFloat{50%{transform:translateY(-12px) rotate(-1deg)}}
@keyframes spherePulse{50%{transform:scale(1.05);box-shadow:inset -50px -50px 90px #000,0 0 110px rgba(100,255,255,.18)}}
@keyframes scan{to{top:110%}}
@keyframes reticlePulse{50%{transform:translate(-50%,-50%) scale(1.14);opacity:.55}}

/* Rolling text hover interaction */
.text-roll{
  display:inline-grid;
  overflow:hidden;
  vertical-align:bottom;
  line-height:1.15;
}
.text-roll > span{
  grid-area:1/1;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.text-roll > span:nth-child(2){
  transform:translateY(115%);
}
.text-roll:hover > span:first-child{
  transform:translateY(-115%);
}
.text-roll:hover > span:nth-child(2){
  transform:translateY(0);
}

/* Slight skew/slide reaction for large clickable rows */
.animated-link{
  position:relative;
}
.journal-item.animated-link h3{
  transition:transform .5s cubic-bezier(.16,1,.3,1),letter-spacing .5s cubic-bezier(.16,1,.3,1);
}
.journal-item.animated-link:hover h3{
  transform:translateX(18px);
  letter-spacing:-.058em;
}
.journal-item.animated-link .journal-arrow{
  transition:transform .45s cubic-bezier(.16,1,.3,1),color .25s;
}
.journal-item.animated-link:hover .journal-arrow{
  transform:rotate(45deg);
  color:var(--red);
}

.project-media.animated-link:after{
  content:"VIEW PROJECT ↗︎";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-35%) scale(.88);
  padding:12px 16px;
  border-radius:999px;
  background:var(--fg);
  color:#111;
  font:500 10px var(--mono);
  letter-spacing:.08em;
  opacity:0;
  transition:opacity .28s,transform .45s cubic-bezier(.16,1,.3,1);
  z-index:8;
  pointer-events:none;
}
.project-media.animated-link{position:relative}
.project-media.animated-link:hover:after{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* Contact rolling phrase */
.contact-roll{
  display:grid;
  overflow:hidden;
}
.contact-roll > span{grid-area:1/1;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.contact-roll > span:nth-child(2){transform:translateY(110%)}
.contact-link:hover .contact-roll > span:first-child{transform:translateY(-110%)}
.contact-link:hover .contact-roll > span:nth-child(2){transform:translateY(0)}

@media (max-width:900px){
  .studio-trigger{
    min-height:122px;
    grid-template-columns:42px 1fr 30px;
    gap:8px;
    padding:12px 0;
  }
  .studio-name{font-size:15vw}
  .studio-trigger .studio-services{
    grid-column:2/3;
    margin-top:4px;
    font-size:11px;
  }
  .studio-plus{grid-column:3;grid-row:1/3}
  .studio-collapse-inner{grid-template-columns:1fr;gap:18px;padding-bottom:24px}
  .studio-detail{padding:22px 0 10px 50px}
  .studio-detail h3{font-size:10vw}
  .studio-live{height:82vw;max-height:470px}
  .creative-live .orbit-a{width:70vw;height:70vw}
  .creative-live .orbit-b{width:42vw;height:42vw}
  .text-roll > span{transition:none}
  .text-roll > span:nth-child(2){display:none}
}


/* ============================================================
   V5 — Character reshuffle hover + stronger responsive system
   ============================================================ */

/* Disable previous roll duplicate behaviour */
.text-roll{
  display:inline-block;
  overflow:visible;
  line-height:inherit;
}
.text-roll > span{
  transform:none !important;
  transition:none !important;
}
.text-roll > span:nth-child(2){
  display:none !important;
}
.contact-roll{display:inline}
.contact-roll > span{transform:none!important}

/* Scramble-ready labels */
.scramble-text{
  display:inline-block;
  white-space:inherit;
  font-variant-ligatures:none;
  will-change:contents;
}

/* Small digital reaction while scrambling */
.scramble-text.is-scrambling{
  text-shadow:
    .02em 0 rgba(130,235,255,.35),
    -.02em 0 rgba(255,255,255,.12);
}

/* ----------------------------------------------
   Responsive typography using fluid clamp rules
   ---------------------------------------------- */

.hero-title{
  font-size:clamp(64px,12vw,186px);
  max-width:100%;
}
.hero-title .line{
  max-width:100%;
}

.section-head h2{
  font-size:clamp(48px,7vw,108px);
  max-width:100%;
}

.statement{
  font-size:clamp(42px,7.2vw,112px);
}

.studio-name{
  font-size:clamp(52px,8.4vw,132px);
}

.project-meta h3{
  font-size:clamp(22px,2.2vw,34px);
}

.manifesto-word{
  font-size:clamp(82px,18vw,280px);
}

.contact-title{
  font-size:clamp(72px,12vw,190px);
}

/* Prevent big type from creating horizontal overflow */
.hero,
.studios-section,
.work-section,
.statement-section,
.manifesto-section,
.journal-section,
.culture-section,
.contact-section{
  overflow-x:clip;
}

.hero-title,
.section-head h2,
.statement,
.studio-name,
.manifesto-word,
.contact-title,
.journal-item h3{
  overflow-wrap:normal;
  word-break:normal;
}

/* Better max-width framing on very wide screens */
.hero,
.studios-section,
.work-section,
.journal-section,
.manifesto-section,
.contact-section{
  padding-left:max(30px,calc((100vw - 1680px)/2));
  padding-right:max(30px,calc((100vw - 1680px)/2));
}

/* Studio accordion smoother responsive columns */
.studio-trigger{
  grid-template-columns:64px minmax(0,1.25fr) minmax(260px,.8fr) 38px;
}

.studio-collapse-inner{
  grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);
}

.studio-live{
  min-width:0;
}

/* Tablet */
@media (max-width:1200px){
  .hero-title{
    font-size:clamp(62px,11.6vw,140px);
    line-height:.8;
  }

  .hero-title .line:nth-child(2){
    margin-left:5vw;
  }

  .hero-title .accent-line{
    margin-left:18vw;
  }

  .section-head{
    grid-template-columns:1.65fr .85fr;
  }

  .section-head h2{
    font-size:clamp(48px,7.5vw,88px);
  }

  .studio-trigger{
    grid-template-columns:54px minmax(0,1fr) minmax(220px,.72fr) 34px;
  }

  .studio-name{
    font-size:clamp(50px,8.3vw,98px);
  }

  .studio-collapse-inner{
    grid-template-columns:.8fr 1.2fr;
  }

  .studio-detail{
    padding-left:70px;
  }

  .studio-live{
    height:460px;
  }

  .project-media{
    height:min(76vw,760px);
  }

  .statement{
    font-size:clamp(40px,7.5vw,88px);
  }

  .manifesto-word{
    font-size:clamp(76px,18vw,220px);
  }
}

/* Small tablet / landscape phone */
@media (max-width:900px){
  .hero,
  .studios-section,
  .work-section,
  .journal-section,
  .manifesto-section,
  .contact-section{
    padding-left:18px;
    padding-right:18px;
  }

  .hero{
    min-height:100svh;
    padding-top:88px;
  }

  .hero-copy{
    margin-top:10vh;
  }

  .hero-title{
    font-size:clamp(58px,18vw,112px);
    line-height:.82;
    letter-spacing:-.065em;
  }

  .hero-title .line:nth-child(2){
    margin-left:0;
  }

  .hero-title .accent-line{
    margin-left:9vw;
  }

  .hero-bottom{
    gap:18px;
  }

  .hero-intro{
    max-width:96%;
    font-size:clamp(15px,4.5vw,18px);
  }

  .section-head h2{
    font-size:clamp(48px,14.5vw,86px);
    line-height:.9;
  }

  .studio-trigger{
    grid-template-columns:38px minmax(0,1fr) 26px;
    min-height:110px;
    row-gap:5px;
  }

  .studio-name{
    font-size:clamp(48px,14vw,82px);
    line-height:.88;
  }

  .studio-trigger .studio-services{
    grid-column:2/3;
    max-width:95%;
    padding-right:12px;
  }

  .studio-collapse-inner{
    grid-template-columns:1fr;
    gap:16px;
  }

  .studio-detail{
    padding:18px 0 12px 46px;
  }

  .studio-detail h3{
    font-size:clamp(34px,10vw,58px);
  }

  .studio-live{
    width:100%;
    height:min(80vw,440px);
  }

  .project-media{
    height:min(112vw,620px);
  }

  .project-meta{
    gap:10px;
  }

  .statement{
    font-size:clamp(42px,11.7vw,72px);
    line-height:.96;
  }

  .manifesto-word{
    font-size:clamp(76px,23vw,150px);
    line-height:.78;
  }

  .journal-item h3{
    font-size:clamp(28px,7.8vw,48px);
  }

  .culture-copy h2{
    font-size:clamp(48px,14vw,82px);
  }

  .contact-title{
    font-size:clamp(68px,18vw,120px);
  }
}

/* Phones */
@media (max-width:600px){
  .site-header{
    height:60px;
  }

  .hero{
    padding-top:78px;
    padding-bottom:20px;
  }

  .hero-kicker{
    max-width:72%;
    line-height:1.35;
  }

  .hero-copy{
    margin-top:11vh;
  }

  .hero-title{
    font-size:clamp(52px,18.4vw,88px);
    line-height:.84;
    letter-spacing:-.06em;
  }

  .hero-title .accent-line{
    margin-left:5vw;
  }

  .hero-title em{
    font-size:.27em;
  }

  .hero-orbit{
    width:230px;
    height:230px;
    right:-115px;
    top:24%;
  }

  .scifi-planet{
    width:136vw;
    right:-67vw;
    top:6vh;
    opacity:.58;
  }

  .section-head{
    margin-bottom:36px;
  }

  .section-head h2{
    font-size:clamp(46px,14.4vw,72px);
    line-height:.92;
  }

  .section-head p{
    font-size:13px;
    max-width:92%;
  }

  .studio-trigger{
    min-height:104px;
  }

  .studio-name{
    font-size:clamp(44px,14vw,68px);
  }

  .studio-trigger .studio-services{
    font-size:10.5px;
    line-height:1.4;
  }

  .studio-detail{
    padding-left:42px;
  }

  .studio-detail p{
    font-size:13px;
  }

  .studio-live{
    height:84vw;
    min-height:300px;
  }

  .creative-poster{
    font-size:clamp(48px,17vw,82px);
  }

  .creative-live .orbit-a{
    width:78vw;
    height:78vw;
    right:-24vw;
  }

  .creative-live .orbit-b{
    width:45vw;
    height:45vw;
    right:5vw;
  }

  .tech-sphere{
    width:42vw;
    height:42vw;
    right:17%;
  }

  .tech-chip{
    padding:9px 11px;
    font-size:9px;
  }

  .game-sun-v4{
    width:32vw;
    height:32vw;
  }

  .project{
    margin-bottom:60px;
  }

  .project-media{
    height:118vw;
  }

  .project-meta{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .project-meta > div{
    gap:9px;
    min-width:0;
  }

  .project-meta h3{
    font-size:clamp(20px,6vw,28px);
    white-space:normal;
  }

  .project-meta p{
    font-size:11px;
  }

  .statement{
    font-size:clamp(38px,11.5vw,62px);
  }

  .manifesto-section{
    padding-top:70px;
    padding-bottom:90px;
  }

  .manifesto-word{
    font-size:clamp(68px,22.5vw,116px);
    transform:none !important;
    white-space:nowrap;
  }

  .manifesto-word:nth-child(even){
    transform:translateX(4vw) !important;
  }

  .journal-item h3{
    font-size:clamp(27px,7.8vw,42px);
  }

  .culture-banner{
    min-height:620px;
  }

  .contact-title{
    font-size:clamp(62px,18vw,96px);
  }

  .contact-link{
    font-size:clamp(28px,8vw,42px);
  }

  .footer-logo{
    width:135px;
  }
}

/* Very small devices */
@media (max-width:390px){
  .hero-title{
    font-size:17.2vw;
  }

  .section-head h2{
    font-size:13.8vw;
  }

  .studio-name{
    font-size:13.5vw;
  }

  .studio-number{
    font-size:9px;
  }

  .studio-trigger{
    grid-template-columns:32px minmax(0,1fr) 24px;
  }

  .studio-detail{
    padding-left:34px;
  }

  .statement{
    font-size:11vw;
  }

  .journal-item h3{
    font-size:7.4vw;
  }
}


/* ============================================================
   V6 — contact form + clipped interaction zones
   ============================================================ */

/* Keep animated/scrambled text visually contained */
.desktop-nav a,
.header-cta,
.studio-trigger,
.studio-name,
.project-meta,
.project-meta h3,
.journal-item,
.journal-item h3,
.manifesto-word,
.contact-link,
.form-submit{
  overflow:hidden;
}

.studio-trigger,
.journal-item,
.project-meta,
.manifesto-section,
.manifesto-word{
  contain:paint;
}

.manifesto-section{
  position:relative;
  overflow:hidden !important;
}

.manifesto-word{
  position:relative;
  max-width:100%;
  padding-right:.04em;
}

.manifesto-scramble{
  display:inline-block;
  max-width:100%;
}

/* Tone down shifts so hover remains inside bounds */
.journal-item.animated-link:hover h3{
  transform:translateX(8px);
}

.studio-item.active .studio-name{
  transform:translateX(6px);
}

.project-media.animated-link:after{
  max-width:calc(100% - 24px);
  white-space:nowrap;
}

/* Contact trigger */
.contact-link.contact-toggle{
  width:100%;
  appearance:none;
  background:none;
  color:inherit;
  border-left:0;
  border-right:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-family:inherit;
  cursor:pointer;
  text-align:left;
}

.contact-toggle-arrow{
  transition:transform .55s cubic-bezier(.16,1,.3,1),color .25s;
}

.contact-toggle[aria-expanded="true"] .contact-toggle-arrow{
  transform:rotate(135deg);
  color:var(--acid);
}

/* Expandable form */
.contact-form-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:
    grid-template-rows .75s cubic-bezier(.16,1,.3,1),
    opacity .35s ease;
  border-bottom:1px solid transparent;
}

.contact-form-panel.open{
  grid-template-rows:1fr;
  opacity:1;
  border-bottom-color:var(--line);
}

.contact-form-panel > *{
  overflow:hidden;
}

.contact-form-inner{
  min-height:0;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:clamp(28px,5vw,90px);
  padding:0;
}

.contact-form-panel.open .contact-form-inner{
  padding:56px 0 64px;
}

.form-intro{
  align-self:start;
}

.form-intro > .mono{
  color:var(--muted);
}

.form-intro h3{
  margin:24px 0 18px;
  font-size:clamp(42px,5.3vw,84px);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:500;
}

.form-intro p{
  margin:0;
  max-width:360px;
  color:var(--muted);
  line-height:1.55;
}

.project-form{
  min-width:0;
}

.form-honeypot{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
}

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.field-optional{
  margin-top:34px;
}

.field-optional small{
  color:var(--muted);
  font:inherit;
}

.field{
  display:block;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.field > .mono{
  display:block;
  color:var(--muted);
  margin-bottom:18px;
}

.field input,
.field textarea{
  width:100%;
  padding:0 0 20px;
  border:0;
  outline:0;
  resize:vertical;
  background:transparent;
  color:var(--fg);
  font:400 clamp(18px,2vw,26px)/1.35 var(--font);
  letter-spacing:-.025em;
}

.field textarea{
  min-height:155px;
}

.field input::placeholder,
.field textarea::placeholder{
  color:#5f5d59;
}

.field:focus-within{
  border-top-color:rgba(255,255,255,.55);
}

.field-message{
  margin-top:40px;
}

.form-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.form-note{
  margin:0;
  color:var(--muted);
  max-width:280px;
  line-height:1.5;
}

.form-submit{
  appearance:none;
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:var(--fg);
  border-radius:999px;
  padding:16px 22px;
  font:500 13px var(--font);
  cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}

.form-submit:hover{
  background:var(--fg);
  color:#111;
  border-color:var(--fg);
}

.form-submit:disabled{
  cursor:wait;
  opacity:.55;
}

.form-success{
  display:none;
  margin-top:20px;
  padding:15px 0;
  color:var(--acid);
  font:400 11px/1.5 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.form-success.show{
  display:block;
}

.form-success.error{
  color:#ff796f;
}

/* Responsive contact form */
@media (max-width:900px){
  .contact-form-inner{
    grid-template-columns:1fr;
    gap:42px;
  }

  .contact-form-panel.open .contact-form-inner{
    padding:42px 0 52px;
  }

  .form-intro h3{
    font-size:clamp(42px,11vw,66px);
  }
}

@media (max-width:600px){
  .field-row{
    grid-template-columns:1fr;
    gap:34px;
  }

  .field-message{
    margin-top:34px;
  }

  .form-bottom{
    align-items:flex-start;
    flex-direction:column;
  }

  .form-submit{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:0;
    border-left:0;
    border-right:0;
    padding:18px 0;
  }

  .contact-form-panel.open .contact-form-inner{
    padding:36px 0 44px;
  }
}


/* ============================================================
   V7 — Journal hover overflow/shake fix
   ============================================================ */

/* The journal row itself never changes its measured size */
.journal-item{
  width:100%;
  min-width:0;
  overflow:hidden !important;
  contain:layout paint;
}

/* Every grid child is allowed to shrink instead of pushing the page wider */
.journal-item > *{
  min-width:0;
}

/* Keep the title in a fixed layout box */
.journal-item h3{
  width:100%;
  max-width:100%;
  overflow:hidden;
  text-overflow:clip;
  transform:none !important;
  letter-spacing:-.05em !important;
  transition:none !important;
}

/* Scramble animation must never alter the row width */
.journal-item .scramble-text{
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Remove the old sideways hover shift that caused layout instability */
.journal-item.animated-link:hover h3{
  transform:none !important;
  letter-spacing:-.05em !important;
}

/* Animate only the arrow/cursor treatment — no geometry changes */
.journal-item .journal-arrow{
  flex:none;
  transform-origin:center;
}

.journal-item:hover .journal-arrow{
  transform:rotate(45deg);
}

/* Extra protection for desktop grid */
@media (min-width:901px){
  .journal-item{
    grid-template-columns:180px minmax(0,1fr) 110px 40px;
  }
}

/* Mobile: keep journal text from ever producing horizontal scroll */
@media (max-width:900px){
  .journal-item{
    grid-template-columns:minmax(0,1fr) 30px;
  }

  .journal-item h3{
    grid-column:1 / -1;
    max-width:100%;
  }

  .journal-item .scramble-text{
    white-space:normal;
  }
}

/* V8 — Stable expandable Studio Journal */
.journal-accordion{border-top:1px solid var(--line);width:100%;overflow:hidden}
.journal-entry{width:100%;min-width:0;border-bottom:1px solid var(--line);overflow:hidden;contain:layout paint}
.journal-trigger{width:100%;min-width:0;min-height:122px;padding:28px 0;border:0;background:transparent;color:inherit;display:grid;grid-template-columns:180px minmax(0,1fr) 110px 32px;gap:20px;align-items:center;text-align:left;cursor:pointer;overflow:hidden}
.journal-trigger>*{min-width:0}
.journal-label,.journal-date{color:var(--muted)}
.journal-title{display:block;width:100%;max-width:100%;min-width:0;overflow:hidden;font-size:clamp(28px,4vw,58px);line-height:1;letter-spacing:-.05em;font-weight:500;transition:color .3s ease}
.journal-trigger:hover .journal-title,.journal-entry.active .journal-title{color:var(--acid)}
.journal-toggle{position:relative;justify-self:end;width:22px;height:22px}
.journal-toggle:before,.journal-toggle:after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transition:transform .4s cubic-bezier(.16,1,.3,1),background-color .3s}
.journal-toggle:after{transform:rotate(90deg)}
.journal-entry.active .journal-toggle:after{transform:rotate(0)}
.journal-entry.active .journal-toggle:before,.journal-entry.active .journal-toggle:after{background:var(--acid)}
.journal-article{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .68s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.journal-article>*{overflow:hidden}
.journal-entry.active .journal-article{grid-template-rows:1fr;opacity:1}
.journal-article-inner{min-height:0;display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;padding:0 0 42px}
.journal-aside{padding-top:8px}.journal-aside>.mono{color:var(--muted)}
.journal-aside p{margin:20px 0 0;max-width:155px;color:#77746f;font-size:11px;line-height:1.55}
.journal-body{max-width:880px;padding-right:70px;min-width:0}
.journal-body p{margin:0 0 22px;color:#b8b5af;font-size:clamp(15px,1.25vw,18px);line-height:1.72}
.journal-body .journal-lead{margin-bottom:30px;color:var(--fg);font-size:clamp(22px,2.3vw,34px);line-height:1.3;letter-spacing:-.035em}
.journal-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:35px}
.journal-meta span{padding:7px 9px;border:1px solid var(--line);color:var(--muted)}
@media(max-width:900px){
  .journal-trigger{grid-template-columns:minmax(0,1fr) 28px;gap:10px;min-height:112px;padding:23px 0}
  .journal-label{grid-column:1;grid-row:1}.journal-title{grid-column:1/-1;grid-row:2;font-size:clamp(28px,7.7vw,46px);line-height:1.02;padding-right:12px}
  .journal-date{grid-column:1;grid-row:3;margin-top:5px}.journal-toggle{grid-column:2;grid-row:1}
  .journal-article-inner{grid-template-columns:1fr;gap:26px;padding:2px 0 38px}
  .journal-aside{padding:0}.journal-aside p{max-width:470px;font-size:12px}
  .journal-body{max-width:none;padding-right:0}.journal-body .journal-lead{font-size:clamp(21px,5.8vw,30px)}
}
@media(max-width:600px){
  .journal-trigger{min-height:106px}.journal-title{font-size:clamp(27px,7.4vw,39px)}
  .journal-body p{font-size:14px;line-height:1.65}.journal-body .journal-lead{font-size:clamp(20px,5.7vw,27px);line-height:1.35}
}


/* ============================================================
   V9 — Mobile header, manifesto and touch responsiveness
   ============================================================ */

/* Make fixed header visually independent from hero content on small screens */
@media (max-width:900px){
  .site-header{
    height:66px !important;
    padding:0 16px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    background:rgba(8,9,11,.78);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.08);
    mix-blend-mode:normal !important;
  }

  .brand{
    display:flex !important;
    align-items:center !important;
    height:66px;
    min-width:0;
    overflow:visible !important;
  }

  .brand img{
    display:block !important;
    width:124px !important;
    max-width:42vw !important;
    height:auto !important;
    max-height:38px !important;
    object-fit:contain;
    object-position:left center;
    margin:0 !important;
    transform:none !important;
  }

  .menu-btn{
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:42px;
    height:42px;
    padding:8px;
    margin:0;
    touch-action:manipulation;
  }

  .menu-btn span{
    width:22px;
    margin:3px 0;
  }

  /* Header is fixed, so hero content must start beneath it */
  .hero{
    padding-top:104px !important;
  }

  .hero-kicker{
    position:relative;
    z-index:4;
    max-width:78%;
    line-height:1.4;
  }

  /* Accordion rows are touch targets, but page can still scroll normally */
  .studio-trigger,
  .journal-trigger,
  .contact-toggle{
    touch-action:pan-y;
    -webkit-tap-highlight-color:transparent;
  }

  .studio-trigger{
    padding-top:16px;
    padding-bottom:16px;
  }

  .journal-trigger{
    padding-top:22px;
    padding-bottom:22px;
  }

  /* No hover styling should stick after tapping on touchscreens */
  .journal-trigger:hover .journal-title{
    transform:none !important;
  }

  /* Mobile manifesto: no JS/visual horizontal drift at all */
  .manifesto-section{
    padding-top:76px !important;
    padding-bottom:92px !important;
    overflow:hidden !important;
  }

  .manifesto-word,
  .manifesto-word:nth-child(even){
    width:100%;
    max-width:100%;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    translate:0 0 !important;
    white-space:nowrap;
    overflow:hidden !important;
    contain:paint;
    line-height:.88 !important;
    font-size:clamp(58px,18.5vw,88px) !important;
    letter-spacing:-.075em !important;
  }

  .manifesto-word:nth-child(2),
  .manifesto-word:nth-child(4){
    padding-left:8vw !important;
  }

  .manifesto-word .manifesto-scramble{
    max-width:100%;
    overflow:hidden;
  }
}

@media (max-width:600px){
  .site-header{
    height:62px !important;
    padding:0 14px !important;
  }

  .brand{
    height:62px;
  }

  .brand img{
    width:116px !important;
    max-width:45vw !important;
    max-height:34px !important;
  }

  .hero{
    padding-top:94px !important;
  }

  .manifesto-word,
  .manifesto-word:nth-child(even){
    font-size:clamp(54px,18vw,76px) !important;
    line-height:.9 !important;
  }

  .manifesto-word:nth-child(2),
  .manifesto-word:nth-child(4){
    padding-left:5vw !important;
  }

  .studio-trigger{
    min-height:96px !important;
  }

  .journal-trigger{
    min-height:98px !important;
  }

  .studio-plus,
  .journal-toggle{
    width:24px;
    height:24px;
  }
}

@media (max-width:390px){
  .brand img{
    width:108px !important;
  }

  .manifesto-word,
  .manifesto-word:nth-child(even){
    font-size:17.2vw !important;
  }
}


/* ============================================================
   V10 — mobile header alignment + clickable logo
   ============================================================ */

.brand{cursor:pointer}

@media (max-width:900px){
  .site-header{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto auto !important;
    align-items:center !important;
    column-gap:11px !important;
    height:66px !important;
    padding:0 14px !important;
  }

  .brand{
    grid-column:1;
    justify-self:start;
    align-self:center;
    display:flex !important;
    align-items:center !important;
    height:auto !important;
    line-height:0;
    min-width:0;
  }

  .brand img{
    display:block !important;
    width:118px !important;
    max-width:38vw !important;
    max-height:34px !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
    object-fit:contain;
    object-position:left center;
  }

  .desktop-nav{display:none !important}

  /* Keep Let's Talk on the same line */
  .header-cta{
    display:inline-flex !important;
    grid-column:3;
    justify-self:end;
    align-items:center;
    align-self:center;
    white-space:nowrap;
    margin:0 !important;
    padding:7px 0;
    font-size:10px !important;
    line-height:1;
  }

  /* Hamburger pinned to far-right edge */
  .menu-btn{
    display:flex !important;
    grid-column:4;
    justify-self:end !important;
    align-self:center !important;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    width:40px !important;
    height:40px !important;
    padding:7px 0 7px 7px !important;
    margin:0 !important;
  }

  .menu-btn span{
    width:22px !important;
    margin:3px 0 !important;
  }

  .menu-btn span:last-child{
    width:15px !important;
  }

  .hero{
    scroll-margin-top:66px;
  }
}

@media (max-width:600px){
  .site-header{
    grid-template-columns:auto minmax(0,1fr) auto auto !important;
    column-gap:8px !important;
    height:62px !important;
    padding:0 12px !important;
  }

  .brand img{
    width:106px !important;
    max-width:36vw !important;
    max-height:31px !important;
  }

  .header-cta{
    font-size:9px !important;
  }

  .menu-btn{
    width:38px !important;
    height:38px !important;
  }

  .hero{
    scroll-margin-top:62px;
  }
}

@media (max-width:390px){
  .site-header{column-gap:6px !important}
  .brand img{width:98px !important}
  .header-cta{font-size:8.5px !important}
}


/* iOS/Safari: keep directional arrow glyphs as text instead of emoji */
.hero-title em,
.project-arrow,
.contact-toggle-arrow,
.header-cta .scramble-text,
.mobile-menu a,
.project-media.animated-link::after {
  font-variant-emoji: text;
  font-family: var(--font);
}


/* ============================================================
   V12 — iOS/mobile hero scroll stability
   ============================================================ */
@media (max-width:900px){
  html, body{
    overscroll-behavior-y:none;
  }

  .hero{
    min-height:100svh !important;
    overflow:clip !important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  .site-header{
    background:rgba(8,9,11,.94) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    transform:translateZ(0);
  }

  .hero-scifi,
  .scifi-planet,
  .hero-terminal,
  .global-space{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  .hero-scifi,
  .hero-terminal{
    transform:translateZ(0);
  }

  .noise{
    opacity:.035;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
}


/* ============================================================
   V13 — Chrome/Brave iOS hero text stability
   Keeps the initial mobile viewport height fixed while browser
   chrome collapses, and removes vertical reveal transforms from
   the hero text only on touch/mobile.
   ============================================================ */
@media (max-width:900px){
  .hero{
    min-height:var(--hero-stable-height, 100svh) !important;
  }

  /* Fade only in the hero on mobile. Translating large live text
     can be re-rasterized during toolbar changes in Chrome/Brave. */
  .hero .reveal{
    transform:none !important;
    transition:opacity .55s ease !important;
  }

  .hero .reveal.in{
    transform:none !important;
  }

  .hero-title,
  .hero-title .line,
  .hero-title .scramble-text,
  .hero-intro,
  .hero-kicker{
    -webkit-font-smoothing:antialiased;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  /* Do not promote the actual title text to a 3D layer. */
  .hero-title,
  .hero-title .line{
    transform:none;
    will-change:auto;
  }

  .hero-title .accent-line{
    transform:none !important;
  }
}

/* V14 — studio footer */
.brand img{content:url("theatives-logo.png")}
.site-footer{
  display:block;
  position:relative;
  margin-top:120px;
  padding:0;
  border-top:1px solid var(--line);
  overflow:hidden;
}
.footer-map-frame{
  display:block;
  width:100%;
  height:620px;
  margin:0;
  border:0;
  background:transparent;
}
.site-footer > .footer-brand,
.site-footer > .footer-links,
.site-footer > .footer-copy{display:none}
.footer-rail{
  min-height:58px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  border-bottom:1px solid var(--line);
  color:var(--muted);
}
.footer-rail > :nth-child(2){justify-self:center}
.footer-rail > :last-child{justify-self:end;color:var(--fg);transition:color .25s ease}
.footer-rail > :last-child:hover{color:var(--red)}
.footer-availability{display:flex;align-items:center;gap:9px}
.footer-availability i{
  width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 4px rgba(199,255,74,.1);animation:pulse 1.8s infinite;
}
.footer-wordmark{
  position:relative;
  display:flex;align-items:center;
  padding:38px 0 48px;
}
.footer-pitch-logo{
  display:block;
  width:min(100%,210px);
  height:auto;
  margin:0 0 34px;
  object-fit:contain;
}
.footer-seal{
  position:absolute;right:4%;top:25%;width:clamp(74px,8.5vw,130px);aspect-ratio:1;
  display:grid;place-items:center;text-align:center;border:1px solid var(--red);border-radius:50%;
  color:var(--red);line-height:1.55;transform:rotate(9deg);background:var(--bg);
}
.footer-seal:before,.footer-seal:after{content:"";position:absolute;background:var(--red)}
.footer-seal:before{width:12px;height:1px;left:-6px;top:50%}
.footer-seal:after{height:12px;width:1px;left:50%;top:-6px}
.footer-directory{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.35fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.footer-directory > *{min-height:250px;padding:28px 26px;border-right:1px solid var(--line)}
.footer-directory > :first-child{padding-left:0}
.footer-directory > :last-child{border-right:0;padding-right:0}
.footer-directory .mono{display:block;color:var(--muted);margin-bottom:30px}
.footer-pitch p{margin:0;font-size:clamp(30px,3vw,48px);line-height:.98;letter-spacing:-.055em}
.footer-nav{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.footer-nav a{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;transition:color .2s ease,padding .2s ease}
.footer-nav a span,.footer-contact a span{color:var(--red);opacity:0;transform:translate(-5px,5px);transition:.2s ease}
.footer-nav a:hover{color:var(--red);padding-left:5px}
.footer-nav a:hover span,.footer-contact a:hover span{opacity:1;transform:none}
.footer-socials{display:flex;flex-wrap:wrap;gap:10px}
.footer-socials a{
  position:relative;
  width:43px;height:43px;padding:0!important;display:flex;
  align-items:center;justify-content:center!important;
  border:1px solid var(--line);border-radius:50%;color:var(--fg);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.footer-socials a::before{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;top:calc(100% + 11px);
  transform:translate(-50%,-6px);
  padding:7px 9px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--fg);
  font:400 9px/1 var(--mono);
  letter-spacing:.04em;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.footer-socials a:hover::before,
.footer-socials a:focus-visible::before{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.footer-socials a:hover{padding:0;background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}
.footer-socials svg{
  display:block;flex:0 0 19px;width:19px;height:19px;margin:0;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.footer-socials .social-dot{fill:currentColor;stroke:none}
.footer-contact{display:flex;flex-direction:column}
.footer-contact a{display:flex;justify-content:space-between;gap:12px;font-size:clamp(16px,1.5vw,23px);letter-spacing:-.035em;overflow-wrap:anywhere}
.footer-contact p{margin:auto 0 0!important;line-height:1.7}
.footer-bottom{min-height:64px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;color:var(--muted)}
.footer-bottom > :nth-child(2){justify-self:center;color:var(--fg)}
.footer-bottom > :last-child{justify-self:end}

@media (max-width:900px){
  .footer-map-frame{
    height:380px;
  }
  .site-footer{margin-top:86px}
  .footer-rail{grid-template-columns:1fr auto;min-height:54px}
  .footer-rail > :nth-child(2){display:none}
  .footer-wordmark{padding:30px 0 38px}
  .footer-pitch-logo{width:min(62vw,190px);margin-bottom:28px}
  .footer-seal{right:3%;top:20%}
  .footer-directory{grid-template-columns:1fr 1fr}
  .footer-directory > *{min-height:210px;padding:24px 0}
  .footer-directory > :nth-child(odd){padding-right:20px;border-right:1px solid var(--line)}
  .footer-directory > :nth-child(even){padding-left:20px;border-right:0}
  .footer-directory > :nth-child(n+3){border-top:1px solid var(--line)}
  .footer-bottom{grid-template-columns:1fr auto}
  .footer-bottom > :nth-child(2){display:none}
}
@media (max-width:600px){
  .footer-map-frame{height:540px}
  .footer-rail{font-size:9px;letter-spacing:.04em}
  .footer-wordmark{padding:28px 0 32px}
  .footer-wordmark > img{width:82vw}
  .footer-seal{width:68px;font-size:8px;top:auto;right:auto;left:3%;bottom:72px}
  .footer-directory{grid-template-columns:1fr}
  .footer-directory > *{min-height:auto;padding:26px 0!important;border-right:0!important;border-top:1px solid var(--line)}
  .footer-directory > :first-child{border-top:0;min-height:170px}
  .footer-directory .mono{margin-bottom:20px}
  .footer-nav{gap:8px}
  .footer-nav a{font-size:15px}
  .footer-contact p{margin-top:48px!important}
  .footer-bottom{min-height:76px;font-size:8px;letter-spacing:.04em}
}