/*
Theme Name: Longspec
Theme URI: https://longspec.com
Author: Longspec
Description: Longspec — websites that grow. Portfolio block theme.
Version: 5.3.1
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: longspec
*/
@font-face{font-family:Manrope;src:url('https://longspec.com/wp-content/uploads/fonts/manrope-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('https://longspec.com/wp-content/uploads/fonts/manrope-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url('https://longspec.com/wp-content/uploads/fonts/manrope-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('https://longspec.com/wp-content/uploads/fonts/manrope-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url('https://longspec.com/wp-content/uploads/fonts/manrope-800.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}










:root {
  --yellow:#ffd600;
  --ink:#10110f;
  --paper:#f2f1e9;
  --muted:#a6a7a0;
  --line:#ffffff24;
  --gutter:clamp(24px,4.6vw,88px);
  --ease:cubic-bezier(.22,1,.36,1);
  --header:86px;
  color-scheme:dark;
}

*,*::before,*::after {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:var(--header);
}

body {
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:Manrope,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

body.menu-open {
  overflow:hidden;
}

button,a,summary {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

button,input {
  border-radius:0;
}

button {
  background:none;
  border:none;
}

svg {
  display:block;
  width:24px;
  height:24px;
}

img {
  display:block;
  max-width:100%;
  object-fit:cover;
}

button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--yellow);
  outline-offset:6px;
}

::selection {
  background:var(--yellow);
  color:var(--ink);
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  font-weight:500;
}

h2 {
  font-size:clamp(44px,6vw,90px);
  line-height:1.05;
  letter-spacing:-.055em;
  word-spacing:.035em;
}

p {
  line-height:1.75;
}

section {
  scroll-margin-top:0;
}

.svg-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.brand-accent {
  fill:var(--yellow);
}
:is(.title-dot,.art-spark,.soda-can b,.floating-note>span)>svg {
  width:1em;
  height:1em;
}

.eyebrow {
  font-size:10px;
  letter-spacing:.16em;
  font-weight:600;
  line-height:1.6;
}

.serif-word {
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.065em;
}

.skip-link {
  position:fixed;
  top:12px;
  left:16px;
  z-index:100;
  background:var(--yellow);
  color:var(--ink);
  padding:14px;
  transform:translateY(-160%);
}

.skip-link:focus {
  transform:none;
}

.site-header {
  height:var(--header);
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:fixed;
  top:0;
  inset-inline:0;
  z-index:40;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:29px;
  letter-spacing:-1.8px;
  font-weight:800;
}

.brand>svg {
  height:37px;
  width:34px;
}

.brand-period {
  font-size:10px;
  vertical-align:top;
  display:inline-block;
  letter-spacing:0;
  margin:6px 0 0 5px;
}

.desktop-nav {
  display:flex;
  gap:38px;
}

.desktop-nav a {
  font-size:12px;
  padding:15px 0;
  position:relative;
}

.desktop-nav a::after {
  content:'';
  position:absolute;
  bottom:8px;
  left:0;
  width:100%;
  height:1px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s;
}

.desktop-nav a:hover::after,.desktop-nav a.active::after {
  transform:scaleX(1);
}

.desktop-nav a span {
  font-size:9px;
  color:var(--muted);
  vertical-align:super;
  margin-left:4px;
}

.header-cta {
  border:1px solid #ffffff50;
  border-radius:40px;
  min-height:42px;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:22px;
  font-size:12px;
  transition:background .25s,color .25s,border-color .25s;
}

.header-cta svg {
  width:15px;
}

.header-cta:hover {
  background:var(--yellow);
  color:var(--ink);
  border-color:var(--yellow);
}

.scroll-progress {
  position:absolute;
  bottom:-1px;
  left:0;
  height:2px;
  width:100%;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left;
  will-change:transform;
}

.menu-toggle,.mobile-menu {
  display:none;
}

.hero {
  padding:calc(var(--header) + 38px) var(--gutter) 0;
  min-height:790px;
  height:100svh;
  max-height:1160px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

.hero-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--yellow);
  margin-right:9px;
}

.hero-edition {
  color:var(--muted);
}

.hero-content {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  flex:1;
  align-items:center;
  position:relative;
  padding:40px 0 48px;
}

.hero-copy {
  z-index:2;
}

.hero h1 {
  font-size:clamp(76px,8.9vw,168px);
  line-height:.99;
  letter-spacing:-.075em;
  position:relative;
  white-space:nowrap;
}

.hero h1 em {
  font-family:Georgia,'Times New Roman',serif;
  color:var(--yellow);
  font-weight:400;
  letter-spacing:-.065em;
}

.title-dot {
  font-size:.23em;
  vertical-align:top;
  color:var(--yellow);
  display:inline-block;
  margin:12px 0 0 12px;
}

.hero-intro {
  display:flex;
  gap:20px;
  align-items:flex-start;
  margin:32px 0 28px;
  max-width:385px;
}

.mini-line {
  width:33px;
  min-width:33px;
  height:1px;
  background:var(--yellow);
  margin-top:11px;
}

.hero-intro p {
  font-size:14px;
  color:var(--muted);
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  padding:18px 22px;
  min-height:54px;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
  transition:background .25s,color .25s,transform .35s var(--ease);
}

.button svg {
  width:18px;
  height:18px;
  transition:transform .3s var(--ease);
}

.button-yellow {
  background:var(--yellow);
  color:var(--ink);
}

.button:hover {
  background:var(--paper);
  transform:translateY(-3px);
}

.button:hover svg {
  transform:translate(3px,-3px);
}

.hero-art {
  position:relative;
  height:100%;
  min-height:480px;
  perspective:900px;
}

.hero-sculpture {
  position:absolute;
  width:59%;
  height:76%;
  left:18%;
  top:12%;
  transform:translateY(var(--depth-y,0));
  will-change:transform;
}

.sculpture-front,.sculpture-back {
  position:absolute;
  width:100%;
  height:100%;
  transform:rotate(-12deg) rotateY(-22deg) rotateX(10deg);
  overflow:visible;
}

.sculpture-front {
  color:var(--yellow);
  filter:drop-shadow(2px 1px 0 #ffea7f) drop-shadow(5px 4px 0 #bc9900) drop-shadow(6px 5px 0 #bc9900) drop-shadow(7px 6px 0 #594800) drop-shadow(10px 10px 14px #0009);
}

.sculpture-front .brand-accent {
  fill:var(--paper);
}

.sculpture-back {
  color:#6c5900;
  translate:22px 25px;
}

.sculpture-back .brand-accent {
  fill:#6c5900;
}

.sculpture-shadow {
  position:absolute;
  width:90%;
  height:25%;
  border-radius:50%;
  background:#0009;
  filter:blur(25px);
  bottom:-2%;
  left:15%;
  transform:rotate(-14deg);
}

.orbital {
  position:absolute;
  top:17%;
  left:-5%;
  width:107%;
  height:64%;
  border:1px solid #ffffff15;
  border-radius:50%;
  transform:rotate(-32deg);
}

.orbital-two {
  transform:rotate(40deg);
  width:78%;
  height:90%;
  top:6%;
  left:12%;
  border-color:#ffffff0b;
}

.art-coordinate {
  position:absolute;
  color:#9b9c92;
  font-family:monospace;
  font-size:9px;
  letter-spacing:.08em;
}

.coordinate-top {
  top:5%;
  left:12%;
}

.coordinate-bottom {
  bottom:6%;
  left:19%;
  font-size:8px;
}

.art-plus {
  position:absolute;
  color:#6b6e63;
  font-size:20px;
  font-weight:300;
}

.plus-one {
  top:3%;
  right:8%;
}

.plus-two {
  bottom:10%;
  left:0;
}

.art-spark {
  color:var(--yellow);
  font-size:41px;
  position:absolute;
  top:16%;
  right:4%;
}

.art-label {
  position:absolute;
  bottom:13%;
  right:-1%;
  font-size:12px;
  line-height:1.4;
  color:#a4a69b;
}

.art-label strong {
  color:var(--yellow);
  font-weight:400;
}

.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-top:1px solid var(--line);
  min-height:81px;
  font-size:8px;
  letter-spacing:.11em;
  color:#b6b7ac;
}

.scroll-cue {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
}

.scroll-icon {
  border:1px solid #ffffff50;
  width:24px;
  height:33px;
  border-radius:20px;
  display:grid;
  place-items:center;
  color:var(--yellow);
  font-size:15px;
  transition:transform .25s;
}

.scroll-cue:hover .scroll-icon {
  transform:translateY(4px);
}

.hero-location span {
  color:var(--yellow);
  margin-left:14px;
  font-size:17px;
}

.about {
  background:var(--yellow);
  color:var(--ink);
  padding:49px var(--gutter) 0;
  border-radius:28px 28px 0 0;
  position:relative;
}

.section-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.section-star {
  width:37px;
  height:37px;
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  padding:63px 0 70px;
}

.about h2 {
  font-size:clamp(70px,8vw,132px);
}

.about-copy {
  max-width:580px;
  padding-top:8px;
}

.large-copy {
  font-size:clamp(20px,2.4vw,35px);
  line-height:1.45;
  letter-spacing:-.04em;
}

.large-copy span {
  color:#655600;
}

.about-copy>p+p {
  margin-top:24px;
  font-size:14px;
  max-width:455px;
  color:#4f4300;
}

.text-link {
  font-size:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:34px;
  border-bottom:1px solid #10110f70;
  padding:18px 0 10px;
  margin-top:13px;
}

.text-link svg {
  width:18px;
  transition:transform .25s;
}

.text-link:hover svg {
  transform:translate(4px,-4px);
}

.expertise-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:25px 0;
  border-top:1px solid #10110f40;
}

.expertise-line>span {
  font-size:9px;
  line-height:1.6;
  letter-spacing:.1em;
}

.expertise-tags {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

.expertise-tags span {
  padding:12px 18px;
  border:1px solid #10110f60;
  border-radius:30px;
  font-size:11px;
}

.section-bridge {
  border-top:1px solid #10110f40;
  padding:24px 0 33px;
  margin-top:10px;
  overflow:hidden;
}

.section-bridge>span {
  font-size:9px;
  letter-spacing:.15em;
}

.section-bridge>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:clamp(45px,9.4vw,174px);
  font-weight:600;
  letter-spacing:-.07em;
  line-height:1.2;
  white-space:nowrap;
}

.section-bridge svg {
  width:8vw;
  height:8vw;
  transform:rotate(90deg);
}

.about :focus-visible,.editorial :focus-visible,.contact :focus-visible {
  outline-color:var(--ink);
}

.work-chapter {
  position:relative;
  background:var(--ink);
  padding:0 var(--gutter);
}

.chapter-pin {
  padding-top:calc(var(--header) + 25px);
  padding-bottom:20px;
}

.chapter-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  padding-bottom:26px;
}

.chapter-heading .eyebrow {
  color:var(--muted);
  font-size:9px;
}

.chapter-heading h2 {
  font-size:clamp(40px,4.1vw,72px);
  margin-top:13px;
}

.chapter-heading h2 .serif-word {
  color:var(--yellow);
}

.chapter-heading>p {
  font-size:11px;
  color:var(--muted);
  padding-bottom:4px;
}

.chapter-category {
  font-size:8px;
  letter-spacing:.1em;
  display:flex;
  align-items:center;
  gap:22px;
  padding-bottom:6px;
}

.chapter-category>span {
  font-size:24px;
  color:var(--yellow);
}

.slide-window {
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  border-radius:2px;
  overscroll-behavior-x:contain;
  outline-offset:3px;
}

.slide-window::-webkit-scrollbar {
  display:none;
}

.slide-track {
  display:flex;
  gap:0;
  width:100%;
}

.project-slide {
  min-width:100%;
  width:100%;
  flex-shrink:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding-right:0;
}

.project-visual {
  height:clamp(340px,48vh,660px);
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#bcb9a9;
  color:#20211d;
  isolation:isolate;
}

.stage-word {
  position:absolute;
  top:-.1em;
  left:3%;
  font-size:clamp(80px,15vw,260px);
  font-weight:800;
  letter-spacing:-.07em;
  white-space:nowrap;
  line-height:1.2;
  color:#ffffff35;
  z-index:-1;
  transform:translateX(var(--layer-x,0));
}

.browser-mockup {
  width:65%;
  height:84%;
  border:1px solid #20211d30;
  box-shadow:0 24px 50px #20211d30;
  transform:translate3d(var(--layer-x,0),var(--layer-y,0),0);
  transition:filter .3s;
  position:relative;
  background:#f4f1e9;
}

.browser-chrome {
  height:24px;
  background:#f6f5ef;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:7px;
  letter-spacing:.02em;
  padding:0 11px;
  color:#797b72;
  border-bottom:1px solid #d9d9cc;
}

.browser-chrome>span:first-child {
  font-size:6px;
  letter-spacing:2px;
  color:#adada0;
}

.mock-nav {
  height:51px;
  padding:0 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:7px;
  position:relative;
  z-index:1;
}

.mock-nav b {
  font-size:24px;
  letter-spacing:-1.5px;
  font-weight:700;
}

.mock-nav b span {
  font-size:9px;
  vertical-align:super;
  letter-spacing:0;
}

.mock-eyebrow {
  font-size:7px;
  letter-spacing:.14em;
}

.mock-link {
  display:inline-block;
  border-bottom:1px solid currentColor;
  padding-bottom:7px;
  font-size:8px;
}

.forma-site {
  height:calc(100% - 24px);
  background:#f0eee5;
}

.forma-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  height:calc(100% - 51px);
  padding-left:6%;
}

.forma-layout>div {
  padding:10% 2%;
  min-width:0;
  min-height:0;
}

.forma-layout h3 {
  font-family:Georgia,serif;
  font-size:clamp(24px,3.7vw,60px);
  line-height:1.07;
  letter-spacing:-.05em;
  margin:12px 0 19px;
}

.forma-layout p {
  font-size:7px;
  margin-top:18px;
  color:#737469;
}

.forma-layout img {
  height:100%;
  width:100%;
  min-height:0;
  min-width:0;
  object-position:36% 60%;
}

.floating-card {
  position:absolute;
  background:#f9f7ed;
  box-shadow:0 12px 35px #20211d40;
  transform:translate3d(var(--layer-x,0),var(--layer-y,0),0) rotate(-5deg);
}

.forma-card {
  bottom:11%;
  right:9%;
  width:205px;
  display:grid;
  grid-template-columns:63px 1fr;
  gap:10px;
  padding:9px;
  align-items:center;
}

.forma-card img {
  width:63px;
  height:75px;
}

.forma-card>span {
  font-size:6px;
  line-height:1.8;
}

.forma-card b {
  font-size:8px;
  font-weight:600;
}

.forma-card .card-plus {
  position:absolute;
  right:8px;
  bottom:7px;
  font-size:16px;
}

.stage-corner {
  position:absolute;
  bottom:15px;
  left:20px;
  font-size:7px;
  letter-spacing:.13em;
}

.project-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:73px;
  border-bottom:1px solid var(--line);
}

.project-caption>div {
  display:flex;
  align-items:center;
  gap:17px;
}

.project-no {
  font-size:9px;
  color:var(--muted);
}

.project-caption h3 {
  font-size:21px;
  letter-spacing:-.04em;
}

.project-type {
  font-size:10px;
  color:var(--muted);
  margin-left:10px;
}

.project-open {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:10px;
  min-height:44px;
  padding:0 0 0 10px;
}

.project-open svg {
  width:20px;
  height:20px;
  transition:transform .3s,color .3s;
}

.project-open:hover svg {
  transform:translate(4px,-4px);
  color:var(--yellow);
}

.chapter-controls {
  display:flex;
  align-items:center;
  min-height:59px;
  gap:20px;
}

.slide-current {
  font-size:12px;
  font-variant-numeric:tabular-nums;
  min-width:58px;
}

.slide-current>span {
  font-size:10px;
  color:var(--muted);
  margin-left:4px;
}

.slide-dots {
  display:flex;
  align-items:center;
  gap:5px;
}

.slide-dots button {
  width:35px;
  height:44px;
  padding:0;
  position:relative;
}

.slide-dots button::before {
  content:'';
  height:2px;
  position:absolute;
  top:21px;
  inset-inline:0;
  background:#ffffff30;
  transition:background .3s,transform .3s;
}

.slide-dots button[aria-current=true]::before {
  background:var(--yellow);
  transform:scaleY(2);
}

.slide-dots button:hover::before {
  background:var(--paper);
}

.slide-hint {
  font-size:8px;
  letter-spacing:.12em;
  color:var(--muted);
  margin-left:auto;
}

.slide-hint>span {
  font-size:14px;
  margin-left:14px;
}

.slide-arrows {
  display:flex;
  gap:8px;
}

.slide-arrows button {
  width:44px;
  height:44px;
  border:1px solid #ffffff40;
  border-radius:50%;
  font-size:19px;
  transition:background .25s,color .25s,border-color .25s;
}

.slide-arrows button:hover:not(:disabled) {
  background:var(--yellow);
  color:var(--ink);
  border-color:var(--yellow);
}

.slide-arrows button:disabled {
  opacity:.25;
}

.citrus {
  background:#ec8051;
}

.citrus .stage-word {
  color:#f3ad7655;
  top:0;
  font-size:10vw;
  left:1%;
}

.citrus-site {
  background:#ff6b26;
  height:calc(100% - 24px);
  color:#571f13;
}

.citrus-site .mock-nav {
  border-bottom:1px solid #571f1330;
}

.citrus-site>.mock-link {
  position:absolute;
  left:6%;
  bottom:7%;
}

.citrus-layout {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:calc(100% - 51px);
  padding:3% 16% 8% 7%;
}

.citrus-layout h3 {
  font-size:clamp(33px,4.9vw,82px);
  font-weight:800;
  line-height:.93;
  letter-spacing:-.075em;
}

.citrus-layout h3 i {
  font-family:Georgia,serif;
  font-weight:400;
}

.soda-can {
  width:23%;
  height:92%;
  max-height:240px;
  background:linear-gradient(90deg,#dcce78,#ffffc4 30%,#f4efa6 65%,#aea356);
  border-radius:18% / 5%;
  transform:rotate(12deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  box-shadow:15px 16px 20px #57291140;
  border-top:7px solid #c0c2b4;
  border-bottom:5px solid #aaa99a;
  padding:5% 0;
  color:#733810;
}

.soda-can>span {
  font-size:clamp(18px,2.8vw,38px);
  font-weight:800;
  letter-spacing:-.08em;
}

.soda-can small {
  font-size:6px;
  text-align:center;
  font-weight:600;
}

.soda-can b {
  font-size:40px;
  color:#ec7628;
}

.floating-sticker {
  position:absolute;
  right:9%;
  bottom:15%;
  background:#e9f7a7;
  border-radius:50%;
  width:115px;
  height:115px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  font-size:13px;
  transform:translate3d(var(--layer-x,0),var(--layer-y,0),0) rotate(13deg);
  border:1px solid #571f13;
  box-shadow:4px 4px #571f13;
}

.floating-sticker strong {
  font-size:15px;
  line-height:1.1;
}

.aese {
  background:#879282;
}

.aese .stage-word {
  color:#bfc5ad45;
  font-size:12vw;
}

.aese-site {
  height:calc(100% - 24px);
  background:#e4e6d9;
  color:#414c37;
}

.aese-layout {
  height:calc(100% - 51px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13%;
  background:linear-gradient(120deg,#d7dbc9,#ecebdd);
}

.aese-layout h3 {
  font-family:Georgia,serif;
  font-size:clamp(27px,4.2vw,69px);
  line-height:1.05;
  margin:15px 0 22px;
  letter-spacing:-.05em;
}

.cosmetic-bottle {
  height:70%;
  width:18%;
  background:linear-gradient(90deg,#697955,#bdc5a9 40%,#919d7e 70%,#5a674a);
  position:relative;
  border-radius:14px 14px 10px 10px;
  box-shadow:20px 20px 30px #414c3740;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  padding-top:12%;
  margin-top:8%;
  color:#253021;
  transform:rotate(-8deg);
}

.bottle-cap {
  position:absolute;
  bottom:95%;
  left:19%;
  width:62%;
  height:28%;
  border-radius:3px 3px 0 0;
  background:repeating-linear-gradient(90deg,#30342c 0 2px,#444940 2px 4px);
}

.cosmetic-bottle b {
  font-size:25px;
}

.cosmetic-bottle span {
  font-size:6px;
  text-align:center;
  line-height:1.6;
}

.cosmetic-bottle small {
  font-size:5px;
}

.floating-note {
  position:absolute;
  right:7%;
  bottom:13%;
  padding:22px;
  background:#f1f0d9;
  box-shadow:5px 10px 30px #252b2330;
  font-family:Georgia,serif;
  font-size:16px;
  line-height:1.3;
  transform:translate3d(var(--layer-x,0),var(--layer-y,0),0) rotate(5deg);
}

.floating-note>span {
  display:block;
  font-size:24px;
  margin-top:12px;
}

.editorial {
  background:var(--yellow);
  color:var(--ink);
  border-radius:28px 28px 0 0;
}

.editorial .chapter-heading .eyebrow,.editorial .chapter-heading>p {
  color:#574900;
}

.editorial .chapter-heading .serif-word,.editorial .chapter-category>span {
  color:var(--ink);
}

.editorial .project-caption {
  border-color:#10110f35;
}

.editorial .project-no,.editorial .project-type,.editorial .slide-hint,.editorial .slide-current>span {
  color:#574900;
}

.editorial .slide-dots button::before {
  background:#10110f30;
}

.editorial .slide-dots button[aria-current=true]::before,.editorial .slide-dots button:hover::before {
  background:var(--ink);
}

.editorial .slide-arrows button {
  border-color:#10110f60;
}

.editorial .slide-arrows button:hover:not(:disabled) {
  background:var(--ink);
  color:var(--yellow);
  border-color:var(--ink);
}

.editorial .project-open:hover svg {
  color:#655600;
}

.arch {
  background:#2c302c;
}

.arch .stage-word {
  font-size:12vw;
  color:#ffffff0d;
  top:1%;
}

.arch-site {
  height:calc(100% - 24px);
  position:relative;
  color:#fff;
  background:#1f2928;
}

.arch-site>img {
  position:absolute;
  width:100%;
  height:100%;
  filter:brightness(.6);
  object-position:50% 45%;
}

.arch-site .mock-nav {
  border-bottom:1px solid #ffffff50;
}

.arch-title {
  position:absolute;
  left:6%;
  bottom:10%;
  right:4%;
}

.arch-title h3 {
  font-size:clamp(30px,4.7vw,78px);
  line-height:1;
  letter-spacing:-.055em;
  margin:13px 0;
}

.arch-title>span:last-child {
  font-size:7px;
  letter-spacing:.07em;
}

.arch-card {
  width:175px;
  padding:10px;
  right:7%;
  bottom:11%;
  transform:translate3d(var(--layer-x,0),var(--layer-y,0),0) rotate(5deg);
}

.arch-card>span {
  font-size:6px;
  display:block;
  margin-bottom:8px;
}

.arch-card>img {
  height:97px;
  width:100%;
  object-position:50% 30%;
}

.arch-card b {
  font-size:8px;
  display:block;
  margin-top:8px;
  font-weight:500;
}

.arch .stage-corner {
  color:#c7c8bc;
}

.offgrid {
  background:#898daf;
}

.offgrid .stage-word {
  font-size:12vw;
  color:#b8bce755;
}

.offgrid-site {
  height:calc(100% - 24px);
  background:#cbd0f4;
  padding:0 5%;
  color:#202129;
}

.offgrid-site .mock-nav {
  padding:0;
  border-bottom:1px solid #20212960;
}

.offgrid-site h3 {
  font-size:clamp(35px,5.4vw,80px);
  line-height:.92;
  letter-spacing:-.07em;
  padding:5% 0 4%;
  font-weight:700;
}

.offgrid-site h3>span {
  font-size:.7em;
  margin-left:.6em;
}

.offgrid-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #20212960;
  padding-top:3%;
}

.offgrid-bottom>span {
  font-size:6px;
  line-height:1.5;
}

.offgrid-bottom svg {
  width:33px;
  height:33px;
}

.offgrid .floating-note {
  background:#202129;
  color:#d9dcf6;
  font-family:Manrope,sans-serif;
  font-size:10px;
}

.still {
  background:#b8a795;
}

.still .stage-word {
  color:#e4dbcb55;
  font-size:11vw;
}

.still-site {
  height:calc(100% - 24px);
  background:#eee9df;
  color:#554d40;
}

.still-site .mock-nav {
  height:43px;
}

.still-site .mock-nav b {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:22px;
}

.still-layout {
  height:calc(100% - 43px);
  position:relative;
  overflow:hidden;
}

.still-layout img {
  height:100%;
  width:100%;
  filter:brightness(.65);
  object-position:50% 60%;
}

.still-layout h3 {
  position:absolute;
  left:8%;
  top:16%;
  font-family:Georgia,serif;
  font-size:clamp(35px,4.5vw,72px);
  line-height:.98;
  letter-spacing:-.05em;
  z-index:1;
  color:#fff8e6;
}

.still-layout>.mock-link {
  position:absolute;
  bottom:10%;
  left:8%;
  color:#fff8e6;
}

.still .floating-note {
  background:#f1eadf;
  color:#554d40;
}

.approach {
  padding:105px var(--gutter) 100px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  position:relative;
  border-top:12px solid var(--yellow);
}

.approach::before {
  content:'';
  position:absolute;
  top:0;
  left:var(--gutter);
  width:1px;
  height:49px;
  background:var(--yellow);
}

.approach-intro>.eyebrow {
  color:var(--muted);
  font-size:9px;
}

.approach h2 {
  font-size:clamp(47px,5vw,80px);
  margin:28px 0;
}

.approach h2 .serif-word {
  color:var(--yellow);
}

.approach-intro p {
  font-size:14px;
  color:var(--muted);
  max-width:295px;
}

.approach-arrow {
  width:75px;
  height:75px;
  color:var(--yellow);
  transform:rotate(90deg);
  margin-top:38px;
}

.process-list {
  padding-top:42px;
}

.process-list details {
  border-top:1px solid #ffffff40;
}

.process-list details:last-child {
  border-bottom:1px solid #ffffff40;
}

.process-list summary {
  display:flex;
  align-items:center;
  gap:25px;
  list-style:none;
  cursor:pointer;
  min-height:98px;
}

.process-list summary::-webkit-details-marker {
  display:none;
}

.process-list summary>span:first-child {
  font-size:9px;
  color:var(--yellow);
}

.process-list h3 {
  font-size:clamp(18px,1.8vw,28px);
  letter-spacing:-.035em;
  transition:color .25s;
}

.process-list summary:hover h3 {
  color:var(--yellow);
}

.details-icon {
  margin-left:auto;
  width:24px;
  height:24px;
  position:relative;
  flex-shrink:0;
}

.details-icon::before,.details-icon::after {
  content:'';
  position:absolute;
  top:11px;
  left:4px;
  width:16px;
  height:1px;
  background:currentColor;
  transition:transform .3s;
}

.details-icon::after {
  transform:rotate(90deg);
}

details[open] .details-icon::after {
  transform:rotate(0);
}

.process-body {
  padding:0 0 29px 39px;
}

.process-body p {
  font-size:14px;
  color:var(--muted);
  max-width:390px;
}

.process-body>span {
  display:block;
  font-size:7px;
  letter-spacing:.08em;
  margin-top:23px;
  color:var(--yellow);
}

.contact {
  background:var(--yellow);
  color:var(--ink);
  border-radius:28px 28px 0 0;
  padding:36px var(--gutter) 32px;
  position:relative;
}

.contact-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.contact-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:47px 0 44px;
}

.contact h2 {
  font-size:clamp(63px,8.6vw,140px);
  letter-spacing:-.065em;
  line-height:1.02;
}

.contact-circle {
  width:150px;
  height:150px;
  flex-shrink:0;
  border:1px solid #10110f85;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:13px;
  transition:background .3s,color .3s,transform .4s var(--ease);
}

.contact-circle svg {
  width:52px;
  height:52px;
  transition:transform .4s var(--ease);
}

.contact-circle span {
  font-size:9px;
  letter-spacing:.15em;
}

.contact-circle:hover {
  background:var(--ink);
  color:var(--yellow);
  transform:rotate(-8deg);
}

.contact-circle:hover svg {
  transform:translate(4px,-4px);
}

.contact-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-top:1px solid #10110f40;
  padding-top:23px;
}

.contact-bottom p {
  font-size:13px;
  color:#574900;
}

.contact-bottom>span {
  font-size:8px;
  letter-spacing:.08em;
}

.contact-bottom>span>span {
  font-size:18px;
  margin-left:20px;
}

footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:30px var(--gutter);
  gap:25px;
}

footer .brand {
  font-size:24px;
}

footer .brand>svg {
  width:27px;
  height:30px;
}

footer>span {
  font-size:8px;
  letter-spacing:.05em;
  color:var(--muted);
}

.back-top {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:25px;
  min-height:44px;
}

.back-top>span {
  width:33px;
  height:33px;
  border:1px solid #ffffff40;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:16px;
  transition:background .25s,color .25s;
}

.back-top:hover>span {
  background:var(--yellow);
  color:var(--ink);
}

.case-dialog {
  background:var(--ink);
  color:var(--paper);
  border:1px solid #ffffff30;
  padding:55px;
  max-width:650px;
  width:calc(100% - 40px);
  max-height:85svh;
  overflow:auto;
}

.case-dialog::backdrop {
  background:#000c;
  backdrop-filter:blur(8px);
}

.dialog-close {
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  font-size:32px;
  transition:color .2s;
}

.dialog-close:hover {
  color:var(--yellow);
}

.case-dialog>.eyebrow {
  color:var(--yellow);
}

.case-dialog h2 {
  font-size:60px;
  margin:22px 0 25px;
}

.case-dialog>p {
  font-size:13px;
  color:var(--muted);
}

.dialog-meta {
  display:flex;
  justify-content:space-between;
  border-block:1px solid var(--line);
  padding:20px 0;
  margin:30px 0 18px;
  font-size:8px;
  letter-spacing:.07em;
}

.case-dialog .dialog-note {
  font-size:10px;
}

.case-dialog>.button {
  margin-top:30px;
}

.js-motion [data-reveal] {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}

.js-motion [data-reveal].revealed {
  opacity:1;
  transform:none;
}

@media(min-width:901px) and (min-height:650px) and (prefers-reduced-motion:no-preference) {
  .js-motion .work-chapter {
    height:280svh;
  }
  .js-motion .chapter-pin {
    position:sticky;
    top:0;
    height:100svh;
    min-height:650px;
    display:flex;
    flex-direction:column;
  }
  .js-motion .chapter-heading {
    flex-shrink:0;
  }
  .js-motion .slide-window {
    overflow:hidden;
    flex:1;
    min-height:0;
    scroll-snap-type:none;
  }
  .js-motion .slide-track {
    height:100%;
    will-change:transform;
  }
  .js-motion .project-slide {
    height:100%;
    display:flex;
    flex-direction:column;
  }
  .js-motion .project-visual {
    height:auto;
    flex:1;
    min-height:0;
  }
  .js-motion .project-caption {
    flex-shrink:0;
  }
  .js-motion .chapter-controls {
    flex-shrink:0;
  }
}

@media(min-width:1800px) {
  :root {
    --gutter:max(88px,calc((100vw - 1660px)/2));
  }
  .hero h1 {
    font-size:158px;
  }
  .stage-word {
    font-size:250px;
  }
  .about-grid {
    gap:15%;
  }
  .section-bridge>div {
    font-size:158px;
  }
}

@media(max-width:1100px) {
  .hero {
    min-height:720px;
  }
  .hero h1 {
    font-size:9vw;
  }
  .hero-art {
    min-height:430px;
  }
  .hero-location {
    display:none;
  }
  .chapter-heading>p {
    display:none;
  }
  .chapter-category {
    font-size:7px;
  }
  .browser-mockup {
    width:72%;
  }
  .forma-card {
    right:5%;
    width:175px;
  }
  .floating-note,.floating-sticker,.arch-card {
    right:4%;
  }
  .contact-circle {
    width:125px;
    height:125px;
  }
  .about-grid {
    gap:8%;
  }
  .expertise-tags span {
    padding:10px 13px;
  }
  .hero h1 .title-dot {
    margin-left:8px;
  }
  .chapter-heading h2 {
    font-size:44px;
  }
}

@media(max-width:900px) {
  :root {
    --gutter:32px;
    --header:76px;
  }
  .desktop-nav {
    gap:22px;
  }
  .hero {
    min-height:700px;
    height:90svh;
  }
  .hero h1 {
    font-size:9.4vw;
  }
  .hero-content {
    grid-template-columns:1.3fr 1fr;
  }
  .hero-art {
    min-height:370px;
  }
  .hero-sculpture {
    width:76%;
    left:10%;
    height:75%;
    top:17%;
  }
  .hero-edition {
    font-size:8px;
  }
  .hero-topline>.eyebrow {
    font-size:8px;
  }
  .hero-intro {
    max-width:325px;
  }
  .coordinate-top {
    font-size:7px;
    left:5%;
    top:8%;
  }
  .coordinate-bottom {
    display:none;
  }
  .art-label {
    font-size:10px;
    right:0;
    bottom:7%;
  }
  .about-grid {
    padding:48px 0;
  }
  .about h2 {
    font-size:75px;
  }
  .large-copy {
    font-size:24px;
  }
  .expertise-line {
    align-items:flex-start;
  }
  .expertise-tags {
    justify-content:flex-end;
    max-width:440px;
  }
  .section-bridge>div {
    font-size:9.3vw;
  }
  .work-chapter {
    padding-top:0;
    padding-bottom:25px;
  }
  .chapter-pin {
    padding-top:60px;
  }
  .chapter-heading {
    padding-bottom:25px;
  }
  .chapter-heading h2 {
    font-size:47px;
  }
  .chapter-category {
    max-width:140px;
    line-height:1.7;
  }
  .project-visual {
    height:430px;
  }
  .browser-mockup {
    width:75%;
    height:79%;
  }
  .forma-layout h3 {
    font-size:37px;
  }
  .citrus-layout h3 {
    font-size:55px;
  }
  .aese-layout h3 {
    font-size:42px;
  }
  .arch-title h3 {
    font-size:50px;
  }
  .offgrid-site h3 {
    font-size:57px;
  }
  .still-layout h3 {
    font-size:49px;
  }
  .slide-hint {
    font-size:7px;
  }
  .approach {
    gap:6%;
    padding-block:75px;
  }
  .process-list summary {
    gap:17px;
  }
  .process-body {
    padding-left:30px;
  }
  .approach h2 {
    font-size:51px;
  }
  .contact h2 {
    font-size:8.5vw;
  }
  .contact-circle {
    width:110px;
    height:110px;
  }
  .contact-circle svg {
    width:38px;
    height:38px;
  }
  .contact-top .eyebrow {
    font-size:8px;
  }
  footer>span {
    font-size:7px;
  }
}

@media(max-width:600px) {
  :root {
    --gutter:22px;
    --header:70px;
  }
  .site-header .brand {
    font-size:25px;
  }
  .brand>svg {
    width:29px;
    height:33px;
  }
  .desktop-nav,.header-cta {
    display:none;
  }
  .menu-toggle {
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    z-index:43;
  }
  .menu-toggle>span {
    height:1px;
    width:24px;
    background:var(--paper);
    transition:transform .3s;
  }
  .menu-toggle[aria-expanded=true]>span:first-child {
    transform:translateY(3.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded=true]>span:last-child {
    transform:translateY(-3.5px) rotate(-45deg);
  }
  .mobile-menu {
    position:fixed;
    display:flex;
    flex-direction:column;
    inset:var(--header) 0 0;
    z-index:39;
    background:var(--ink);
    padding:35px var(--gutter);
    gap:15px;
    visibility:hidden;
    opacity:0;
    transform:translateY(-12px);
    transition:opacity .25s,transform .35s var(--ease),visibility .25s;
    overflow:auto;
  }
  .mobile-menu.open {
    visibility:visible;
    opacity:1;
    transform:none;
  }
  .mobile-menu>.eyebrow {
    color:var(--yellow);
    margin-bottom:15px;
  }
  .mobile-menu>a {
    font-size:42px;
    letter-spacing:-.04em;
    padding:10px 0;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .mobile-menu>a>sup {
    font-size:11px;
    color:var(--yellow);
  }
  .mobile-menu>a>svg {
    color:var(--yellow);
  }
  .menu-note {
    margin-top:auto;
    padding-top:25px;
    color:var(--muted);
    font-size:10px;
    letter-spacing:.1em;
  }
  .hero {
    height:auto;
    max-height:none;
    min-height:0;
    padding-top:calc(var(--header) + 25px);
  }
  .hero-edition {
    display:none;
  }
  .hero-topline>.eyebrow {
    font-size:7px;
    letter-spacing:.13em;
  }
  .hero-content {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:33px 0 0;
  }
  .hero h1 {
    font-size:clamp(58px,14.2vw,85px);
    line-height:1.03;
    letter-spacing:-.07em;
  }
  .title-dot {
    margin-top:7px!important;
    margin-left:5px!important;
  }
  .hero-intro {
    margin:24px 0 23px;
    max-width:345px;
    gap:13px;
  }
  .hero-intro p {
    font-size:13px;
    line-height:1.8;
  }
  .mini-line {
    width:22px;
    min-width:22px;
  }
  .button {
    font-size:11px;
    padding:16px 19px;
    min-height:51px;
    gap:37px;
  }
  .hero-art {
    height:315px;
    min-height:0;
    margin:0 -6px 5px;
  }
  .hero-sculpture {
    width:43%;
    height:90%;
    left:27%;
    top:4%;
  }
  .orbital-one {
    width:85%;
    left:7%;
    height:62%;
    top:19%;
  }
  .orbital-two {
    width:55%;
    height:97%;
    top:-1%;
    left:22%;
  }
  .coordinate-top {
    top:21%;
    left:0;
    font-size:7px;
  }
  .art-spark {
    font-size:33px;
    right:12%;
    top:15%;
  }
  .plus-one {
    right:3%;
    top:8%;
  }
  .plus-two {
    bottom:13%;
    left:9%;
  }
  .art-label {
    bottom:17%;
    right:2%;
    font-size:11px;
  }
  .hero-bottom {
    min-height:62px;
    font-size:6px;
    letter-spacing:.07em;
    gap:10px;
  }
  .scroll-cue {
    gap:8px;
  }
  .scroll-icon {
    width:20px;
    height:29px;
    font-size:13px;
  }
  .about {
    border-radius:18px 18px 0 0;
    padding-top:28px;
  }
  .section-top>.eyebrow {
    font-size:7px;
    letter-spacing:.12em;
  }
  .section-star {
    width:27px;
    height:27px;
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:25px;
    padding:33px 0 37px;
  }
  .about h2 {
    font-size:72px;
  }
  .about-copy {
    padding:0;
  }
  .large-copy {
    font-size:24px;
    line-height:1.5;
  }
  .about-copy>p+p {
    font-size:13px;
    margin-top:18px;
  }
  .text-link {
    font-size:11px;
    margin-top:4px;
    padding-top:16px;
  }
  .expertise-line {
    flex-direction:column;
    gap:16px;
    padding-block:23px;
  }
  .expertise-line>span {
    font-size:8px;
  }
  .expertise-line>span br {
    display:none;
  }
  .expertise-tags {
    justify-content:flex-start;
    gap:7px;
  }
  .expertise-tags span {
    font-size:10px;
    padding:10px 12px;
  }
  .section-bridge {
    padding:20px 0 26px;
    margin:0;
  }
  .section-bridge>span {
    font-size:7px;
  }
  .section-bridge>div {
    font-size:9.1vw;
    line-height:1.5;
  }
  .section-bridge svg {
    width:8vw;
    height:8vw;
  }
  .work-chapter {
    padding-bottom:20px;
  }
  .chapter-pin {
    padding-top:44px;
    padding-bottom:0;
  }
  .chapter-heading {
    gap:10px;
    padding-bottom:24px;
  }
  .chapter-heading .eyebrow {
    font-size:7px;
    letter-spacing:.1em;
  }
  .chapter-heading h2 {
    font-size:38px;
    margin-top:13px;
  }
  .chapter-category {
    display:none;
  }
  .project-visual {
    height:330px;
  }
  .browser-mockup {
    width:86%;
    height:72%;
    margin-top:-8px;
  }
  .browser-chrome {
    height:18px;
    padding:0 6px;
    font-size:5px;
  }
  .browser-chrome>span:first-child {
    font-size:4px;
    letter-spacing:1px;
  }
  .mock-nav {
    height:37px;
    padding-inline:6%;
    font-size:5px;
  }
  .mock-nav b {
    font-size:17px;
  }
  .mock-nav b span {
    font-size:6px;
  }
  .mock-eyebrow {
    font-size:4px;
  }
  .mock-link {
    font-size:5px;
    padding-bottom:4px;
  }
  .forma-site,.citrus-site,.aese-site,.arch-site,.offgrid-site,.still-site {
    height:calc(100% - 18px);
  }
  .forma-layout {
    height:calc(100% - 37px);
    grid-template-columns:1fr 1fr;
  }
  .forma-layout h3 {
    font-size:23px;
    line-height:1.1;
    margin:10px 0 16px;
  }
  .forma-layout p {
    display:none;
  }
  .forma-card {
    width:142px;
    right:4%;
    bottom:12%;
    padding:7px;
    grid-template-columns:43px 1fr;
    gap:7px;
  }
  .forma-card img {
    width:43px;
    height:53px;
  }
  .forma-card>span {
    font-size:4px;
  }
  .forma-card b {
    font-size:6px;
  }
  .forma-card .card-plus {
    font-size:12px;
  }
  .stage-word {
    font-size:80px;
    top:1%;
    left:2%;
  }
  .stage-corner {
    font-size:5px;
    left:12px;
    bottom:11px;
  }
  .project-caption {
    min-height:80px;
    gap:10px;
  }
  .project-caption>div {
    display:grid;
    grid-template-columns:24px 1fr;
    gap:4px 6px;
  }
  .project-caption h3 {
    font-size:19px;
  }
  .project-no {
    font-size:8px;
  }
  .project-type {
    font-size:8px;
    grid-column:2;
    margin:0;
  }
  .project-open {
    font-size:0;
    gap:0;
    padding:0 0 0 10px;
    width:44px;
    justify-content:flex-end;
  }
  .project-open svg {
    width:23px;
    height:23px;
  }
  .chapter-controls {
    gap:10px;
    min-height:68px;
  }
  .slide-current {
    font-size:10px;
    min-width:50px;
  }
  .slide-current>span {
    font-size:8px;
  }
  .slide-dots {
    gap:4px;
  }
  .slide-dots button {
    width:24px;
  }
  .slide-hint {
    font-size:6px;
    margin-left:auto;
    max-width:70px;
    line-height:1.5;
  }
  .slide-hint>span {
    display:none;
  }
  .slide-arrows {
    gap:5px;
  }
  .slide-arrows button {
    width:44px;
    height:44px;
    font-size:17px;
  }
  .citrus .stage-word,.aese .stage-word,.arch .stage-word,.offgrid .stage-word,.still .stage-word {
    font-size:14vw;
    top:3%;
    left:3%;
  }
  .citrus-layout {
    height:calc(100% - 37px);
    padding:2% 12% 10% 7%;
  }
  .citrus-layout h3 {
    font-size:38px;
  }
  .soda-can {
    width:25%;
    height:90%;
    border-top-width:4px;
    border-bottom-width:3px;
  }
  .soda-can>span {
    font-size:19px;
  }
  .soda-can small {
    font-size:4px;
  }
  .soda-can b {
    font-size:27px;
  }
  .citrus-site>.mock-link {
    bottom:9%;
  }
  .floating-sticker {
    width:76px;
    height:76px;
    right:5%;
    bottom:9%;
    font-size:9px;
  }
  .floating-sticker strong {
    font-size:10px;
  }
  .aese-layout {
    height:calc(100% - 37px);
    gap:10%;
  }
  .aese-layout h3 {
    font-size:29px;
    margin:10px 0 17px;
  }
  .cosmetic-bottle {
    width:20%;
    height:64%;
  }
  .cosmetic-bottle b {
    font-size:17px;
  }
  .cosmetic-bottle span {
    font-size:4px;
  }
  .cosmetic-bottle small {
    font-size:3px;
  }
  .floating-note {
    padding:13px;
    right:3%;
    bottom:8%;
    font-size:11px;
  }
  .floating-note>span {
    font-size:19px;
    margin-top:7px;
  }
  .editorial {
    border-radius:18px 18px 0 0;
  }
  .editorial .chapter-heading h2 {
    font-size:36px;
  }
  .arch-title h3 {
    font-size:35px;
  }
  .arch-title>span:last-child {
    font-size:5px;
  }
  .arch-card {
    width:112px;
    bottom:8%;
    right:4%;
    padding:7px;
  }
  .arch-card>span {
    font-size:4px;
    margin-bottom:5px;
  }
  .arch-card>img {
    height:64px;
  }
  .arch-card b {
    font-size:5px;
    margin-top:5px;
  }
  .offgrid-site h3 {
    font-size:36px;
    padding:10% 0 8%;
  }
  .offgrid-bottom>span {
    font-size:4px;
  }
  .offgrid-bottom svg {
    width:24px;
    height:24px;
  }
  .offgrid .floating-note {
    font-size:7px;
    bottom:6%;
  }
  .still-site .mock-nav {
    height:33px;
  }
  .still-site .mock-nav b {
    font-size:17px;
  }
  .still-layout {
    height:calc(100% - 33px);
  }
  .still-layout h3 {
    font-size:32px;
    top:18%;
  }
  .approach {
    padding-block:61px 55px;
    grid-template-columns:1fr;
    gap:27px;
    border-top-width:7px;
  }
  .approach::before {
    height:29px;
  }
  .approach-intro {
    position:relative;
  }
  .approach-intro>.eyebrow {
    font-size:7px;
  }
  .approach h2 {
    font-size:57px;
    margin:23px 0;
  }
  .approach-intro p {
    font-size:14px;
    max-width:270px;
  }
  .approach-arrow {
    position:absolute;
    right:0;
    bottom:1px;
    width:45px;
    height:45px;
    margin:0;
  }
  .process-list {
    padding:0;
  }
  .process-list summary {
    min-height:84px;
    gap:17px;
  }
  .process-list h3 {
    font-size:23px;
  }
  .process-body {
    padding:0 0 26px 30px;
  }
  .process-body p {
    font-size:11px;
  }
  .process-body>span {
    font-size:6px;
    margin-top:20px;
  }
  .contact {
    border-radius:18px 18px 0 0;
    padding-top:27px;
    padding-bottom:25px;
  }
  .contact-top>.eyebrow {
    font-size:7px;
  }
  .contact-top>.eyebrow:last-child {
    display:none;
  }
  .contact-main {
    padding:32px 0 27px;
    position:relative;
    display:block;
  }
  .contact h2 {
    font-size:13vw;
    line-height:1.09;
    letter-spacing:-.07em;
  }
  .contact-circle {
    width:79px;
    height:79px;
    margin-top:26px;
    margin-left:auto;
    gap:5px;
  }
  .contact-circle svg {
    width:31px;
    height:31px;
  }
  .contact-circle span {
    font-size:6px;
  }
  .contact-bottom {
    padding-top:19px;
    gap:15px;
  }
  .contact-bottom p {
    font-size:10px;
  }
  .contact-bottom>span {
    font-size:6px;
    max-width:105px;
    line-height:1.8;
  }
  .contact-bottom>span>span {
    font-size:14px;
    margin-left:0;
    display:block;
  }
  footer {
    flex-wrap:wrap;
    gap:20px;
    padding-block:24px;
  }
  footer>.brand {
    font-size:24px;
    order:1;
  }
  footer>.back-top {
    order:2;
    margin-left:auto;
    font-size:9px;
    gap:12px;
  }
  footer>span {
    order:3;
    width:100%;
    padding-top:16px;
    border-top:1px solid var(--line);
    font-size:6px;
  }
  .case-dialog {
    padding:47px 25px 28px;
  }
  .case-dialog h2 {
    font-size:44px;
  }
  .case-dialog>p {
    font-size:12px;
  }
  .dialog-meta {
    font-size:7px;
  }
  .dialog-close {
    top:4px;
    right:4px;
  }
}

@media(max-width:360px) {
  :root {
    --gutter:18px;
  }
  .hero h1 {
    font-size:14vw;
  }
  .hero-bottom>span {
    font-size:5px;
  }
  .hero-art {
    height:290px;
  }
  .about h2 {
    font-size:65px;
  }
  .chapter-heading h2 {
    font-size:34px;
  }
  .editorial .chapter-heading h2 {
    font-size:31px;
  }
  .project-visual {
    height:290px;
  }
  .forma-layout h3 {
    font-size:21px;
  }
  .citrus-layout h3 {
    font-size:32px;
  }
  .aese-layout h3 {
    font-size:25px;
  }
  .arch-title h3 {
    font-size:30px;
  }
  .offgrid-site h3 {
    font-size:31px;
  }
  .still-layout h3 {
    font-size:28px;
  }
  .slide-hint {
    display:none;
  }
  .slide-arrows {
    margin-left:auto;
  }
  .process-list h3 {
    font-size:20px;
  }
  .approach h2 {
    font-size:50px;
  }
  .approach-intro p {
    max-width:235px;
  }
  .contact h2 {
    font-size:12.7vw;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .hero-sculpture,.parallax-layer,.stage-word {
    transform:none!important;
  }
  .js-motion [data-reveal] {
    opacity:1;
    transform:none;
  }
  .sculpture-front,.sculpture-back {
    transform:rotate(-12deg) rotateY(-22deg) rotateX(10deg);
  }
}


/* Dark art direction and circular project stages. */
:root {
  --yellow: #f5d547;
  --ink: #0d0d0f;
  --paper: #f1f0eb;
  --muted: #a5a5ad;
  --line: #ffffff1c;
}
.brand-accent { fill: var(--mark-accent, var(--yellow)); }
body.has-dialog { overflow:hidden; }
.site-header { background: var(--ink); }
.sculpture-front {
  color: #c9ccd2;
  --mark-accent: #f5d547;
  filter: drop-shadow(1px 1px 0 #f0f1f4) drop-shadow(3px 3px 0 #666970) drop-shadow(8px 9px 0 #35373e) drop-shadow(10px 15px 16px #000a);
}
.sculpture-back { color: #303137; --mark-accent: #967818; }
.hero-sculpture { transform: translate3d(0,var(--depth-y,0),0) rotate(var(--depth-rotate,0deg)); }
.hero-art .orbital-one { transform: rotate(calc(-32deg + var(--orbit-angle,0deg))) scale(var(--orbit-scale,1)); }
.hero-art .orbital-two { transform: rotate(calc(40deg - var(--orbit-angle,0deg))); }
.hero-copy { transform: translate3d(0,var(--copy-y,0),0); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button { border-radius: 5px; }
.button-yellow { background: var(--yellow); }
.button:active, .header-cta:active { transform: translateY(0) scale(.97); }
.reel-trigger { display: inline-flex; align-items:center; gap:12px; min-height:54px; border:1px solid #ffffff32; border-radius:5px; padding:14px 19px; font-size:12px; transition:background .25s,border-color .25s; }
.reel-trigger:hover { background:#ffffff0d; border-color:var(--yellow); }
.play-glyph { display:grid; place-items:center; width:24px; height:24px; border:1px solid currentColor; border-radius:50%; font-size:8px; color:var(--yellow); }
.reel-trigger small { font-size:9px; color:var(--muted); }
.about, .editorial, .contact { background:var(--ink); color:var(--paper); border-radius:0; }
.about { border-top:1px solid var(--line); padding-top:55px; background:#141416; }
.section-star, .about h2 .serif-word, .contact h2 .serif-word { color:var(--yellow); }
.large-copy span, .about-copy>p+p, .contact-bottom p { color:var(--muted); }
.expertise-line, .section-bridge, .contact-bottom, .text-link { border-color:var(--line); }
.expertise-tags span { border-color:#ffffff32; color:#bdbdc4; }
.about :focus-visible,.editorial :focus-visible,.contact :focus-visible { outline-color:var(--yellow); }
.section-bridge { position:relative; padding-bottom:45px; }
.section-bridge>div { color:#45454b; }
.section-bridge svg { color:var(--yellow); }
.about .eyebrow, .section-bridge>span { color:var(--yellow); }
.text-link:hover { color:var(--yellow); }
.contact { border-top:1px solid var(--line); background:#141416; padding-block:46px; }
.contact-circle { border-color:var(--yellow); color:var(--yellow); }
.contact-circle:hover { background:var(--yellow); color:var(--ink); box-shadow:0 0 0 12px #f5d5470b; }
.contact-top { color:var(--muted); }
.approach { border-top:1px solid var(--line); }
.approach::before { height:35px; }
.process-list { overflow-anchor:none; }
.process-list details { transition:border-color .35s,background .35s; }
.process-list details[data-expanded=true] { border-top-color:#f5d54765; background:linear-gradient(110deg,#f5d54706,transparent 70%); }
.process-list details[data-expanded=true] h3 { color:var(--yellow); }
.process-list .details-icon {
  width:34px; height:34px; border:1px solid #ffffff35; border-radius:50%;
  color:var(--muted); transition:color .35s,background .35s,border-color .35s,transform .45s var(--ease);
}
.process-list .details-icon::before,.process-list .details-icon::after { top:16px; left:9px; width:14px; transition:transform .4s var(--ease); }
.process-list details[data-expanded=true] .details-icon { background:var(--yellow); border-color:var(--yellow); color:var(--ink); transform:rotate(180deg); }
.process-list details[data-expanded=true] .details-icon::after { transform:rotate(0); }
.process-list details[data-expanded=false] .details-icon::after { transform:rotate(90deg); }
.process-list summary:hover .details-icon { border-color:var(--yellow); }
.process-list details[data-expanded=false] summary:hover .details-icon { color:var(--yellow); background:#f5d5470b; }
.process-body { transform-origin:top; }
.editorial .chapter-heading .eyebrow,.editorial .chapter-heading>p,.editorial .project-no,.editorial .project-type,.editorial .slide-hint,.editorial .slide-current>span { color:var(--muted); }
.editorial .chapter-heading .serif-word,.editorial .chapter-category>span { color:var(--yellow); }
.editorial .project-caption { border-color:var(--line); }
.editorial .slide-dots button::before { background:#ffffff30; }
.editorial .slide-dots button[aria-current=true]::before,.editorial .slide-dots button:hover::before { background:var(--yellow); }
.editorial .slide-arrows button { border-color:#ffffff40; }
.editorial .slide-arrows button:hover:not(:disabled) { background:var(--yellow); color:var(--ink); }
.editorial .project-open:hover svg { color:var(--ink); }

/* Project previews retain their own restrained identity inside charcoal cards. */
.project-visual { border-radius:14px 14px 0 0; }
.forma { background:#403e35; }
.citrus { background:#42342c; }
.aese { background:#30382e; }
.arch { background:#292d29; }
.offgrid { background:#33353f; }
.still { background:#3b352f; }
.citrus-site { background:#bb764d; color:#281b12; }
.floating-sticker { background:#d4cda2; border-color:#6e573c; box-shadow:3px 4px #624932; }
.offgrid-site { background:#adb0c3; }
.stage-word { opacity:.5; }
.project-caption { background:#181a16; padding:15px 20px; border-radius:0 0 14px 14px; min-height:85px; }
.project-caption>div { gap:12px; }
.project-open { border:1px solid #ffffff32; border-radius:50px; padding:0 15px; min-height:44px; gap:14px; transition:background .25s,color .25s,border-color .25s; white-space:nowrap; }
.project-open:hover { background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.project-open:hover svg { color:var(--ink); }
.card-hit { position:absolute; inset:0; z-index:8; border-radius:14px 14px 0 0; }
.card-hit>span { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:96px; height:96px; border-radius:50%; background:#f5d547f2; color:#0d0d0f; font-size:10px; transform:translate(-50%,-40%) scale(.8); opacity:0; transition:opacity .25s,transform .4s var(--ease); box-shadow:0 8px 25px #0004; }
.project-slide:hover .card-hit>span,.card-hit:focus-visible>span { opacity:1; transform:translate(-50%,-50%) scale(1); }
.project-slide:hover .browser-mockup { filter:brightness(1.09); }
.card-hit:focus-visible { outline-offset:-5px; }
.wheel-ring, .wheel-ghost, .wheel-label { display:none; }
.work-chapter { border-top:1px solid var(--line); }

/* The wheel is a real circular coordinate system; each card rotates with its spoke. */
.wheel-enabled .work-chapter { height:340svh; padding:0; }
.wheel-enabled .chapter-pin { position:sticky; top:0; height:100svh; min-height:0; padding:calc(var(--header) + 28px) 0 0; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; }
.wheel-enabled .chapter-heading { margin:0 var(--gutter); padding-bottom:18px; z-index:5; flex-shrink:0; }
.wheel-enabled .chapter-heading h2 { font-size:clamp(38px,4.4vw,72px); }
.wheel-enabled .slide-window { position:relative; overflow:hidden; flex:1; min-height:0; width:100%; border-radius:0; scroll-snap-type:none; touch-action:pan-y; perspective:1200px; }
.wheel-enabled .slide-track { position:absolute; inset:0; height:100%; display:block; width:100%; transform:none!important; will-change:auto; }
.wheel-enabled .project-slide { position:absolute; left:50%; top:var(--card-top,35px); margin-left:calc(var(--card-width,640px) / -2); width:var(--card-width,640px); min-width:0; height:var(--card-height,420px); display:flex; flex-direction:column; border:1px solid #ffffff22; border-radius:16px; background:#181a16; box-shadow:0 20px 55px #0009; transform-origin:center center; will-change:transform; transition:border-color .25s,box-shadow .25s; }
.wheel-enabled .project-slide[data-active=true] { border-color:#f5d54775; }
.wheel-enabled .project-slide[data-active=true]:hover { border-color:var(--yellow); box-shadow:0 25px 70px #000b,0 0 0 1px #f5d54760; }
.wheel-enabled .project-visual { height:auto; flex:1; min-height:0; }
.wheel-enabled .project-caption { min-height:76px; height:76px; flex-shrink:0; }
.wheel-enabled .project-type { display:none; }
.wheel-enabled .browser-mockup { width:74%; height:82%; }
.wheel-enabled .forma-layout h3 { font-size:clamp(24px,3.1vw,46px); }
.wheel-enabled .citrus-layout h3 { font-size:clamp(30px,3.8vw,58px); }
.wheel-enabled .aese-layout h3 { font-size:clamp(28px,3.4vw,51px); }
.wheel-enabled .arch-title h3 { font-size:clamp(32px,3.8vw,57px); }
.wheel-enabled .offgrid-site h3 { font-size:clamp(33px,4vw,60px); }
.wheel-enabled .still-layout h3 { font-size:clamp(31px,3.7vw,55px); }
.wheel-enabled .forma-card { width:160px; right:4%; bottom:10%; grid-template-columns:47px 1fr; }
.wheel-enabled .forma-card img { width:47px; height:57px; }
.wheel-enabled .forma-card>span { font-size:5px; }
.wheel-enabled .forma-card b { font-size:6px; }
.wheel-enabled .arch-card { width:137px; right:4%; }
.wheel-enabled .arch-card>img { height:77px; }
.wheel-enabled .floating-sticker { width:90px; height:90px; right:5%; font-size:10px; }
.wheel-enabled .floating-sticker strong { font-size:12px; }
.wheel-enabled .floating-note { right:3%; font-size:12px; padding:17px; }
.wheel-enabled .stage-word { font-size:95px; }
.wheel-enabled .chapter-controls { position:relative; z-index:10; flex-shrink:0; height:80px; min-height:80px; padding:0 var(--gutter); background:linear-gradient(0deg,var(--ink) 75%,#0d0d0f00); }
.wheel-enabled .wheel-ghost { display:flex; pointer-events:none; }
.wheel-enabled .wheel-ring { display:block; position:absolute; left:50%; top:var(--ring-top,250px); width:var(--ring-size,1500px); height:var(--ring-size,1500px); margin-left:calc(var(--ring-size,1500px) / -2); border:1px solid #f5d5472b; border-radius:50%; pointer-events:none; }
.wheel-enabled .wheel-ring::before { content:''; position:absolute; inset:10%; border:1px dashed #ffffff12; border-radius:50%; }
.wheel-enabled .wheel-ring::after { content:''; position:absolute; inset:25%; border:1px solid #ffffff08; border-radius:50%; }
.wheel-enabled .wheel-label { display:block; position:absolute; left:var(--gutter); bottom:35px; font-size:8px; letter-spacing:.18em; color:#96998c; pointer-events:none; }
.wheel-enabled .wheel-label>span { display:block; font-family:Georgia,serif; font-style:italic; font-size:25px; letter-spacing:-.03em; margin-top:8px; color:var(--yellow); }
.slide-arrows button { width:48px; height:48px; }
.slide-arrows button:active:not(:disabled) { transform:scale(.9); }
.slide-dots button { min-width:36px; }

.showreel-panel { margin:0 0 60px; width:100%; position:relative; border:1px solid #ffffff22; border-radius:16px; overflow:hidden; display:block; text-align:left; aspect-ratio:2.55; background:#10120f; color:var(--paper); }
.showreel-panel>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:transform .9s var(--ease),opacity .5s; }
.showreel-panel>img { clip-path:inset(0 0 0 44%); }
.showreel-panel::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0009,transparent 70%); pointer-events:none; }
.showreel-caption { position:absolute; z-index:1; left:5%; bottom:15%; }
.showreel-caption small { display:block; font-size:9px; letter-spacing:.16em; color:var(--yellow); margin-bottom:14px; }
.showreel-caption strong { font-size:clamp(25px,3.5vw,52px); font-weight:400; letter-spacing:-.05em; }
.showreel-play { position:absolute; z-index:2; right:7%; top:50%; transform:translateY(-50%); width:88px; height:88px; display:grid; place-items:center; border:1px solid #f5d547aa; border-radius:50%; color:var(--yellow); background:#0d0d0f90; font-size:19px; transition:background .3s,color .3s,box-shadow .3s; }
.showreel-panel:hover>img { transform:scale(1.05); opacity:.85; }
.showreel-panel:hover .showreel-play { color:var(--ink); background:var(--yellow); box-shadow:0 0 0 12px #f5d54710; }
.showreel-panel:focus-visible { outline-offset:5px; }
.video-dialog { width:min(1200px,94vw); max-width:none; background:#10110f; border:1px solid #ffffff32; border-radius:14px; padding:42px 16px 16px; color:var(--paper); }
.video-dialog::backdrop { background:#000e; backdrop-filter:blur(10px); }
.video-dialog video { width:100%; max-height:75svh; display:block; background:#0d0d0f; aspect-ratio:16/9; border-radius:6px; }
.video-dialog .eyebrow { position:absolute; top:14px; left:18px; font-size:8px; color:var(--yellow); }
.video-dialog .dialog-close { top:0; right:5px; }
.video-status { font-size:12px; color:var(--muted); padding:12px 2px 0; }
.video-status:empty { display:none; }
.case-dialog { width:min(1000px,94vw); max-width:none; border-radius:16px; padding:38px; }
.case-preview { height:360px; border-radius:10px; overflow:hidden; margin:24px 0; }
.case-preview .project-visual { height:100%; border-radius:0; }
.case-preview .card-hit { display:none; }
.case-preview .browser-mockup { transform:none; }
.case-preview .forma-layout p { display:none; }
.case-dialog h2 { margin-block:16px; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px; }
.contact-fields label { display:flex; flex-direction:column; gap:10px; font-size:12px; color:var(--muted); }
.contact-fields label:last-child { grid-column:1/-1; }
.contact-fields input,.contact-fields textarea { background:#1a1c17; border:1px solid #ffffff32; border-radius:5px; color:var(--paper); font:inherit; font-size:15px; padding:13px; min-width:0; }
.contact-fields input:focus,.contact-fields textarea:focus { outline:2px solid var(--yellow); outline-offset:2px; }
.contact-fields textarea { resize:vertical; min-height:100px; }
.contact-form .button { margin-top:22px; }
.contact-form small { font-size:10px; line-height:1.6; display:block; color:var(--muted); margin-top:12px; }
.contact-feedback { min-height:24px; margin-top:12px; font-size:13px; color:var(--yellow); }
[hidden] { display:none!important; }
@media(max-width:900px) {
  .wheel-enabled .chapter-heading h2 { font-size:46px; }
  .wheel-enabled .chapter-pin { padding-top:calc(var(--header) + 23px); }
  .wheel-enabled .chapter-controls { height:76px; min-height:76px; }
  .wheel-enabled .project-caption { padding-inline:15px; }
  .showreel-panel { aspect-ratio:2.1; }
}
@media(max-width:600px) {
  .hero-actions { gap:10px; }
  .hero-actions .button { gap:20px; padding-inline:15px; }
  .reel-trigger { padding:12px; gap:8px; min-height:51px; font-size:10px; }
  .reel-trigger small { display:none; }
  .reel-trigger .play-glyph { width:20px; height:20px; font-size:7px; }
  .about { padding-top:32px; }
  .about h2 { font-size:65px; }
  .section-bridge { padding-bottom:30px; }
  .showreel-panel { aspect-ratio:1.6; margin-bottom:35px; border-radius:10px; }
  .showreel-caption { bottom:16%; left:7%; }
  .showreel-caption small { font-size:7px; margin-bottom:8px; }
  .showreel-caption strong { font-size:28px; }
  .showreel-play { width:55px; height:55px; font-size:13px; right:6%; top:33%; }
  .wheel-enabled .work-chapter { height:320svh; }
  .wheel-enabled .chapter-pin { padding-top:calc(var(--header) + 26px); }
  .wheel-enabled .chapter-heading { padding-bottom:12px; }
  .wheel-enabled .chapter-heading h2 { font-size:36px; }
  .wheel-enabled .chapter-controls { gap:8px; padding-inline:var(--gutter); height:76px; min-height:76px; }
  .wheel-enabled .project-caption { min-height:68px; height:68px; padding:10px 13px; }
  .project-caption>div { display:flex; gap:8px; }
  .project-caption h3 { font-size:19px; }
  .project-open { font-size:0; width:43px; min-width:43px; padding:0; justify-content:center; border-radius:50%; }
  .wheel-enabled .browser-mockup { width:86%; height:76%; }
  .wheel-enabled .forma-layout h3 { font-size:22px; }
  .wheel-enabled .citrus-layout h3 { font-size:33px; }
  .wheel-enabled .aese-layout h3 { font-size:26px; }
  .wheel-enabled .arch-title h3 { font-size:29px; }
  .wheel-enabled .offgrid-site h3 { font-size:32px; }
  .wheel-enabled .still-layout h3 { font-size:29px; }
  .wheel-enabled .forma-card { width:121px; grid-template-columns:36px 1fr; padding:7px; gap:6px; bottom:8%; }
  .wheel-enabled .forma-card img { width:36px; height:45px; }
  .wheel-enabled .forma-card>span { font-size:4px; }
  .wheel-enabled .forma-card b { font-size:5px; }
  .wheel-enabled .arch-card { width:100px; }
  .wheel-enabled .arch-card>img { height:55px; }
  .wheel-enabled .floating-note { padding:10px; font-size:9px; }
  .wheel-enabled .floating-sticker { width:65px; height:65px; font-size:8px; }
  .wheel-enabled .floating-sticker strong { font-size:9px; }
  .wheel-enabled .stage-word { font-size:65px; }
  .wheel-enabled .wheel-label { font-size:6px; bottom:14px; }
  .wheel-enabled .wheel-label>span { font-size:19px; margin-top:5px; }
  .slide-arrows { margin-left:auto; }
  .slide-arrows button { width:44px; height:44px; }
  .slide-dots button { min-width:24px; }
  .slide-hint { display:none; }
  .card-hit>span { width:72px; height:72px; font-size:8px; }
  .contact { padding-block:32px; }
  .case-dialog { padding:40px 20px 25px; }
  .case-preview { height:280px; }
  .case-preview .floating-card { display:none; }
  .contact-fields { grid-template-columns:1fr; }
  .contact-fields label:last-child { grid-column:auto; }
  .video-dialog { padding:42px 8px 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-copy { transform:none!important; }
  .hero-art .orbital { transform:none!important; }
  .showreel-panel:hover>img { transform:none; }
}

/* ===== WordPress integration ===== */
.wp-site-blocks{padding:0!important}
.wp-site-blocks>*,.wp-block-post-content>*,main.wp-block-group>*{margin-block-start:0!important;margin-block-end:0!important;max-width:none!important}
.wp-block-post-content,.wp-block-template-part{margin:0!important}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}