/* Homepage: coastal photography and clean type; shared closing styles stay in styles.css. */
.home { --home-gutter: clamp(24px, 5.8vw, 112px); }
.home-shell { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: var(--home-gutter); }
.home a:focus-visible, .home button:focus-visible { outline: 2px solid var(--warm); outline-offset: 6px; }
.home section, .home article { scroll-margin-top: 32px; }
.home-skip { position: absolute; top: 12px; left: var(--home-gutter); z-index: 300; padding: 10px 18px; background: var(--text); color: var(--bg); transform: translateY(-160%); }
.home-skip:focus { transform: none; }
.home .nav { position: absolute; background: transparent; border: 0; backdrop-filter: none; }
.home-hero { position: relative; isolation: isolate; min-height: 720px; height: 100svh; max-height: 1300px; color: white; background: #273443;
  /* Inline preview paints with the text while the full photograph downloads. */
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/2wBDAAsICAoIBwsKCQoNDAsNERwSEQ8PESIZGhQcKSQrKigkJyctMkA3LTA9MCcnOEw5PUNFSElIKzZPVU5GVEBHSEX/2wBDAQwNDREPESESEiFFLicuRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUX/wAARCAAbADADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAgUGBAED/8QALBAAAgEDAgQFAwUAAAAAAAAAAQIDAAQREiEFE1FxBiIxQWEVI4EzcoKRsf/EABgBAQADAQAAAAAAAAAAAAAAAAIAAQME/8QAGxEAAgIDAQAAAAAAAAAAAAAAAAECERIhQTH/2gAMAwEAAhEDEQA/ALU2KRZZLuEqOrYoXngt/wBW6jX+Wf8AKjm8RyMfK5HY0cXGLh8lQ7AepzXRHLpk8eFkjwsuVmVh8NRBoSpzLt+6pVOKTk4dmA+GzXX4o0aMRzHcemRpB/NPYdD6TiPCo20S3kYb2XmetIr3xdwSBmSO2vJ5B7CLAO/Umls/iGSHHMtXRjurMNQPbFYbq5S/sjLKI0CkeUxnOT2oNvjEkiftbpTsdRPXOBWtuJcjzRhAR7tvSWJiFODQQ/euCJPMPmquiUUsF41zA73M3LRt1KbHPQAe1dHFZYQFjY4Hszg57ikFzI+phqOA2AOleGohzg0c2JRKj6/CcpdW6FTuQmw/K5x/VLLyWzOp7QyorHBjbOB2NYYBraLVvhh696r7mKOdCJUVsdRSVyQfD//Z");
  background-size: cover; background-position: center; }
.home-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,17,29,.72), transparent 25%), linear-gradient(0deg, rgba(8,17,29,.7), rgba(8,17,29,.28) 58%, transparent 80%); }
.home-hero-content { position: relative; height: 100%; }
.home-hero-main { padding-top: clamp(230px, 32svh, 440px); }
.home-hero h1 { margin: 0 0 38px; font-family: var(--font-sans); font-size: clamp(58px, 5.55vw, 108px); font-weight: 300; letter-spacing: -.05em; line-height: 1.09; color: white; }
.home-hero h1 span { display: block; }
.home-button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 15px 30px; border-radius: 100px; background: var(--text); color: var(--bg); font-size: 16px; line-height: 1.5; font-weight: 500; transition: background-color .18s ease; }
.home-button:hover { background: white; }
/* The hero CTA is the page's primary action; give it more width than the rest. */
.home-hero .home-button { min-height: 62px; padding: 18px 52px; font-size: 17px; }
/* Desktop keeps the diagonal: the intro is lifted out of the headline stack
   and set against the far corner. It sits after the h1 in source order so that
   below 760px it can simply fall back into the flow — see the mobile block. */
.home-intro { position: absolute; right: var(--home-gutter); bottom: 13%; width: 30%; max-width: 400px; font-size: clamp(18px, 1.4vw, 26px); letter-spacing: -.025em; line-height: 1.5; color: rgba(255,255,255,.76); }
.home-intro::before { content: ""; display: block; width: 52px; height: 1px; margin-bottom: 20px; background: rgba(255,255,255,.42); }
.home-label { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.home-offers { padding-block: 76px 86px; }
.home-offer-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; }
.home-offer { padding-right: 15%; }
.home-offer + .home-offer { padding-left: 15%; padding-right: 0; border-left: 1px solid var(--hairline); }
.home-offer h3, .home-veloci h3 { font-family: var(--font-sans); font-size: clamp(30px, 2.8vw, 46px); line-height: 1.15; letter-spacing: -.04em; font-weight: 300; }
.home-offer p { max-width: 420px; margin-top: 24px; font-size: 17px; line-height: 1.6; }
.home-link { display: inline-block; margin-top: 12px; padding-top: 16px; padding-bottom: 5px; border-bottom: 1px solid var(--warm); font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: var(--warm); }
.home-link:hover { color: var(--text); }
.home-veloci { padding-block: 80px 90px; background: var(--paper); color: var(--paper-text); }
/* The claim is the display line; Veloci is the name under the label. */
.home-veloci-grid { display: grid; grid-template-columns: 1fr; }
.home-veloci .home-label { color: var(--paper-body); }
.home-veloci h2 { margin-top: 6px; font-family: var(--font-sans); font-size: clamp(26px, 2vw, 34px); line-height: 1.2; letter-spacing: -.03em; font-weight: 400; color: var(--paper-text); }
.home-veloci-copy { padding-top: 26px; max-width: 760px; }
.home-veloci h3 { color: var(--paper-text); font-size: clamp(40px, 4.6vw, 72px); line-height: 1.05; letter-spacing: -.05em; font-weight: 200; }
.home-veloci-copy p { max-width: 420px; }
.home-veloci-copy p { margin-top: 40px; font-size: 17px; line-height: 1.6; }
.home-button-dark { margin-top: 26px; background: var(--bg); color: var(--text); }
.home-button-dark:hover { background: var(--oxblood); }
.home-veloci a:focus-visible { outline-color: var(--oxblood); }
.home-team { padding-block: 76px 86px; }
.home-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); margin-top: 48px; }
.home-person { max-width: 460px; }
.home-person-photo { position: relative; display: block; width: 140px; height: 140px;
  margin-bottom: 28px; border-radius: 50%; overflow: hidden;
  /* Toby's shot carries its own near-black ground; the disc matches it. */
  background: #0c0d10; }
/* Dino's portrait is a cut-out from a white-backdrop shoot, so the disc
   carries that white through. */
.home-person-photo-cutout { background: #fff; }
.home-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-person h3 { font-family: var(--font-sans); font-size: clamp(26px, 2.2vw, 34px); line-height: 1.15; letter-spacing: -.04em; font-weight: 300; }
.home-person-role { margin-top: 8px; font-size: 15px; color: var(--warm); }
.home-person p:not(.home-person-role) { margin-top: 20px; font-size: 17px; line-height: 1.6; }
/* The closing CTA ships centred for the rest of the site, which is built on a
   centred column. The homepage is built on one hard left edge, so it adopts the
   same shell, gutter and single-rule eyebrow as every block above it. */
.home .final-cta { text-align: left; padding-block: 96px 104px; }
.home .final-cta::before { background: radial-gradient(ellipse 46% 60% at 18% 100%, rgba(124,195,244,.07), transparent 70%); }
.home .final-cta .container { max-width: 1920px; padding-inline: var(--home-gutter); }
.home .final-cta-inner { max-width: 900px; margin: 0; }
.home .final-cta-eyebrow { gap: 16px; margin-bottom: 26px; }
.home .final-cta-eyebrow::after { display: none; }
.home .final-cta-eyebrow::before { width: 52px; }
.home .final-cta h2 { margin: 0 0 22px; max-width: 16ch; }
.home .final-cta-sub { margin: 0 0 40px; }
.home .final-cta-actions { display: flex; justify-content: flex-start; }
@media (max-width: 1000px) {
  .home-intro { width: 31%; font-size: 17px; bottom: 10%; }
}
@media (max-width: 760px) {
  .home-hero { min-height: 760px; max-height: none; background-position: 63% center; }
  .home-hero-image { object-position: 63% center; }
  .home-hero-main { padding-top: 32svh; }
  .home-hero h1 { font-size: clamp(38px, 6.8vw, 52px); letter-spacing: -.05em; margin-bottom: 28px; }
  /* Vertical stack on mobile: the diagonal only orphans the line at the foot
     of a screen of photography. Back in the flow, under the claim it supports. */
  .home-intro { position: static; right: auto; bottom: auto; width: auto; max-width: 34ch; margin: -6px 0 30px; font-size: 18px; }
  .home-intro::before { width: 40px; margin-bottom: 18px; }
  .home-button { font-size: 15px; min-height: 52px; padding: 14px 25px; }
  .home-hero .home-button { min-height: 58px; padding: 16px 40px; font-size: 16px; }
  .home-offers { padding-block: 58px 62px; }
  .home-offer-grid { grid-template-columns: 1fr; margin-top: 34px; gap: 36px; }
  .home-offer { padding: 0; }
  .home-offer + .home-offer { border-left: 0; border-top: 1px solid var(--hairline); padding: 36px 0 0; }
  .home-offer h3 { font-size: 34px; }
  .home-offer p { margin-top: 20px; }
  .home-link { margin-top: 6px; }
  .home-veloci { padding-block: 58px 64px; }
  .home-veloci h2 { font-size: 24px; }
  .home-veloci-copy { padding-top: 20px; }
  .home-veloci h3 { font-size: 38px; }
  .home-veloci-copy p { margin-top: 24px; }
  .home-team { padding-block: 58px 62px; }
  .home-team-grid { grid-template-columns: 1fr; gap: 44px; margin-top: 34px; }
  .home-person-photo { width: 112px; height: 112px; margin-bottom: 22px; }
  .home-person h3 { font-size: 28px; }
}
@media (max-width: 420px) {
  .home-hero h1 { font-size: clamp(33px, 9.75vw, 41px); }
}
@media (prefers-reduced-motion: reduce) {
  .home { scroll-behavior: auto; }
  html:has(.home) { scroll-behavior: auto; }
  .home-button { transition: none; }
}