/* ============================================================
   The Data Harbour — custom styles
   Nautical chart aesthetic. Extends Tailwind theme tokens.
   ============================================================ */

:root{
  --ink:#0C2231; --ink-deep:#07161F; --ink-soft:#173849;
  --paper:#F2ECDD; --paper-2:#E8DFC9; --paper-3:#DFD4BB;
  --brass:#B0792A; --brass-2:#CB9E4E; --signal:#B23A2E; --sea:#2E6E78;
}

html{ scroll-behavior:smooth; scroll-padding-top:5rem; }
body{ font-feature-settings:"ss01"; }
::selection{ background:var(--brass); color:var(--paper); }

/* ---------- Nautical chart grid background ---------- */
.chart-grid{
  background-image:
    linear-gradient(to right, rgba(12,34,49,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12,34,49,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
}
.chart-grid{ position:relative; }

/* ---------- Ink (dark) textured section ---------- */
.ink-grain{
  background-color:var(--ink);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(176,121,42,0.10), transparent 42%),
    radial-gradient(circle at 82% 75%, rgba(46,110,120,0.14), transparent 45%),
    linear-gradient(to bottom, var(--ink), var(--ink-deep));
}
.ink-grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(to right, rgba(242,236,221,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,236,221,0.04) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* ---------- Compass rose (hero) ---------- */
.compass-rose{
  position:absolute; right:-160px; top:50%; transform:translateY(-50%);
  width:620px; height:620px; opacity:.10; pointer-events:none;
  background:
    conic-gradient(from 0deg, transparent 0 44deg, rgba(12,34,49,.6) 45deg 46deg, transparent 47deg 90deg,
      rgba(12,34,49,.6) 91deg 92deg, transparent 93deg);
  border-radius:50%;
  -webkit-mask: radial-gradient(circle, black 40%, transparent 71%);
          mask: radial-gradient(circle, black 40%, transparent 71%);
}
.compass-rose::before, .compass-rose::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(12,34,49,.25);
}
.compass-rose::after{ inset:60px; border-style:dashed; }
@media (max-width:768px){ .compass-rose{ width:360px; height:360px; right:-120px; opacity:.07; } }

/* ---------- NAV ---------- */
#nav.scrolled{
  background:rgba(242,236,221,0.92);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(12,34,49,0.10);
}
.nav-link{
  position:relative; font-size:.9rem; color:var(--ink);
  display:flex; align-items:baseline; gap:.4rem; transition:color .25s;
}
.nav-link .num{ font-family:"IBM Plex Mono",monospace; font-size:.6rem; color:var(--brass); letter-spacing:.1em; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:var(--brass); transition:width .3s;
}
.nav-link:hover{ color:var(--brass); }
.nav-link:hover::after{ width:100%; }
.menu-bar{ width:22px; height:2px; background:var(--ink); transition:.3s; }
#menuBtn.open .menu-bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
#menuBtn.open .menu-bar:nth-child(2){ opacity:0; }
#menuBtn.open .menu-bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.m-link{ display:flex; align-items:center; padding:.75rem 0; font-size:1.1rem; border-bottom:1px solid rgba(12,34,49,.07); }
.m-link:last-of-type{ border-bottom:0; }

/* ---------- Buttons ---------- */
.btn-brass{
  display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.4rem;
  background:var(--brass); color:var(--paper); font-weight:600; font-size:.85rem;
  border-radius:.25rem; letter-spacing:.01em; transition:.25s; border:1px solid var(--brass);
}
.btn-brass:hover{ background:#9c6a23; transform:translateY(-1px); box-shadow:0 8px 24px -8px rgba(176,121,42,.55); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.4rem;
  background:transparent; color:var(--ink); font-weight:600; font-size:.85rem;
  border-radius:.25rem; border:1px solid rgba(12,34,49,.30); transition:.25s;
}
.btn-ghost:hover{ border-color:var(--ink); background:rgba(12,34,49,.04); }

/* ---------- Labels / eyebrows ---------- */
.section-eyebrow{ display:inline-flex; align-items:center; font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass); }
.section-eyebrow-light{ font-family:"IBM Plex Mono",monospace; font-size:.72rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--brass-2); }
.chip-label{ display:block; font-family:"IBM Plex Mono",monospace; font-size:.65rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); opacity:.7; margin-bottom:.35rem; }
.mono-num{ font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--brass); letter-spacing:.1em; }

/* ---------- Stat chips (hero) ---------- */
.stat-chip{ background:var(--paper); padding:1.4rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; }
.stat-chip .chip-label{ margin-bottom:0; }
.band-item{ padding:1.6rem 1.2rem; display:flex; flex-direction:column; gap:.3rem; }

/* ---------- Cards ---------- */
.card-title{ font-family:"Fraunces",serif; font-size:1.15rem; font-weight:600; color:var(--ink); }
.card-body{ font-size:.9rem; line-height:1.6; color:var(--ink-soft); }
.mission-card{ background:var(--paper); border:1px solid rgba(12,34,49,.10); border-radius:.25rem;
  padding:1.5rem; transition:.3s; }
.mission-card:hover{ border-color:var(--brass); transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(12,34,49,.4); }
.mission-card .mono-num{ display:block; margin-bottom:.8rem; }

.service-card{ background:var(--paper); border:1px solid rgba(12,34,49,.10); border-radius:.25rem;
  padding:1.75rem; transition:.3s; position:relative; overflow:hidden; }
.service-card::before{ content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--brass); transform:scaleY(0); transform-origin:top; transition:.3s; }
.service-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(12,34,49,.45); border-color:rgba(176,121,42,.4); }
.service-card:hover::before{ transform:scaleY(1); }
.svc-icon{ width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; background:var(--paper-2); border:1px solid rgba(12,34,49,.10); border-radius:.25rem; }

/* ---------- Voyage timeline ---------- */
.voyage{ display:grid; gap:1.25rem; grid-template-columns:repeat(4,1fr); position:relative; }
.voyage::before{ content:""; position:absolute; top:22px; left:5%; right:5%; height:1px;
  background:repeating-linear-gradient(to right, var(--brass) 0 8px, transparent 8px 16px); opacity:.5; }
.voyage-step{ background:var(--paper); border:1px solid rgba(12,34,49,.10); border-radius:.25rem; padding:1.4rem; position:relative; z-index:1; }
.voyage-dot{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; background:var(--ink); color:var(--paper); font-family:"IBM Plex Mono",monospace;
  font-size:.85rem; margin-bottom:1rem; }
@media (max-width:900px){ .voyage{ grid-template-columns:1fr 1fr; } .voyage::before{ display:none; } }
@media (max-width:520px){ .voyage{ grid-template-columns:1fr; } }

/* ---------- Helm (dark) cards ---------- */
.helm-card{ border-left:1px solid rgba(242,236,221,.14); padding-left:1.25rem; }

/* ---------- Pricing ---------- */
.price-card{ background:var(--paper); border:1px solid rgba(12,34,49,.12); border-radius:.25rem;
  padding:2rem; display:flex; flex-direction:column; transition:.3s; position:relative; }
.price-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px -24px rgba(12,34,49,.5); }
.price-card.featured{ background:var(--ink); color:var(--paper); border-color:var(--brass); }
.price-list{ list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.price-list li{ font-size:.85rem; color:var(--ink-soft); padding-left:1.4rem; position:relative; }
.price-list li::before{ content:"⚓"; position:absolute; left:0; font-size:.7rem; color:var(--brass); top:.15rem; }
.price-list-dark li{ color:rgba(242,236,221,.75); }
.price-list-dark li::before{ color:var(--brass-2); }
.pop-badge{ position:absolute; top:-11px; right:1.5rem; background:var(--brass); color:var(--paper);
  font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:.25rem; }

/* ---------- Testimonials ---------- */
.log-card{ background:var(--paper); border:1px solid rgba(12,34,49,.10); border-radius:.25rem; padding:1.75rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:1.25rem; transition:.3s; }
.log-card:hover{ border-color:var(--brass); transform:translateY(-3px); }
.log-by{ display:flex; flex-direction:column; gap:.2rem; border-top:1px solid rgba(12,34,49,.10); padding-top:1rem; font-weight:600; }
.log-role{ font-family:"IBM Plex Mono",monospace; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); font-weight:400; }

/* ---------- Quote ---------- */
.chart-quote{ font-family:"Fraunces",serif; font-style:italic; font-size:1.15rem; line-height:1.5;
  color:var(--ink); border-left:3px solid var(--brass); padding-left:1.1rem; }

/* ---------- FAQ ---------- */
.faq-item{ padding:1.3rem 0; }
.faq-item summary{ font-family:"Fraunces",serif; font-size:1.15rem; color:var(--ink); cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:"IBM Plex Mono",monospace; color:var(--brass); font-size:1.3rem; transition:.3s; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ color:var(--ink-soft); font-size:.92rem; line-height:1.6; margin-top:.8rem; max-width:60ch; }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-family:"IBM Plex Mono",monospace; font-size:.65rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); }
.field input, .field textarea{
  background:var(--paper); border:1px solid rgba(12,34,49,.20); border-radius:.25rem;
  padding:.7rem .85rem; font-family:inherit; font-size:.9rem; color:var(--ink); transition:.2s; width:100%;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(176,121,42,.15); }
.field input.invalid, .field textarea.invalid{ border-color:var(--signal); box-shadow:0 0 0 3px rgba(178,58,46,.12); }

.contact-panel{ background:var(--paper); border:1px solid rgba(12,34,49,.10); border-radius:.25rem;
  padding:2rem; display:flex; flex-direction:column; gap:1.1rem; }
.direct-line{ display:flex; flex-direction:column; gap:.15rem; padding:.85rem 0; border-bottom:1px solid rgba(12,34,49,.08);
  color:var(--ink); font-weight:600; transition:.2s; }
.direct-line:hover{ color:var(--brass); }
.social-link{ font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(12,34,49,.20); border-radius:.25rem; padding:.45rem .8rem; transition:.2s; }
.social-link:hover{ border-color:var(--brass); color:var(--brass); }

.nl-input{ flex:1; background:rgba(242,236,221,.08); border:1px solid rgba(242,236,221,.25); border-radius:.25rem;
  padding:.8rem 1rem; color:var(--paper); font-family:inherit; font-size:.9rem; }
.nl-input::placeholder{ color:rgba(242,236,221,.4); }
.nl-input:focus{ outline:none; border-color:var(--brass-2); }

/* ---------- Back to top ---------- */
.to-top{ position:fixed; bottom:1.5rem; left:1.5rem; width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--paper); font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:.3s; z-index:40; box-shadow:0 8px 24px -10px rgba(12,34,49,.6); }
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ background:var(--brass); transform:translateY(-2px); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ============================================================
   CHATBOT
   ============================================================ */
#chatRoot{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:60; }
.chat-toggle{ width:60px; height:60px; border-radius:50%; background:var(--brass); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(176,121,42,.6); transition:.3s; border:2px solid var(--brass-2); }
.chat-toggle:hover{ transform:scale(1.06) translateY(-2px); }
.chat-toggle.open .chat-toggle-icon{ transform:rotate(360deg); }
.chat-toggle-icon{ transition:transform .5s; }
.chat-toggle.is-hidden{ opacity:0; transform:scale(.7); pointer-events:none; }

.chat-panel{ position:absolute; bottom:74px; right:0; width:360px; max-width:calc(100vw - 3rem);
  height:520px; max-height:calc(100dvh - 7rem); background:var(--paper); border:1px solid rgba(12,34,49,.15);
  border-radius:.5rem; box-shadow:0 30px 70px -20px rgba(7,22,31,.55); display:flex; flex-direction:column;
  overflow:hidden; transform-origin:bottom right; animation:chatIn .28s ease; }
.chat-panel.is-closed{ display:none !important; }
@keyframes chatIn{ from{ opacity:0; transform:translateY(12px) scale(.96);} to{opacity:1; transform:none;} }
.chat-header{ background:var(--ink); color:var(--paper); padding:1rem 1.1rem; display:flex; justify-content:space-between; align-items:center;
  background-image:radial-gradient(circle at 85% 20%, rgba(176,121,42,.25), transparent 55%); }
.chat-close{ font-size:1.6rem; line-height:1; color:var(--paper); opacity:.7; cursor:pointer; transition:.2s; }
.chat-close:hover{ opacity:1; }
.chat-body{ flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.75rem;
  background-image:linear-gradient(to right, rgba(12,34,49,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12,34,49,0.035) 1px, transparent 1px); background-size:30px 30px; }
.msg{ max-width:82%; padding:.65rem .85rem; border-radius:.5rem; font-size:.85rem; line-height:1.5; }
.msg.bot{ background:var(--paper-2); color:var(--ink); align-self:flex-start; border:1px solid rgba(12,34,49,.08); border-bottom-left-radius:.15rem; }
.msg.user{ background:var(--ink); color:var(--paper); align-self:flex-end; border-bottom-right-radius:.15rem; }
.msg.bot a{ color:var(--brass); text-decoration:underline; }
.typing{ display:flex; gap:4px; align-items:center; }
.typing span{ width:6px; height:6px; border-radius:50%; background:var(--ink-soft); opacity:.5; animation:blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:.9; transform:translateY(-3px);} }
.chat-suggestions{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.5rem .8rem; border-top:1px solid rgba(12,34,49,.08); }
.chat-chip{ font-size:.72rem; padding:.35rem .6rem; border:1px solid rgba(12,34,49,.2); border-radius:1rem;
  cursor:pointer; transition:.2s; color:var(--ink-soft); background:var(--paper); }
.chat-chip:hover{ border-color:var(--brass); color:var(--brass); }
.chat-input-row{ display:flex; gap:.5rem; padding:.8rem; border-top:1px solid rgba(12,34,49,.10); background:var(--paper); }
#chatInput{ flex:1; border:1px solid rgba(12,34,49,.2); border-radius:1.4rem; padding:.6rem .95rem; font-family:inherit; font-size:.85rem; color:var(--ink); }
#chatInput:focus{ outline:none; border-color:var(--brass); }
.chat-send{ width:40px; height:40px; border-radius:50%; background:var(--brass); color:var(--paper); font-size:1.1rem; cursor:pointer; transition:.2s; flex-shrink:0; }
.chat-send:hover{ background:#9c6a23; }
@media (max-width:480px){ #chatRoot{ bottom:1rem; right:1rem; } .to-top{ bottom:1rem; left:1rem; } }

/* ============================================================
   MULTI-PAGE + MARKETING additions
   ============================================================ */
/* Logo in nav / footer */
.brand-logo{ height:56px; width:auto; display:block; image-rendering:-webkit-optimize-contrast; }
.footer-logo{ height:80px; width:auto; image-rendering:-webkit-optimize-contrast; }
@media (max-width:768px){ .brand-logo{ height:46px; } .footer-logo{ height:64px; } }

.nav-link.active{ color:var(--brass); }
.nav-link.active::after{ width:100%; }

/* Inner-page header band */
.page-head{ padding:8rem 0 3.5rem; background:var(--paper); position:relative; }
.page-head.chart-grid{ background:var(--paper); }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; font-family:"IBM Plex Mono",monospace;
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); }
.breadcrumb a{ color:var(--brass); } .breadcrumb span{ opacity:.5; }

/* AdSense slot placeholder */
.ad-slot{ margin:2.5rem auto; max-width:1152px; text-align:center; }
.ad-slot ins{ display:block; }
.ad-slot .ad-note{ font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); opacity:.4; }

/* Cookie banner */
.cookie-banner{ position:fixed; bottom:1rem; left:1rem; right:1rem; max-width:560px; margin:0 auto;
  background:var(--ink); color:var(--paper); border:1px solid var(--brass); border-radius:.35rem;
  padding:1.1rem 1.25rem; z-index:70; display:flex; flex-wrap:wrap; gap:.9rem; align-items:center;
  justify-content:space-between; box-shadow:0 20px 50px -18px rgba(7,22,31,.6); }
.cookie-banner p{ font-size:.82rem; flex:1; min-width:200px; color:rgba(242,236,221,.85); }
.cookie-banner a{ color:var(--brass-2); text-decoration:underline; }
.cookie-actions{ display:flex; gap:.6rem; }
.cookie-banner .btn-ghost{ color:var(--paper); border-color:rgba(242,236,221,.4); padding:.55rem 1rem; }
.cookie-banner .btn-ghost:hover{ background:rgba(242,236,221,.08); border-color:var(--paper); }
.cookie-banner .btn-brass{ padding:.55rem 1rem; }

/* Prose (privacy page) */
.prose h2{ font-family:"Fraunces",serif; font-size:1.5rem; margin-top:2rem; color:var(--ink); }
.prose p, .prose li{ color:var(--ink-soft); line-height:1.7; margin-top:.75rem; }
.prose ul{ list-style:disc; padding-left:1.3rem; }

/* ---------- Leadership Team ---------- */
.leader-wrap{ border:1px solid rgba(242,236,221,.18); border-radius:.35rem; padding:2.5rem;
  display:grid; gap:2.5rem; grid-template-columns:1fr 1fr; }
@media (max-width:820px){ .leader-wrap{ grid-template-columns:1fr; padding:1.75rem; gap:2rem; } }
.leader{ display:grid; grid-template-columns:auto 1fr; gap:1.25rem; align-items:start; }
.leader-mono{ width:66px; height:66px; flex-shrink:0; border:1px solid var(--brass);
  display:flex; align-items:center; justify-content:center; font-family:"Fraunces",serif;
  font-size:1.4rem; color:var(--brass-2); letter-spacing:.05em; border-radius:.15rem; }
.leader-name{ font-family:"Fraunces",serif; font-size:1.5rem; color:var(--paper); line-height:1.1; }
.leader-role{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin-top:.4rem; }
.leader-bio{ grid-column:1 / -1; color:rgba(242,236,221,.72); font-size:.9rem; line-height:1.65; margin-top:.25rem; }
@media (min-width:560px){ .leader-bio{ grid-column:2 / -1; margin-top:1rem; } }