*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:#08080a;color:#f5f2ea;line-height:1.6;background:radial-gradient(circle at 18% 8%,rgba(216,168,94,.13),transparent 28%),radial-gradient(circle at 82% 36%,rgba(255,255,255,.045),transparent 24%),linear-gradient(180deg,#070709 0%,#0b0b0d 45%,#09090b 100%);background-attachment:fixed;}a{color:inherit;text-decoration:none}img,video{max-width:100%;display:block}.hero{min-height:100vh;position:relative;overflow:hidden;background:#08080a}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.96),rgba(8,8,10,.62),rgba(8,8,10,.22)),linear-gradient(0deg,rgba(8,8,10,.9),rgba(8,8,10,.08) 55%,rgba(8,8,10,.75))}.nav{position:relative;z-index:3;padding:28px 7vw;display:flex;justify-content:space-between;align-items:center}.logo{font-weight:900;letter-spacing:.14em;font-size:15px}.logo span,.eyebrow{color:#d8a85e}.nav-links{display:flex;gap:20px;align-items:center;font-size:14px;color:#d6cfbf}.nav-button{border:1px solid rgba(255,255,255,.28);padding:10px 16px;border-radius:999px}.hero-content{position:relative;z-index:2;max-width:940px;padding:17vh 7vw 10vh}.eyebrow{margin:0 0 16px;text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:900}h1,h2,h3{margin:0;line-height:1.03;letter-spacing:-.06em}h1{font-size:clamp(48px,8vw,108px);margin-bottom:24px}h2{font-size:clamp(38px,6vw,76px);margin-bottom:22px}h3{font-size:30px;margin-bottom:10px}p{color:#d6cfbf}.hero-content p{max-width:760px;font-size:clamp(18px,2vw,24px)}.buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-block;padding:14px 22px;border-radius:999px;font-weight:900;border:0;cursor:pointer;transition:transform .2s ease}.btn:hover{transform:translateY(-2px)}.primary{background:#f5f2ea;color:#08080a}.secondary{border:1px solid rgba(255,255,255,.30);color:#f5f2ea;background:transparent}.section{padding:95px 7vw}.section-title{max-width:820px;margin-bottom:44px}.centered{text-align:center;margin-left:auto;margin-right:auto}.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:14px}.gallery-grid a{grid-column:span 4;border-radius:24px;overflow:hidden;background:#111113;border:1px solid rgba(255,255,255,.11);display:block;min-height:300px}.gallery-grid img{width:100%;height:100%;object-fit:cover;background:#111113;transition:transform .35s ease,opacity .35s ease}.gallery-grid a:hover img{transform:scale(1.02);opacity:.9}.gallery-grid a.is-vertical{grid-column:span 3;grid-row:span 2;aspect-ratio:2/3;min-height:0}.gallery-grid a.is-horizontal{grid-column:span 5;aspect-ratio:16/10;min-height:0}.gallery-grid a.is-wide{grid-column:span 8;aspect-ratio:21/9;min-height:0}.gallery-grid a.is-square{grid-column:span 4;aspect-ratio:1/1;min-height:0}.reel-section{background:#111113}.reel-card{display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:center;background:#151518;border:1px solid rgba(255,255,255,.11);border-radius:34px;padding:22px}.reel-preview{border-radius:24px;overflow:hidden;background:#08080a}.reel-preview video{width:100%;aspect-ratio:16/9;object-fit:cover}.reel-copy{padding:18px}.pixieset-section{text-align:center;background:radial-gradient(circle at 50% 0%,rgba(216,168,94,.22),transparent 35%),#08080a}.pixieset-section p{max-width:680px;margin:0 auto 32px;font-size:18px}.about-hero-section{position:relative;min-height:92vh;overflow:hidden;display:flex;align-items:center;padding:100px 7vw;background:#08080a}.about-bg-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.72}.about-bg-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.96),rgba(8,8,10,.72),rgba(8,8,10,.38)),linear-gradient(0deg,rgba(8,8,10,.88),rgba(8,8,10,.14) 48%,rgba(8,8,10,.76))}.about-hero-content{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1fr minmax(380px,480px);gap:54px;align-items:end}.about-copy{max-width:820px}.about-copy h2{color:#fff}.about-copy p{color:#f0eee8;font-size:19px;max-width:740px}.portrait-card{background:rgba(8,8,10,.68);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);border-radius:30px;padding:16px;color:#fff;box-shadow:0 30px 90px rgba(0,0,0,.42)}.portrait-card img{width:100%;height:auto;max-height:620px;object-fit:contain;border-radius:22px;filter:grayscale(.15);background:#08080a}.portrait-card div{padding:18px 8px 6px}.portrait-card h3{font-size:25px;letter-spacing:-.04em}.portrait-card p{margin:0;color:#d6cfbf;font-size:14px}.contact-section{background:#f5f2ea;color:#08080a}.contact-section .eyebrow{color:#986a26}.contact-section p{color:#383228}.contact-form{max-width:860px;margin:0 auto;background:#fff;border-radius:30px;padding:28px;box-shadow:0 32px 90px rgba(0,0,0,.15)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;color:#17140f;font-weight:800;margin-bottom:16px}input,select,textarea{width:100%;margin-top:8px;padding:14px 16px;border-radius:14px;border:1px solid #d4cec0;font:inherit;background:#f8f6f0;color:#08080a}textarea{resize:vertical}footer{padding:34px 7vw;border-top:1px solid rgba(255,255,255,.10)}footer p{color:#817b70}.footer-links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px;color:#d6cfbf}@media(max-width:1050px){.nav-links{display:none}.about-hero-content,.reel-card{grid-template-columns:1fr}.portrait-card{max-width:520px}.gallery-grid{grid-template-columns:repeat(6,1fr)}.gallery-grid a,.gallery-grid a.is-horizontal,.gallery-grid a.is-wide,.gallery-grid a.is-square{grid-column:span 6}.gallery-grid a.is-vertical{grid-column:span 3}}@media(max-width:620px){.section{padding:72px 6vw}.about-hero-section{padding:80px 6vw}.gallery-grid{display:grid;grid-template-columns:1fr;gap:14px}.gallery-grid a,.gallery-grid a.is-vertical,.gallery-grid a.is-horizontal,.gallery-grid a.is-wide,.gallery-grid a.is-square{grid-column:span 1;grid-row:auto}.gallery-grid a.is-vertical{aspect-ratio:2/3}.gallery-grid a.is-horizontal{aspect-ratio:16/10}.gallery-grid a.is-wide{aspect-ratio:16/9}.gallery-grid a.is-square{aspect-ratio:1/1}.form-row{grid-template-columns:1fr}.portrait-card{max-width:100%}}

/* SMOOTHER CINEMATIC PAGE FLOW */
.hero,
.gallery-section,
.reel-section,
.pixieset-section,
.about-hero-section,
.contact-section {
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #08080a 78%);
  z-index: 2;
}

.gallery-section {
  background:
    radial-gradient(circle at 12% 12%, rgba(216,168,94,.10), transparent 28%),
    radial-gradient(circle at 85% 35%, rgba(255,255,255,.035), transparent 24%),
    linear-gradient(180deg, #08080a 0%, #0d0d10 55%, #111113 100%);
}

.gallery-section::before,
.reel-section::before,
.pixieset-section::before,
.about-hero-section::before,
.contact-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -120px;
  height: 170px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8,8,10,.92));
  z-index: 1;
}

.gallery-section > *,
.reel-section > *,
.pixieset-section > *,
.about-hero-section > *,
.contact-section > * {
  position: relative;
  z-index: 2;
}

.reel-section {
  background:
    radial-gradient(circle at 78% 18%, rgba(216,168,94,.13), transparent 30%),
    linear-gradient(180deg, #111113 0%, #0c0c0f 58%, #09090b 100%);
}

.reel-section::after,
.pixieset-section::after {
  content: "";
  position: absolute;
  left: 7vw;
  right: 7vw;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,168,94,.25), transparent);
}

.pixieset-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(216,168,94,.24), transparent 36%),
    radial-gradient(circle at 15% 75%, rgba(255,255,255,.035), transparent 26%),
    linear-gradient(180deg, #09090b 0%, #101012 52%, #08080a 100%);
}

.about-hero-section {
  margin-top: -1px;
}

.about-bg-overlay {
  backdrop-filter: blur(1px);
}

.contact-section {
  background:
    radial-gradient(circle at 20% 0%, rgba(216,168,94,.12), transparent 25%),
    linear-gradient(180deg, #f5f2ea 0%, #ebe5d8 100%);
}

.section {
  scroll-margin-top: 30px;
}

.gallery-grid a,
.reel-card,
.portrait-card,
.contact-form {
  box-shadow: 0 26px 80px rgba(0,0,0,.26);
}

.gallery-grid a {
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.gallery-grid a:hover {
  transform: translateY(-3px);
  border-color: rgba(216,168,94,.32);
  box-shadow: 0 34px 90px rgba(0,0,0,.34);
}

.btn {
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

@media(max-width:620px){
  .hero::after {
    height: 120px;
  }

  .gallery-section::before,
  .reel-section::before,
  .pixieset-section::before,
  .about-hero-section::before,
  .contact-section::before {
    top: -70px;
    height: 110px;
  }
}


/* BIO SECTION FIX
   The background photo is now the hero of the section.
   The portrait is smaller and placed as a horizontal strip so it does not block the background.
*/
.about-hero-section {
  min-height: 88vh;
  padding: 120px 7vw;
  align-items: flex-end;
}

.about-hero-section::before {
  display: none;
}

.about-bg-photo {
  object-position: center center;
  opacity: .82;
}

.about-bg-overlay {
  background:
    linear-gradient(90deg, rgba(8,8,10,.94), rgba(8,8,10,.68), rgba(8,8,10,.20)),
    linear-gradient(0deg, rgba(8,8,10,.92), rgba(8,8,10,.10) 50%, rgba(8,8,10,.72));
  backdrop-filter: none;
}

.bio-clean-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 860px;
  gap: 34px;
}

.bio-clean-layout .about-copy {
  max-width: 760px;
}

.bio-clean-layout .about-copy h2 {
  max-width: 760px;
}

.portrait-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(100%, 560px);
  background: rgba(8,8,10,.58);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: 12px 18px 12px 12px;
  box-shadow: 0 26px 80px rgba(0,0,0,.28);
}

.portrait-strip img {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  filter: grayscale(.05);
}

.portrait-strip h3 {
  font-size: 22px;
  letter-spacing: -.04em;
  margin: 0 0 4px;
  color: #fff;
}

.portrait-strip p {
  margin: 0;
  color: #d6cfbf;
  font-size: 14px;
}

@media(max-width:760px){
  .about-hero-section {
    padding: 90px 6vw;
    min-height: 80vh;
  }

  .portrait-strip {
    border-radius: 28px;
    align-items: flex-start;
  }

  .portrait-strip img {
    width: 74px;
    height: 74px;
  }
}


/* FINAL BIO FIX — clean contained overlay, no clipping */
.about-hero-section {
  position: relative !important;
  min-height: 92vh !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 110px 7vw !important;
  background: #08080a !important;
}

.about-hero-section::before {
  display: none !important;
}

.about-bg-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: grayscale(1) !important;
  opacity: .9 !important;
}

.about-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.70) 34%, rgba(8,8,10,.20) 68%, rgba(8,8,10,.08) 100%),
    linear-gradient(0deg, rgba(8,8,10,.86) 0%, rgba(8,8,10,.25) 52%, rgba(8,8,10,.60) 100%) !important;
  backdrop-filter: none !important;
}

.bio-panel {
  position: relative !important;
  z-index: 3 !important;
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  padding: clamp(24px, 4vw, 46px) !important;
  border-radius: 34px !important;
  background: rgba(8,8,10,.58) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(16px) !important;
  margin: 0 !important;
}

.bio-panel h2 {
  color: #fff !important;
  font-size: clamp(34px, 5vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
  margin: 0 0 22px !important;
  max-width: 720px !important;
}

.bio-panel p {
  color: #f0eee8 !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  max-width: 680px !important;
}

.bio-footer {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 30px !important;
  flex-wrap: wrap !important;
}

.bio-footer img {
  width: 74px !important;
  height: 74px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

.bio-footer h3 {
  color: #fff !important;
  font-size: 22px !important;
  letter-spacing: -.04em !important;
  margin: 0 0 4px !important;
}

.bio-footer div p {
  color: #d6cfbf !important;
  font-size: 14px !important;
  margin: 0 !important;
}

.bio-footer .btn {
  margin-left: auto !important;
}

.about-hero-content,
.portrait-card,
.portrait-strip,
.bio-clean-layout {
  display: none !important;
}

@media(max-width: 760px) {
  .about-hero-section {
    min-height: auto !important;
    padding: 90px 6vw !important;
  }

  .about-bg-overlay {
    background:
      linear-gradient(0deg, rgba(8,8,10,.92), rgba(8,8,10,.55)),
      linear-gradient(90deg, rgba(8,8,10,.78), rgba(8,8,10,.26)) !important;
  }

  .bio-panel {
    border-radius: 26px !important;
  }

  .bio-footer {
    align-items: flex-start !important;
  }

  .bio-footer .btn {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
}


/* BIGGER BIO PORTRAIT ON LEFT */
.bio-panel {
  max-width: 820px !important;
}

.bio-footer {
  display: grid !important;
  grid-template-columns: 150px 1fr auto !important;
  align-items: center !important;
  gap: 18px !important;
  margin-top: 32px !important;
}

.bio-footer img {
  width: 150px !important;
  height: 190px !important;
  border-radius: 22px !important;
  object-fit: cover !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.26) !important;
}

.bio-footer h3 {
  font-size: 28px !important;
  margin: 0 0 6px !important;
}

.bio-footer div p {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.bio-footer .btn {
  margin-left: 0 !important;
  white-space: nowrap !important;
}

@media(max-width: 900px) {
  .bio-panel {
    max-width: 100% !important;
  }

  .bio-footer {
    grid-template-columns: 130px 1fr !important;
  }

  .bio-footer .btn {
    grid-column: 1 / -1 !important;
    width: fit-content !important;
    margin-top: 10px !important;
  }
}

@media(max-width: 640px) {
  .bio-footer {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
  }

  .bio-footer img {
    width: 130px !important;
    height: 165px !important;
  }

  .bio-footer .btn {
    width: 100% !important;
    text-align: center !important;
  }
}


/* HOMEPAGE 5-IMAGE GALLERY + FULL PORTFOLIO PAGE */
.home-gallery {
  max-width: 1180px;
}

.home-gallery a:nth-child(1) {
  grid-column: span 5;
  aspect-ratio: 16/10;
}

.home-gallery a:nth-child(2) {
  grid-column: span 3;
  grid-row: span 2;
  aspect-ratio: 2/3;
}

.home-gallery a:nth-child(3) {
  grid-column: span 4;
  aspect-ratio: 1/1;
}

.home-gallery a:nth-child(4) {
  grid-column: span 4;
  aspect-ratio: 16/10;
}

.home-gallery a:nth-child(5) {
  grid-column: span 5;
  aspect-ratio: 16/10;
}

.gallery-actions {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}

.portfolio-header {
  min-height: 62vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 20%, rgba(216,168,94,.18), transparent 28%),
    linear-gradient(180deg, #08080a 0%, #111113 100%);
}

.portfolio-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, #08080a);
  pointer-events: none;
}

.portfolio-hero-copy {
  position: relative;
  z-index: 2;
  padding: 12vh 7vw 8vh;
  max-width: 900px;
}

.portfolio-hero-copy h1 {
  font-size: clamp(48px, 8vw, 104px);
  margin-bottom: 22px;
}

.portfolio-hero-copy p {
  font-size: clamp(18px, 2vw, 24px);
  max-width: 660px;
}

.portfolio-gallery-section {
  padding-top: 40px;
}

@media(max-width: 700px) {
  .home-gallery {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-gallery a,
  .home-gallery a:nth-child(1),
  .home-gallery a:nth-child(2),
  .home-gallery a:nth-child(3),
  .home-gallery a:nth-child(4),
  .home-gallery a:nth-child(5) {
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: 4/5;
  }

  .home-gallery a:nth-child(1),
  .home-gallery a:nth-child(4),
  .home-gallery a:nth-child(5) {
    aspect-ratio: 16/10;
  }

  .portfolio-header {
    min-height: 52vh;
  }
}


/* CLEARER HEADER BRANDING */
.nav .logo {
  font-size: clamp(26px, 4.5vw, 64px) !important;
  letter-spacing: .06em !important;
  line-height: .9 !important;
}

.hero .eyebrow {
  font-size: clamp(13px, 1.4vw, 18px) !important;
  letter-spacing: .14em !important;
}

@media(max-width: 700px) {
  .nav {
    padding-top: 24px !important;
  }

  .nav .logo {
    font-size: clamp(30px, 12vw, 54px) !important;
    letter-spacing: .04em !important;
  }

  .hero .eyebrow {
    font-size: 12px !important;
    line-height: 1.6 !important;
    letter-spacing: .10em !important;
    max-width: 320px !important;
  }
}


/* CLEANER GALLERY LAYOUT
   Homepage: one large featured image + four supporting images.
   Portfolio page: clean 3-column grid instead of chaotic masonry.
*/

/* Disable the old smart sizing on homepage gallery */
.home-gallery {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(2, minmax(220px, 280px)) !important;
  gap: 16px !important;
  max-width: 1240px !important;
}

.home-gallery a,
.home-gallery a.is-vertical,
.home-gallery a.is-horizontal,
.home-gallery a.is-wide,
.home-gallery a.is-square,
.home-gallery a:nth-child(1),
.home-gallery a:nth-child(2),
.home-gallery a:nth-child(3),
.home-gallery a:nth-child(4),
.home-gallery a:nth-child(5) {
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
}

.home-gallery a:nth-child(1) {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}

.home-gallery a {
  border-radius: 26px !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

.home-gallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Portfolio page: clean organized grid */
.portfolio-gallery-section .gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 18px !important;
}

.portfolio-gallery-section .gallery-grid a,
.portfolio-gallery-section .gallery-grid a.is-vertical,
.portfolio-gallery-section .gallery-grid a.is-horizontal,
.portfolio-gallery-section .gallery-grid a.is-wide,
.portfolio-gallery-section .gallery-grid a.is-square {
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: 4 / 5 !important;
  min-height: 0 !important;
  border-radius: 24px !important;
}

.portfolio-gallery-section .gallery-grid a:nth-child(3n+1) {
  aspect-ratio: 16 / 10 !important;
}

.portfolio-gallery-section .gallery-grid a:nth-child(5n) {
  aspect-ratio: 1 / 1 !important;
}

.portfolio-gallery-section .gallery-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Cleaner section spacing */
.gallery-section .section-title {
  max-width: 760px !important;
}

.gallery-actions {
  justify-content: flex-start !important;
}

@media(max-width: 900px) {
  .home-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
  }

  .home-gallery a:nth-child(1) {
    grid-column: span 2 !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 10 !important;
  }

  .home-gallery a:not(:first-child) {
    aspect-ratio: 4 / 5 !important;
  }

  .portfolio-gallery-section .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media(max-width: 600px) {
  .home-gallery,
  .portfolio-gallery-section .gallery-grid {
    grid-template-columns: 1fr !important;
  }

  .home-gallery a,
  .home-gallery a:nth-child(1),
  .home-gallery a:not(:first-child),
  .portfolio-gallery-section .gallery-grid a,
  .portfolio-gallery-section .gallery-grid a:nth-child(3n+1),
  .portfolio-gallery-section .gallery-grid a:nth-child(5n) {
    grid-column: span 1 !important;
    aspect-ratio: 4 / 5 !important;
  }

  .home-gallery a:first-child {
    aspect-ratio: 16 / 10 !important;
  }

  .gallery-actions {
    justify-content: center !important;
  }
}


/* PORTFOLIO FOLDERS / CATEGORIES */
.folder-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.folder-nav a {
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 12px 18px;
  color: #f5f2ea;
  background: rgba(255,255,255,.04);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.folder-nav a:hover {
  transform: translateY(-2px);
  border-color: rgba(216,168,94,.55);
  background: rgba(216,168,94,.10);
}

.portfolio-folder-section {
  padding-top: 70px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.folder-title {
  max-width: 820px;
  margin-bottom: 34px;
}

.portfolio-folder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.portfolio-folder-grid a {
  display: block;
  overflow: hidden;
  border-radius: 24px;
  background: #111113;
  border: 1px solid rgba(255,255,255,.11);
  aspect-ratio: 4 / 5;
  box-shadow: 0 26px 80px rgba(0,0,0,.22);
}

.portfolio-folder-grid a:nth-child(3n+1) {
  aspect-ratio: 16 / 10;
}

.performance-grid a:nth-child(1),
.performance-grid a:nth-child(5) {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

.portfolio-folder-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease, opacity .35s ease;
}

.portfolio-folder-grid a:hover img {
  transform: scale(1.04);
  opacity: .9;
}

@media(max-width: 900px) {
  .portfolio-folder-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .performance-grid a:nth-child(1),
  .performance-grid a:nth-child(5) {
    grid-column: span 2;
  }
}

@media(max-width: 600px) {
  .folder-nav {
    flex-direction: column;
  }

  .folder-nav a {
    text-align: center;
  }

  .portfolio-folder-grid {
    grid-template-columns: 1fr;
  }

  .performance-grid a:nth-child(1),
  .performance-grid a:nth-child(5) {
    grid-column: span 1;
  }

  .portfolio-folder-grid a,
  .portfolio-folder-grid a:nth-child(3n+1),
  .performance-grid a:nth-child(1),
  .performance-grid a:nth-child(5) {
    aspect-ratio: 4 / 5;
  }
}


/* TRUE ASPECT RATIO GALLERY FIX
   This overrides all previous forced/cropped gallery layouts.
   Images now keep their real aspect ratio.
   No object-fit: cover. No forced aspect-ratio boxes.
*/

/* Homepage gallery */
.home-gallery,
.gallery-grid.home-gallery {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
  max-width: 1240px !important;
}

.home-gallery a,
.home-gallery a.is-vertical,
.home-gallery a.is-horizontal,
.home-gallery a.is-wide,
.home-gallery a.is-square,
.home-gallery a:nth-child(1),
.home-gallery a:nth-child(2),
.home-gallery a:nth-child(3),
.home-gallery a:nth-child(4),
.home-gallery a:nth-child(5) {
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: transparent !important;
}

.home-gallery img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
}

/* Portfolio folder galleries */
.portfolio-folder-grid,
.performance-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

.portfolio-folder-grid a,
.portfolio-folder-grid a:nth-child(3n+1),
.performance-grid a,
.performance-grid a:nth-child(1),
.performance-grid a:nth-child(5),
.portfolio-folder-grid a.is-vertical,
.portfolio-folder-grid a.is-horizontal,
.portfolio-folder-grid a.is-wide,
.portfolio-folder-grid a.is-square {
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: transparent !important;
}

.portfolio-folder-grid img,
.performance-grid img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
}

/* Remove aggressive hover scaling that can feel like crop */
.home-gallery a:hover img,
.portfolio-folder-grid a:hover img,
.performance-grid a:hover img {
  transform: none !important;
  opacity: .92 !important;
}

/* Mobile/tablet */
@media(max-width: 1000px) {
  .home-gallery,
  .gallery-grid.home-gallery,
  .portfolio-folder-grid,
  .performance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 620px) {
  .home-gallery,
  .gallery-grid.home-gallery,
  .portfolio-folder-grid,
  .performance-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Portfolio Pixieset button */
.portfolio-pixieset-btn {
  margin-top: 20px;
}


/* CLEAN ORGANIZED TWO-CATEGORY PORTFOLIO */

/* Hide old folder nav/buttons if they remain anywhere */
.folder-nav,
.portfolio-pixieset-btn {
  display: none !important;
}

.portfolio-header {
  min-height: 54vh !important;
}

.portfolio-hero-copy {
  max-width: 820px !important;
}

.portfolio-category {
  padding-top: 80px !important;
  padding-bottom: 70px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

.portfolio-category:first-of-type {
  border-top: none !important;
}

.folder-title {
  max-width: 780px !important;
  margin-bottom: 34px !important;
}

.folder-title h2 {
  margin-bottom: 14px !important;
}

/* Natural no-crop organized columns */
.portfolio-natural-grid {
  column-count: 3;
  column-gap: 18px;
  max-width: 1260px;
}

.portfolio-natural-grid a {
  display: block;
  break-inside: avoid;
  margin-bottom: 18px;
  border-radius: 24px;
  overflow: hidden;
  background: #111113;
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.portfolio-natural-grid a:hover {
  transform: translateY(-3px);
  border-color: rgba(216,168,94,.35);
  box-shadow: 0 34px 90px rgba(0,0,0,.34);
}

.portfolio-natural-grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #111113;
}

.headshot-natural-grid {
  max-width: 1080px;
}

/* Pixieset CTA at bottom of portfolio */
.portfolio-pixieset-cta {
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,168,94,.20), transparent 34%),
    linear-gradient(180deg, #08080a, #111113);
  border-top: 1px solid rgba(255,255,255,.08);
}

.portfolio-pixieset-cta p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.portfolio-pixieset-cta .btn {
  margin-top: 20px;
}

@media(max-width: 1000px) {
  .portfolio-natural-grid {
    column-count: 2;
  }
}

@media(max-width: 620px) {
  .portfolio-header {
    min-height: 44vh !important;
  }

  .portfolio-natural-grid {
    column-count: 1;
  }

  .portfolio-category {
    padding-top: 64px !important;
    padding-bottom: 54px !important;
  }
}


/* HOMEPAGE BIG FEATURED GALLERY RESTORE */
.homepage-feature-gallery {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(2, minmax(240px, 320px)) !important;
  gap: 18px !important;
  max-width: 1280px !important;
}

.homepage-feature-gallery a {
  display: block !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.28) !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

.homepage-feature-gallery a:first-child {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}

.homepage-feature-gallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.homepage-feature-gallery a:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(216,168,94,.36) !important;
  box-shadow: 0 36px 95px rgba(0,0,0,.36) !important;
}

/* VIMEO EMBED */
.vimeo-embed-card {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 34px;
  overflow: hidden;
  background: #08080a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 100px rgba(0,0,0,.36);
  aspect-ratio: 16 / 9;
}

.vimeo-embed-card iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.reel-fallback {
  max-width: 900px;
  margin: 30px auto 0;
  text-align: center;
}

.reel-fallback p {
  font-size: 14px;
  color: #958f84;
}

.reel-fallback video {
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  margin-top: 14px;
}

/* Make Pixieset CTA wording section match portfolio feel */
.pixieset-section h2,
.portfolio-pixieset-cta h2 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media(max-width: 900px) {
  .homepage-feature-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
  }

  .homepage-feature-gallery a:first-child {
    grid-column: span 2 !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 10 !important;
  }

  .homepage-feature-gallery a:not(:first-child) {
    aspect-ratio: 4 / 5 !important;
  }
}

@media(max-width: 600px) {
  .homepage-feature-gallery {
    grid-template-columns: 1fr !important;
  }

  .homepage-feature-gallery a:first-child,
  .homepage-feature-gallery a:not(:first-child) {
    grid-column: span 1 !important;
    aspect-ratio: 4 / 5 !important;
  }

  .homepage-feature-gallery a:first-child {
    aspect-ratio: 16 / 10 !important;
  }

  .vimeo-embed-card {
    border-radius: 22px;
  }

  .reel-fallback {
    display: none;
  }
}


/* ASPECT-AWARE HOMEPAGE GALLERY
   Intended clean set:
   gallery-01 = horizontal hero
   gallery-02 = vertical
   gallery-03 = vertical
   gallery-04 = horizontal/square
   gallery-05 = horizontal/square
*/

.homepage-feature-gallery {
  display: grid !important;
  grid-template-columns: 1.25fr .75fr .75fr !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
  max-width: 1280px !important;
  align-items: stretch !important;
}

.homepage-feature-gallery a {
  display: block !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.28) !important;
}

.homepage-feature-gallery img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  background: #111113 !important;
}

/* 01: big horizontal hero */
.homepage-feature-gallery a:nth-child(1) {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
  aspect-ratio: 16 / 10 !important;
}

/* 02 and 03: vertical portraits */
.homepage-feature-gallery a:nth-child(2),
.homepage-feature-gallery a:nth-child(3) {
  aspect-ratio: 2 / 3 !important;
}

/* 04 and 05: horizontal/square support */
.homepage-feature-gallery a:nth-child(4),
.homepage-feature-gallery a:nth-child(5) {
  aspect-ratio: 4 / 3 !important;
}

/* Put supporting images into clean columns */
.homepage-feature-gallery a:nth-child(2) {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}

.homepage-feature-gallery a:nth-child(3) {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
}

.homepage-feature-gallery a:nth-child(4) {
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
}

.homepage-feature-gallery a:nth-child(5) {
  grid-column: 3 / 4 !important;
  grid-row: 2 / 3 !important;
}

/* Mobile/tablet: keep order readable */
@media(max-width: 950px) {
  .homepage-feature-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .homepage-feature-gallery a:nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 10 !important;
  }

  .homepage-feature-gallery a:nth-child(2),
  .homepage-feature-gallery a:nth-child(3),
  .homepage-feature-gallery a:nth-child(4),
  .homepage-feature-gallery a:nth-child(5) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .homepage-feature-gallery a:nth-child(2),
  .homepage-feature-gallery a:nth-child(3) {
    aspect-ratio: 2 / 3 !important;
  }

  .homepage-feature-gallery a:nth-child(4),
  .homepage-feature-gallery a:nth-child(5) {
    aspect-ratio: 4 / 3 !important;
  }
}

@media(max-width: 600px) {
  .homepage-feature-gallery {
    grid-template-columns: 1fr !important;
  }

  .homepage-feature-gallery a:nth-child(1),
  .homepage-feature-gallery a:nth-child(2),
  .homepage-feature-gallery a:nth-child(3),
  .homepage-feature-gallery a:nth-child(4),
  .homepage-feature-gallery a:nth-child(5) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .homepage-feature-gallery a:nth-child(1) {
    aspect-ratio: 16 / 10 !important;
  }

  .homepage-feature-gallery a:nth-child(2),
  .homepage-feature-gallery a:nth-child(3) {
    aspect-ratio: 2 / 3 !important;
  }

  .homepage-feature-gallery a:nth-child(4),
  .homepage-feature-gallery a:nth-child(5) {
    aspect-ratio: 4 / 3 !important;
  }
}


/* FINAL CLEAN HOMEPAGE GALLERY RESET
   This gallery intentionally does NOT use the old smart/masonry rules.
   Recommended files:
   gallery-01.jpg = horizontal / hero
   gallery-02.jpg = vertical
   gallery-03.jpg = vertical
   gallery-04.jpg = horizontal or square
   gallery-05.jpg = horizontal or square
*/

.clean-home-gallery {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  max-width: 1180px !important;
  align-items: stretch !important;
}

.clean-home-gallery a {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.28) !important;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}

.clean-home-gallery a:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(216,168,94,.35) !important;
  box-shadow: 0 38px 95px rgba(0,0,0,.36) !important;
}

.clean-home-gallery img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  background: #111113 !important;
}

/* Big clean hero image */
.clean-home-gallery .home-feature-main {
  grid-column: span 4 !important;
  aspect-ratio: 16 / 8 !important;
}

/* Two vertical portraits */
.clean-home-gallery .home-feature-vertical {
  grid-column: span 1 !important;
  aspect-ratio: 2 / 3 !important;
}

/* Two wider supporting photos */
.clean-home-gallery .home-feature-wide {
  grid-column: span 1 !important;
  aspect-ratio: 4 / 5 !important;
}

/* Make the row balanced: vertical + vertical + wide + wide */
.gallery-actions {
  margin-top: 34px !important;
  justify-content: flex-start !important;
}

/* Kill old homepage gallery rules if the browser still sees them */
.homepage-feature-gallery,
.home-gallery {
  display: none !important;
}

@media(max-width: 900px) {
  .clean-home-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .clean-home-gallery .home-feature-main {
    grid-column: span 2 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .clean-home-gallery .home-feature-vertical,
  .clean-home-gallery .home-feature-wide {
    grid-column: span 1 !important;
  }
}

@media(max-width: 600px) {
  .clean-home-gallery {
    grid-template-columns: 1fr !important;
  }

  .clean-home-gallery .home-feature-main,
  .clean-home-gallery .home-feature-vertical,
  .clean-home-gallery .home-feature-wide {
    grid-column: span 1 !important;
  }

  .clean-home-gallery .home-feature-main {
    aspect-ratio: 16 / 10 !important;
  }

  .clean-home-gallery .home-feature-vertical {
    aspect-ratio: 2 / 3 !important;
  }

  .clean-home-gallery .home-feature-wide {
    aspect-ratio: 4 / 5 !important;
  }

  .gallery-actions {
    justify-content: center !important;
  }
}


/* EXPANDABLE PORTFOLIO GALLERIES */
.expandable-gallery-section {
  position: relative;
}

.expandable-gallery .is-extra {
  display: none !important;
}

.expandable-gallery.is-expanded .is-extra {
  display: block !important;
}

.expand-gallery-btn {
  margin-top: 28px;
}

/* Keep portfolio pages organized and natural ratio */
.portfolio-natural-grid {
  column-count: 3 !important;
  column-gap: 18px !important;
  max-width: 1260px !important;
}

.portfolio-natural-grid a,
.portfolio-natural-grid a.portfolio-item,
.portfolio-natural-grid a.is-vertical,
.portfolio-natural-grid a.is-horizontal,
.portfolio-natural-grid a.is-wide,
.portfolio-natural-grid a.is-square {
  display: block !important;
  break-inside: avoid !important;
  margin-bottom: 18px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
}

.portfolio-natural-grid img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: #111113 !important;
}

@media(max-width: 1000px) {
  .portfolio-natural-grid {
    column-count: 2 !important;
  }
}

@media(max-width: 620px) {
  .portfolio-natural-grid {
    column-count: 1 !important;
  }

  .expand-gallery-btn {
    width: 100%;
    text-align: center;
  }
}


/* FINAL SAFE HOMEPAGE GALLERY — NO OVERLAP
   This uses a simple structure: one hero image, then one separate row.
   It does not depend on masonry/smart gallery classes.
*/
.safe-home-gallery {
  max-width: 1180px !important;
  display: block !important;
}

.safe-home-gallery a {
  display: block !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.28) !important;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}

.safe-home-gallery a:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(216,168,94,.35) !important;
  box-shadow: 0 38px 95px rgba(0,0,0,.36) !important;
}

.safe-home-gallery img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  background: #111113 !important;
}

.safe-gallery-hero {
  width: 100% !important;
  aspect-ratio: 16 / 8 !important;
  margin-bottom: 18px !important;
}

.safe-gallery-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.safe-gallery-row a {
  aspect-ratio: 4 / 5 !important;
}

/* Hide any older homepage gallery systems if they remain in CSS/DOM */
.homepage-feature-gallery,
.home-gallery,
.clean-home-gallery {
  display: none !important;
}

/* Vimeo only */
.vimeo-embed-card {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 34px;
  overflow: hidden;
  background: #08080a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 100px rgba(0,0,0,.36);
  aspect-ratio: 16 / 9;
}

.vimeo-embed-card iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* Remove backup/local video block completely */
.reel-fallback {
  display: none !important;
}

@media(max-width: 900px) {
  .safe-gallery-hero {
    aspect-ratio: 16 / 10 !important;
  }

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

@media(max-width: 600px) {
  .safe-gallery-row {
    grid-template-columns: 1fr !important;
  }

  .safe-gallery-hero {
    aspect-ratio: 16 / 10 !important;
  }

  .safe-gallery-row a {
    aspect-ratio: 4 / 5 !important;
  }

  .vimeo-embed-card {
    border-radius: 22px;
  }
}


/* FINAL PRE-LIVE POLISH */
.gallery-title-only h2,
.showreel-title-only h2 {
  font-size: clamp(58px, 10vw, 128px) !important;
  letter-spacing: -.075em !important;
  margin-bottom: 26px !important;
}

.gallery-title-only {
  margin-bottom: 36px !important;
}

.showreel-title-only {
  margin-bottom: 34px !important;
}

.bio-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.bio-socials .btn {
  white-space: nowrap;
}

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

@media(max-width: 860px) {
  .bio-socials {
    margin-left: 0;
    width: 100%;
  }
  .bio-socials .btn {
    width: 100%;
    text-align: center;
  }
}


/* FINAL PIXIESET SECTION CLEANUP */
.pixieset-section .eyebrow,
.portfolio-pixieset-cta .eyebrow {
  font-size: clamp(28px, 5vw, 72px) !important;
  line-height: .95 !important;
  letter-spacing: -.04em !important;
  color: #d8a85e !important;
  margin-bottom: 22px !important;
}

.pixieset-section h2,
.portfolio-pixieset-cta h2 {
  margin-bottom: 30px !important;
}

.pixieset-section .btn,
.portfolio-pixieset-cta .btn {
  margin-top: 0 !important;
}


/* PORTFOLIO 5 + 10 EXPANDABLE GALLERY */
.expandable-gallery .is-extra {
  display: none !important;
}

.expandable-gallery.is-expanded .is-extra {
  display: block !important;
}

.expand-gallery-btn {
  margin-top: 28px !important;
}

.portfolio-natural-grid {
  column-count: 3 !important;
  column-gap: 18px !important;
  max-width: 1260px !important;
}

.portfolio-natural-grid a,
.portfolio-natural-grid a.portfolio-item {
  display: block !important;
  break-inside: avoid !important;
  margin-bottom: 18px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
}

.portfolio-natural-grid img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: #111113 !important;
}

@media(max-width: 1000px) {
  .portfolio-natural-grid {
    column-count: 2 !important;
  }
}

@media(max-width: 620px) {
  .portfolio-natural-grid {
    column-count: 1 !important;
  }

  .expand-gallery-btn {
    width: 100% !important;
    text-align: center !important;
  }
}


/* FINAL PORTFOLIO 7-VISIBLE EXPANDABLE FIX */
.expandable-gallery .portfolio-item.is-extra,
.portfolio-natural-grid .portfolio-item.is-extra,
.portfolio-folder-grid .portfolio-item.is-extra {
  display: none !important;
}

.expandable-gallery.is-expanded .portfolio-item.is-extra,
.portfolio-natural-grid.is-expanded .portfolio-item.is-extra,
.portfolio-folder-grid.is-expanded .portfolio-item.is-extra {
  display: block !important;
}

.portfolio-category .folder-title .eyebrow {
  display: none !important;
}

.portfolio-category .folder-title h2 {
  margin-bottom: 14px !important;
}

.portfolio-natural-grid {
  column-count: 3 !important;
  column-gap: 18px !important;
  max-width: 1260px !important;
}

.portfolio-natural-grid a,
.portfolio-natural-grid a.portfolio-item {
  display: block !important;
  break-inside: avoid !important;
  margin-bottom: 18px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
}

.portfolio-natural-grid img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: #111113 !important;
}

.expand-gallery-btn {
  margin-top: 28px !important;
}

@media(max-width: 1000px) {
  .portfolio-natural-grid {
    column-count: 2 !important;
  }
}

@media(max-width: 620px) {
  .portfolio-natural-grid {
    column-count: 1 !important;
  }

  .expand-gallery-btn {
    width: 100% !important;
    text-align: center !important;
  }
}


/* PORTFOLIO HEADER CLEANUP */
.portfolio-header {
  min-height: auto !important;
  padding-bottom: 28px !important;
}

.portfolio-header::after {
  display: none !important;
}


/* FINAL PORTFOLIO VISIBILITY: 7 PERFORMANCE / 6 HEADSHOTS */
.expandable-gallery .portfolio-item.is-extra {
  display: none !important;
}

.expandable-gallery.is-expanded .portfolio-item.is-extra {
  display: block !important;
}

.portfolio-natural-grid {
  column-count: 3 !important;
  column-gap: 18px !important;
  max-width: 1260px !important;
}

.portfolio-natural-grid a.portfolio-item {
  display: block !important;
  break-inside: avoid !important;
  margin-bottom: 18px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: auto !important;
}

.portfolio-natural-grid img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.expand-gallery-btn {
  margin-top: 28px !important;
}

@media(max-width: 1000px) {
  .portfolio-natural-grid {
    column-count: 2 !important;
  }
}

@media(max-width: 620px) {
  .portfolio-natural-grid {
    column-count: 1 !important;
  }

  .expand-gallery-btn {
    width: 100% !important;
    text-align: center !important;
  }
}


/* FINAL CORRECT COUNTS: 21 PERFORMANCE / 20 HEADSHOTS */
.expandable-gallery .portfolio-item.is-extra {
  display: none !important;
}

.expandable-gallery.is-expanded .portfolio-item.is-extra {
  display: block !important;
}

.portfolio-natural-grid {
  column-count: 3 !important;
  column-gap: 18px !important;
  max-width: 1260px !important;
}

.portfolio-natural-grid a.portfolio-item {
  display: block !important;
  break-inside: avoid !important;
  margin-bottom: 18px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: auto !important;
}

.portfolio-natural-grid img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.expand-gallery-btn {
  margin-top: 28px !important;
}

@media(max-width: 1000px) {
  .portfolio-natural-grid {
    column-count: 2 !important;
  }
}

@media(max-width: 620px) {
  .portfolio-natural-grid {
    column-count: 1 !important;
  }

  .expand-gallery-btn {
    width: 100% !important;
    text-align: center !important;
  }
}


/* FINAL ORDERED PORTFOLIO GRID
   Replaces masonry/columns because columns visually reorder images.
   This keeps visual order exactly:
   01, 02, 03, 04, 05...
*/
.portfolio-natural-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  column-count: unset !important;
  column-gap: unset !important;
  max-width: 1260px !important;
}

.portfolio-natural-grid a.portfolio-item,
.portfolio-natural-grid a,
.portfolio-natural-grid a.is-extra {
  display: block !important;
  break-inside: unset !important;
  margin-bottom: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
  aspect-ratio: 4 / 5 !important;
}

.portfolio-natural-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: #111113 !important;
}

.expandable-gallery .portfolio-item.is-extra {
  display: none !important;
}

.expandable-gallery.is-expanded .portfolio-item.is-extra {
  display: block !important;
}

@media(max-width: 1000px) {
  .portfolio-natural-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 620px) {
  .portfolio-natural-grid {
    grid-template-columns: 1fr !important;
  }
}


/* RESTORE PREVIOUS PORTFOLIO STRUCTURE
   Brings back the nicer masonry/column-style layout.
   Tradeoff: masonry can look less strictly row-by-row than a rigid grid,
   but it gives a cleaner portfolio feel with mixed image ratios.
*/
.portfolio-natural-grid {
  display: block !important;
  column-count: 3 !important;
  column-gap: 18px !important;
  max-width: 1260px !important;
}

.portfolio-natural-grid a.portfolio-item,
.portfolio-natural-grid a {
  display: block !important;
  break-inside: avoid !important;
  margin-bottom: 18px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #111113 !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
  aspect-ratio: auto !important;
}

.portfolio-natural-grid img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: #111113 !important;
}

.expandable-gallery .portfolio-item.is-extra {
  display: none !important;
}

.expandable-gallery.is-expanded .portfolio-item.is-extra {
  display: block !important;
}

@media(max-width: 1000px) {
  .portfolio-natural-grid {
    column-count: 2 !important;
  }
}

@media(max-width: 620px) {
  .portfolio-natural-grid {
    column-count: 1 !important;
  }
}


/* =========================================================
   MOBILE POLISH FINAL
   This keeps desktop intact but makes phone layout cleaner.
   ========================================================= */

@media(max-width: 760px) {
  body {
    overflow-x: hidden !important;
  }

  .site-header,
  header,
  .hero,
  .portfolio-header {
    min-height: auto !important;
  }

  .nav,
  .site-nav,
  .topbar {
    padding: 16px 18px !important;
    gap: 12px !important;
  }

  .logo,
  .brand {
    font-size: 22px !important;
    letter-spacing: -.04em !important;
  }

  nav a,
  .nav-links a {
    font-size: 12px !important;
  }

  .hero {
    min-height: 92vh !important;
    padding: 96px 18px 42px !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero h1 {
    font-size: clamp(48px, 16vw, 76px) !important;
    line-height: .86 !important;
    letter-spacing: -.08em !important;
    margin-bottom: 18px !important;
  }

  .hero p {
    font-size: 15px !important;
    line-height: 1.45 !important;
    max-width: 94% !important;
  }

  .hero .eyebrow,
  .eyebrow {
    font-size: 12px !important;
    letter-spacing: .18em !important;
  }

  .hero-actions,
  .gallery-actions,
  .button-row,
  .cta-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 15px 18px !important;
  }

  .section {
    padding: 64px 18px !important;
  }

  .section-title {
    margin-bottom: 28px !important;
  }

  .section-title h2,
  .folder-title h2,
  .pixieset-section h2,
  .portfolio-pixieset-cta h2 {
    font-size: clamp(34px, 10vw, 54px) !important;
    line-height: .95 !important;
    letter-spacing: -.06em !important;
  }

  .gallery-title-only h2,
  .showreel-title-only h2 {
    font-size: clamp(54px, 18vw, 86px) !important;
    line-height: .82 !important;
    letter-spacing: -.08em !important;
  }

  /* Homepage gallery on mobile: big clean vertical flow */
  .safe-home-gallery {
    max-width: 100% !important;
  }

  .safe-gallery-hero {
    aspect-ratio: 4 / 5 !important;
    border-radius: 24px !important;
    margin-bottom: 14px !important;
  }

  .safe-gallery-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .safe-gallery-row a {
    aspect-ratio: 4 / 5 !important;
    border-radius: 24px !important;
  }

  /* Vimeo on mobile */
  .vimeo-embed-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* Pixieset CTA on mobile */
  .pixieset-section,
  .portfolio-pixieset-cta {
    margin-left: 18px !important;
    margin-right: 18px !important;
    padding: 54px 18px !important;
    border-radius: 28px !important;
  }

  .pixieset-section .eyebrow,
  .portfolio-pixieset-cta .eyebrow {
    font-size: clamp(34px, 13vw, 62px) !important;
    line-height: .9 !important;
    letter-spacing: -.06em !important;
    margin-bottom: 18px !important;
  }

  /* Bio mobile */
  .about-hero-section {
    min-height: auto !important;
    padding: 72px 18px !important;
  }

  .bio-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 20px !important;
    border-radius: 28px !important;
  }

  .bio-panel h2 {
    font-size: clamp(30px, 9vw, 48px) !important;
    line-height: .96 !important;
  }

  .bio-panel p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .bio-footer {
    display: grid !important;
    grid-template-columns: 58px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .bio-footer img {
    width: 58px !important;
    height: 58px !important;
  }

  .bio-socials {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-left: 0 !important;
  }

  /* Contact form mobile */
  .contact-grid,
  .contact-section,
  .contact-wrap {
    grid-template-columns: 1fr !important;
  }

  .contact-form {
    padding: 22px !important;
    border-radius: 26px !important;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 16px !important; /* prevents iPhone zoom */
  }

  /* Portfolio mobile */
  .portfolio-header {
    padding: 18px !important;
  }

  .portfolio-folder-section,
  .portfolio-category {
    padding-top: 44px !important;
    padding-bottom: 54px !important;
  }

  .portfolio-natural-grid {
    column-count: 1 !important;
    column-gap: 0 !important;
    max-width: 100% !important;
  }

  .portfolio-natural-grid a.portfolio-item,
  .portfolio-natural-grid a {
    margin-bottom: 14px !important;
    border-radius: 22px !important;
  }

  .portfolio-natural-grid img {
    width: 100% !important;
    height: auto !important;
  }

  .expand-gallery-btn {
    width: 100% !important;
    margin-top: 18px !important;
  }

  footer,
  .footer {
    padding: 34px 18px !important;
  }

  .footer-links,
  footer nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: center !important;
  }
}

/* Smaller phones */
@media(max-width: 420px) {
  .hero h1 {
    font-size: clamp(42px, 17vw, 64px) !important;
  }

  .section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .pixieset-section,
  .portfolio-pixieset-cta {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  .bio-panel {
    padding: 24px 16px !important;
  }
}

/* Use separate mobile showreel file when available.
   Keep your desktop video named showreel.mp4.
   Optional mobile video should be named mobile-showreel.mp4.
*/
@media(max-width: 760px) {
  .hero video source[data-mobile-src] {
    content: attr(data-mobile-src);
  }
}


/* CONTACT FORM SUCCESS PAGE */
.success-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.success-card {
  max-width: 780px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;
  background: rgba(255,255,255,.045);
  box-shadow: 0 34px 110px rgba(0,0,0,.36);
}

.success-card h1 {
  font-size: clamp(58px, 10vw, 120px);
  line-height: .9;
  letter-spacing: -.08em;
  margin: 0 0 20px;
}

.success-card p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   MOBILE HERO POSITION FIX
   Fixes text being pushed off-screen on phones.
   ========================================================= */

@media(max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hero {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .hero-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(90deg, rgba(8,8,10,.72), rgba(8,8,10,.32) 56%, rgba(8,8,10,.58)),
      linear-gradient(180deg, rgba(8,8,10,.45), rgba(8,8,10,.08) 38%, rgba(8,8,10,.86)) !important;
    z-index: 1 !important;
  }

  .nav {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 18px 0 !important;
  }

  .hero-content {
    position: absolute !important;
    z-index: 2 !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 34px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  .hero-content .eyebrow {
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: .17em !important;
    margin-bottom: 12px !important;
    max-width: 280px !important;
  }

  .hero h1,
  .hero-content h1 {
    width: 100% !important;
    max-width: 340px !important;
    font-size: clamp(42px, 13.8vw, 58px) !important;
    line-height: .88 !important;
    letter-spacing: -.075em !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    text-wrap: balance !important;
  }

  .hero p,
  .hero-content p {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
  }

  .hero-actions {
    width: 100% !important;
    max-width: 320px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 13px 16px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .logo,
  .brand {
    max-width: 190px !important;
  }
}

@media(max-width: 420px) {
  .hero-content {
    left: 16px !important;
    right: 16px !important;
    bottom: 26px !important;
  }

  .hero h1,
  .hero-content h1 {
    max-width: 305px !important;
    font-size: clamp(38px, 13vw, 52px) !important;
  }

  .hero p,
  .hero-content p,
  .hero-actions {
    max-width: 300px !important;
  }
}

/* Very short mobile screens, like browser preview/devtools */
@media(max-width: 760px) and (max-height: 720px) {
  .hero-content {
    bottom: 18px !important;
  }

  .hero-content .eyebrow {
    margin-bottom: 8px !important;
  }

  .hero h1,
  .hero-content h1 {
    font-size: clamp(34px, 11.5vw, 46px) !important;
    margin-bottom: 10px !important;
  }

  .hero p,
  .hero-content p {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }

  .hero-actions .btn {
    min-height: 43px !important;
    padding: 11px 14px !important;
  }
}