@font-face { font-family:Ubuntu; font-style:normal; font-weight:400; font-display:swap; src:url('ubuntu-regular.ttf') format('truetype'); }
@font-face { font-family:Ubuntu; font-style:normal; font-weight:500; font-display:swap; src:url('ubuntu-medium.ttf') format('truetype'); }
@font-face { font-family:Ubuntu; font-style:normal; font-weight:700; font-display:swap; src:url('ubuntu-bold.ttf') format('truetype'); }
:root { --indigo:#282460; --amber:#fbaf42; --ink:#22212b; --muted:#575662; --line:#e6e5eb; --soft:#f6f6f9; --white:#fff; --text-body:19px; --text-control:17px; --text-small:15px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:26px; }
body { margin:0; color:var(--ink); background:var(--white); font-family:Ubuntu,Arial,sans-serif; font-size:var(--text-body); font-weight:400; line-height:1.65; letter-spacing:0; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button,summary,a { touch-action:manipulation; }
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:3px solid #a86400; outline-offset:5px; }
svg { width:20px; height:20px; stroke-width:1.7; flex-shrink:0; vertical-align:middle; }
img { display:block; max-width:100%; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { line-height:1.12; font-weight:500; }
h1 { font-size:66px; }
h2 { color:var(--indigo); font-size:42px; }
h3 { font-size:22px; color:var(--indigo); }
.wrap { width:min(1280px,calc(100% - 96px)); margin-inline:auto; }
.section { padding-block:90px; }
.eyebrow { font-size:var(--text-small); font-weight:700; line-height:1.5; margin-bottom:18px; }
.button { display:inline-flex; gap:22px; justify-content:center; align-items:center; min-height:54px; padding:14px 24px; border:1px solid var(--amber); border-radius:4px; background:var(--amber); color:var(--indigo); font-weight:700; font-size:var(--text-control); transition:background .18s,box-shadow .18s; }
.button:hover { background:#ffc36a; box-shadow:0 3px 12px #15132912; }
.button-small { min-height:44px; padding:9px 17px; }
.site-header { background:#fff; }
.header-inner { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--indigo); font-family:Ubuntu,Arial,sans-serif; font-size:23px; font-weight:700; line-height:1.1; flex-shrink:0; }
.brand img { width:48px; height:48px; border-radius:2px; }
.brand-location { display:block; margin-top:6px; font-size:14px; font-weight:400; }
nav { display:flex; gap:32px; align-items:center; font-size:var(--text-control); }
nav>a:not(.button):hover { color:#a86400; }
.hero { min-height:530px; height:min(680px,calc(100svh - 190px)); position:relative; isolation:isolate; display:flex; align-items:center; color:white; }
.hero-images { position:absolute; inset:0; overflow:hidden; z-index:-2; }
.hero-track { display:flex; height:100%; transition:transform 850ms cubic-bezier(.25,.6,.25,1); }
.hero-track.is-resetting { transition:none; }
.hero-image { flex:0 0 100%; min-width:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,17,25,.72),rgba(18,17,25,.3) 58%,rgba(18,17,25,0) 90%); z-index:-1; }
.hero .eyebrow { color:var(--amber); }
.hero h1 { max-width:850px; }
.hero-description { margin-top:22px; max-width:680px; font-size:20px; line-height:1.65; color:#fff; }
.hero-actions { display:flex; gap:30px; align-items:center; flex-wrap:wrap; margin-top:32px; }
.hero-work { display:flex; align-items:center; gap:14px; font-size:var(--text-control); }
.hero-work:hover { color:var(--amber); }
.hero-footer { position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:flex-end; align-items:center; }
.hero-credit { font-size:var(--text-small); color:#fff; text-shadow:0 1px 4px #000; }
.intro-strip { border-bottom:1px solid var(--line); }
.intro-strip .wrap { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:86px; font-size:var(--text-control); }
.intro-strip p { color:var(--indigo); font-weight:500; }
.intro-strip span { color:var(--muted); }
.intro-strip b { padding-inline:9px; color:#ba7100; font-weight:400; }
.section-heading { display:flex; justify-content:space-between; gap:36px; align-items:flex-end; margin-bottom:32px; }
.section-heading>p { max-width:440px; font-size:var(--text-body); color:var(--muted); }
.filters { display:flex; gap:28px; overflow-x:auto; padding-block:0 2px; border-bottom:1px solid var(--line); margin-bottom:30px; scrollbar-width:thin; }
.filters button { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); padding:14px 0; font-size:var(--text-control); white-space:nowrap; }
.filters button[aria-selected="true"] { color:var(--indigo); border-color:var(--amber); font-weight:700; }
.filters button:hover { color:var(--indigo); }
.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.photo-button { padding:0; margin:0; border:0; border-radius:4px; background:var(--soft); overflow:hidden; width:100%; position:relative; }
.photo-button img { width:100%; height:auto; transition:opacity .18s; }
.photo-button:hover img { opacity:.92; }
.photo-button .expand { position:absolute; bottom:12px; right:12px; background:#ffffffed; color:var(--indigo); width:34px; height:34px; display:grid; place-items:center; border-radius:3px; opacity:0; transition:opacity .18s; }
.photo-button:hover .expand,.photo-button:focus-visible .expand { opacity:1; }
.gallery-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; font-size:var(--text-small); color:var(--muted); }
.text-link { display:inline-flex; align-items:center; gap:15px; padding:8px 0; background:none; border:0; color:var(--indigo); font-size:var(--text-control); font-weight:700; text-align:left; }
.text-link:hover { color:#965800; }
.services { background:var(--soft); }
.services-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:100px; }
.services-intro>p:not(.eyebrow) { color:var(--muted); font-size:var(--text-body); margin-top:24px; max-width:430px; }
.services-intro>.text-link { margin-top:26px; }
.service-list>a { display:flex; align-items:flex-start; gap:22px; border-top:1px solid #dcdbe4; padding:27px 0; }
.service-list>a:last-child { padding-bottom:0; }
.service-number { color:#795918; font-size:var(--text-small); padding-top:5px; }
.service-list h3 { font-size:22px; }
.service-list p { color:var(--muted); font-size:var(--text-body); margin-top:12px; }
.service-list svg { margin-left:auto; color:var(--indigo); }
.service-list>a:hover h3 { text-decoration:underline; text-decoration-color:var(--amber); text-underline-offset:5px; }
.steps { padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; margin:42px 0 0; }
.steps li { border-top:1px solid var(--line); padding-top:22px; }
.steps span { font-size:var(--text-small); color:#795918; font-weight:700; }
.steps h3 { margin-top:16px; font-size:22px; }
.steps p { margin-top:14px; font-size:var(--text-body); color:var(--muted); }
.related { padding-top:24px; }
.related-layout { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:80px; }
.related img { width:100%; height:auto; border-radius:4px; }
.related p:not(.eyebrow) { font-size:var(--text-body); color:var(--muted); margin:24px 0; max-width:430px; }
.related .text-link { display:flex; width:fit-content; }
.faq { border-top:1px solid var(--line); }
.faq-layout { display:grid; grid-template-columns:1fr 1.25fr; gap:90px; }
details { border-bottom:1px solid var(--line); }
details:first-child { border-top:1px solid var(--line); }
summary { display:flex; align-items:center; justify-content:space-between; gap:22px; cursor:pointer; padding-block:23px; list-style:none; font-size:var(--text-body); color:var(--indigo); }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; font-size:24px; line-height:1; font-weight:400; }
details[open] summary::after { content:'-'; }
details p { color:var(--muted); font-size:var(--text-body); max-width:560px; padding:0 20px 24px 0; }
.enquire { background:var(--indigo); color:#fff; }
.enquiry-layout { display:flex; align-items:center; justify-content:space-between; gap:50px; }
.enquire .eyebrow { color:var(--amber); }
.enquire h2 { color:#fff; font-size:46px; }
.enquire p:not(.eyebrow) { color:#e2e0f0; margin-top:22px; font-size:var(--text-body); }
.enquiry-actions { display:flex; flex-direction:column; align-items:center; gap:19px; }
.phone { display:flex; align-items:center; gap:10px; font-size:var(--text-body); }
.phone:hover { color:var(--amber); }
.enquiry-actions>span { color:#dedbeb; font-size:var(--text-small); }
footer { padding-block:28px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:var(--text-small); color:var(--muted); }
footer .brand { font-size:19px; }
footer .brand img { width:36px; height:36px; }
footer a:last-child { color:var(--indigo); display:flex; align-items:center; gap:10px; }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link:focus { position:fixed; top:8px; left:8px; padding:10px; background:white; z-index:20; }
[hidden] { display:none!important; }
dialog { border:0; background:#15141b; color:white; width:100%; max-width:100%; height:100%; max-height:100%; padding:0; margin:0; }
dialog::backdrop { background:#15141bf2; }
.viewer-top { height:70px; padding:10px 28px; display:flex; align-items:center; justify-content:space-between; font-size:var(--text-control); }
.icon-button { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; background:#ffffff12; color:white; border:1px solid #ffffff36; border-radius:4px; }
.icon-button:hover { background:#ffffff28; }
.viewer-stage { height:calc(100% - 90px); display:grid; grid-template-columns:60px minmax(0,1fr) 60px; gap:15px; align-items:center; padding:0 25px 20px; }
.viewer-stage img { width:100%; height:100%; object-fit:contain; min-height:0; }
body:has(dialog[open]) { overflow:hidden; }
@media(min-width:1700px) { .hero-content { padding-bottom:10px; } }
@media(max-width:1000px) { .wrap { width:calc(100% - 56px); } h1 { font-size:54px; } h2 { font-size:35px; } .section { padding-block:68px; } .intro-strip .wrap { align-items:flex-start; flex-direction:column; gap:4px; justify-content:center; padding-block:18px; } .services-layout,.faq-layout { gap:45px; } .related-layout { gap:40px; } .steps { gap:25px; } .enquire h2 { font-size:38px; } .hero-credit { right:28px; } }
@media(max-width:640px) { .wrap { width:calc(100% - 40px); } .section { padding-block:50px; } .header-inner { min-height:84px; gap:12px; } .brand { gap:9px; font-size:22px; } .brand img { width:36px; height:36px; } .brand-location { margin-top:4px; } nav { gap:18px; } nav .nav-work,nav .nav-details { display:none; } .hero { min-height:570px; height:calc(100svh - 184px); max-height:650px; align-items:flex-end; padding:40px 0 70px; } .hero-image { object-position:60% 50%; } .hero-shade { background:linear-gradient(0deg,rgba(18,17,25,.82),rgba(18,17,25,.2) 85%); } h1 { font-size:40px; } h2 { font-size:32px; } .hero-description { font-size:var(--text-body); margin-top:18px; max-width:350px; } .desktop-break { display:none; } .hero-actions { gap:22px; margin-top:25px; } .button { min-height:50px; padding:12px 18px; gap:18px; } .button-small { min-height:44px; padding:8px 10px; gap:8px; font-size:var(--text-small); } .hero-credit { left:20px; right:20px; bottom:17px; } .intro-strip .wrap { align-items:flex-start; } .intro-strip b { padding-inline:4px; } .section-heading { flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:24px; } .filters { gap:24px; margin-bottom:20px; } .gallery { grid-template-columns:1fr; gap:16px; } .photo-button .expand { opacity:1; width:30px; height:30px; } .gallery-footer { align-items:flex-start; flex-direction:column; gap:10px; margin-top:20px; } .services-layout,.faq-layout,.related-layout { grid-template-columns:1fr; gap:32px; } .services-intro>p:not(.eyebrow) { margin-top:20px; } .service-list>a { padding-block:23px; gap:16px; } .service-list h3 { font-size:21px; } .steps { grid-template-columns:1fr; margin-top:8px; gap:26px; } .steps h3 { margin-top:10px; } .steps p { margin-top:10px; } .related { padding-top:12px; } .related-layout { gap:30px; } .enquiry-layout { flex-direction:column; align-items:flex-start; gap:30px; } .enquire h2 { font-size:36px; } .enquiry-actions { align-items:flex-start; gap:18px; } .enquiry-actions .button { min-width:240px; } .footer-inner { flex-wrap:wrap; gap:20px; } .footer-inner>span { order:3; flex-basis:100%; border-top:1px solid var(--line); padding-top:18px; } .viewer-top { padding-inline:16px; } .viewer-stage { grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) 44px; gap:16px; padding-inline:12px; } .viewer-stage img { grid-row:1; grid-column:1/-1; } .viewer-prev { grid-row:2; justify-self:end; } .viewer-next { grid-row:2; justify-self:start; } }
@media(max-width:380px) {
  .hero { height:auto; max-height:none; padding-top:52px; }
  .header-inner { gap:8px; }
  .brand { font-size:20px; }
  nav .button-small { gap:6px; padding-inline:8px; }
}
@media(max-width:640px) {
  .hero { height:auto; min-height:650px; max-height:none; padding:52px 0 90px; background:linear-gradient(180deg,#161426 0%,#282460 100%); }
  /* Keep the fade tied to the photo's height, not the taller text area. */
  .hero-images {
    --hero-edge-fade:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.9) 65%,rgba(0,0,0,.6) 78%,rgba(0,0,0,.25) 90%,transparent 100%);
    bottom:auto;
    height:auto;
    aspect-ratio:1600 / 1067;
    -webkit-mask-image:var(--hero-edge-fade);
    mask-image:var(--hero-edge-fade);
  }
  .hero-image { object-fit:contain; object-position:center top; }
  .hero-shade { background:linear-gradient(180deg,rgba(22,20,38,.06) 0%,rgba(22,20,38,.16) 20%,rgba(22,20,38,.78) 50%,rgba(12,11,20,.9) 100%); }
  .hero-footer { justify-content:flex-start; }
  .hero-credit { line-height:1.4; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

.footer-services { display:flex; flex-wrap:wrap; gap:12px 24px; padding-top:24px; margin-top:24px; border-top:1px solid var(--line); color:var(--indigo); font-size:15px; }
.footer-services a:hover { text-decoration:underline; text-underline-offset:4px; }