:root { color-scheme: dark; --paper: #f4f3eb; --muted: #c1c3bc; --line: #ffffff24; --photo-gap: 20px; --half-photo-gap: 10px; }
    * { box-sizing: border-box; }
    html { background: #101110; }
    body { margin: 0; color: var(--paper); font-family: Arial, Helvetica, sans-serif; }
    a { color: inherit; text-decoration: none; }
    a:focus-visible { outline: 2px solid var(--paper); outline-offset: 7px; }
    .skip-link { position: fixed; top: -100px; left: 20px; z-index: 10; padding: 14px; background: var(--paper); color: #101110; }
    .skip-link:focus { top: 16px; }
    .hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 800px; min-height: max(800px, 100svh); overflow: hidden; background: #101110; }
    .photo-wall { position: absolute; z-index: -3; inset: -260px -190px -300px 37%; pointer-events: none; }
    .photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: max(950px, 100%); transform: perspective(1800px) rotateY(-14deg) rotateZ(13deg); transform-origin: 50% 50%; }
    .photo-column { height: 1385px; }
    .photo-track, .photo-set { display: flex; flex-direction: column; gap: var(--photo-gap); }
    .photo-set { flex-shrink: 0; }
    .photo-track { animation: photos-rise 90s linear infinite; will-change: transform; }
    @keyframes photos-rise { to { transform: translateY(calc(-50% - var(--half-photo-gap))); } }
    .photo-column:nth-child(2) { padding-top: 135px; }
    .photo-column:nth-child(3) { padding-top: 55px; }
    .photo-column img { display: block; width: 100%; height: 350px; object-fit: cover; border-radius: 5px; background: #272b27; filter: saturate(.67); box-shadow: 0 0 0 1px #ffffff12; }
    .photo-column img.wide { height: 245px; }
    .photo-column img.portrait { object-position: 50% 30%; }
    .hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, #101110 0%, #101110f2 22%, #101110ce 40%, #1011104d 68%, #10111014 100%); }
    .hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #101110 0%, #101110f5 80px, #101110c4 120px, transparent 32%, transparent 67%, #101110d9 92%, #101110 100%); }
    .site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 5.3%; padding: 26px 0; border-bottom: 1px solid var(--line); }
    .brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
    .brand img { width: 52px; height: 52px; border-radius: 50%; }
    .brand-name { display: block; font-size: 18px; line-height: 1.1; letter-spacing: .14em; font-weight: 700; }
    .brand-name span { display: block; margin-top: 5px; font-size: 11px; letter-spacing: .37em; font-weight: 400; }
    .navigation { display: flex; align-items: center; gap: 40px; font-size: 15px; }
    .navigation a { padding: 10px 0; }
    .navigation a:hover { color: #fff; text-decoration: underline; text-underline-offset: 7px; }
    .hero-main { display: flex; align-items: center; flex: 1; padding: 70px 5.3% 80px; }
    .hero-copy { max-width: 830px; }
    .eyebrow { margin: 0 0 30px; font-size: 14px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
    h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(72px, 7.8vw, 132px); font-weight: 400; letter-spacing: -.055em; line-height: 1.04; }
    h1 span { display: block; }
    h1 em { font-weight: 400; }
    .introduction { max-width: 420px; margin: 30px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
    .work-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; min-height: 54px; margin-top: 35px; padding: 0 23px; background: var(--paper); color: #151815; border: 1px solid var(--paper); border-radius: 3px; font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
    .work-link:hover { background: #101110; color: var(--paper); }
    .site-footer { padding: 80px 5.3% 0; background: #0b0c0b; border-top: 1px solid var(--line); }
    .contact-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; padding-bottom: 65px; border-bottom: 1px solid var(--line); }
    .footer-label { margin: 0 0 20px; color: #a6aba2; font-size: 14px; font-weight: 400; }
    .contact-intro h2 { max-width: 620px; margin: 0; font: 400 clamp(42px, 4.7vw, 76px)/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -.045em; }
    .contact-details { align-self: end; max-width: 420px; }
    .contact-details p { margin: 0 0 24px; color: var(--muted); font-size: 17px; line-height: 1.7; }
    .social-links { display: flex; flex-wrap: wrap; gap: 12px; }
    .social-link { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #ffffff70; }
    a.social-link:hover { text-decoration-color: #fff; }
    .social-link svg { width: 20px; height: 20px; flex-shrink: 0; }
    button.social-link { background: transparent; color: inherit; font-family: inherit; }
    .sample-contact { display: grid; gap: 8px; margin-top: 24px; color: var(--muted); font-size: 15px; line-height: 1.5; }
    .contact-details .contact-note { margin: 12px 0 0; color: #a6aba2; font-size: 13px; }
    .footer-columns { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: 60px; padding: 54px 0; }
    .footer-brand .brand img { width: 68px; height: 68px; }
    .footer-brand p { max-width: 250px; margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
    .footer-columns h3 { margin: 0 0 20px; color: #a6aba2; font-size: 14px; font-weight: 400; }
    .footer-columns ul { list-style: none; margin: 0; padding: 0; }
    .footer-columns li { margin: 0 0 12px; font-size: 16px; line-height: 1.45; }
    .footer-location { margin: 0; font-size: 16px; line-height: 1.7; }
    .footer-work { display: inline-block; margin-top: 14px; padding: 10px 0; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); color: #a6aba2; font-size: 13px; line-height: 1.5; }
    .footer-bottom p { margin: 0; }
    @media (min-width: 1700px) {
      .photo-wall { inset-block-start: -350px; }
      .photo-column { height: 1735px; }
      .photo-column img { height: 440px; }
      .photo-column img.wide { height: 330px; }
    }
    @media (max-width: 900px) {
      .hero { min-height: max(760px, 100svh); }
      .photo-wall { left: 20%; opacity: .8; }
      .hero::before { background: linear-gradient(90deg, #101110f2 0%, #101110cf 38%, #10111052 100%); }
      .navigation { gap: 26px; }
      h1 { font-size: clamp(66px, 10.4vw, 94px); }
      .hero-main { padding-top: 90px; }
    }
    @media (max-width: 600px) {
      .hero { min-height: max(760px, 100svh); }
      .site-header { margin-inline: 6%; padding-block: 20px; gap: 16px; }
      .brand { gap: 8px; }
      .brand img { width: 42px; height: 42px; }
      .brand-name { font-size: 14px; }
      .brand-name span { font-size: 9px; }
      .navigation { gap: 20px; font-size: 14px; }
      .photo-wall { inset: -220px -440px -120px -12%; opacity: .68; }
      .photo-grid { width: 850px; gap: 12px; transform: perspective(1600px) rotateY(-12deg) rotateZ(13deg); }
      .photo-column { height: 1221px; --photo-gap: 12px; --half-photo-gap: 6px; }
      .photo-column img { height: 305px; }
      .photo-column img.wide { height: 220px; }
      .hero::before { background: linear-gradient(90deg, #101110b8, #10111099 60%, #10111052); }
      .hero::after { background: linear-gradient(180deg, #101110 0%, #101110f5 64px, #101110b8 100px, #10111038 30%, #1011107a 62%, #101110 96%); }
      .hero-main { align-items: flex-end; padding: 120px 6% 65px; }
      .eyebrow { margin-bottom: 25px; font-size: 12px; letter-spacing: .14em; }
      h1 { font-size: clamp(54px, 13.8vw, 82px); line-height: 1.09; letter-spacing: -.055em; }
      .introduction { max-width: 340px; font-size: 16px; margin-top: 25px; }
      .work-link { margin-top: 28px; }
      .site-footer { padding: 54px 6% 0; }
      .contact-intro { grid-template-columns: 1fr; gap: 30px; padding-bottom: 38px; }
      .contact-intro h2 { font-size: 46px; }
      .footer-columns { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-block: 38px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-brand p { max-width: 320px; }
      .footer-columns li, .footer-location { font-size: 15px; }
      .footer-bottom { flex-direction: column; gap: 8px; }
      h1 { font-size: clamp(48px, 12.5vw, 75px); }

    }
    @media (prefers-reduced-motion: reduce) { .work-link { transition: none; } }
  
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible { outline: 2px solid var(--paper); outline-offset: 5px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.client-section { padding: 65px 5.3% 75px; text-align: center; }
.client-section .footer-label { margin-bottom: 38px; }
.client-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 32px 44px; max-width: 1160px; margin: 0 auto; }
.client-logo { display: flex; align-items: center; justify-content: center; min-width: 0; height: 84px; }
.client-logo img { display: block; width: auto; height: auto; max-width: min(190px, 100%); max-height: 72px; opacity: .82; }
.client-logo .logo-on-paper { filter: grayscale(1) brightness(1.08) invert(1); mix-blend-mode: screen; }
.client-logo .fortress-logo { max-height: 84px; }
.client-logo-pending { color: #d5d7d0; font-size: 20px; }
.selected-work { background: #000; padding: 40px 0 0; overflow: hidden; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin: 0 5.3%; padding-top: 20px; }
.section-heading h2 { font-size: 14px; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; }
.section-heading > span { color: #9d9f98; font-size: 14px; }
.reel-stage { position: relative; height: clamp(560px, 58vw, 940px); isolation: isolate; }
#gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.project-caption { position: absolute; z-index: 2; top: 5%; left: 10%; right: 10%; text-align: center; transition: opacity .35s, transform .55s, filter .35s; }
.project-caption h3 { margin: 0 0 15px; font: 400 clamp(34px, 4.9vw, 78px)/1.08 Georgia, serif; letter-spacing: -.04em; text-wrap: balance; }
.project-caption p { margin: 0; font-size: 16px; color: #c1c3bc; }
.project-caption a { display: inline-block; padding: 8px 4px; text-decoration: underline; text-underline-offset: 5px; color: var(--paper); }
.reel-controls { position: absolute; z-index: 3; bottom: 7%; left: 5.3%; right: 5.3%; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.reel-arrow { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #ffffff42; border-radius: 3px; background: #0b0c0b; color: white; transition: background .2s, border-color .2s; }
.reel-arrow:hover { background: #20221f; border-color: #ffffffa1; }
.reel-arrow svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.reel-dot { display: grid; place-items: center; width: 30px; height: 44px; border: 0; padding: 0; color: #858a83; background: transparent; }
.reel-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.reel-dot[aria-current="true"] { color: var(--paper); }
.reel-dot[aria-current="true"]::before { outline: 1px solid currentColor; outline-offset: 5px; }
.reel-fallback { position: absolute; inset: 25% 20% 22%; }
.reel-fallback img { width: 100%; height: 100%; object-fit: cover; }
.reel-stage.has-film .reel-fallback { visibility: hidden; }
.work-bottom { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 0 5.3% 55px; }
.work-bottom .work-link { margin: 0; min-width: 180px; justify-content: center; font-size: 16px; }
.text-link { display: inline-block; padding: 12px 0; background: transparent; color: var(--paper); border: 0; border-bottom: 1px solid #ffffff7d; font-size: 16px; }
.text-link:hover { border-color: #fff; }
.enquiry-section { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; padding: 120px 5.3%; }
.enquiry-intro h2 { margin: 0; font: 400 clamp(40px, 5vw, 76px)/1.1 Georgia, serif; letter-spacing: -.045em; }
.enquiry-intro > p:not(.eyebrow) { max-width: 340px; margin: 26px 0 20px; font-size: 17px; line-height: 1.7; color: var(--muted); }
#enquiry-form { display: grid; gap: 25px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
#enquiry-form label { display: block; font-size: 14px; line-height: 1.5; }
#enquiry-form input, #enquiry-form select, #enquiry-form textarea { display: block; width: 100%; min-width: 0; margin-top: 10px; padding: 14px 0; border: 0; border-bottom: 1px solid #ffffff45; border-radius: 0; background: transparent; color: var(--paper); font-size: 16px; }
#enquiry-form select { background: #101110; }
#enquiry-form textarea { resize: vertical; min-height: 110px; }
#enquiry-form ::placeholder { color: #8d9389; opacity: 1; }
#enquiry-form .work-link { justify-self: start; margin-top: 2px; }
.optional, .form-status { color: #9ca296; font-size: 13px; line-height: 1.6; }
.form-status { margin: 0; }
.site-footer { padding-top: 12px; }
.footer-columns { grid-template-columns: 1.2fr .85fr 1fr; gap: 35px; }
.whatsapp-button { position: fixed; z-index: 8; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: #25d366; color: #fff; transition: transform .15s; animation: whatsapp-pulse 2s ease-in-out infinite; }
.whatsapp-button:hover { transform: scale(1.1); }
.whatsapp-button:active { transform: scale(.95); }
.whatsapp-button svg { display: block; width: 28px; height: 28px; fill: #fff; }
.whatsapp-dialog { max-width: min(440px, calc(100% - 40px)); padding: 44px 30px 32px; border: 1px solid var(--line); background: #171a16; color: var(--paper); border-radius: 5px; }
.whatsapp-dialog::backdrop { background: #000b; }
.whatsapp-dialog h2 { margin: 0 0 20px; font: 400 32px Georgia, serif; }
.whatsapp-dialog p { line-height: 1.65; color: var(--muted); }
.whatsapp-dialog .work-link { margin-top: 12px; }
.dialog-close { position: absolute; right: 8px; top: 6px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--paper); font-size: 30px; }
.footer-bottom { padding-right: 65px; }
.project-main { padding: 85px 5.3% 100px; }
.page-intro { max-width: 860px; margin-bottom: 65px; }
.page-intro h1 { font-size: clamp(56px, 8vw, 112px); }
.page-intro p:not(.eyebrow) { max-width: 530px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.portfolio-main { max-width: 1440px; margin-inline: auto; padding: 64px 5.3% 80px; }
.work-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 64px; }
.work-intro { position: sticky; top: 32px; align-self: start; }
.work-intro .eyebrow { margin-bottom: 20px; font-size: 10px; letter-spacing: .12em; }
.work-intro h1 { font-size: 62px; letter-spacing: -.05em; }
.work-intro > p:not(.eyebrow) { margin: 22px 0 0; max-width: 240px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.work-filters { display: grid; gap: 5px; margin-top: 38px; }
.work-filters button { display: flex; justify-content: space-between; gap: 16px; min-height: 44px; padding: 12px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: #a6aba2; text-align: left; }
.work-filters button[aria-pressed="true"] { border-bottom-color: var(--paper); color: var(--paper); }
.work-filters button:hover { color: var(--paper); }
.work-collection { min-width: 0; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.project-card { min-width: 0; }
.project-card[hidden] { display: none; }
.project-cover { position: relative; overflow: hidden; background: #20231f; }
.project-card img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; object-position: center 40%; transition: transform .45s, filter .45s; }
.project-card:hover img, .project-card:focus-visible img { transform: scale(1.035); filter: brightness(.85); }
.project-cover-link { position: absolute; right: 14px; bottom: 14px; padding: 10px 14px; background: var(--paper); color: #101110; font-size: 12px; opacity: 0; transition: opacity .25s; }
.project-card:hover .project-cover-link, .project-card:focus-visible .project-cover-link { opacity: 1; }
.project-card-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 18px; color: #a6aba2; font-size: 11px; line-height: 1.4; }
.project-card h2 { margin: 10px 0 6px; font: 400 26px/1.2 Georgia, serif; letter-spacing: -.025em; }
.project-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.work-enquiry { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 18px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); }
.work-enquiry p { margin: 0; font: 400 24px/1.3 Georgia, serif; }
.work-enquiry a { padding-block: 10px; font-size: 14px; text-decoration: underline; text-underline-offset: 6px; }
.work-page .navigation [aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project-gallery img { display: block; width: 100%; height: auto; align-self: center; }
.project-gallery img:first-child { grid-column: 1 / -1; max-height: 85vh; object-fit: cover; }
.project-enquiry { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 80px; padding-top: 35px; border-top: 1px solid var(--line); }
.project-enquiry h2 { margin: 0; font: 400 clamp(32px, 4vw, 48px) Georgia, serif; }
.project-enquiry .work-link { margin: 0; }
@media (max-width: 900px) {
  .work-layout { grid-template-columns: 1fr; gap: 34px; }
  .work-intro { position: static; }
  .work-intro h1 { font-size: 54px; }
  .work-intro > p:not(.eyebrow) { max-width: 420px; margin-top: 15px; }
  .work-filters { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 26px; }
  .work-filters button { gap: 12px; font-size: 14px; }
  .enquiry-section { gap: 6%; }
  .form-row { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .client-section { padding: 45px 6%; }
  .client-logos { grid-template-columns: 1fr 1fr; gap: 24px; }
  .client-logo { height: 70px; }
  .client-logo img { max-width: min(150px, 100%); max-height: 60px; }
  .client-logo .fortress-logo { max-height: 70px; }
  .client-logo-pending { font-size: 17px; }
  .section-heading { margin-inline: 6%; }
  .section-heading > span { display: none; }
  .reel-stage { height: 420px; }
  .project-caption { top: 5%; left: 6%; right: 6%; }
  .project-caption h3 { font-size: clamp(28px, 7.5vw, 38px); }
  .project-caption p { font-size: 14px; }
  .reel-controls { bottom: 4%; left: 6%; right: 6%; }
  .reel-arrow { width: 48px; height: 48px; }
  .reel-arrow svg { width: 24px; height: 24px; }
  .reel-dot { width: 22px; }
  .work-bottom { align-items: flex-start; padding: 16px 6% 45px; }
  .enquiry-section { grid-template-columns: 1fr; padding: 65px 6%; gap: 45px; }
  .enquiry-intro h2 { font-size: 46px; }
  .enquiry-intro .eyebrow { font-size: 13px; }
  .footer-columns { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .portfolio-main, .project-main { padding: 55px 6% 65px; }
  .portfolio-main { padding-top: 36px; }
  .work-intro h1 { font-size: 48px; }
  .work-enquiry { margin-top: 36px; }
  .page-intro { margin-bottom: 40px; }
  .portfolio-grid, .project-gallery { grid-template-columns: 1fr; }
  .project-gallery { gap: 16px; }
  .project-enquiry { margin-top: 55px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .project-caption, .project-card img { transition: none; }
}
#gl { opacity: 0; }
.reel-stage.has-film #gl { opacity: 1; }

@media (min-width: 901px) {
  .selected-work { padding-top: 12px; }
  .selected-work .section-heading { min-height: 40px; padding-top: 0; align-items: center; }
  .selected-work .section-heading h2 { margin: 0; }
  .reel-stage { height: clamp(480px, calc(100svh - 76px), 980px); }
  .project-caption { top: calc(13% - 40px); }
  .project-caption h3 { margin-bottom: 8px; font-size: clamp(34px, 3.5vw, 56px); }
  .work-bottom { min-height: 78px; padding-bottom: 24px; }
}

@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgb(0 0 0 / 15%), 0 0 0 0 rgb(37 211 102 / 40%); }
  50% { box-shadow: 0 4px 20px rgb(0 0 0 / 15%), 0 0 0 12px rgb(37 211 102 / 0%); }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-button { animation: none; transition: none; }
}

#enquiry-form input:focus, #enquiry-form select:focus, #enquiry-form textarea:focus {
  outline: none;
  border-bottom-color: var(--paper);
}