:root{--ink:#080c0f;--paper:#f2f2ee;--white:#fff;--aqua:#35d5cb;--blue:#38a7d6;--muted:#9ea7aa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--white);font-family:"DM Sans",sans-serif}.nav{height:86px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;position:absolute;inset:0 0 auto;z-index:5;border-bottom:1px solid #ffffff26}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:600 14px/1 "Manrope";letter-spacing:.13em}.brand img{width:52px;height:52px;border-radius:50%;object-fit:cover}.nav nav{display:flex;gap:34px;align-items:center}.nav nav a{color:#dfe7e8;text-decoration:none;font-size:13px}.nav-cta{border:1px solid #ffffff5c;padding:11px 17px}.menu{display:none;color:#fff;border:0;background:none;font:inherit}.hero{height:min(930px,100vh);min-height:680px;position:relative;overflow:hidden}.hero-image{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 46%;filter:saturate(.85);transform:scale(1.025)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#05090dd9 0%,#071017a6 37%,#07101724 78%),linear-gradient(0deg,#05090dc9 0%,transparent 45%)}.hero-content{position:absolute;left:8vw;top:53%;transform:translateY(-45%);max-width:820px}.eyebrow,.section-tag{text-transform:uppercase;font:600 11px/1.2 "Manrope";letter-spacing:.2em}.eyebrow{display:flex;align-items:center;gap:12px;color:#d9e8e8}.eyebrow span{display:block;width:34px;height:2px;background:var(--aqua)}h1{font:600 clamp(64px,9.4vw,150px)/.78 "Manrope";letter-spacing:-.075em;margin:31px 0 35px}h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #fff}.intro{max-width:550px;font-size:18px;line-height:1.6;color:#d8dddd}.button{display:inline-flex;gap:54px;align-items:center;margin-top:16px;background:var(--aqua);color:#051111;padding:17px 20px;text-decoration:none;font:600 12px/1 "Manrope";letter-spacing:.08em;text-transform:uppercase;transition:.25s}.button:hover{background:#fff;transform:translateY(-2px)}.button span{font-size:18px}.scroll{position:absolute;right:5vw;bottom:38px;text-transform:uppercase;font-size:10px;letter-spacing:.17em;color:#cad1d2}.scroll span{color:var(--aqua);margin-left:10px}.statement{background:var(--paper);color:var(--ink);padding:130px 8vw;display:grid;grid-template-columns:1fr 3fr 1.5fr;gap:5vw;align-items:start}.section-tag{color:#607074;margin:0}.big-copy{font:500 clamp(36px,4.2vw,67px)/1.08 "Manrope";letter-spacing:-.045em;margin:0}.big-copy span,.about h2 span,.contact h2 span{color:var(--blue)}.side-copy{color:#526064;font-size:15px;line-height:1.75;margin:4px 0 0}.work{padding:130px 5vw}.section-head{display:flex;justify-content:space-between;align-items:end;margin:0 3vw 60px}.section-head h2,.about h2,.contact h2{font:600 clamp(46px,6.2vw,95px)/.88 "Manrope";letter-spacing:-.06em;margin:23px 0 0}.section-head>p{width:340px;color:var(--muted);line-height:1.7}.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.card{grid-column:span 4;height:460px;position:relative;overflow:hidden;background:#172025}.card.wide{grid-column:span 8}.card.tall{height:640px;grid-row:span 2}.card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .6s ease;filter:saturate(.9)}.card:hover img{transform:scale(1.04);filter:saturate(1.1)}.card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#000c)}.card div{position:absolute;z-index:2;left:24px;bottom:22px}.card span{display:block;text-transform:uppercase;color:var(--aqua);font-size:10px;letter-spacing:.18em}.card b{display:block;font:600 22px/1.2 "Manrope";margin-top:6px}.about{display:grid;grid-template-columns:1fr 1fr;min-height:760px;background:#10171a}.about-photo{position:relative;min-height:670px}.about-photo img{width:100%;height:100%;object-fit:cover}.about-photo span{position:absolute;bottom:25px;left:28px;text-transform:uppercase;font-size:10px;letter-spacing:.17em}.about-copy{padding:10vw 8vw}.about h2{margin-bottom:42px}.about-copy>p:not(.section-tag){color:#bdc5c7;line-height:1.8;font-size:16px}.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:36px}.chips span{border:1px solid #ffffff30;padding:9px 12px;border-radius:100px;text-transform:uppercase;font-size:9px;letter-spacing:.13em;color:#d8e0e1}.services{background:var(--paper);color:var(--ink);padding:120px 8vw}.services>.section-tag{margin-bottom:48px}.service-row{display:grid;grid-template-columns:70px 1fr 1fr;align-items:center;border-top:1px solid #cad0ce;padding:30px 0}.service-row:last-child{border-bottom:1px solid #cad0ce}.service-row>span{color:#6c797c;font-size:12px}.service-row h3{font:600 clamp(27px,3vw,46px)/1 "Manrope";margin:0;letter-spacing:-.04em}.service-row p{color:#667174;justify-self:end;max-width:370px}.contact{min-height:720px;position:relative;display:flex;align-items:center;overflow:hidden}.contact>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.contact-shade{position:absolute;inset:0;background:linear-gradient(90deg,#071014ed 0%,#071014a8 53%,#07101444)}.contact-content{position:relative;z-index:2;padding:90px 8vw;max-width:940px}.contact-content .section-tag{color:#a9b9ba}.contact h2 span{color:var(--aqua)}.contact-content>p:not(.section-tag){color:#d0d9da;max-width:550px;line-height:1.7}.button.light{background:#fff;color:#0b1113}.button.light:hover{background:var(--aqua)}footer{padding:64px 6vw 35px;display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:22px;color:#aab3b5}footer a{color:#fff;text-decoration:none}footer small{grid-column:1/-1;border-top:1px solid #ffffff24;padding-top:20px}.footer-brand{font:600 35px/1 "Manrope";letter-spacing:-.05em;color:#fff}.footer-brand span{color:var(--aqua)}
@media(max-width:800px){.nav{height:74px}.nav nav{display:none;position:absolute;top:74px;right:4vw;background:#091014f5;padding:24px;flex-direction:column;align-items:stretch;min-width:190px}.nav nav.open{display:flex}.menu{display:block}.hero-content{left:6vw;right:6vw}.hero-image{object-position:32% center}.intro{font-size:16px}.statement{grid-template-columns:1fr;padding:90px 6vw}.statement .section-tag{margin-bottom:6px}.section-head{display:block;margin:0 1vw 35px}.section-head>p{width:auto}.gallery{display:block}.card,.card.wide,.card.tall{height:430px;margin-bottom:12px}.about{grid-template-columns:1fr}.about-photo{min-height:520px}.about-copy{padding:90px 7vw}.services{padding:90px 7vw}.service-row{grid-template-columns:45px 1fr}.service-row p{grid-column:2;margin-bottom:0;justify-self:start}.contact{min-height:680px}.contact-content{padding:80px 7vw}footer{grid-template-columns:1fr}.scroll{display:none}}

/* Portrait first media system for DJI Flip photographs */
.hero-image {
  left: auto;
  right: 0;
  width: min(58vw, 760px);
  height: auto;
  aspect-ratio: 3 / 2;
  top: 50%;
  object-position: center center;
  transform: translateY(-50%);
  filter: saturate(1.16) contrast(1.06);
}

.contact-actions .button{margin-top:16px}

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

.card,
.card.wide,
.card.tall {
  grid-column: span 1;
  grid-row: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}

.card.photo-two {
  grid-column: span 2;
  aspect-ratio: 1.85 / 1;
}

.card.photo-two img {
  object-position: center center;
  filter: brightness(1.12) saturate(1.04) contrast(.98);
}

.card.photo-two:hover img {
  filter: brightness(1.14) saturate(1.1) contrast(.98);
}

.card.photo-two::after {
  background: linear-gradient(transparent, rgba(0, 0, 0, .52));
}

.card.photo-three {
  grid-column: span 2;
  aspect-ratio: 7 / 5;
}

.card.photo-three img {
  object-position: center center;
}

.card.photo-four {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

.card.photo-four img {
  object-position: center center;
}

.card.photo-five {
  grid-column: span 2;
  aspect-ratio: 3 / 2;
}

.card.photo-five img {
  object-position: center center;
}

.growing-grid .photo-placeholder {
  min-height: 0;
  aspect-ratio: 4 / 5;
}

.about-photo {
  align-self: center;
  min-height: 0;
  aspect-ratio: 4 / 5;
}

.contact-bg {
  left: auto;
  right: 0;
  width: min(46vw, 680px);
}

.contact-content {
  max-width: 58vw;
}

@media (max-width: 800px) {
  .hero-image,
  .contact-bg {
    left: 0;
    width: 100%;
  }

  .hero-image {
    right: auto;
    top: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: 56% center;
    transform: none;
  }

  .gallery {
    display: grid;
    grid-template-columns: 1fr;
  }

  .card,
  .card.wide,
  .card.tall {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .card.photo-two {
    grid-column: span 1;
    aspect-ratio: 1.85 / 1;
  }

  .card.photo-three {
    grid-column: span 1;
    aspect-ratio: 7 / 5;
  }

  .card.photo-four {
    grid-column: span 1;
    aspect-ratio: 16 / 9;
  }

  .card.photo-five {
    grid-column: span 1;
    aspect-ratio: 3 / 2;
  }

  .contact-content {
    max-width: none;
  }
}

/* Final accessibility and touch refinements */
.eyebrow,
.section-tag {
  font-size: 12px;
}

.chips span {
  font-size: 11px;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 4px;
}

section[id] {
  scroll-margin-top: 24px;
}

@media (hover: none) {
  .card.has-description::after,
  .card.has-description > div {
    opacity: 1;
  }

  .card.has-description > div {
    transform: translateY(0);
  }
}

/* Three by three portfolio grid while preserving each photograph ratio */
.work {
  padding-left: clamp(14px, 1.5vw, 30px);
  padding-right: clamp(14px, 1.5vw, 30px);
}

.gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 1.25vw, 20px);
  grid-auto-rows: 8px;
  grid-auto-flow: row dense;
  padding: clamp(10px, 1.2vw, 18px);
  background: linear-gradient(145deg, #0e171a 0%, #0a1114 100%);
  border: 1px solid #ffffff14;
  border-radius: 22px;
  box-shadow: 0 28px 70px #00000038;
}

.gallery > .card {
  isolation: isolate;
  border: 1px solid #ffffff1c;
  border-radius: 14px;
  box-shadow: 0 12px 30px #00000036;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.gallery > .card:hover,
.gallery > .card:focus-visible {
  transform: translateY(-4px);
  border-color: #35d5cb66;
  box-shadow: 0 18px 42px #00000055;
}

.gallery > .card,
.gallery > .card.wide,
.gallery > .card.tall,
.gallery > .card.photo-two,
.gallery > .card.photo-three,
.gallery > .card.photo-four,
.gallery > .card.photo-five,
.gallery > .card.photo-six {
  grid-column: span 1;
  grid-row: auto;
  height: auto;
}

.card.photo-six {
  aspect-ratio: 16 / 9;
}

.card.photo-six img {
  object-position: center center;
}

.card.photo-seven {
  aspect-ratio: 3 / 2;
}

.card.photo-seven img {
  object-position: center center;
}

.card.photo-eight {
  aspect-ratio: 3 / 2;
}

.card.photo-eight img {
  object-position: center center;
}

.card.photo-nine {
  aspect-ratio: 3 / 2;
}

.card.photo-nine img {
  object-position: center center;
}

.card.photo-nine b {
  white-space: nowrap;
  font-size: clamp(16px, 1.7vw, 22px);
}

.card.photo-ten {
  aspect-ratio: 4 / 5;
}

.card.photo-ten img {
  object-position: center center;
}

@media (max-width: 800px) {
  .gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    padding: 8px;
    border-radius: 16px;
  }

  .gallery > .card {
    border-radius: 11px;
  }

}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card img,.button{transition:none}}

.has-description {
  cursor: zoom-in;
}

.card.has-description > div {
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .32s ease, transform .32s ease;
}

.card.has-description > div b {
  order: 1;
  margin-top: 0;
}

.card.has-description > div span {
  order: 2;
}

.card.has-description::after {
  opacity: 0;
  transition: opacity .32s ease;
}

.card.has-description:hover::after,
.card.has-description:focus-visible::after {
  opacity: 1;
}

.card.has-description:hover > div,
.card.has-description:focus-visible > div {
  opacity: 1;
  transform: translateY(0);
}

.has-description:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 4px;
}

.modal-open {
  overflow: hidden;
}

.photo-modal[hidden] {
  display: none;
}

.photo-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 5vw;
  background: rgba(3, 8, 11, .94);
}

.photo-modal-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr);
  width: min(1180px, 100%);
  max-height: 86vh;
  overflow: hidden;
  background: #0d1417;
  border: 1px solid #ffffff24;
}

.photo-modal img {
  width: 100%;
  height: 100%;
  max-height: 86vh;
  object-fit: contain;
  background: #05090b;
}

.photo-modal-copy {
  align-self: center;
  padding: clamp(28px, 5vw, 70px);
  max-height: 86vh;
  overflow-y: auto;
}

.photo-modal-copy h2 {
  margin: 0 0 16px;
  font: 600 clamp(24px, 3vw, 42px)/1.05 "Manrope";
  letter-spacing: -.045em;
}

.photo-modal-copy .photo-modal-location {
  margin: 0 0 24px;
  color: var(--aqua);
  font: 600 11px/1.4 "Manrope";
  letter-spacing: .16em;
  text-transform: uppercase;
}

.photo-modal-copy .photo-modal-tagline {
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid #ffffff24;
  color: #fff;
  font: 500 clamp(18px, 2vw, 25px)/1.35 "Manrope";
  letter-spacing: -.02em;
}

.photo-modal-copy p {
  margin: 0;
  color: #c5cecf;
  font-size: 16px;
  line-height: 1.75;
}

.photo-modal-close {
  position: fixed;
  top: 22px;
  right: 28px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 1px solid #ffffff45;
  border-radius: 50%;
  background: #071014;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

@media (max-width: 760px) {
  .photo-modal {
    padding: 70px 18px 20px;
  }

  .photo-modal-inner {
    grid-template-columns: 1fr;
    max-height: 88vh;
    overflow-y: auto;
  }

  .photo-modal img {
    max-height: 58vh;
  }

  .photo-modal-copy {
    padding: 28px;
    max-height: none;
  }
}

/* Keep every section inside the viewport */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

main,
section,
.gallery,
.growing-grid,
.about,
.about-copy {
  min-width: 0;
  max-width: 100%;
}

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

.growing-grid > .photo-placeholder,
.growing-grid .photo-placeholder,
.growing-grid .photo-placeholder strong {
  min-width: 0;
}

.growing-grid > .photo-placeholder {
  width: 100%;
  overflow: hidden;
  transform: none !important;
  aspect-ratio: 16 / 10;
}

.video-grid > .video-placeholder {
  aspect-ratio: 16 / 9;
}

.video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #ffffff1c;
  border-radius: 14px;
  background: #05090b;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 12px 30px #00000036;
}

.video-card-featured {
  grid-column: 1 / -1;
}

.video-card video,
.video-card .video-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #05090b;
  pointer-events: none;
}

.video-open {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 2;
  padding: 13px 18px;
  border: 1px solid #ffffff80;
  background: #071014d9;
  color: #fff;
  font: 600 11px/1 "Manrope";
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .25s ease, color .25s ease;
}

.video-open:hover,
.video-open:focus-visible {
  background: var(--aqua);
  color: #061012;
}

.video-card::after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .88));
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.video-meta {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.video-meta strong {
  font: 600 clamp(22px, 2.6vw, 42px)/1.05 "Manrope";
  letter-spacing: -.04em;
}

.video-meta span {
  color: var(--aqua);
  font: 600 clamp(9px, .9vw, 12px)/1.4 "Manrope";
  letter-spacing: .13em;
  text-transform: uppercase;
}

.video-card:hover::after,
.video-card:focus-within::after,
.video-card:hover .video-meta,
.video-card:focus-within .video-meta {
  opacity: 1;
}

.video-card:hover .video-meta,
.video-card:focus-within .video-meta {
  transform: translateY(0);
}

.video-modal[hidden] {
  display: none;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 5vw;
  background: rgba(3, 8, 11, .96);
}

.video-modal-inner {
  width: min(1500px, 94vw);
  max-height: 88vh;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #ffffff2b;
  background: #000;
  box-shadow: 0 30px 90px #000c;
}

.video-modal video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  pointer-events: auto;
}

.video-modal-close {
  position: fixed;
  top: 22px;
  right: 28px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 1px solid #ffffff45;
  border-radius: 50%;
  background: #071014;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.growing-grid .photo-placeholder strong {
  font-size: clamp(16px, 2.2vw, 32px);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .about {
    grid-template-columns: 42% 58%;
  }

  .about-copy {
    padding: 9vw 4vw;
  }

  .about h2 {
    font-size: clamp(40px, 5.4vw, 62px);
  }
}

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

  .video-open {
    top: 14px;
    right: 14px;
    padding: 11px 14px;
  }

  .video-modal {
    padding: 74px 12px 20px;
  }

  .video-modal-inner {
    width: 100%;
    height: auto;
  }
}

@media (hover: none) {
  .video-card::after,
  .video-meta {
    opacity: 1;
  }

  .video-meta {
    transform: translateY(0);
  }
}

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

  .about-copy {
    padding: 90px 7vw;
  }

  .about h2 {
    font-size: clamp(42px, 12vw, 68px);
    overflow-wrap: anywhere;
  }
}