@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500&display=swap");

:root{
  --black:#070707;
  --white:#f3f2ef;
  --pink:#ff1688;
  --cream:#f2ece2;
  --brown:#4a382b;
  --brown2:#6f5a4a;
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(74,56,43,.16);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
img{max-width:100%}

/* LANDING */
.landing-page{background:#000;color:#fff;overflow-x:hidden}
.landing{min-height:100svh;display:grid;grid-template-columns:1fr 1fr}
.landing-panel{min-height:100svh;position:relative;overflow:hidden;isolation:isolate;cursor:pointer}
.landing-panel + .landing-panel{border-left:1px solid rgba(255,255,255,.32)}
.landing-panel:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.04) 68%);
  transition:.5s ease
}
.landing-panel:hover:after{background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.08) 68%)}
.landing-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.75,.2,1)}
.landing-panel:hover .landing-bg{transform:scale(1.035)}
.landing-logo{
  position:absolute;z-index:3;left:50%;top:43%;transform:translate(-50%,-50%);
  width:min(330px,58%);max-height:220px;object-fit:contain;
  filter:drop-shadow(0 12px 25px rgba(0,0,0,.34));
  transition:transform .55s cubic-bezier(.2,.75,.2,1)
}
.landing-panel:hover .landing-logo{transform:translate(-50%,-50%) scale(1.04)}
.landing-copy{position:absolute;z-index:3;left:clamp(20px,4vw,55px);bottom:clamp(24px,4.5vw,55px)}
.kicker{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.8;margin-bottom:10px}
.landing-copy h2{margin:0;font-size:clamp(30px,4.2vw,58px);letter-spacing:-.055em;line-height:.9}
.quiet .landing-copy h2{font-family:"Playfair Display",Georgia,serif;font-weight:400;letter-spacing:-.03em}
.landing-tag{margin-top:13px;font-size:12px;letter-spacing:.08em;opacity:.8}

/* SHARED PAGE */
.site-page{min-height:100vh}
.dark{background:var(--black);color:var(--white)}
.light{background:var(--cream);color:var(--brown)}
.page-nav{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(18px,4vw,56px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-dark)
}
.dark .page-nav{background:rgba(7,7,7,.86)}
.light .page-nav{background:rgba(242,236,226,.9);border-color:var(--line-light)}
.nav-left,.nav-right{display:flex;align-items:center;gap:18px}
.nav-link,.nav-inquire{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase
}
.nav-inquire{border:1px solid currentColor;padding:10px 15px;transition:.2s}
.dark .nav-inquire:hover{background:var(--pink);border-color:var(--pink);color:#000}
.light .nav-inquire:hover{background:var(--brown);color:var(--cream)}
.nav-brand{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.72}

/* HERO */
.hero{
  width:min(var(--max),calc(100% - 40px));
  min-height:76svh;margin:auto;display:grid;place-items:center;text-align:center;
  padding:70px 0 90px
}
.hero-inner{width:min(850px,100%)}
.hero-logo{display:block;width:min(260px,55vw);max-height:170px;object-fit:contain;margin:0 auto 30px}
.hero-kicker{font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.58}
.hero h1{
  margin:15px 0 0;font-size:clamp(52px,8vw,108px);line-height:.86;
  letter-spacing:-.065em
}
.light .hero h1,.light .section-title{font-family:"Playfair Display",Georgia,serif;font-weight:400;letter-spacing:-.035em}
.hero p{max-width:650px;margin:25px auto 0;line-height:1.8;font-size:15px;opacity:.67}
.hero-button{
  display:inline-flex;margin-top:30px;padding:13px 20px;
  border:1px solid currentColor;font-size:10px;letter-spacing:.22em;text-transform:uppercase;transition:.2s
}
.dark .hero-button:hover{background:var(--pink);border-color:var(--pink);color:#000}
.light .hero-button:hover{background:var(--brown);border-color:var(--brown);color:var(--cream)}

/* PORTFOLIO */
.section{width:min(var(--max),calc(100% - 40px));margin:auto;padding:85px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}
.section-eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.56}
.section-title{margin:8px 0 0;font-size:clamp(36px,5vw,64px);line-height:.95;letter-spacing:-.055em}
.controls{display:flex;gap:8px}
.controls button{
  width:44px;height:44px;background:transparent;border:1px solid currentColor;color:inherit;
  transition:.2s
}
.dark .controls button:hover{background:var(--pink);border-color:var(--pink);color:#000}
.light .controls button:hover{background:var(--brown);border-color:var(--brown);color:var(--cream)}
.carousel{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:3px 2px 18px;scrollbar-width:thin;touch-action:pan-x;cursor:grab
}
.carousel:active{cursor:grabbing}
.carousel::-webkit-scrollbar{height:5px}
.dark .carousel::-webkit-scrollbar-track{background:#171717}
.dark .carousel::-webkit-scrollbar-thumb{background:var(--pink)}
.light .carousel::-webkit-scrollbar-track{background:#dcd2c5}
.light .carousel::-webkit-scrollbar-thumb{background:var(--brown)}
.card{
  flex:0 0 clamp(285px,38vw,500px);
  aspect-ratio:4/5;overflow:hidden;scroll-snap-align:start;margin:0;background:#222
}
.card img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .65s ease}
.card:hover img{transform:scale(1.025)}
.note{
  margin-top:22px;font-size:11px;letter-spacing:.04em;opacity:.5
}

/* SOFT BRAND MARK */
.brand-mark{
  width:min(150px,35vw);opacity:.16;margin:20px auto 0;
  display:block;filter:grayscale(1)
}
.light .brand-mark{opacity:.2}

/* INQUIRE */
.inquire{
  width:min(var(--max),calc(100% - 40px));margin:auto;
  padding:90px 0 110px;display:grid;grid-template-columns:1fr 1fr;gap:70px
}
.inquire h2{font-size:clamp(42px,6vw,76px);line-height:.9;letter-spacing:-.06em;margin:12px 0 18px}
.light .inquire h2{font-family:"Playfair Display",Georgia,serif;font-weight:400;letter-spacing:-.035em}
.inquire-copy p{max-width:460px;line-height:1.8;opacity:.64;font-size:14px}
.form{display:grid;gap:13px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.form input,.form textarea,.form select{
  width:100%;margin-top:7px;padding:13px 12px;border:1px solid currentColor;
  background:transparent;color:inherit;outline:none;border-radius:0
}
.form textarea{min-height:130px;resize:vertical}
.form button{
  justify-self:start;margin-top:4px;padding:13px 20px;border:1px solid currentColor;
  background:transparent;color:inherit;font-size:10px;letter-spacing:.22em;text-transform:uppercase
}
.dark .form button:hover{background:var(--pink);border-color:var(--pink);color:#000}
.light .form button:hover{background:var(--brown);border-color:var(--brown);color:var(--cream)}

footer{
  width:min(var(--max),calc(100% - 40px));margin:auto;padding:22px 0 28px;
  border-top:1px solid currentColor;opacity:.5;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;justify-content:space-between
}

/* MOBILE */
@media (max-width:760px){
  .landing{grid-template-columns:1fr;min-height:100svh}
  .landing-panel{min-height:50svh}
  .landing-panel + .landing-panel{border-left:0;border-top:1px solid rgba(255,255,255,.32)}
  .landing-logo{top:45%;width:min(270px,58%)}
  .landing-copy{bottom:22px}
  .landing-copy h2{font-size:34px}
  .landing-tag{font-size:10px}
  .nav-brand{display:none}
  .page-nav{padding:12px 16px}
  .nav-left,.nav-right{gap:11px}
  .nav-link,.nav-inquire{font-size:9px;letter-spacing:.16em}
  .nav-inquire{padding:9px 11px}
  .hero{min-height:68svh;padding:60px 0 70px}
  .hero-logo{width:min(220px,58vw);margin-bottom:25px}
  .hero h1{font-size:56px}
  .section{padding:65px 0}
  .section-head{align-items:end}
  .section-title{font-size:43px}
  .controls button{width:40px;height:40px}
  .card{flex-basis:78vw}
  .inquire{grid-template-columns:1fr;gap:35px;padding:65px 0 80px}
  .inquire h2{font-size:54px}
  .form-row{grid-template-columns:1fr}
  footer{flex-direction:column;gap:9px}
}


/* FINAL LANDING PAGE: imagery + small entry text only */
.landing-page .landing-panel::after {
  background: linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0) 45%);
}
.landing-page .landing-panel:hover::after {
  background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0) 45%);
}
.landing-page .landing-panel + .landing-panel {
  border-left: 0;
}
.landing-page .landing-enter {
  position:absolute;
  z-index:3;
  left:50%;
  bottom:clamp(28px,5vw,60px);
  transform:translateX(-50%);
  color:#fff;
  font-size:11px;
  line-height:1;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:.92;
  transition:transform .35s ease, opacity .35s ease;
}
.landing-page .landing-panel:hover .landing-enter {
  transform:translateX(-50%) translateY(-3px);
  opacity:1;
}
@media (max-width:760px) {
  .landing-page .landing-panel + .landing-panel {
    border-left:0;
    border-top:0;
  }
  .landing-page .landing-enter {
    bottom:24px;
    font-size:9px;
    letter-spacing:.18em;
  }
}


/* FINAL GALLERY: editorial collage, no cropping */
.gallery-collage {
  column-count: 3;
  column-gap: 16px;
}
.gallery-photo {
  margin: 0 0 16px;
  break-inside: avoid;
  overflow: hidden;
  background: rgba(127,127,127,.08);
}
.gallery-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform .7s cubic-bezier(.2,.75,.2,1);
}
.gallery-photo:hover img {
  transform: scale(1.012);
}
@media (max-width: 900px) {
  .gallery-collage { column-count: 2; }
}
@media (max-width: 600px) {
  .gallery-collage { column-count: 1; }
  .gallery-photo { margin-bottom: 12px; }
}


/* =========================================================
   PREMIUM EDITORIAL LANDING
   ========================================================= */
.landing-page {
  background: #090909;
  overflow: hidden;
}

.landing-page .landing {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* The photos remain completely dominant. */
.landing-page .landing-panel {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #111;
}

.landing-page .landing-panel + .landing-panel {
  border-left: 1px solid rgba(255,255,255,.42);
}

.landing-page .landing-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition:
    transform 1.35s cubic-bezier(.16,1,.3,1),
    filter 1s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

/* Quiet, cinematic image treatment. */
.landing-page .landing-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.02) 0%,
    rgba(0,0,0,.01) 48%,
    rgba(0,0,0,.34) 100%
  );
  pointer-events: none;
  transition: background .7s ease;
}

/* A tiny bit of separation without looking like a card. */
.landing-page .landing-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background .65s ease;
}

/* Hover focuses one half and gently quiets the other. */
.landing-page .landing:hover .landing-panel:not(:hover)::after {
  background: rgba(0,0,0,.20);
}

.landing-page .landing-panel:hover .landing-bg {
  transform: scale(1.028);
}

.landing-page .landing-panel:hover::before {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.02) 0%,
    rgba(0,0,0,.01) 45%,
    rgba(0,0,0,.43) 100%
  );
}

/* The only landing-page text. */
.landing-page .landing-enter {
  position: absolute;
  z-index: 4;
  left: clamp(24px, 4vw, 58px);
  bottom: clamp(28px, 4vw, 52px);
  transform: none;
  color: rgba(255,255,255,.94);
  font-size: 9px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .30em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 9px;
}

.landing-page .landing-enter::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: rgba(255,255,255,.9);
  transition: width .55s cubic-bezier(.16,1,.3,1);
}

.landing-page .landing-panel:hover .landing-enter::after {
  width: 100%;
}

/* Slightly different optical placement keeps both sides balanced. */
.landing-page .quiet .landing-enter {
  left: auto;
  right: clamp(24px, 4vw, 58px);
  text-align: right;
}

.landing-page .quiet .landing-enter::after {
  left: auto;
  right: 0;
}

/* Mobile: same design, stacked like two photographic chapters. */
@media (max-width: 760px) {
  .landing-page .landing {
    height: 100svh;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .landing-page .landing-panel {
    min-height: 0;
  }

  .landing-page .landing-panel + .landing-panel {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.42);
  }

  .landing-page .landing-bg {
    transform: scale(1.001);
  }

  .landing-page .landing-panel:hover .landing-bg {
    transform: scale(1.02);
  }

  .landing-page .landing-enter,
  .landing-page .quiet .landing-enter {
    left: 22px;
    right: auto;
    bottom: 22px;
    font-size: 8px;
    letter-spacing: .25em;
    text-align: left;
  }

  .landing-page .quiet .landing-enter::after {
    left: 0;
    right: auto;
  }
}


/* =========================================================
   TYPOGRAPHY-FIRST LANDING — FINAL DIRECTION
   No photos. No logos. No decorative cards.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Italiana&family=Oswald:wght@300;400;500;600&display=swap');

.landing-page {
  background: #0b0b0b;
  overflow: hidden;
}

.landing-type {
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.landing-type .landing-panel {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: flex .8s cubic-bezier(.16,1,.3,1);
}

/* Blacktop */
.landing-type .landing-panel.blacktop {
  background:
    radial-gradient(circle at 65% 35%, rgba(255,22,136,.08), transparent 34%),
    #090909;
  color: #f4f3ef;
}

/* Quiet Wild */
.landing-type .landing-panel.quiet {
  background:
    radial-gradient(circle at 35% 65%, rgba(107,82,62,.10), transparent 38%),
    #eee8de;
  color: #46362a;
}

.landing-type .landing-panel + .landing-panel {
  border-left: 1px solid rgba(255,255,255,.13);
}

/* Very subtle hover wash */
.landing-type .landing-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .65s ease;
  pointer-events: none;
}

.landing-type .blacktop::before {
  background: radial-gradient(circle at 50% 50%, rgba(255,22,136,.09), transparent 58%);
}

.landing-type .quiet::before {
  background: radial-gradient(circle at 50% 50%, rgba(117,91,68,.10), transparent 58%);
}

.landing-type .landing-panel:hover::before {
  opacity: 1;
}

.landing-type .landing-content {
  position: relative;
  z-index: 2;
  width: min(82%, 620px);
  text-align: center;
  transform: translateY(0);
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}

.landing-type .landing-panel:hover .landing-content {
  transform: translateY(-5px);
}

.landing-type h1 {
  margin: 0;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(58px, 8.5vw, 132px);
  line-height: .86;
  font-weight: 500;
  letter-spacing: -.035em;
}

.landing-type .quiet h1 {
  font-weight: 400;
}

.landing-type .landing-tagline {
  margin: 23px 0 0;
  font-family: "Italiana", "Times New Roman", serif;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1;
  letter-spacing: .01em;
}

.landing-type .landing-enter {
  display: inline-block;
  position: relative;
  margin-top: 46px;
  padding-bottom: 8px;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .25em;
  line-height: 1;
  text-transform: uppercase;
}

.landing-type .landing-enter::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  transform: translateX(-50%);
  background: currentColor;
  transition: width .55s cubic-bezier(.16,1,.3,1);
}

.landing-type .landing-panel:hover .landing-enter::after {
  width: 100%;
}

/* Small color accent, deliberately restrained. */
.landing-type .blacktop .landing-enter {
  color: var(--pink);
}

.landing-type .quiet .landing-enter {
  color: #6c5443;
}

/* Desktop: selected side breathes slightly larger. */
@media (min-width: 761px) {
  .landing-type:has(.landing-panel.blacktop:hover) {
    grid-template-columns: 1.025fr .975fr;
  }

  .landing-type:has(.landing-panel.quiet:hover) {
    grid-template-columns: .975fr 1.025fr;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .landing-type {
    height: 100svh;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .landing-type .landing-panel {
    min-height: 0;
  }

  .landing-type .landing-panel + .landing-panel {
    border-left: 0;
    border-top: 1px solid rgba(74,56,43,.18);
  }

  .landing-type .landing-content {
    width: 88%;
  }

  .landing-type h1 {
    font-size: clamp(52px, 16vw, 76px);
  }

  .landing-type .landing-tagline {
    margin-top: 16px;
    font-size: 19px;
  }

  .landing-type .landing-enter {
    margin-top: 27px;
    font-size: 9px;
    letter-spacing: .22em;
  }
}

.form-status {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: .7;
}

.hidden-field {
  display: none !important;
}

.form-status {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  min-height: 18px;
  opacity: .72;
}
.form-status.success {
  opacity: 1;
}
.form-status.error {
  opacity: 1;
}
.form button:disabled {
  opacity: .55;
  cursor: wait;
}