:root{color-scheme:dark;--bg:#091719;--panel:#12282b;--ink:#f2f5ed;--muted:#bbcdca;--mint:#a8f1d8;--line:#365052;font:16px/1.6 system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink)}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #f0aa70;outline-offset:5px}img{display:block;max-width:100%}p{margin:0 0 1.2rem;color:var(--muted);max-width:62ch}h1,h2,h3{line-height:1.03;margin:0 0 .5em;letter-spacing:-.047em;font-weight:650}h1{font-size:clamp(3.15rem,8.8vw,8rem)}h2{font-size:clamp(2.1rem,4.9vw,4rem)}h3{font-size:clamp(1.35rem,2.5vw,2.1rem)}.wrap{width:min(1200px,calc(100% - 64px));margin-inline:auto}.skip{position:absolute;left:1rem;top:-100px;background:var(--bg);padding:10px;z-index:5}.skip:focus{top:1rem}.header{border-bottom:1px solid var(--line);background:#0a191b}.bar,.brand,nav,.actions,.heading,.call{display:flex;align-items:center}.bar{min-height:82px;justify-content:space-between;gap:20px}.brand{width:max-content;gap:0;font-size:1.28rem;font-weight:750;letter-spacing:.12em;white-space:nowrap}.brand img{width:37px;margin-right:10px}.brand span{color:var(--mint)}nav{gap:clamp(.7rem,2.2vw,2rem);font-size:.93rem}nav a{padding:.4rem 0}nav a:hover,nav a[aria-current]{color:var(--mint);text-decoration:underline;text-underline-offset:7px}.header-cta,.quiet,.arrow{color:var(--mint);font-weight:650}.header-cta{border:1px solid var(--line);padding:.65rem .95rem;border-radius:8px}.hero{position:relative;isolation:isolate;min-height:clamp(560px,72vh,800px);display:grid;align-items:center;background:radial-gradient(ellipse at 80% 60%,#245357,#0a171b 70%);overflow:hidden}.hero>img,.hero:after{position:absolute;inset:0;width:100%;height:100%;z-index:-2;object-fit:cover;object-position:center}.hero:after{content:"";z-index:-1;background:linear-gradient(90deg,#071416 2%,#071416ed 23%,#07141670 59%,#07141625),linear-gradient(0deg,#091719 1%,transparent 32%)}.hero-in{padding-block:74px}.hero p{font-size:clamp(1.06rem,2vw,1.25rem);max-width:42ch;color:#e3eeeb}.hero em{font-family:Georgia,serif;font-weight:400;color:var(--mint)}.eyebrow{display:block;color:var(--mint);text-transform:uppercase;font-size:.77rem;letter-spacing:.18em;font-weight:750;margin-bottom:1rem}.actions{gap:1.5rem;flex-wrap:wrap}.btn{display:inline-block;width:max-content;max-width:100%;background:var(--mint);color:#082425;padding:.85rem 1.3rem;border-radius:8px;font-weight:750}.btn:hover{background:#d6ffef}.quiet:hover,.arrow:hover{text-decoration:underline;text-underline-offset:5px}.section{padding-block:clamp(45px,7vw,104px)}.heading,.call{justify-content:space-between;gap:1.5rem}.heading{margin-bottom:1rem}.cards,.services,.contact,.split,.foot,.steps{display:grid;gap:1.2rem}.cards,.services,.foot{grid-template-columns:repeat(3,minmax(0,1fr))}.cards article,.contact article{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}.cards img{width:100%;aspect-ratio:1.52;object-fit:cover;background:#214649}.cards article>div,.contact article{padding:1.45rem}.cards p{margin:0}.light{background:#ecf2ea;color:#112c2e}.light p{color:#355453}.light .eyebrow{color:#246051}.services article,.steps li{border-top:1px solid #829d94;padding:1.35rem 0}.services{margin-top:2rem}.split,.contact{grid-template-columns:1fr 1fr;align-items:start}.call{padding:clamp(24px,5vw,56px);border:1px solid var(--line);background:linear-gradient(115deg,#183e40,#102528);border-radius:16px;margin-block:0 70px}.call .btn{flex:none}.call p{margin:0}.intro{padding-block:clamp(60px,9vw,130px) 20px}.intro h1{font-size:clamp(3rem,7vw,6rem);max-width:16ch}.intro p{font-size:1.15rem}.contact article{display:grid;gap:12px}.contact ul{padding-left:1.25rem;color:var(--muted)}.steps{grid-template-columns:repeat(4,minmax(0,1fr));padding:0;list-style-position:inside}.steps b{font-size:1.12rem}.steps p{margin-top:.5rem}footer{border-top:1px solid var(--line);padding:48px 0;background:#081214}.foot>div{display:flex;align-items:flex-start;flex-direction:column;gap:8px}.foot p,.foot a:not(.brand){color:var(--muted);margin:0}.foot a:hover{color:var(--mint)}@media(max-width:850px){.header-cta{display:none}.cards,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.wrap{width:calc(100% - 34px)}.bar{align-items:flex-start;flex-direction:column;gap:7px;padding-block:13px}.bar nav{gap:13px;flex-wrap:wrap;font-size:.82rem}.hero{min-height:520px}.hero:after{background:linear-gradient(90deg,#071416ed,#07141680),linear-gradient(0deg,#091719 0%,transparent 50%)}.cards,.services,.contact,.split,.foot{grid-template-columns:1fr}.heading,.call{align-items:flex-start;flex-direction:column}.call{margin-bottom:42px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Blue reef palette and the original identity */
:root{--bg:#f2f7fb;--panel:#fff;--ink:#102b43;--muted:#405971;--mint:#64d6ff;--line:#cfdeea;color-scheme:light}
.header{background:#071a30;color:#f3faff;border-color:#244761}.bar{min-height:93px}.brand{letter-spacing:.15em}.brand .original-logo{width:56px;height:56px;object-fit:contain;border-radius:7px;background:#112e49}.brand .wordmark{color:#fff;line-height:1.05}.brand small{display:block;font-size:.5rem;letter-spacing:.13em;margin-top:5px;color:#c4dceb}.header-cta{border-color:#386280}.hero{color:#f7fbff;min-height:clamp(520px,72vh,740px);background:radial-gradient(ellipse at 75% 50%,#235986,#06152b 75%)}.hero:after{background:linear-gradient(90deg,#06162cf2 4%,#081e37d9 28%,#09274745 72%),linear-gradient(0deg,#06162c88,transparent 50%)}.hero h1{font-size:clamp(3.2rem,7.8vw,7.25rem)}.hero em{font-family:inherit;font-weight:650;font-style:normal}.btn{background:#64d6ff;color:#08243d}.btn:hover{background:#a8ebff}.section .eyebrow,.intro .eyebrow,.arrow{color:#09668c}.light{background:#e2edf6;color:#102b43}.light p{color:#405971}.light .eyebrow{color:#09668c}.services article,.steps li{border-color:#9cb6c9}.cards article,.contact article{box-shadow:0 10px 25px #173d6010}.cards img{background:#d5e7f4}.call{background:linear-gradient(115deg,#102f50,#081c33);color:#f5faff;border-color:#254d70}.call p{color:#c3d8e9}footer{background:#071a30;color:#f3faff;border-color:#244761}.foot p,.foot a:not(.brand){color:#c3d8e9}@media(max-width:600px){.bar{min-height:0}.brand .original-logo{width:44px;height:44px}.hero:after{background:linear-gradient(90deg,#06162cea,#081e3790),linear-gradient(0deg,#06162c80,transparent 65%)}}

/* Reuse the original site's brand-over-menu structure. */
.header .bar{display:grid;grid-template-columns:1fr auto;gap:0;padding-block:22px 0}
.header .brand{font-size:1.75rem;align-self:center;grid-row:1;grid-column:1}
.header .brand small{font-size:.62rem;letter-spacing:.085em;margin-top:7px}
.header .header-cta{grid-row:1;grid-column:2}
.header nav{grid-column:1/-1;border-top:1px solid #2d4d65;margin-top:19px;gap:clamp(14px,4vw,38px);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:650}
.header nav a{padding:13px 0}
.hero{min-height:clamp(485px,62vh,675px)}
.hero:after{background:linear-gradient(90deg,#06162ce8,#081e3790 47%,#09274716 82%)}
@media(max-width:600px){.header .bar{padding-top:15px}.header nav{margin-top:13px;gap:0 15px;letter-spacing:.035em;font-size:.73rem}.header nav a{padding:8px 0}.hero:after{background:linear-gradient(90deg,#06162cea,#081e377a)}}
.header{background:#fff;color:#102b43;border-color:#d3e3ee}.header .brand .reef-brand-image{display:block;width:clamp(205px,29vw,298px);height:auto;margin:0}.header nav{border-color:#cfdeea}.header nav a:hover,.header nav a[aria-current],.header .header-cta{color:#09668c}.header .header-cta{border-color:#bdd9e9}.foot .brand{background:#fff;padding:9px 12px;border-radius:8px}.foot .brand .reef-brand-image{width:175px;height:auto;margin:0}.header .bar{padding-top:17px}

/* Scroll-driven composition, using native sticky positioning. */
.hero-scroll{position:relative;isolation:isolate;display:grid;background:#071a30;color:#f5fbff}
.hero-picture,.hero-story{grid-area:1/1}
.hero-picture{position:sticky;top:0;height:100svh;align-self:start;overflow:hidden;z-index:-1;background:#0b2942}
.hero-picture img{width:100%;height:100%;object-fit:cover;object-position:60% 52%}
.hero-picture::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,15,30,.95) 0%,rgba(4,20,36,.69) 33%,rgba(4,20,36,.1) 82%),linear-gradient(0deg,rgba(3,15,30,.72),transparent 48%)}
.hero-chapter{background:none;overflow:visible;min-height:calc(92svh - 140px)}
.hero-chapter::after{display:none}
.hero-chapter .hero-in{padding-block:clamp(54px,11vh,130px)}
.hero-chapter h1{font-size:clamp(3.15rem,8.6vw,8.35rem);letter-spacing:-.065em;margin-bottom:.23em}
.hero-chapter p{margin-bottom:1.7rem}
.hero-second{min-height:68svh;display:flex;align-items:center;padding-block:72px}
.hero-second>div{width:min(540px,100%);padding:clamp(20px,5vw,48px);border-left:2px solid #64d6ff;background:linear-gradient(100deg,#071a30dc,#071a30ab);border-radius:0 18px 18px 0}
.hero-second h2{font-size:clamp(2.5rem,5vw,4.75rem);letter-spacing:-.055em}
.projects-home .heading{margin-bottom:1.65rem}
.projects-home article{transition:box-shadow .2s ease,border-color .2s ease}
.projects-home article:hover{border-color:#82aebf;box-shadow:0 16px 40px #173d6020}
@media(max-width:600px){.hero-picture{height:100svh}.hero-picture img{object-position:61% center}.hero-picture::after{background:linear-gradient(90deg,#06182de9,#06182d55),linear-gradient(0deg,#06182d80,transparent 55%)}.hero-chapter{min-height:72svh}.hero-second{min-height:44svh;padding-block:35px 55px}.hero-second>div{background:#071a30e6}}
@media(prefers-reduced-motion:reduce){.hero-picture{position:absolute;inset:0;height:auto}.hero-picture img{position:absolute;inset:0}.hero-second{min-height:0}.projects-home article{transition:none}}

.hero-scroll .hero-picture picture{display:block;width:100%;height:100%}
.hero-scroll[aria-label] .hero-story{min-height:196svh}
.hero-scroll[aria-label] .hero-picture img{object-position:62% 56%}
.reef-scene .hero-story{min-height:210svh;display:grid;align-items:center}
.reef-scene .hero-second{width:min(1200px,calc(100% - 64px));min-height:0}
.reef-scene-corals .hero-picture img{object-position:60% 49%}
.reef-scene-view .hero-picture img{object-position:68% 58%}
.reef-scene-view .hero-second>div{margin-left:auto}
.reef-scene-view .hero-picture::after{background:linear-gradient(270deg,#03101cce,#0414243d 75%)}
.hero-second p{color:#dceef5}
@media(max-width:700px){.hero-scroll[aria-label] .hero-story,.reef-scene .hero-story{min-height:180svh}.reef-scene .hero-second{width:calc(100% - 34px)}.hero-scroll[aria-label] .hero-picture img{object-position:73% 54%}.reef-scene-view .hero-second>div{margin-left:0}}
@media(prefers-reduced-motion:reduce){.hero-scroll[aria-label] .hero-story,.reef-scene .hero-story{min-height:0}}

/* Close views: let the reef fill each scene without obscuring the copy. */
.hero-scroll[aria-label] .hero-picture img{object-position:64% 50%}
.hero-scroll[aria-label] .hero-picture::after{background:linear-gradient(90deg,#020c18ee 0%,#030e1bbb 28%,#03101c33 62%,transparent 86%),linear-gradient(0deg,#020c1855,transparent 40%)}
.reef-scene-corals .hero-picture img{object-position:65% 50%}
.reef-scene-view .hero-picture img{object-position:53% 50%}
.hero-chapter h1{text-shadow:0 3px 28px #02122270}
@media(max-width:700px){.hero-scroll[aria-label] .hero-picture img,.reef-scene-corals .hero-picture img,.reef-scene-view .hero-picture img{object-position:57% center}.hero-scroll[aria-label] .hero-picture::after{background:linear-gradient(90deg,#020c18d4,#020c1850),linear-gradient(0deg,#020c1860,transparent 46%)}}

/* Bring out the coral colours while keeping the foreground copy readable. */
.reef-scene-corals .hero-picture img{filter:saturate(1.24) contrast(1.08) brightness(1.12)}
.reef-scene-view .hero-picture img{filter:saturate(1.16) contrast(1.06) brightness(1.06)}
.reef-scene-corals .hero-picture::after{background:linear-gradient(90deg,#030f1de8,#04142462 43%,transparent 85%),linear-gradient(0deg,#03101c80,transparent 43%)}
.hero-art-note{position:absolute;right:16px;bottom:16px;margin:0;padding:3px 8px;border-radius:4px;background:#02101bc9;color:#e6f5ff;font-size:.72rem;letter-spacing:.02em}

/* The artwork has its own colour grade; keep the coral detail natural. */
.reef-scene-corals .hero-picture img,.reef-scene-view .hero-picture img{filter:none}
.reef-scene-view .hero-picture img{object-position:40% center}
.scene-art-note{display:block;margin-top:12px;color:#d0e2ea;font-size:.72rem}
@media(max-width:700px){.reef-scene-corals .hero-picture img{object-position:58% center}.reef-scene-view .hero-picture img{object-position:44% center}}

/* Wider reef compositions and a deep-water masthead. */
@font-face{font-family:"Reef Serif";src:url("/fonts/reef-serif.woff") format("woff");font-style:normal;font-weight:700;font-display:swap}
.header{background:linear-gradient(115deg,#092a40,#08172c 76%);color:#f1f8fb;border-color:#294d63}
.header .brand{background:#d9edf0;border-radius:9px;padding:8px 12px}
.header .brand .reef-brand-image{mix-blend-mode:multiply}
.header nav{border-color:#34566b}
.header nav a:hover,.header nav a[aria-current],.header .header-cta{color:#a3eaff}
.header .header-cta{border-color:#557b90}
h1,h2{font-family:"Reef Serif",Georgia,serif;font-weight:700;letter-spacing:-.035em}
.hero-chapter h1{font-size:clamp(2.75rem,7vw,7.25rem);letter-spacing:-.047em;line-height:1.05}
.hero-second h2{letter-spacing:-.04em}
.hero-picture{background:radial-gradient(ellipse at center,#162f46,#071323 76%)}
.hero-scroll[aria-label] .hero-picture img,.reef-scene .hero-picture img{object-fit:contain;object-position:center}
@media(max-width:700px){
  .hero-scroll[aria-label] .hero-picture img,.reef-scene .hero-picture img{object-position:center 39%}
  .hero-scroll[aria-label] .hero-picture::after,.reef-scene .hero-picture::after{background:linear-gradient(180deg,#061325b0 0%,#06132530 24%,transparent 49%,#06132590 72%,#061325 100%)}
  .hero-chapter .hero-in{padding-block:42px 62px}
  .hero-chapter h1{font-size:clamp(2.45rem,9vw,4rem)}
}

/* Full-screen reef photography, with a separate portrait crop. */
.hero-scroll[aria-label] .hero-picture img,.reef-scene .hero-picture img{object-fit:cover;object-position:center}
.hero-scroll[aria-label] .hero-picture::after{background:linear-gradient(90deg,#020a16e0 0%,#020a1699 30%,#020a1610 78%),linear-gradient(0deg,#020a1644,transparent 40%)}
@media(max-width:700px){
  .hero-scroll[aria-label] .hero-picture::after,.reef-scene .hero-picture::after{background:linear-gradient(90deg,#061325bc,#06132532 92%),linear-gradient(0deg,#06132555,transparent 55%)}
}

/* The original clownfish hero stays full-bleed. */
.hero-scroll[aria-label] .hero-picture img{object-position:67% center}
@media(max-width:700px){.hero-scroll[aria-label] .hero-picture img{object-position:61% center}}

.about-portrait{display:block;width:min(100%,300px);height:auto;margin-top:1.5rem;border-radius:1rem}

/* Keep the blue tang visible above the opening copy. */
.hero-scroll[aria-label] .hero-picture img{object-position:left center}
.hero-scroll[aria-label] .hero-picture::after{background:radial-gradient(ellipse at 5% 59%,#020a16e8 0%,#020a1688 28%,transparent 68%),linear-gradient(0deg,#020a1655,transparent 32%)}
@media(max-width:700px){
  .hero-scroll[aria-label] .hero-picture{background:#061325}
  .hero-scroll[aria-label] .hero-picture img{object-fit:contain;object-position:center top}
  .hero-scroll[aria-label] .hero-picture::after{background:linear-gradient(180deg,transparent min(37vw,220px),#061325 min(70vw,490px))}
  .hero-scroll[aria-label] .hero-chapter{padding-top:min(48vw,300px)}
}

/* Reserve the upper part of the opening scene for the blue tang. */
@media(min-width:701px){
  .hero-scroll[aria-label] .hero-chapter .hero-in{padding-top:max(25svh,100px)}
}
@media(min-width:701px){
  .hero-scroll[aria-label] .hero-chapter h1{font-size:clamp(2.65rem,5.9vw,6.2rem)}
}