:root{
  --paper:#efeee9;
  --paper-soft:#e7e5df;
  --ink:#101010;
  --muted:#74736d;
  --dark:#0d0e10;
  --dark2:#141518;
  --line:rgba(16,16,16,.15);
  --line-dark:rgba(255,255,255,.13);
  --accent:#c7ff52;
  --pad:clamp(22px,4.5vw,76px);
  --max:1800px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--ink);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

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

button,
input,
textarea,
select{
  font:inherit;
}

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


/* --------------------------------------------------
   GLOBAL
-------------------------------------------------- */

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:100;
  opacity:.035;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.section-pad{
  padding:clamp(80px,10vw,150px) var(--pad);
}

.section-dark{
  background:var(--dark);
  color:#f3f2ed;
}

.eyebrow,
.hero-kicker{
  margin:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
}

.section-dark .eyebrow{
  color:#8c8d90;
}

.tags{
  margin-top:18px!important;
  color:var(--muted);
  font-size:11px!important;
  text-transform:uppercase;
  letter-spacing:.065em;
}

.case-dark .tags,
.section-dark .tags{
  color:#85868a;
}

.text-link{
  display:inline-block;
  width:max-content;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:1px solid currentColor;
  padding-bottom:4px;
  white-space:nowrap;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 19px;
  border:1px solid var(--ink);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.button:hover{
  transform:translateY(-1px);
}

.button-primary{
  background:var(--ink);
  color:#fff;
}

.button-primary:hover{
  background:#2b2b2b;
}

.button-ghost:hover{
  background:rgba(0,0,0,.06);
}

.button-light{
  background:#fff;
  color:#111;
  border-color:#fff;
}

.button-light:hover{
  background:var(--accent);
  border-color:var(--accent);
}


/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

.site-header{
  position:fixed;
  z-index:50;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px var(--pad);
  mix-blend-mode:difference;
  color:#fff;
  transition:transform .35s ease;
}

.site-header.hidden{
  transform:translateY(-110%);
}

.brand{
  display:flex;
  gap:13px;
  align-items:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
}

.brand-mark{
  width:34px;
  height:34px;
  object-fit:contain;
}

.brand-name{
  line-height:1;
}

.nav{
  display:flex;
  gap:28px;
  font-size:12px;
}

.nav a{
  opacity:.72;
  transition:opacity .2s ease;
}

.nav a:hover{
  opacity:1;
}


/* --------------------------------------------------
   HERO
-------------------------------------------------- */

.hero{
  min-height:100svh;
  padding-top:150px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}

.hero-title{
  font-size:clamp(54px,8.7vw,142px);
  line-height:.87;
  letter-spacing:-.065em;
  font-weight:500;
  margin:28px 0 0;
  max-width:1500px;
}

.hero-title span{
  color:#9b9a94;
}

.hero-bottom{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:60px;
  margin-top:70px;
  align-items:end;
}

.hero-copy{
  font-size:clamp(18px,2vw,30px);
  line-height:1.3;
  max-width:720px;
  margin:0;
  letter-spacing:-.02em;
}

.hero-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.hero-meta{
  margin-top:80px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}


/* --------------------------------------------------
   STATEMENT
-------------------------------------------------- */

.statement{
  padding-top:130px;
  padding-bottom:130px;
}

.statement-copy{
  font-size:clamp(34px,5vw,80px);
  line-height:1.04;
  letter-spacing:-.045em;
  max-width:1400px;
  margin:42px 0 0;
  color:#999a9e;
}

.statement-copy strong{
  font-weight:500;
  color:#f4f3ef;
}


/* --------------------------------------------------
   SECTION HEADINGS
-------------------------------------------------- */

.section-heading{
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:flex-end;
  margin-bottom:70px;
}

.section-heading h2{
  font-size:clamp(38px,5.1vw,78px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:500;
  margin:22px 0 0;
  max-width:1060px;
}

.section-heading.split>div{
  max-width:960px;
}

.section-intro{
  max-width:470px;
  font-size:17px;
  line-height:1.5;
  color:#a6a7aa;
  margin:0 0 6px;
}

.section-intro.dark-copy{
  color:var(--muted);
}


/* --------------------------------------------------
   WORK / CASE STUDIES
-------------------------------------------------- */

.work{
  overflow:hidden;
}

.case-study{
  margin-top:clamp(100px,13vw,210px);
}

.case-study:first-of-type{
  margin-top:0;
}

.case-header{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:8vw;
  align-items:end;
  margin-bottom:42px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.case-header h3{
  margin:18px 0 0;
  font-size:clamp(38px,5.5vw,84px);
  line-height:.95;
  letter-spacing:-.052em;
  font-weight:500;
}

.case-index,
.viewer-index{
  margin:0;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--muted);
}

.case-description{
  max-width:570px;
}

.case-description p{
  margin:0;
  font-size:15px;
  line-height:1.55;
}

.media{
  margin:0;
  overflow:hidden;
  background:#d8d6cf;
}

.media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-hero{
  width:100%;
}

.media-hero img{
  width:100%;
  height:auto;
}

.media-wide{
  margin-top:clamp(70px,8vw,130px);
}

.media-wide img{
  aspect-ratio:16/8.4;
}

.product-layout{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:clamp(22px,4vw,70px);
  align-items:start;
  margin-top:clamp(70px,8vw,130px);
}

.product-chair{
  max-width:920px;
}

.product-chair img{
  aspect-ratio:1/1;
}

.product-detail-column{
  display:flex;
  flex-direction:column;
  gap:36px;
  padding-top:8vw;
}

.micro-copy{
  max-width:390px;
  margin:0;
  font-size:clamp(18px,1.7vw,26px);
  line-height:1.35;
  letter-spacing:-.02em;
}

.product-faucet{
  width:100%;
}

.product-faucet img{
  aspect-ratio:1/1.25;
}


/* --------------------------------------------------
   ROBOT CASE
-------------------------------------------------- */

.case-dark{
  position:relative;
  margin-left:calc(var(--pad) * -1);
  margin-right:calc(var(--pad) * -1);
  background:var(--dark);
  color:#f3f2ed;
}

.case-dark-inner{
  padding:clamp(90px,10vw,150px) var(--pad);
}

.case-dark .case-header{
  border-color:var(--line-dark);
}

.case-dark .case-index{
  color:#85868a;
}

.case-dark .case-description{
  color:#b3b4b7;
}

.robot-main{
  background:#d7ddd3;
}

.robot-main img{
  width:100%;
  height:auto;
  max-height:1100px;
  object-fit:cover;
  object-position:center;
}

.robot-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}

.robot-details .media{
  background:#070707;
}

.robot-details img{
  aspect-ratio:1/1;
}


/* --------------------------------------------------
   VIDEO / ARCHVIZ
-------------------------------------------------- */

.video-frame{
  aspect-ratio:16/9;
  background:#060606;
  border:1px solid var(--line);
}

.section-dark .video-frame{
  border-color:var(--line-dark);
}

.video-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.case-link-row{
  display:flex;
  justify-content:flex-end;
  padding-top:18px;
}

.case-archviz .media-hero img{
  aspect-ratio:1/1;
  object-fit:cover;
}


/* --------------------------------------------------
   INTERACTIVE
-------------------------------------------------- */

.interactive{
  overflow:hidden;
}

.viewer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.viewer-card{
  border:1px solid var(--line-dark);
  background:#090a0b;
}

.viewer-card-head,
.viewer-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:58px;
  padding:0 18px;
}

.viewer-card-head{
  border-bottom:1px solid var(--line-dark);
}

.viewer-card-head h3{
  margin:4px 0 0;
  font-size:20px;
  font-weight:500;
  letter-spacing:-.02em;
}

.viewer-card-head>span,
.viewer-card-foot{
  color:#7f8084;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.viewer-card-foot{
  border-top:1px solid var(--line-dark);
}

model-viewer{
  width:100%;
  height:min(48vw,680px);
  min-height:520px;
  display:block;
  background:
    radial-gradient(circle at 50% 42%,#24262a 0,#151619 42%,#0c0d0f 78%);
  --poster-color:transparent;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:70px;
  border-top:1px solid var(--line-dark);
}

.feature{
  padding:26px 28px 0 0;
  border-right:1px solid var(--line-dark);
  min-height:190px;
}

.feature:last-child{
  border-right:0;
  padding-left:28px;
}

.feature:not(:first-child){
  padding-left:28px;
}

.feature span{
  font-size:10px;
  color:#777;
}

.feature h3{
  font-size:18px;
  font-weight:500;
  margin:28px 0 10px;
}

.feature p{
  font-size:13px;
  color:#88898d;
  line-height:1.55;
  max-width:240px;
}


/* --------------------------------------------------
   SYSTEMS
-------------------------------------------------- */

.system-list{
  border-top:1px solid var(--line);
}

.system-row{
  display:grid;
  grid-template-columns:70px 1fr 1.2fr 40px;
  gap:22px;
  align-items:center;
  padding:30px 0;
  border-bottom:1px solid var(--line);
  transition:padding .25s ease;
}

.system-row:hover{
  padding-left:12px;
}

.system-number{
  font-size:10px;
  color:var(--muted);
}

.system-row h3{
  font-size:clamp(22px,2.2vw,34px);
  font-weight:500;
  margin:0;
  letter-spacing:-.03em;
}

.system-row p{
  font-size:14px;
  color:var(--muted);
  line-height:1.45;
  max-width:500px;
  margin:0;
}

.system-arrow{
  font-size:24px;
  text-align:right;
}


/* --------------------------------------------------
   REEL
-------------------------------------------------- */

.reel .section-heading{
  margin-bottom:42px;
}


/* --------------------------------------------------
   ABOUT
-------------------------------------------------- */

.about-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:8vw;
}

.about-heading h2{
  font-size:clamp(46px,6vw,88px);
  margin:24px 0 0;
  font-weight:500;
  letter-spacing:-.05em;
}

.about-mark{
  width:clamp(90px,9vw,150px);
  margin-top:58px;
}

.about-copy>p{
  font-size:clamp(23px,2.6vw,39px);
  line-height:1.18;
  letter-spacing:-.03em;
  margin:0 0 30px;
}

.about-copy>p+p{
  color:var(--muted);
}

.about-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:65px;
}

.about-meta small{
  font-size:9px;
  letter-spacing:.14em;
  color:var(--muted);
  display:block;
  margin-bottom:15px;
}

.about-meta span{
  font-size:13px;
  line-height:1.6;
}


/* --------------------------------------------------
   CONTACT
-------------------------------------------------- */

.contact{
  min-height:90svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.contact-title{
  font-size:clamp(54px,8vw,124px);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:500;
  margin:28px 0 50px;
}

.contact-actions{
  display:flex;
  gap:26px;
  align-items:center;
}

.contact footer{
  margin-top:100px;
  border-top:1px solid var(--line-dark);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  color:#77787b;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}


/* --------------------------------------------------
   REVEAL
-------------------------------------------------- */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal.in{
  opacity:1;
  transform:none;
}


/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */

@media(max-width:1100px){
  .viewer-grid{
    grid-template-columns:1fr;
  }

  model-viewer{
    height:70vw;
  }
}


@media(max-width:900px){

  .nav{
    display:none;
  }

  .hero-bottom,
  .about-grid,
  .case-header{
    grid-template-columns:1fr;
  }

  .hero-actions{
    justify-content:flex-start;
  }

  .hero-meta{
    gap:16px;
    flex-wrap:wrap;
  }

  .section-heading,
  .section-heading.split{
    align-items:flex-start;
    flex-direction:column;
  }

  .section-intro{
    max-width:600px;
  }

  .product-layout{
    grid-template-columns:1fr;
  }

  .product-chair{
    max-width:none;
  }

  .product-detail-column{
    padding-top:0;
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    align-items:end;
  }

  .robot-details{
    gap:10px;
  }

  .feature-grid{
    grid-template-columns:1fr 1fr;
  }

  .feature{
    border-bottom:1px solid var(--line-dark);
  }

  .feature:nth-child(even){
    border-right:0;
  }

  .system-row{
    grid-template-columns:45px 1fr 30px;
  }

  .system-row p{
    grid-column:2/3;
  }

  .about-meta{
    grid-template-columns:1fr 1fr;
  }
}


@media(max-width:600px){

  .section-pad{
    padding-left:20px;
    padding-right:20px;
  }

  .site-header{
    padding-left:20px;
    padding-right:20px;
  }

  .brand-name{
    display:none;
  }

  .hero{
    padding-top:120px;
  }

  .hero-title{
    font-size:15vw;
  }

  .hero-bottom{
    margin-top:46px;
  }

  .hero-meta{
    margin-top:55px;
    flex-direction:column;
  }

  .case-study{
    margin-top:110px;
  }

  .case-header{
    gap:30px;
  }

  .product-detail-column{
    grid-template-columns:1fr;
  }

  .product-faucet img{
    aspect-ratio:1/1.15;
  }

  .case-dark{
    margin-left:-20px;
    margin-right:-20px;
  }

  .case-dark-inner{
    padding-left:20px;
    padding-right:20px;
  }

  .robot-details{
    grid-template-columns:1fr;
  }

  .viewer-card-head,
  .viewer-card-foot{
    padding-left:14px;
    padding-right:14px;
  }

  .viewer-card-head>span{
    display:none;
  }

  model-viewer{
    height:92vw;
    min-height:390px;
  }

  .feature-grid{
    grid-template-columns:1fr;
  }

  .feature,
  .feature:not(:first-child),
  .feature:last-child{
    padding-left:0;
    border-right:0;
  }

  .system-row{
    grid-template-columns:34px 1fr 24px;
  }

  .about-meta{
    grid-template-columns:1fr;
  }

  .contact footer{
    flex-direction:column;
    gap:8px;
  }

  .contact-actions{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* Respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  .site-header,
  .button,
  .system-row{
    transition:none;
  }
}


/* ==================================================
   V3 — COMPACT EDITORIAL PASS
   Smaller type, tighter rhythm, consistent text widths
================================================== */

:root{
  --pad:clamp(20px,3.8vw,64px);
  --max:1560px;
}

/* Keep composition controlled on ultrawide screens */
.hero > *,
.statement > *,
.work > .section-heading,
.work > .case-study:not(.case-dark),
.interactive > *,
.systems > *,
.reel > *,
.about > *,
.contact > *{
  width:100%;
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

.section-pad{
  padding-top:clamp(64px,7.5vw,112px);
  padding-bottom:clamp(64px,7.5vw,112px);
}

/* Header */
.site-header{
  padding-top:14px;
  padding-bottom:14px;
}

.brand{
  gap:10px;
  font-size:10px;
}

.brand-mark{
  width:29px;
  height:29px;
}

.nav{
  gap:24px;
  font-size:11px;
}

/* Small labels */
.eyebrow,
.hero-kicker{
  font-size:9px;
  letter-spacing:.16em;
}

.tags{
  margin-top:13px!important;
  font-size:9px!important;
}

.text-link{
  font-size:10px;
}

.button{
  min-height:42px;
  padding:0 16px;
  font-size:10px;
}

/* Hero */
.hero{
  min-height:94svh;
  padding-top:110px;
}

.hero-title{
  font-size:clamp(49px,6.9vw,108px);
  line-height:.91;
  letter-spacing:-.058em;
  margin-top:22px;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

.hero-kicker{
  max-width:1180px;
}

.hero-bottom{
  grid-template-columns:minmax(0,620px) 1fr;
  gap:45px;
  margin-top:42px;
  max-width:1180px;
}

.hero-copy{
  font-size:clamp(16px,1.45vw,22px);
  line-height:1.38;
  max-width:590px;
}

.hero-actions{
  gap:9px;
}

.hero-meta{
  max-width:1180px;
  margin-top:46px;
  padding-top:13px;
  font-size:9px;
}

/* Statement */
.statement{
  padding-top:clamp(72px,7vw,105px);
  padding-bottom:clamp(72px,7vw,105px);
}

.statement > *{
  max-width:1240px;
}

.statement-copy{
  font-size:clamp(30px,3.8vw,58px);
  line-height:1.08;
  max-width:1160px;
  margin-top:28px;
}

/* Section headers */
.section-heading{
  gap:40px;
  margin-bottom:48px;
}

.section-heading h2{
  font-size:clamp(34px,4vw,60px);
  line-height:1.02;
  letter-spacing:-.04em;
  margin-top:16px;
  max-width:860px;
}

.section-intro{
  max-width:410px;
  font-size:14px;
  line-height:1.5;
}

/* Cases */
.case-study{
  margin-top:clamp(82px,9vw,138px);
}

.case-header{
  grid-template-columns:minmax(0,1fr) minmax(300px,.52fr);
  gap:clamp(38px,6vw,90px);
  margin-bottom:30px;
  padding-top:14px;
}

.case-header h3{
  margin-top:13px;
  font-size:clamp(31px,4vw,60px);
  line-height:.98;
  letter-spacing:-.046em;
}

.case-description{
  max-width:470px;
}

.case-description p{
  font-size:13px;
  line-height:1.55;
}

.case-index,
.viewer-index{
  font-size:9px;
}

.product-layout{
  gap:clamp(22px,3vw,48px);
  margin-top:clamp(46px,5.5vw,82px);
}

.product-detail-column{
  gap:26px;
  padding-top:5.5vw;
}

.micro-copy{
  max-width:330px;
  font-size:clamp(16px,1.35vw,21px);
  line-height:1.4;
}

.media-wide{
  margin-top:clamp(46px,5.5vw,82px);
}

/* Dark case */
.case-dark-inner{
  padding-top:clamp(68px,7vw,108px);
  padding-bottom:clamp(68px,7vw,108px);
}

.case-dark-inner > *{
  width:100%;
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

.robot-details{
  gap:12px;
  margin-top:12px;
}

/* Video */
.case-link-row{
  padding-top:13px;
}

/* Interactive */
.viewer-grid{
  gap:12px;
}

.viewer-card-head,
.viewer-card-foot{
  min-height:50px;
  padding-left:15px;
  padding-right:15px;
}

.viewer-card-head h3{
  font-size:17px;
}

model-viewer{
  height:min(42vw,590px);
  min-height:470px;
}

.feature-grid{
  margin-top:48px;
}

.feature{
  min-height:158px;
  padding-top:21px;
}

.feature h3{
  font-size:16px;
  margin-top:20px;
}

.feature p{
  font-size:12px;
}

/* Systems */
.system-row{
  grid-template-columns:55px .85fr 1.15fr 30px;
  padding:23px 0;
}

.system-row h3{
  font-size:clamp(20px,1.8vw,29px);
}

.system-row p{
  font-size:12px;
}

/* About */
.about-grid{
  grid-template-columns:.72fr 1.28fr;
  gap:7vw;
}

.about-heading h2{
  font-size:clamp(40px,4.8vw,70px);
  margin-top:18px;
}

.about-mark{
  width:clamp(70px,7vw,110px);
  margin-top:40px;
}

.about-copy>p{
  font-size:clamp(19px,2vw,29px);
  line-height:1.27;
  margin-bottom:21px;
  max-width:860px;
}

.about-meta{
  margin-top:46px;
  padding-top:18px;
}

.about-meta span{
  font-size:12px;
}

/* Contact */
.contact{
  min-height:76svh;
}

.contact-title{
  font-size:clamp(45px,6.3vw,94px);
  line-height:.93;
  margin-top:22px;
  margin-bottom:38px;
}

.contact footer{
  margin-top:68px;
}

/* Tablet */
@media(max-width:900px){
  .hero-title,
  .hero-kicker,
  .hero-bottom,
  .hero-meta{
    max-width:none;
  }

  .hero{
    min-height:auto;
    padding-top:125px;
  }

  .hero-bottom{
    margin-top:36px;
  }

  .case-header{
    gap:26px;
  }

  .product-detail-column{
    padding-top:0;
  }

  model-viewer{
    min-height:420px;
  }
}

/* Phone */
@media(max-width:600px){
  :root{
    --pad:20px;
  }

  .hero-title{
    font-size:13.5vw;
  }

  .hero-copy{
    font-size:17px;
  }

  .hero-meta{
    margin-top:38px;
  }

  .section-heading{
    margin-bottom:38px;
  }

  .case-study{
    margin-top:88px;
  }

  .case-header h3{
    font-size:10.5vw;
  }

  .statement-copy{
    font-size:9.8vw;
  }

  model-viewer{
    height:88vw;
    min-height:350px;
  }

  .contact{
    min-height:68svh;
  }
}


/* ==================================================
   V4 — THREE.JS PRODUCT VIEWER
================================================== */

/* model-viewer was replaced by a custom Three.js canvas */
.viewer-stage{
  position:relative;
  aspect-ratio:1 / 1;
  min-height:520px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 43%,#2a2b2f 0,#17181b 45%,#0b0c0e 82%);
  touch-action:pan-y;
}

.viewer-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  outline:none;
}

.viewer-loading{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  pointer-events:none;
  color:#9b9ca0;
  background:rgba(11,12,14,.55);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:opacity .3s ease, visibility .3s ease;
}

.viewer-loading.is-hidden{
  opacity:0;
  visibility:hidden;
}

.viewer-loading.is-error{
  color:#d6aaa4;
}

.viewer-loading-dot{
  width:7px;
  height:7px;
  border:1px solid currentColor;
  border-radius:50%;
  animation:viewerPulse 1s ease-in-out infinite alternate;
}

@keyframes viewerPulse{
  from{opacity:.25;transform:scale(.8)}
  to{opacity:1;transform:scale(1)}
}

.viewer-toolbar{
  position:absolute;
  z-index:3;
  left:14px;
  right:14px;
  bottom:14px;
  display:grid;
  grid-template-columns:1.15fr .9fr .9fr auto;
  gap:10px;
  align-items:end;
  padding:12px;
  background:rgba(12,13,15,.82);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.viewer-control-group{
  min-width:0;
}

.viewer-control-group.is-disabled{
  opacity:.34;
}

.viewer-control-label,
.viewer-range-label>span{
  display:block;
  margin-bottom:8px;
  color:#8b8c90;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.viewer-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.viewer-swatch,
.viewer-action,
.viewer-reset{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.035);
  color:#d6d6d3;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}

.viewer-swatch{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 9px;
  font-size:9px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.viewer-swatch:hover,
.viewer-swatch.is-active,
.viewer-action:hover,
.viewer-reset:hover{
  border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.095);
  color:#fff;
}

.viewer-swatch.is-active{
  border-color:rgba(255,255,255,.7);
}

.swatch-color{
  width:13px;
  height:13px;
  display:block;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
}

.swatch-wood{
  background:linear-gradient(135deg,#b69b77,#5d4d3c);
}

.swatch-white{
  background:#e7e4dc;
}

.swatch-hauga-original{
  background:#c3aa89;
}

.swatch-hauga-light{
  background:#e9e2d6;
}

.swatch-hauga-dark{
  background:#5e554c;
}

.viewer-range-label{
  display:block;
}

.viewer-range{
  width:100%;
  min-width:95px;
  height:20px;
  margin:0;
  accent-color:#f4f3ef;
  cursor:pointer;
}

.viewer-range:disabled{
  cursor:not-allowed;
}

.viewer-action-row{
  display:flex;
  gap:6px;
}

.viewer-action{
  min-height:36px;
  padding:0 10px;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.viewer-action-primary{
  background:#f2f1ec;
  border-color:#f2f1ec;
  color:#111;
}

.viewer-action-primary:hover{
  background:#fff;
  color:#111;
}

.viewer-reset{
  position:absolute;
  z-index:3;
  top:14px;
  right:14px;
  min-height:34px;
  padding:0 10px;
  font-size:8px;
  letter-spacing:.09em;
  text-transform:uppercase;
  background:rgba(12,13,15,.66);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.viewer-note{
  display:grid;
  grid-template-columns:120px minmax(0,680px);
  gap:25px;
  align-items:start;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line-dark);
  color:#85868a;
}

.viewer-note>span{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.viewer-note p{
  margin:0;
  font-size:11px;
  line-height:1.55;
}

.viewer-debug{
  margin-top:10px;
  border:1px solid var(--line-dark);
  background:#08090a;
  color:#b9b9b6;
}

.viewer-debug summary{
  cursor:pointer;
  padding:12px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.viewer-debug-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line-dark);
}

.viewer-debug-grid>div{
  min-width:0;
  padding:12px;
  background:#0d0e10;
}

.viewer-debug strong{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.viewer-debug pre{
  max-height:280px;
  overflow:auto;
  margin:10px 0 0;
  white-space:pre-wrap;
  word-break:break-word;
  color:#8e8f93;
  font:10px/1.45 Consolas,monospace;
}

/* The old model-viewer rules are harmless but no longer used. */
.viewer-card.viewer-needs-motion-map .viewer-action-row{
  opacity:.72;
}

@media(max-width:1180px){
  .viewer-toolbar{
    grid-template-columns:1fr 1fr;
  }

  .viewer-action-row{
    justify-content:flex-end;
  }
}

@media(max-width:900px){
  .viewer-stage{
    min-height:500px;
  }
}

@media(max-width:600px){
  .viewer-stage{
    aspect-ratio:.78 / 1;
    min-height:520px;
  }

  .viewer-toolbar{
    left:10px;
    right:10px;
    bottom:10px;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px;
  }

  .viewer-materials{
    order:0;
  }

  .viewer-action-row{
    justify-content:stretch;
  }

  .viewer-action{
    flex:1;
  }

  .viewer-reset{
    top:10px;
    right:10px;
  }

  .viewer-note{
    grid-template-columns:1fr;
    gap:8px;
  }

  .viewer-debug-grid{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .viewer-loading-dot{
    animation:none;
  }
}


/* ==================================================
   V5 — LAYOUT COHERENCE + TOOL CASES
================================================== */

/* Less dead space above the hero */
.hero{
  min-height:auto;
  justify-content:flex-start;
  padding-top:clamp(112px,8.5vw,150px);
  padding-bottom:clamp(56px,5.5vw,82px);
}

.hero-kicker,
.hero-title,
.hero-bottom,
.hero-meta{
  max-width:1180px;
}

.hero-title{
  margin-top:20px;
}

.hero-bottom{
  margin-top:34px;
}

.hero-meta{
  margin-top:34px;
}

/* Descriptive copy becomes a deliberate component instead of floating text */
.copy-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.34);
  padding:18px 20px;
}

.section-dark .copy-card,
.case-dark .copy-card{
  border-color:var(--line-dark);
  background:rgba(255,255,255,.045);
}

.section-intro-card{
  max-width:430px;
  margin-bottom:0;
}

.case-description.copy-card{
  padding:18px 20px;
}

.case-description.copy-card p:first-child{
  max-width:420px;
}

.case-description.copy-card .tags{
  padding-top:13px;
  margin-top:14px!important;
  border-top:1px solid var(--line);
}

.case-dark .case-description.copy-card .tags{
  border-color:var(--line-dark);
}

/* Align the product images to the same top edge */
.product-layout{
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  align-items:start;
}

.product-detail-column{
  padding-top:0;
  gap:18px;
  align-self:start;
}

.product-faucet{
  align-self:start;
}

.product-faucet img{
  width:100%;
  aspect-ratio:1 / 1.25;
  object-fit:cover;
}

.product-copy{
  margin:0;
}

.product-copy .micro-copy{
  margin:0;
  max-width:360px;
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.42;
}

/* Keep the full character visible — no vertical crop */
.robot-main{
  max-width:920px;
  margin-left:auto!important;
  margin-right:auto!important;
  background:#d7ddd3;
}

.robot-main img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center center;
}

/* The detail images align under the centered hero character */
.robot-details{
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Systems become actual case cards */
.systems-heading{
  align-items:flex-end;
}

.systems-intro-card{
  max-width:520px;
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
}

.systems-intro-card p{
  margin:0;
}

.system-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.system-card{
  min-width:0;
  padding:26px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.26);
}

.system-card-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.system-number,
.system-type{
  color:var(--muted);
  font-size:9px;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.system-card h3{
  margin:24px 0 32px;
  font-size:clamp(25px,2.1vw,34px);
  font-weight:500;
  letter-spacing:-.035em;
}

.system-block{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:18px;
  padding:17px 0;
  border-top:1px solid var(--line);
}

.system-block small{
  padding-top:2px;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.system-block p{
  margin:0;
  max-width:520px;
  color:#575751;
  font-size:13px;
  line-height:1.55;
}

/* Old flat-list styling no longer participates */
.system-list,
.system-row{
  display:none;
}

/* A little less air between major work blocks */
.case-study{
  margin-top:clamp(72px,7.5vw,118px);
}

.section-heading{
  margin-bottom:40px;
}

/* Interactive viewer: keep the two products visually aligned */
.viewer-grid{
  align-items:start;
}

/* HAUGA current file is Almacenamiento_Hauga.glb (no _v2). */

/* --------------------------------------------------
   RESPONSIVE V5
-------------------------------------------------- */

@media(max-width:900px){
  .hero{
    padding-top:105px;
  }

  .product-layout{
    grid-template-columns:1fr;
  }

  .product-detail-column{
    display:grid;
    grid-template-columns:1fr;
  }

  .product-faucet{
    max-width:620px;
  }

  .system-grid{
    grid-template-columns:1fr;
  }

  .system-block{
    grid-template-columns:100px 1fr;
  }
}

@media(max-width:600px){
  .hero{
    padding-top:92px;
    padding-bottom:46px;
  }

  .hero-title{
    font-size:12.6vw;
  }

  .hero-bottom,
  .hero-meta{
    margin-top:28px;
  }

  .copy-card{
    padding:15px;
  }

  .robot-main{
    max-width:100%;
  }

  .system-card{
    padding:19px;
  }

  .system-card h3{
    margin:20px 0 25px;
  }

  .system-block{
    grid-template-columns:1fr;
    gap:7px;
  }
}


/* ==================================================
   V6 — IMAGE SCALE, ALIGNMENT & LIGHTBOX
================================================== */

/* Give the work more presence on large screens */
.work > .section-heading,
.work > .case-study:not(.case-dark){
  max-width:1640px;
}

/* Product grid: larger, cleaner and aligned from the same top line */
.product-layout{
  width:100%;
  max-width:1460px;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:minmax(0,1.42fr) minmax(340px,.78fr);
  gap:24px;
}

.product-chair,
.product-detail-column,
.product-faucet{
  width:100%;
  max-width:none;
}

.product-chair img,
.product-faucet img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}

.product-detail-column{
  padding-top:0;
  align-self:start;
  gap:16px;
}

/* Replace the flat rectangle with an editorial caption */
.editorial-caption{
  position:relative;
  padding:18px 0 2px;
  border-top:1px solid var(--line);
}

.editorial-caption::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:42px;
  height:1px;
  background:var(--ink);
}

.editorial-caption-label{
  display:block;
  margin-bottom:10px;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.editorial-caption .micro-copy{
  max-width:380px;
  font-size:clamp(16px,1.25vw,20px);
  line-height:1.38;
}

/* Project notes: still contained, but lighter and more editorial */
.case-description.copy-card,
.section-intro-card,
.systems-intro-card{
  position:relative;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:16px 0;
}

.case-description.copy-card::before,
.section-intro-card::before,
.systems-intro-card::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:38px;
  height:1px;
  background:currentColor;
  opacity:.8;
}

.case-dark .case-description.copy-card{
  border-color:var(--line-dark);
  background:transparent;
}

.case-description.copy-card .tags{
  margin-top:12px!important;
  padding-top:11px;
}

/* Robot hero and the two detail images now share exactly the same width */
.robot-main,
.robot-details{
  width:100%;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.robot-main img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}

.robot-details{
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px!important;
}

.robot-details .media{
  min-width:0;
}

.robot-details img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
}

/* High-resolution imagery gets subtle movement, but never loses layout precision */
.zoomable-media{
  position:relative;
  cursor:zoom-in;
  isolation:isolate;
  outline:none;
}

.zoomable-media img{
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    filter .55s cubic-bezier(.2,.7,.2,1);
}

.zoom-badge{
  position:absolute;
  z-index:2;
  right:14px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:35px;
  padding:0 11px;
  background:rgba(245,244,239,.88);
  color:#111;
  border:1px solid rgba(16,16,16,.18);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease;
}

.zoom-badge b{
  font-size:14px;
  font-weight:400;
  line-height:1;
}

.case-dark .zoom-badge{
  background:rgba(12,13,15,.8);
  color:#f5f4ef;
  border-color:rgba(255,255,255,.18);
}

.zoomable-media:focus-visible{
  outline:1px solid currentColor;
  outline-offset:4px;
}

@media(hover:hover) and (pointer:fine){
  .zoomable-media:hover img{
    transform:scale(1.012);
    filter:saturate(1.015) contrast(1.01);
  }

  .zoomable-media:hover .zoom-badge{
    opacity:1;
    transform:none;
  }
}

/* Full-screen gallery */
html.lightbox-open,
html.lightbox-open body{
  overflow:hidden;
}

.portfolio-lightbox{
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 62px;
  grid-template-rows:58px minmax(0,1fr);
  background:rgba(9,10,11,.97);
  color:#f2f1ec;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
}

.portfolio-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.portfolio-lightbox-bar{
  grid-column:1 / -1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.portfolio-lightbox-meta{
  min-width:0;
  display:flex;
  gap:18px;
  align-items:center;
}

.portfolio-lightbox-counter{
  color:#77797d;
  font-size:9px;
  letter-spacing:.12em;
}

.portfolio-lightbox-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  letter-spacing:.04em;
}

.portfolio-lightbox-actions{
  display:flex;
  gap:7px;
}

.portfolio-lightbox-actions button,
.portfolio-lightbox-nav{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background:transparent;
  color:#d7d7d4;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}

.portfolio-lightbox-actions button{
  min-height:32px;
  padding:0 10px;
  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.portfolio-lightbox-actions button:hover,
.portfolio-lightbox-nav:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.4);
}

.portfolio-lightbox-stage{
  grid-column:2;
  grid-row:2;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:24px;
}

.portfolio-lightbox-image{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 106px);
  width:auto;
  height:auto;
  object-fit:contain;
  cursor:zoom-in;
  transition:width .2s ease;
}

.portfolio-lightbox-image.is-zoomed{
  width:160%;
  max-width:none;
  max-height:none;
  cursor:zoom-out;
}

.portfolio-lightbox-nav{
  grid-row:2;
  align-self:stretch;
  border:0;
  font-size:20px;
}

.portfolio-lightbox-prev{
  grid-column:1;
  border-right:1px solid rgba(255,255,255,.08);
}

.portfolio-lightbox-next{
  grid-column:3;
  border-left:1px solid rgba(255,255,255,.08);
}

/* Keep full-width supporting images aligned to the same visual grid */
.media-wide{
  width:100%;
  max-width:1460px;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:900px){
  .product-layout{
    max-width:none;
    grid-template-columns:1fr;
    gap:14px;
  }

  .editorial-caption{
    max-width:620px;
  }

  .robot-main,
  .robot-details{
    max-width:100%!important;
  }

  .portfolio-lightbox{
    grid-template-columns:46px minmax(0,1fr) 46px;
  }
}

@media(max-width:600px){
  .robot-details{
    grid-template-columns:1fr;
  }

  .portfolio-lightbox{
    grid-template-columns:1fr;
    grid-template-rows:54px minmax(0,1fr) 48px;
  }

  .portfolio-lightbox-bar{
    grid-column:1;
    padding:0 12px;
  }

  .portfolio-lightbox-title{
    display:none;
  }

  .portfolio-lightbox-stage{
    grid-column:1;
    grid-row:2;
    padding:12px;
  }

  .portfolio-lightbox-prev,
  .portfolio-lightbox-next{
    grid-row:3;
    border-top:1px solid rgba(255,255,255,.1);
  }

  .portfolio-lightbox-prev{
    grid-column:1;
    width:50%;
    justify-self:start;
    border-right:1px solid rgba(255,255,255,.1);
  }

  .portfolio-lightbox-next{
    grid-column:1;
    width:50%;
    justify-self:end;
    border-left:1px solid rgba(255,255,255,.1);
  }

  .portfolio-lightbox-image.is-zoomed{
    width:210%;
  }
}

@media(prefers-reduced-motion:reduce){
  .zoomable-media img,
  .zoom-badge,
  .portfolio-lightbox{
    transition:none;
  }
}


/* ==================================================
   V6.1 — HAUGA EXACT MOTION CONTROLS
================================================== */

.viewer-card[data-viewer-id="hauga"] .viewer-toolbar{
  grid-template-columns:1.15fr .82fr .82fr .82fr auto;
}

@media(max-width:1320px){
  .viewer-card[data-viewer-id="hauga"] .viewer-toolbar{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){
  .viewer-card[data-viewer-id="hauga"] .viewer-toolbar{
    grid-template-columns:1fr;
  }
}


/* ==================================================
   V6.2 — EMBEDDED ANIMATION ONLY
================================================== */

/* If a GLB does not contain a matching animation clip,
   the corresponding control disappears instead of offering
   a fake/procedural movement. */
.viewer-control-group.is-unavailable,
.viewer-action-row.is-unavailable{
  display:none!important;
}


/* ==================================================
   V6.3 — TOUCHABLE ANIMATIONS + ORIGINAL HAUGA PBR
================================================== */

.viewer-material-note{
  align-self:end;
  min-width:100px;
}

.viewer-material-note span{
  display:block;
  margin-bottom:8px;
  color:#8b8c90;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.viewer-material-note strong{
  display:block;
  min-height:36px;
  padding:11px 10px 0;
  border:1px solid rgba(255,255,255,.16);
  color:#d6d6d3;
  font-size:8px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.viewer-canvas{
  cursor:grab;
  touch-action:none;
}

.viewer-canvas:active{
  cursor:grabbing;
}

.viewer-control-group.is-unavailable,
.viewer-action-row.is-unavailable{
  display:none!important;
}

/* HAUGA no longer reserves a large fake material selector */
.viewer-card[data-viewer-id="hauga"] .viewer-toolbar{
  grid-template-columns:.72fr 1fr 1fr 1fr auto;
}

@media(max-width:1320px){
  .viewer-card[data-viewer-id="hauga"] .viewer-toolbar{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){
  .viewer-card[data-viewer-id="hauga"] .viewer-toolbar{
    grid-template-columns:1fr;
  }

  .viewer-canvas{
    touch-action:none;
  }
}


/* ==================================================
   V6.4 — IMAGE COMPARE / LAMP
================================================== */

.compare-media{
  overflow:visible;
}

.image-compare{
  --compare-position:50%;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#e8e5df;
  cursor:ew-resize;
  user-select:none;
  touch-action:none;
  isolation:isolate;
}

.image-compare img{
  display:block;
  width:100%;
  height:auto;
}

.image-compare-base{
  position:relative;
  z-index:0;
}

.image-compare-after{
  position:absolute;
  z-index:1;
  inset:0;
  width:var(--compare-position);
  overflow:hidden;
  pointer-events:none;
}

.image-compare-after img{
  width:100vw;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:left center;
}

/* Keep the final image locked to the exact dimensions of the base image */
.image-compare{
  container-type:inline-size;
}

.image-compare-after img{
  width:100cqw;
}

.image-compare-divider{
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  left:var(--compare-position);
  width:1px;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
  transform:translateX(-.5px);
  pointer-events:none;
}

.image-compare-handle{
  position:absolute;
  top:50%;
  left:50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(245,244,239,.9);
  color:#111;
  border:1px solid rgba(16,16,16,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,.1);
}

.image-compare-handle span{
  transform:translateY(-1px);
  font-size:15px;
  line-height:1;
}

.image-compare-label{
  position:absolute;
  z-index:4;
  top:14px;
  padding:7px 9px;
  border:1px solid rgba(16,16,16,.12);
  background:rgba(245,244,239,.76);
  color:#111;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  pointer-events:none;
}

.image-compare-label-left{
  left:14px;
}

.image-compare-label-right{
  right:14px;
}

.image-compare-range{
  position:absolute;
  z-index:5;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
}

.compare-media.zoomable-media{
  cursor:default;
}

.compare-media .zoom-badge{
  display:none!important;
}

@media(max-width:600px){
  .image-compare-handle{
    width:38px;
    height:38px;
  }

  .image-compare-label{
    top:10px;
  }

  .image-compare-label-left{
    left:10px;
  }

  .image-compare-label-right{
    right:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .image-compare-handle{
    transition:none;
  }
}


/* ==================================================
   V6.5 — ALIGNMENT, DENSITY & VIEWER FOCUS
================================================== */

/* Use one editorial width across Product and Interactive sections */
.product-layout,
.media-wide,
.interactive > .section-heading,
.interactive > .viewer-grid,
.interactive > .viewer-note,
.interactive > .feature-grid{
  width:100%;
  max-width:1460px;
  margin-left:auto;
  margin-right:auto;
}

/* Pull the interactive section together */
.interactive{
  padding-top:clamp(68px,6vw,94px);
  padding-bottom:clamp(68px,6vw,94px);
}

.interactive .section-heading{
  margin-bottom:28px;
}

.viewer-grid{
  gap:8px;
}

.viewer-card-head{
  min-height:46px;
}

.viewer-card-foot{
  min-height:40px;
}

.viewer-stage{
  aspect-ratio:1.08 / 1;
  min-height:440px;
}

.viewer-toolbar{
  left:10px;
  right:10px;
  bottom:10px;
  gap:8px;
  padding:9px;
}

.viewer-reset{
  top:10px;
  right:10px;
  min-height:31px;
}

.viewer-card{
  transition:
    border-color .25s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

@media(hover:hover) and (pointer:fine){
  .viewer-card:hover{
    border-color:rgba(255,255,255,.24);
    transform:translateY(-2px);
    box-shadow:0 18px 46px rgba(0,0,0,.12);
  }
}

/* HAUGA real material swatches */
.swatch-hauga-wood{
  background:linear-gradient(135deg,#c8a06d,#72553b);
}

.swatch-hauga-white{
  background:#b3b3b3;
}

/* Slightly clearer tactile cue without looking game-like */
.viewer-canvas{
  cursor:grab;
}

.viewer-canvas:active{
  cursor:grabbing;
}

/* Controls remain compact even when Drawers becomes available */
.viewer-card[data-viewer-id="hauga"] .viewer-toolbar{
  grid-template-columns:1.05fr .82fr .82fr .82fr auto;
}

.viewer-card[data-viewer-id="tonstad"] .viewer-toolbar{
  grid-template-columns:1.1fr .88fr .88fr auto;
}

@media(max-width:1320px){
  .viewer-card[data-viewer-id="hauga"] .viewer-toolbar,
  .viewer-card[data-viewer-id="tonstad"] .viewer-toolbar{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:900px){
  .interactive > .section-heading,
  .interactive > .viewer-grid,
  .interactive > .viewer-note,
  .interactive > .feature-grid{
    max-width:none;
  }

  .viewer-stage{
    min-height:480px;
    aspect-ratio:1 / 1;
  }
}

@media(max-width:600px){
  .viewer-stage{
    min-height:520px;
    aspect-ratio:.78 / 1;
  }

  .viewer-card[data-viewer-id="hauga"] .viewer-toolbar,
  .viewer-card[data-viewer-id="tonstad"] .viewer-toolbar{
    grid-template-columns:1fr;
  }
}


/* ==================================================
   V6.6 — HIGH-RES DETAIL LENS + DRAWER FEEDBACK
================================================== */

/* Keep the product grid visually taut. */
.product-layout{
  gap:18px;
}

.product-detail-column{
  gap:12px;
}

.has-detail-lens{
  position:relative;
}

/* The lens replaces the old tiny hover scale as the detail interaction. */
@media(hover:hover) and (pointer:fine){
  .has-detail-lens:hover > img{
    transform:none!important;
    filter:none!important;
  }
}

.detail-lens{
  position:absolute;
  z-index:8;
  width:168px;
  height:168px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.92);
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  border:1px solid rgba(255,255,255,.84);
  background-repeat:no-repeat;
  background-color:#f2f1ec;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.16),
    0 18px 46px rgba(0,0,0,.18);
  transition:
    opacity .16s ease,
    transform .18s cubic-bezier(.2,.7,.2,1);
}

.detail-lens.is-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.detail-lens-ratio{
  position:absolute;
  right:14px;
  bottom:11px;
  display:inline-block;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(12,13,15,.62);
  color:#f3f2ed;
  font-size:8px;
  line-height:1;
  letter-spacing:.08em;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.case-dark .detail-lens{
  border-color:rgba(255,255,255,.72);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 20px 50px rgba(0,0,0,.34);
}

@media(max-width:900px){
  .product-layout{
    gap:14px;
  }
}


/* ==================================================
   V6.7 — STRICT EDITORIAL GRID + SCALE / LEADERSHIP
================================================== */

:root{
  --work-grid:1460px;
  --work-gap:12px;
}

/* --------------------------------------------------
   PRODUCT GRID — EVERY EDGE NOW LINES UP
-------------------------------------------------- */

.case-product > .case-header,
.case-product > .media-hero,
.case-product > .product-layout,
.case-product > .media-wide{
  width:100%;
  max-width:var(--work-grid);
  margin-left:auto;
  margin-right:auto;
}

.case-product > .media-hero{
  margin-top:0;
}

.product-layout{
  display:grid;
  grid-template-columns:minmax(0,1.52fr) minmax(300px,.78fr);
  gap:var(--work-gap);
  align-items:stretch;
  margin-top:var(--work-gap);
}

/* The left image defines the row height. The right column stretches to match it. */
.product-chair{
  height:100%;
}

.product-chair img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.product-detail-column{
  min-height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:var(--work-gap);
  padding:0;
}

.product-faucet{
  min-height:0;
  height:100%;
}

.product-faucet img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.editorial-caption{
  min-height:92px;
  padding:14px 0 0;
}

.editorial-caption .micro-copy{
  max-width:390px;
  font-size:clamp(14px,1.05vw,18px);
}

.media-wide{
  margin-top:var(--work-gap);
}

/* The lamp compare, secondary grid and lower image share exactly the same width. */
.case-product .image-compare,
.case-product .media-wide img{
  width:100%;
}

/* Slightly denser spacing around the visual sequence. */
.case-product{
  margin-bottom:0;
}

/* --------------------------------------------------
   SCALE / LEADERSHIP
-------------------------------------------------- */

.scale{
  background:var(--paper-soft);
  overflow:hidden;
}

.scale > *{
  width:100%;
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

.scale-heading{
  margin-bottom:42px;
}

.scale-heading .section-intro{
  color:#62615c;
}

.scale-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.scale-card{
  position:relative;
  min-height:360px;
  padding:26px 28px 30px 0;
  border-right:1px solid var(--line);
}

.scale-card:not(:first-child){
  padding-left:28px;
}

.scale-card:last-child{
  border-right:0;
}

.scale-number{
  display:block;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.12em;
}

.scale-card h3{
  margin:42px 0 22px;
  font-size:clamp(25px,2.15vw,36px);
  line-height:1.03;
  font-weight:500;
  letter-spacing:-.038em;
}

.scale-card p{
  max-width:390px;
  margin:0;
  color:#5d5c57;
  font-size:13px;
  line-height:1.58;
}

.scale-footer{
  display:flex;
  justify-content:space-between;
  gap:28px;
  padding-top:17px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* --------------------------------------------------
   MAGNIFIER — subtle premium treatment
-------------------------------------------------- */

.detail-lens{
  width:176px;
  height:176px;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 16px 38px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(0,0,0,.10);
  background-color:#eee;
}

.detail-lens::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  pointer-events:none;
}

.detail-lens-ratio{
  right:14px;
  bottom:12px;
}

/* --------------------------------------------------
   INTERACTIVE — same width rhythm as product images
-------------------------------------------------- */

.interactive > .section-heading,
.interactive > .viewer-grid,
.interactive > .viewer-note,
.interactive > .feature-grid{
  max-width:var(--work-grid);
}

.viewer-grid{
  gap:var(--work-gap);
}

/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */

@media(max-width:1000px){
  .product-layout{
    grid-template-columns:1.25fr .75fr;
  }

  .scale-grid{
    grid-template-columns:1fr;
  }

  .scale-card,
  .scale-card:not(:first-child){
    min-height:0;
    padding:24px 0 28px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .scale-card:last-child{
    border-bottom:0;
  }

  .scale-card h3{
    margin-top:24px;
  }
}

@media(max-width:720px){
  .product-layout{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:10px;
  }

  .product-chair img,
  .product-faucet img{
    height:auto;
    object-fit:contain;
  }

  .product-detail-column{
    gap:10px;
  }

  .media-wide{
    margin-top:10px;
  }

  .scale-footer{
    flex-direction:column;
    gap:8px;
  }
}


/* ==================================================
   V6.8 — DRAWER RANGE / RMB PAN / LARGE DETAIL LENS
================================================== */

/* Right mouse drag is reserved for OrbitControls pan. */
.viewer-canvas{
  user-select:none;
  -webkit-user-select:none;
}

/* 100% larger than the previous 176px detail lens. */
.detail-lens{
  width:352px;
  height:352px;
  border-width:1px;
  box-shadow:
    0 24px 58px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(0,0,0,.10);
}

.detail-lens::after{
  inset:14px;
}

.detail-lens-ratio{
  right:20px;
  bottom:18px;
  padding:5px 7px;
  font-size:9px;
}

@media(max-width:1200px){
  .detail-lens{
    width:300px;
    height:300px;
  }
}

@media(max-width:900px){
  .detail-lens{
    display:none!important;
  }
}


/* ==================================================
   V6.10 — MOBILE PASS
   Desktop composition remains unchanged.
================================================== */

.viewer-viewport{
  position:absolute;
  inset:0;
}

@media(max-width:700px){

  :root{
    --pad:18px;
  }

  body{
    overflow-x:hidden;
  }

  /* Avoid the fixed logo duplicating/overlapping content deep in the page. */
  .site-header{
    position:absolute;
    padding:14px 18px;
    mix-blend-mode:normal;
    color:var(--ink);
  }

  .brand-mark{
    width:29px;
    height:29px;
  }

  .nav{
    display:none;
  }

  .section-pad{
    padding-left:18px;
    padding-right:18px;
  }

  .section-heading,
  .section-heading.split{
    display:block;
    margin-bottom:28px;
  }

  .section-heading h2{
    max-width:none;
    margin-top:10px;
    font-size:clamp(38px,11.2vw,50px);
    line-height:.98;
  }

  .section-intro{
    max-width:none;
    margin-top:18px;
    font-size:14px;
    line-height:1.48;
  }

  .case-study{
    margin-top:70px;
  }

  /* Case-study headers: title first, description underneath. */
  .case-header{
    display:block;
    width:100%;
    margin-bottom:22px;
    padding-top:13px;
  }

  .case-header h3{
    max-width:100%;
    margin:10px 0 0;
    font-size:clamp(40px,12vw,52px);
    line-height:.92;
    letter-spacing:-.05em;
    overflow-wrap:normal;
    word-break:normal;
  }

  .case-description.copy-card{
    width:100%;
    max-width:none;
    margin-top:20px;
    padding:14px 0;
  }

  .case-description p{
    font-size:14px;
    line-height:1.48;
  }

  .case-description .tags{
    font-size:8px;
    line-height:1.55;
  }

  .case-archviz .case-header h3{
    font-size:clamp(38px,10.8vw,48px);
    line-height:.94;
  }

  .case-video .case-header h3{
    font-size:clamp(42px,12vw,54px);
  }

  .video-frame{
    margin-top:0;
  }

  .case-link-row{
    padding-top:12px;
  }

  /* ABOUT */
  .about{
    padding-top:72px;
    padding-bottom:72px;
  }

  .about-grid{
    display:block;
  }

  .about-heading{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "mark name";
    column-gap:16px;
    align-items:end;
  }

  .about-heading .eyebrow{
    grid-area:eyebrow;
    margin-bottom:18px;
  }

  .about-mark{
    grid-area:mark;
    width:64px;
    margin:0;
  }

  .about-heading h2{
    grid-area:name;
    margin:0;
    font-size:clamp(46px,13vw,60px);
    line-height:.86;
    letter-spacing:-.055em;
  }

  .about-copy{
    margin-top:34px;
  }

  .about-copy > p{
    max-width:none;
    margin-bottom:21px;
    font-size:clamp(22px,6.2vw,28px);
    line-height:1.18;
  }

  .about-copy > p + p{
    font-size:clamp(20px,5.7vw,25px);
  }

  .about-meta{
    grid-template-columns:1fr 1fr;
    gap:28px 18px;
    margin-top:36px;
  }

  .about-meta > div:last-child{
    grid-column:1 / -1;
  }

  /* INTERACTIVE 3D */
  .interactive{
    padding-top:64px;
    padding-bottom:68px;
  }

  .interactive .section-heading{
    margin-bottom:24px;
  }

  .viewer-grid{
    display:block;
  }

  .viewer-card{
    margin-bottom:16px;
    transform:none!important;
    box-shadow:none!important;
  }

  .viewer-card-head{
    min-height:58px;
    padding:10px 12px;
  }

  .viewer-card-head h3{
    font-size:18px;
  }

  .viewer-card-head > span{
    display:block;
    font-size:8px;
  }

  .viewer-stage{
    display:flex;
    flex-direction:column;
    min-height:0!important;
    aspect-ratio:auto!important;
    overflow:visible;
    background:#0b0c0e;
  }

  .viewer-viewport{
    position:relative;
    inset:auto;
    width:100%;
    height:72vw;
    min-height:300px;
    max-height:410px;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 43%,#2a2b2f 0,#17181b 45%,#0b0c0e 82%);
  }

  .viewer-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  .viewer-reset{
    top:10px;
    right:10px;
  }

  .viewer-toolbar,
  .viewer-card[data-viewer-id="hauga"] .viewer-toolbar,
  .viewer-card[data-viewer-id="tonstad"] .viewer-toolbar{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    display:grid;
    grid-template-columns:1fr!important;
    gap:12px;
    margin:0;
    padding:14px 12px;
    background:#0d0e10;
    border:0;
    border-top:1px solid rgba(255,255,255,.12);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .viewer-swatches{
    flex-wrap:nowrap;
  }

  .viewer-swatch{
    min-height:42px;
    flex:1;
    justify-content:center;
  }

  .viewer-range{
    height:28px;
  }

  .viewer-action-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .viewer-action{
    min-height:46px;
  }

  .viewer-card-foot{
    min-height:46px;
    padding:10px 12px;
    gap:12px;
  }

  .viewer-card-foot span:first-child{
    max-width:78%;
    line-height:1.45;
  }

  .viewer-note{
    grid-template-columns:1fr;
    gap:7px;
    margin-top:14px;
  }

  .feature-grid{
    grid-template-columns:1fr;
    margin-top:28px;
  }

  .feature,
  .feature:not(:first-child),
  .feature:last-child{
    min-height:0;
    padding:22px 0 28px;
    border-right:0;
  }

  /* SCALE / SYSTEMS */
  .scale{
    padding-top:64px;
    padding-bottom:64px;
  }

  .scale-heading{
    margin-bottom:28px;
  }

  .scale-card h3{
    font-size:30px;
  }

  .system-card{
    padding:18px;
  }

  .system-card h3{
    font-size:28px;
  }

  /* CONTACT */
  .contact{
    min-height:auto;
    padding-top:78px;
    padding-bottom:34px;
  }

  .contact-title{
    font-size:clamp(48px,13vw,62px);
    margin-bottom:30px;
  }

  .contact footer{
    margin-top:62px;
  }
}

@media(max-width:390px){
  .case-header h3{
    font-size:42px;
  }

  .about-heading{
    grid-template-columns:54px minmax(0,1fr);
    column-gap:13px;
  }

  .about-mark{
    width:54px;
  }

  .about-heading h2{
    font-size:46px;
  }

  .about-meta{
    grid-template-columns:1fr;
  }

  .about-meta > div:last-child{
    grid-column:auto;
  }

  .viewer-viewport{
    height:78vw;
    min-height:292px;
  }
}


/* ==================================================
   V6.11 — CONTACT SPACING
================================================== */

/* The contact section was too tall on desktop and created a large dead area
   above the actual CTA. Keep some breathing room, but make it feel intentional. */
@media(min-width:701px){
  .contact{
    min-height:58svh;
    padding-top:clamp(64px,6vw,92px);
    padding-bottom:clamp(28px,3.5vw,48px);
  }

  .contact-title{
    margin-top:18px;
    margin-bottom:30px;
  }

  .contact footer{
    margin-top:46px;
  }
}


/* ==================================================
   V6.12 — SELECTED CLIENTS & COLLABORATIONS
================================================== */

.clients-strip{
  background:var(--paper);
  padding-top:34px;
  padding-bottom:44px;
  border-bottom:1px solid var(--line);
}

.clients-strip-head{
  width:100%;
  max-width:var(--max);
  margin:0 auto 22px;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-end;
}

.clients-strip-copy{
  max-width:470px;
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.clients-logos{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.client-logo{
  position:relative;
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
  border-right:1px solid var(--line);
  overflow:hidden;
}

.client-logo:last-child{
  border-right:0;
}

.client-logo img{
  display:block;
  max-width:100%;
  max-height:44px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(0);
  opacity:.56;
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.client-logo-paramount img{
  max-height:58px;
}

.client-logo-audi img{
  max-height:34px;
}

.client-logo-ilm img{
  max-height:50px;
}

.client-logo-chanel img{
  max-height:30px;
}

.client-logo-word{
  color:#2d2d2b;
  opacity:.62;
  font-size:clamp(15px,1.1vw,19px);
  font-weight:600;
  letter-spacing:.08em;
  text-align:center;
}

.client-logo-lithodomos{
  letter-spacing:.13em;
}

.client-logo-fallback{
  display:none;
  color:#2d2d2b;
  opacity:.62;
  font-size:12px;
  font-weight:600;
  letter-spacing:.07em;
  text-align:center;
}

.client-logo img[src=""],
.client-logo img:not([src]){
  display:none;
}

.client-logo img[src=""] + .client-logo-fallback,
.client-logo img:not([src]) + .client-logo-fallback{
  display:block;
}

@media(hover:hover) and (pointer:fine){
  .client-logo:hover img{
    opacity:.88;
    transform:scale(1.025);
  }

  .client-logo-word:hover{
    opacity:.88;
  }
}

@media(max-width:1000px){
  .clients-logos{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .client-logo{
    min-height:104px;
    border-bottom:1px solid var(--line);
  }

  .client-logo:nth-child(3n){
    border-right:0;
  }

  .client-logo:nth-last-child(-n+3){
    border-bottom:0;
  }
}

@media(max-width:700px){
  .clients-strip{
    padding-top:28px;
    padding-bottom:34px;
  }

  .clients-strip-head{
    display:block;
    margin-bottom:16px;
  }

  .clients-strip-copy{
    max-width:none;
    margin-top:10px;
    font-size:10px;
  }

  .clients-logos{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .client-logo{
    min-height:86px;
    padding:18px 14px;
  }

  .client-logo:nth-child(3n){
    border-right:1px solid var(--line);
  }

  .client-logo:nth-child(2n){
    border-right:0;
  }

  .client-logo:nth-last-child(-n+3){
    border-bottom:1px solid var(--line);
  }

  .client-logo:nth-last-child(-n+2){
    border-bottom:0;
  }

  .client-logo-paramount img{
    max-height:48px;
  }

  .client-logo-ilm img{
    max-height:40px;
  }

  .client-logo-word{
    font-size:14px;
  }
}


/* ==================================================
   V6.14 — CLIENT LOGOS FIX
   No external logo CDN. Self-contained monochrome lockups.
================================================== */

.clients-logos .client-logo img,
.clients-logos .client-logo-fallback{
  display:none!important;
}

.client-logo{
  color:#5d5c58;
}

.brand-lockup{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  opacity:.84;
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.brand-lockup .brand-main,
.brand-lockup .brand-sub{
  display:block;
}

/* PARAMOUNT: editorial wordmark rather than a broken remote SVG */
.brand-paramount{
  flex-direction:column;
  gap:2px;
  line-height:1;
}

.brand-paramount .brand-main{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(19px,1.55vw,27px);
  font-style:italic;
  letter-spacing:-.045em;
}

.brand-paramount .brand-sub{
  font-size:7px;
  font-weight:600;
  letter-spacing:.24em;
}

/* AUDI: exact visual idea of the four rings, drawn locally in CSS */
.brand-audi{
  display:flex;
  gap:-1px;
  height:38px;
}

.brand-audi .audi-ring{
  display:block;
  width:35px;
  height:35px;
  margin-left:-7px;
  border:2.2px solid currentColor;
  border-radius:50%;
}

.brand-audi .audi-ring:first-child{
  margin-left:0;
}

/* ILM: compact studio monogram + full name */
.brand-ilm{
  flex-direction:column;
  gap:4px;
}

.brand-ilm .brand-main{
  font-size:clamp(25px,2vw,34px);
  line-height:.86;
  font-weight:700;
  letter-spacing:-.07em;
}

.brand-ilm .brand-sub{
  font-size:6.5px;
  font-weight:600;
  letter-spacing:.11em;
  white-space:nowrap;
}

/* CHANEL / 4D / LITHODOMOS: restrained wordmarks */
.brand-chanel span{
  font-size:clamp(16px,1.35vw,22px);
  font-weight:600;
  letter-spacing:.18em;
}

.brand-4d span{
  font-size:clamp(15px,1.25vw,20px);
  font-weight:650;
  letter-spacing:.06em;
}

.brand-lithodomos span{
  font-size:clamp(14px,1.18vw,19px);
  font-weight:600;
  letter-spacing:.13em;
}

@media(hover:hover) and (pointer:fine){
  .client-logo:hover .brand-lockup{
    opacity:1;
    transform:translateY(-1px);
  }
}

@media(max-width:700px){
  .brand-audi{
    transform:scale(.86);
  }

  .brand-ilm .brand-sub{
    font-size:5.8px;
  }

  .brand-paramount .brand-main{
    font-size:20px;
  }

  .brand-chanel span,
  .brand-4d span,
  .brand-lithodomos span{
    font-size:13px;
  }
}

/* ==================================================
   V6.16 — MOBILE VIEWER / ABOUT / CONCRETE INSERT
================================================== */

@media(max-width:700px){
  .site-header{
    position:absolute;
    padding:14px 18px;
    mix-blend-mode:normal;
    color:var(--ink);
  }

  .site-header .brand-mark{
    filter:invert(1);
  }

  .hero-copy{
    font-size:15px;
    line-height:1.42;
    max-width:26ch;
  }

  .about-heading{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "mark name";
    column-gap:16px;
    align-items:center;
  }

  .about-mark{
    width:64px;
    margin:0;
    align-self:center;
  }

  .about-heading h2{
    margin:0;
    font-size:clamp(44px,12vw,58px);
    line-height:.88;
    letter-spacing:-.055em;
    transform:translateY(-1px);
  }

  .about-copy > p{
    font-size:clamp(17px,4.9vw,22px);
    line-height:1.24;
    margin-bottom:18px;
  }

  .about-copy > p + p{
    font-size:clamp(16px,4.5vw,20px);
    line-height:1.28;
    color:var(--muted);
  }

  .viewer-stage{
    overflow:hidden;
  }

  .viewer-viewport{
    height:68vw;
    min-height:290px;
    max-height:400px;
  }
}

@media(max-width:390px){
  .about-heading{
    grid-template-columns:54px minmax(0,1fr);
    column-gap:13px;
  }

  .about-mark{
    width:54px;
  }

  .about-heading h2{
    font-size:44px;
  }

  .hero-copy{
    font-size:14px;
  }

  .viewer-viewport{
    height:74vw;
    min-height:286px;
  }
}