/* ============================================================
   NOBOX FILMS — STYLESHEET
   ============================================================ */


/* ============================================================
   VARIABLES & RESET
   ============================================================ */

:root {
    --bg:              #F4F1EC;
    --text:            #1E1E1E;
    --text-secondary:  #635D56;
    --accent:          #B7A58A;
    --font-display:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body:       'Inter', sans-serif;
    --nav-h:           72px;
    --ease:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition:      0.45s var(--ease);
    --max-w:           1440px;
    --pad-x:           64px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }


/* ============================================================
   NAVIGATION
   ============================================================ */

#nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad-x);
    height: var(--nav-h);
    transition:
        background-color var(--transition),
        border-color var(--transition),
        backdrop-filter var(--transition);
    border-bottom: 1px solid transparent;
}

#nav.scrolled {
    background-color: rgba(244, 241, 236, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(183, 165, 138, 0.18);
}

/* Logo — two images stacked, toggled via opacity */
.nav-logo {
    display: block;
    height: 36px;
    position: relative;
}

.nav-logo img {
    height: 100%;
    width: auto;
    transition: opacity var(--transition);
}

.nav-logo .logo-black {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.nav-logo .logo-white {
    opacity: 1;
}

#nav.scrolled .logo-white { opacity: 0; }
#nav.scrolled .logo-black  { opacity: 1; }

/* Links */
.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition);
}

.nav-links a:hover           { color: #fff; }
#nav.scrolled .nav-links a   { color: var(--text-secondary); }
#nav.scrolled .nav-links a:hover { color: var(--text); }

/* Hamburger */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 1px;
    background: white;
    transition: background var(--transition), transform 0.3s var(--ease), opacity 0.3s;
}

#nav.scrolled .nav-hamburger span { background: var(--text); }

.nav-hamburger.open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: var(--nav-h);
    inset-inline: 0;
    z-index: 199;
    flex-direction: column;
    gap: 0;
    background-color: rgba(244, 241, 236, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(183, 165, 138, 0.2);
    padding: 8px 0;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
}

.mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.mobile-link {
    padding: 18px var(--pad-x);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    border-bottom: 1px solid rgba(183, 165, 138, 0.12);
    transition: padding-left var(--transition), color var(--transition);
}

.mobile-link:hover { padding-left: calc(var(--pad-x) + 8px); color: var(--accent); }


/* ============================================================
   HERO
   ============================================================ */

#hero {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 580px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Cinematic placeholder — replace with video later */
.hero-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 60% at 25% 55%, rgba(55, 42, 28, 0.9) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 75% 25%, rgba(35, 28, 18, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse 100% 80% at 50% 80%, rgba(20, 15, 8, 0.85) 0%, transparent 70%),
        linear-gradient(160deg, #1c1710 0%, #0e0b06 35%, #1a1409 60%, #0b0905 100%);
}

/* Film grain overlay */
.hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: grainShift 0.12s steps(1) infinite;
    pointer-events: none;
}

@keyframes grainShift {
    0%   { background-position: 0 0; }
    10%  { background-position: -50px -25px; }
    20%  { background-position: 25px -75px; }
    30%  { background-position: -75px 50px; }
    40%  { background-position: -25px 25px; }
    50%  { background-position: 50px -50px; }
    60%  { background-position: 75px 25px; }
    70%  { background-position: -25px 75px; }
    80%  { background-position: 50px 75px; }
    90%  { background-position: -75px -25px; }
    100% { background-position: 0 0; }
}

/* The 15s cut opens on a bright product shot, so the old 8%-at-top
   gradient left the white title low-contrast. Strengthened enough
   to hold legible text over light footage without flattening it. */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, rgba(0,0,0,0.42) 0%, transparent 78%),
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.26) 0%,
            rgba(0,0,0,0.30) 40%,
            rgba(0,0,0,0.60) 100%
        );
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 72px);
    font-weight: 700;
    letter-spacing: 0.25em;
    line-height: 1;
    color: #fff;
    text-indent: 0.25em;
}

/* Hidden from view but readable by Google for SEO */
.seo-subtitle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.hero-tagline {
    font-family: var(--font-body);
    font-size: clamp(10px, 1.3vw, 13px);
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* Scroll indicator */


@keyframes scrollPulse {
    0%   { opacity: 0.3; transform: scaleY(1); }
    50%  { opacity: 0.7; transform: scaleY(0.6); }
    100% { opacity: 0.3; transform: scaleY(1); }
}


/* ============================================================
   WORK SECTION
   ============================================================ */

#work {
    padding: 120px var(--pad-x);
    max-width: var(--max-w);
    margin: 0 auto;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 56px;
}

.section-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

.section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(183, 165, 138, 0.28);
}

/* On a phone the label and headline can't share a row: the label holds
   its width (white-space: nowrap), leaving the headline a ~180px column
   that breaks "From first brief to final delivery" into one word a line.
   Stack them instead.

   Scoped to the two headers that carry a headline — the work sections
   use .section-header for a label plus a trailing rule, and that pairing
   is fine on one line at any width. */
@media (max-width: 768px) {
    #process .section-header,
    #faq .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 40px;
    }

    /* The trailing rule earns its place beside the label on one line.
       Stacked it lands directly above the step list's own top border —
       two rules with a dead band between them. Drop it. */
    #process .section-header::after,
    #faq .section-header::after { display: none; }

    /* The 18px lifted the headline off the label's baseline side by side;
       stacked, the gap above handles the spacing. */
    .process-headline,
    .faq-headline { margin-top: 0; }
}

/* Grid — 12 column */
.work-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}

/* Editorial span assignments */
/* Fallback for any project beyond the hand-tuned mosaic below.
   Same specificity as the :nth-child rules, placed first, so those
   still win for items 1-17 while anything added later lays out by
   format instead of collapsing to a single narrow column. */
.work-item.landscape { grid-column: span 6; }
.work-item.portrait  { grid-column: span 3; }

.work-item:nth-child(1)  { grid-column: span 8; }  /* Technics — hero piece */
.work-item:nth-child(2)  { grid-column: span 4; }  /* KLCC */
.work-item:nth-child(3)  { grid-column: span 4; }  /* Straits View */
.work-item:nth-child(4)  { grid-column: span 8; }  /* Schneider */
.work-item:nth-child(5)  { grid-column: span 6; }  /* Embracing Malaysia */
.work-item:nth-child(6)  { grid-column: span 6; }  /* Be The Light */
.work-item:nth-child(7)  { grid-column: span 4; }  /* Panasonic Steamer */
.work-item:nth-child(8)  { grid-column: span 4; }  /* Moments 1 */
.work-item:nth-child(9)  { grid-column: span 4; }  /* Moments 2 */
.work-item:nth-child(10) { grid-column: span 4; }  /* Moments 3 */
.work-item:nth-child(11) { grid-column: span 4; }  /* Vanzo */
.work-item:nth-child(12) { grid-column: span 4; }  /* Sekolah Angkat */
.work-item:nth-child(13) { grid-column: span 6; }  /* MCKIP */
.work-item:nth-child(14) { grid-column: span 3; }  /* IH Hob Heat — portrait */
.work-item:nth-child(15) { grid-column: span 3; }  /* IH Hob Mess — portrait */
.work-item:nth-child(16) { grid-column: span 3; }  /* Travel Stress-Free — portrait */
.work-item:nth-child(17) { grid-column: span 3; }  /* KL TravelPass — portrait */

.work-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #111;
    display: block;
}

/* Aspect ratio containers */
.work-item.landscape .thumb-wrap { aspect-ratio: 16 / 9; }
.work-item.portrait  .thumb-wrap { aspect-ratio: 9 / 16; }

.thumb-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.thumb-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
    filter: brightness(0.92);
}

.work-item:hover .thumb-wrap img {
    transform: scale(1.04);
    filter: brightness(0.75);
}

/* Info overlay */
.work-info {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 20px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.72) 0%,
        rgba(0,0,0,0.28) 30%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity var(--transition);
}

.work-item:hover .work-info { opacity: 1; }

.work-info-title {
    font-family: var(--font-display);
    font-size: clamp(15px, 1.4vw, 21px);
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 5px;
}

.work-info-client {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}


/* ============================================================
   CLIENTS
   ============================================================ */

#clients {
    padding: 120px var(--pad-x);
    border-top:    1px solid rgba(183, 165, 138, 0.22);
    border-bottom: 1px solid rgba(183, 165, 138, 0.22);
}

.clients-inner {
    max-width: var(--max-w);
    margin: 0 auto;
}

.clients-headline {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 80px;
    max-width: 580px;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 52px 48px;
    align-items: center;
}

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The source PNGs were square with the artwork floating inside a
   large transparent margin, so a 64px cap rendered some wordmarks
   only ~11px tall. They are now tightly cropped, which means each
   logo can fill its cell and the cell height sets the real size. */
/* Cell height lives in one variable that both the box and the image
   read. max-height must be a fixed length, not a percentage: mobile
   Safari does not reliably resolve a percentage max-height on an
   image inside a flex container, which let tall logos overflow and
   collide with their neighbours. */
.clients-grid { --logo-h: 78px; }

.client-logo {
    height: var(--logo-h);
    overflow: hidden;   /* guard, in case a logo ever exceeds the box */
}

.client-logo img {
    max-height: var(--logo-h);
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
    opacity: 0.9;
    transition: opacity var(--transition), transform var(--transition);
}

.client-logo img:hover {
    opacity: 1;
    transform: scale(1.06);
}


/* ============================================================
   ABOUT
   ============================================================ */

#about {
    padding: 120px var(--pad-x);
}

.about-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: start;
}

.about-headline {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
}

.about-copy {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--text-secondary);
    max-width: 500px;
}

/* Services list */
.services-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 36px;
}

.services-list { display: flex; flex-direction: column; }

.service-item {
    display: flex;
    align-items: baseline;
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(183, 165, 138, 0.22);
    transition: padding-left var(--transition);
    cursor: default;
}

.service-item:first-child {
    border-top: 1px solid rgba(183, 165, 138, 0.22);
}

.service-item:hover { padding-left: 10px; }

/* The three service items that link to a page. They keep the exact look
   of the plain items, so the list still reads as one set rather than
   three buttons and two leftovers.

   The affordance is an underline on hover, not an arrow: an arrow needs
   real width in the flex row, and 20px was enough to wrap "Corporate
   Video Production" onto a second line. text-decoration costs no layout
   width, so nothing can reflow. */
.service-item--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.service-item--link:hover .service-name,
.service-item--link:focus-visible .service-name {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}

.service-number {
    font-size: 10px;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: 0.06em;
    min-width: 22px;
}

.service-name {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.1vw, 32px);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.1;
}


/* ============================================================
   CONTACT
   ============================================================ */

#contact {
    padding: 120px var(--pad-x) 100px;
    border-top: 1px solid rgba(183, 165, 138, 0.22);
}

.contact-inner {
    max-width: 760px;
    margin: 0 auto;
}

.contact-headline {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.contact-sub {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    margin-bottom: 64px;
}

/* Form */
.contact-form {
    display: flex;
    flex-direction: column;
}

.form-row {
    display: grid;
    gap: 0 40px;
}

.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row-2 { grid-template-columns: 1fr 1fr; }

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 44px;
}

.form-group label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Quiet aside on the labels of the fields that aren't required —
   secondary to the label text, not a second label. */
.label-optional {
    font-family: var(--font-body);
    font-size: 0.85em;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--text-secondary);
    opacity: 0.58;
}

.form-group input,
.form-group textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(183, 165, 138, 0.4);
    padding: 6px 0 10px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--text);
    outline: none;
    resize: none;
    transition: border-color var(--transition);
    -webkit-appearance: none;
    border-radius: 0;
}

.form-group input:focus,
.form-group textarea:focus {
    border-bottom-color: var(--text);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: transparent;
}

.form-submit {
    align-self: flex-start;
    margin-top: 4px;
    background: var(--text);
    color: var(--bg);
    border: none;
    padding: 15px 52px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), letter-spacing var(--transition);
}

.form-submit:hover {
    background: var(--accent);
    letter-spacing: 0.28em;
}

/* Success message */
.form-success {
    display: none;
    margin-top: 24px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
}

.form-success.visible { display: block; }

/* Error message */
.form-error {
    display: none;
    margin-top: 20px;
    padding: 14px 18px;
    border-left: 2px solid #b4544a;
    background: rgba(180, 84, 74, 0.07);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.7;
    color: #8f3f37;
    letter-spacing: 0.02em;
}

.form-error.visible { display: block; }

/* Contact details */
.contact-details {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    margin-top: 72px;
    padding-top: 40px;
    border-top: 1px solid rgba(183, 165, 138, 0.22);
    flex-wrap: wrap;
}

.contact-details-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-detail-label {
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.contact-detail-value {
    font-size: 18px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.01em;
    transition: color var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-detail-value:hover { color: var(--accent); }

/* WhatsApp icon next to phone */
.wa-icon {
    width: 20px;
    height: 20px;
    fill: #25D366;
    flex-shrink: 0;
    transition: transform var(--transition);
}

.contact-whatsapp:hover .wa-icon { transform: scale(1.15); }

/* Social icons in contact section */
.contact-details-socials {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    align-self: center;
}

.contact-details-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(183, 165, 138, 0.35);
    border-radius: 50%;
    transition: border-color var(--transition), background var(--transition);
}

.contact-details-socials a:hover {
    border-color: var(--text);
    background: var(--text);
}

.contact-details-socials svg {
    width: 16px;
    height: 16px;
    fill: var(--text-secondary);
    transition: fill var(--transition);
}

.contact-details-socials a:hover svg { fill: var(--bg); }


/* ============================================================
   FOOTER
   ============================================================ */

footer {
    padding: 48px var(--pad-x) 40px;
    border-top: 1px solid rgba(183, 165, 138, 0.18);
}

.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

/* Left column: logo + company details */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-logo {
    height: 20px;
    width: auto;
    opacity: 0.5;
    transition: opacity var(--transition);
    display: block;
}

.footer-logo:hover { opacity: 0.8; }

.footer-company {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Keeps the MOF reference from breaking across lines at its hyphen —
   "357-" on one line and "0002378505" on the next reads as two numbers,
   and this one gets quoted back to procurement officers. */
.footer-nowrap { white-space: nowrap; }

.footer-company p {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    opacity: 0.65;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* Right column: social icons + copyright */
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

/* Social icons in footer */
.footer-center {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    transition: opacity var(--transition);
}

.footer-social:hover { opacity: 0.5; }

.footer-social svg {
    width: 15px;
    height: 15px;
    fill: var(--text-secondary);
}

.footer-copy {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
    opacity: 0.5;
    letter-spacing: 0.02em;
}


/* ============================================================
   PAGE LOAD FADE-IN
   ============================================================ */

@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body {
    animation: pageFadeIn 0.9s ease both;
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }


/* Custom cursor disabled — using default browser cursor */
.cursor-dot,
.cursor-ring { display: none; }


/* ============================================================
   HERO WATCH BUTTON
   ============================================================ */

.hero-watch {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: color var(--transition), gap var(--transition);
}

.hero-watch:hover {
    color: #fff;
    gap: 20px;
}

.hero-watch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    flex-shrink: 0;
    transition: border-color var(--transition), transform 0.6s var(--ease);
}

.hero-watch:hover .hero-watch-icon {
    border-color: rgba(255, 255, 255, 0.75);
    transform: scale(1.08);
}

.hero-watch-icon svg {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.75);
}


/* ============================================================
   ABOUT STATS ROW
   ============================================================ */

.about-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 72px var(--pad-x) 0;
    max-width: var(--max-w);
    margin: 0 auto;
    border-bottom: 1px solid rgba(183, 165, 138, 0.22);
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 40px 64px;
    text-align: center;
}

.stat-divider {
    width: 1px;
    height: 60px;
    background: rgba(183, 165, 138, 0.28);
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 64px;
}

.stat-number-wrap {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.stat-number {
    font-family: var(--font-display);
    font-size: clamp(52px, 6vw, 88px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
}

.stat-suffix {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .about-stats {
        padding: 56px var(--pad-x) 0;
        gap: 0;
    }

    .stat-item { padding: 0 20px 48px; }

    .stat-divider { margin-bottom: 48px; }
}

@media (max-width: 480px) {
    .about-stats { flex-direction: column; gap: 0; }

    .stat-item {
        width: 100%;
        padding: 32px 0;
        border-bottom: 1px solid rgba(183, 165, 138, 0.18);
    }

    .stat-divider { display: none; }
}


/* ============================================================
   ARTICLES LISTING PAGE
   ============================================================ */

.page-hero {
    padding: calc(var(--nav-h) + 80px) var(--pad-x) 80px;
    max-width: var(--max-w);
    margin: 0 auto;
    border-bottom: 1px solid rgba(183, 165, 138, 0.22);
}

.page-hero-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.page-hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 88px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 640px;
}

.page-hero-sub {
    font-size: 15.5px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 480px;
    margin-top: 28px;
}

/* Articles grid */
.articles-section {
    padding: 80px var(--pad-x) 120px;
    max-width: var(--max-w);
    margin: 0 auto;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.article-card {
    display: block;
    padding: 52px 48px 52px 0;
    border-right: 1px solid rgba(183, 165, 138, 0.22);
    transition: padding-left var(--transition);
}

.article-card:last-child {
    border-right: none;
    padding-left: 48px;
    padding-right: 0;
}

.article-card:nth-child(2) {
    padding-left: 48px;
}

.article-card:hover { padding-left: 10px; }
.article-card:last-child:hover { padding-left: 58px; }
.article-card:nth-child(2):hover { padding-left: 58px; }

.article-card-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.article-card-tag {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

.article-card-read {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
}

.article-card-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
    transition: color var(--transition);
}

.article-card:hover .article-card-title { color: var(--accent); }

.article-card-excerpt {
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.article-card-cta {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: gap var(--transition), color var(--transition);
}

.article-card:hover .article-card-cta {
    gap: 16px;
    color: var(--accent);
}

.article-card-cta::after {
    content: '→';
    font-size: 13px;
}


/* ============================================================
   INDIVIDUAL ARTICLE PAGE
   ============================================================ */

/* Nav always light on article pages */
.nav-article #nav {
    background-color: rgba(244, 241, 236, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(183, 165, 138, 0.18);
}

.nav-article #nav .logo-white { opacity: 0; }
.nav-article #nav .logo-black  { opacity: 1; }
.nav-article #nav .nav-links a { color: var(--text-secondary); }
.nav-article #nav .nav-links a:hover { color: var(--text); }
.nav-article #nav .nav-hamburger span { background: var(--text); }

.article-header {
    padding: calc(var(--nav-h) + 80px) var(--pad-x) 64px;
    max-width: 860px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(183, 165, 138, 0.22);
}

.article-header-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 36px;
}

.article-back {
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-back::before { content: '←'; font-size: 12px; }
.article-back:hover { color: var(--text); }

.article-tag {
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.article-read-time {
    font-size: 9.5px;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    margin-left: auto;
}

.article-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5.5vw, 72px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
}

.article-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 600px;
}

/* Article body */
.article-body {
    padding: 72px var(--pad-x) 120px;
    max-width: 860px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 600px;
    gap: 0 80px;
    align-items: start;
}

.article-aside {
    position: sticky;
    top: calc(var(--nav-h) + 40px);
}

.article-aside-label {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 20px;
    display: block;
}

.article-toc {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.article-toc li a {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
    transition: color var(--transition), padding-left var(--transition);
    display: block;
    padding-left: 0;
}

.article-toc li a:hover {
    color: var(--text);
    padding-left: 6px;
}

.article-content h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-top: 64px;
    margin-bottom: 20px;
    color: var(--text);
}

.article-content h2:first-child { margin-top: 0; }

.article-content p {
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.9;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.article-content p strong {
    font-weight: 500;
    color: var(--text);
}

.article-content ul,
.article-content ol {
    margin-bottom: 24px;
    padding-left: 0;
    list-style: none;
}

.article-content ul li,
.article-content ol li {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
    color: var(--text-secondary);
    padding: 10px 0 10px 24px;
    border-bottom: 1px solid rgba(183, 165, 138, 0.15);
    position: relative;
}

.article-content ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 12px;
}

.article-content ol {
    counter-reset: ol-counter;
}

.article-content ol li {
    counter-increment: ol-counter;
}

.article-content ol li::before {
    content: counter(ol-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.05em;
    top: 13px;
}

.article-content li strong {
    font-weight: 500;
    color: var(--text);
}

.article-pullquote {
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px 28px;
    margin: 48px 0;
}

.article-pullquote p {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--text) !important;
    letter-spacing: -0.01em;
    margin: 0 !important;
}

/* Article CTA */
.article-cta {
    margin-top: 80px;
    padding: 52px;
    border: 1px solid rgba(183, 165, 138, 0.28);
    background: rgba(183, 165, 138, 0.06);
}

.article-cta-label {
    display: block;
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.article-cta h3 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.article-cta p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 32px;
}

.article-cta-btn {
    display: inline-block;
    background: var(--text);
    color: var(--bg);
    padding: 15px 52px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: background var(--transition), letter-spacing var(--transition);
}

.article-cta-btn:hover {
    background: var(--accent);
    letter-spacing: 0.28em;
}

/* More articles */
.article-more {
    padding: 80px var(--pad-x) 120px;
    border-top: 1px solid rgba(183, 165, 138, 0.22);
}

.article-more-inner {
    max-width: 860px;
    margin: 0 auto;
}

.article-more-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.article-more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.article-more-item {
    display: block;
    padding: 32px 40px 32px 0;
    border-right: 1px solid rgba(183, 165, 138, 0.22);
    transition: padding-left var(--transition);
}

.article-more-item:last-child {
    border-right: none;
    padding-left: 40px;
    padding-right: 0;
}

.article-more-item:hover { padding-left: 10px; }
.article-more-item:last-child:hover { padding-left: 50px; }

.article-more-tag {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    display: block;
}

.article-more-title {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    transition: color var(--transition);
}

.article-more-item:hover .article-more-title { color: var(--accent); }


/* ============================================================
   RESPONSIVE — ARTICLES
   ============================================================ */

@media (max-width: 1100px) {
    .articles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .article-card:nth-child(3) {
        grid-column: span 2;
        padding: 40px 0;
        border-right: none;
        border-top: 1px solid rgba(183, 165, 138, 0.22);
    }

    .article-body {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .article-aside { display: none; }
}

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

    .article-card,
    .article-card:nth-child(2),
    .article-card:last-child {
        padding: 40px 0;
        border-right: none;
        border-bottom: 1px solid rgba(183, 165, 138, 0.22);
    }

    .article-header { padding: calc(var(--nav-h) + 48px) var(--pad-x) 48px; }
    .article-body   { padding: 48px var(--pad-x) 80px; }

    .article-more-grid { grid-template-columns: 1fr; }
    .article-more-item,
    .article-more-item:last-child {
        padding: 28px 0;
        border-right: none;
        border-bottom: 1px solid rgba(183, 165, 138, 0.22);
    }

    .article-cta { padding: 36px 24px; }
}


/* ============================================================
   RESPONSIVE — TABLET  (≤ 1100px)
   ============================================================ */

@media (max-width: 1100px) {
    :root { --pad-x: 40px; }

    .work-item:nth-child(1)  { grid-column: span 12; }
    .work-item:nth-child(2)  { grid-column: span 6; }
    .work-item:nth-child(3)  { grid-column: span 6; }
    .work-item:nth-child(4)  { grid-column: span 12; }
    .work-item:nth-child(5)  { grid-column: span 6; }
    .work-item:nth-child(6)  { grid-column: span 6; }
    .work-item:nth-child(7)  { grid-column: span 4; }
    .work-item:nth-child(8)  { grid-column: span 4; }
    .work-item:nth-child(9)  { grid-column: span 4; }
    .work-item:nth-child(10) { grid-column: span 4; }
    .work-item:nth-child(11) { grid-column: span 4; }
    .work-item:nth-child(12) { grid-column: span 4; }
    .work-item:nth-child(13) { grid-column: span 6; }
    .work-item:nth-child(14) { grid-column: span 3; }
    .work-item:nth-child(15) { grid-column: span 3; }
    .work-item:nth-child(16) { grid-column: span 3; }
    .work-item:nth-child(17) { grid-column: span 3; }

    .about-inner { gap: 60px; }
}


/* ============================================================
   RESPONSIVE — MOBILE  (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {
    :root { --pad-x: 24px; }

    /* Show hamburger, hide desktop links */
    .nav-links     { display: none; }
    .nav-hamburger { display: flex; }
    .mobile-menu   { display: flex; }

    /* Sections */
    #work, #clients, #about, #contact { padding: 80px var(--pad-x); }
    footer { padding: 28px var(--pad-x); }

    /* Work grid → 2 col */
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .work-item.landscape { grid-column: span 2 !important; }
    .work-item.portrait  { grid-column: span 1 !important; }

    /* Work info always visible on mobile (no hover) */
    .work-info { opacity: 1; }

    /* About */
    .about-inner { grid-template-columns: 1fr; gap: 56px; }

    /* Contact form */
    .form-row-3,
    .form-row-2 { grid-template-columns: 1fr; gap: 0; }
    .form-submit { padding: 15px 40px; }

    /* Contact details */
    .contact-details { flex-direction: column; gap: 32px; }
    .contact-details-socials { margin-left: 0; }
    .contact-detail-value { font-size: 16px; }

    /* Clients */
    .clients-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 32px; }

    /* Footer */
    .footer-inner  { flex-direction: column; gap: 28px; }
    .footer-right  { align-items: flex-start; }
    .footer-company p { font-size: 10.5px; }
}


/* ============================================================
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   ============================================================ */

@media (max-width: 480px) {
    .hero-title { letter-spacing: 0.2em; }

    .work-grid { grid-template-columns: 1fr; gap: 8px; }
    .work-item.landscape,
    .work-item.portrait { grid-column: span 1 !important; }

    .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}


/* ============================================================
   HERO POSTER
   ------------------------------------------------------------
   The poster is a CSS background rather than the <video poster>
   attribute so it can be served responsively — phones pull an
   828px file instead of the 1600px desktop one. The video (when
   it loads, desktop only) simply paints on top of it.
   ============================================================ */

#hero {
    background-image: url("hero-poster.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0e0b06;
}

@media (max-width: 768px) {
    #hero { background-image: url("hero-poster-mobile.jpg"); }
}

/* Fade the video in so the poster → video handover isn't a jump-cut. */
.hero-video {
    opacity: 0;
    transition: opacity 0.6s var(--ease);
}

.hero-video.is-playing { opacity: 1; }


/* ============================================================
   THANK YOU PAGE
   ============================================================ */

.ty-section {
    max-width: 780px;
    margin: 0 auto;
    padding: calc(var(--nav-h) + 96px) var(--pad-x) 120px;
}

.ty-check {
    display: block;
    width: 48px;
    height: 48px;
    color: var(--accent);
    margin-bottom: 36px;
}

.ty-check svg { width: 100%; height: 100%; display: block; }

.ty-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.ty-sub {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 520px;
}

.ty-sub strong { color: var(--text); font-weight: 500; }

/* Next steps */
.ty-steps {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid rgba(183, 165, 138, 0.28);
}

.ty-steps-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.ty-step {
    display: flex;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(183, 165, 138, 0.18);
}

.ty-step:last-child { border-bottom: none; }

.ty-step-num {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    color: var(--accent);
    padding-top: 4px;
    flex-shrink: 0;
}

.ty-step-title {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 6px;
}

.ty-step-copy {
    display: block;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* Urgent / WhatsApp block */
.ty-urgent {
    margin-top: 56px;
    padding: 36px 40px;
    background: rgba(183, 165, 138, 0.1);
    border: 1px solid rgba(183, 165, 138, 0.28);
}

.ty-urgent-copy {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.ty-wa {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 13px 28px;
    background: var(--text);
    color: var(--bg);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background var(--transition), transform var(--transition);
}

.ty-wa:hover { background: var(--accent); transform: translateY(-2px); }
.ty-wa .wa-icon { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* Footer links */
.ty-links {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 56px;
}

.ty-link-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color var(--transition);
}

.ty-link-back::before { content: '←'; margin-right: 10px; }
.ty-link-back:hover { color: var(--text); }

@media (max-width: 768px) {
    .ty-section { padding: calc(var(--nav-h) + 56px) var(--pad-x) 80px; }
    .ty-urgent  { padding: 28px 24px; }
    .ty-wa      { width: 100%; justify-content: center; text-align: center; }
    .ty-links   { flex-direction: column; gap: 8px; }
}


/* ============================================================
   LEGAL PAGES (privacy policy)
   ------------------------------------------------------------
   Reuses .article-content typography so legal copy matches the
   rest of the site without a second set of type rules.
   ============================================================ */

/* Shares the page-hero container so the copy lines up with the
   heading's left edge; the measure is constrained on the inner
   block instead of by centring the whole column. */
.legal-section {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 72px var(--pad-x) 120px;
}

.legal-section .article-content { max-width: 720px; }

.legal-updated {
    font-size: 12px !important;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding-bottom: 28px;
    margin-bottom: 40px !important;
    border-bottom: 1px solid rgba(183, 165, 138, 0.22);
}

.legal-section .article-content a {
    color: var(--text);
    border-bottom: 1px solid rgba(183, 165, 138, 0.55);
    transition: color var(--transition), border-color var(--transition);
}

.legal-section .article-content a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.legal-back {
    margin-top: 56px !important;
    padding-top: 36px;
    border-top: 1px solid rgba(183, 165, 138, 0.22);
}

.legal-back .article-back { border-bottom: none; }

/* Footer legal link */
.footer-legal {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    transition: color var(--transition);
}

.footer-legal:hover { color: var(--text); }

/* Privacy note under the enquiry form */
.form-privacy {
    margin-top: 18px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.form-privacy a {
    color: var(--text);
    border-bottom: 1px solid rgba(183, 165, 138, 0.55);
    transition: color var(--transition), border-color var(--transition);
}

.form-privacy a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 768px) {
    .legal-section { padding: 48px var(--pad-x) 80px; }
}


/* ============================================================
   CONVERSION — CTA BUTTONS
   ============================================================ */

/* Nav "Get a Quote" — filled so it reads as the primary action
   against the plain text links beside it. */
.nav-cta {
    padding: 9px 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff !important;
    border-radius: 2px;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
}

.nav-cta:hover {
    background: #fff;
    color: var(--text) !important;
    border-color: #fff;
}

/* Once scrolled the bar turns light, so the button inverts. */
#nav.scrolled .nav-cta,
.nav-article #nav .nav-cta {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg) !important;
}

#nav.scrolled .nav-cta:hover,
.nav-article #nav .nav-cta:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg) !important;
}

/* Hero actions */
.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 16px 38px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background var(--transition), transform var(--transition),
                box-shadow var(--transition);
}

.hero-cta:hover {
    background: var(--accent);
    color: var(--bg);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* Mobile menu CTA */
.mobile-link-cta {
    margin: 8px var(--pad-x) 12px;
    padding: 16px 20px !important;
    background: var(--text);
    color: var(--bg) !important;
    text-align: center;
    border-bottom: none !important;
    border-radius: 2px;
}

.mobile-link-cta:hover {
    padding-left: 20px !important;
    background: var(--accent);
    color: var(--bg) !important;
}


/* ============================================================
   FLOATING WHATSAPP (mobile only)
   ============================================================ */

.wa-float {
    display: none;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 180;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: transform var(--transition);
    /* Clear the iPhone home indicator. */
    margin-bottom: env(safe-area-inset-bottom, 0px);
}

.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-float:active { transform: scale(0.94); }

@media (max-width: 768px) {
    .wa-float { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float { transition: none; }
}


/* ============================================================
   FORM — SELECTS & SPAM TRAP
   ============================================================ */

.form-group select {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid rgba(183, 165, 138, 0.4);
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    border-radius: 0;
    cursor: pointer;
    /* Custom chevron — the native one clashes with the flat styling. */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A746D' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 11px;
    padding-right: 22px;
    transition: border-color var(--transition);
}

.form-group select:focus {
    outline: none;
    border-bottom-color: var(--text);
}

.form-group select option[value=""] { color: var(--text-secondary); }

/* script.js toggles .is-empty whenever the value is blank. The old
   rule used :invalid, which never matches on a select without a
   required attribute, so "Select…" always rendered in full-strength
   body colour and outweighed its own label. */
.form-group select.is-empty { color: var(--text-secondary); }


@media (max-width: 768px) {
    .hero-actions { gap: 18px; flex-direction: column; }
    .hero-cta     { width: 100%; max-width: 280px; }

    /* Keep the form clear of the floating WhatsApp button. */
    .contact-form { padding-bottom: 8px; }
}


/* ============================================================
   FORM & CTA — MOBILE TOUCH FIXES
   ============================================================ */

@media (max-width: 768px) {
    /* .hero-content centres its children, which made .hero-actions
       shrink to its content width — so the CTA's width:100% had
       nothing full-width to resolve against. */
    .hero-actions { width: 100%; }
    .hero-cta     { width: 100%; max-width: 280px; }

    /* 16px is the threshold below which iOS Safari zooms the page
       in when a field receives focus. Anything smaller makes the
       form feel broken on iPhone. */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
        min-height: 48px;
    }

    .form-group textarea { min-height: 120px; }

    /* Touch targets: 44px is the documented minimum. */
    .form-submit {
        min-height: 48px;
        width: 100%;
    }
}


/* ============================================================
   BATCH B — TOUCH TARGETS, FOCUS, WORK GRID
   ============================================================ */

/* --- Tap targets -------------------------------------------
   44x44 is the documented minimum. In each case the hit area
   grows while the icon itself stays the same size, so nothing
   looks heavier than before. --------------------------------- */

.nav-hamburger {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Pull back so the icon stays optically aligned with the
       section padding rather than the new wider hit area. */
    margin-right: -11px;
}

.footer-social {
    width: 44px;
    height: 44px;
}

/* Keep the row visually tight now that each target is wider. */
.footer-center { margin-left: -10px; }

@media (max-width: 768px) {
    /* Email and phone were 26px tall — too small to hit reliably. */
    .contact-detail-value { min-height: 44px; }
}


/* --- Keyboard focus ----------------------------------------
   The site had no visible focus state anywhere, so keyboard
   users had no idea where they were. ------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* On the dark hero a gold outline is hard to see. */
#hero a:focus-visible,
#nav a:focus-visible,
.nav-hamburger:focus-visible {
    outline-color: #fff;
}

.work-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* Titles are hover-revealed on desktop; show them on focus too,
   otherwise a keyboard user sees an unlabelled image. Plain :focus
   is included as well as :focus-visible, so the label appears
   however focus arrived. */
.work-item:focus .work-info,
.work-item:focus-visible .work-info { opacity: 1; }


/* --- Work grid --------------------------------------------- */

/* .work-item became an <a>; anchors are inline by default. */
.work-item {
    display: block;
    color: inherit;
}

.work-more {
    display: none;
    width: 100%;
    min-height: 52px;
    margin-top: 20px;
    padding: 16px 24px;
    background: transparent;
    border: 1px solid rgba(183, 165, 138, 0.5);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
}

.work-more:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}

@media (max-width: 768px) {
    /* Trim the grid on phones; the full mosaic stays on desktop. */
    .work-item.is-extra { display: none; }
    .work-grid.is-expanded .work-item.is-extra { display: block; }
    .work-more { display: block; }
}


/* --- Hero tagline ------------------------------------------
   At 375px the 0.28em tracking left the line almost touching
   both screen edges. ----------------------------------------- */

@media (max-width: 560px) {
    .hero-tagline {
        letter-spacing: 0.16em;
        padding: 0 8px;
        line-height: 1.7;
    }
}

@media (max-width: 380px) {
    .hero-tagline { letter-spacing: 0.1em; }
}


/* --- Proof bar ---------------------------------------------
   The stats moved out of #about into their own band above the
   portfolio, so they need their own spacing. ------------------ */

#proof .about-stats {
    padding-top: 30px;
    padding-bottom: 0;
}

@media (max-width: 768px) {
    #proof .about-stats { padding-top: 22px; }
}


/* ============================================================
   VIDEO LIGHTBOX
   ============================================================ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 9, 7, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lightbox-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(12px);
    transition: transform 0.35s var(--ease);
}

.lightbox.is-open .lightbox-inner { transform: translateY(0); }

/* 16:9 by default, 9:16 for Shorts. max-height keeps a portrait
   video inside the viewport instead of overflowing it. */
.lightbox-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-frame.is-portrait {
    aspect-ratio: 9 / 16;
    width: auto;
    height: min(78vh, 780px);
}

.lightbox-slot,
.lightbox-slot iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lightbox-caption {
    margin-top: 18px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
}

/* Links between work.html and behind-the-scenes.html. Sits under the
   grid so neither page's films are competing with it. */
.bts-note {
    margin-top: 48px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.bts-note a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    padding-bottom: 2px;
    transition: border-color var(--transition);
}

.bts-note a:hover { border-bottom-color: currentColor; }

/* On the homepage it follows the "View All Work" button rather than a
   grid edge, so it needs far less room above it. */
.bts-note--tight { margin-top: 18px; }

/* See the note in initVideoLightbox(): the extra button costs vertical
   room the close button needs. */
.lightbox.has-extra .lightbox-frame.is-portrait { height: min(68vh, 700px); }

/* Offers the behind-the-scenes cut of a project that has one. Sits
   below the caption so the film itself is never competing with it. */
.lightbox-extra {
    margin-top: 12px;
    min-height: 44px;
    padding: 0 20px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.lightbox-extra:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
}

.lightbox-extra[hidden] { display: none; }

.lightbox-close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
}

.lightbox-close svg { width: 17px; height: 17px; }

@media (max-width: 768px) {
    .lightbox { padding: 20px; }
    .lightbox-close { top: -44px; }
    .lightbox-frame.is-portrait { height: min(66vh, 620px); }
    .lightbox.has-extra .lightbox-frame.is-portrait { height: min(56vh, 540px); }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox,
    .lightbox-inner { transition: none; }
}


/* ============================================================
   WORK TILE — PLAY AFFORDANCE
   ------------------------------------------------------------
   Without this the tiles read as flat images; nothing signalled
   that they were watchable.
   ============================================================ */

.work-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 2;
}

.work-play svg { width: 17px; height: 17px; fill: #fff; margin-left: 2px; }

.work-item:hover .work-play,
.work-item:focus .work-play,
.work-item:focus-visible .work-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* No hover on touch, so show it permanently there. */
@media (hover: none) {
    .work-play { opacity: 0.92; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .work-play { transition: opacity 0.01ms; }
}


/* ============================================================
   MOBILE — STATS ROW & LARGER CLIENT LOGOS
   ============================================================ */

@media (max-width: 480px) {
    /* Keep all three stats on one line instead of stacking, which
       made the proof bar three full screens tall. Overrides the
       earlier column rule further up this file. */
    .about-stats {
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
    }

    .stat-item {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        padding: 0 6px 40px;
        border-bottom: none;
    }

    .stat-divider {
        display: block;
        height: 44px;
        margin-bottom: 40px;
    }

    /* Scaled to fit three columns across a 375px screen. */
    .stat-number { font-size: 32px; letter-spacing: -0.02em; }
    .stat-suffix { font-size: 17px; }

    .stat-label {
        font-size: 8.5px;
        letter-spacing: 0.09em;
        line-height: 1.5;
        /* "Brand productions" wraps to two lines; keep the three
           columns aligned with each other regardless. */
        min-height: 2.4em;
    }
}

/* --- Client logos ------------------------------------------
   They were capped at 64px tall / 160px wide, which on a phone
   left them small and weak against the headline. --------------- */

@media (max-width: 768px) {
    /* Two columns so each logo gets roughly half the screen width —
       the wide wordmarks (Panasonic, Technics) are width-limited, so
       column count drives their size more than cell height does. */
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
        --logo-h: 84px;
    }

    .client-logo img { opacity: 1; }
}

@media (max-width: 480px) {
    .clients-grid { gap: 36px 18px; --logo-h: 76px; }
}


/* ============================================================
   HERO — SQUARER CROP ON MOBILE
   ------------------------------------------------------------
   At 100svh a phone viewport is about 9:19.5, so a 16:9 video
   filling it is cropped to roughly 26% of its frame width — the
   footage ends up massively zoomed into its own centre. A 1:1
   hero shows about 56% of the frame instead, and brings the
   proof bar and portfolio further up the page.
   ============================================================ */

@media (max-width: 768px) {
    #hero {
        height: auto;
        aspect-ratio: 1 / 1;
        min-height: 360px;
        /* The nav is fixed and overlays the top of the hero. Without
           this, centring happens across the full square and the title
           lands flush against the nav with zero clearance. Padding is
           inside the aspect ratio (border-box), so the hero stays 1:1. */
        padding-top: var(--nav-h);
    }
}


/* ============================================================
   CLIENTS HEADLINE — MOBILE
   ------------------------------------------------------------
   The hard <br> after "brands" forced the line to break early,
   so at 26px the headline ran to four lines on a phone. Letting
   it flow naturally at a smaller size gives three.
   ============================================================ */

@media (max-width: 768px) {
    #clients { padding-top: 56px; padding-bottom: 56px; }

    .clients-headline {
        font-size: 22px;
        line-height: 1.35;
        margin-bottom: 44px;
    }

    /* The other section headings track the clients headline. */
    .about-headline,
    .process-headline,
    .faq-headline,
    .contact-headline { font-size: 22px; }

    /* Let the text wrap to the column instead of the author's break. */
    .clients-headline br { display: none; }
}


/* ============================================================
   PROOF BAR — EYEBROW
   ------------------------------------------------------------
   Names the company and its founding year above the figures, so
   the numbers read as belonging to someone rather than floating
   free at the top of the page.
   ============================================================ */

.proof-eyebrow {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 64px var(--pad-x) 0;
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .proof-eyebrow {
        padding-top: 48px;
        font-size: 9.5px;
        letter-spacing: 0.18em;
    }
}


/* ============================================================
   FEATURED WORK GRID (homepage)
   ------------------------------------------------------------
   The full mosaic on work.html uses hand-tuned :nth-child spans,
   which only make sense for that exact 17-project order. The
   homepage shows a different six, so its layout is driven by the
   project's own format instead of its position: four landscape
   tiles two-up, then the pair of verticals centred beneath.
   These selectors carry one more class than the nth-child rules,
   so they win without needing !important.
   ============================================================ */

.work-grid--featured .work-item.landscape { grid-column: span 6; }

.work-grid--featured .work-item.portrait:nth-child(5) { grid-column: 4 / span 3; }
.work-grid--featured .work-item.portrait:nth-child(6) { grid-column: 7 / span 3; }

@media (max-width: 1100px) {
    .work-grid--featured .work-item.landscape { grid-column: span 6; }
    .work-grid--featured .work-item.portrait:nth-child(5) { grid-column: 1 / span 6; }
    .work-grid--featured .work-item.portrait:nth-child(6) { grid-column: 7 / span 6; }
}

@media (max-width: 768px) {
    /* Two columns: landscape full width, the verticals side by side. */
    .work-grid--featured .work-item.landscape { grid-column: span 2 !important; }
    .work-grid--featured .work-item.portrait  { grid-column: auto !important; }
}

@media (max-width: 480px) {
    /* The generic grid drops to a single column here, which would give
       each 9:16 tile a full-width 581px of height. Keeping two columns
       lets the verticals sit as a pair while landscapes still span the
       full width — about 880px shorter on a 375px screen. */
    .work-grid--featured { grid-template-columns: repeat(2, 1fr); }
    .work-grid--featured .work-item.landscape { grid-column: span 2 !important; }
    .work-grid--featured .work-item.portrait  { grid-column: span 1 !important; }
}

/* "View all 17 projects" */
.work-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin-top: 36px;
    padding: 14px 30px;
    border: 1px solid rgba(183, 165, 138, 0.55);
    border-radius: 2px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
}

.work-all svg { width: 16px; height: 16px; transition: transform var(--transition); }
.work-all:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.work-all:hover svg { transform: translateX(4px); }

@media (max-width: 768px) {
    .work-all { width: 100%; justify-content: center; margin-top: 24px; }
}


/* ============================================================
   WORK PAGE
   ============================================================ */

.work-page {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 72px var(--pad-x) 100px;
}

.work-cta {
    border-top: 1px solid rgba(183, 165, 138, 0.22);
    padding: 96px var(--pad-x);
}

.work-cta-inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.work-cta-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.work-cta-copy {
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 36px;
}

.work-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Reuses .hero-cta, which is white-on-dark; invert it for the cream page. */
.work-cta-btn {
    background: var(--text);
    color: var(--bg);
}

.work-cta-btn:hover { background: var(--accent); color: var(--bg); }

.work-cta-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 16px 28px;
    border: 1px solid rgba(183, 165, 138, 0.55);
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    transition: background var(--transition), border-color var(--transition);
}

.work-cta-wa:hover { background: rgba(183, 165, 138, 0.14); border-color: var(--accent); }
.work-cta-wa .wa-icon { width: 17px; height: 17px; fill: currentColor; }

@media (max-width: 768px) {
    .work-page { padding: 48px var(--pad-x) 72px; }
    .work-cta  { padding: 64px var(--pad-x); }
    .work-cta-actions { flex-direction: column; }
    .work-cta-btn, .work-cta-wa { width: 100%; max-width: 320px; justify-content: center; }
}


/* ============================================================
   PROCESS
   ============================================================ */

#process {
    padding: 120px var(--pad-x);
    border-top: 1px solid rgba(183, 165, 138, 0.22);
}

.process-inner { max-width: var(--max-w); margin: 0 auto; }

.process-headline {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 18px;
    max-width: 620px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 40px;
    margin-top: 72px;
}

.process-step { border-top: 1px solid rgba(183, 165, 138, 0.35); padding-top: 22px; }

.process-num {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 16px;
}

.process-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}

.process-copy {
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-secondary);
}


/* ============================================================
   FAQ
   ============================================================ */

#faq {
    padding: 120px var(--pad-x);
    border-top: 1px solid rgba(183, 165, 138, 0.22);
}

.faq-inner { max-width: var(--max-w); margin: 0 auto; }

.faq-headline {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 46px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 18px;
}

.faq-list { margin-top: 56px; max-width: 860px; }

.faq-item { border-bottom: 1px solid rgba(183, 165, 138, 0.28); }

.faq-q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
    min-height: 48px;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 500;
    line-height: 1.45;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: color var(--transition);
}

/* Hide the native disclosure triangle in every browser. */
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ''; }

.faq-q:hover { color: var(--accent); }

/* Plus sign that becomes a minus when open. */
.faq-q::after {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 5px;
    background:
        linear-gradient(var(--accent), var(--accent)) center/14px 1.5px no-repeat,
        linear-gradient(var(--accent), var(--accent)) center/1.5px 14px no-repeat;
    transition: transform var(--transition);
}

.faq-item[open] .faq-q::after {
    /* Collapse the vertical bar, leaving a minus. */
    background:
        linear-gradient(var(--accent), var(--accent)) center/14px 1.5px no-repeat;
    transform: rotate(180deg);
}

.faq-a { padding: 0 0 28px; max-width: 720px; }

.faq-a p {
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--text-secondary);
}

.faq-a a {
    color: var(--text);
    border-bottom: 1px solid rgba(183, 165, 138, 0.55);
    transition: color var(--transition), border-color var(--transition);
}

.faq-a a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 1100px) {
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 36px; }
}

@media (max-width: 768px) {
    #process, #faq { padding: 72px var(--pad-x); }
    .process-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
    .faq-list { margin-top: 40px; }
    .faq-q { padding: 22px 0; }
}


/* ============================================================
   SERVICE LANDING PAGES
   ============================================================ */

.lp-hero {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: calc(var(--nav-h) + 88px) var(--pad-x) 72px;
}

.lp-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 26px;
}

.lp-title {
    font-family: var(--font-display);
    font-size: clamp(34px, 5.2vw, 68px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    max-width: 900px;
}

.lp-sub {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 640px;
    margin-top: 26px;
}

.lp-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* Proof bar */
.lp-proof {
    border-top: 1px solid rgba(183, 165, 138, 0.22);
    border-bottom: 1px solid rgba(183, 165, 138, 0.22);
}

.lp-proof-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 52px var(--pad-x);
}

.lp-proof .stat-item { padding: 0 40px; }
.lp-proof .stat-divider { margin-bottom: 0; }

/* Intro — now sits below the work grid, so its spacing above comes
   from .lp-work's bottom padding. It needs padding below instead, or
   the copy butts straight into #process's top border. */
.lp-intro {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad-x) 96px;
}

.lp-intro-inner { max-width: 720px; }

.lp-intro-copy {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.lp-intro-copy:last-child { margin-bottom: 0; }

/* Work */
.lp-work {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 72px var(--pad-x) 96px;
}

/* Service grids are laid out by format, not position — the
   nth-child mosaic on work.html only holds for that exact
   17-item order, and would give a vertical Short a wide
   landscape box here. */
.work-grid--service .work-item.landscape { grid-column: span 6; }
.work-grid--service .work-item.portrait  { grid-column: span 3; }

@media (max-width: 1100px) {
    .work-grid--service .work-item.landscape { grid-column: span 12; }
    .work-grid--service .work-item.portrait  { grid-column: span 6; }
}

@media (max-width: 768px) {
    .lp-hero  { padding: calc(var(--nav-h) + 48px) var(--pad-x) 48px; }
    .lp-sub   { font-size: 16px; }
    .lp-intro { padding-bottom: 56px; }
    .lp-work  { padding: 48px var(--pad-x) 64px; }

    /* These labels are sentences ("Selected corporate and brand films"),
       not the homepage's two-word "Selected Work", so .section-label's
       white-space: nowrap ran them off the side of a phone. Let them
       wrap, and drop the trailing rule — beside a two-line label it is
       squeezed to a stub. */
    .lp-work .section-label {
        white-space: normal;
        text-wrap: balance;
    }
    .lp-work .section-header::after { display: none; }

    .lp-actions { flex-direction: column; align-items: stretch; }
    .lp-actions .hero-cta,
    .lp-actions .work-cta-wa { width: 100%; max-width: 320px; justify-content: center; }

    .lp-proof-inner { padding: 36px var(--pad-x); }
    .lp-proof .stat-item { padding: 0 8px; flex: 1 1 0; min-width: 0; }

    .work-grid--service .work-item.landscape { grid-column: span 2 !important; }
    .work-grid--service .work-item.portrait  { grid-column: span 1 !important; }
}

@media (max-width: 480px) {
    .work-grid--service { grid-template-columns: repeat(2, 1fr); }
    .work-grid--service .work-item.landscape { grid-column: span 2 !important; }
    .work-grid--service .work-item.portrait  { grid-column: span 1 !important; }
}