:root{
  --ocean-depth:0;
  --ocean-light:1;
  --ocean-haze:.08;
  --ocean-deep-haze:.11;
  --ocean-frame-brightness:.96;
  --ocean-bg-top:rgb(249 253 255);
  --ocean-bg-bottom:rgb(231 247 253);
  --ocean-card-bg:rgba(246,252,255,.22);
  --ocean-card-border:rgba(190,226,246,.45);
  --ocean-card-shadow:rgba(1,18,31,.08);
  --ocean-text:rgb(238 248 253);
  --ocean-muted:rgb(205 226 237);
  --bubble-opacity:.34;
  --water-ray-opacity:.16;
  --jelly-y:0vh;
  --accent:#dceeff;
  --accent-soft:#edf7ff;
  --accent-deep:#8dbce4;
  --accent-2:#d6b995;
  --accent-3:#a8d5ed;
  --line:rgba(93,137,174,.13);
  --line-2:rgba(112,157,194,.25);
  --glass-edge:rgba(205,230,248,.72);
}

html[data-theme="night"]{
  --accent:#dceeff;
  --accent-soft:#bfdff6;
  --accent-deep:#9bcbed;
  --accent-2:#d8ba96;
  --accent-3:#a8d9ef;
  --line:rgba(191,222,244,.14);
  --line-2:rgba(201,231,250,.24);
  --glass-edge:rgba(204,232,250,.28);
}

#preloader{display:none!important}

#sea-model-layer{
  position:fixed;
  z-index:1;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  opacity:1;
  overflow:hidden;
  mix-blend-mode:normal;
  transform-origin:50% 50%;
  contain:strict;
  background:#12577f;
}

#sea-model-preview{
  position:absolute;
  left:50%;
  top:50%;
  width:100vw;
  height:120vh;
  border:0;
  pointer-events:none;
  transform:translate3d(-50%,calc(-50% + var(--jelly-y)),0);
  will-change:transform;
}

#sea-model-frame{
  position:absolute;
  left:50%;
  top:50%;
  width:100vw;
  height:120vh;
  border:0;
  pointer-events:none;
  transform:translate3d(-50%,calc(-50% + var(--jelly-y)),0);
  will-change:transform;
}

#sea-model-preview{
  z-index:0;
  object-fit:cover;
  opacity:.8;
  filter:saturate(.92) contrast(1.02) brightness(var(--ocean-frame-brightness));
  transition:opacity .6s ease;
}

#sea-model-frame{
  z-index:1;
  opacity:0;
  filter:saturate(1.12) contrast(1.08) brightness(var(--ocean-frame-brightness));
  transition:opacity .7s ease;
}

html.sketchfab-jelly-ready #sea-model-layer{
  opacity:1;
}

html.sketchfab-jelly-ready #sea-model-frame{opacity:.88}
html.sketchfab-jelly-ready #sea-model-preview{opacity:.12}
html[data-theme="night"] #sea-model-preview{opacity:.68;filter:saturate(.82) brightness(.62)}
html[data-theme="night"].sketchfab-jelly-ready #sea-model-frame{opacity:.86}

#ocean-bubbles{
  position:fixed;
  z-index:4;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  opacity:var(--bubble-opacity);
  contain:strict;
}

#ocean-bubbles::before{
  content:'';
  position:absolute;
  inset:-20% -12% 0;
  opacity:var(--water-ray-opacity);
  background:
    linear-gradient(112deg,transparent 18%,rgba(210,243,255,.34) 24%,transparent 34%),
    linear-gradient(72deg,transparent 58%,rgba(198,237,255,.22) 64%,transparent 72%);
  filter:blur(18px);
  transform-origin:50% 0;
  animation:waterRays 15s ease-in-out infinite alternate;
  will-change:transform,opacity;
}

#ocean-bubbles i{
  position:absolute;
  left:var(--bubble-left);
  bottom:-70px;
  width:var(--bubble-size);
  height:var(--bubble-size);
  border:1px solid rgba(220,247,255,.56);
  border-radius:50%;
  background:
    radial-gradient(circle at 31% 27%,rgba(255,255,255,.92) 0 7%,transparent 10%),
    radial-gradient(circle at 58% 63%,rgba(196,237,255,.07),rgba(224,248,255,.18) 64%,rgba(255,255,255,.04) 71%);
  box-shadow:
    inset -2px -3px 7px rgba(104,184,222,.16),
    inset 2px 2px 5px rgba(255,255,255,.22),
    0 0 9px rgba(190,232,252,.12);
  opacity:0;
  transform:translate3d(0,0,0) scale(var(--bubble-scale));
  animation:bubbleRise var(--bubble-duration) linear var(--bubble-delay) infinite;
  will-change:transform,opacity;
}

@keyframes bubbleRise{
  0%{opacity:0;transform:translate3d(0,8vh,0) scale(calc(var(--bubble-scale) * .68))}
  9%{opacity:.48}
  48%{transform:translate3d(var(--bubble-drift),-52vh,0) scale(var(--bubble-scale))}
  88%{opacity:.58}
  100%{opacity:0;transform:translate3d(calc(var(--bubble-drift) * -.36),-116vh,0) scale(calc(var(--bubble-scale) * 1.18))}
}

@keyframes waterRays{
  from{transform:translate3d(-2%,0,0) skewX(-3deg) scaleX(.96);opacity:calc(var(--water-ray-opacity) * .72)}
  to{transform:translate3d(2%,2%,0) skewX(3deg) scaleX(1.05);opacity:var(--water-ray-opacity)}
}

.sea-model-credit{
  position:fixed;
  z-index:12;
  right:16px;
  bottom:11px;
  color:var(--ink-2);
  font-size:9px;
  opacity:.48;
  transition:opacity .25s;
}

.sea-model-credit:hover{opacity:.92}

#bg-gradient{
  z-index:2!important;
  background:
    radial-gradient(58% 50% at 56% 16%,rgba(222,246,255,calc(.18 - var(--ocean-depth) * .1)),transparent 66%),
    radial-gradient(44% 38% at 22% 68%,rgba(20,92,130,calc(.08 + var(--ocean-depth) * .16)),transparent 70%),
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--ocean-bg-top) calc(10% + var(--ocean-depth) * 20%),transparent),
      color-mix(in srgb,var(--ocean-bg-bottom) calc(18% + var(--ocean-depth) * 42%),transparent)
    )!important;
  transition:background .28s linear!important;
}

#bg-grid{z-index:3!important;opacity:.06!important}

html[data-theme="night"] #bg-gradient{
  background:
    radial-gradient(58% 52% at 56% 16%,rgba(73,157,205,calc(.24 - var(--ocean-depth) * .1)),transparent 66%),
    radial-gradient(44% 38% at 22% 72%,rgba(20,99,139,calc(.2 + var(--ocean-depth) * .16)),transparent 68%),
    linear-gradient(
      180deg,
      var(--ocean-bg-top),
      var(--ocean-bg-bottom)
    )!important;
}

#bg-gradient::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 0%,rgba(0,25,45,var(--ocean-haze)) 72%,rgba(0,10,24,var(--ocean-deep-haze)) 100%),
    repeating-linear-gradient(102deg,transparent 0 9%,rgba(191,235,255,.035) 10%,transparent 13%);
  pointer-events:none;
}

html[data-ocean-zone="deep"]{
  --glass-edge:rgba(170,219,246,.24);
}

html[data-theme="day"][data-ocean-zone="deep"]{
  --ink-0:#f4fbff;
  --ink-1:#d0e3ed;
  --ink-2:#a9c5d4;
  --glass-1:rgba(6,22,35,.34);
  --glass-2:rgba(8,29,45,.46);
}

html[data-theme="day"][data-ocean-zone="deep"] .doc-copy p,
html[data-theme="day"][data-ocean-zone="deep"] .doc-lead p,
html[data-theme="day"][data-ocean-zone="deep"] .doc-list li{
  color:var(--ink-1)!important;
}

html .glass,
html .doc-card,
html .service-group,
html .reference-cta,
html .reference-lead-card,
html .contact-info-card,
html .contact-hours-card,
html .contact-project-card,
html .contact-closing,
html .faq-item,
html .field{
  background:var(--ocean-card-bg)!important;
  border-color:var(--ocean-card-border)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 18px 46px -28px var(--ocean-card-shadow)!important;
  -webkit-backdrop-filter:blur(7px) saturate(1.06)!important;
  backdrop-filter:blur(7px) saturate(1.06)!important;
  transition:
    background-color .18s linear,
    border-color .18s linear,
    color .22s ease,
    box-shadow .22s ease!important;
}

html body,
html .section-title,
html .hero-title,
html .doc-card h2,
html .doc-card h3,
html .reference-cta h2,
html .contact-project-heading h2{
  color:var(--ocean-text)!important;
  text-shadow:0 2px 18px rgba(0,12,24,.28);
}

html .hero-sub,
html .doc-copy p,
html .doc-lead p,
html .doc-list li,
html .reference-cta p,
html .contact-info-row p,
html .contact-hours-content{
  color:var(--ocean-muted)!important;
  text-shadow:0 1px 10px rgba(0,12,24,.22);
}

html main h1,
html main h2,
html main h3,
html main h4{
  color:var(--ocean-text)!important;
  text-shadow:0 2px 18px rgba(0,12,24,.32);
}

html #hero .hero-copy,
html #hero .hero-copy *,
html .doc-page-intro,
html .doc-page-intro *{
  opacity:1!important;
  transform:none!important;
}

html .nav{
  opacity:1!important;
  transform:translateX(-50%)!important;
}

html .nav *{opacity:1!important}

html #hero .hero-title,
html #hero .hero-title .line,
html #hero .hero-title .gradient-text{
  color:#f4fbff!important;
  -webkit-text-fill-color:#f4fbff!important;
  text-shadow:0 4px 28px rgba(0,10,24,.46)!important;
}

html #hero .hero-sub{
  background:var(--ocean-card-bg)!important;
  color:var(--ocean-muted)!important;
  border-color:var(--ocean-card-border)!important;
}

html.is-scrolling .glass,
html.is-scrolling .doc-card,
html.is-scrolling .service-group,
html.is-scrolling .reference-cta,
html.is-scrolling .contact-info-card,
html.is-scrolling .contact-hours-card,
html.is-scrolling .contact-project-card,
html.is-scrolling .contact-closing,
html.is-scrolling .faq-item,
html.is-scrolling .field{
  -webkit-backdrop-filter:blur(3px)!important;
  backdrop-filter:blur(3px)!important;
  transition:none!important;
}

.doc-content-group,
.doc-card,
.service-group{
  content-visibility:auto;
  contain-intrinsic-size:auto 520px;
}

html .btn-primary,
html .nav-cta,
html .lang-switch button.active{
  text-shadow:none!important;
}

html[data-ocean-zone="deep"] .glass,
html[data-ocean-zone="deep"] .doc-card,
html[data-ocean-zone="deep"] .service-group,
html[data-ocean-zone="deep"] .reference-cta,
html[data-ocean-zone="deep"] .contact-info-card,
html[data-ocean-zone="deep"] .contact-hours-card,
html[data-ocean-zone="deep"] .contact-project-card{
  color:var(--ink-0);
}

html[data-theme] .btn-primary,
html[data-theme] .nav-cta,
.hero-cta .btn-primary,
.lang-switch button.active,
html[data-theme] .service-card.featured .svc-icon,
html[data-theme] .service-card:hover .svc-icon,
.service-group-head>span,
.step-num,
html[data-theme] .flow-step:hover .step-num{
  background:linear-gradient(140deg,#f7fcff 0%,#d5ebfa 52%,#b5d8f0 100%)!important;
  border-color:rgba(135,188,226,.74)!important;
  color:#20384b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 14px 32px -13px rgba(86,156,207,.72)!important;
}

html[data-theme] .btn-primary:hover,
html[data-theme] .nav-cta:hover,
.hero-cta .btn-primary:hover{
  background:linear-gradient(140deg,#fff,#c9e5f7)!important;
  color:#162d40!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 19px 42px -13px rgba(91,166,217,.9)!important;
}

.nav-links a.active,
.nav-links a.is-active,
.page-tab.active,
.page-tab:hover{
  background:rgba(181,219,243,.24)!important;
  color:var(--ink-0)!important;
}

html[data-theme="night"] .nav-links a:hover,
html[data-theme="night"] .nav-links a.is-active{
  background:rgba(159,204,235,.15)!important;
  color:#dceeff!important;
  -webkit-text-fill-color:#dceeff!important;
}

.doc-list li::before{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320384b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>") center/11px no-repeat,
    linear-gradient(140deg,#f7fcff,#b5d8f0)!important;
  box-shadow:0 4px 12px -4px rgba(86,156,207,.75)!important;
}

.section-eyebrow,
.mode-kicker,
.service-detail b,
.footer-cols b,
.page-tab span,
.stat-plus,
.why-grid .auto-card b,
.method b{
  color:#79afd7!important;
}

.pulse-dot,
.flow-arrow::after,
.li-dot{
  background:#a8d8f5!important;
  box-shadow:0 0 14px rgba(147,205,242,.92)!important;
}

.service-card::before,
.service-group::before,
.stat::after{
  background:radial-gradient(circle,rgba(164,210,240,.25),transparent 68%)!important;
}

.service-card.featured,
.story-card.featured{
  background:linear-gradient(180deg,rgba(190,225,247,.23),rgba(255,255,255,.78))!important;
  border-color:rgba(139,190,226,.44)!important;
}

html[data-theme="night"] .service-card.featured,
html[data-theme="night"] .story-card.featured{
  background:linear-gradient(180deg,rgba(116,176,219,.15),rgba(10,20,30,.48))!important;
}

.field:focus-within{
  border-color:#8fc4e8!important;
  box-shadow:0 0 0 4px rgba(145,197,233,.2),0 1px 2px rgba(75,75,75,.04)!important;
}

.theme-switch:hover{
  border-color:rgba(140,193,229,.78)!important;
  background:#dceeff!important;
  color:#21384b!important;
}

#bg-canvas{display:none!important}

::selection{
  background:#b9dcf3;
  color:#162b3c;
}

@media(max-width:760px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip!important;
  }

  html .nav{
    left:12px!important;
    width:calc(100% - 24px)!important;
    max-width:none!important;
    min-height:54px;
    padding:7px 8px 7px 14px!important;
    transform:none!important;
    gap:4px;
    box-sizing:border-box;
  }

  html .nav-brand img{
    width:118px!important;
    max-width:118px!important;
    height:auto!important;
  }

  html .lang-switch{
    margin-left:auto!important;
    margin-right:2px!important;
    flex:none;
  }

  html .theme-switch,
  html .nav-toggle{
    width:34px;
    height:34px;
    flex:none;
  }

  #sea-model-layer{
    inset:0;
    width:100vw;
    height:100vh;
  }

  #sea-model-frame{
    width:100vw;
    height:120vh;
    transform:translate3d(-50%,calc(-50% + var(--jelly-y)),0);
  }

  html.sketchfab-jelly-ready #sea-model-frame{opacity:.72}
  .sea-model-credit{font-size:8px;right:8px;bottom:7px;max-width:180px;text-align:right}

  html #hero .hero-copy,
  html .home-document-content,
  html .doc-page-intro,
  html .doc-page-body{
    width:calc(100% - 32px)!important;
    max-width:calc(100% - 32px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box;
  }

  html #hero .hero-title{
    width:100%;
    font-size:clamp(44px,15vw,62px)!important;
    line-height:1.06!important;
    overflow-wrap:anywhere;
  }

  html #hero .hero-sub{
    width:100%!important;
    max-width:100%!important;
    padding:14px 16px!important;
    font-size:14px!important;
    line-height:1.65!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    box-sizing:border-box;
    margin-left:0!important;
    margin-right:0!important;
  }

  html #hero .hero-cta{
    width:100%;
    display:grid!important;
    grid-template-columns:1fr;
    gap:10px;
    margin-left:0!important;
    margin-right:0!important;
  }

  html #hero .hero-cta .glass-btn{
    width:100%!important;
    max-width:100%!important;
    justify-content:center;
    box-sizing:border-box;
  }

  html .home-document-content h2,
  html .doc-group-heading h2{
    max-width:100%;
    font-size:clamp(34px,10.5vw,48px)!important;
    line-height:1.08!important;
    overflow-wrap:anywhere;
  }
}

/*
 * Final ocean glass pass.
 * Panels inherit the water behind them: no fill, only refraction, edge light,
 * and a restrained shadow for separation.
 */
html[data-theme] .glass,
html[data-theme] .glass-strong,
html[data-theme] .doc-card,
html[data-theme] .service-card,
html[data-theme] .service-card.featured,
html[data-theme] .story-card,
html[data-theme] .story-card.featured,
html[data-theme] .auto-card,
html[data-theme] .dash-card,
html[data-theme] .service-group,
html[data-theme] .reference-cta,
html[data-theme] .reference-lead-card,
html[data-theme] .contact-info-card,
html[data-theme] .contact-hours-card,
html[data-theme] .contact-project-card,
html[data-theme] .contact-closing,
html[data-theme] .faq-item,
html[data-theme] .field,
html[data-theme] .team-card,
html[data-theme] .flow-step,
html[data-theme] .method,
html[data-theme] .stat{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:1px solid var(--ocean-card-border)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(180,224,247,.05),
    0 18px 44px -30px var(--ocean-card-shadow)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.08)!important;
  backdrop-filter:blur(8px) saturate(1.08)!important;
}

html[data-theme] .service-card::before,
html[data-theme] .service-group::before,
html[data-theme] .story-card::before,
html[data-theme] .doc-card::before{
  background:transparent!important;
  opacity:0!important;
}

html[data-theme] #hero .hero-sub,
html[data-theme] .reference-lead-card{
  background:transparent!important;
  background-image:none!important;
}

html[data-theme] .doc-card h2,
html[data-theme] .doc-card h3,
html[data-theme] .doc-card h4,
html[data-theme] .service-card h3,
html[data-theme] .story-card h3,
html[data-theme] .auto-card b,
html[data-theme] .contact-project-card h2,
html[data-theme] .contact-info-card strong,
html[data-theme] .contact-hours-card strong,
html[data-theme] .contact-closing h2{
  color:var(--ocean-text)!important;
  -webkit-text-fill-color:var(--ocean-text)!important;
}

html[data-theme] .doc-card p,
html[data-theme] .doc-card li,
html[data-theme] .service-card p,
html[data-theme] .story-card p,
html[data-theme] .auto-card span,
html[data-theme] .contact-info-card p,
html[data-theme] .contact-hours-card p,
html[data-theme] .contact-closing p,
html[data-theme] .field span{
  color:var(--ocean-muted)!important;
  -webkit-text-fill-color:var(--ocean-muted)!important;
}

html[data-theme] .field input,
html[data-theme] .field textarea,
html[data-theme] .field select{
  color:var(--ocean-text)!important;
  -webkit-text-fill-color:var(--ocean-text)!important;
  background:transparent!important;
}

html[data-theme] .field input::placeholder,
html[data-theme] .field textarea::placeholder{
  color:color-mix(in srgb,var(--ocean-muted) 76%,transparent)!important;
}

html[data-theme] .nav{
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
  backdrop-filter:blur(10px) saturate(1.08)!important;
}

html[data-theme] .nav-links a,
html[data-theme] .lang-switch button:not(.active),
html[data-theme] .theme-switch,
html[data-theme] .nav-toggle{
  color:var(--ocean-text)!important;
  -webkit-text-fill-color:var(--ocean-text)!important;
  text-shadow:0 1px 12px rgba(0,15,28,.42)!important;
}

html[data-theme] .nav-brand img{
  filter:drop-shadow(0 1px 8px rgba(225,246,255,.36));
}

html[data-theme] .nav-links a.active,
html[data-theme] .nav-links a.is-active{
  color:#effaff!important;
  -webkit-text-fill-color:#effaff!important;
}

html[data-theme] .glass-chip,
html[data-theme] .contact-card-label,
html[data-theme] .section-eyebrow{
  background:transparent!important;
  border-color:var(--ocean-card-border)!important;
  color:var(--ocean-text)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  backdrop-filter:blur(7px)!important;
}

html.is-scrolling .glass,
html.is-scrolling .glass-strong,
html.is-scrolling .doc-card,
html.is-scrolling .service-card,
html.is-scrolling .story-card,
html.is-scrolling .auto-card,
html.is-scrolling .dash-card,
html.is-scrolling .service-group,
html.is-scrolling .reference-cta,
html.is-scrolling .reference-lead-card,
html.is-scrolling .contact-info-card,
html.is-scrolling .contact-hours-card,
html.is-scrolling .contact-project-card,
html.is-scrolling .contact-closing,
html.is-scrolling .faq-item,
html.is-scrolling .field{
  -webkit-backdrop-filter:blur(5px) saturate(1.04)!important;
  backdrop-filter:blur(5px) saturate(1.04)!important;
}

@media(prefers-reduced-motion:reduce){
  #ocean-bubbles i,
  #ocean-bubbles::before{
    animation:none!important;
  }
  #ocean-bubbles{opacity:.16}
}

@media(max-width:760px){
  html .nav{
    right:12px!important;
    width:auto!important;
  }

  html .nav-brand img{
    width:104px!important;
    max-width:104px!important;
  }

  html .lang-switch{
    padding:3px!important;
    margin-left:auto!important;
    margin-right:0!important;
  }

  html .lang-switch button{
    width:34px!important;
    height:32px!important;
    padding:0!important;
  }

  html .theme-switch,
  html .nav-toggle{
    width:32px!important;
    height:32px!important;
  }

  html .hero-eyebrow{
    width:min(100%,310px)!important;
    max-width:100%!important;
    min-height:32px;
    padding:7px 12px!important;
    justify-content:center;
    text-align:center;
    white-space:normal!important;
    line-height:1.35!important;
    font-size:9px!important;
  }

  html #hero .hero-cta,
  html #hero .hero-cta a{
    min-width:0!important;
    max-width:100%!important;
  }

  html #hero .hero-cta a{
    margin-left:0!important;
    margin-right:0!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
}
