@font-face {
  font-family:"Libre Caslon Display";
  src:url("assets/typography/LibreCaslonDisplay-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap
}

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  --blue:#2f3c74;
  --off:#f6f4ef;
  --white:#fff;
  --ink:#16191d;
  --red:#b32020;
  --line:rgba(22,25,29,.18);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",Arial,sans-serif;
  --space-2xs:clamp(0.5rem,0.4rem + 0.3vw,0.75rem);
  --space-xs:clamp(0.75rem,0.6rem + 0.5vw,1rem);
  --space-sm:clamp(1rem,0.8rem + 0.8vw,1.5rem);
  --space-md:clamp(1.5rem,1.1rem + 1.5vw,2.5rem);
  --space-lg:clamp(2.5rem,1.8rem + 2.5vw,4.5rem);
  --space-xl:clamp(4rem,3rem + 4vw,7rem);
  --space-2xl:clamp(5.5rem,4rem + 6vw,10rem);
  --page-gutter:clamp(1.25rem,4vw,5rem);
  --content-width:1240px;
  --text-width:680px;
  --section-padding:clamp(5rem,10vw,9rem);
  --floating-contact-safe-area:clamp(220px,16vw,300px)
}

/* ==========================================================================
   Reset and global elements
   ========================================================================== */

* {
  box-sizing:border-box
}

html {
  width:100%;
  max-width:100%;
  overflow-x:clip;
  scroll-behavior:smooth
}

body {
  width:100%;
  max-width:100%;
  margin:0;
  overflow-x:clip;
  background:var(--off);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  --scroll-progress:0
}

@supports not (overflow:clip) {
  html,body {
    overflow-x:hidden
  }
}

body::before {
  content:"";
  position:fixed;
  z-index:100;
  top:0;
  right:0;
  left:0;
  height:2px;
  background:var(--off);
  transform:scaleX(var(--scroll-progress));
  transform-origin:left center;
  pointer-events:none;
  will-change:transform
}

body.menu-open {
  overflow:hidden
}

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

img,video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

.container {
  width:min(100% - (var(--page-gutter) * 2),var(--content-width));
  margin-inline:auto
}

.section {
  padding-block:var(--section-padding)
}

/* ==========================================================================
   Header and brand
   ========================================================================== */

.site-header {
  position:fixed;
  z-index:30;
  top:0;
  left:0;
  width:100%;
  padding:var(--space-sm) var(--page-gutter);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:white
}

.brand {
  display:block;
  width:clamp(128px,11vw,174px);
  height:64px;
  overflow:hidden;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
  transition:opacity .35s ease,visibility .35s ease
}

.brand.is-outside-hero {
  visibility:hidden;
  opacity:0;
  pointer-events:none
}

.brand img {
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.6)
}

.menu-toggle {
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  display:grid;
  align-content:center;
  gap:calc(var(--space-2xs) / 2);
  cursor:pointer;
  color:inherit;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))
}

.menu-toggle span {
  display:block;
  width:34px;
  height:1px;
  background:currentColor;
  transition:transform .35s,opacity .25s
}

.menu-open .menu-toggle span:first-child {
  transform:translateY(7px) rotate(45deg)
}

.menu-open .menu-toggle span:nth-child(2) {
  opacity:0
}

.menu-open .menu-toggle span:last-child {
  transform:translateY(-7px) rotate(-45deg)
}

/* ==========================================================================
   Navigation panel
   ========================================================================== */

.menu-panel {
  position:fixed;
  inset:0 0 0 auto;
  width:min(560px,100%);
  z-index:20;
  background:rgba(18,22,35,.42);
  -webkit-backdrop-filter:blur(28px) saturate(.82);
  backdrop-filter:blur(28px) saturate(.82);
  color:white;
  padding:var(--space-2xl) var(--page-gutter) var(--space-lg);
  visibility:hidden;
  transform:translateX(100%);
  transition:transform .7s cubic-bezier(.77,0,.18,1),visibility 0s linear .7s;
  display:flex;
  flex-direction:column
}

.menu-open .menu-panel {
  visibility:visible;
  transform:none;
  transition-delay:0s
}

.menu-meta,.menu-foot {
  font-size:10px;
  line-height:1.7;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.65
}

.menu-panel nav {
  display:flex;
  flex-direction:column;
  margin:auto 0
}

.menu-panel nav a {
  font:400 clamp(42px,6vw,72px)/1.02 var(--serif);
  padding:calc(var(--space-2xs) / 2) 0;
  transition:opacity .25s,transform .25s
}

.menu-panel nav a:hover {
  opacity:.55;
  transform:translateX(8px)
}

/* ========================================================================== 
   Persistent contact action
   ========================================================================== */

.floating-contact {
  position:fixed;
  z-index:18;
  right:3.5vw;
  bottom:32px;
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  padding:var(--space-xs) var(--space-sm);
  border:1px solid rgba(255,255,255,.48);
  border-radius:999px;
  background:rgba(47,60,116,.9);
  color:white;
  box-shadow:0 8px 28px rgba(8,12,25,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:9px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  scale:.9;
  transform-origin:right bottom;
  transition:transform .35s ease,background .35s ease,border-color .35s ease
}

.floating-contact__icon {
  display:grid;
  width:25px;
  height:25px;
  flex:0 0 25px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  transition:transform .35s ease
}

.floating-contact:hover {
  transform:translateY(-3px);
  background:var(--blue);
  border-color:white
}

.floating-contact:hover .floating-contact__icon {
  transform:scale(1.08)
}

.menu-open .floating-contact {
  opacity:0;
  pointer-events:none
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position:relative;
  height:100svh;
  min-height:650px;
  color:white;
  overflow:hidden
}

.hero video {
  position:absolute;
  inset:0
}

.hero-shade {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 82% 88% at 18% 66%,rgba(7,9,16,.68),transparent 72%),linear-gradient(90deg,rgba(9,11,19,.48),rgba(9,11,19,.04) 72%),linear-gradient(0deg,rgba(5,6,10,.38),transparent 48%)
}

.hero-copy {
  position:absolute;
  left:var(--page-gutter);
  bottom:11vh;
  max-width:960px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11.5px;
  font-weight:500;
  margin:0 0 var(--space-sm)
}

.hero-copy .eyebrow {
  --hero-enter-opacity:.85;
  margin:0 0 clamp(1rem,1.5vw,1.4rem);
  font-size:clamp(.72rem,.8vw,.9rem);
  font-weight:400;
  letter-spacing:.18em;
  opacity:.85
}

.eyebrow.dark {
  color:var(--blue)
}

h1,h2,h3,p {
  margin-top:0
}

.hero h1 {
  max-width:min(900px,72vw);
  margin:0;
  color:#fff;
  font:400 clamp(64px,5.3vw,96px)/.92 "Libre Caslon Display",Georgia,serif;
  letter-spacing:-.035em;
  text-wrap:balance
}

.hero-lead {
  max-width:56ch;
  margin:clamp(1.25rem,2vw,1.8rem) 0 0;
  color:rgba(255,255,255,.78);
  font:300 clamp(1rem,1.25vw,1.2rem)/1.45 var(--sans);
  letter-spacing:.005em;
  text-wrap:pretty;
  text-shadow:0 1px 14px rgba(0,0,0,.28)
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:var(--space-lg);
  margin-top:var(--space-sm);
  padding:var(--space-xs) 0;
  border-bottom:1px solid currentColor;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:500
}

.text-link span {
  font-size:16px
}

.scroll-cue {
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-xs);
  text-transform:uppercase;
  letter-spacing:.2em;
  color:rgba(255,255,255,.72);
  font-size:9px
}

.scroll-cue i {
  display:block;
  width:1px;
  height:45px;
  background:rgba(255,255,255,.52)
}

.scroll-cue::after {
  margin-top:-8px;
  color:rgba(255,255,255,.58);
  font:300 12px/1 var(--sans);
  content:"↓"
}

.hero-copy .eyebrow,
.hero h1,
.hero-lead,
.scroll-cue {
  opacity:0;
  translate:0 12px;
  filter:blur(4px);
  animation:hero-enter .9s cubic-bezier(.22,1,.36,1) forwards
}

.hero-copy .eyebrow { animation-delay:.12s }
.hero h1 { animation-delay:.26s }
.hero-lead { animation-delay:.4s }
.scroll-cue { animation-delay:.68s }

@keyframes hero-enter {
  to {
    opacity:var(--hero-enter-opacity,1);
    translate:0 0;
    filter:blur(0)
  }
}

/* ==========================================================================
   Introductory statement and feature image
   ========================================================================== */

.statement {
  padding:var(--section-padding) var(--page-gutter);
  text-align:center
}

.statement-copy {
  display:grid;
  gap:var(--space-2xs);
  font:400 clamp(38px,5.4vw,80px)/1.02 var(--serif);
  line-height:1.02
}

.statement-copy span {
  display:block;
  margin:0
}

.statement-emphasis {
  color:var(--blue);
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  line-height:.98
}

.feature-image {
  height:92vh;
  margin:0 var(--page-gutter);
  position:relative;
  overflow:hidden
}

.feature-image img {
  transition:transform 1.2s ease
}

.feature-image:hover img {
  transform:scale(1.025)
}

.feature-image span {
  position:absolute;
  bottom:24px;
  left:25px;
  color:white;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase
}

/* ==========================================================================
   Selected projects and masonry gallery
   ========================================================================== */

.section-heading {
  padding:var(--section-padding) var(--page-gutter) var(--space-xl)
}

.section-heading h2 {
  font:400 clamp(52px,7vw,100px)/.92 var(--serif);
  letter-spacing:-.03em
}

.section-heading em {
  font-weight:400;
  color:var(--blue)
}

.projects .section-heading {
  padding-bottom:clamp(3rem,5vw,5rem)
}

.project-gallery {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--space-sm);
  margin:0 var(--page-gutter) var(--section-padding)
}

.project-card {
  position:relative;
  width:100%;
  margin:0;
  break-inside:avoid;
  border-radius:32px;
  overflow:hidden;
  background:#17202a;
  color:white;
  cursor:pointer;
  isolation:isolate
}

.project-card.aspect-portrait {
  aspect-ratio:3/4
}

.project-card.aspect-tall {
  aspect-ratio:2/3
}

.project-card.aspect-landscape {
  aspect-ratio:4/3
}

.project-card-image {
  position:absolute;
  inset:0;
  transition:filter .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)
}

.project-card::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(8,12,17,.04);
  transition:background .65s cubic-bezier(.22,.61,.36,1);
  z-index:1
}

.project-card-focus {
  position:absolute;
  z-index:3;
  right:6%;
  top:10%;
  width:40%;
  height:62%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.76);
  border-radius:22px;
  opacity:0;
  transform:translateX(14px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)
}

.project-card-focus img {
  position:absolute;
  width:250%;
  height:162%;
  max-width:none;
  right:-15%;
  top:-16%;
  object-fit:cover
}

.project-card-info {
  position:absolute;
  z-index:4;
  left:7%;
  right:7%;
  bottom:7%;
  opacity:0;
  transform:translateY(14px);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)
}

.project-card-info h3 {
  max-width:48%;
  font:400 clamp(30px,3vw,46px)/.9 var(--serif);
  margin:0 0 var(--space-2xs)
}

.project-card-location {
  font:italic 400 17.28px var(--serif);
  margin-bottom:var(--space-sm)
}

.project-card-description {
  max-width:48%;
  font-size:10px;
  line-height:1.55;
  margin-bottom:var(--space-sm)
}

.project-card-services {
  font-size:8px;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0
}

.project-card:hover .project-card-image,.project-card:focus-visible .project-card-image,.project-card.is-active .project-card-image {
  filter:blur(7px) brightness(.88);
  transform:scale(1.035)
}

.project-card:hover::after,.project-card:focus-visible::after,.project-card.is-active::after {
  background:rgba(8,12,17,.08)
}

.project-card:hover .project-card-focus,.project-card:focus-visible .project-card-focus,.project-card.is-active .project-card-focus,.project-card:hover .project-card-info,.project-card:focus-visible .project-card-info,.project-card.is-active .project-card-info {
  opacity:1;
  transform:none
}

.project-gallery .project-card {
  grid-column:span 2;
  aspect-ratio:4/3
}

.project-gallery .project-card:nth-last-child(2):nth-child(3n + 1) {
  grid-column:2/span 2
}

.project-gallery .project-card:last-child:nth-child(3n + 2) {
  grid-column:4/span 2
}

.project-card-toggle {
  display:none;
  margin-top:var(--space-xs);
  padding:8px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.72);
  background:transparent;
  color:#fff;
  font:500 10px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase
}

/* ==========================================================================
   Manifesto
   ========================================================================== */

.manifesto {
  background:var(--blue);
  color:white;
  padding:var(--section-padding) var(--page-gutter);
  min-height:90vh
}

.manifesto h2 {
  font:400 clamp(55px,8vw,118px)/.9 var(--serif);
  opacity:.4
}

.manifesto-line {
  font:400 clamp(46px,6.8vw,100px)/.9 var(--serif);
  margin-top:var(--space-xl)
}

.manifesto-line em {
  font-weight:400;
  color:#CBDAEC
}

/* ==========================================================================
   Services
   ========================================================================== */

.services.texture-blue {
  padding-bottom:0;
  color:var(--white);
  --editorial-grain-opacity:.04
}

.services.services-horizontal {
  height:400svh;
  overflow:clip
}

.services-horizontal .services-horizontal__sticky {
  position:sticky;
  top:0;
  height:100svh;
  min-height:100svh;
  overflow:hidden
}

.services-horizontal__track {
  display:flex;
  width:400vw;
  height:100%;
  will-change:transform;
  transform:translate3d(0,0,0)
}

.service-slide {
  flex:0 0 100vw;
  width:100vw;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-md) var(--page-gutter) calc(var(--space-xl) + var(--space-sm));
  text-align:left
}

.service-slide[data-scroll-target] {
  cursor:pointer
}

.service-slide[data-scroll-target] h3 a {
  color:inherit
}

.service-content {
  width:min(100%,720px);
  margin-inline:auto
}

.service-content h3 {
  margin:0 0 var(--space-md);
  font:400 clamp(4.5rem,9vw,9rem)/.78 var(--serif);
  letter-spacing:-.04em
}

.service-eyebrow {
  margin-bottom:var(--space-xs)!important
}

.service-content p {
  margin:0;
  font-family:var(--sans)
}

.service-lead {
  max-width:var(--text-width);
  margin-inline:0;
  margin-bottom:var(--space-sm)!important;
  color:rgba(255,255,255,.95);
  font-size:clamp(1.1rem,1rem + .45vw,1.4rem);
  line-height:1.42
}

.service-description {
  max-width:580px;
  margin-inline:0;
  margin-bottom:var(--space-md)!important;
  color:rgba(255,255,255,.76);
  font-size:clamp(.95rem,.9rem + .2vw,1.08rem);
  line-height:1.65
}

.service-applications {
  max-width:580px;
  margin-inline:0;
  color:rgba(255,255,255,.58);
  font-size:clamp(.8rem,.76rem + .15vw,.9rem);
  line-height:1.6
}

.service-applications strong {
  display:inline-block;
  margin-right:var(--space-xs);
  color:rgba(255,255,255,.88);
  font-size:9px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase
}

.service-budget {
  display:inline-flex;
  align-items:center;
  gap:clamp(20px,2vw,32px);
  margin-top:var(--space-md);
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:999px;
  background:transparent;
  color:var(--white);
  font-size:10px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease
}

.service-budget:hover,
.service-budget:focus-visible {
  border-color:#CBDAEC;
  background:#CBDAEC;
  color:#202b52;
  outline:none;
  transform:translateY(-2px)
}

.services-horizontal__timeline {
  position:absolute;
  z-index:5;
  right:var(--page-gutter);
  bottom:var(--space-lg);
  left:var(--page-gutter);
  padding-right:var(--floating-contact-safe-area)
}

.services-horizontal__timeline-line {
  position:relative;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.18)
}

.services-horizontal__timeline-active {
  position:absolute;
  inset:0;
  display:block;
  background:rgba(255,255,255,.72);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform
}

.services-horizontal__markers {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:var(--space-xs)
}

.services-horizontal__markers span {
  display:flex;
  gap:var(--space-2xs);
  align-items:baseline;
  justify-self:center;
  color:rgba(255,255,255,.36);
  transform-origin:center;
  transition:color .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1),opacity .65s ease
}

.services-horizontal__markers span.is-active {
  color:rgba(255,255,255,.95);
  transform:scale(1.035)
}

.services-horizontal__markers b {
  font-size:8px;
  font-weight:500;
  letter-spacing:.14em
}

.services-horizontal__markers em {
  font:400 14.26px var(--serif);
  font-style:normal
}

@media(max-width:800px),(prefers-reduced-motion:reduce) {
  .services.services-horizontal {
    height:auto
  }

  .services-horizontal .services-horizontal__sticky {
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    overflow:visible
  }

  .services-horizontal__track {
    display:block;
    width:100%;
    height:auto;
    transform:none!important;
    will-change:auto
  }

  .service-slide {
    width:100%;
    height:auto;
    min-height:0;
    padding:var(--space-lg) var(--page-gutter)
  }

  .services-horizontal__timeline {
    position:sticky;
    top:0;
    right:auto;
    bottom:auto;
    left:auto;
    padding:var(--space-xs) var(--page-gutter);
    background:rgba(47,60,116,.94);
    backdrop-filter:blur(10px)
  }

  .services-horizontal__markers {
    gap:var(--space-2xs)
  }

  .services-horizontal__markers span {
    display:grid;
    gap:2px
  }

  .services-horizontal__markers em {
    font-size:10.69px
  }
}

@media(max-width:800px) {
  /* Mobile services: a single, continuous vertical timeline. */
  .services-horizontal__timeline {
    display:none
  }

  .services-horizontal__track {
    position:relative;
    --mobile-timeline-progress:0;
    padding:var(--space-lg) var(--page-gutter) var(--space-xl) calc(var(--page-gutter) + 34px)
  }

  .services-horizontal__track::before {
    content:"";
    position:absolute;
    top:var(--space-lg);
    bottom:var(--space-xl);
    left:calc(var(--page-gutter) + 7px);
    width:1px;
    background:rgba(255,255,255,.42)
  }

  .services-horizontal__track::after {
    content:"";
    position:absolute;
    z-index:1;
    top:var(--space-lg);
    bottom:var(--space-xl);
    left:calc(var(--page-gutter) + 7px);
    width:2px;
    background:rgba(255,255,255,.96);
    transform:scaleY(var(--mobile-timeline-progress));
    transform-origin:center top;
    will-change:transform
  }

  .service-slide {
    position:relative;
    display:block;
    padding:0 0 var(--space-lg);
    text-align:left
  }

  .service-slide:last-child {
    padding-bottom:0
  }

  .service-slide::before {
    content:"";
    position:absolute;
    z-index:2;
    top:3px;
    left:-27px;
    width:13px;
    height:13px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:50%;
    background:var(--blue);
    transform:translateX(-50%)
  }

  .service-slide::after {
    display:block;
    margin-top:var(--space-md);
    border-bottom:1px solid rgba(255,255,255,.24);
    content:""
  }

  .service-content {
    width:100%
  }

  .service-eyebrow {
    margin:0 0 var(--space-xs)!important;
    font-size:0
  }

  .service-eyebrow::after {
    color:rgba(255,255,255,.62);
    font:500 9px/1 var(--sans);
    letter-spacing:.18em
  }

  .service-slide:nth-child(1) .service-eyebrow::after { content:"01" }
  .service-slide:nth-child(2) .service-eyebrow::after { content:"02" }
  .service-slide:nth-child(3) .service-eyebrow::after { content:"03" }
  .service-slide:nth-child(4) .service-eyebrow::after { content:"04" }

  .service-content h3 {
    margin-bottom:var(--space-sm);
    font-size:clamp(2rem,8.5vw,2.8rem);
    line-height:1
  }

  .service-lead {
    margin-bottom:0!important;
    color:rgba(255,255,255,.78);
    font-size:1rem;
    line-height:1.5
  }

  .service-description,
  .service-applications,
  .service-budget {
    display:none
  }

  .project-card-description {
    display:none
  }

  .project-card {
    cursor:default
  }

  .project-card-info,
  .project-card:hover .project-card-info,
  .project-card:focus-visible .project-card-info {
    opacity:1;
    transform:none
  }

  .project-card:hover .project-card-image,
  .project-card:focus-visible .project-card-image {
    filter:none;
    transform:none
  }

  .project-card:hover .project-card-focus,
  .project-card:focus-visible .project-card-focus {
    opacity:0;
    transform:translateY(10px) scale(.98)
  }

  .project-card:hover::after,
  .project-card:focus-visible::after {
    background:linear-gradient(180deg,rgba(8,12,17,.02) 35%,rgba(8,12,17,.76) 100%)
  }

  .project-card-toggle {
    display:none!important
  }

  .project-card-info h3 {
    max-width:64%;
    margin-bottom:6px;
    line-height:.95
  }

  .project-card-location {
    max-width:64%;
    margin:0;
    line-height:1.25
  }

  .project-card-services {
    max-width:64%;
    margin-top:var(--space-xs)
  }
}

/* ==========================================================================
   Immersive experience
   ========================================================================== */

.tour {
  width:100%;
  padding:var(--section-padding) var(--page-gutter);
  color:#fff;
  overflow:hidden
}

.tour-container {
  width:min(100%,var(--content-width));
  min-width:0;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,35fr) minmax(0,65fr);
  align-items:center;
  gap:clamp(48px,6vw,96px)
}

.tour-stage {
  position:relative;
  min-width:0;
  padding:clamp(18px,2.2vw,32px) 0
}

.tour-frame {
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:clamp(22px,2.2vw,32px);
  background:#16191d;
  box-shadow:0 32px 80px rgba(8,12,31,.3)
}

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

.tour-copy {
  align-self:center;
  position:relative;
  z-index:1
}

.tour-copy h2 {
  max-width:520px;
  margin:clamp(24px,3vw,40px) 0 28px;
  font:400 clamp(32px,3.05vw,48px)/1.02 var(--serif);
  letter-spacing:-.025em
}

.tour-highlight {
  display:inline;
  position:relative;
  top:8px;
  color:rgba(255,255,255,.35);
  opacity:.35;
  transition:
    top .46s cubic-bezier(.22,1,.36,1),
    color .46s ease,
    opacity .46s ease,
    filter .46s ease
}

.tour-highlight--explore {
  font-weight:500
}

.tour-highlight--own {
  font-style:italic
}

.tour-highlight--imagine {
  filter:blur(3px)
}

.tour-highlight--trust {
  position:relative
}

.tour-highlight--trust::after {
  position:absolute;
  right:-.04em;
  bottom:-.17em;
  left:-.03em;
  height:3px;
  border-radius:50%;
  background:#CBDAEC;
  clip-path:polygon(0 38%,18% 18%,42% 38%,67% 12%,100% 34%,100% 84%,76% 68%,51% 91%,25% 70%,0 88%);
  content:"";
  transform:scaleX(0) rotate(-.7deg);
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.22,1,.36,1) 1s
}

.tour-copy.visible .tour-highlight--explore {
  top:0;
  color:#CBDAEC;
  opacity:1;
  transition-delay:.14s
}

.tour-copy.visible .tour-highlight--own {
  top:0;
  color:#CBDAEC;
  opacity:1;
  transition-delay:.32s
}

.tour-copy.visible .tour-highlight--imagine {
  top:0;
  color:#CBDAEC;
  opacity:1;
  filter:blur(0);
  transition-delay:.5s
}

.tour-copy.visible .tour-highlight--trust {
  top:0;
  color:#CBDAEC;
  opacity:1;
  transition-delay:.68s
}

.tour-copy.visible .tour-highlight--trust::after {
  transform:scaleX(1) rotate(-.7deg)
}

.tour-copy>p:not(.eyebrow) {
  line-height:1.7;
  max-width:410px;
  font-size:clamp(13px,1vw,15px);
  color:rgba(255,255,255,.76)
}

.tour-copy .tour-instruction {
  margin:0;
  color:#fff;
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase
}

.tour-instruction span {
  display:inline-block;
  margin-left:8px;
  transition:transform .35s ease
}

.tour:hover .tour-instruction span {
  transform:translateX(7px)
}

.tour-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 24px;
  margin-top:clamp(30px,4vw,52px)
}

.tour-more {
  padding:10.35px 17.25px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:999px;
  background:transparent;
  color:#fff;
  font:500 11.5px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease,border-color .3s ease,color .3s ease
}

.tour-more:hover,
.tour-more:focus-visible {
  border-color:#CBDAEC;
  background:#CBDAEC;
  color:#202b52;
  outline:none
}

.tour-fullscreen {
  display:none;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.55);
  font:500 10px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase
}

.tour-participant {
  position:absolute;
  z-index:2;
  width:clamp(132px,12.5vw,190px);
  margin:0;
  padding:5px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:17px;
  background:rgba(19,24,49,.86);
  box-shadow:0 18px 45px rgba(7,10,25,.35);
  backdrop-filter:blur(12px)
}

.tour-participant img {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px
}

.tour-participant--agent {
  top:0;
  right:clamp(18px,2vw,30px);
  animation:tour-float-agent 6.5s ease-in-out infinite
}

.tour-participant--family {
  left:clamp(-28px,-2vw,-12px);
  bottom:0;
  animation:tour-float-family 7.2s ease-in-out -2.4s infinite
}

/* Tour information dialog */

body.tour-modal-open {
  overflow:hidden
}

.tour-modal {
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,40px);
  overflow:hidden;
  background:rgba(7,10,24,.54);
  opacity:0;
  pointer-events:none;
  backdrop-filter:blur(9px);
  transition:opacity .34s ease
}

.tour-modal[hidden] {
  display:none
}

.tour-modal.is-open {
  opacity:1;
  pointer-events:auto
}

.tour-modal__dialog {
  position:relative;
  width:min(100%,860px);
  max-height:80dvh;
  overflow-x:hidden;
  overflow-y:auto;
  padding:clamp(26px,3.5vw,44px);
  border:1px solid rgba(203,218,236,.2);
  border-radius:clamp(22px,3vw,38px);
  background:rgba(38,47,76,.68);
  color:#fff;
  box-shadow:0 38px 100px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(28px) saturate(.95);
  backdrop-filter:blur(28px) saturate(.95);
  opacity:0;
  transform:translateY(18px);
  transition:opacity .34s ease,transform .42s cubic-bezier(.22,1,.36,1);
  scrollbar-width:thin;
  scrollbar-color:rgba(203,218,236,.45) transparent
}

.tour-modal.is-open .tour-modal__dialog {
  opacity:1;
  transform:none
}

.tour-modal__dialog::before {
  position:absolute;
  top:0;
  left:clamp(28px,4.4vw,64px);
  width:72px;
  height:3px;
  background:#CBDAEC;
  content:""
}

.tour-modal__close {
  position:sticky;
  z-index:3;
  top:0;
  float:right;
  display:flex;
  align-items:center;
  gap:9px;
  margin:-12px -12px 0 20px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(32,43,82,.88);
  color:rgba(255,255,255,.8);
  font:500 9px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px)
}

.tour-modal__close span {
  font-size:18px;
  font-weight:300;
  line-height:.7
}

.tour-modal__close:hover,
.tour-modal__close:focus-visible {
  border-color:#CBDAEC;
  color:#CBDAEC;
  outline:none
}

.tour-modal__header {
  max-width:680px;
  clear:both
}

.tour-modal__tabs {
  display:flex;
  gap:clamp(24px,5vw,64px);
  max-width:680px;
  margin-top:14px;
  border-bottom:1px solid rgba(255,255,255,.16)
}

.tour-modal__tabs button {
  position:relative;
  flex:0 0 auto;
  padding:0 0 14px;
  border:0;
  background:none;
  color:rgba(255,255,255,.48);
  font:500 10px/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .28s ease
}

.tour-modal__tabs button::after {
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:2px;
  background:#CBDAEC;
  content:"";
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .34s cubic-bezier(.22,1,.36,1)
}

.tour-modal__tabs button:hover,
.tour-modal__tabs button:focus-visible,
.tour-modal__tabs button.is-active {
  color:#fff;
  outline:none
}

.tour-modal__tabs button.is-active::after {
  transform:scaleX(1)
}

.tour-modal__panel {
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:680px;
  padding:clamp(24px,2.5vw,32px) 0;
  animation:tour-panel-in .35s ease both
}

.tour-modal__panel[hidden] {
  display:none
}

.tour-modal__panel h3 {
  margin:0;
  font:400 clamp(27.5px,2.97vw,38.5px)/1.08 var(--serif);
  color:#fff
}

.tour-modal__panel>p:not(.tour-modal__conclusion) {
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:14.3px;
  line-height:1.7
}

.tour-modal__conclusion {
  margin:2px 0 0;
  color:#CBDAEC;
  font:italic 400 19.8px/1.35 var(--serif)
}

.tour-modal__cta {
  align-self:flex-start;
  margin-top:6px;
  padding:14px 18px;
  border-radius:999px;
  background:#CBDAEC;
  color:#202b52;
  font-size:10px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:background .28s ease,transform .28s ease
}

.tour-modal__cta:hover,
.tour-modal__cta:focus-visible {
  background:#fff;
  outline:none;
  transform:translateY(-2px)
}

.tour-modal__footer {
  display:flex;
  align-items:flex-start;
  max-width:680px;
  padding-top:0
}

.tour-modal__footer a {
  flex:0 0 auto;
  padding:14px 18px;
  border-radius:999px;
  background:#CBDAEC;
  color:#202b52;
  font-size:10px;
  font-weight:500;
  letter-spacing:.09em;
  text-decoration:none;
  text-transform:uppercase;
  transition:background .28s ease,transform .28s ease
}

.tour-modal__footer a:hover,
.tour-modal__footer a:focus-visible {
  background:#CBDAEC;
  outline:none;
  transform:translateY(-2px)
}

@keyframes tour-panel-in {
  from { opacity:0; transform:translateY(6px) }
  to { opacity:1; transform:none }
}

@keyframes tour-float-agent {
  0%,100% { transform:translate3d(0,0,0) rotate(.2deg) }
  50% { transform:translate3d(-3px,-8px,0) rotate(-.35deg) }
}

@keyframes tour-float-family {
  0%,100% { transform:translate3d(0,0,0) rotate(-.25deg) }
  50% { transform:translate3d(4px,-7px,0) rotate(.3deg) }
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  padding:var(--section-padding) var(--page-gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-xl)
}

.coordinates {
  text-align:center
}

.coordinates p {
  font:400 clamp(38px,4.5vw,68px)/1 var(--serif)
}

.coordinates span {
  display:block;
  margin:var(--space-md)
}

.coordinates em {
  color:var(--blue)
}

.about-copy {
  align-self:center
}

.about-copy>p:last-child {
  font:400 clamp(30px,3vw,46px)/1.15 var(--serif)
}

/* ==========================================================================
   Frequently asked questions
   ========================================================================== */

.faq {
  padding-bottom:var(--section-padding)
}

.faq {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:var(--space-lg);
  padding-right:var(--page-gutter)
}

.faq .section-heading {
  padding-right:0
}

.faq-groups {
  padding-top:var(--section-padding)
}

.faq-selector {
  display:flex;
  gap:var(--space-2xs);
  width:fit-content;
  max-width:100%;
  margin-bottom:var(--space-lg);
  padding:6px;
  border:1px solid rgba(255,255,255,.66);
  border-radius:999px;
  background:rgba(255,255,255,.38);
  box-shadow:0 12px 40px rgba(47,60,116,.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15)
}

.faq-selector button {
  padding:10px 16px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(22,25,29,.58);
  cursor:pointer;
  font:500 10.8px var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .45s cubic-bezier(.22,1,.36,1),color .45s ease,transform .45s cubic-bezier(.22,1,.36,1)
}

.faq-selector button:hover {
  color:var(--blue)
}

.faq-selector button.is-active {
  background:rgba(255,255,255,.82);
  color:var(--blue);
  transform:scale(1.015)
}

.faq-selector button:focus-visible {
  outline:1px solid var(--blue);
  outline-offset:2px
}

.faq-group[hidden] {
  display:none
}

.faq-group+.faq-group {
  margin-top:var(--space-xl)
}

.faq-category {
  margin:0 0 var(--space-sm);
  color:var(--blue);
  font-size:9px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase
}

.faq-groups .accordion {
  padding-top:0
}

.accordion {
  padding-top:var(--section-padding)
}

.accordion details {
  border-top:1px solid var(--line);
  padding:var(--space-md) 0
}

.accordion details:last-child {
  border-bottom:1px solid var(--line)
}

summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  font:400 30px var(--serif)
}

summary::-webkit-details-marker {
  display:none
}

summary span {
  font:300 18px var(--sans);
  transition:transform .3s
}

details[open] summary span {
  transform:rotate(45deg)
}

details p {
  max-width:560px;
  padding:var(--space-sm) var(--space-md) 0 0;
  font-size:16.9px;
  line-height:1.7;
  color:#575b60;
  opacity:0;
  transform:translateY(-6px);
  transition:
    opacity .3s ease .06s,
    transform .36s cubic-bezier(.22,1,.36,1) .04s
}

details[open]:not(.is-closing) p {
  opacity:1;
  transform:none
}

details.is-closing p {
  transition-delay:0s
}

/* ==========================================================================
   Contact and form
   ========================================================================== */

.contact {
  min-height:100vh;
  padding:var(--section-padding) var(--page-gutter) var(--space-md);
  background:var(--blue);
  color:white;
  display:flex;
  flex-direction:column
}

.contact.texture-blue {
  --editorial-grain-opacity:.1
}

.contact-layout {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--space-xl);
  align-items:start
}

.contact-headline {
  display:flex;
  flex-direction:column;
  gap:clamp(1.25rem,2.5vw,2.75rem)
}

.contact h2 {
  margin:0;
  font:400 clamp(58px,6.5vw,105px)/.82 "Libre Caslon Display",Georgia,serif;
  letter-spacing:-.045em
}

.contact-script {
  margin:0 0 0 clamp(1rem,3vw,3.5rem);
  font:italic 400 clamp(38px,4.5vw,72px)/.95 "Libre Caslon Display",Georgia,serif;
  color:#CBDAEC;
}

.contact-script-scroll {
  opacity:0;
  filter:blur(8px);
  transform:translate3d(0,24px,0);
  will-change:opacity,filter,transform
}

.contact-actions {
  margin-top:0
}

.contact-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--space-md)
}

.form-field {
  position:relative;
  padding-top:var(--space-sm);
  border-bottom:1px solid rgba(255,255,255,.35)
}

.form-field-wide {
  grid-column:1/-1
}

.form-field-wide::after {
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:1px;
  background:rgba(255,255,255,.95);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .65s cubic-bezier(.22,1,.36,1);
  pointer-events:none
}

.form-field-wide:focus-within::after {
  transform:scaleX(1)
}

.form-field label {
  display:block;
  margin-bottom:var(--space-2xs);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62)
}

.form-field input,.form-field textarea {
  width:100%;
  padding:0 0 var(--space-2xs);
  border:0;
  outline:0;
  resize:none;
  background:transparent;
  color:white;
  font:300 18.7px/1.55 var(--sans);
  border-radius:0
}

.form-field:focus-within {
  border-color:white
}

.form-honeypot {
  position:absolute!important;
  left:-9999px!important
}

.form-consent {
  grid-column:1/-1;
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:var(--space-md);
  max-width:680px;
  color:rgba(255,255,255,.78);
  font:400 12px/1.55 var(--sans);
  cursor:pointer
}

.form-consent input {
  width:17px;
  height:17px;
  margin:1px 0 0;
  flex:0 0 17px;
  accent-color:#fff
}

.form-consent a {
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px
}

.form-consent:focus-within {
  color:#fff
}

.form-status {
  grid-column:1/-1;
  min-height:1.5em;
  margin:10px 0 0;
  color:rgba(255,255,255,.82);
  font:400 12px/1.5 var(--sans)
}

.form-submit {
  grid-column:1/-1;
  justify-self:start;
  margin-top:var(--space-md);
  padding:var(--space-xs) 0;
  border:0;
  border-bottom:1px solid white;
  background:transparent;
  color:white;
  cursor:pointer;
  font:500 12.1px var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase
}

.form-submit__icon {
  display:inline-block;
  margin-left:var(--space-lg);
  transition:transform .3s
}

.form-submit:hover .form-submit__icon {
  transform:translate(3px,-3px)
}

.form-submit:focus-visible {
  outline:2px solid #fff;
  outline-offset:6px
}

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

.form-submit:disabled .form-submit__icon {
  animation:submit-pulse .8s ease-in-out infinite alternate
}

@keyframes submit-pulse {
  to { opacity:.25; transform:translate(3px,-3px) }
}

.contact-link {
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  margin-top:var(--space-lg);
  border-bottom:1px solid currentColor;
  padding:var(--space-xs) 0;
  font-size:11px;
  letter-spacing:.08em
}

.contact-link__icon {
  width:21px;
  height:21px;
  flex:0 0 21px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  transition:transform .35s ease
}

.contact-link:hover .contact-link__icon {
  transform:scale(1.08)
}

.contact footer {
  margin-top:var(--space-xl);
  padding-top:var(--space-md);
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.25);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em
}

.contact footer p {
  margin:0
}

/* ==========================================================================
   Reveal animations
   ========================================================================== */

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

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

/* ==========================================================================
   Responsive: mobile and tablet
   ========================================================================== */

@media(max-width:800px) {
  :root {
    --section-padding:clamp(4.5rem,18vw,7rem)
  }

  .menu-panel {
    width:80vw;
    max-width:calc(100dvw - 20px);
    border-radius:22px 0 0 22px;
    padding:max(7rem,calc(env(safe-area-inset-top) + 5.5rem)) max(var(--space-sm),env(safe-area-inset-right)) max(var(--space-md),env(safe-area-inset-bottom)) var(--space-sm);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain
  }

  .brand {
    transition:opacity .35s ease,visibility .35s ease
  }

  .brand.is-outside-hero,
  .menu-open .brand {
    visibility:hidden;
    opacity:0;
    pointer-events:none
  }

  .menu-panel nav {
    width:100%;
    min-height:50svh;
    margin:auto 0;
    justify-content:center
  }

  .menu-panel nav a {
    display:flex;
    min-height:clamp(64px,12.5svh,104px);
    align-items:center;
    width:100%;
    padding:var(--space-xs) 0;
    font-size:clamp(2rem,8vw,2.75rem);
    line-height:1
  }

  .menu-panel nav a+a {
    border-top:1px solid rgba(255,255,255,.18)
  }

  @media(hover:none) {
    .menu-panel nav a:hover {
      transform:none
    }
  }

  html {
    scroll-padding-top:76px
  }

  .site-header {
    padding:max(var(--space-xs),env(safe-area-inset-top)) max(var(--page-gutter),env(safe-area-inset-right)) var(--space-xs) max(var(--page-gutter),env(safe-area-inset-left))
  }

  .brand {
    width:132px;
    height:58px
  }

  .floating-contact {
    right:max(var(--space-xs),env(safe-area-inset-right));
    bottom:max(var(--space-xs),env(safe-area-inset-bottom));
    gap:var(--space-xs);
    padding:var(--space-2xs) var(--space-xs)
  }

  .floating-contact__icon {
    width:23px;
    height:23px;
    flex-basis:23px
  }

  .hero-copy {
    left:var(--page-gutter);
    right:var(--page-gutter);
    bottom:11vh
  }

  .hero h1 {
    max-width:650px;
    font-size:clamp(40px,11.5vw,58px);
    line-height:.94
  }

  .hero-copy .eyebrow {
    font-size:clamp(10.35px,.8625vw,12.94px)
  }

  .hero-lead {
    max-width:560px;
    font-size:clamp(13.6px,3.74vw,16.15px);
    line-height:1.42
  }

  .scroll-cue {
    bottom:14px
  }

  .scroll-cue i {
    height:28px
  }

  .statement {
    padding:var(--section-padding) var(--page-gutter)
  }

  .feature-image {
    margin:0;
    height:72vh
  }

  .section-heading {
    padding:var(--section-padding) var(--page-gutter) var(--space-xl)
  }

  .project-gallery {
    grid-template-columns:1fr;
    gap:clamp(18px,5vw,26px);
    margin:0 var(--page-gutter) var(--section-padding)
  }

  .project-card {
    margin:0;
    border-radius:24px
  }

  .project-card::after {
    background:linear-gradient(180deg,rgba(8,12,17,.02) 26%,rgba(8,12,17,.18) 52%,rgba(8,12,17,.88) 100%)
  }

  .project-gallery .project-card {
    grid-column:auto;
    aspect-ratio:1/1.08
  }

  .project-card-info {
    left:clamp(18px,6vw,28px);
    right:clamp(18px,6vw,28px);
    bottom:clamp(18px,6vw,28px);
    text-shadow:0 2px 16px rgba(0,0,0,.55)
  }

  .project-card-info h3 {
    max-width:100%;
    margin-bottom:5px;
    font-size:clamp(32px,9.5vw,40px);
    line-height:.98;
    text-wrap:balance
  }

  .project-card-location {
    max-width:100%;
    margin:0;
    font-size:clamp(17px,4.8vw,19px);
    line-height:1.25
  }

  .project-card-services {
    max-width:100%;
    margin-top:12px;
    font-size:10px;
    line-height:1.45;
    letter-spacing:.11em
  }

  .project-card-description {
    max-width:72%;
    font-size:13px
  }

  .project-card-focus {
    display:none
  }

  .manifesto {
    padding:var(--section-padding) var(--page-gutter)
  }

  .tour {
    padding:var(--section-padding) var(--page-gutter)
  }

  .tour-container {
    grid-template-columns:1fr;
    gap:0
  }

  .tour-frame {
    aspect-ratio:4/3;
    border-radius:28px
  }

  .tour-copy {
    margin-bottom:var(--space-lg);
    padding:0
  }

  .tour-copy h2 {
    max-width:720px
  }

  .tour-highlight--imagine {
    filter:blur(1px)
  }

  .tour-stage {
    margin-inline:12px
  }

  .tour-participant {
    pointer-events:none
  }

  .tour-fullscreen {
    display:inline-flex;
    align-items:center;
    gap:10px
  }

  .tour-actions .tour-fullscreen {
    display:none
  }

  .tour-fullscreen--below {
    justify-self:start;
    margin-top:var(--space-sm)
  }

  .tour-modal {
    padding:
      max(3vw,env(safe-area-inset-top))
      max(3vw,env(safe-area-inset-right))
      max(3vw,env(safe-area-inset-bottom))
      max(3vw,env(safe-area-inset-left))
  }

  .tour-modal__dialog {
    width:100%;
    max-height:90dvh;
    padding:clamp(20px,5.5vw,32px);
    border-radius:24px
  }

  .tour-modal__dialog::before {
    left:clamp(20px,5.5vw,32px)
  }

  .tour-modal__close {
    margin:-10px -10px 0 16px
  }

  .tour-modal__tabs {
    gap:30px;
    margin-top:22px;
    margin-right:calc(clamp(20px,5.5vw,32px) * -1);
    padding-right:clamp(20px,5.5vw,32px);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none
  }

  .tour-modal__tabs::-webkit-scrollbar {
    display:none
  }

  .tour-modal__panel {
    grid-template-columns:1fr;
    gap:14px;
    padding:26px 0
  }

  .tour-modal__panel h3 {
    grid-row:auto;
    font-size:clamp(26.4px,7.7vw,33px)
  }

  .tour-modal__footer {
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    padding-top:16px
  }

  .tour-modal__footer a,
  .tour-modal__cta {
    padding:12px 16px;
    white-space:normal
  }

  .about {
    grid-template-columns:1fr;
    padding:var(--section-padding) var(--page-gutter)
  }

  .faq {
    grid-template-columns:1fr;
    padding:0 var(--page-gutter) var(--section-padding)
  }

  .faq .section-heading {
    padding-left:0;
    padding-bottom:var(--space-md)
  }

  .accordion {
    padding:0
  }

  .faq-groups {
    padding-top:0
  }

  .faq-selector {
    width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent)
  }

  .faq-selector::-webkit-scrollbar {
    display:none
  }

  .faq-selector button {
    flex:0 0 auto;
    min-height:44px;
    scroll-snap-align:center
  }

  .contact {
    padding:var(--section-padding) var(--page-gutter) var(--space-md)
  }

  .contact-script {
    margin-left:clamp(.75rem,4vw,1.5rem)
  }

  .contact-layout {
    grid-template-columns:1fr;
    gap:var(--space-xl)
  }

  .contact h2 {
    font-size:clamp(46px,15vw,70px)
  }

  .contact-actions {
    margin-top:0
  }

  .contact-form {
    grid-template-columns:1fr
  }

  .form-field-wide {
    grid-column:auto
  }

  .form-submit {
    grid-column:auto
  }

  .contact-link {
    justify-self:start
  }

  .contact footer {
    gap:var(--space-sm);
    margin-top:var(--space-xl)
  }

}

@media(max-width:800px) and (hover:none), (max-width:800px) and (pointer:coarse) {
  .project-card::after {
    background:linear-gradient(180deg,rgba(8,12,17,.02) 26%,rgba(8,12,17,.18) 52%,rgba(8,12,17,.88) 100%)
  }

  .project-card-info {
    opacity:1;
    transform:none
  }

  .project-card-location {
    margin-bottom:0
  }

  .project-card-description {
    display:none
  }

  .project-card-toggle {
    display:inline-flex
  }
}

@media(max-width:480px) {
  .floating-contact {
    width:50px;
    height:50px;
    justify-content:center;
    padding:0
  }

  .floating-contact>span {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
  }

  .service-content h3 {
    font-size:clamp(2rem,8.5vw,2.8rem)
  }

  .services-horizontal__markers em {
    font-size:9.5px
  }

  .project-card-info {
    left:18px;
    right:18px;
    bottom:20px
  }

  .tour-stage {
    margin-inline:0
  }

  .tour-frame {
    aspect-ratio:3/4
  }

  .tour-participant {
    width:clamp(92px,28vw,120px)
  }

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

  summary {
    gap:16px;
    font-size:clamp(25.2px,7.2vw,30px)
  }

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

@media(min-width:801px) and (max-height:850px) {
  .tour-modal__dialog {
    padding:28px 38px
  }

  .tour-modal__dialog::before {
    left:38px
  }

  .tour-modal__header h2 {
    max-width:700px;
    font-size:44px
  }

  .tour-modal__tabs {
    margin-top:24px
  }

  .tour-modal__panel {
    padding:22px 0
  }
}

/* ========================================================================== 
   Accessibility: reduced motion
   ========================================================================== */

@media(prefers-reduced-motion:reduce) {
  .tour-participant {
    animation:none
  }

  details p {
    transition:none
  }

  .tour-modal,
  .tour-modal__dialog,
  .tour-modal__tabs button::after,
  .tour-modal__footer a {
    transition:none
  }

  .tour-modal__dialog {
    transform:none
  }

  .tour-modal__panel {
    animation:none
  }

  .tour-highlight,
  .tour-highlight--trust::after {
    transition:none
  }

  .tour-highlight--explore {
    top:0;
    color:#CBDAEC;
    opacity:1
  }

  .tour-highlight--own,
  .tour-highlight--imagine {
    top:0;
    color:#CBDAEC;
    opacity:1;
    filter:none
  }

  .tour-highlight--trust {
    top:0;
    color:#CBDAEC;
    opacity:1
  }

  .tour-highlight--trust::after {
    transform:scaleX(1) rotate(-.7deg)
  }

  html {
    scroll-behavior:auto
  }

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

  .project-card *,.feature-image img,.menu-panel {
    transition:none!important
  }

  .form-field-wide::after {
    transition:none
  }

  .contact-script-scroll {
    opacity:1;
    filter:none;
    transform:none
  }

  .hero video {
    display:none
  }

  .hero {
    background:url("assets/photo/BTS_2.jpg") center/cover
  }

}

/* Standalone confirmation and privacy pages */
.standalone-page {
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  padding:clamp(24px,6vw,72px);
  background:#0b0b0b;
  color:#f5f0e8
}

.standalone-card {
  width:min(760px,100%);
  padding:clamp(30px,6vw,72px);
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:0 30px 100px rgba(0,0,0,.34)
}

.standalone-brand {
  display:block;
  width:min(210px,56vw);
  margin-bottom:clamp(52px,9vw,90px)
}

.standalone-brand img {
  display:block;
  width:100%;
  height:auto
}

.standalone-card h1 {
  max-width:680px;
  margin:16px 0 22px;
  font:400 clamp(42px,7vw,76px)/.95 var(--serif);
  letter-spacing:-.035em
}

.standalone-card > p:not(.eyebrow),
.privacy-page section p {
  max-width:650px;
  color:rgba(255,255,255,.72);
  font:300 clamp(15px,2vw,18px)/1.7 var(--sans)
}

.standalone-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px 30px;
  margin-top:42px
}

.standalone-actions a {
  color:#fff;
  font:500 12px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase
}

.standalone-primary {
  padding:15px 20px;
  border:1px solid rgba(255,255,255,.62)
}

.privacy-page .standalone-card {
  width:min(900px,100%)
}

.privacy-page .standalone-brand {
  margin-bottom:58px
}

.privacy-page section {
  margin-top:34px
}

.privacy-page section h2 {
  margin:0 0 10px;
  color:#fff;
  font:500 14px/1.3 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase
}

.privacy-page section a {
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px
}

.privacy-updated {
  font-size:13px!important
}

@media(max-width:600px) {
  .standalone-page { padding:16px }
  .standalone-card { padding:30px 22px }
  .standalone-actions { align-items:flex-start; flex-direction:column }
}

/* ========================================================================== 
   Selected projects: mobile-only layout repair
   ========================================================================== */

@media(max-width:768px) {
  .projects {
    width:100%;
    height:auto;
    min-height:0;
    overflow-x:clip
  }

  .projects .section-heading {
    width:100%;
    margin:0 0 clamp(3rem,10vw,4.5rem);
    padding-block:clamp(4.5rem,14vw,6.5rem) 0;
    padding-inline:clamp(20px,5vw,28px)
  }

  .projects .section-heading h2 {
    max-width:100%;
    margin-bottom:0;
    font-size:clamp(2.8rem,12vw,4.5rem);
    line-height:.92;
    overflow-wrap:normal
  }

  .project-gallery {
    width:auto;
    min-width:0;
    height:auto;
    min-height:0;
    margin:0 clamp(20px,5vw,28px) var(--section-padding);
    padding:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:row;
    grid-auto-rows:auto;
    column-gap:clamp(12px,3vw,18px);
    row-gap:clamp(16px,4vw,24px);
    align-content:start;
    justify-content:start
  }

  .project-gallery .project-card,
  .project-gallery .project-card:nth-last-child(2):nth-child(3n + 1),
  .project-gallery .project-card:last-child:nth-child(3n + 2) {
    grid-column:auto;
    grid-row:auto;
    align-self:start;
    width:100%;
    min-width:0;
    max-width:none;
    height:auto;
    min-height:0;
    margin:0;
    aspect-ratio:4/5;
    border-radius:18px;
    cursor:default;
    transform:none
  }

  .project-card-image,
  .project-card:hover .project-card-image,
  .project-card:focus-visible .project-card-image,
  .project-card.is-active .project-card-image {
    inset:0;
    width:100%;
    min-width:0;
    height:100%;
    object-fit:cover;
    filter:none;
    transform:none
  }

  .project-card::after,
  .project-card:hover::after,
  .project-card:focus-visible::after,
  .project-card.is-active::after {
    background:linear-gradient(180deg,rgba(8,12,17,0) 38%,rgba(8,12,17,.16) 57%,rgba(8,12,17,.86) 100%)
  }

  .project-card-focus {
    display:none
  }

  .project-card-info,
  .project-card:hover .project-card-info,
  .project-card:focus-visible .project-card-info,
  .project-card.is-active .project-card-info {
    right:clamp(12px,3.6vw,18px);
    bottom:clamp(12px,3.6vw,18px);
    left:clamp(12px,3.6vw,18px);
    max-width:none;
    opacity:1;
    transform:none;
    text-shadow:0 2px 12px rgba(0,0,0,.55)
  }

  .project-card-info h3 {
    max-width:100%;
    margin:0 0 7px;
    font-size:clamp(1.3rem,5.5vw,1.85rem);
    line-height:.96;
    letter-spacing:-.025em;
    text-wrap:balance
  }

  .project-card-location,
  .project-card-description,
  .project-card-toggle {
    display:none!important
  }

  .project-card-services {
    display:block;
    max-width:100%;
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:clamp(7.5px,2.35vw,9px);
    line-height:1.35;
    letter-spacing:.1em;
    text-wrap:balance
  }
}

@media(max-width:768px) {
  .faq {
    gap:clamp(.625rem,.45rem + .625vw,1.125rem)
  }

  .faq .section-heading {
    padding-bottom:clamp(.375rem,.275rem + .375vw,.625rem)
  }

  .faq-selector {
    gap:6.4px;
    padding:4.8px
  }

  .faq-selector button {
    min-height:35.2px;
    padding:8px 12.8px;
    font-size:8.64px
  }
}

/* ========================================================================== 
   Hero: mobile refinement
   ========================================================================== */

@media(max-width:768px) {
  .hero {
    width:100%;
    height:auto;
    min-height:100svh;
    padding:clamp(20px,5vw,28px) clamp(20px,5vw,26px) clamp(24px,7vw,36px)
  }

  .hero-shade {
    background:radial-gradient(ellipse 105% 78% at 30% 68%,rgba(7,9,16,.7),transparent 72%),linear-gradient(0deg,rgba(5,6,10,.52),transparent 58%)
  }

  .hero-copy {
    right:clamp(20px,5vw,26px);
    bottom:clamp(116px,15svh,148px);
    left:clamp(20px,5vw,26px);
    display:flex;
    max-width:none;
    flex-direction:column;
    align-items:flex-start
  }

  .hero-copy .eyebrow {
    max-width:100%;
    margin:0 0 1rem;
    font-size:.68rem;
    line-height:1.4;
    letter-spacing:.16em;
    text-wrap:balance
  }

  .hero h1 {
    max-width:min(9.5ch,100%);
    margin:0;
    font-size:clamp(2.7rem,10.8vw,3.96rem);
    line-height:.92
  }

  .hero-lead {
    max-width:37ch;
    margin:1.25rem 0 0;
    color:rgba(255,255,255,.76);
    font-size:1rem;
    font-weight:300;
    line-height:1.45;
    text-wrap:balance
  }

  .scroll-cue {
    bottom:clamp(24px,7vw,36px);
    gap:8px;
    font-size:.65rem
  }

  .scroll-cue i {
    height:30px
  }

  .floating-contact {
    right:max(16px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));
    width:48px;
    height:48px;
    justify-content:center;
    gap:0;
    padding:0;
    scale:1
  }

  .floating-contact>span {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
  }

  .floating-contact__icon {
    width:22px;
    height:22px;
    flex-basis:22px
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-copy .eyebrow,
  .hero h1,
  .hero-lead,
  .scroll-cue {
    opacity:var(--hero-enter-opacity,1);
    translate:0 0;
    filter:none;
    animation:none
  }
}

@media(max-width:768px) and (prefers-reduced-motion:no-preference) {
  .projects .project-gallery .project-card.reveal {
    opacity:0;
    transform:translateY(16px);
    filter:blur(2px);
    transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1),filter .85s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform,filter
  }

  .projects .project-gallery .project-card.reveal:nth-child(even) {
    transition-delay:.07s
  }

  .projects .project-gallery .project-card.reveal.visible {
    opacity:1;
    transform:none;
    filter:blur(0);
    will-change:auto
  }
}