:root {
  --blue: #0b5d9b;
  --blue-bright: #1580c8;
  --blue-deep: #06385f;
  --blue-night: #032844;
  --ink: #17232d;
  --steel: #aeb9c2;
  --gray: #dfe5e9;
  --fog: #eef2f4;
  --warm-white: #f8f8f5;
  --white: #fff;
  --shadow: 0 24px 70px rgba(3, 40, 68, .20);
  --display: "Roboto Condensed", "Arial Narrow", sans-serif;
  --body: Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--warm-white);
  font-family: var(--body);
  line-height: 1.55;
  overflow-x: hidden;
}
img { display: block; width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; background: #fff; color: #000; padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 59, 99, .96);
  backdrop-filter: blur(16px);
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.header-inner {
  width: min(1500px, 94vw);
  min-height: 92px;
  margin: auto;
  display: grid;
  grid-template-columns: 170px 1fr auto;
  align-items: center;
  gap: 2rem;
}
.brand { align-self: stretch; display: flex; align-items: center; width: 160px; overflow: visible; }
.brand img { height: 118px; width: 124px; object-fit: cover; object-position: center; transform: translateY(12px); filter: drop-shadow(0 8px 12px rgba(0,0,0,.22)); }
.site-nav { display: flex; justify-content: center; gap: clamp(1.1rem, 2.4vw, 2.8rem); }
.site-nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-family: var(--display); font-weight: 700; font-size: .95rem; position: relative; }
.site-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-.45rem; height:2px; background:white; transition:.25s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right:0; }
.header-call { text-decoration: none; display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.header-call span { font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.72); }
.header-call strong { font-family:var(--display); font-size:1.55rem; }
.menu-toggle { display:none; }


.caustics { position:relative; isolation:isolate; overflow:hidden; }
.caustics::before,
.caustics::after {
  content:"";
  position:absolute;
  inset:-12%;
  z-index:-1;
  pointer-events:none;
}
.caustics::before {
  opacity:.17;
  background-image:url("assets/caustics.webp");
  background-repeat:repeat;
  background-size:620px 620px;
  filter:blur(.2px);
  animation:caustic-drift 24s linear infinite;
  mix-blend-mode:screen;
}
.caustics::after {
  opacity:.10;
  background:linear-gradient(125deg, transparent 0 30%, rgba(255,255,255,.30) 42%, transparent 56% 100%);
  filter:blur(26px);
  animation:caustic-glow 12s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes caustic-drift { to { transform:translate3d(-7%, 5%, 0) rotate(1deg); } }
@keyframes caustic-glow { to { transform:translate3d(10%, -4%, 0) scale(1.06); opacity:.16; } }

.hero {
  min-height: 760px;
  display:grid;
  grid-template-columns: minmax(360px, 42%) 1fr;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue) 58%, #0f6cae);
  color:white;
}
.hero-copy {
  padding: clamp(7rem, 11vw, 10rem) clamp(2rem, 6vw, 7rem) 8rem max(4vw, calc((100vw - 1500px)/2));
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:2;
}
.eyebrow { margin:0 0 1rem; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.22em; color:rgba(255,255,255,.78); }
.eyebrow.blue { color:var(--blue); }
.hero h1 { margin:0; max-width:720px; font:700 clamp(4rem, 7vw, 7.8rem)/.86 var(--display); text-transform:uppercase; letter-spacing:-.04em; }
.hero h1 em { display:block; margin-top:.22em; font-style:italic; font-family:Georgia, "Times New Roman", serif; font-weight:400; color:#fff; font-size:.58em; letter-spacing:-.02em; text-transform:none; }
.hero-lede { max-width:620px; font-size:clamp(1rem, 1.35vw, 1.24rem); color:rgba(255,255,255,.84); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.85rem; margin:1.5rem 0 1.7rem; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:.85rem 1.35rem; border-radius:999px; text-decoration:none; text-transform:uppercase; letter-spacing:.09em; font:700 .88rem var(--body); transition:.2s ease; }
.button:hover { transform:translateY(-2px); }
.button-light { background:white; color:var(--blue-deep); box-shadow:0 12px 30px rgba(0,0,0,.13); }
.button-ghost { color:white; border:1px solid rgba(255,255,255,.62); background:rgba(0,0,0,.08); }
.button-blue { background:var(--blue); color:white; box-shadow:0 12px 30px rgba(11,93,155,.22); }
.local-note { display:flex; align-items:center; gap:.65rem; font-size:.85rem; color:rgba(255,255,255,.77); }
.local-mark { font-size:1.5rem; }

.hero-media { position:relative; min-width:0; display:grid; grid-template-columns:1fr 1fr; background:#d6dde1; }
.hero-photo { position:relative; margin:0; min-height:760px; overflow:hidden; }
.hero-photo img { width:100%; height:100%; object-fit:cover; }
.hero-boat img { object-position:56% center; }
.hero-car img { object-position:center; }
.hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(2,24,40,.7), transparent 44%); }
.hero-photo figcaption { position:absolute; z-index:2; left:1.7rem; right:1.7rem; bottom:3rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.13em; color:rgba(255,255,255,.82); }
.hero-photo figcaption span { display:block; font:700 clamp(1.75rem, 3vw, 3.2rem)/1 var(--display); color:#fff; letter-spacing:.01em; }
.hero-car { clip-path:polygon(11% 0,100% 0,100% 100%,0 100%); margin-left:-6%; }
.hero-curve { position:absolute; z-index:4; bottom:-1px; left:0; width:100%; height:90px; }

.section-light { background:var(--warm-white); }
.section-gray { background:var(--fog); }
.section-heading { max-width:780px; margin:0 auto 3rem; text-align:center; }
.section-heading h2, .mobile-copy h2, .two-worlds h2, .contact h2 { margin:.15rem 0 .8rem; font:700 clamp(2.7rem,5vw,5rem)/.98 var(--display); text-transform:uppercase; color:var(--blue-night); }
.section-heading p:last-child { color:#53616c; }

.service-selector { padding:7rem 4vw 8rem; }
.service-tabs { width:min(1260px,100%); margin:0 auto 3rem; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #c7d2d9; border-bottom:1px solid #c7d2d9; }
.service-tab { appearance:none; border:0; border-right:1px solid #c7d2d9; background:transparent; min-height:150px; padding:1.5rem 1rem; color:var(--ink); cursor:pointer; transition:.25s ease; position:relative; }
.service-tab:last-child { border-right:0; }
.service-tab::after { content:""; position:absolute; height:4px; left:50%; right:50%; bottom:-1px; background:var(--blue); transition:.25s ease; }
.service-tab:hover, .service-tab.active { background:linear-gradient(180deg,rgba(11,93,155,.02),rgba(11,93,155,.08)); color:var(--blue-deep); }
.service-tab.active::after { left:12%; right:12%; }
.service-tab svg { width:62px; height:36px; margin:0 auto .6rem; fill:none; stroke:currentColor; stroke-width:2; }
.service-tab span { display:block; font:700 1.65rem var(--display); text-transform:uppercase; }
.service-tab small { display:block; color:#66737c; text-transform:uppercase; letter-spacing:.1em; }
.service-stage { width:min(1260px,100%); margin:auto; background:var(--blue); color:white; display:grid; grid-template-columns:.85fr 1.15fr; min-height:480px; box-shadow:var(--shadow); overflow:hidden; border-radius:24px 4px 24px 4px; position:relative; }
.service-stage::before { content:""; position:absolute; inset:0 auto 0 0; width:48%; background:linear-gradient(145deg,rgba(255,255,255,.08),transparent); }
.service-stage-copy { padding:clamp(2.2rem,5vw,5rem); align-self:center; position:relative; z-index:2; }
.service-stage h3 { margin:.2rem 0 1rem; max-width:550px; font:700 clamp(2.6rem,4.4vw,4.8rem)/.92 var(--display); text-transform:uppercase; }
.service-stage-copy > p:not(.eyebrow) { max-width:560px; color:rgba(255,255,255,.82); }
.service-list { columns:2; gap:2rem; padding:0; margin:2rem 0; list-style:none; }
.service-list li { break-inside:avoid; margin:.65rem 0; padding-left:1.4rem; position:relative; }
.service-list li::before { content:"✓"; position:absolute; left:0; color:#aee2ff; font-weight:800; }
.text-link { color:white; font-weight:700; text-underline-offset:.3rem; }
.text-link span { margin-left:.5rem; }
.service-stage-image { position:relative; min-height:480px; clip-path:polygon(10% 0,100% 0,100% 100%,0 100%); }
.service-stage-image img { height:100%; object-fit:cover; }
.service-stage-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--blue),transparent 28%); }
.stage-badge { position:absolute; right:1.6rem; bottom:1.6rem; z-index:2; background:rgba(255,255,255,.94); color:var(--blue-deep); border-radius:999px; padding:.7rem 1rem; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }

.two-worlds { background:linear-gradient(135deg,var(--blue-deep),var(--blue)); color:white; padding:7rem 4vw; }
.two-worlds-intro { width:min(1260px,100%); margin:0 auto 4rem; display:grid; grid-template-columns:.75fr 1.25fr; column-gap:4rem; align-items:end; }
.two-worlds-intro h2 { color:white; margin:0; }
.two-worlds-intro p:last-child { color:rgba(255,255,255,.74); max-width:590px; }
.world { width:min(1260px,100%); margin:0 auto 2rem; min-height:420px; display:grid; grid-template-columns:1.25fr .75fr; overflow:hidden; background:rgba(0,0,0,.12); border-top:1px solid rgba(255,255,255,.2); }
.world-marine { grid-template-columns:.75fr 1.25fr; }
.world-image { min-height:420px; overflow:hidden; }
.world-image img { height:100%; object-fit:cover; }
.world-copy { padding:clamp(2rem,5vw,4.7rem); align-self:center; }
.world-copy span { text-transform:uppercase; letter-spacing:.18em; color:#9bd8ff; font-weight:800; font-size:.8rem; }
.world-copy h3 { margin:.5rem 0 1rem; font:700 clamp(2.7rem,4.4vw,4.8rem)/.94 var(--display); text-transform:uppercase; }
.world-copy p { color:rgba(255,255,255,.74); max-width:400px; }

.mobile-unit { display:grid; grid-template-columns:1.05fr .95fr; min-height:650px; }
.mobile-photo { min-height:650px; }
.mobile-photo img { height:100%; object-fit:cover; }
.mobile-copy { padding:clamp(4rem,7vw,8rem); align-self:center; }
.mobile-copy p { color:#53616c; max-width:620px; }
.proof-line { display:flex; flex-wrap:wrap; gap:.75rem 1.4rem; margin:2rem 0; text-transform:uppercase; letter-spacing:.1em; color:#6b7780; font-size:.82rem; }
.proof-line strong { color:var(--blue); }

.results { padding:7rem 4vw 8rem; }
.results-grid { width:min(1260px,100%); margin:auto; display:grid; grid-template-columns:1.35fr .75fr; grid-template-rows:310px 310px; gap:1.2rem; }
.results-grid figure { position:relative; margin:0; overflow:hidden; border-radius:18px 4px 18px 4px; }
.results-grid img { height:100%; object-fit:cover; transition:.5s ease; }
.results-grid figure:hover img { transform:scale(1.025); }
.result-wide { grid-row:1 / 3; }
.result-tall { grid-column:2; grid-row:1; }
.result-small { grid-column:2; grid-row:2; }
.results-grid figcaption { position:absolute; left:1rem; bottom:1rem; color:white; background:rgba(3,40,68,.82); backdrop-filter:blur(8px); border-radius:999px; padding:.6rem .9rem; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; }

.contact { background:var(--blue); color:white; padding:8rem 4vw; text-align:center; }
.contact-inner { max-width:900px; margin:auto; }
.contact h2 { color:white; }
.contact p:not(.eyebrow) { color:rgba(255,255,255,.8); }
.contact-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.site-footer { background:var(--blue-night); color:white; padding:2rem 4vw; display:flex; justify-content:space-between; gap:2rem; font-size:.82rem; }
.site-footer > div:first-child { display:flex; flex-direction:column; }
.site-footer span { color:rgba(255,255,255,.62); }

.reveal { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .header-inner { grid-template-columns:120px 1fr auto; }
  .brand img { width:100px; height:100px; }
  .site-nav { gap:1rem; }
  .site-nav a { font-size:.82rem; }
  .header-call strong { font-size:1.2rem; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-copy { padding-top:7rem; padding-bottom:5rem; }
  .hero-media { min-height:540px; }
  .hero-photo { min-height:540px; }
  .hero-curve { display:none; }
  .two-worlds-intro { grid-template-columns:1fr; }
}

@media (max-width: 780px) {
  .site-header { position:relative; }
  .header-inner { grid-template-columns:90px 1fr auto; min-height:76px; gap:1rem; }
  .brand { width:90px; }
  .brand img { width:82px; height:82px; transform:translateY(6px); }
  .menu-toggle { display:block; grid-column:3; border:1px solid rgba(255,255,255,.5); color:white; background:transparent; border-radius:999px; padding:.55rem .85rem; text-transform:uppercase; letter-spacing:.1em; }
  .header-call { display:none; }
  .site-nav { display:none; position:absolute; top:76px; left:0; right:0; background:var(--blue-deep); padding:1.5rem; flex-direction:column; align-items:center; }
  .site-nav.open { display:flex; }
  .hero-copy { padding:6rem 6vw 3.5rem; }
  .hero h1 { font-size:clamp(3.3rem,15vw,5.4rem); }
  .hero-media { grid-template-columns:1fr 1fr; min-height:410px; }
  .hero-photo { min-height:410px; }
  .hero-photo figcaption { bottom:1.2rem; left:1rem; right:1rem; }
  .hero-car { clip-path:none; margin-left:0; }
  .service-selector, .two-worlds, .results { padding:5rem 5vw; }
  .service-tabs { grid-template-columns:1fr 1fr; }
  .service-tab:nth-child(2) { border-right:0; }
  .service-tab:nth-child(-n+2) { border-bottom:1px solid #c7d2d9; }
  .service-stage { grid-template-columns:1fr; }
  .service-stage-image { min-height:340px; clip-path:none; }
  .service-stage-image::after { background:linear-gradient(0deg,var(--blue),transparent 28%); }
  .service-list { columns:1; }
  .world, .world-marine { grid-template-columns:1fr; }
  .world-marine .world-copy { order:2; }
  .world-image { min-height:320px; }
  .mobile-unit { grid-template-columns:1fr; }
  .mobile-photo { min-height:430px; }
  .results-grid { grid-template-columns:1fr; grid-template-rows:repeat(3,360px); }
  .result-wide, .result-tall, .result-small { grid-column:auto; grid-row:auto; }
  .site-footer { flex-direction:column; text-align:center; }
}

@media (max-width: 520px) {
  .hero-media { min-height:540px; grid-template-columns:1fr; }
  .hero-photo { min-height:270px; }
  .hero-actions { flex-direction:column; }
  .button { width:100%; }
  .service-tab { min-height:125px; }
  .service-tab span { font-size:1.25rem; }
  .service-stage-copy { padding:2.2rem 1.4rem; }
  .service-stage h3 { font-size:2.5rem; }
  .results-grid { grid-template-rows:repeat(3,280px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .caustics::before, .caustics::after { animation:none; }
}