:root { --white:#f6f5f2; --line:rgba(255,255,255,.24); --ink:#0b0c0c; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; color:var(--white); background:var(--ink); font-family:"Manrope",Arial,sans-serif; } .page-shell { overflow:hidden; }
.hero { position:relative; isolation:isolate; display:flex; min-height:100svh; flex-direction:column; overflow:hidden; background:#121313; } .hero__video,.hero__shade { position:absolute; inset:0; width:100%; height:100%; } .hero__video { z-index:-3; object-fit:cover; filter:saturate(.62) contrast(1.1) brightness(.64); } .hero__shade { z-index:-2; background:linear-gradient(90deg,rgba(4,5,5,.86),rgba(5,6,6,.47) 44%,rgba(5,6,6,.12)),linear-gradient(0deg,rgba(4,5,5,.75),transparent 38%,rgba(4,5,5,.32)); }
.site-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem; width:100%; padding:27px clamp(1.5rem,4.3vw,5.25rem); border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:.7rem; width:max-content; color:var(--white); font-size:.7rem; font-weight:700; letter-spacing:.19em; text-decoration:none; } .brand__mark { position:relative; display:inline-block; width:26px; height:26px; border:1px solid #e9e9e4; border-radius:50%; } .brand__mark i { position:absolute; left:50%; bottom:50%; width:1px; height:11px; background:#e9e9e4; transform-origin:bottom; } .brand__mark i:nth-child(1) { transform:rotate(0deg); } .brand__mark i:nth-child(2) { transform:rotate(120deg); } .brand__mark i:nth-child(3) { transform:rotate(240deg); } .header__edition { margin:0; color:rgba(246,245,242,.73); font:500 .61rem/1 "DM Sans",sans-serif; letter-spacing:.17em; text-transform:uppercase; } .header__edition span { display:inline-block; width:3px; height:3px; margin:0 8px 2px; border-radius:50%; background:#d9d9d2; } .header__contact { justify-self:end; color:var(--white); font-size:.69rem; font-weight:600; letter-spacing:.16em; text-decoration:none; text-transform:uppercase; } .header__contact span { margin-left:.45rem; font-size:1rem; }
.hero__content { width:min(700px,calc(100% - 3rem)); margin:auto auto auto clamp(1.5rem,12.5vw,15rem); padding:5.5rem 0 4.2rem; } .eyebrow { margin:0 0 1.5rem; color:#d4d5cf; font:600 .65rem/1 "DM Sans",sans-serif; letter-spacing:.23em; text-transform:uppercase; } h1,h2 { max-width:700px; margin:0; font-size:clamp(3.8rem,7.4vw,7.9rem); font-weight:400; letter-spacing:-.067em; line-height:.91; } h1 em,h2 em { color:#c7cac8; font-family:Georgia,serif; font-weight:400; } .intro { max-width:390px; margin:1.8rem 0 2.3rem; color:#dadbd7; font-size:.95rem; line-height:1.75; }
.cta { display:inline-flex; align-items:center; gap:2.5rem; padding:.98rem 1.05rem 1rem 1.35rem; border:1px solid rgba(246,245,242,.7); border-radius:2px; color:var(--white); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; transition:background .25s ease,color .25s ease; } .cta b { display:grid; width:25px; height:25px; place-items:center; border-radius:50%; color:#171818; background:var(--white); font-size:1rem; font-weight:400; } .cta:hover,.cta:focus-visible { color:#0b0c0c; background:var(--white); } .cta:focus-visible,.header__contact:focus-visible,.brand:focus-visible { outline:2px solid white; outline-offset:5px; }
.hero__footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:1rem; padding:0 clamp(1.5rem,4.3vw,5.25rem) 27px; color:#d1d2ce; font:500 .61rem/1 "DM Sans",sans-serif; letter-spacing:.16em; text-transform:uppercase; } .hero__footer p { margin:0; } .hero__footer p span { display:inline-block; width:55px; margin:0 .75rem 3px; border-top:1px solid rgba(255,255,255,.55); } .sound-toggle { border:0; color:inherit; background:transparent; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; } .sound-icon { display:inline-block; margin-right:5px; font-size:.9rem; transform:rotate(-37deg); } .scroll-prompt { justify-self:end; color:inherit; text-decoration:none; } .scroll-prompt span { margin-left:.5rem; font-size:1rem; }
.experience { display:grid; min-height:62vh; place-content:center; padding:7rem 1.5rem; background:#0a0b0b; text-align:center; } .experience h2 { max-width:820px; font-size:clamp(3rem,6.4vw,6.5rem); } .experience > p:last-child { max-width:450px; margin:1.75rem auto 0; color:#a6a8a6; font-size:.94rem; line-height:1.75; }
@media (max-width:740px) { .site-header { grid-template-columns:1fr auto; padding-top:20px; padding-bottom:20px; } .header__edition { display:none; } .hero__content { margin-left:1.5rem; padding-top:6rem; } .hero__footer { grid-template-columns:1fr auto; padding-bottom:20px; } .sound-toggle { display:none; } .scroll-prompt { font-size:.55rem; } .hero__footer p span { width:28px; margin-right:.4rem; } .hero__shade { background:linear-gradient(90deg,rgba(4,5,5,.78),rgba(5,6,6,.21)),linear-gradient(0deg,rgba(4,5,5,.82),transparent 50%); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .hero__video { display:none; } .cta { transition:none; } }
.hero__actions { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }.lead-link { padding:0; border:0; color:#d4d5cf; background:transparent; font:500 .68rem/1 "DM Sans",sans-serif; letter-spacing:.12em; text-decoration:underline; text-underline-offset:4px; text-transform:uppercase; cursor:pointer; }.lead-link span { margin-left:.4rem; }.lead-link:hover,.lead-link:focus-visible { color:white; }.lead-link:focus-visible { outline:2px solid white; outline-offset:4px; }
.enquiry-modal { position:relative; width:min(550px,calc(100% - 2rem)); margin:auto; padding:clamp(2rem,5vw,4rem); border:1px solid rgba(255,255,255,.2); color:var(--white); background:#111313; box-shadow:0 24px 80px #000; }.enquiry-modal::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(4px); }.enquiry-modal h2 { font-size:clamp(2.8rem,6vw,4.7rem); }.modal-close { position:absolute; top:1.2rem; right:1.4rem; border:0; color:#e7e7e2; background:transparent; font-size:2rem; font-weight:300; cursor:pointer; }.modal-intro { margin:1.3rem 0 2rem; color:#b8bab6; font-size:.94rem; line-height:1.6; }.enquiry-modal form { display:grid; gap:1.05rem; }.enquiry-modal label { display:grid; gap:.48rem; color:#d4d5cf; font:600 .62rem/1 "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; }.enquiry-modal label span { color:#81837f; } .enquiry-modal input,.enquiry-modal textarea { width:100%; padding:.85rem 0; border:0; border-bottom:1px solid #575a57; border-radius:0; outline:0; color:#f6f5f2; background:transparent; font:400 .98rem/1.35 "Manrope",sans-serif; }.enquiry-modal textarea { resize:vertical; }.enquiry-modal input:focus,.enquiry-modal textarea:focus { border-color:#f6f5f2; }.form-submit { display:flex; justify-content:space-between; align-items:center; margin-top:.8rem; padding:1rem 1.1rem; border:1px solid #f6f5f2; color:#111313; background:#f6f5f2; font:700 .68rem/1 "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }.form-submit:hover,.form-submit:focus-visible { color:#f6f5f2; background:transparent; }.form-submit:disabled { cursor:wait; opacity:.55; }.form-status { min-height:1.25rem; margin:0; color:#c8cac5; font-size:.78rem; line-height:1.4; }