@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@400;500;600&display=swap');
:root{--black:#08090b;--ink:#101216;--graphite:#17191d;--ivory:#f3f0ea;--white:#fff;--gold:#c8a96b;--muted:#9b9b9b;--line:rgba(255,255,255,.12);--max:1400px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--black);font-family:'DM Sans',Arial,sans-serif;line-height:1.65}body.no-scroll{overflow:hidden}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 4%;background:rgba(8,9,11,.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:2px;font-size:13px}.brand img{width:54px;height:54px;object-fit:contain;border-radius:4px}.site-nav{display:flex;align-items:center;gap:22px;text-transform:uppercase;font-size:10px;letter-spacing:1.2px}.site-nav a{opacity:.82;transition:.25s}.site-nav a:hover,.site-nav a.active{opacity:1;color:var(--gold)}.nav-cta{padding:11px 16px;border:1px solid var(--gold);color:var(--gold)!important}.menu-toggle{display:none;background:none;border:0;width:42px;padding:7px}.menu-toggle i{display:block;height:2px;background:#fff;margin:6px 0}
.hero{min-height:100vh;display:flex;align-items:center;padding:150px 8%;position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 75% 30%,#4b3b2c 0,#1c1b1a 28%,#08090b 70%)}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.32) 30%,rgba(0,0,0,.10) 58%,rgba(0,0,0,0) 100%); pointer-events:none;
}.hero-content{position:relative;z-index:2;max-width:850px}.hero h1,.page-hero h1{font:500 clamp(54px,9vw,124px)/.96 'Playfair Display',serif;margin:18px 0 26px}.hero h1 em,.page-hero h1 em,h2 em{color:var(--gold);font-style:italic}.hero-lead{font-size:19px;max-width:680px;color:#ddd}.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:10px;color:var(--gold);font-weight:600}.button-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.button{display:inline-block;border:1px solid var(--gold);padding:13px 22px;text-transform:uppercase;letter-spacing:1.2px;font-size:10px;font-weight:700}.button.gold{background:var(--gold);color:#101010}.button.outline{color:#fff}.dark-button{background:#101216;color:#fff}.hero-scroll{position:absolute;z-index:3;bottom:28px;left:8%;font-size:9px;letter-spacing:2px;color:#bbb}.hero-scroll span{color:var(--gold);margin-left:10px}
.section{padding:115px max(7%,calc((100vw - var(--max))/2));}.section.dark,.dark{background:var(--graphite);color:#fff}.intro{max-width:1000px}.intro h2,.section-head h2{font:500 clamp(40px,6vw,78px)/1.02 'Playfair Display',serif;margin:14px 0 30px}.intro-copy{max-width:760px}.intro-copy p,.split p,.narrow p,.page-hero>p,.contact-grid p,.legal p{font-size:17px;line-height:1.85;color:#555}.dark p{color:#c4c4c4}.text-link{display:inline-block;margin-top:15px;color:var(--gold);text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:700}.section-head{margin-bottom:45px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{min-height:300px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(135deg,#725e49,#111);position:relative;overflow:hidden;transition:transform .3s}.service-card:hover,.portfolio-item:hover{transform:translateY(-5px)}.service-card span{font:500 28px/1.15 'Playfair Display',serif}.service-card small,.portfolio-item small{color:var(--gold);margin-top:9px;text-transform:uppercase;letter-spacing:1px}.service-video{background:linear-gradient(145deg,#35404a,#101214)}.service-film{background:linear-gradient(145deg,#7f6a54,#191614)}.service-commercial{background:linear-gradient(145deg,#4c4c4c,#101010)}.service-event{background:linear-gradient(145deg,#603f39,#101010)}.service-portrait{background:linear-gradient(145deg,#2d4446,#101010)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.split.reverse{grid-template-columns:1fr 1fr}.visual{min-height:560px;background:#1a1a1a;position:relative;overflow:hidden}.visual:after,.story-image:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(200,169,107,.18),transparent 50%,rgba(0,0,0,.55))}.visual-photo{background:linear-gradient(135deg,#bca281,#493d33 38%,#111 82%)}.visual-video{display:grid;place-items:center;background:linear-gradient(135deg,#344a55,#0b0d0f 70%)}.play{width:76px;height:76px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);padding-left:4px}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin:-15px 0 28px}.filter{border:1px solid #bbb;background:transparent;padding:9px 13px;font-size:10px;text-transform:uppercase;letter-spacing:1px}.filter.active,.filter:hover{background:#111;color:#fff;border-color:#111}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.portfolio-item{border:0;min-height:330px;text-align:left;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(145deg,#735e48,#121212);transition:.3s;position:relative;overflow:hidden}.portfolio-item span{font:500 26px 'Playfair Display',serif;position:relative;z-index:2}.portfolio-two{background:linear-gradient(145deg,#35404a,#111)}.portfolio-three{background:linear-gradient(145deg,#92765a,#27211d)}.portfolio-four{background:linear-gradient(145deg,#555,#101010)}.portfolio-five{background:linear-gradient(145deg,#613f39,#111)}.portfolio-six{background:linear-gradient(145deg,#2d4446,#101010)}.center{text-align:center;margin-top:38px}
.four-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.four-grid article{border-top:1px solid var(--line);padding-top:20px}.four-grid strong{color:var(--gold);font-size:12px;letter-spacing:2px}.four-grid h3{font:500 24px 'Playfair Display',serif}.four-grid p{font-size:14px}.process article{border-top:1px solid #ccc}.process h3{font-size:18px}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.story-image{height:260px;position:relative;background:linear-gradient(145deg,#675544,#111);margin-bottom:22px}.story-two{background:linear-gradient(145deg,#35404a,#111)}.story-three{background:linear-gradient(145deg,#92765a,#27211d)}.story h3{font:500 26px 'Playfair Display',serif}.testimonial{text-align:center;max-width:1000px;margin:auto}.testimonial blockquote{font:italic 500 clamp(25px,4vw,45px)/1.35 'Playfair Display',serif;margin:35px auto}.muted{color:#777}.cta{padding:120px 7%;text-align:center;background:#0b0c0f;color:#fff}.cta h2{font:500 clamp(42px,6vw,76px)/1.05 'Playfair Display',serif;margin:15px 0}.cta p:not(.eyebrow){color:#bbb;max-width:620px;margin:0 auto}
.page-hero{padding:190px 7% 100px;background:#0b0c0f;color:#fff}.page-hero>p:not(.eyebrow){max-width:720px;color:#c6c6c6}.narrow{max-width:850px}.service-list{max-width:1050px;margin:auto}.service-list article{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:35px 0;border-top:1px solid #ccc}.service-number{font-size:26px;color:var(--gold)}.service-list h2{font:500 34px 'Playfair Display',serif;margin:0 0 8px}.mini-card{padding:28px;border:1px solid rgba(128,128,128,.25)}.mini-card h3{font:500 25px 'Playfair Display',serif}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.contact-details{display:grid;gap:12px;margin-top:30px}.contact-details a:hover{color:var(--gold)}.contact-form{display:grid;gap:18px}.contact-form label{display:grid;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:1px}.contact-form input,.contact-form textarea,.contact-form select{border:1px solid #c8c3ba;background:#fff;padding:13px 14px;outline:none}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--gold)}.legal{max-width:900px}.footer{background:#08090b;color:#fff;padding:70px 7% 25px}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;padding-bottom:50px}.footer-brand{margin-bottom:20px}.footer p{color:#aaa;max-width:420px}.footer h3{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--gold)}.footer-main>div:not(:first-child){display:grid;align-content:start;gap:10px}.footer-main a:hover{color:var(--gold)}.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;color:#777;font-size:11px}.floating-whatsapp{position:fixed;right:22px;bottom:22px;z-index:40;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#1f8f4c;color:#fff;font-weight:700;box-shadow:0 10px 25px rgba(0,0,0,.3)}
.lightbox{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);place-items:center;padding:30px}.lightbox.open{display:grid}.lightbox-box{max-width:850px;width:100%;color:#fff}.lightbox-placeholder{height:55vh;background:linear-gradient(135deg,#695640,#111);margin-bottom:18px}.lightbox-close{position:absolute;right:25px;top:15px;background:none;border:0;color:#fff;font-size:40px}.lightbox h3{font:500 32px 'Playfair Display',serif}
@media(max-width:1050px){.site-nav{gap:13px}.service-grid,.portfolio-grid{grid-template-columns:repeat(2,1fr)}.four-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.site-header{padding:12px 5%}.brand img{width:46px;height:46px}.brand span{font-size:11px}.menu-toggle{display:block}.site-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:22px 6%;background:#0b0c0f;flex-direction:column;align-items:flex-start;gap:18px}.site-nav.open{display:flex}.nav-cta{width:100%;text-align:center}.hero{padding:140px 7% 90px}.hero h1,.page-hero h1{font-size:clamp(52px,15vw,84px)}.section{padding:80px 7%}.service-grid,.portfolio-grid,.story-grid,.split,.contact-grid,.footer-main{grid-template-columns:1fr}.split{gap:35px}.split.reverse .visual{order:1}.visual{min-height:400px}.four-grid{grid-template-columns:1fr 1fr;gap:20px}.footer-main{gap:35px}.footer-bottom{flex-direction:column;gap:8px}.page-hero{padding:150px 7% 75px}}
@media(max-width:500px){.four-grid{grid-template-columns:1fr}.portfolio-item{min-height:270px}.service-card{min-height:250px}.hero-lead{font-size:16px}.button{width:100%;text-align:center}.button-row{display:grid}.floating-whatsapp{right:15px;bottom:15px}}
/* =========================================================
   TITAN SHOT IT V2 — BEHIND THE LENS / CREATOR SECTION
   ========================================================= */

.creator-section {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    align-items: stretch;
    padding: 0;
    background: #090a0c;
    overflow: hidden;
}

.creator-visual {
    position: relative;
    min-height: 720px;
    overflow: hidden;
}

.creator-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.04) 50%,
            rgba(9,10,12,.58) 100%
        );
    pointer-events: none;
}

.creator-visual img {
    width: 100%;
    height: 100%;
    min-height: 720px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.creator-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(60px, 7vw, 120px);
    background: #090a0c;
}

.creator-content h2 {
    max-width: 650px;
    margin-bottom: 28px;
}

.creator-content h2 em {
    color: #c8a96b;
}

.creator-content p {
    max-width: 590px;
    color: rgba(255,255,255,.72);
    line-height: 1.8;
}

.creator-content .creator-lead {
    color: rgba(255,255,255,.94);
    font-size: 1.08rem;
}

.creator-specialisms {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 30px 0 32px;
    padding: 22px 0;
    border-top: 1px solid rgba(200,169,107,.25);
    border-bottom: 1px solid rgba(200,169,107,.25);
}

.creator-specialisms span {
    color: #c8a96b;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.creator-content .text-link {
    align-self: flex-start;
}

/* Tablet */
@media (max-width: 980px) {
    .creator-section {
        grid-template-columns: 1fr 1fr;
    }

    .creator-visual,
    .creator-visual img {
        min-height: 620px;
    }

    .creator-content {
        padding: 60px 42px;
    }
}

/* Mobile */
@media (max-width: 760px) {
    .creator-section {
        display: flex;
        flex-direction: column;
    }

    .creator-visual {
        min-height: 500px;
    }

    .creator-visual img {
        min-height: 500px;
        height: 500px;
        object-position: center center;
    }

    .creator-visual::after {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,0) 65%,
                rgba(9,10,12,.55) 100%
            );
    }

    .creator-content {
        padding: 52px 24px 64px;
    }

    .creator-specialisms {
        gap: 12px 18px;
    }
}
/* ==========================================
   TITAN SHOT IT — MOBILE OVERFLOW + ABOUT IMAGE FIX
   ========================================== */

@media (max-width: 780px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .split,
    .split.reverse {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .split > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .split .media {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .split .media img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover;
        object-position: center center;
    }

    .split .copy {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
}
/* ==========================================
   TITAN SHOT IT V2 — PHOTOGRAPHY PORTRAIT
   DESKTOP + MOBILE
   ========================================== */

.v2-photo-portrait {
    position: relative;
    overflow: hidden;
    background: #111;
}

.v2-photo-portrait img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    display: block;
    object-fit: cover;

    /* Desktop crop */
    object-position: center 38%;
}

/* Slight editorial overlay */
.v2-photo-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 55%,
            rgba(0,0,0,.24) 100%
        );
}

/* Tablet */
@media (max-width: 980px) {
    .v2-photo-portrait img {
        min-height: 500px;
        object-position: center 34%;
    }
}

/* Mobile */
@media (max-width: 780px) {
    .split.section {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .v2-photo-portrait {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .v2-photo-portrait img {
        width: 100%;
        height: 520px;
        min-height: 0;
        object-fit: cover;

        /* Keep face and upper body safely framed */
        object-position: center 28%;
    }
}

/* Small mobile */
@media (max-width: 500px) {
    .v2-photo-portrait img {
        height: 460px;
        object-position: center 26%;
    }
}
/* ==========================================
   TITAN SHOT IT V2 — MAIN LAYOUT SAFETY RESET
   Prevent homepage sections from forming
   unintended side-by-side columns
   ========================================== */

main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

main > section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   TITAN SHOT IT V2 — CINEMATIC VIDEO SHOWREEL
   DESKTOP + TABLET + MOBILE
   ========================================================= */

.v2-showreel {
    position: relative;
    overflow: hidden;
    background: #090a0c;
    min-width: 0;
    min-height: 620px;
}

.v2-showreel video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
    object-position: center center;
}

/* Subtle cinematic treatment */
.v2-showreel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.04) 55%,
        rgba(0,0,0,.28) 100%
    );
}

/* Showreel label */
.showreel-badge {
    position: absolute;
    left: 28px;
    bottom: 28px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(200,169,107,.65);
    background: rgba(9,10,12,.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.showreel-badge span {
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.showreel-badge small {
    color: #c8a96b;
    font-size: .68rem;
    letter-spacing: .08em;
}

/* Tablet */
@media (max-width: 980px) {
    .v2-showreel,
    .v2-showreel video {
        min-height: 540px;
    }
}

/* Mobile */
@media (max-width: 780px) {
    .v2-showreel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 500px;
        overflow: hidden;
    }

    .v2-showreel video {
        width: 100%;
        max-width: 100%;
        height: 500px;
        min-height: 0;
        object-fit: cover;
        object-position: center center;
    }

    .showreel-badge {
        left: 20px;
        bottom: 20px;
    }
}

/* Small phones */
@media (max-width: 500px) {
    .v2-showreel {
        min-height: 440px;
    }

    .v2-showreel video {
        height: 440px;
        object-position: center center;
    }

    .showreel-badge {
        left: 16px;
        bottom: 16px;
    }
}

/* =========================================================
   TITAN SHOT IT V2 — SELECTED WORK REAL IMAGE CARDS
   DESKTOP + TABLET + MOBILE
   ========================================================= */

.v2-portfolio-card {
    min-height: 360px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;
}

.v2-portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    filter: saturate(1.04) contrast(1.02);
}

.v2-portfolio-card span,
.v2-portfolio-card small {
    position: relative;
    z-index: 2;
}

.v2-portfolio-card span {
    color: #fff;
}

.v2-portfolio-card small {
    color: #c8a96b;
}

/* Better crops by category */
.portfolio-one {
    background-position: center 42% !important;
}

.portfolio-two {
    background-position: center 28% !important;
}

.portfolio-three {
    background-position: center 45% !important;
}

.portfolio-four,
.portfolio-five {
    background-position: center 48% !important;
}

.portfolio-six {
    background-position: center 42% !important;
}

/* Tablet */
@media (max-width: 1050px) {
    .v2-portfolio-card {
        min-height: 330px;
    }
}

/* Mobile */
@media (max-width: 780px) {
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .v2-portfolio-card {
        width: 100%;
        max-width: 100%;
        min-height: 420px;
        background-size: cover !important;
    }

    .portfolio-one {
        background-position: center 38% !important;
    }

    .portfolio-two {
        background-position: center 24% !important;
    }

    .portfolio-three {
        background-position: center 42% !important;
    }

    .portfolio-four,
    .portfolio-five {
        background-position: center 46% !important;
    }

    .portfolio-six {
        background-position: center 40% !important;
    }
}

/* Small phones */
@media (max-width: 500px) {
    .v2-portfolio-card {
        min-height: 360px;
    }
}


/* =========================================================
   TITAN SHOT IT V2 — CREATOR SECTION FINAL POLISH
   Editorial spacing refinement
   ========================================================= */

/* Tighter, more intentional editorial composition */
.creator-content {
    padding: clamp(56px, 6vw, 96px);
}

/* Refine headline spacing */
.creator-content h2 {
    max-width: 620px;
    margin-bottom: 22px;
    line-height: 1.15;
}

/* Improve paragraph rhythm and readability */
.creator-content p {
    max-width: 560px;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* Lead paragraph stays slightly stronger */
.creator-content .creator-lead {
    margin-bottom: 18px;
}

/* Cleaner specialisms row */
.creator-specialisms {
    flex-wrap: nowrap;
    gap: 28px;
    margin: 24px 0 26px;
    padding: 20px 0;
}

.creator-specialisms span {
    white-space: nowrap;
}

/* Refine final CTA position */
.creator-content .text-link {
    margin-top: 10px;
}

/* Prevent specialisms becoming cramped on smaller screens */
@media (max-width: 1180px) {
    .creator-specialisms {
        flex-wrap: wrap;
        gap: 12px 24px;
    }
}

/* Preserve comfortable mobile spacing */
@media (max-width: 760px) {
    .creator-content {
        padding: 48px 24px 58px;
    }

    .creator-content h2 {
        margin-bottom: 20px;
    }

    .creator-specialisms {
        flex-wrap: wrap;
        margin: 22px 0 24px;
    }

    .creator-content .text-link {
        margin-top: 6px;
    }
}

/* =========================================================
   TITAN SHOT IT V2 — PHOTOGRAPHY PAGE
   DESKTOP + TABLET + MOBILE
   ========================================================= */

/* HERO */
.photo-page-hero {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    min-height: 700px;
    background: #090a0c;
    overflow: hidden;
}

.photo-page-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(70px, 8vw, 130px);
    background: #090a0c;
}

.photo-page-hero-copy h1 {
    margin: 18px 0 28px;
    max-width: 720px;
}

.photo-page-hero-copy h1 em {
    color: #c8a96b;
}

.photo-page-lead {
    max-width: 620px;
    color: rgba(255,255,255,.78);
    line-height: 1.75;
    font-size: 1.05rem;
    margin-bottom: 28px;
}

.photo-page-hero-image {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.photo-page-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(9,10,12,.42) 0%,
            rgba(9,10,12,.10) 22%,
            rgba(0,0,0,.05) 100%
        );
}

.photo-page-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 700px;
    display: block;
    object-fit: cover;
    object-position: center 30%;
}


/* SERVICE IMAGE GRID */
.photo-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.photo-service-card {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background: #111;
}

.photo-service-card img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    display: block;
    object-fit: cover;
    transition: transform .7s ease;
}

.photo-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 30%,
            rgba(0,0,0,.20) 58%,
            rgba(0,0,0,.82) 100%
        );
}

.photo-service-card:hover img {
    transform: scale(1.035);
}

.photo-service-overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 38px;
    color: #fff;
}

.photo-service-overlay h2 {
    color: #fff;
    margin: 8px 0 14px;
    max-width: 520px;
}

.photo-service-overlay p:not(.eyebrow) {
    max-width: 520px;
    color: rgba(255,255,255,.78);
    line-height: 1.65;
}

.photo-service-overlay .text-link {
    display: inline-block;
    margin-top: 14px;
}

/* Individual crops */
.photo-service-wedding img {
    object-position: center 42%;
}

.photo-service-portrait img {
    object-position: center 25%;
}

.photo-service-event img {
    object-position: center 44%;
}

.photo-service-commercial img {
    object-position: center 46%;
}


/* CLOSING STATEMENT */
.photo-page-statement {
    display: flex;
    justify-content: center;
}

.photo-page-statement-inner {
    width: min(100%, 900px);
    text-align: center;
    padding: 30px 0;
}

.photo-page-statement h2 {
    margin: 18px 0 24px;
}

.photo-page-statement h2 em {
    color: #c8a96b;
}

.photo-page-statement p {
    max-width: 720px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,.72);
    line-height: 1.8;
}

.photo-page-statement .button-row {
    justify-content: center;
}


/* TABLET */
@media (max-width: 980px) {
    .photo-page-hero {
        grid-template-columns: 1fr 1fr;
        min-height: 620px;
    }

    .photo-page-hero-copy {
        padding: 60px 46px;
    }

    .photo-page-hero-image img {
        min-height: 620px;
    }

    .photo-service-card,
    .photo-service-card img {
        min-height: 500px;
    }

    .photo-service-overlay {
        padding: 30px;
    }
}


/* MOBILE */
@media (max-width: 780px) {
    .photo-page-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .photo-page-hero-copy {
        padding: 58px 24px 46px;
    }

    .photo-page-hero-copy h1 {
        margin: 14px 0 22px;
    }

    .photo-page-hero-image {
        width: 100%;
        max-width: 100%;
    }

    .photo-page-hero-image img {
        width: 100%;
        height: 520px;
        min-height: 0;
        object-fit: cover;
        object-position: center 24%;
    }

    .photo-page-hero-image::after {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.05) 60%,
                rgba(9,10,12,.30) 100%
            );
    }

    .photo-services {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .photo-service-card {
        width: 100%;
        max-width: 100%;
        min-height: 480px;
    }

    .photo-service-card img {
        width: 100%;
        height: 480px;
        min-height: 0;
        object-fit: cover;
    }

    .photo-service-overlay {
        padding: 28px 24px;
    }

    .photo-service-wedding img {
        object-position: center 38%;
    }

    .photo-service-portrait img {
        object-position: center 22%;
    }

    .photo-service-event img {
        object-position: center 42%;
    }

    .photo-service-commercial img {
        object-position: center 44%;
    }

    .photo-page-statement-inner {
        padding: 10px 0;
    }

    .photo-page-statement .button-row {
        flex-direction: column;
        align-items: stretch;
    }

    .photo-page-statement .button {
        width: 100%;
        text-align: center;
    }
}


/* SMALL PHONES */
@media (max-width: 500px) {
    .photo-page-hero-image img {
        height: 460px;
    }

    .photo-service-card,
    .photo-service-card img {
        height: 430px;
        min-height: 430px;
    }

    .photo-service-overlay {
        padding: 24px 20px;
    }
}

/* =========================================================
   TITAN SHOT IT V2 — VIDEOGRAPHY PAGE
   DESKTOP + TABLET + MOBILE
   ========================================================= */

.video-page-hero {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 700px;
    background: #090a0c;
    overflow: hidden;
}

.video-page-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(70px, 8vw, 130px);
}

.video-page-copy h1 {
    margin: 18px 0 28px;
}

.video-page-copy h1 em,
.video-feature-copy h2 em,
.video-page-cta h2 em {
    color: #c8a96b;
}

.video-page-lead {
    max-width: 600px;
    color: rgba(255,255,255,.76);
    line-height: 1.75;
    margin-bottom: 30px;
}

.video-page-showreel {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #050607;
}

.video-page-showreel video {
    width: 100%;
    height: 100%;
    min-height: 700px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.video-page-showreel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(9,10,12,.30) 0%,
            rgba(0,0,0,.03) 28%,
            rgba(0,0,0,.14) 100%
        );
}

.video-page-badge {
    position: absolute;
    z-index: 2;
    left: 28px;
    bottom: 28px;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid rgba(200,169,107,.65);
    background: rgba(9,10,12,.72);
    backdrop-filter: blur(8px);
}

.video-page-badge span {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 600;
}

.video-page-badge small {
    color: #c8a96b;
}


/* SERVICES */
.video-services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding-top: 0;
    padding-bottom: 0;
    background: rgba(255,255,255,.10);
}

.video-service-card {
    min-height: 360px;
    padding: 46px 36px;
    background: #0d0e10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.video-service-card h2 {
    margin: 10px 0 16px;
}

.video-service-card p:not(.eyebrow) {
    color: rgba(255,255,255,.66);
    line-height: 1.7;
}


/* FEATURE */
.video-feature {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    padding: 0;
    background: #f3f0e9;
}

.video-feature-image {
    min-height: 660px;
    overflow: hidden;
}

.video-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 660px;
    display: block;
    object-fit: cover;
    object-position: center 42%;
}

.video-feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(60px, 7vw, 110px);
}

.video-feature-copy h2 {
    margin: 16px 0 24px;
}

.video-feature-copy p {
    max-width: 560px;
    line-height: 1.8;
    margin-bottom: 24px;
}


/* CTA */
.video-page-cta {
    text-align: center;
}

.video-page-cta > div {
    max-width: 780px;
    margin: 0 auto;
}

.video-page-cta h2 {
    margin: 18px 0 22px;
}

.video-page-cta p {
    max-width: 620px;
    margin: 0 auto 28px;
    color: rgba(255,255,255,.70);
}


/* TABLET */
@media (max-width: 980px) {
    .video-page-hero {
        grid-template-columns: 1fr 1fr;
        min-height: 620px;
    }

    .video-page-copy {
        padding: 60px 44px;
    }

    .video-page-showreel video {
        min-height: 620px;
    }

    .video-services {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-feature-image,
    .video-feature-image img {
        min-height: 580px;
    }
}


/* MOBILE */
@media (max-width: 780px) {
    .video-page-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .video-page-copy {
        padding: 58px 24px 46px;
    }

    .video-page-showreel {
        width: 100%;
        max-width: 100%;
    }

    .video-page-showreel video {
        width: 100%;
        height: 520px;
        min-height: 0;
        object-fit: cover;
        object-position: center;
    }

    .video-page-badge {
        left: 18px;
        bottom: 18px;
    }

    .video-services {
        grid-template-columns: 1fr;
    }

    .video-service-card {
        min-height: 280px;
        padding: 34px 24px;
    }

    .video-feature {
        grid-template-columns: 1fr;
    }

    .video-feature-image {
        min-height: 0;
    }

    .video-feature-image img {
        height: 500px;
        min-height: 0;
        object-position: center 40%;
    }

    .video-feature-copy {
        padding: 52px 24px 62px;
    }
}


/* SMALL PHONES */
@media (max-width: 500px) {
    .video-page-showreel video {
        height: 460px;
    }

    .video-feature-image img {
        height: 440px;
    }
}

/* =========================================================
   TITAN SHOT IT V2 — PORTFOLIO PAGE
   EDITORIAL GRID · DESKTOP + TABLET + MOBILE
   ========================================================= */

/* HERO */
.portfolio-hero {
    background: #090a0c;
    color: #fff;
    padding: clamp(90px, 10vw, 150px) clamp(24px, 7vw, 110px);
}

.portfolio-hero-inner {
    max-width: 980px;
}

.portfolio-hero h1 {
    margin: 18px 0 28px;
}

.portfolio-hero h1 em {
    color: #c8a96b;
}

.portfolio-hero-copy {
    max-width: 720px;
    color: rgba(255,255,255,.72);
    line-height: 1.8;
    font-size: 1.05rem;
}


/* SHOWCASE WRAPPER */
.portfolio-showcase {
    background: #f3f0e9;
    padding: clamp(70px, 8vw, 120px) clamp(24px, 7vw, 110px);
}

.portfolio-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 42px;
}

.portfolio-intro .eyebrow {
    color: #a9782f;
    font-weight: 700;
    letter-spacing: 0.24em;
}

.portfolio-intro h2 {
    margin-top: 14px;
}

.portfolio-intro h2 em {
    color: #c8a96b;
}

.portfolio-intro > p {
    max-width: 620px;
    line-height: 1.75;
    color: #454545;
}


/* FILTERS */
.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.portfolio-filters .filter {
    border: 1px solid rgba(0,0,0,.16);
    background: transparent;
    color: #202020;
    padding: 11px 15px;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.portfolio-filters .filter.active,
.portfolio-filters .filter:hover {
    background: #111;
    color: #fff;
}


/* EDITORIAL GRID */
.portfolio-editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 310px;
    gap: 18px;
}

.portfolio-project {
    position: relative;
    border: 0;
    padding: 0;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    background-color: #111;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    min-width: 0;
}

.portfolio-project::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03) 30%,
            rgba(0,0,0,.18) 58%,
            rgba(0,0,0,.82) 100%
        );
    z-index: 1;
    transition: background .35s ease;
}

.portfolio-project:hover::before {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 25%,
            rgba(0,0,0,.15) 55%,
            rgba(0,0,0,.74) 100%
        );
}

.portfolio-project:hover::after {
    transform: scale(1.035);
}

.portfolio-project > * {
    position: relative;
    z-index: 2;
}

.portfolio-project-tall {
    grid-row: span 1;
}

.portfolio-project-wide {
    grid-column: span 1;
}

/* PROJECT META */
.portfolio-project-number {
    position: absolute;
    top: 22px;
    left: 22px;
    font-size: .68rem;
    letter-spacing: .14em;
    color: #c8a96b;
}

.portfolio-project-content {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.portfolio-project-content small {
    color: rgba(255,255,255,.72);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.portfolio-project-content strong {
    font-size: clamp(1.5rem, 2vw, 2.3rem);
    line-height: 1.04;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    margin-bottom: 12px;
}

.portfolio-project-content > span {
    color: #c8a96b;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portfolio-film-label {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 7px 10px;
    border: 1px solid rgba(200,169,107,.70);
    color: #c8a96b;
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(9,10,12,.48);
}


/* PORTFOLIO STATEMENT */
.portfolio-statement {
    background: #111317;
    color: #fff;
    text-align: center;
    padding: clamp(80px, 9vw, 130px) 24px;
}

.portfolio-statement h2 {
    margin: 18px 0 24px;
}

.portfolio-statement h2 em {
    color: #c8a96b;
}

.portfolio-statement > p:not(.eyebrow) {
    max-width: 680px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,.70);
    line-height: 1.75;
}

.portfolio-statement .button-row {
    justify-content: center;
}


/* FILTERED ITEMS */
.portfolio-project[hidden] {
    display: none !important;
}


/* TABLET */
@media (max-width: 980px) {
    .portfolio-intro {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .portfolio-editorial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 300px;
    }

    .portfolio-project-wide {
        grid-column: span 2;
    }
}


/* MOBILE */
@media (max-width: 780px) {
    .portfolio-hero {
        padding: 72px 24px 68px;
    }

    .portfolio-showcase {
        padding: 58px 20px 70px;
    }

    .portfolio-filters {
        gap: 8px;
    }

    .portfolio-filters .filter {
        padding: 10px 12px;
        font-size: .66rem;
    }

    .portfolio-editorial-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 16px;
    }

    .portfolio-project,
    .portfolio-project-tall,
    .portfolio-project-wide {
        grid-column: auto;
        grid-row: auto;
        min-height: 440px;
        width: 100%;
        max-width: 100%;
    }

    .portfolio-project-number {
        top: 18px;
        left: 18px;
    }

    .portfolio-project-content {
        left: 20px;
        right: 20px;
        bottom: 22px;
    }

    .portfolio-film-label {
        top: 16px;
        right: 16px;
    }

    .portfolio-statement .button-row {
        flex-direction: column;
        align-items: stretch;
    }

    .portfolio-statement .button {
        width: 100%;
        text-align: center;
    }
}


/* SMALL PHONES */
@media (max-width: 500px) {
    .portfolio-project,
    .portfolio-project-tall,
    .portfolio-project-wide {
        min-height: 390px;
    }

    .portfolio-project-content strong {
        font-size: 1.65rem;
    }
}

/* =========================================================
   TITAN SHOT IT V2 — STORIES / JOURNAL
   EDITORIAL DESKTOP + TABLET + MOBILE
   ========================================================= */


/* ---------- JOURNAL HERO ---------- */

.stories-hero {
    background: #090a0c;
    color: #fff;
    padding: clamp(90px, 10vw, 150px) clamp(24px, 7vw, 110px);
}

.stories-hero-inner {
    max-width: 980px;
}

.stories-hero h1 {
    margin: 18px 0 28px;
}

.stories-hero h1 em {
    color: #c8a96b;
}

.stories-hero-copy {
    max-width: 760px;
    color: rgba(255,255,255,.72);
    line-height: 1.8;
    font-size: 1.05rem;
}


/* ---------- FEATURED STORY ---------- */

.stories-feature {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    min-height: 620px;
    background: #f3f0e9;
    overflow: hidden;
}

.stories-feature-image {
    min-width: 0;
    height: 620px;
    overflow: hidden;
}

.stories-feature-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    transition: transform .75s ease;
}

.stories-feature:hover .stories-feature-image img {
    transform: scale(1.025);
}

.stories-feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(55px, 7vw, 105px);
}

.stories-feature-copy h2 {
    margin: 16px 0 24px;
}

.stories-feature-copy h2 em {
    color: #c8a96b;
}

.stories-feature-copy > p:not(.eyebrow) {
    max-width: 560px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 24px;
}


/* ---------- EDITORIAL STORIES ---------- */

.stories-editorial {
    background: #f3f0e9;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}


/* Individual article */
.stories-card {
    background: #fff;
    overflow: hidden;
}

.stories-card-large {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: stretch;
}


/* Image containers — THIS stops the giant photographs */

.stories-card-image {
    height: 420px;
    overflow: hidden;
    background: #111;
}

.stories-card-large .stories-card-image {
    height: 560px;
}

.stories-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform .75s ease;
}

.stories-card:hover .stories-card-image img {
    transform: scale(1.03);
}


/* Story text */

.stories-card-copy {
    padding: 38px 36px 44px;
}

.stories-card-large .stories-card-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 6vw, 90px);
}

.stories-card-copy h2 {
    margin: 12px 0 18px;
}

.stories-card-copy > p:not(.eyebrow) {
    line-height: 1.75;
    color: #454545;
    margin-bottom: 22px;
}


/* Individual photo crop tuning */

.stories-card-large .stories-card-image img {
    object-position: center 38%;
}

.stories-card:nth-child(2) .stories-card-image img {
    object-position: center 44%;
}

.stories-card:nth-child(3) .stories-card-image img {
    object-position: center 25%;
}


/* ---------- JOURNAL CTA ---------- */

.stories-cta {
    text-align: center;
    background: #111317;
    color: #fff;
}

.stories-cta > div {
    max-width: 800px;
    margin: 0 auto;
}

.stories-cta h2 {
    margin: 18px 0 24px;
}

.stories-cta h2 em {
    color: #c8a96b;
}

.stories-cta > div > p:not(.eyebrow) {
    max-width: 660px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,.70);
    line-height: 1.8;
}

.stories-cta .button-row {
    justify-content: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .stories-feature {
        grid-template-columns: 1fr 1fr;
        min-height: 560px;
    }

    .stories-feature-image {
        height: 560px;
    }

    .stories-feature-copy {
        padding: 55px 42px;
    }

    .stories-card-large {
        grid-template-columns: 1fr 1fr;
    }

    .stories-card-large .stories-card-image {
        height: 520px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 780px) {

    .stories-hero {
        padding: 72px 24px 68px;
    }


    /* Featured story becomes one column */

    .stories-feature {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .stories-feature-image {
        width: 100%;
        height: 430px;
    }

    .stories-feature-image img {
        width: 100%;
        height: 430px;
        object-position: center 35%;
    }

    .stories-feature-copy {
        padding: 46px 24px 56px;
    }


    /* Story cards */

    .stories-editorial {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .stories-card,
    .stories-card-large {
        display: block;
        grid-column: auto;
        width: 100%;
        max-width: 100%;
    }

    .stories-card-image,
    .stories-card-large .stories-card-image {
        height: 400px;
    }

    .stories-card-image img,
    .stories-card-large .stories-card-image img {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }

    .stories-card-large .stories-card-image img {
        object-position: center 36%;
    }

    .stories-card:nth-child(2) .stories-card-image img {
        object-position: center 42%;
    }

    .stories-card:nth-child(3) .stories-card-image img {
        object-position: center 23%;
    }

    .stories-card-copy,
    .stories-card-large .stories-card-copy {
        padding: 30px 24px 38px;
    }


    /* CTA buttons */

    .stories-cta .button-row {
        flex-direction: column;
        align-items: stretch;
    }

    .stories-cta .button {
        width: 100%;
        text-align: center;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 500px) {

    .stories-feature-image,
    .stories-feature-image img {
        height: 380px;
    }

    .stories-card-image,
    .stories-card-large .stories-card-image,
    .stories-card-image img,
    .stories-card-large .stories-card-image img {
        height: 350px;
    }
}

/* =========================================================
   TITAN SHOT IT V2 — CONTACT PAGE
   PREMIUM DESKTOP + TABLET + MOBILE
   ========================================================= */


/* ---------- CONTACT HERO ---------- */

.contact-hero {
    background: #090a0c;
    color: #fff;
    padding: clamp(90px, 10vw, 150px) clamp(24px, 7vw, 110px);
}

.contact-hero-inner {
    max-width: 980px;
}

.contact-hero h1 {
    margin: 18px 0 28px;
}

.contact-hero h1 em {
    color: #c8a96b;
}

.contact-hero-copy {
    max-width: 700px;
    color: rgba(255,255,255,.72);
    line-height: 1.8;
    font-size: 1.05rem;
}


/* ---------- MAIN CONTACT LAYOUT ---------- */

.contact-v2 {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    background: #f3f0e9;
    align-items: stretch;
}


/* ---------- LEFT / INFO ---------- */

.contact-v2-info {
    background: #111317;
    color: #fff;
    padding: clamp(60px, 7vw, 110px);
}

.contact-v2-info h2 {
    margin: 16px 0 24px;
}

.contact-v2-info h2 em {
    color: #c8a96b;
}

.contact-intro {
    max-width: 560px;
    color: rgba(255,255,255,.70);
    line-height: 1.8;
    margin-bottom: 36px;
}


/* Contact methods */

.contact-methods {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(200,169,107,.22);
    margin-bottom: 56px;
}

.contact-method {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(200,169,107,.22);
    text-decoration: none;
    color: #fff;
    transition: padding-left .3s ease;
}

.contact-method:hover {
    padding-left: 8px;
}

.contact-method span {
    color: #c8a96b;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.contact-method strong {
    font-size: 1rem;
    font-weight: 500;
    word-break: break-word;
}


/* What happens next */

.contact-next {
    margin-top: 20px;
}

.contact-next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 22px;
}

.contact-next-grid > div {
    border-top: 1px solid rgba(255,255,255,.16);
    padding-top: 18px;
}

.contact-next-grid span {
    display: block;
    color: #c8a96b;
    font-size: .68rem;
    letter-spacing: .12em;
    margin-bottom: 10px;
}

.contact-next-grid strong {
    display: block;
    margin-bottom: 8px;
    font-size: .95rem;
}

.contact-next-grid p {
    margin: 0;
    color: rgba(255,255,255,.58);
    line-height: 1.6;
    font-size: .86rem;
}


/* ---------- RIGHT / FORM ---------- */

.contact-v2-form-wrap {
    padding: clamp(60px, 7vw, 110px);
    background: #f3f0e9;
}

.contact-v2-form-wrap h2 {
    margin: 16px 0 18px;
}

.contact-v2-form-wrap h2 em {
    color: #c8a96b;
}

.required-note {
    margin-bottom: 34px;
    color: #626262;
    font-size: .82rem;
}

.required-note span,
.required-star {
    color: #b38742;
}


/* ---------- FORM ---------- */

.contact-form-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 22px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-field label {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #222;
}

.optional-label {
    color: #777;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: .72rem;
}


/* Inputs */

.contact-form-v2 input,
.contact-form-v2 select,
.contact-form-v2 textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,.18);
    background: rgba(255,255,255,.55);
    color: #111;
    padding: 15px 16px;
    font: inherit;
    border-radius: 0;
    outline: none;
    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.contact-form-v2 input,
.contact-form-v2 select {
    min-height: 52px;
}

.contact-form-v2 textarea {
    resize: vertical;
    min-height: 180px;
    line-height: 1.6;
}


/* Focus */

.contact-form-v2 input:focus,
.contact-form-v2 select:focus,
.contact-form-v2 textarea:focus {
    border-color: #c8a96b;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(200,169,107,.12);
}


/* Email / required validation */

.contact-form-v2 input:invalid:not(:placeholder-shown),
.contact-form-v2 textarea:invalid:not(:placeholder-shown),
.contact-form-v2 select:invalid {
    border-color: #a64b4b;
}

.contact-form-v2 input:valid:not(:placeholder-shown),
.contact-form-v2 textarea:valid:not(:placeholder-shown),
.contact-form-v2 select:valid {
    border-color: rgba(66,110,72,.55);
}

.field-help {
    color: #777;
    font-size: .72rem;
    line-height: 1.5;
}


/* Select styling */

.contact-form-v2 select {
    cursor: pointer;
}


/* Submit */

.contact-submit {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 6px;
    min-width: 190px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .contact-v2 {
        grid-template-columns: 1fr;
    }

    .contact-v2-info,
    .contact-v2-form-wrap {
        padding: 60px 42px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 780px) {

    .contact-hero {
        padding: 72px 24px 68px;
    }

    .contact-v2-info,
    .contact-v2-form-wrap {
        padding: 52px 24px 62px;
    }

    .contact-next-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-form-v2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .form-field-full,
    .contact-submit {
        grid-column: auto;
    }

    .contact-submit {
        width: 100%;
        justify-self: stretch;
        text-align: center;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 500px) {

    .contact-method strong {
        font-size: .92rem;
    }

    .contact-form-v2 textarea {
        min-height: 160px;
    }
}

/* =========================================================
   TITAN CONTACT — POLISHED FORM VALIDATION
   ========================================================= */

/* Keep required fields elegant before interaction */
.contact-form input:required,
.contact-form select:required,
.contact-form textarea:required {
    box-shadow: none;
}

/* Prevent browser invalid styling before submission */
.contact-form select:required:invalid {
    border-color: rgba(20, 20, 20, 0.18);
    box-shadow: none;
}

/* Premium gold focus */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #c8a96b;
    box-shadow: 0 0 0 1px rgba(200, 169, 107, 0.18);
}

/* Remove Safari/browser red invalid glow */
.contact-form input:invalid,
.contact-form select:invalid,
.contact-form textarea:invalid {
    box-shadow: none;
}

/* =========================================================
   TITAN SHOT IT V2 — LEGAL PAGES
   PRIVACY / COOKIES / TERMS
   ========================================================= */


/* ---------- LEGAL HERO ---------- */

.legal-hero {
    background: #090a0c;
    color: #fff;
    padding: clamp(90px, 10vw, 150px) clamp(24px, 7vw, 110px);
}

.legal-hero-inner {
    max-width: 920px;
}

.legal-hero h1 {
    margin: 18px 0 26px;
}

.legal-hero h1 em {
    color: #c8a96b;
}

.legal-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.72);
    line-height: 1.8;
    font-size: 1.04rem;
}


/* ---------- PAGE SHELL ---------- */

.legal-page {
    background: #f3f0e9;
    padding: clamp(60px, 7vw, 110px);
}

.legal-intro {
    max-width: 900px;
    margin-bottom: 72px;
}

.legal-intro h2 {
    margin: 16px 0 24px;
}

.legal-intro h2 em {
    color: #c8a96b;
}

.legal-intro > p {
    max-width: 760px;
    line-height: 1.8;
    color: #444;
}

.legal-updated {
    margin-top: 22px;
    font-size: .82rem;
    color: #777;
}


/* ---------- LEGAL CONTENT ---------- */

.legal-content {
    max-width: 1040px;
}

.legal-section {
    position: relative;
    padding: 34px 0 40px;
    border-top: 1px solid rgba(0,0,0,.12);
}

.legal-number {
    display: block;
    margin-bottom: 12px;
    color: #c8a96b;
    font-size: .72rem;
    letter-spacing: .14em;
    font-weight: 600;
}

.legal-section h2 {
    margin: 0 0 18px;
}

.legal-section p {
    max-width: 860px;
    color: #3f3f3f;
    line-height: 1.8;
    margin-bottom: 16px;
}

.legal-section ul {
    max-width: 860px;
    padding-left: 22px;
    margin: 10px 0 18px;
}

.legal-section li {
    margin-bottom: 10px;
    line-height: 1.7;
    color: #3f3f3f;
}

.legal-section a {
    color: #9f7a3f;
    text-decoration: none;
    border-bottom: 1px solid rgba(159,122,63,.35);
}

.legal-section a:hover {
    border-bottom-color: #9f7a3f;
}


/* ---------- FINAL LEGAL CTA ---------- */

.legal-contact {
    margin-top: 54px;
    padding: clamp(48px, 6vw, 80px);
    background: #111317;
    color: #fff;
}

.legal-contact h2 {
    margin: 16px 0 22px;
}

.legal-contact h2 em {
    color: #c8a96b;
}

.legal-contact p {
    max-width: 680px;
    color: rgba(255,255,255,.68);
    line-height: 1.8;
    margin-bottom: 28px;
}


/* ---------- GENERIC LEGAL PLACEHOLDER HERO ---------- */

.page-hero {
    background: #090a0c;
    color: #fff;
    padding: clamp(90px, 10vw, 150px) clamp(24px, 7vw, 110px);
}

.page-hero h1 {
    margin: 18px 0 24px;
}

.page-hero h1 em {
    color: #c8a96b;
}

.page-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.72);
    line-height: 1.8;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .legal-page {
        padding: 60px 42px;
    }

    .legal-intro {
        margin-bottom: 54px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 780px) {

    .legal-hero,
    .page-hero {
        padding: 72px 24px 68px;
    }

    .legal-page {
        padding: 52px 24px 64px;
    }

    .legal-intro {
        margin-bottom: 46px;
    }

    .legal-section {
        padding: 28px 0 32px;
    }

    .legal-contact {
        margin-top: 40px;
        padding: 42px 24px 48px;
    }

    .legal-section ul {
        padding-left: 18px;
    }
}
/* ==================================================
   TITAN SHOT IT - ADMIN-CONTROLLED SERVICE CARD IMAGES
   Existing gradients remain as fallback when no image
   has been assigned through Admin Studio.
================================================== */

.service-card[style*="--service-image"] {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.24) 45%,
            rgba(0, 0, 0, 0.82) 100%
        ),
       var(--service-image) var(--service-position, center) / cover no-repeat !important;
}

/* =========================================================
   TITAN SHOT IT — CONSOLIDATED ADMIN MEDIA POSITIONING
   The admin X/Y value is authoritative on connected media.
   ========================================================= */
.hero,
.hero::before {
    background-position: var(--hero-position, 50% 50%) !important;
}

.creator-visual img,
.v2-photo-portrait img,
.photo-page-hero-image img,
.photo-service-card img,
.video-page-showreel video,
.video-feature-image img,
.stories-feature-image img,
.stories-card-image img {
    object-fit: cover;
}
/* =========================================================
   TITAN SHOT IT — ADMIN MEDIA POSITION CONTROL
   Portfolio final crop override
   Admin X/Y values are the single source of truth.
   ========================================================= */

.portfolio-card {
    background-position: var(--portfolio-position, 50% 50%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Neutralise legacy individual portfolio crop positions.
   The actual position now comes from Admin via
   --portfolio-position.
*/
.portfolio-card.portfolio-one,
.portfolio-card.portfolio-two,
.portfolio-card.portfolio-three,
.portfolio-card.portfolio-four,
.portfolio-card.portfolio-five,
.portfolio-card.portfolio-six,
.portfolio-card.portfolio-seven,
.portfolio-card.portfolio-eight {
    background-position: var(--portfolio-position, 50% 50%) !important;
}

/* =========================================================
   TITAN SHOT IT — HOMEPAGE HERO 2.0
   Editorial / Cinematic / Premium
   ========================================================= */

.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            90deg,
            rgba(10, 10, 10, 0.58) 0%,
            rgba(10, 10, 10, 0.34) 45%,
            rgba(10, 10, 10, 0.10) 75%,
            rgba(10, 10, 10, 0.05) 100%
        ),
        var(--hero-image) center / cover no-repeat;
    background-position: var(--hero-position, center);
}

/* Gentle cinematic shading without burying the photograph */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgba(5, 5, 5, 0.08) 0%,
            rgba(5, 5, 5, 0.02) 38%,
            rgba(5, 5, 5, 0.48) 100%
        );
    pointer-events: none;
}

.hero-editorial {
    position: relative;
    z-index: 2;
    width: min(1400px, calc(100% - 8vw));
    margin: 0 auto;
    padding: 170px 0 105px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: end;
}

.hero-editorial-inner {
    max-width: 900px;
}

.hero-kicker {
    margin: 0 0 22px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: clamp(0.68rem, 0.8vw, 0.82rem);
    color: rgba(255, 255, 255, 0.82);
}

.hero-title {
    margin: 0;
    max-width: 900px;
    color: #ffffff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(4rem, 8.5vw, 8.4rem);
    line-height: 0.86;
    letter-spacing: -0.055em;
    font-weight: 500;
    text-wrap: balance;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.20);
}

.hero-title span {
    display: block;
    color: #f4f1eb;
    font-style: italic;
    font-weight: 500;
}

.hero-lead {
    max-width: 680px;
    margin: 32px 0 0;
    color: rgba(255, 255, 255, 0.90);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.75;
}

.hero-actions {
    margin-top: 36px;
    justify-content: flex-start;
}

.hero-signature {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 8px;
    color: rgba(255, 255, 255, 0.76);
}

.hero-signature > span {
    color: #c8a96b;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.hero-signature p {
    margin: 0;
    padding-left: 18px;
    border-left: 1px solid rgba(200, 169, 107, 0.55);
    font-size: 0.72rem;
    line-height: 1.8;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.hero-scroll {
    position: absolute;
    z-index: 3;
    right: 4vw;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-scroll span {
    color: #c8a96b;
    font-size: 1rem;
}

/* Tablet */
@media (max-width: 1000px) {
    .hero {
        min-height: 88vh;
    }

    .hero-editorial {
        width: min(100% - 48px, 900px);
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 150px 0 90px;
    }

    .hero-title {
        font-size: clamp(3.8rem, 10vw, 6.8rem);
    }

    .hero-signature {
        display: none;
    }

    .hero-scroll {
        right: 24px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .hero {
        min-height: 82svh;
        align-items: flex-end;
        background:
            linear-gradient(
                180deg,
                rgba(10, 10, 10, 0.05) 0%,
                rgba(10, 10, 10, 0.18) 48%,
                rgba(10, 10, 10, 0.62) 100%
            ),
            var(--hero-image) center / cover no-repeat;
        background-position: var(--hero-position, center);
    }

    .hero-editorial {
        width: calc(100% - 36px);
        padding: 125px 0 76px;
    }

    .hero-kicker {
        margin-bottom: 16px;
        font-size: 0.62rem;
        line-height: 1.6;
    }

    .hero-title {
        font-size: clamp(3.25rem, 16vw, 5rem);
        line-height: 0.9;
    }

    .hero-lead {
        margin-top: 24px;
        font-size: 0.96rem;
        line-height: 1.65;
    }

    .hero-actions {
        margin-top: 28px;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-scroll {
        display: none;
    }
}

/* =========================================================
   TITAN SHOT IT — HERO 2.1 BRIGHTNESS REFINEMENT
   Keep cinematic contrast without obscuring the photography
   ========================================================= */

.hero {
    background:
        linear-gradient(
            90deg,
            rgba(7, 7, 7, 0.42) 0%,
            rgba(7, 7, 7, 0.28) 32%,
            rgba(7, 7, 7, 0.08) 58%,
            rgba(7, 7, 7, 0.00) 100%
        ),
        var(--hero-image) center / cover no-repeat;
    background-position: var(--hero-position, center);
}

.hero-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(5, 5, 5, 0.02) 0%,
            rgba(5, 5, 5, 0.00) 50%,
            rgba(5, 5, 5, 0.18) 100%
        );
}

/* Restore strong editorial readability */
.hero-title,
.hero-title span {
    color: #ffffff;
    opacity: 1;
}

.hero-kicker {
    color: #d6b66f;
    opacity: 1;
}

.hero-lead {
    color: rgba(255, 255, 255, 0.94);
    opacity: 1;
}

.hero-signature,
.hero-signature p {
    color: rgba(255, 255, 255, 0.88);
    opacity: 1;
}

/* Make the secondary CTA properly visible */
.hero-actions .button.outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.60);
}

.hero-actions .button.outline:hover {
    background: #ffffff;
    color: #0a0a0a;
    border-color: #ffffff;
}

@media (max-width: 640px) {
    .hero {
        background:
            linear-gradient(
                180deg,
                rgba(5, 5, 5, 0.02) 0%,
                rgba(5, 5, 5, 0.08) 42%,
                rgba(5, 5, 5, 0.42) 100%
            ),
            var(--hero-image) center / cover no-repeat;
        background-position: var(--hero-position, center);
    }
}

/* =========================================================
   TITAN SHOT IT — HERO 2.2
   LUMINOUS PHOTOGRAPHY / MINIMAL OVERLAY
   ========================================================= */

.hero {
    background:
        linear-gradient(
            90deg,
            rgba(8, 8, 8, 0.34) 0%,
            rgba(8, 8, 8, 0.22) 24%,
            rgba(8, 8, 8, 0.08) 43%,
            rgba(8, 8, 8, 0.00) 62%
        ),
        var(--hero-image) center / cover no-repeat;

    background-position: var(--hero-position, center);
}

/* Remove the additional full-image dark veil */
.hero-overlay {
    background: transparent !important;
}

/* Strong, clean typography over the photograph */
.hero-title,
.hero-title span {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.20),
        0 8px 35px rgba(0, 0, 0, 0.16);
}

.hero-kicker {
    color: #d3b36b !important;
    opacity: 1 !important;
}

.hero-lead {
    color: rgba(255,255,255,0.96) !important;
    opacity: 1 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.22);
}

/* Slightly refine the giant headline */
.hero-title {
    font-size: clamp(3.8rem, 7.5vw, 7.4rem);
    line-height: 0.90;
}

/* Remove the decorative 01 / service signature block */
.hero-signature {
    display: none !important;
}

/* Keep CTA highly visible */
.hero-actions .button.gold {
    opacity: 1;
}

.hero-actions .button.outline {
    color: #ffffff;
    border-color: rgba(255,255,255,0.75);
    background: rgba(0,0,0,0.08);
    backdrop-filter: blur(2px);
}

/* Mobile still needs slightly more protection behind text */
@media (max-width: 640px) {
    .hero {
        background:
            linear-gradient(
                180deg,
                rgba(8,8,8,0.00) 0%,
                rgba(8,8,8,0.05) 38%,
                rgba(8,8,8,0.30) 100%
            ),
            var(--hero-image) center / cover no-repeat;

        background-position: var(--hero-position, center);
    }

    .hero-title {
        font-size: clamp(3.15rem, 15vw, 4.8rem);
    }
}
/* =========================================================
   TITAN SHOT IT — BRAND LOGO FINAL DISPLAY
   ========================================================= */

.site-header .brand img {
    width: 118px;
    height: 50px;
    object-fit: contain;
    object-position: left center;
    border-radius: 0;
    flex-shrink: 0;
}

.site-header .brand span {
    display: none;
}

.footer .footer-brand img {
    width: 150px;
    height: 64px;
    object-fit: contain;
    object-position: left center;
    border-radius: 0;
}

.footer .footer-brand span {
    display: none;
}

@media (max-width: 780px) {

    .site-header .brand img {
        width: 105px;
        height: 44px;
    }

    .footer .footer-brand img {
        width: 135px;
        height: 58px;
    }
}
/* =========================================================
   TITAN SHOT IT — MOBILE HEADER BRAND REFINEMENT
   Desktop + footer intentionally untouched
   ========================================================= */

@media (max-width: 768px) {

    /* Hide duplicated TITAN SHOT IT text beside the logo */
    .site-header .brand > span {
        display: none !important;
    }

    /* Give the actual transparent logo more presence */
    .site-header .brand img {
        width: 150px !important;
        height: auto !important;
        max-height: 58px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    /* Keep logo and hamburger comfortably balanced */
    .site-header .brand {
        display: flex !important;
        align-items: center !important;
        flex: 0 1 auto !important;
    }

    .site-header {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}
/* =========================================================
   TITAN — FORCE HIDE DUPLICATE MOBILE HEADER WORDMARK
   Footer + desktop untouched
   ========================================================= */

@media screen and (max-width: 900px) {

    header.site-header a.brand span,
    .site-header > .brand span,
    .site-header .brand span {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }
}
/* =========================================================
   TITAN — DESKTOP HEADER WORDMARK
   Mobile uses logo only
   ========================================================= */

@media (min-width: 901px) {

    .site-header .brand::after {
        content: "TITAN SHOT IT";
        display: inline-block;

        margin-left: 12px;

        color: #ffffff;
        font-family: 'DM Sans', Arial, sans-serif;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 2px;
        white-space: nowrap;
    }
}

/* =========================================================
   TSI FOOTER — TAGLINE DESKTOP POLISH
   ========================================================= */

.footer-tagline {
    font-size: 15px;
    line-height: 1.65;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .footer-tagline {
        white-space: normal;
    }
}

/* Homepage hero — mobile-only focal position */
@media (max-width: 640px) {
    .home-split-media {
background-position: 75% 50% !important;    }
}
/* ==========================================================
   TITAN SHOT IT — STORY ARTICLE EXPERIENCE
   ========================================================== */

.story-image-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.story-image-link img {
    transition: transform .45s ease;
}

.story-image-link:hover img {
    transform: scale(1.015);
}

/* Individual story page */
.story-article {
    width: min(1180px, 88%);
    margin: 0 auto;
    padding: 80px 0 110px;
}

.story-article-image {
    width: 100%;
    height: min(70vh, 720px);
    overflow: hidden;
    background: #111;
}

.story-article-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.story-article-copy {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 70px 0 0;
}

.story-article-copy p {
    margin: 0 0 28px;
    font-size: 1.08rem;
    line-height: 1.95;
    color: #3b3b3b;
}

.story-article-copy .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 48px;
}

/* Important: visible light button on ivory background */
.story-article-copy .button.outline {
    border: 1px solid #111;
    color: #111;
    background: transparent;
}

.story-article-copy .button.outline:hover {
    background: #111;
    color: #fff;
}

.story-article-copy .button.gold {
    background: #c8a96b;
    border-color: #c8a96b;
    color: #111;
}

/* Make the story title/intro area feel editorial */
body:has(.story-article) .stories-hero {
    padding-bottom: 60px;
}

body:has(.story-article) .stories-hero h1 {
    max-width: 900px;
}

body:has(.story-article) .stories-hero-copy {
    max-width: 760px;
    line-height: 1.8;
}

/* Mobile */
@media (max-width: 760px) {

    .story-article {
        width: 90%;
        padding: 42px 0 75px;
    }

    .story-article-image {
        height: 55vh;
        min-height: 360px;
    }

    .story-article-copy {
        padding-top: 42px;
    }

    .story-article-copy p {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 22px;
    }

    .story-article-copy .button-row {
        flex-direction: column;
        align-items: stretch;
    }

    .story-article-copy .button {
        width: 100%;
        justify-content: center;
    }
}
/* ===== TITAN SHOT IT — STORY FINAL POLISH ===== */

/* Make story article text readable and elegant */
.story-article-copy {
    width: min(760px, 88%);
    margin: 0 auto;
    padding: 56px 0 70px;
}

.story-article-copy p {
    margin: 0 0 24px;
    font-size: 1.05rem;
    line-height: 1.9;
    color: #2f2f2f;
}

/* Buttons */
.story-article-copy .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.story-article-copy .button.outline {
    background: transparent;
    border: 1px solid #111;
    color: #111 !important;
}

.story-article-copy .button.outline:hover {
    background: #111;
    color: #fff !important;
}

.story-article-copy .button.gold {
    background: #c8a96b;
    border: 1px solid #c8a96b;
    color: #111;
}

/* Story archive prompts */
.stories-card-copy .text-link,
.stories-feature-copy .text-link {
    display: inline-block;
    margin-top: 18px;
    color: #c8a96b;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
}

/* Balance lower story cards */
.stories-editorial {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.stories-card {
    width: 100%;
}

/* Mobile */
@media (max-width: 760px) {
    .stories-editorial {
        grid-template-columns: 1fr;
    }

    .story-article-copy {
        width: 90%;
        padding: 38px 0 55px;
    }

    .story-article-copy .button-row {
        flex-direction: column;
    }

    .story-article-copy .button {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================================
   TITAN SHOT IT — STORY ARTICLE FINAL OVERRIDE
   ========================================================= */

main > section.story-article {
    width: min(1180px, 88%) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 70px 0 100px !important;
}

main > section.story-article .story-article-image {
    width: 100% !important;
    height: min(68vh, 700px);
    overflow: hidden;
}

main > section.story-article .story-article-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

main > section.story-article .story-article-copy {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 60px 0 0 !important;
}

main > section.story-article .story-article-copy p {
    margin: 0 0 26px !important;
    font-size: 1.05rem;
    line-height: 1.9;
    color: #333;
}

main > section.story-article .story-article-copy .button-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 42px;
}

main > section.story-article .story-article-copy .button.outline {
    background: #fff !important;
    border: 1px solid #111 !important;
    color: #111 !important;
}

main > section.story-article .story-article-copy .button.outline:hover {
    background: #111 !important;
    color: #fff !important;
}

main > section.story-article .story-article-copy .button.gold {
    background: #c8a96b !important;
    border-color: #c8a96b !important;
    color: #111 !important;
}

@media (max-width: 760px) {

    main > section.story-article {
        width: 90% !important;
        padding: 40px 0 70px !important;
    }

    main > section.story-article .story-article-image {
        height: 52vh;
        min-height: 340px;
    }

    main > section.story-article .story-article-copy {
        width: 100% !important;
        padding-top: 38px !important;
    }

    main > section.story-article .story-article-copy .button-row {
        flex-direction: column;
    }

    main > section.story-article .story-article-copy .button {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================================
   STORY ARTICLE — PRESERVE FULL ORIGINAL PHOTOGRAPH
   ========================================================= */

main > section.story-article .story-article-image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

main > section.story-article .story-article-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* =========================================================
   TITAN SHOT IT — PHOTOGRAPHY HERO TOP-EDGE POLISH
   Desktop only — preserves all existing layout/crops
   ========================================================= */

@media (min-width: 981px) {
    .photo-page-hero-image img {
        object-position: center 36%;
    }
}