:root {

  --dark:#171b17;

  --dark2:#242a23;

  --cream:#eeece5;

  --paper:#f5f2eb;

  --gold:#b69a70;

  --ink:#292b26;

  --serif:"Cormorant Garamond",Georgia,serif;

  --sans:"Manrope",Arial,sans-serif;

}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {

  margin:0;

  background:var(--cream);

  color:var(--ink);

  font-family:var(--sans);

  overflow-x:hidden;

}

body.modal-open { overflow:hidden; }

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

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

button { font:inherit; cursor:pointer; }

section { scroll-margin-top:82px; }

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

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

.eyebrow {

  font-size:10px;

  font-weight:600;

  letter-spacing:.3em;

  text-transform:uppercase;

}

.gold { color:var(--gold); }

/* Progress indicator */

.progress {

  position:fixed;

  z-index:110;

  top:0;

  left:0;

  width:0;

  height:3px;

  background:var(--gold);

  pointer-events:none;

}

/* Navigation */

.top {

  position:fixed;

  top:0;

  left:0;

  width:100%;

  z-index:100;

  padding:24px 5vw;

  display:flex;

  align-items:center;

  justify-content:space-between;

  color:#fff;

  transition:background .4s,padding .4s;

}

.top.scrolled {

  background:rgba(18,22,18,.96);

  padding-top:14px;

  padding-bottom:14px;

  backdrop-filter:blur(15px);

}

.identity {

  display:flex;

  align-items:center;

  gap:15px;

}

.identity svg { width:34px; height:45px; }

.brand {

  display:flex;

  flex-direction:column;

}

.brand strong {

  font:400 29px/1 var(--serif);

  letter-spacing:.15em;

}

.brand small {

  margin-top:5px;

  font-size:8px;

  letter-spacing:.33em;

}

.links {

  display:flex;

  align-items:center;

  gap:35px;

}

.links a {

  font-size:10px;

  font-weight:600;

  letter-spacing:.18em;

  text-transform:uppercase;

  transition:color .3s;

}

.links a:hover { color:var(--gold); }

.menu {

  display:none;

  color:#fff;

  background:transparent;

  border:0;

  font-size:29px;

}

/* HERO */

.hero {

  position:relative;

  min-height:100svh;

  display:grid;

  place-items:center;

  overflow:hidden;

  color:#fff;

  background:var(--dark);

  isolation:isolate;

}

.zoom-image {

  position:absolute;

  inset:-7%;

  width:114%;

  height:114%;

  object-fit:cover;

  transform:scale(1.03);

  will-change:transform;

}

.hero::after {

  content:"";

  position:absolute;

  inset:0;

  z-index:0;

  background:linear-gradient(

    180deg,

    rgba(0,0,0,.5),

    rgba(0,0,0,.26) 45%,

    rgba(0,0,0,.62)

  );

}

.hero-content {

  position:relative;

  z-index:2;

  text-align:center;

  padding:140px 20px 110px;

}

.hero h1 {

  font:300 clamp(85px,13vw,188px)/.78 var(--serif);

  letter-spacing:-.04em;

  margin:35px 0;

}

.hero h1 em { font-weight:300; }

.hero-sub {

  font-size:11px;

  text-transform:uppercase;

  letter-spacing:.22em;

  line-height:2.1;

}

.scroll-cue {

  position:absolute;

  z-index:2;

  bottom:25px;

  left:50%;

  transform:translateX(-50%);

  display:flex;

  align-items:center;

  flex-direction:column;

  gap:14px;

  font-size:9px;

  text-transform:uppercase;

  letter-spacing:.2em;

}

.scroll-cue::after {

  content:"";

  width:1px;

  height:50px;

  background:rgba(255,255,255,.7);

  animation:linePulse 2s infinite;

}

@keyframes linePulse {

  0%,100% { opacity:.3; transform:scaleY(.6); }

  50% { opacity:1; transform:scaleY(1); }

}

/* Studio philosophy with photographic background */

.philosophy {

  position:relative;

  isolation:isolate;

  min-height:88svh;

  padding:125px 6vw;

  display:flex;

  justify-content:center;

  align-items:center;

  flex-direction:column;

  text-align:center;

  color:#fff;

  overflow:hidden;

  background:#292d27;

}

.philosophy::before {

  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  background:linear-gradient(

    180deg,

    rgba(12,16,13,.6),

    rgba(12,16,13,.72),

    rgba(12,16,13,.64)

  );

}

.philosophy .zoom-image { z-index:-2; }

.philosophy h2 {

  font:300 clamp(48px,6.5vw,94px)/1.1 var(--serif);

  max-width:1050px;

  margin:35px auto;

}

.philosophy h2 em {

  color:#e2c39a;

  font-weight:300;

}

.philosophy p {

  max-width:570px;

  font-size:13px;

  line-height:2.1;

  color:#f2f0e9;

  margin:0 auto;

  text-shadow:0 2px 8px #0008;

}

/* Immersive image expansion */

.immersive {

  height:215vh;

  position:relative;

}

.immersive-pin {

  position:sticky;

  top:0;

  height:100svh;

  display:grid;

  place-items:center;

  overflow:hidden;

}

.immersive-frame {

  width:76vw;

  height:67svh;

  position:relative;

  overflow:hidden;

  background:var(--dark);

  will-change:width,height;

}

.immersive-frame img {

  width:100%;

  height:100%;

  object-fit:cover;

  transform:scale(1.09);

  will-change:transform;

}

.immersive-frame::after {

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 75%);

}

.immersive-caption {

  position:absolute;

  bottom:10%;

  left:8%;

  z-index:2;

  color:#fff;

  opacity:0;

  transform:translateY(30px);

}

.immersive-caption h2 {

  font:300 clamp(65px,10vw,145px)/.85 var(--serif);

  margin:20px 0;

}

/* Section headers */

.section-heading {

  display:flex;

  justify-content:space-between;

  align-items:end;

  gap:40px;

  padding:115px 6vw 55px;

}

.section-heading h2 {

  font:300 clamp(62px,9vw,125px)/.9 var(--serif);

  margin:22px 0 0;

}

.section-heading p {

  max-width:340px;

  font-size:13px;

  color:#71746e;

  line-height:2;

}

/* Portfolio */

.portfolio { padding:0 6vw 90px; }

.project {

  display:grid;

  grid-template-columns:1.15fr .85fr;

  gap:6vw;

  align-items:center;

  margin-bottom:95px;

}

.project.reverse {

  grid-template-columns:.85fr 1.15fr;

}

.project.reverse .project-image { order:2; }

.project-image {

  position:relative;

  overflow:hidden;

  background:#bdbab0;

  cursor:zoom-in;

}

.project-image img {

  height:clamp(300px,40vw,570px);

  object-fit:cover;

  transition:transform 1s cubic-bezier(.2,.65,.2,1);

}

.project-image:hover img { transform:scale(1.065); }

.project-image::after {

  content:"View Image ↗";

  position:absolute;

  bottom:0;

  right:0;

  padding:15px 20px;

  background:rgba(23,27,23,.85);

  color:#fff;

  font-size:10px;

  letter-spacing:.15em;

}

.project-text { padding:15px; }

.project-text .count {

  font-size:11px;

  letter-spacing:.2em;

  color:#9d8058;

}

.project-text h3 {

  font:300 clamp(54px,6vw,94px)/.92 var(--serif);

  margin:27px 0;

}

.project-text p {

  max-width:365px;

  font-size:13px;

  line-height:2;

  color:#73756f;

}

.fine-link {

  display:inline-block;

  margin-top:25px;

  padding-bottom:12px;

  border-bottom:1px solid var(--gold);

  font-size:10px;

  letter-spacing:.2em;

  text-transform:uppercase;

}

/* Cinematic photographic divider */

.photo-banner {

  height:73svh;

  position:relative;

  isolation:isolate;

  display:grid;

  place-items:center;

  overflow:hidden;

  color:#fff;

  text-align:center;

  background:#20241f;

}

.photo-banner::after {

  content:"";

  position:absolute;

  z-index:-1;

  inset:0;

  background:rgba(0,0,0,.52);

}

.photo-banner .zoom-image { z-index:-2; }

.photo-banner-content {

  padding:30px;

  position:relative;

  z-index:1;

}

.photo-banner h2 {

  font:300 clamp(67px,11vw,155px)/.86 var(--serif);

  margin:20px 0;

}

/* Additional photo gallery */

.gallery-section {

  padding:90px 6vw 130px;

  background:var(--paper);

}

.gallery-heading {

  text-align:center;

  margin-bottom:55px;

}

.gallery-heading h2 {

  font:300 clamp(63px,9vw,115px)/.95 var(--serif);

  margin:20px auto;

}

.gallery-grid {

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:18px;

}

.gallery-item {

  display:block;

  position:relative;

  overflow:hidden;

  background:#cfcbc2;

  cursor:zoom-in;

  border:0;

  padding:0;

  width:100%;

}

.gallery-item img {

  height:clamp(220px,26vw,380px);

  object-fit:cover;

  transition:transform .9s cubic-bezier(.2,.65,.2,1),filter .7s;

}

.gallery-item:hover img {

  transform:scale(1.07);

  filter:brightness(.82);

}

.gallery-item span {

  position:absolute;

  bottom:20px;

  left:20px;

  color:#fff;

  font-size:11px;

  text-shadow:0 2px 8px #000;

  letter-spacing:.15em;

  opacity:0;

  transform:translateY(10px);

  transition:.4s;

}

.gallery-item:hover span {

  opacity:1;

  transform:translateY(0);

}

/* Services */

.expertise { padding:120px 6vw 140px; }

.expertise h2 {

  font:300 clamp(65px,9vw,115px)/.95 var(--serif);

  margin:25px 0 70px;

}

.service {

  display:grid;

  grid-template-columns:70px 1fr 1fr;

  gap:20px;

  padding:35px 0;

  border-top:1px solid #c7c2b7;

}

.service:last-child { border-bottom:1px solid #c7c2b7; }

.service .number {

  color:#a48a68;

  font-size:12px;

}

.service h3 {

  font:300 clamp(34px,4vw,58px)/1 var(--serif);

  margin:0;

}

.service p {

  max-width:360px;

  margin:0;

  font-size:13px;

  line-height:2;

  color:#73756f;

}

/* Team */

.team {

  background:#e8e4db;

  padding:110px 6vw 130px;

}

.team h2 {

  font:300 clamp(60px,8vw,108px)/.94 var(--serif);

  margin:24px 0;

}

.team-intro {

  max-width:590px;

  font-size:14px;

  color:#73736d;

  line-height:2;

  margin:20px 0 50px;

}

.team-grid {

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:22px;

}

.team-card img {

  height:clamp(210px,25vw,340px);

  object-fit:cover;

  filter:saturate(.7);

}

.team-card h3 {

  font:400 clamp(24px,2.3vw,34px)/1.1 var(--serif);

  margin:20px 0 8px;

}

.team-card .role {

  color:#9a7950;

  font-size:10px;

  letter-spacing:.13em;

  text-transform:uppercase;

}

.team-card p {

  font-size:12px;

  line-height:1.8;

  color:#74766e;

}

.photo-note {

  font-size:9px;

  letter-spacing:.12em;

  color:#777;

  margin-top:12px;

  display:block;

}

/* Contact */

.contact {

  padding:130px 6vw;

  color:#fff;

  background:#1d241e;

  text-align:center;

}

.contact h2 {

  font:300 clamp(75px,11vw,155px)/.88 var(--serif);

  margin:28px 0;

}

.contact > p {

  max-width:475px;

  margin:25px auto 40px;

  color:#c0c4ba;

  font-size:13px;

  line-height:2;

}

.contact-links {

  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  gap:25px;

}

.contact-links a {

  display:flex;

  flex-direction:column;

  gap:9px;

  align-items:center;

  min-width:220px;

  padding:20px;

  border-top:1px solid #817459;

}

.contact-links span {

  color:var(--gold);

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.18em;

}

.contact-links strong {

  font-size:15px;

  font-weight:400;

}

/* Footer */

.footer {

  background:#131812;

  padding:30px 6vw;

  display:flex;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:20px;

  color:#aeafa6;

  font-size:10px;

  letter-spacing:.11em;

}

/* Floating contact */

.floating-contact {

  position:fixed;

  right:21px;

  bottom:22px;

  z-index:90;

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  gap:10px;

}

.floating-contact a {

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:50px;

  border-radius:40px;

  box-shadow:0 7px 25px #0004;

  transition:transform .3s;

}

.floating-contact a:hover { transform:translateY(-4px); }

.whatsapp {

  background:#244b38;

  color:#fff;

  padding:0 20px;

  font-size:12px;

}

.phone {

  background:var(--gold);

  color:#171a16;

  width:50px;

  font-size:21px;

}

/* Reveal animations */

.reveal {

  opacity:0;

  transform:translateY(32px);

  transition:opacity .9s ease,transform .9s ease;

}

.reveal.visible {

  opacity:1;

  transform:translateY(0);

}

.reveal-delay { transition-delay:.15s; }

/* Gallery lightbox */

.lightbox {

  position:fixed;

  inset:0;

  z-index:200;

  display:none;

  align-items:center;

  justify-content:center;

  background:rgba(12,15,12,.97);

  padding:50px;

}

.lightbox.open { display:flex; }

.lightbox figure { margin:0; text-align:center; }

.lightbox img {

  width:auto;

  max-width:90vw;

  max-height:80svh;

  object-fit:contain;

}

.lightbox figcaption {

  color:#fff;

  font-size:11px;

  letter-spacing:.18em;

  padding:20px;

}

.lightbox-close {

  position:absolute;

  top:15px;

  right:26px;

  background:none;

  border:0;

  color:#fff;

  font-size:43px;

}

.lightbox-arrow {

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  background:rgba(255,255,255,.1);

  border:1px solid #ffffff55;

  color:#fff;

  font-size:30px;

  width:46px;

  height:55px;

}

.lightbox-prev { left:12px; }

.lightbox-next { right:12px; }

/* Tablet */

@media(max-width:900px) {

  .links {

    display:none;

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#1c211c;

    flex-direction:column;

    align-items:flex-start;

    padding:30px 6vw;

    gap:26px;

  }

  .links.open { display:flex; }

  .menu { display:block; }

  .project,.project.reverse {

    grid-template-columns:1fr;

    gap:22px;

  }

  .project.reverse .project-image { order:0; }

  .project-image img { height:48svh; }

  .project-text { padding:0; }

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

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

}

/* Mobile */

@media(max-width:600px) {

  .top { padding:17px 5vw; }

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

  .hero h1 { font-size:clamp(77px,19vw,115px); }

  .hero-sub { font-size:9px; }

  .philosophy {

    padding:105px 7vw;

    min-height:75svh;

  }

  .philosophy h2 {

    font-size:clamp(43px,9.5vw,66px);

  }

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

  .immersive { height:185vh; }

  .immersive-frame {

    width:88vw;

    height:55svh;

  }

  .section-heading {

    display:block;

    padding:85px 6vw 50px;

  }

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

  .portfolio { padding-bottom:40px; }

  .project { margin-bottom:75px; }

  .project-image img { height:45svh; }

  .project-text h3 { font-size:60px; }

  .photo-banner { height:60svh; }

  .gallery-section { padding:80px 5vw; }

  .gallery-grid { gap:11px; }

  .gallery-item img { height:210px; }

  .gallery-item span {

    opacity:1;

    transform:none;

    font-size:9px;

    bottom:12px;

    left:10px;

  }

  .expertise { padding:90px 6vw; }

  .service { grid-template-columns:35px 1fr; }

  .service p { grid-column:2; }

  .team { padding:85px 6vw; }

  .team-grid { gap:25px 13px; }

  .team-card img { height:210px; }

  .team-card h3 { font-size:24px; }

  .contact { padding:95px 6vw; }

  .contact h2 { font-size:75px; }

  .floating-contact { right:11px; bottom:11px; }

  .lightbox { padding:28px; }

}

/* Reduced motion accessibility */

@media(prefers-reduced-motion:reduce) {

  *,*::before,*::after {

    scroll-behavior:auto!important;

    animation:none!important;

    transition:none!important;

  }

  .reveal {

    opacity:1;

    transform:none;

  }

  .zoom-image { transform:scale(1.03)!important; }

  .immersive-caption {

    opacity:1!important;

    transform:none!important;

  }

}


/* Looping leftward cinematic image backdrop in the contact section */
#contact.contact {position:relative;isolation:isolate;overflow:hidden;min-height:78svh;display:flex;align-items:center;justify-content:center;flex-direction:column;}
#contact .contact-cinema {position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;}
#contact .cinema-track {display:flex;height:100%;width:max-content;animation:cinema-left 68s linear infinite;will-change:transform;}
#contact .cinema-slide {height:100%;width:72vw;flex:0 0 72vw;overflow:hidden;}
#contact .cinema-slide img {height:100%;width:100%;object-fit:cover;display:block;}
#contact::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,13,9,.76),rgba(8,13,9,.54) 50%,rgba(8,13,9,.76));pointer-events:none;}
#contact > :not(.contact-cinema) {position:relative;z-index:2;}
#contact h2 {color:#fff;text-shadow:0 3px 25px #0008;}
#contact > p {color:#fff;text-shadow:0 2px 14px #000b;}
#contact .eyebrow {color:#efd1a2;}
#contact .contact-links a {color:#fff;}
@keyframes cinema-left {from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:768px) {#contact .cinema-slide{width:100vw;flex-basis:100vw;}#contact .cinema-track{animation-duration:54s;}#contact h2{font-size:clamp(58px,13vw,85px);}}
@media(prefers-reduced-motion:reduce){#contact .cinema-track{animation:none!important;will-change:auto;}}

/* iPhone / small-screen polish */
html { -webkit-text-size-adjust:100%; }
body { min-width:320px; }
img { max-width:100%; }
@supports (padding: env(safe-area-inset-bottom)) {
 .floating-contact { bottom:max(14px, env(safe-area-inset-bottom)); right:max(12px, env(safe-area-inset-right)); }
}
@media (max-width: 767px) {
  .top { padding:14px 5vw; min-height:70px; }
  .top.scrolled { padding:11px 5vw; }
  .identity { gap:9px; }
  .identity svg { width:28px;height:38px;flex-shrink:0; }
  .brand strong { font-size:clamp(20px,6vw,25px); }
  .brand small { font-size:7px; letter-spacing:.22em; }
  .menu { min-width:44px;min-height:44px;touch-action:manipulation; }
  .links { top:100%; max-height:calc(100svh - 70px);overflow-y:auto; padding:22px 6vw 30px; }
  .links a { padding:9px 0; display:block; font-size:12px; }
  .hero { min-height:92svh; }
  .hero-content { padding:110px 6vw 95px; max-width:100%; }
  .hero h1 { font-size:clamp(67px,18vw,110px); margin:25px 0 26px; }
  .hero-sub { font-size:10px; letter-spacing:.13em; }
  .zoom-image { inset:-4%;width:108%;height:108%; }
  .philosophy { min-height:72svh; padding:105px 7vw 85px; }
  .philosophy h2 { font-size:clamp(39px,9vw,62px); line-height:1.08; margin:24px auto; overflow-wrap:normal; }
  .philosophy p { font-size:12px; line-height:1.9; }
  .immersive { height:170svh; }
  .immersive-frame { max-width:100vw; }
  .immersive-caption h2 { font-size:clamp(58px,13vw,89px); }
  .section-heading { padding-top:80px; }
  .section-heading h2,.gallery-heading h2,.expertise h2,.team h2 { font-size:clamp(53px,12vw,82px); }
  .section-heading p { font-size:12px; }
  .project-image img { height:clamp(270px,62svh,500px); }
  .project-text h3 { font-size:clamp(50px,12vw,74px); }
  .project-text p,.service p { font-size:12px;line-height:1.85; }
  .photo-banner h2 { font-size:clamp(58px,12vw,90px); }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-item img { height:clamp(160px,53vw,260px); }
  .team-card img { height:clamp(175px,54vw,290px); }
  .team-card h3 { font-size:clamp(21px,5.5vw,28px);overflow-wrap:anywhere; }
  .contact { padding:95px 6vw 105px; }
  #contact.contact { min-height:70svh; }
  #contact h2 { font-size:clamp(56px,13vw,86px);line-height:.94; }
  #contact > p { margin:18px auto 25px;line-height:1.85; font-size:12px; }
  .contact-links { gap:4px 12px; }
  .contact-links a { min-width:0;flex:1 1 145px; padding:17px 5px; }
  .contact-links strong { font-size:clamp(12px,3.5vw,15px); }
  .floating-contact a { min-height:48px; }
  .whatsapp { padding:0 15px; }
  .phone { width:48px; }
  .lightbox { padding:54px 16px 30px; }
  .lightbox img { max-width:calc(100vw - 32px); max-height:75svh; }
  .lightbox-prev { left:4px; }.lightbox-next { right:4px; }
  .lightbox-arrow { width:36px;height:48px;font-size:25px; }
  .footer { line-height:1.7; }
  #contact .cinema-track { animation-duration:75s; }
}
@media(max-width:375px) {
  .brand strong {font-size:20px;}
  .gallery-item img {height:170px;}
  .team-grid {grid-template-columns:1fr 1fr;}
  .team-card p {font-size:11px;}
}
@media (hover:none) {
  .gallery-item span { opacity:1;transform:none; }
  .project-image::after { padding:10px 13px; }
}