/* ==========================================================
   Public site styles: "Deep Water"
   Palette: abyss and navy for dark areas, sea blue for actions,
   light sky blue for highlights, white and ice for content.
   Signature: a fine line of light-blue diamonds (the tais motif,
   drawn like a circuit trace) and a faint technical grid on dark areas.
   ========================================================== */

:root {
  --abyss: #061428;      /* darkest blue: header, footer, slider base */
  --navy: #0b2545;       /* navy: dark sections */
  --navy-2: #13315c;     /* lifted navy: nodes, hover on dark */
  --sea: #1768ac;        /* sea blue: buttons and links */
  --sea-dark: #0f5390;
  --sky: #8fd3f5;        /* light blue: highlights on dark */
  --sky-soft: #cfeafa;
  --ice: #eff6fc;        /* tinted sections */
  --white: #ffffff;
  --text: #0e1e36;
  --muted: #4e6079;
  --line: #dbe4ee;
  --ok: #17785a;
  --danger: #b42318;

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(11, 37, 69, .06), 0 10px 30px -12px rgba(11, 37, 69, .18);

  /* Fine diamond line: the tais motif as a circuit trace */
  --trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7H17M31 7H48' stroke='%238fd3f5' stroke-opacity='.45' stroke-width='1'/%3E%3Cpath d='M24 2.5L28.5 7L24 11.5L19.5 7Z' fill='none' stroke='%238fd3f5' stroke-width='1.2'/%3E%3Ccircle cx='24' cy='7' r='1.2' fill='%238fd3f5'/%3E%3C/svg%3E");
  /* Technical grid used on dark areas */
  --grid: linear-gradient(rgba(143, 211, 245, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 211, 245, .055) 1px, transparent 1px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 1.0625rem/1.7 var(--font-body);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sea); text-underline-offset: 3px; }
a:hover { color: var(--sea-dark); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.14; margin: 0 0 .5em; color: var(--navy); letter-spacing: -0.025em; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.75rem); font-weight: 600; }
h2 { font-size: clamp(1.65rem, 2.8vw, 2.35rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--sky); color: var(--abyss); padding: 10px 16px; border-radius: var(--radius); font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 840px; }

/* ---------- Dark areas: deep gradient, soft sea glow, faint grid ---------- */
.site-header, .hero, .process, .page-head, .site-footer, .slider { color: #c7d5e6; }
.hero, .process, .page-head, .site-footer {
  position: relative; isolation: isolate;
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(23, 104, 172, .45), transparent 65%),
    radial-gradient(700px 360px at -5% 110%, rgba(143, 211, 245, .10), transparent 60%),
    linear-gradient(180deg, var(--abyss) 0%, var(--navy) 100%);
}
.hero::before, .process::before, .page-head::before, .site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grid); background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25));
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25));
}
.site-header :focus-visible, .hero :focus-visible, .process :focus-visible, .page-head :focus-visible,
.site-footer :focus-visible, .slider :focus-visible, .cta-panel :focus-visible { outline-color: var(--sky); }

/* ---------- The diamond trace (replaces the woven band) ---------- */
.tais {
  height: 14px;
  background: var(--trace) repeat-x center / 48px 14px;
  opacity: .9;
}
.tais-thin { height: 14px; opacity: .6; }
.hero > .tais, .process > .tais, .page-head > .tais { position: relative; margin-top: -1px; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 0 26px;
  background: var(--sea); color: var(--white);
  border: 1.5px solid var(--sea); border-radius: 999px;
  font: 600 1rem/1 var(--font-body); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s;
}
.btn:hover { background: var(--sea-dark); border-color: var(--sea-dark); color: var(--white); box-shadow: 0 10px 26px -10px rgba(23, 104, 172, .7); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: .9375rem; }
.btn-light { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-light:hover { background: var(--sky); border-color: var(--sky); color: var(--abyss); box-shadow: 0 0 0 6px rgba(143, 211, 245, .18); }
.btn-ghost { background: transparent; color: var(--navy); border-color: #b9c8da; }
.btn-ghost:hover { background: var(--navy); color: var(--white); border-color: var(--navy); box-shadow: none; }
.text-link { font-weight: 600; color: var(--sea); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; }
.text-link::after { content: " ›"; }
.text-link:hover { color: var(--sea-dark); }
.link-light { color: var(--white); font-weight: 600; text-decoration: none; background: linear-gradient(var(--sky), var(--sky)) 0 100% / 100% 1.5px no-repeat; padding-bottom: 3px; }
.link-light:hover { color: var(--sky); }
.back-link { display: inline-block; margin-bottom: 1rem; color: var(--sky); font-weight: 600; text-decoration: none; }
.back-link::before { content: "‹ "; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(6, 20, 40, .9);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(143, 211, 245, .14);
}
.header-row { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--white); }
.brand-mark {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--sea) 0%, #3fa3dc 55%, var(--sky) 100%); color: var(--white);
  font: 700 .85rem/1 var(--font-display); letter-spacing: .02em;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.brand-logo { height: 44px; width: auto; }
.brand-name { font: 600 1.1rem/1.15 var(--font-display); letter-spacing: -0.01em; max-width: 18ch; }

.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav > ul a {
  position: relative; display: block; padding: 10px 12px; color: #b9c9dc; text-decoration: none; font-weight: 500; font-size: .95rem;
  transition: color .2s;
}
.site-nav > ul a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--sky); box-shadow: 0 0 10px rgba(143, 211, 245, .8); transform: scaleX(0); transition: transform .25s;
}
.site-nav > ul a:hover { color: var(--white); }
.site-nav > ul a[aria-current="page"] { color: var(--white); }
.site-nav > ul a[aria-current="page"]::after { transform: scaleX(1); }
.nav-extra { display: flex; align-items: center; gap: 12px; }

.lang-switch { position: relative; }
.lang-switch summary {
  list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid rgba(143, 211, 245, .3); border-radius: 999px;
  font-weight: 600; font-size: .8125rem; letter-spacing: .04em; color: var(--white);
}
.lang-switch summary:hover { border-color: var(--sky); }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after { content: " ▾"; color: var(--sky); }
.lang-switch ul {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; list-style: none; margin: 0; padding: 6px;
  background: var(--white); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(6, 20, 40, .45); border: 1px solid var(--line);
}
.lang-switch ul a { display: block; padding: 9px 12px; color: var(--text); text-decoration: none; border-radius: 8px; }
.lang-switch ul a:hover { background: var(--ice); }
.lang-switch ul a[aria-current] { font-weight: 600; color: var(--sea); }

.nav-toggle { display: none; }

@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid rgba(143, 211, 245, .3);
    color: var(--white); padding: 9px 16px; border-radius: 999px; font: 600 .95rem var(--font-body); cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; position: relative; border-radius: 2px;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--abyss); padding: 8px var(--gutter) 20px; border-bottom: 1px solid rgba(143, 211, 245, .14);
  }
  .site-nav.open { display: flex; }
  .site-nav > ul { flex-direction: column; }
  .site-nav > ul a { padding: 14px 0; border-bottom: 1px solid rgba(143, 211, 245, .1); }
  .site-nav > ul a::after { left: 0; right: auto; width: 32px; bottom: -1px; }
  .nav-extra { padding-top: 16px; justify-content: space-between; }
  .brand-name { font-size: 1rem; }
}

/* ---------- Text banner (shown until slides are added) ---------- */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px);
  align-items: center; padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(56px, 8vw, 104px);
}
.hero h1 { color: var(--white); max-width: 16ch; }
.hero-tagline { color: var(--sky); font-weight: 500; letter-spacing: .01em; margin-bottom: 1.25rem; }
.hero-text { font-size: 1.15rem; max-width: 52ch; color: #b9c9dc; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 2.25rem; }

/* ---------- The four stages: glowing nodes on a light line ---------- */
.path { list-style: none; margin: 0; padding: 0; position: relative; }
.path::before {
  content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px;
  background: linear-gradient(180deg, rgba(143, 211, 245, .15), var(--sky) 50%, rgba(143, 211, 245, .15));
}
.path-step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 12px 0; }
.path-num {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--white); font: 600 .95rem/1 var(--font-display);
}
.path-num::before {
  content: ""; position: absolute; inset: 7px; transform: rotate(45deg); z-index: -1;
  background: var(--navy-2); border: 1px solid var(--sky); border-radius: 4px;
  box-shadow: 0 0 0 5px rgba(143, 211, 245, .07), 0 0 18px rgba(143, 211, 245, .35);
}
.path-num { z-index: 0; }
.path-step:last-child .path-num { color: var(--abyss); }
.path-step:last-child .path-num::before { background: var(--sky); box-shadow: 0 0 0 5px rgba(143, 211, 245, .14), 0 0 26px rgba(143, 211, 245, .7); }
.path-title { font-size: 1.1rem; color: var(--white); margin: 8px 0 4px; }
.path-step p { margin: 0; color: #a9bbd0; font-size: .96rem; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Home slider ---------- */
.slider { position: relative; background: var(--abyss); overflow: hidden; }
.slider::after { /* faint grid over the photos */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--grid); background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .15) 70%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .15) 70%);
}
.slides { position: relative; height: clamp(560px, 82vh, 780px); }
.slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s;
}
.slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1s ease; }
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Deep-water wash: strong behind the text, clear on the right so the photo shows */
.slide::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(6, 20, 40, .94) 0%, rgba(6, 20, 40, .8) 34%, rgba(11, 37, 69, .35) 68%, rgba(11, 37, 69, .1) 100%),
    linear-gradient(0deg, rgba(6, 20, 40, .85) 0%, rgba(6, 20, 40, 0) 34%),
    radial-gradient(600px 300px at 15% 100%, rgba(23, 104, 172, .35), transparent 70%);
}
.slide-content { position: relative; z-index: 3; width: 100%; padding-top: 40px; padding-bottom: 104px; }
.slide .hero-tagline { margin-bottom: 1.1rem; }
.slide-title { color: var(--white); font-size: clamp(2.2rem, 4.8vw, 3.75rem); font-weight: 600; max-width: 17ch; margin-bottom: .45em; }
.slide-text { font-size: 1.15rem; max-width: 50ch; color: #c7d5e6; }
.slide .hero-actions { margin-top: 2rem; }

.slider-controls { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 4; display: flex; align-items: center; gap: 10px; }
.slider-arrow, .slider-pause {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: var(--white);
  border: 1px solid rgba(143, 211, 245, .35); border-radius: 50%;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.slider-arrow:hover, .slider-pause:hover { background: var(--sky); border-color: var(--sky); color: var(--abyss); box-shadow: 0 0 22px rgba(143, 211, 245, .55); }
.slider-arrow svg, .slider-pause svg { width: 18px; height: 18px; }
.slider-pause { margin-left: 8px; }
.slider-pause .i-play, .slider.is-paused .slider-pause .i-pause { display: none; }
.slider.is-paused .slider-pause .i-play { display: block; }
/* Dots: small diamonds; the current one lights up */
.slider-dots { display: flex; align-items: center; }
.slider-dot { width: 28px; height: 46px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.slider-dot::before {
  content: ""; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 1px;
  border: 1.5px solid rgba(143, 211, 245, .7); transition: background-color .25s, border-color .25s, box-shadow .25s, width .25s, height .25s;
}
.slider-dot:hover::before { border-color: var(--white); }
.slider-dot[aria-current="true"]::before { width: 12px; height: 12px; background: var(--sky); border-color: var(--sky); box-shadow: 0 0 14px rgba(143, 211, 245, .9); }
.slider-progress { width: 110px; height: 2px; margin-left: 12px; background: rgba(143, 211, 245, .2); border-radius: 2px; overflow: hidden; }
.slider-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--sea), var(--sky)); transform-origin: left; transform: scaleX(0); }
.slider.is-running .slider-progress span { animation: slide-progress linear forwards; }
.slider.is-paused .slider-progress span, .slider.is-held .slider-progress span { animation-play-state: paused; }
@keyframes slide-progress { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .slide.is-active .slide-img { animation: slide-drift 14s ease-out both; }
  @keyframes slide-drift { from { transform: scale(1.07); } to { transform: scale(1); } }
  .slide.is-active .slide-content > * { animation: slide-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .slide.is-active .slide-content > :nth-child(2) { animation-delay: .08s; }
  .slide.is-active .slide-content > :nth-child(3) { animation-delay: .16s; }
  .slide.is-active .slide-content > :nth-child(4) { animation-delay: .24s; }
  @keyframes slide-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 760px) {
  .slides { height: auto; min-height: 620px; display: grid; }
  .slide { position: relative; grid-area: 1 / 1; align-items: flex-end; }
  .slide::before { background: linear-gradient(0deg, rgba(6, 20, 40, .97) 0%, rgba(6, 20, 40, .84) 55%, rgba(11, 37, 69, .35) 100%); }
  .slide-content { padding-top: 120px; padding-bottom: 108px; }
  .slider-controls { bottom: 26px; }
  .slider-progress { display: none; }
}

/* How we work: the four stages, under the slider */
.process .wrap { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 80px); }
.process-title { color: var(--white); font-size: clamp(1.45rem, 2.4vw, 2rem); max-width: 28ch; margin-bottom: 44px; }
.path-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.path-row::before { left: 22px; right: calc((100% - 96px) / 4 - 22px); top: 22px; bottom: auto; width: auto; height: 1px;
  background: linear-gradient(90deg, rgba(143, 211, 245, .2), var(--sky), rgba(143, 211, 245, .2)); box-shadow: 0 0 10px rgba(143, 211, 245, .5); }
.path-row .path-step { grid-template-columns: 1fr; gap: 16px; padding: 0; align-content: start; }
.path-row .path-title { font-size: 1.15rem; color: var(--white); margin: 0 0 6px; }
@media (max-width: 860px) {
  .path-row { grid-template-columns: 1fr; gap: 0; }
  .path-row::before { left: 21.5px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(143, 211, 245, .2), var(--sky), rgba(143, 211, 245, .2)); }
  .path-row .path-step { grid-template-columns: 44px 1fr; gap: 18px; padding: 12px 0; }
  .path-row .path-title { margin-top: 8px; }
}

/* ---------- Page heads ---------- */
.page-head .wrap { position: relative; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 64px); }
.page-head h1 { color: var(--white); max-width: 22ch; }
.page-intro { font-size: 1.15rem; max-width: 60ch; margin: 0; color: #b9c9dc; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-tint { background: linear-gradient(180deg, var(--ice), #f7fbfe); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 2.5rem; }
.section-head h2 { margin: 0; }
.section-title { margin-bottom: 2.5rem; }
.empty { color: var(--muted); padding: 32px 0; }

/* Services overview: quiet cards that light up on hover */
.service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.service-item {
  position: relative; display: block; height: 100%; padding: 30px 26px 28px; text-decoration: none; color: var(--text);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.service-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--sea), var(--sky)); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.service-item:hover { border-color: #b8d3ea; box-shadow: var(--shadow); transform: translateY(-3px); color: var(--text); }
.service-item:hover::before { transform: scaleX(1); }
.service-item .icon { width: 48px; height: 48px; padding: 11px; color: var(--sea); background: var(--ice); border-radius: 12px; margin-bottom: 20px; }
.service-item h3 { margin-bottom: .45em; }
.service-item p { color: var(--muted); margin: 0; font-size: .96rem; }

/* Services page */
.service-detail { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 32px; padding: 44px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.service-detail:first-child { border-top: 0; padding-top: 0; }
.service-detail-icon { width: 68px; height: 68px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ice), var(--sky-soft)); border-radius: 18px; }
.service-detail-icon .icon { width: 32px; height: 32px; color: var(--sea); }
.service-detail-body { max-width: 72ch; }
.service-summary { font-size: 1.15rem; color: var(--navy); font-weight: 500; }
@media (max-width: 600px) { .service-detail { grid-template-columns: 1fr; gap: 16px; } }

.prose { max-width: 70ch; }
.prose p:last-child { margin-bottom: 1rem; }
.lead-prose { font-size: 1.15rem; color: #22344f; }

/* Projects */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 36px 28px; }
.project-link { display: block; text-decoration: none; color: var(--text); }
.project-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); border-radius: var(--radius-lg); }
.project-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(11, 37, 69, .08); pointer-events: none; }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.project-link:hover .project-media img { transform: scale(1.04); }
.project-placeholder {
  width: 100%; height: 100%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 14L34 24L24 34L14 24Z' fill='none' stroke='%238fd3f5' stroke-opacity='.35'/%3E%3C/svg%3E") center / 48px 48px,
    radial-gradient(400px 220px at 80% 0%, rgba(23, 104, 172, .55), transparent 70%),
    linear-gradient(160deg, var(--navy), var(--abyss));
}
.project-body { padding-top: 18px; }
.project-body h3 { margin-bottom: .35em; transition: color .2s; }
.project-link:hover h3 { color: var(--sea); }
.project-body p { color: var(--muted); margin: 0; font-size: .96rem; }
.project-meta { display: flex; gap: 14px; font-size: .85rem; font-weight: 600; color: var(--sea) !important; margin-bottom: 8px !important; letter-spacing: .01em; }
.project-meta span + span { color: var(--muted); font-weight: 500; }

.project-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.project-hero-img { border-radius: var(--radius-lg); margin-bottom: 36px; width: 100%; }
@media (max-width: 860px) { .project-detail { grid-template-columns: 1fr; gap: 32px; } }

.facts { margin: 0; padding: 8px 24px; background: var(--ice); border-radius: var(--radius-lg); }
.facts > div { padding: 16px 0; border-bottom: 1px solid #d6e5f2; }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: .85rem; color: var(--muted); font-weight: 500; }
.facts dd { margin: 3px 0 0; font-weight: 600; color: var(--navy); }
.facts dd a { color: var(--sea); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filters a {
  padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--text); font-size: .9375rem; font-weight: 500;
  transition: border-color .2s, background-color .2s, color .2s;
}
.filters a:hover { border-color: var(--sea); color: var(--sea); }
.filters a[aria-current] { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* Gallery */
.photo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.photo-strip a { aspect-ratio: 1; overflow: hidden; border-radius: 14px; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.photo-strip a:hover img { transform: scale(1.06); }
@media (max-width: 760px) { .photo-strip { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px 18px; }
.gallery-grid a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--ice); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery-grid a:hover img { transform: scale(1.05); }
.gallery-cap { font-size: .9rem; color: var(--muted); margin: 10px 0 0; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(6, 20, 40, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.lightbox img { max-height: 82vh; width: auto; max-width: 100%; border-radius: 10px; }
.lightbox figcaption { color: #dbe7f3; text-align: center; max-width: 60ch; }
.lightbox button { background: none; border: 0; color: var(--white); cursor: pointer; font: 600 1rem var(--font-body); }
.lb-prev, .lb-next { font-size: 3rem !important; line-height: 1; height: 100%; }
.lb-prev:hover, .lb-next:hover { color: var(--sky); }
.lb-close { position: absolute; top: 18px; right: 22px; padding: 9px 16px; border: 1px solid rgba(143, 211, 245, .4) !important; border-radius: 999px; }
.lb-close:hover { background: var(--sky) !important; color: var(--abyss) !important; }
@media (max-width: 600px) { .lightbox[open] { grid-template-columns: 40px 1fr 40px; } }

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.mv { display: grid; gap: 16px; }
.mv-item { padding: 26px 28px; background: var(--ice); border-radius: var(--radius-lg); }
.mv-item h2 { font-size: 1.05rem; color: var(--sea); margin-bottom: .5em; letter-spacing: 0; }
.mv-item p { font-size: 1.08rem; margin: 0; color: var(--navy); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 36px; }
.why-item { position: relative; padding-left: 24px; }
.why-item::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--sea), var(--sky)); }
.why-item p { color: var(--muted); margin: 0; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 28px; } }

/* CTA: a dark panel floating on white */
.cta { background: var(--white); padding: 0 0 clamp(64px, 9vw, 104px); }
.section-tint + .cta, .section + .cta { padding-top: 0; }
.cta-row {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; justify-content: space-between; align-items: center; gap: 28px 48px; flex-wrap: wrap;
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter))); max-width: none; margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 64px);
  border-radius: 24px; color: #c7d5e6;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(23, 104, 172, .6), transparent 70%),
    linear-gradient(160deg, var(--navy), var(--abyss));
}
.cta-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grid); background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000);
}
.cta h2 { margin-bottom: .3em; color: var(--white); }
.cta p { margin: 0; color: #b9c9dc; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .btn-ghost { color: var(--white); border-color: rgba(143, 211, 245, .45); }
.cta .btn-ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.cta .btn:focus-visible { outline-color: var(--sky); }

/* Forms */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.map { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius-lg); margin-top: 24px; }

.form { display: grid; gap: 22px; }
.form > .btn { justify-self: start; min-width: 200px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; }
.field > span { font-weight: 600; font-size: .9375rem; color: var(--navy); }
.field em { font-style: normal; font-weight: 400; color: var(--muted); font-size: .85rem; }
.field small { color: var(--muted); font-size: .875rem; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--white);
  border: 1px solid #c3d1e1; border-radius: var(--radius); padding: 12px 15px; min-height: 50px;
  transition: border-color .2s, box-shadow .2s;
}
input:hover, select:hover, textarea:hover { border-color: #9fb6cf; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 4px rgba(143, 211, 245, .55); }
.is-bad input, .is-bad textarea, .is-bad select { border-color: var(--danger); background: #fff8f7; }
.choice-grid.is-bad { outline: 2px solid var(--danger); outline-offset: 6px; border-radius: 12px; }

fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; font-size: .9375rem; color: var(--navy); margin-bottom: 10px; padding: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.choice-inline { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.choice span {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 18px; border: 1px solid #c3d1e1; border-radius: var(--radius);
  font-weight: 500; line-height: 1.3; height: 100%; background: var(--white); transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.choice span::before {
  content: ""; flex: none; width: 12px; height: 12px; border: 1.5px solid #8ea3bc; border-radius: 2px;
  transform: rotate(45deg); transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.choice input:checked + span { border-color: var(--sea); background: var(--ice); box-shadow: inset 0 0 0 1px var(--sea); }
.choice input:checked + span::before { background: var(--sea); border-color: var(--sea); box-shadow: 0 0 0 3px rgba(143, 211, 245, .6); }
.choice input:focus-visible + span { outline: 3px solid var(--sea); outline-offset: 2px; }
.choice:hover span { border-color: var(--sea); }

.hp { position: absolute; left: -9999px; }
.notice { padding: 16px 20px; border-radius: var(--radius); margin-bottom: 24px; font-weight: 500; }
.notice-ok { background: #e8f6f0; color: var(--ok); border: 1px solid #bfe4d3; }
.notice-err { background: #fdf0ee; color: var(--danger); border: 1px solid #f3c9c3; }

/* Footer */
.site-footer { font-size: .96rem; }
.site-footer > .tais { opacity: .5; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 40px; padding-top: 64px; padding-bottom: 44px; }
.footer-name { font: 600 1.25rem/1.2 var(--font-display); color: var(--white); margin-bottom: .5em; letter-spacing: -0.01em; }
.footer-about p:not(.footer-name) { color: #a9bbd0; max-width: 38ch; }
.footer-head { color: var(--white); font-weight: 600; margin-bottom: .9em; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: #c7d5e6; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--sky); }
.site-footer address { font-style: normal; line-height: 1.85; color: #a9bbd0; }
.social { display: flex; gap: 16px; }
.footer-base { position: relative; border-top: 1px solid rgba(143, 211, 245, .14); padding-top: 22px; padding-bottom: 30px; font-size: .875rem; color: #8ea3bc; }
.footer-base p { margin: 0; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}