:root {
  --paper:#f5f3eb;
  --green:#0d382a;
  --ink:#143d30;
  --gold:#be9b60;
  --line:#d5d9cd;
  --muted:#5a685d;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased
}

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

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

a:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:6px
}

::selection {
  background:var(--gold);
  color:var(--green)
}

.wrap {
  width:calc(100% - 64px);
  max-width:1536px;
  margin-inline:auto
}

.header {
  height:102px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}

.brand {
  width:199px;
  height:47px;
  position:relative;
  display:block;
  overflow:hidden;
  flex-shrink:0;
  mix-blend-mode:multiply
}

.brand img {
  position:absolute;
  max-width:none;
  width:235px;
  height:auto;
  left:-21px;
  top:-54px
}

.header nav {
  display:flex;
  gap:32px;
  font-size:.875rem
}

.header nav a {
  padding-block:10px
}

.header nav a:hover,.header-contact:hover {
  color:#8b6e35
}

.header-contact {
  font-size:.875rem;
  border-bottom:1px solid var(--ink);
  padding:10px 0;
  display:flex;
  gap:35px;
  align-items:center
}

.header-contact span {
  font-size:22px
}

.hero {
  position:relative;
  isolation:isolate;
  min-height:680px;
  height:calc(100svh - 132px);
  max-height:920px;
  color:var(--paper);
  overflow:hidden;
  border-radius:5px;
  background:#17372c;
  padding:35px 46px
}

.hero-image,.hero-video,.hero-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-2;
  object-fit:cover;
  object-position:50% 43%
}

.hero-video {
  pointer-events:none;
  background:#17372c;
}

.hero-shade {
  z-index:-1;
  background:linear-gradient(180deg,rgba(4,25,18,.35),transparent 45%,rgba(4,25,18,.76)),linear-gradient(90deg,rgba(4,25,18,.27),transparent 65%)
}

.hero-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

.eyebrow,.section-label,.small-signature {
  font-size:.75rem;
  line-height:1.6;
  letter-spacing:.12em;
  font-weight:400
}

.hero-edition {
  font-size:.8125rem
}

.hero h1 {
  font-family:var(--serif);
  font-size:clamp(5rem,10.9vw,10.5rem);
  font-weight:400;
  line-height:1.07;
  letter-spacing:-.065em;
  margin:25px 0 0 -7px;
  white-space:nowrap
}

.hero h1 span {
  color:var(--gold)
}

.hero-bottom {
  position:absolute;
  left:46px;
  right:46px;
  bottom:67px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px
}

.hero-statement {
  font-family:var(--serif);
  font-size:clamp(1.8rem,2.5vw,2.65rem);
  line-height:1.16;
  margin:0 0 19px;
  letter-spacing:-.03em
}

.hero-description {
  font-size:.9375rem;
  line-height:1.6;
  margin:0;
  color:#e3e7df
}

.light-button {
  display:flex;
  gap:40px;
  align-items:center;
  background:var(--paper);
  color:var(--green);
  border-radius:30px;
  padding:17px 24px;
  font-size:.875rem;
  transition:background .2s,transform .2s
}

.light-button:hover {
  background:#e2d4b6;
  transform:translateY(-3px)
}

.light-button span {
  font-size:22px
}

.hero-caption {
  position:absolute;
  left:46px;
  right:auto;
  bottom:22px;
  font-size:.75rem;
  letter-spacing:.08em;
  color:#d7ded4
}

.section {
  padding-block:104px
}

.intro {
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:40px
}

.section-label {
  padding-top:8px
}

.index {
  color:#758373;
  margin-right:12px
}

.intro h2,h2 {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem,3.55vw,3.6rem);
  line-height:1.14;
  letter-spacing:-.045em;
  margin:0
}

em {
  font-weight:400;
  color:#74816d
}

.intro-copy {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:50px;
  margin-top:42px
}

.small-signature {
  font-size:.75rem;
  padding-top:5px
}

.intro-copy p {
  margin:0;
  line-height:1.8;
  color:var(--muted);
  max-width:560px
}

.work {
  padding-top:64px;
  border-top:1px solid var(--line)
}

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

.section-heading h2 {
  margin-top:24px;
  font-size:clamp(2.3rem,3.35vw,3.4rem)
}

.section-heading>p {
  color:var(--muted);
  font-size:.9375rem;
  line-height:1.65;
  margin:0 0 3px
}

.work-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:25px
}

.work-image {
  position:relative;
  height:465px;
  overflow:hidden;
  border-radius:3px;
  background:#dce1d6
}

.work-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease
}

.editorial img {
  object-position:50% 38%
}

.racecard {
  background:#cbd6d7
}

.racecard img {
  object-fit:contain;
  padding:38px 15px
}

.brand-world {
  background:#e5e7db
}

.brand-world img {
  object-fit:contain;
  padding:40px 16px
}

.work-tag {
  position:absolute;
  top:17px;
  left:17px;
  font-size:.75rem;
  letter-spacing:.06em;
  background:var(--paper);
  padding:7px 10px;
  border-radius:2px
}

.open-image {
  position:absolute;
  right:17px;
  bottom:17px;
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  background:var(--paper);
  color:var(--green);
  border-radius:50%;
  font-size:23px
}

.work-card:hover img {
  transform:scale(1.035)
}

.work-caption {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:20px
}

.work-caption h3 {
  font-size:1.0625rem;
  font-weight:400;
  margin:0;
  letter-spacing:-.025em
}

.work-caption>span {
  font-size:.75rem;
  color:var(--muted)
}

.work-card>p {
  font-size:.8125rem;
  line-height:1.5;
  color:var(--muted);
  margin:8px 0 0
}

.work-note {
  font-size:.75rem;
  line-height:1.7;
  color:var(--muted);
  margin:30px 0 0
}

.services {
  background:var(--green);
  color:var(--paper)
}

.services-inner {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:100px;
  padding-block:87px
}

.services .index {
  color:#b7c2ac
}

.services h2 {
  font-size:clamp(3rem,4.5vw,4.6rem);
  margin-top:30px
}

.services em {
  color:#b5bd9f
}

.services-intro>p {
  font-size:.9375rem;
  line-height:1.75;
  color:#c8d0c3;
  margin-top:30px
}

.text-link {
  display:inline-flex;
  gap:40px;
  border-bottom:1px solid #8b9c83;
  padding:14px 0;
  font-size:.875rem;
  margin-top:12px
}

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

.service-list article {
  display:grid;
  grid-template-columns:45px 1fr;
  gap:25px;
  border-top:1px solid #49604b;
  padding:34px 0
}

.service-list article:last-child {
  border-bottom:1px solid #49604b
}

.service-number {
  color:#baa578;
  font-size:.8125rem;
  padding-top:7px
}

.service-list h3 {
  font-family:var(--serif);
  font-weight:400;
  font-size:1.8rem;
  letter-spacing:-.03em;
  margin:0 0 15px
}

.service-list p {
  font-size:.9375rem;
  line-height:1.7;
  color:#c8d0c3;
  max-width:430px;
  margin:0
}

.contact {
  padding-block:94px 86px
}

.contact-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:33px
}

.contact h2 {
  font-size:clamp(2.8rem,5.3vw,5.4rem)
}

.contact h2 em {
  color:var(--green)
}

.contact-circle {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:115px;
  height:115px;
  border:1px solid #a9b3a0;
  border-radius:50%;
  font-size:60px;
  transition:color .2s,background .2s
}

.contact-circle:hover {
  background:var(--green);
  color:var(--paper)
}

.contact-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  margin-top:38px
}

.contact-bottom p {
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.7;
  margin:0
}

.contact-bottom>a {
  font-size:clamp(1rem,1.5vw,1.4rem);
  padding-bottom:7px;
  border-bottom:1px solid #9fa995;
  overflow-wrap:anywhere
}

footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  border-top:1px solid var(--line);
  padding-block:24px
}

footer p,footer>a:last-child {
  font-size:.75rem;
  color:var(--muted)
}

.skip {
  position:fixed;
  z-index:10;
  top:12px;
  left:12px;
  background:var(--paper);
  padding:12px;
  transform:translateY(-200%)
}

.skip:focus {
  transform:none
}

@media(min-width:1600px) {
  .hero h1 {
    font-size:11rem
  }
}

@media(max-width:1100px) {
  .header nav {
    gap:20px
  }
  .wrap {
    width:calc(100% - 44px)
  }
  .hero {
    padding-inline:32px
  }
  .hero-bottom {
    left:32px;
    right:32px
  }
  .hero-caption {
    right:32px
  }
  .intro {
    grid-template-columns:1fr;
    gap:28px
  }
  .intro-copy {
    grid-template-columns:1fr 1.5fr
  }
  .services-inner {
    gap:50px
  }
  .work-grid {
    gap:18px
  }
  .work-image {
    height:390px
  }
  .section {
    padding-block:80px
  }
  .work {
    padding-top:50px
  }
  .service-list article {
    gap:10px;
    grid-template-columns:30px 1fr
  }
}

@media(max-width:760px) {
  .wrap {
    width:calc(100% - 32px)
  }
  .header {
    height:85px;
    gap:15px
  }
  .brand {
    width:164px;
    height:40px
  }
  .brand img {
    width:193px;
    left:-17px;
    top:-44px
  }
  .header nav {
    display:none
  }
  .header-contact {
    font-size:.8125rem;
    gap:15px
  }
  .hero {
    min-height:650px;
    height:calc(100svh - 105px);
    max-height:850px;
    padding:25px 24px
  }
  .hero-top {
    align-items:flex-start
  }
  .eyebrow {
    font-size:.75rem;
    letter-spacing:.07em
  }
  .hero-edition {
    display:none
  }
  .hero h1 {
    font-size:clamp(3.5rem,11.6vw,6rem);
    letter-spacing:-.055em;
    margin:30px 0 0
  }
  .hero-image {
    object-position:85% center
  }
  .hero-shade {
    background:linear-gradient(180deg,rgba(4,25,18,.35),transparent 28%,rgba(4,25,18,.83)),linear-gradient(90deg,rgba(4,25,18,.22),transparent)
  }
  .hero-bottom {
    left:24px;
    right:24px;
    bottom:62px;
    display:block
  }
  .hero-statement {
    font-size:2rem
  }
  .hero-description {
    font-size:.875rem
  }
  .light-button {
    width:max-content;
    margin-top:26px;
    padding:14px 20px;
    gap:26px
  }
  .hero-caption {
    right:auto;
    left:24px;
    bottom:20px;
    font-size:.75rem;
    letter-spacing:0
  }
  .section {
    padding-block:64px
  }
  .intro h2 {
    font-size:2.25rem
  }
  .intro-copy {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:28px
  }
  .small-signature {
    display:none
  }
  .intro-copy p {
    font-size:1rem
  }
  .section-heading {
    display:block
  }
  .section-heading h2 {
    font-size:2.3rem;
    margin-block:20px
  }
  .section-heading>p br {
    display:none
  }
  .work-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .work-image {
    height:auto;
    aspect-ratio:4/4.3
  }
  .racecard img {
    padding:28px;
    max-height:none
  }
  .work-caption h3 {
    font-size:1.125rem
  }
  .work-note {
    margin-top:27px
  }
  .services-inner {
    grid-template-columns:1fr;
    gap:42px;
    padding-block:62px
  }
  .services h2 {
    font-size:3.3rem
  }
  .service-list article {
    padding-block:29px
  }
  .service-list h3 {
    font-size:1.8rem
  }
  .contact-main {
    gap:20px
  }
  .contact h2 {
    font-size:2.7rem
  }
  .contact-circle {
    width:64px;
    height:64px;
    font-size:35px
  }
  .contact-bottom {
    display:block
  }
  .contact-bottom>a {
    display:inline-block;
    margin-top:30px;
    font-size:1.1rem
  }
  footer {
    flex-wrap:wrap;
    gap:10px;
    padding-block:23px
  }
  footer .brand {
    width:155px
  }
  footer p {
    margin-left:auto
  }
  footer>a:last-child {
    width:100%;
    text-align:right;
    margin-top:10px
  }
}

@media(max-width:380px) {
  .header-contact {
    gap:8px;
    font-size:.75rem
  }
  .brand {
    width:147px
  }
  .hero {
    padding-inline:18px
  }
  .hero-bottom {
    left:18px;
    right:18px
  }
  .hero h1 {
    font-size:11.2vw
  }
  .contact h2 {
    font-size:2.35rem
  }
  .contact-circle {
    width:50px;
    height:50px
  }
}

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

/* Final brand canvas and full-width responsive scale. */
:root {
  --paper:#fffbf3
}

html {
  font-size:18px
}

body {
  font-size:1rem
}

.wrap {
  width:calc(100% - 64px);
  max-width:1920px
}

.header {
  height:112px
}

.brand {
  width:264px;
  height:60px;
  mix-blend-mode:normal
}

.brand img {
  width:310px;
  left:-28px;
  top:-72px
}

.header nav {
  font-size:.9rem;
  gap:38px
}

.header-contact {
  font-size:.9rem
}

.hero {
  height:calc(100svh - 136px);
  min-height:600px;
  max-height:1080px
}

.hero h1 {
  font-size:clamp(4rem,9.25vw,11rem)
}

.hero-statement {
  font-size:clamp(2rem,2.8vw,3rem)
}

.hero-description,.services-intro>p,.service-list p,.contact-bottom p {
  font-size:1rem
}

.hero-caption {
  font-size:.7rem
}

.section {
  padding-block:110px
}

.work {
  padding-top:70px
}

.work-image {
  height:clamp(400px,32vw,600px)
}

.intro h2,h2 {
  font-size:clamp(2.5rem,3.8vw,4.3rem)
}

.section-heading h2 {
  font-size:clamp(2.5rem,3.6vw,4rem)
}

.services-inner {
  padding-block:100px
}

.services h2 {
  font-size:clamp(3rem,4.8vw,5.6rem)
}

.contact h2 {
  font-size:clamp(2.8rem,5vw,6rem)
}

@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .header nav {
    gap:20px;
    font-size:.8rem
  }
  .header {
    gap:20px
  }
  .header .brand {
    width:220px;
    height:51px
  }
  .header .brand img {
    width:260px;
    left:-23px;
    top:-60px
  }
  .section {
    padding-block:85px
  }
  .work {
    padding-top:60px
  }
  .services-inner {
    padding-block:80px
  }
}

@media(max-width:760px) {
  html {
    font-size:16px
  }
  .wrap {
    width:calc(100% - 28px)
  }
  .header {
    height:88px;
    gap:12px
  }
  .header .brand,footer .brand {
    width:187px;
    height:44px
  }
  .brand img,.header .brand img {
    width:221px;
    left:-20px;
    top:-51px
  }
  .header-contact {
    font-size:.875rem;
    gap:15px
  }
  .hero {
    height:calc(100svh - 110px);
    min-height:670px;
    max-height:880px;
    padding-inline:22px
  }
  .hero h1 {
    font-size:clamp(1.8rem,9.4vw,4.4rem);
    margin-top:30px;
    letter-spacing:-.05em
  }
  .hero-statement {
    font-size:2.1rem
  }
  .hero-description {
    font-size:1rem
  }
  .hero-bottom {
    left:22px;
    right:22px
  }
  .hero-caption {
    font-size:.7rem;
    left:22px;
    right:16px;
    line-height:1.6
  }
  .section {
    padding-block:66px
  }
  .intro h2 {
    font-size:2.4rem
  }
  .section-heading h2 {
    font-size:2.4rem
  }
  .work-image {
    height:auto;
    aspect-ratio:4/4.3
  }
  .services-inner {
    padding-block:65px
  }
  .services h2 {
    font-size:3.5rem
  }
  .service-list h3 {
    font-size:1.8rem
  }
  .contact-main {
    display:block;
    position:relative
  }
  .contact h2 {
    font-size:clamp(2.2rem,8.8vw,3.5rem)
  }
  .contact-circle {
    width:64px;
    height:64px;
    margin-top:26px
  }
  .contact-bottom {
    margin-top:28px
  }
  footer .brand {
    width:174px
  }
  footer p {
    font-size:.75rem
  }
}

@media(max-width:380px) {
  .header .brand {
    width:163px;
    height:40px
  }
  .header .brand img {
    width:193px;
    left:-17px;
    top:-44px
  }
  .header-contact {
    font-size:.8125rem;
    gap:12px
  }
  .hero {
    padding-inline:18px
  }
  .hero h1 {
    font-size:9.1vw
  }
  .hero-bottom {
    left:18px;
    right:18px
  }
  .hero-statement {
    font-size:1.95rem
  }
  .hero-caption {
    left:18px;
    font-size:.65rem
  }
}

@media(min-width:761px) and (max-height:760px) {
  .hero {
    min-height:560px
  }
  .hero h1 {
    margin-top:18px
  }
  .hero-bottom {
    bottom:55px
  }
}


/* =========================================================
   SELECTED WORK — 3D COVERFLOW
   All portfolio images use a fixed 4:5 canvas (1600 × 2000).
   ========================================================= */
.work-carousel {
  position:relative;
  width:100%;
  overflow:hidden;
  padding:10px 0 4px;
}

.work-stage {
  position:relative;
  height:clamp(590px,46vw,830px);
  perspective:1600px;
  transform-style:preserve-3d;
  touch-action:pan-y;
  cursor:grab;
  outline:none;
}

.work-stage:active {
  cursor:grabbing;
}

.work-stage:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:8px;
}

.work-carousel .work-card {
  position:absolute;
  top:0;
  left:50%;
  width:clamp(330px,31vw,560px);
  opacity:0;
  z-index:0;
  pointer-events:none;
  transform:translateX(-50%) translateZ(-260px) scale(.7);
  transform-origin:center center;
  transition:
    transform .72s cubic-bezier(.2,.72,.2,1),
    opacity .5s ease,
    filter .5s ease;
  will-change:transform,opacity;
}

.work-carousel .work-card.is-active {
  opacity:1;
  z-index:3;
  pointer-events:auto;
  filter:none;
  transform:translateX(-50%) translateZ(90px) rotateY(0) scale(1);
}

.work-carousel .work-card.is-prev,
.work-carousel .work-card.is-next {
  opacity:.68;
  z-index:2;
  pointer-events:auto;
  filter:saturate(.78) brightness(.94);
}

.work-carousel .work-card.is-prev {
  transform:translateX(-135%) translateZ(-100px) rotateY(18deg) scale(.83);
}

.work-carousel .work-card.is-next {
  transform:translateX(35%) translateZ(-100px) rotateY(-18deg) scale(.83);
}

.work-carousel .work-image {
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border-radius:4px;
  background:#0d382a;
  box-shadow:0 28px 70px rgba(13,56,42,.12);
}

.work-carousel .work-image img,
.work-carousel .racecard img,
.work-carousel .brand-world img,
.work-carousel .editorial img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  padding:0;
  transition:transform .65s cubic-bezier(.2,.72,.2,1);
}

.work-carousel .work-card.is-active:hover .work-image img {
  transform:scale(1.025);
}

.work-carousel .work-card:not(.is-active) .open-image {
  opacity:0;
  transform:scale(.82);
}

.work-carousel .open-image {
  transition:opacity .3s ease,transform .3s ease,background .2s ease;
}

.work-carousel .work-card.is-active:hover .open-image {
  background:#e8dcc1;
  transform:translateY(-2px);
}

.work-carousel .work-caption {
  margin-top:17px;
}

.work-carousel .work-card>p {
  margin-top:7px;
}

.work-controls {
  width:min(560px,31vw);
  min-width:330px;
  margin:16px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.work-nav {
  width:46px;
  height:46px;
  border:1px solid #adb7a8;
  border-radius:50%;
  background:transparent;
  color:var(--green);
  font:inherit;
  font-size:20px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}

.work-nav:hover {
  background:var(--green);
  border-color:var(--green);
  color:var(--paper);
  transform:translateY(-2px);
}

.work-nav:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px;
}

.work-count {
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

@media(max-width:1100px) {
  .work-stage {
    height:clamp(550px,56vw,700px);
  }

  .work-carousel .work-card {
    width:clamp(310px,36vw,450px);
  }

  .work-carousel .work-card.is-prev {
    transform:translateX(-132%) translateZ(-90px) rotateY(17deg) scale(.82);
  }

  .work-carousel .work-card.is-next {
    transform:translateX(32%) translateZ(-90px) rotateY(-17deg) scale(.82);
  }

  .work-controls {
    width:clamp(310px,36vw,450px);
    min-width:0;
  }
}

@media(max-width:760px) {
  .work-carousel {
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding-inline:14px;
  }

  .work-stage {
    height:clamp(470px,132vw,650px);
    perspective:1100px;
  }

  .work-carousel .work-card {
    width:min(82vw,430px);
  }

  .work-carousel .work-card.is-active {
    transform:translateX(-50%) translateZ(40px) scale(1);
  }

  .work-carousel .work-card.is-prev {
    opacity:.38;
    transform:translateX(-127%) translateZ(-90px) rotateY(16deg) scale(.82);
  }

  .work-carousel .work-card.is-next {
    opacity:.38;
    transform:translateX(27%) translateZ(-90px) rotateY(-16deg) scale(.82);
  }

  .work-carousel .work-tag {
    top:13px;
    left:13px;
    font-size:.68rem;
    padding:6px 8px;
  }

  .work-carousel .open-image {
    right:13px;
    bottom:13px;
    width:35px;
    height:35px;
  }

  .work-carousel .work-caption {
    margin-top:14px;
  }

  .work-carousel .work-caption h3 {
    font-size:1rem;
  }

  .work-controls {
    width:min(82vw,430px);
    margin-top:10px;
  }

  .work-nav {
    width:42px;
    height:42px;
  }
}

@media(max-width:380px) {
  .work-stage {
    height:455px;
  }

  .work-carousel .work-card {
    width:82vw;
  }
}

@media(prefers-reduced-motion:reduce) {
  .work-carousel .work-card,
  .work-carousel .work-image img,
  .work-nav {
    transition:none!important;
  }
}


/* Hero film controls */
.hero-audio-toggle {
  position:absolute;
  right:46px;
  bottom:18px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(5,24,18,.42);
  color:var(--paper);
  font:inherit;
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.hero-audio-toggle:hover {
  background:rgba(5,24,18,.68);
  border-color:rgba(255,255,255,.72);
  transform:translateY(-2px);
}

.hero-audio-toggle:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px;
}

.hero-audio-mark {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(190,155,96,.16);
}

.hero-audio-toggle[aria-pressed="true"] .hero-audio-mark {
  background:#f5f3eb;
  box-shadow:0 0 0 4px rgba(245,243,235,.15);
}

.hero h1,
.hero-bottom,
.hero-caption {
  transition:opacity .45s ease,transform .45s ease;
}

.hero.is-video-endcard h1,
.hero.is-video-endcard .hero-bottom,
.hero.is-video-endcard .hero-caption {
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
}

@media(max-width:760px) {
  .hero-video {
    object-position:50% 50%;
  }

  .hero-audio-toggle {
    right:18px;
    bottom:16px;
    min-height:38px;
    padding:0 13px;
    font-size:.64rem;
  }

  .hero-caption {
    left:18px;
    right:128px;
    bottom:21px;
  }
}

/* =========================================================
   EDITORIAL SCROLL EXPERIENCE
   Desktop: subtle depth + overlapping chapter surfaces.
   Mobile: natural document flow + horizontal portfolio swipe.
   ========================================================= */

.header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,251,243,.84);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
  border-bottom:1px solid rgba(13,56,42,.06);
}

.hero {
  transform-style:preserve-3d;
}

.hero-image,
.hero-video {
  transform:translate3d(0,var(--hero-shift,0px),0) scale(1.035);
  will-change:transform;
}

.chapter-surface {
  --chapter-scale:1;
  --chapter-tilt:0deg;
  --chapter-opacity:1;
  position:relative;
  z-index:2;
  transform-origin:50% 0;
  transform:perspective(1600px) rotateX(var(--chapter-tilt)) scale(var(--chapter-scale));
  opacity:var(--chapter-opacity);
  will-change:transform,opacity;
}

.intro.chapter-surface,
.work.chapter-surface,
.contact.chapter-surface {
  background:var(--paper);
}

.work-swipe-hint {
  display:none;
}

/* Reveal motion: only enabled when JS is active. */
.js .reveal-item {
  opacity:0;
  transform:translate3d(0,28px,0) scale(.992);
  transition:
    opacity .72s cubic-bezier(.2,.7,.2,1),
    transform .85s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}

.js .reveal-item.is-visible {
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

@media(min-width:901px) {
  main {
    perspective:1800px;
  }

  .chapter-surface {
    border-radius:20px 20px 0 0;
    box-shadow:0 -22px 54px rgba(13,56,42,.045);
  }

  .intro.chapter-surface {
    margin-top:12px;
    padding-top:88px;
  }

  .work.chapter-surface,
  .contact.chapter-surface {
    margin-top:-14px;
  }

  .services.chapter-surface {
    margin-top:-14px;
    overflow:hidden;
    box-shadow:0 -28px 70px rgba(4,25,18,.13);
  }

  .chapter-surface::before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(190,155,96,.34),transparent);
    pointer-events:none;
  }

  .work .section-heading {
    position:relative;
    z-index:4;
  }

  .service-list article {
    transition:transform .28s ease,background .28s ease,padding-inline .28s ease;
  }

  .service-list article:hover {
    transform:translateX(8px);
    background:rgba(255,255,255,.025);
    padding-inline:10px;
  }
}

@media(max-width:900px) {
  .chapter-surface {
    transform:none!important;
    opacity:1!important;
    box-shadow:none;
  }

  .hero-image,
  .hero-video {
    transform:none;
  }
}

@media(max-width:760px) {
  /* Mobile should feel like a magazine, not a forced full-screen presentation. */
  .header {
    background:rgba(255,251,243,.92);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }

  .section {
    min-height:0!important;
    height:auto!important;
    padding-block:58px;
  }

  .intro,
  .work,
  .contact,
  .services,
  .services-inner {
    min-height:0!important;
    height:auto!important;
  }

  .intro {
    gap:20px;
  }

  .intro-copy {
    margin-top:22px;
  }

  .work {
    padding-top:54px;
    padding-bottom:58px;
  }

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

  .section-heading>p {
    margin-top:8px;
  }

  .work-swipe-hint {
    display:block;
    margin:0 0 18px;
    font-size:.7rem;
    letter-spacing:.11em;
    color:var(--muted);
    text-transform:uppercase;
  }

  /* Native horizontal magazine swipe on mobile. */
  .work-carousel {
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:0;
    overflow:visible;
  }

  .work-stage {
    position:relative;
    display:flex;
    align-items:flex-start;
    height:auto!important;
    min-height:0!important;
    overflow-x:auto;
    overflow-y:visible;
    gap:14px;
    padding:4px 14vw 12px 14px;
    perspective:none;
    transform-style:flat;
    scroll-snap-type:x mandatory;
    scroll-padding-left:14px;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y;
    cursor:grab;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .work-stage::-webkit-scrollbar {
    display:none;
  }

  .work-carousel .work-card,
  .work-carousel .work-card.is-active,
  .work-carousel .work-card.is-prev,
  .work-carousel .work-card.is-next {
    position:relative;
    top:auto;
    left:auto;
    flex:0 0 min(82vw,420px);
    width:auto;
    opacity:1;
    z-index:1;
    pointer-events:auto;
    filter:none;
    transform:none!important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }

  .work-carousel .work-card.is-active {
    z-index:2;
  }

  .work-carousel .work-card:not(.is-active) .open-image,
  .work-carousel .work-card .open-image {
    opacity:1;
    transform:none;
  }

  .work-carousel .work-image {
    box-shadow:0 18px 42px rgba(13,56,42,.10);
  }

  .work-controls {
    width:calc(100% - 28px);
    margin:12px 14px 0;
    min-width:0;
  }

  .work-note {
    margin-top:22px;
  }

  .services-inner {
    padding-block:58px;
    gap:34px;
  }

  .service-list article {
    padding-block:24px;
  }

  .contact {
    padding-block:62px 58px;
  }

  .contact-bottom>a {
    margin-top:22px;
  }

  .js .reveal-item {
    transform:translate3d(0,18px,0);
    transition-duration:.62s;
  }
}

@media(max-width:380px) {
  .work-stage {
    padding-right:11vw;
  }

  .work-carousel .work-card,
  .work-carousel .work-card.is-active,
  .work-carousel .work-card.is-prev,
  .work-carousel .work-card.is-next {
    flex-basis:84vw;
  }
}

@media(prefers-reduced-motion:reduce) {
  .chapter-surface,
  .hero-image,
  .hero-video,
  .reveal-item {
    transform:none!important;
    opacity:1!important;
    transition:none!important;
  }
}

/* =========================================================
   HEADER FINAL — full width, clean and non-sticky
   ========================================================= */
.header,
.header.wrap {
  width:100%;
  max-width:none;
  margin:0;
  padding-inline:32px;
  background:#fffbf3;
  border-bottom:1px solid rgba(13,56,42,.12);
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  z-index:10;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

@media(max-width:760px) {
  .header,
  .header.wrap {
    width:100%;
    max-width:none;
    margin:0;
    padding-inline:18px;
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    background:#fffbf3;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}