/* ============================================
   SYNERGYNOX — Mont · multi-page
   ============================================ */

/* ── Mont local font ── */
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-Light.ttf') format('truetype'); font-weight: 300; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-RegularItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-SemiBold.ttf') format('truetype'); font-weight: 500; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-Heavy.ttf') format('truetype'); font-weight: 800; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-HeavyItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-Black.ttf') format('truetype'); font-weight: 900; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Mont'; src: url('assets/font/Mont-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  --cream: #dff0f1;
  --cream-2: #c8e5e7;
  --paper: #e9f3f4;
  --bg-dark: #272727;
  --bg-darker: #272727;
  --ink: #1A1F1E;
  --ink-soft: #2A302E;
  --mute: #5B6360;
  --line: rgba(26, 31, 30, 0.12);
  --deep: #024A42;
  --deep-2: #03362F;
  --teal: #0E7D6F;
  --mint: #3aa59f;
  --mint-2: #4db5af;
  --wine: #A23E45;
  --wine-2: #8A2F36;
  --orange: #c86e34;
  --dark-grey: #272727;
  --cta-orange: #d15242;
  --light-grey: #ececec;
  --silver: #c2cccd;

  --sans: 'Mont', system-ui, sans-serif;
  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 56px);

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--cream); color: var(--ink); }
/* overflow-x: clip prevents visual horizontal overflow WITHOUT creating a scroll container.
   Unlike overflow-x: hidden, it does NOT break position:sticky on iOS Safari. */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: clip;
  max-width: 100vw;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--mint); color: #fff; }

/* =============== FOCUS STATES (Accessibility — keyboard nav) =============== */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
.btn-cine:focus-visible,
.btn-ghost-cine:focus-visible { border-radius: 100px; outline-offset: 4px; }
.nav-toggle:focus-visible { border-radius: 8px; }
.faq-item:focus-visible { outline-offset: 0; }
.mat-card:focus-visible,
.gal-item:focus-visible,
.panel:focus-visible { outline-offset: -3px; }

/* =============== HEADER =============== */
.site-header {
  position: sticky;
  top: 0; z-index: 100;
  background: linear-gradient(to right, #272727 max(0px, calc((100% - 1440px) / 2)), var(--cream) max(0px, calc((100% - 1440px) / 2)));
  border-bottom: 4px solid var(--mint);
}
.header-row {
  display: flex;
  align-items: stretch;
  max-width: 1440px;
  margin: 0 auto;
  height: 80px;
  position: relative;
}
.logo-wrap {
  position: relative;
  width: 340px;
  flex-shrink: 0;
  background: #272727;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
  padding: 0 40px 0 24px;
  overflow: hidden;
}
.logo-wrap .logo {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.03em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 2px;
  font-style: italic;
  transform: skewX(-8deg);
}
.logo .logo-nox { color: var(--mint); }
.nav-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 22px;
}
.nav-main a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  padding: 4px 2px;
  transition: color .25s;
}
.nav-main a:hover { color: var(--teal); }
.nav-main a.active { color: var(--teal); }
.nav-main a.active::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0; right: 0;
  height: 2px;
  background: var(--teal);
}
.nav-main .sep { color: var(--mute); font-size: 12px; }
.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
}
.lang {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lang a { color: var(--mute); }
.lang a.active { color: var(--teal); border-bottom: 1px solid var(--teal); padding-bottom: 2px; }

/* ---- Language dropdown (collapsed shows only the active language) ---- */
.lang-dd { position: relative; display: inline-block; }
.lang-dd--mobile { display: none; }   /* only used inside the mobile drawer */
.lang-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--mute); background: transparent;
  border: 1px solid rgba(140,140,140,.45); border-radius: 999px;
  padding: 6px 12px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.lang-dd-btn:hover { border-color: currentColor; }
.lang-dd-cur { color: var(--teal); }
.lang-dd-chev { transition: transform .25s var(--ease); }
.lang-dd.open .lang-dd-chev { transform: rotate(180deg); }
/* Dark popover — readable whether the header sits on cream (desktop) or turns
   dark on tablet/mobile (where .site-header * forces all header text white). */
.lang-dd-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  display: flex; flex-direction: column; min-width: 100%;
  background: #232323; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 4px; gap: 2px;
  box-shadow: 0 16px 36px rgba(0,0,0,.32);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 120;
}
.lang-dd.open .lang-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dd-menu a {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(255,255,255,.78); padding: 8px 18px; border-radius: 8px; text-align: center;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.lang-dd-menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
.logo-img { height: 54px; width: auto; max-width: 100%; display: block; flex-shrink: 0; object-fit: contain; }
.header-mark {
  width: 56px; height: 56px;
  position: relative;
  flex-shrink: 0;
}
.header-mark svg { width: 100%; height: 100%; }

/* logo mark shape - triangular knot */
.tri-mark {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
}

/* =============== BUTTONS =============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--cta-orange);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  box-shadow: 0 8px 24px -8px rgba(209, 82, 66, 0.5);
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(209, 82, 66, 0.7); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--teal { background: var(--teal); box-shadow: 0 8px 24px -8px rgba(14,125,111,.5); }
.btn--teal:hover { box-shadow: 0 14px 28px -8px rgba(14,125,111,.7); }
.btn--orange { background: var(--orange); box-shadow: 0 8px 24px -8px rgba(200,110,52,.5); }
.btn--orange:hover { box-shadow: 0 14px 28px -8px rgba(200,110,52,.7); }
.btn--dark { background: var(--ink); box-shadow: none; }

/* ── Header CTA button (Request a Quote) ── */
.btn-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--cta-orange);
  color: #fff !important;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .25s, transform .25s;
  box-shadow: none;
}
.btn-header-cta:hover {
  background: var(--dark-grey);
  transform: translateY(-1px);
}

/* =============== TYPE =============== */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}
h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
/* Heading em elements — colour only, no italic */
em { font-style: normal !important; }
.display-1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; }
.display-2 { font-size: clamp(32px, 4.5vw, 52px); font-weight: 800; line-height: 1.05; }
.display-3 { font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; }

.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* =============== HERO =============== */
.hero {
  padding: 32px 0 0;
  background: var(--cream);
  position: relative;
}
.hero-shell { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }
.hero-stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/7.5;
  background: linear-gradient(180deg, #2d4a5a 0%, #1b2a35 100%);
}
/* yacht hull placeholder */
.hero-photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 70%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #f4c89d 0%, #d49c70 25%, #5d5252 50%, #2d2828 75%, #1a1818 100%);
}
.hero-photo::before {
  /* abstract hull silhouette */
  content: '';
  position: absolute;
  inset: 8% 22% 0 22%;
  background:
    linear-gradient(180deg, #c5d0d4 0%, #8a969a 30%, #4a5258 60%, #1d2125 100%);
  clip-path: polygon(48% 0, 52% 0, 90% 75%, 80% 95%, 20% 95%, 10% 75%);
  box-shadow:
    inset 4px 0 8px rgba(255,255,255,.2),
    inset -4px 0 12px rgba(0,0,0,.4);
}
.hero-photo::after {
  /* hull stripes */
  content: '';
  position: absolute;
  inset: 8% 22% 5% 22%;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 24px,
    rgba(255,255,255,.04) 24px 25px,
    transparent 25px 60px,
    rgba(0,0,0,.15) 60px 61px
  );
  clip-path: polygon(48% 0, 52% 0, 90% 75%, 80% 95%, 20% 95%, 10% 75%);
}
.hero-water {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 25%;
  background: linear-gradient(180deg, rgba(20,30,35,.1) 0%, rgba(20,30,35,.7) 70%);
  backdrop-filter: blur(2px);
}
.hero-water::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.03) 6px 7px);
}
.hero-watermark {
  position: absolute;
  left: 50%; top: 56%;
  transform: translate(-50%, -50%);
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 800;
  font-style: italic;
  color: rgba(61, 168, 158, 0.55);
  letter-spacing: 0.04em;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.hero-watermark small { display: block; font-size: 0.28em; letter-spacing: 0.4em; font-weight: 700; font-style: normal; color: rgba(255,255,255,.7); margin-top: 4px; }
.hero-card {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 38%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
}
.hero-msg {
  background: rgba(10, 15, 14, 0.85);
  color: #fff;
  padding: 32px 30px;
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.3;
  backdrop-filter: blur(8px);
}
.hero-msg em { font-style: normal; color: var(--mint); }
.hero-quote-label {
  background: var(--mint);
  color: #fff;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.18em;
  padding: 16px;
  font-size: 16px;
}
.hero-cta {
  background: var(--mint);
  padding: 0 16px 16px;
}
.hero-cta .btn { width: 100%; padding: 16px; }

/* Floating logo right of hero water */
.hero-logo-float {
  position: absolute;
  right: 32px;
  bottom: -28px;
  width: 80px; height: 80px;
  z-index: 4;
}

/* =============== TESTIMONIALS STRIP =============== */
.testimonials-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 24px;
}
.tcell {
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.tcell .q {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  max-width: 30ch;
}
.tcell .who {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.tcell--cream { background: var(--cream-2); color: var(--ink); }
.tcell--mint { background: var(--mint); color: #fff; }
.tcell--deep { background: var(--deep); color: #fff; }

/* =============== LASER BANNER =============== */
.laser-banner {
  margin: 48px auto 0;
  max-width: 1440px;
  padding: 0 var(--pad);
}
.laser-band {
  position: relative;
  background: var(--cta-orange);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
  border-radius: 4px;
  min-height: 130px;
}
.laser-band .txt {
  padding: 26px 36px;
  color: #fff;
}
.laser-band h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  margin-bottom: 6px;
}
.laser-band p { font-size: 14px; opacity: .9; max-width: 32ch; }
.laser-band .laser-vis {
  position: relative;
  height: 200px;
  width: 200px;
  justify-self: center;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1a1a 0%, #0a0a0a 100%);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  transform: translateY(20px);
}
.laser-vis::before {
  /* laser head */
  content: '';
  position: absolute;
  top: 20%; left: 50%;
  width: 80px; height: 60px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 60%, #2a2a2a 100%);
  clip-path: polygon(20% 0, 80% 0, 70% 100%, 30% 100%);
}
.laser-vis::after {
  /* sparks */
  content: '';
  position: absolute;
  top: 60%; left: 50%;
  width: 120px; height: 60px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 0%, #fff 0%, var(--mint) 8%, transparent 30%),
    conic-gradient(from -60deg at 50% 0%, transparent 0deg, var(--mint-2) 25deg, transparent 50deg, var(--mint-2) 75deg, transparent 100deg, var(--mint-2) 125deg, transparent 150deg, var(--mint) 175deg, transparent 200deg);
  filter: blur(0.5px);
  opacity: 0.9;
  animation: sparks 1.4s ease-in-out infinite;
}
@keyframes sparks { 0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleY(1); } 50% { opacity: 1; transform: translateX(-50%) scaleY(1.1); } }
.laser-band .cta-side { display: flex; justify-content: flex-end; padding-right: 36px; }

/* =============== TWO PANELS =============== */
.panels {
  margin: 48px auto 0;
  max-width: 1440px;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.panel {
  position: relative;
  aspect-ratio: 16/9;
  background: #1a1a1a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 40px;
  text-align: center;
  cursor: pointer;
}
.panel-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.55) contrast(1.05);
  transition: transform 1s var(--ease), filter .5s;
  will-change: transform;
}
.panel:hover .panel-bg { transform: scale(1.06); filter: brightness(.7) contrast(1.05); }
.panel--weld .panel-bg {
  background:
    radial-gradient(40% 60% at 30% 60%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(circle at 50% 50%, #b48a4d 0%, #6a4828 30%, #1a1a1a 80%);
}
.panel--hull .panel-bg {
  background:
    radial-gradient(40% 50% at 60% 70%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 50%, #0e0e0e 100%);
}
.panel-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,.04) 18px 19px);
}
.panel .small {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  opacity: .9;
  margin-bottom: 8px;
}
.panel .big {
  position: relative;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.panel .btn { position: relative; }

/* =============== PROCESS FLOW (chevron arrows) =============== */
.process {
  margin: 56px auto 0;
  max-width: 1440px;
  padding: 0 var(--pad);
}
.chevron-row {
  display: flex;
  width: 100%;
  background: var(--mint);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  min-height: 140px;
}
.chev {
  flex: 1;
  position: relative;
  padding: 26px 38px 26px 56px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: filter .35s;
  cursor: pointer;
}
.chev:hover { filter: brightness(1.08); }
.chev:nth-child(1) { background: #5BC2B6; padding-left: 36px; }
.chev:nth-child(2) { background: #4FB6AA; }
.chev:nth-child(3) { background: #3DA89E; }
.chev:nth-child(4) { background: #2A988E; }
.chev:nth-child(5) { background: #19867C; }
.chev:nth-child(6) { background: #0E7D6F; padding-right: 36px; }

.chev::after {
  content: '';
  position: absolute;
  right: -28px; top: 0;
  width: 28px;
  height: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 2;
}
.chev::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 28px;
  height: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 50%);
  z-index: 1;
  margin-left: -28px;
}
.chev:first-child::before { display: none; }
.chev:last-child::after { display: none; }
.chev h4 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chev p {
  font-size: 13px;
  line-height: 1.4;
  opacity: .85;
  max-width: 18ch;
}
.process-mark {
  position: absolute;
  right: 16px; bottom: 12px;
  width: 36px; height: 36px;
}

/* =============== PAGE SUB-HERO (interior pages) =============== */
.subhero {
  padding: 160px 0 100px;
  min-height: 720px;
  background: var(--bg-darker);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
  overflow: hidden;
}
.subhero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(61,168,158,.12), transparent 60%);
  pointer-events: none;
}
.subhero .shell { position: relative; }
.subhero .eyebrow { color: var(--mint); }
.subhero h1 {
  font-size: clamp(52px, 7.5vw, 108px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 20px;
}
.subhero h1 em { color: var(--mint); font-weight: 300; }
.subhero p { color: rgba(255,255,255,.6); margin-top: 32px; max-width: 580px; font-size: 16px; line-height: 1.75; }
.subhero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: end; }

/* =============== SOLUTIONS PAGE =============== */
.tabs-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin: 40px 0 32px;
}
.tab {
  padding: 16px 24px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .25s, border-color .25s;
}
.tab.active { color: var(--teal); border-color: var(--teal); }
.tab:hover { color: var(--ink); }
.search-row {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}
.search-input {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font: inherit;
  outline: none;
  transition: border-color .25s;
}
.search-input:focus { border-color: var(--teal); }

.solution-layout {
  display: grid;
  grid-template-columns: 240px 1fr 1fr 1fr;
  gap: 24px;
  padding: 32px 0 100px;
}
.zone-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zone-list h4 {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.zone-item {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.zone-item.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.zone-item:hover { border-color: var(--teal); }

.zone-col h5 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.zone-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.zone-col li {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: transform .25s, border-color .25s, background .25s;
  cursor: pointer;
}
.zone-col li:hover { transform: translateX(4px); border-color: var(--teal); background: #fff; }

.finishes {
  background: var(--paper);
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.finish-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.finish {
  background: var(--cream);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .25s, box-shadow .4s;
  cursor: pointer;
}
.finish:hover { transform: translateY(-6px); border-color: var(--teal); box-shadow: 0 20px 40px -20px rgba(0,0,0,.2); }
.finish .swatch {
  aspect-ratio: 1.4/1;
  border-radius: 8px;
  margin-bottom: 16px;
}
.finish h6 { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.finish p { font-size: 12px; color: var(--mute); }

/* =============== SERVICES PAGE =============== */
.service-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
}
.s-tag {
  padding: 10px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  transition: all .3s var(--ease);
  cursor: pointer;
}
.s-tag:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.s-tag.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.subhero .s-tag { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.75); }
.subhero .s-tag:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); color: #fff; }
.subhero .s-tag.active { background: var(--teal); border-color: var(--teal); color: #fff; }

.feature-section {
  padding: 100px 0;
  position: relative;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.feature-text h2 { margin-bottom: 24px; }
.feature-text p { color: var(--mute); margin-bottom: 16px; font-size: 16px; }
.feature-photo {
  aspect-ratio: 4/5;
  border-radius: 12px;
  background: linear-gradient(135deg, #c5d0d4 0%, #8a969a 60%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
}
/* stripe texture removed — real photos in use */
.feature-photo .ph-label {
  position: absolute;
  left: 16px; bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.5);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.grades-row {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grade-card {
  background: var(--paper);
  padding: 32px 28px;
  border-radius: 12px;
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .25s, box-shadow .4s;
}
.grade-card:hover { transform: translateY(-6px); border-color: var(--teal); box-shadow: 0 20px 40px -20px rgba(0,0,0,.25); }
.grade-card .num {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--teal);
  margin-bottom: 8px;
}
.grade-card .bar {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--teal), var(--mint));
  margin: 16px 0 24px;
  transform-origin: left;
}
.grade-card h4 { font-size: 22px; margin-bottom: 12px; }
.grade-card p { font-size: 14px; color: var(--mute); line-height: 1.5; }

/* =============== SHIPYARDS =============== */
.map-section { padding: 60px 0 100px; }
.map-block {
  border-radius: 16px;
  overflow: hidden;
  background: var(--deep);
  position: relative;
  aspect-ratio: 16/8;
}
.med-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.port {
  position: absolute;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.port .ring {
  position: absolute; inset: -8px;
  border: 1px solid var(--mint);
  border-radius: 50%;
  animation: port-pulse 2.6s ease-out infinite;
}
.port .dot {
  width: 14px; height: 14px;
  background: var(--mint);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(61,168,158,.3), 0 0 20px var(--mint);
}
.port .label {
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.7);
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.port:hover .label { opacity: 1; }
@keyframes port-pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

.ports-list {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.region {
  border-top: 2px solid var(--teal);
  padding-top: 24px;
}
.region h4 { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.region ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.region li {
  font-size: 15px;
  color: var(--ink-soft);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  padding-left: 20px;
  transition: padding-left .25s, color .25s;
}
.region li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 8px;
  background: var(--mint);
  border-radius: 50%;
  transform: translateY(-50%);
}
.region li:hover { padding-left: 28px; color: var(--teal); }

.stations-row {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.station-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 28px;
  transition: transform .4s var(--ease), border-color .25s;
}
.station-card:hover { transform: translateY(-6px); border-color: var(--teal); }
.station-card .num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--mute);
}
.station-card h4 { font-size: 22px; margin: 12px 0 12px; }
.station-card p { font-size: 14px; color: var(--mute); }

/* =============== LATEST PROJECTS =============== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0 32px;
}
.filter {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  background: transparent;
  cursor: pointer;
  transition: all .25s;
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.pf-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding-bottom: 100px;
}
.pf-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--deep);
  cursor: pointer;
  transition: transform .5s var(--ease);
}
.pf-item:hover { transform: translateY(-4px); }
.pf-item .ph { position: absolute; inset: 0; }
.pf-item .meta {
  position: absolute;
  left: 18px; bottom: 18px; right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  color: #fff;
}
.pf-item .meta .t { font-size: 20px; font-weight: 800; line-height: 1.1; }
.pf-item .meta .y { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; opacity: .8; }
.pf-item .tag-pill {
  position: absolute;
  left: 18px; top: 18px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
}
.pf-item.a { grid-column: span 7; aspect-ratio: 16/10; }
.pf-item.b { grid-column: span 5; aspect-ratio: 16/14; }
.pf-item.c { grid-column: span 4; aspect-ratio: 1/1; }
.pf-item.d { grid-column: span 5; aspect-ratio: 5/4; }
.pf-item.e { grid-column: span 3; aspect-ratio: 4/5; }
.pf-item.f { grid-column: span 6; aspect-ratio: 16/9; }
.pf-item.g { grid-column: span 6; aspect-ratio: 16/9; }
.ph-a { background: url('assets/images/proj-polish-hq.png') center/cover; }
.ph-b { background: url('assets/images/proj-hull2.jpg') center/cover; }
.ph-c { background: url('assets/images/proj-cnc.jpg') center/cover; }
.ph-d { background: url('assets/images/proj-custom-frame.jpg') center/cover; }
.ph-e { background: url('assets/images/proj-lathe2.jpg') center/cover; }
.ph-f { background: url('assets/images/proj-villa2.jpg') center/cover; }
.ph-g { background: url('assets/images/proj-anchor-pocket.png') center/cover; }

/* ── New project items h – p (rows 4-6 of the portfolio) ── */
.pf-item.h { grid-column: span 4; aspect-ratio: 4/3; }
.pf-item.i { grid-column: span 4; aspect-ratio: 4/3; }
.pf-item.j { grid-column: span 4; aspect-ratio: 4/3; }
.pf-item.k { grid-column: span 5; aspect-ratio: 5/4; }
.pf-item.l { grid-column: span 4; aspect-ratio: 4/3; }
.pf-item.m { grid-column: span 3; aspect-ratio: 4/5; }
.pf-item.n { grid-column: span 6; aspect-ratio: 16/9; }
.pf-item.o { grid-column: span 6; aspect-ratio: 16/9; }
.ph-h { background: url('assets/images/proj-weld.jpg') center/cover; }
.ph-i { background: url('assets/images/proj-laser-cut.jpg') center/cover; }
.ph-j { background: url('assets/images/proj-bending.jpg') center/cover; }
.ph-k { background: url('assets/images/proj-nameplate.jpg') center/cover; }
.ph-l { background: url('assets/images/proj-swim-ladder.jpg') center/cover; }
.ph-m { background: url('assets/images/proj-ba-polish.jpg') center/cover; }
.ph-n { background: url('assets/images/proj-button-panel.jpg') center/cover; }
.ph-o { background: url('assets/images/proj-starlink.jpg') center/cover; }
.pf-item.p { grid-column: span 6; aspect-ratio: 4/3; }
.pf-item.q { grid-column: span 6; aspect-ratio: 4/3; }
.ph-p { background: url('assets/images/proj-fitting.jpg') center/cover; }
.ph-q { background: url('assets/images/proj-deck-fitting.jpg') center/cover; }

/* ── Admin-added project sizes (sz-* classes) ── */
.pf-item.sz-sm   { grid-column: span 4; aspect-ratio: 1/1; }
.pf-item.sz-md   { grid-column: span 6; aspect-ratio: 4/3; }
.pf-item.sz-lg   { grid-column: span 8; aspect-ratio: 16/9; }
.pf-item.sz-wide { grid-column: span 12; aspect-ratio: 16/5; }

/* ── Filter animation ── */
.pf-item { transition: opacity .3s ease, transform .5s var(--ease); }
.pf-item.pf-out { opacity: 0 !important; transform: scale(.96) !important; pointer-events: none; }

.news-section {
  padding: 80px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.news-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.post {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .25s;
}
.post:hover { transform: translateY(-6px); border-color: var(--teal); }
.post .img { aspect-ratio: 16/9; background: repeating-linear-gradient(45deg, #0a3934 0 14px, #0e4942 14px 28px); }
.post.featured .img { aspect-ratio: 16/11; }
.post .body { padding: 24px; }
.post .date { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--teal); text-transform: uppercase; }
.post h4 { font-size: 22px; margin: 10px 0 10px; line-height: 1.2; }
.post p { font-size: 14px; color: var(--mute); }
.post.featured h4 { font-size: 30px; }

/* =============== ABOUT =============== */
.about-intro {
  padding: 160px 0 100px;
  background: var(--bg-darker);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
  overflow: hidden;
}
.about-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(61,168,158,.12), transparent 60%);
  pointer-events: none;
}
.about-intro .shell { position: relative; }
.about-intro .eyebrow { color: var(--mint); }
.about-intro h1 {
  font-size: clamp(52px, 7.5vw, 108px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 20px;
}
.about-intro h1 em { color: var(--mint); font-weight: 300; }
.about-intro p { font-size: 16px; color: rgba(255,255,255,.6); margin-top: 0; max-width: 60ch; line-height: 1.75; }
.stats-row {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.stat-cell { display: flex; flex-direction: column; gap: 4px; }
.stat-cell .v { font-size: clamp(36px, 4vw, 56px); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.stat-cell .v .plus { color: var(--teal); }
.stat-cell .l { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }

.guarantees {
  padding: 80px 0;
  background: var(--deep);
  color: #fff;
}
.guarantees h2 { color: #fff; }
.guarantees ul { list-style: none; margin-top: 40px; }
.guarantees li {
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  transition: padding-left .3s, color .3s;
}
.guarantees li:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.guarantees li:hover { color: var(--mint); padding-left: 12px; }
.guarantees li .check {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: background .3s, color .3s, border-color .3s;
}
.guarantees li:hover .check { background: var(--mint); color: var(--deep); border-color: var(--mint); }

.team-section { padding: 80px 0; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.member {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: transform .4s var(--ease);
}
.member:hover { transform: translateY(-6px); }
.avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), var(--deep));
  position: relative;
  overflow: hidden;
}
/* stripe pattern removed — real headshots in use */
.member .name { font-size: 18px; font-weight: 800; }
.member .role { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }

.we-work {
  padding: 80px 0;
  background: var(--paper);
}
.we-work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.we-work .card {
  background: var(--cream);
  border-radius: 12px;
  padding: 36px 28px;
  border: 1px solid var(--line);
  text-align: center;
  transition: transform .4s var(--ease), border-color .25s;
}
.we-work .card:hover { transform: translateY(-6px); border-color: var(--teal); }
.we-work .card-ic {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(61,168,158,.15), rgba(61,168,158,.03));
  border: 1px solid rgba(61,168,158,.25);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; color: var(--teal);
  transition: background .35s, border-color .35s;
}
.we-work .card:hover .card-ic {
  background: linear-gradient(135deg, rgba(61,168,158,.28), rgba(61,168,158,.08));
  border-color: rgba(61,168,158,.5);
}
.we-work .card h4 { font-size: 24px; margin-bottom: 10px; }

/* =============== CONTACT =============== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 80px 0;
}
.contact-block { margin-bottom: 36px; }
.contact-block h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.contact-block p { font-size: 18px; font-weight: 600; line-height: 1.4; }
.contact-block .sm { font-size: 14px; color: var(--mute); font-weight: 400; }
.contact-map {
  aspect-ratio: 4/5;
  border-radius: 12px;
  background: var(--deep);
  position: relative;
  overflow: hidden;
}

.faq { padding: 80px 0; background: var(--paper); border-top: 1px solid var(--line); }
.faq h2 { margin-bottom: 30px; }
.faq-item {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: start;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item .q { font-size: 20px; font-weight: 700; }
.faq-item .a {
  grid-column: 1 / -1;
  color: var(--mute);
  max-width: 70ch;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease), margin-top .4s var(--ease), opacity .4s;
  opacity: 0;
}
.faq-item .a > div { overflow: hidden; }
.faq-item .toggle {
  width: 32px; height: 32px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  transition: transform .4s var(--ease), background .3s, color .3s;
}
.faq-item.open .toggle { transform: rotate(45deg); background: var(--orange); color: #fff; border-color: var(--orange); }
.faq-item.open .a { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }

.contact-cta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 40px 0 80px;
}
.cta-tile {
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 36px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: background .3s, transform .35s var(--ease);
}
.cta-tile:hover { background: var(--teal); transform: translateY(-4px); }
.cta-tile .arr { width: 28px; height: 28px; }

/* =============== FOOTER =============== */
.site-footer {
  background: var(--cream);
  color: var(--ink);
  padding: 60px 0 24px;
  border-top: 4px solid var(--mint);
}
.footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-grid h5 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-grid li {
  font-size: 14px;
  color: var(--ink-soft);
}
.footer-grid li a:hover { color: var(--teal); }
.f-brand h5 { font-size: 14px; }
.f-brand p { font-size: 14px; margin: 0; line-height: 1.7; }
.f-copy {
  max-width: 1240px;
  margin: 16px auto 0;
  padding: 0 var(--pad);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}
.f-copy .copy { font-size: 13px; color: var(--mute); }
.f-mark { width: 56px; height: 56px; }

/* =============== SCROLL REVEALS WITH DEPTH =============== */
.depth {
  opacity: 0;
  transform: translateY(60px) translateZ(-80px) scale(0.96);
  transform-style: preserve-3d;
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.depth.is-in { opacity: 1; transform: translateY(0) translateZ(0) scale(1); }

.depth-l { transform: translateX(-80px) translateZ(-60px) scale(0.96); opacity: 0; transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.depth-l.is-in { transform: translateX(0) translateZ(0) scale(1); opacity: 1; }
.depth-r { transform: translateX(80px) translateZ(-60px) scale(0.96); opacity: 0; transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.depth-r.is-in { transform: translateX(0) translateZ(0) scale(1); opacity: 1; }

.depth-up { opacity: 0; transform: translateY(100px); transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); }
.depth-up.is-in { opacity: 1; transform: translateY(0); }

.depth-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.depth-stagger.is-in > * { opacity: 1; transform: translateY(0); }
.depth-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.depth-stagger.is-in > *:nth-child(2) { transition-delay: 90ms; }
.depth-stagger.is-in > *:nth-child(3) { transition-delay: 180ms; }
.depth-stagger.is-in > *:nth-child(4) { transition-delay: 270ms; }
.depth-stagger.is-in > *:nth-child(5) { transition-delay: 360ms; }
.depth-stagger.is-in > *:nth-child(6) { transition-delay: 450ms; }
.depth-stagger.is-in > *:nth-child(7) { transition-delay: 540ms; }

/* hero pieces parallax */
.parallax-y { will-change: transform; }

/* =============== MOBILE NAV =============== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s, width .3s;
  transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,20,19,.6);
  z-index: 98;
  opacity: 0;
  transition: opacity .3s;
  backdrop-filter: blur(2px);
  pointer-events: none; /* CRITICAL: without this it blocks every tap on mobile */
}
body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }

/* =============== RESPONSIVE =============== */

/* ---- Tablet landscape 1024px ---- */
@media (max-width: 1024px) {
  /* Header */
  .nav-main {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: -100%; bottom: 0;
    width: min(320px, 85vw);
    background: var(--bg-darker);
    z-index: 99;
    padding: 96px 32px 40px;
    gap: 6px;
    transition: right .35s var(--ease);
    overflow-y: auto;
    box-shadow: -8px 0 40px rgba(0,0,0,.4);
  }
  .nav-main.is-open { right: 0; }
  .nav-main a {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-main a:hover, .nav-main a.active { color: var(--mint); }
  .nav-main a.active::after { display: none; }
  .nav-main .sep { display: none; }
  .nav-overlay { display: block; }
  .nav-toggle { display: flex; color: var(--ink); }
  .site-header .nav-toggle { color: #fff; }

  /* General layouts */
  .hero-stage { aspect-ratio: 16/9; }
  .hero-card { position: static; width: 100%; max-width: 100%; transform: none; margin-top: 16px; }
  .testimonials-strip { grid-template-columns: 1fr; }
  .laser-band { grid-template-columns: 1fr; padding: 24px; gap: 16px; }
  .laser-band .laser-vis { display: none; }
  .laser-band .cta-side { padding: 0; justify-content: flex-start; }
  .panels { grid-template-columns: 1fr; }
  .chevron-row { flex-direction: column; }
  .chev::after, .chev::before { display: none; }
  .chev { padding: 20px 24px; }
  .solution-layout { grid-template-columns: 1fr 1fr; }
  .finish-grid { grid-template-columns: repeat(3, 1fr); }
  .stations-row, .ports-list { grid-template-columns: 1fr 1fr; }
  .stats-row, .team-grid, .we-work-grid { grid-template-columns: repeat(3, 1fr); }
  .grades-row { grid-template-columns: 1fr 1fr; }
  .news-grid, .contact-cta-row { grid-template-columns: 1fr 1fr; }
  .pf-grid > * { grid-column: span 12; }
  .feature-grid, .contact-grid, .subhero-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .subhero { padding: 120px 0 70px; min-height: auto; }
}

/* ---- Tablet portrait 768px ---- */
@media (max-width: 768px) {
  .logo-wrap { width: 220px; }
  .hero-stage { aspect-ratio: 4/3; }
  .hero-watermark { font-size: 28px; }
  .solution-layout, .finish-grid { grid-template-columns: 1fr 1fr; }
  .stats-row, .team-grid, .we-work-grid { grid-template-columns: 1fr 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .subhero { padding: 100px 0 60px; min-height: auto; }
  .subhero h1 { font-size: clamp(40px, 10vw, 72px); }
  .pf-grid .pf-item.a { grid-column: span 12; grid-row: span 2; }
  .pf-grid .pf-item.b, .pf-grid .pf-item.c { grid-column: span 6; }
  .pf-grid .pf-item.d, .pf-grid .pf-item.e, .pf-grid .pf-item.f, .pf-grid .pf-item.g { grid-column: span 12; grid-row: span 1; }
  .pf-grid .pf-item.h, .pf-grid .pf-item.i, .pf-grid .pf-item.j { grid-column: span 6; }
  .pf-grid .pf-item.k, .pf-grid .pf-item.l, .pf-grid .pf-item.m { grid-column: span 12; }
  .pf-grid .pf-item.n, .pf-grid .pf-item.o { grid-column: span 12; }
  .pf-grid .pf-item.p, .pf-grid .pf-item.q { grid-column: span 12; }
  .mfoot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---- Mobile 640px ---- */
@media (max-width: 640px) {
  .logo-wrap { width: 210px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); padding: 0 28px 0 14px; }
  .logo-img { width: 170px; height: auto; }
  .header-row { height: 64px; }

  /* ── Hamburger: dark on light background, thicker lines ── */
  .site-header .nav-toggle { color: #2a2a2a; }
  .nav-toggle span { width: 26px; height: 2.5px; border-radius: 2px; }
  .nav-toggle { gap: 6px; }
  /* X state stays correct with the new offsets */
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

  .hero { padding: 20px 0 0; }
  .hero-stage { aspect-ratio: 3/2; }
  .hero-watermark { font-size: 18px; }
  .hero-msg { font-size: 16px; padding: 20px; }

  .testimonials-strip { grid-template-columns: 1fr; }
  .tcell { padding: 28px 20px; }
  .laser-band { padding: 20px; }
  .panels { grid-template-columns: 1fr; }
  .process { margin-top: 32px; }
  .chevron-row { border-radius: 4px; }
  .chev h4 { font-size: 15px; }
  .chev p { font-size: 12px; }

  .subhero { padding: 80px 0 50px; min-height: auto; }
  .subhero h1 { font-size: clamp(36px, 12vw, 60px); }
  .subhero p { font-size: 15px; }
  .service-tags-row { gap: 8px; }
  .s-tag { padding: 8px 14px; font-size: 11px; }

  .solution-layout, .finish-grid, .stations-row, .ports-list, .team-grid, .we-work-grid, .grades-row { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .news-grid, .contact-cta-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .mfoot-grid { grid-template-columns: 1fr; gap: 28px; }
  .mfoot-mega { font-size: clamp(60px, 22vw, 160px); }
  .mfoot-bot { flex-direction: column; gap: 8px; text-align: center; }
  .pf-grid > * { grid-column: span 12; grid-row: span 1; }

  .display-1 { font-size: clamp(32px, 9vw, 52px); }
  .display-2 { font-size: clamp(26px, 7vw, 40px); }

  .feature-grid { grid-template-columns: 1fr; gap: 24px; }
  .feature-section { padding: 60px 0; }
  .grades-row { grid-template-columns: 1fr; }

  .contact-grid { gap: 24px; }
  .contact-form { padding: 28px 20px; }
  .contact-info-block { padding: 20px; }

  .btn { padding: 12px 22px; font-size: 11px; }

  /* Filters wrap on mobile so every category is visible (no off-screen clip) */
  .filters {
    display: flex;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 8px;
    padding-bottom: 4px;
  }
  .filter { flex-shrink: 0; }

  /* Services subnav — horizontal scroll on mobile */
  .svc-subnav-row { padding: 12px 16px; }
  .svc-subnav .s-tag { flex-shrink: 0; white-space: nowrap; }

  /* Team cards with larger photos */
  .team-cards { grid-template-columns: repeat(2, 1fr); }
  .tc-photo { width: 100px; height: 100px; }

  /* Materials carousel arrows */
  .mat-arrow { width: 36px; height: 36px; font-size: 16px; }

  /* Capabilities tags */
  .cap-tags .cap-tag { font-size: 12px; padding: 8px 12px; }

  /* Stats row */
  .stat-cell .v { font-size: 36px; }

  /* Nav header height fix for sticky bars */
  .header-row { height: 64px; }

  /* ── Hide header nav items on very small screens ──
     Keeps the hamburger visible and the layout intact. */
  .lang { display: none; }
  .btn-header-cta { display: none; }
  /* Language: hide the header dropdown, show it inside the menu drawer instead */
  .lang-dd--header { display: none; }
  .lang-dd--mobile {
    display: block;
    width: 100%;
    margin-top: 14px;
  }
  .lang-dd--mobile .lang-dd-btn {
    width: 100%;
    justify-content: space-between;
    font-size: 16px;
    padding: 13px 16px;
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.18);
  }
  .lang-dd--mobile .lang-dd-cur { color: var(--mint); }
  .lang-dd--mobile .lang-dd-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    flex-direction: row; gap: 8px;
    min-width: 0; padding: 8px 0 0;
    background: transparent; border: none; box-shadow: none;
    max-height: 0; overflow: hidden;
    transition: max-height .3s var(--ease), padding .3s var(--ease);
  }
  .lang-dd--mobile.open .lang-dd-menu { max-height: 80px; }
  .lang-dd--mobile .lang-dd-menu a {
    flex: 1;
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 11px 0;
    font-size: 14px;
  }
  .lang-dd--mobile .lang-dd-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }

  /* ── Reduce subhero h1 so it doesn't overflow ── */
  .subhero h1 { font-size: clamp(24px, 8vw, 36px); }

  /* ── display-1/2 already set above but tighten minimums ── */
  .display-1 { font-size: clamp(24px, 8vw, 40px); }
  .display-2 { font-size: clamp(20px, 6vw, 32px); }

  /* ── Kill scroll-reveal on mobile — depth-l/depth-r translateX offsets
     create horizontal overflow that iOS Safari detects as scrollable content,
     which causes it to cancel tap events on every interactive element.
     Keep elements fully visible and in-place from the start on phones. ── */
  .depth,
  .depth-l,
  .depth-r,
  .depth-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .depth-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Map section (About page) ── */
.map-section { padding: 0 0 60px; background: var(--bg-darker); }
/* Slight brightness boost so the sea is less pure black */
#shipyard-map { filter: brightness(1.35); }
.map-block {
  border-radius: 16px;
  overflow: hidden;
  background: var(--deep);
  position: relative;
  aspect-ratio: 16/8;
}
.ports-list {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.region { border-top: 2px solid var(--teal); padding-top: 24px; }
.region h4 { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.region ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.region li {
  font-size: 15px; color: var(--ink-soft);
  padding: 8px 0; border-bottom: 1px solid var(--line);
  position: relative; padding-left: 20px;
  transition: padding-left .25s, color .25s;
}
.region li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px; background: var(--mint);
  border-radius: 50%; transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .region li:hover { padding-left: 28px; color: var(--teal); }
}
.stations-row {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.station-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 32px 28px;
  transition: transform .4s var(--ease), border-color .25s;
}
@media (hover: hover) and (pointer: fine) {
  .station-card:hover { transform: translateY(-6px); border-color: var(--teal); }
}
.station-card .num { font-size: 12px; font-weight: 800; letter-spacing: .22em; color: var(--mute); }
.station-card h4 { font-size: 22px; margin: 12px 0; }
.station-card p { font-size: 14px; color: var(--mute); }
@media (max-width: 960px) {
  .ports-list { grid-template-columns: 1fr 1fr; }
  .stations-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ports-list, .stations-row { grid-template-columns: 1fr; }
}