:root{--gold:#e1b86b;--paper:#f2f0ec;--black:#080b10}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",sans-serif;background:var(--paper);color:#111}a{text-decoration:none;color:inherit}.site-header{position:fixed;z-index:20;top:0;left:0;right:0;height:78px;padding:0 4vw;gap:28px;display:flex;align-items:center;justify-content:space-between;color:#fff;background:linear-gradient(#05070a99,transparent)}.brand{display:flex;gap:13px;align-items:center;font-size:16px;white-space:nowrap}.brand-logo{width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-size:11px}.brand em{font-style:normal;color:#aaa}#nav{display:flex;align-items:center;gap:27px}#nav a{font-size:10px;letter-spacing:.11em;text-transform:uppercase;padding:8px 0;color:#eee;position:relative;white-space:nowrap}#nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold)}.search{font-size:25px;color:#fff;margin-left:12px}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:24px}

.hero{height:100vh;min-height:650px;position:relative;overflow:hidden;color:#fff;background:#09121d}.bokeh{position:absolute;inset:-15%;background:radial-gradient(circle at 83% 48%,#ef9550 0 2.5%,transparent 7%),radial-gradient(circle at 72% 42%,#e4b06c88 0 2.5%,transparent 7%),radial-gradient(circle at 89% 61%,#d76f3d66 0 2.3%,transparent 7%),radial-gradient(circle at 62% 53%,#4e9bc088 0 3%,transparent 9%),radial-gradient(circle at 77% 68%,#367fa566 0 3.5%,transparent 10%),linear-gradient(112deg,#040609,#0a111a 38%,#183149 72%,#09121d);filter:blur(23px);transform:scale(1.1)}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#030507ed 0%,#030507c9 30%,#03050762 53%,#03050722 100%),linear-gradient(0deg,#00000040,transparent 50%)}.hero-content{position:absolute;z-index:4;left:6.1vw;top:50%;transform:translateY(-45%);width:480px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:.24em;margin-bottom:22px;color:#ddd}.hero h1{font-family:"Playfair Display",serif;font-size:clamp(58px,6vw,92px);line-height:.91;font-weight:500;letter-spacing:-.045em;margin:0 0 25px}.hero h1 span{color:var(--gold)}.hero p{font-size:14px;line-height:1.72;color:#ddd;margin:0 0 29px}.actions{display:flex;gap:25px;align-items:center}.primary{padding:15px 18px;background:#f1cc89;color:#111;font-size:9px;font-weight:700;letter-spacing:.13em;display:flex;gap:30px}.showreel{font-size:9px;letter-spacing:.13em;display:flex;gap:10px;align-items:center}.showreel i{font-style:normal;border:1px solid #aaa;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:8px}.categories{position:absolute;z-index:4;right:5.5vw;top:43%;border-left:1px solid #ffffff7a;padding-left:18px;display:flex;flex-direction:column;gap:11px}.categories a{font-size:8px;letter-spacing:.2em;color:#eee}.categories a:hover{color:var(--gold)}.signature{position:absolute;z-index:4;right:4.3vw;bottom:7%;font-family:"Playfair Display",serif;font-size:39px;font-style:italic}.signature small{display:block;font-family:"DM Sans";font-size:7px;letter-spacing:.28em;text-align:center;font-style:normal}.scroll{position:absolute;z-index:4;left:4.4vw;bottom:4.5%;font-size:8px;letter-spacing:.19em;display:flex;gap:13px;align-items:center}.scroll i{width:16px;height:29px;border:1px solid #bbb;border-radius:10px;display:block;position:relative}.scroll i:after{content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;background:var(--gold);transform:translateX(-50%)}

.section{padding:115px 8vw}.label{font-size:9px;letter-spacing:.22em;color:#777;margin-bottom:46px}.two{display:grid;grid-template-columns:1.1fr 1fr;gap:9vw}h2{font-family:"Playfair Display",serif;font-weight:500;font-size:clamp(45px,5vw,73px);line-height:.98;letter-spacing:-.04em;margin:0}h2 span{color:#8b8379}.about-copy{display:grid;grid-template-columns:160px 1fr;gap:28px}.about-copy img{width:160px;height:205px;object-fit:cover;object-position:top}.about-copy p{line-height:1.7;color:#666}.about-copy .large{font-size:18px;color:#222}.link{font-size:9px;letter-spacing:.13em;border-bottom:1px solid #222;padding-bottom:5px}.portfolio{background:#0b0b0b;color:#fff}.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}.heading .label{margin-bottom:16px}.heading p{color:#777;font-size:10px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}.filter{background:none;border:1px solid #333;color:#999;padding:8px 12px;font-size:9px;text-transform:uppercase;letter-spacing:.13em;cursor:pointer}.filter.active{color:#fff;border-color:#aaa}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.card{height:380px;position:relative;overflow:hidden;background:#16191d;cursor:pointer}.card.wide{grid-column:span 2}.card.tall{height:530px}.card img{width:100%;height:100%;object-fit:cover;transition:.5s}.card>div{position:absolute;inset:auto 18px 16px;display:flex;justify-content:space-between;align-items:end;text-shadow:0 2px 12px #000}.card small{font-size:8px;letter-spacing:.17em}.card b{font:500 19px "Playfair Display"}.card:hover img{transform:scale(1.04);filter:brightness(.75)}.architecture{background:linear-gradient(135deg,#10151c,#456274 48%,#0d1117)}.nature{background:linear-gradient(135deg,#08120a,#41634a,#0b1710)}.rail{background:linear-gradient(135deg,#171717,#755037,#111)}.aviation{background:linear-gradient(#477da4,#d2e0e8 55%,#253744)}.card:not(:has(img))>div{opacity:1}.quote{padding:100px 8vw;text-align:center;background:#ddd9d1}.quote p{font:500 clamp(30px,4vw,53px) "Playfair Display";margin:0 0 10px}.quote small{letter-spacing:.2em;color:#777}.contact{background:var(--paper)}.contact p{line-height:1.7;color:#666}.email{display:block;font:500 clamp(20px,2.5vw,34px) "Playfair Display";margin:24px 0 8px;border-bottom:1px solid #222;width:max-content}.contact small{font-size:9px;letter-spacing:.15em;color:#888}footer{background:#080808;color:#666;padding:24px 8vw;font-size:8px;letter-spacing:.12em;display:flex;justify-content:space-between}

@media(max-width:1050px){#nav{gap:16px}#nav a{font-size:9px}.hero-content{left:6vw;max-width:48vw}}
@media(max-width:700px){.site-header{height:66px;padding:0 6vw}.search{display:none}.menu-toggle{display:block}#nav{display:none;position:absolute;top:66px;left:0;right:0;background:#050505f5;padding:10px 6vw 20px;flex-direction:column;gap:0}.nav.open,#nav.open{display:flex}#nav a{width:100%;padding:11px 0}.hero{min-height:720px}.bokeh{filter:blur(17px)}.hero-content{left:8vw;width:78vw;max-width:none}.hero h1{font-size:56px}.hero p{font-size:13px}.categories{display:none}.signature{right:7vw;bottom:7%;font-size:30px}.scroll{left:8vw}.section{padding:85px 7vw}.two{grid-template-columns:1fr;gap:35px}.about-copy{grid-template-columns:110px 1fr;gap:18px}.about-copy img{width:110px;height:150px}.heading{display:block}.gallery{grid-template-columns:1fr}.card,.card.tall{height:420px}.card.wide{grid-column:span 1}footer{display:block;line-height:2}}

/* =========================================
   PHOTO LIGHTBOX
========================================= */

.lightbox {
    position: fixed;
    z-index: 9999;
    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.94);

    padding: 40px;
}


.lightbox.open {
    display: flex;
}


/* Main image */

.lightbox-content {
    position: relative;

    max-width: 90vw;
    max-height: 90vh;

    display: flex;
    flex-direction: column;
    align-items: center;
}


.lightbox-image {
    display: block;

    max-width: 88vw;
    max-height: 78vh;

    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow:
        0 20px 80px rgba(0, 0, 0, 0.7);
}


/* Image information */

.lightbox-info {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 15px;

    color: white;
}


.lightbox-category {

    font-size: 9px;

    letter-spacing: 0.2em;

    color: #aaa;

    text-transform: uppercase;
}


.lightbox-title {

    font-family: "Playfair Display", serif;

    font-size: 20px;

    font-weight: 500;

    color: white;
}


/* Close button */

.lightbox-close {

    position: absolute;

    top: 20px;
    right: 28px;

    z-index: 10;

    width: 45px;
    height: 45px;

    border: none;

    background: transparent;

    color: white;

    font-size: 42px;

    line-height: 1;

    cursor: pointer;
}


.lightbox-close:hover {

    color: #e1b86b;

}


/* Previous / Next */

.lightbox-prev,
.lightbox-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    border: none;

    background: transparent;

    color: white;

    font-size: 65px;

    font-family: Arial, sans-serif;

    cursor: pointer;

    padding: 20px;
}


.lightbox-prev {

    left: 15px;

}


.lightbox-next {

    right: 15px;

}


.lightbox-prev:hover,
.lightbox-next:hover {

    color: #e1b86b;

}


/* Mobile */

@media (max-width: 700px) {

    .lightbox {

        padding: 20px;

    }


    .lightbox-image {

        max-width: 94vw;

        max-height: 75vh;

    }


    .lightbox-prev,
    .lightbox-next {

        font-size: 45px;

        padding: 10px;

    }


    .lightbox-prev {

        left: 0;

    }


    .lightbox-next {

        right: 0;

    }


    .lightbox-info {

        padding: 0 10px;

    }


    .lightbox-title {

        font-size: 16px;

    }

}

/* =========================================
   AVIATION GALLERY
========================================= */

.gallery .aviation-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.gallery .aviation-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Put aviation photographs in 2 columns */

.gallery:has(.aviation-photo) {
  grid-template-columns: repeat(2, 1fr);
}


/* Aviation cards */

.gallery .aviation-photo {
  grid-column: auto;
}


/* Remove tall behaviour from aviation */

.gallery .aviation-photo.tall {
  aspect-ratio: 16 / 9;
}


/* Mobile */

@media (max-width: 800px) {

  .gallery:has(.aviation-photo) {
    grid-template-columns: 1fr;
  }

}

/* =========================================
   PORTRAIT SERVICE - HERO
========================================= */

.portrait-service {
  position: absolute;
  right: 9%;
  top: 44%;
  width: 300px;
  transform: translateY(-50%);
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.portrait-service .service-label {
  margin-bottom: 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #e8bd68;
}

.portrait-service h2 {
  margin: 0 0 22px;
  font-family: "Playfair Display", serif;
  font-size: 42px;
  line-height: 1.08;
  font-weight: 500;
  color: #fff;
}

.portrait-service h2 span {
  color: #e8bd68;
}

.portrait-service p {
  margin: 0 0 28px;
  max-width: 270px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  transition: 0.3s ease;
}

.service-link span {
  color: #e8bd68;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.service-link:hover {
  color: #e8bd68;
}

.service-link:hover span {
  transform: translateX(6px);
}

/* =========================================
   MOBILE HERO LAYOUT FIX
========================================= */

@media (max-width: 700px) {

    .hero {
        height: auto;
        min-height: 100vh;
        padding: 105px 8vw 80px;
        overflow: hidden;
    }

    /* Main hero content */
    .hero-content {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: none;
    }

    .eyebrow {
        font-size: 8px;
        letter-spacing: 0.18em;
        margin-bottom: 20px;
    }

    .hero h1 {
        font-size: 56px;
        line-height: 0.94;
        letter-spacing: -0.045em;
        margin-bottom: 25px;
    }

    .hero p {
        font-size: 13px;
        line-height: 1.7;
        margin-bottom: 28px;
    }

    .actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .primary {
        padding: 15px 18px;
        gap: 25px;
    }

    /* Portrait section */
    .portrait-service {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;

        width: 100%;
        max-width: none;

        margin-top: 65px;
        padding-left: 20px;

        border-left: 1px solid rgba(255, 255, 255, 0.25);
    }

    .portrait-service .service-label {
        margin-bottom: 22px;
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .portrait-service h2 {
        font-size: 48px;
        line-height: 0.98;
        margin-bottom: 22px;
    }

    .portrait-service p {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    .service-link {
        font-size: 10px;
        letter-spacing: 1.7px;
        gap: 14px;
    }

    /* Signature */
    .signature {
        position: relative;
        right: auto;
        bottom: auto;

        margin-top: 75px;

        text-align: right;
        font-size: 30px;
    }

    /* Scroll indicator */
    .scroll {
        position: relative;
        left: auto;
        bottom: auto;

        margin-top: 40px;

        font-size: 8px;
    }
}