/* ============================================================
   Harbor Pointe Defense Strategies — theme.css
   All design tokens, layout, and component styles.
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  --hp-black:    #030303;
  --hp-white:    #e8e8e8;
  --hp-body:     #b0b0b0;
  --hp-meta:     #686868;
  --hp-border:   rgba(255,255,255,0.09);
  --hp-borderM:  rgba(255,255,255,0.18);
  --hp-serif:    'Cormorant Garamond','Palatino Linotype',Georgia,serif;
  --hp-sc:       'Cormorant SC','Palatino Linotype',Georgia,serif;
  --hp-nav-h:    54px;
  --hp-foot-h:   50px;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  background: var(--hp-black);
  color: var(--hp-body);
  font-family: var(--hp-serif);
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width:100%; height:auto; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; background:none; border:none; font-family:inherit; }

/* ── Utility ────────────────────────────────────────────────── */
.hp-sr-only {
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.hp-grid-texture {
  position:absolute; inset:0; pointer-events:none;
  background-image: repeating-linear-gradient(
    90deg, transparent, transparent 99px,
    rgba(255,255,255,0.011) 99px, rgba(255,255,255,0.011) 100px
  );
}

/* ── Splash ─────────────────────────────────────────────────── */
#hp-splash {
  position:fixed; inset:0; z-index:9999;
  background: var(--hp-black);
  background-image: repeating-linear-gradient(
    90deg, transparent, transparent 99px,
    rgba(255,255,255,0.011) 99px, rgba(255,255,255,0.011) 100px
  );
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:25vh;
  transition: opacity 1.4s ease;
}

.hp-splash-vig {
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 100%);
}

#hp-splash-stmt {
  position:absolute; text-align:center; max-width:720px;
  padding:26vh 2rem 0; opacity:0; transition:opacity 1.2s ease;
}

#hp-splash-stmt p {
  font-family: var(--hp-serif); font-weight:400; font-style:italic;
  font-size: clamp(2.2rem,4.2vw,4rem);
  line-height:1.3; color:var(--hp-white);
}

#hp-splash-mark {
  position:absolute; text-align:center; padding-top:25vh;
  opacity:0; transition:opacity 1.1s ease;
}

.hp-splash-mark-inner {
  display:inline-flex; flex-direction:column; align-items:stretch;
}

.hp-splash-hp-row {
  display:flex; align-items:flex-end; line-height:1; margin-bottom:0.7rem;
}

.hp-splash-hp {
  font-family: var(--hp-serif); font-weight:500;
  font-size: clamp(6rem,12vw,11rem);
  letter-spacing:-0.03em; color:var(--hp-white); line-height:1;
}

.hp-splash-dot {
  font-family: var(--hp-serif); font-weight:500;
  font-size: clamp(6rem,12vw,11rem);
  color:#b0b0b0; line-height:1; margin-bottom:0.04em;
}

.hp-splash-rule {
  height:1px; background:rgba(255,255,255,0.45); margin-bottom:0.7rem;
}

.hp-splash-firm {
  font-family: var(--hp-sc); font-weight:400;
  font-size:1.2rem; letter-spacing:0.13em; color:var(--hp-body); text-align:center;
}

/* ── Vignette ───────────────────────────────────────────────── */
#hp-vignette {
  position:fixed; inset:0; pointer-events:none; z-index:800;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.38) 100%);
}

/* ── App Shell ──────────────────────────────────────────────── */
#hp-app {
  display:flex; flex-direction:column; min-height:100vh;
}

.hp-nav-block {
  height: var(--hp-nav-h); flex-shrink:0;
}

#hp-main {
  flex:1; overflow-x:hidden;
}

/* ── Navigation ─────────────────────────────────────────────── */
#hp-nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height: var(--hp-nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3.5rem;
  background: rgba(3,3,3,0.98);
  border-bottom: 1px solid var(--hp-border);
}

.hp-nav-mark {
  display:flex; align-items:baseline; gap:0; line-height:1; text-decoration:none;
}

.hp-nav-hp {
  font-family: var(--hp-serif); font-weight:500; font-size:1.5rem;
  letter-spacing:-0.02em; color:var(--hp-white); line-height:1;
  opacity:0.85; transition:opacity 0.2s;
}

.hp-nav-dot {
  font-family: var(--hp-serif); font-weight:500; font-size:1.5rem;
  line-height:1; color:#606060; transition:color 0.2s;
}

.hp-nav-mark:hover .hp-nav-hp { opacity:1; }
.hp-nav-mark:hover .hp-nav-dot { color:#909090; }

.hp-nav-links {
  display:flex; gap:2.4rem; list-style:none; align-items:center;
}

.hp-nav-link {
  font-family: var(--hp-sc); font-weight:400; font-size:0.65rem;
  letter-spacing:0.26em; color:var(--hp-meta);
  text-decoration:none; transition:color 0.2s ease;
}

.hp-nav-link.active,
.hp-nav-link:hover { color:var(--hp-white); }

.hp-nav-spacer { width:40px; }

/* ── Footer ─────────────────────────────────────────────────── */
#hp-footer {
  border-top:1px solid var(--hp-border);
  padding:0 3.5rem; height:var(--hp-foot-h);
  display:flex; align-items:center; justify-content:space-between;
  background:#020202; flex-shrink:0;
}

.hp-foot-left {
  font-family: var(--hp-sc); font-weight:400; font-size:0.54rem;
  letter-spacing:0.14em; color:var(--hp-meta);
}

.hp-foot-link {
  color:var(--hp-meta); text-decoration:none; transition:color 0.2s;
}

.hp-foot-link:hover { color:var(--hp-white); }

.hp-foot-mark {
  display:flex; align-items:baseline; line-height:1;
}

.hp-foot-hp {
  font-family: var(--hp-serif); font-weight:500; font-size:1rem;
  letter-spacing:-0.02em; color:var(--hp-meta); line-height:1;
}

.hp-foot-dot {
  font-family: var(--hp-serif); font-weight:500; font-size:1rem;
  color:#484848; line-height:1;
}

.hp-foot-phone {
  font-family: var(--hp-serif); font-weight:500; font-size:0.75rem;
  letter-spacing:0.06em; color:var(--hp-meta);
}

/* ── Home ───────────────────────────────────────────────────── */
.hp-page-home {
  position:relative;
  min-height: calc(100vh - var(--hp-nav-h) - var(--hp-foot-h));
  display:flex; flex-direction:column; justify-content:center;
  padding:0 3.5rem; overflow:hidden;
}

.hp-home-bg {
  position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 70% at 65% 45%, #0c0c10 0%, transparent 65%), var(--hp-black);
}

.hp-home-inner {
  position:relative; z-index:2; max-width:600px;
}

.hp-home-h1 {
  font-family: var(--hp-serif); font-weight:500;
  font-size: clamp(2.8rem,5.5vw,5rem);
  line-height:1.04; letter-spacing:-0.02em; color:var(--hp-white); margin-bottom:2rem;
}

.hp-home-h1 em { font-style:italic; color:var(--hp-body); }

.hp-home-lede {
  font-family: var(--hp-serif); font-weight:400; font-size:1rem;
  line-height:1.9; color:var(--hp-body); max-width:500px; margin-bottom:1.6rem;
}

.hp-home-descriptor {
  font-family: var(--hp-sc); font-weight:400; font-size:0.6rem;
  letter-spacing:0.32em; color:var(--hp-body); margin-bottom:0.6rem;
}

.hp-home-case-types {
  font-family: var(--hp-sc); font-weight:400; font-size:0.62rem;
  letter-spacing:0.18em; color:var(--hp-body); margin-bottom:3rem;
}

.hp-home-cta {
  display:inline-block;
  font-family: var(--hp-serif); font-weight:500; font-size:1.1rem;
  letter-spacing:0.04em;
  background:rgba(255,255,255,0.07); border:1px solid var(--hp-borderM);
  color:var(--hp-white); padding:1rem 2.2rem;
  transition:background 0.2s ease; text-decoration:none;
}

.hp-home-cta:hover { background:rgba(255,255,255,0.12); }

.hp-home-rule {
  height:1px; background:var(--hp-border); margin-top:2rem; max-width:320px;
}

.hp-home-principal {
  font-family: var(--hp-sc); font-weight:400; font-size:0.58rem;
  letter-spacing:0.22em; color:var(--hp-meta); margin-top:1.2rem;
}

.hp-home-credential {
  font-family: var(--hp-serif); font-weight:400; font-style:italic;
  font-size:0.88rem; line-height:1.8; color:var(--hp-meta);
  margin-top:1rem; max-width:500px;
}

/* ── Doctrine ───────────────────────────────────────────────── */
.hp-page-doctrine {
  padding:4rem 3.5rem; max-width:740px;
}

.hp-doctrine-quote {
  font-family: var(--hp-serif); font-weight:400; font-size:1.8rem;
  line-height:1.5; color:var(--hp-white); font-style:italic;
  margin-bottom:1rem; quotes:none; border:none; padding:0;
}

.hp-doctrine-attribution {
  font-family: var(--hp-sc); font-weight:400; font-size:0.58rem;
  letter-spacing:0.24em; color:var(--hp-meta); margin-bottom:2rem;
}

.hp-doctrine-rule {
  height:1px; background:rgba(255,255,255,0.14); margin-bottom:3.5rem;
}

.hp-doctrine-p {
  font-family: var(--hp-serif); font-weight:400; font-size:1rem;
  line-height:2; color:var(--hp-body); max-width:680px; margin-bottom:2rem;
}

.hp-doctrine-emphasis {
  font-family: var(--hp-serif); font-weight:500; font-size:1rem;
  line-height:2; color:var(--hp-white); max-width:680px; margin-bottom:2rem;
}

.hp-doctrine-inline-em { font-weight:500; color:var(--hp-white); }

.hp-doctrine-independence-rule {
  height:1px; background:var(--hp-border); margin:2rem 0; max-width:680px;
}

/* ── Architecture ───────────────────────────────────────────── */
.hp-page-arch {
  padding:4rem 3.5rem; max-width:740px;
}

.hp-arch-opener {
  font-family: var(--hp-serif); font-weight:400; font-size:0.95rem;
  line-height:1.8; color:var(--hp-meta); margin-bottom:1.4rem; font-style:italic;
}

.hp-arch-h1 {
  font-family: var(--hp-serif); font-weight:500;
  font-size: clamp(2.2rem,3.8vw,3.2rem);
  line-height:1.06; letter-spacing:-0.015em; color:var(--hp-white); margin-bottom:1.4rem;
}

.hp-arch-lede {
  font-family: var(--hp-serif); font-weight:400; font-size:1rem;
  line-height:1.9; color:var(--hp-body); max-width:600px;
}

.hp-arch-top-rule { height:1px; background:var(--hp-border); margin:2.5rem 0 0; }

.hp-arch-item {
  padding:2.2rem 0; border-bottom:1px solid var(--hp-border);
}

.hp-arch-num {
  font-family: var(--hp-sc); font-weight:400; font-size:0.65rem;
  letter-spacing:0.28em; color:rgba(232,232,232,0.45); margin-bottom:0.55rem;
}

.hp-arch-title {
  font-family: var(--hp-serif); font-weight:500; font-size:1.22rem;
  letter-spacing:0.005em; color:var(--hp-white); margin-bottom:0.7rem; line-height:1.3;
}

.hp-arch-body {
  font-family: var(--hp-serif); font-weight:400; font-size:1rem;
  line-height:1.9; color:var(--hp-body);
}

.hp-arch-supp-group { border-top:1px solid var(--hp-border); }

.hp-arch-item-supp {
  padding:1.8rem 0; border-bottom:1px solid var(--hp-border);
}

.hp-arch-num-supp {
  font-family: var(--hp-sc); font-weight:400; font-size:0.65rem;
  letter-spacing:0.28em; color:var(--hp-meta); margin-bottom:0.55rem;
}

.hp-arch-title-supp {
  font-family: var(--hp-serif); font-weight:500; font-size:1.05rem;
  letter-spacing:0.005em; color:var(--hp-body); margin-bottom:0.6rem; line-height:1.3;
}

.hp-arch-body-supp {
  font-family: var(--hp-serif); font-weight:400; font-size:0.92rem;
  line-height:1.9; color:var(--hp-meta);
}

.hp-arch-closing-rule { height:1px; background:var(--hp-border); margin-top:3rem; }

.hp-arch-closing {
  font-family: var(--hp-serif); font-weight:400; font-style:italic;
  font-size:1rem; line-height:1.9; color:var(--hp-white); margin-top:1.8rem;
}

/* ── Engage ─────────────────────────────────────────────────── */
.hp-page-engage {
  min-height: calc(100vh - var(--hp-nav-h) - var(--hp-foot-h));
  display:flex; align-items:flex-start;
  padding:8vh 3.5rem 4rem;
}

.hp-engage-inner { max-width:580px; }

.hp-engage-h1 {
  font-family: var(--hp-serif); font-weight:500;
  font-size: clamp(2.2rem,3.8vw,3.2rem);
  line-height:1.06; letter-spacing:-0.015em; color:var(--hp-white); margin-bottom:1.2rem;
}

.hp-engage-operational {
  font-family: var(--hp-sc); font-weight:400; font-size:0.58rem;
  letter-spacing:0.26em; color:var(--hp-meta); margin-bottom:1.8rem;
}

.hp-engage-phone {
  font-family: var(--hp-serif); font-weight:500; font-size:4rem;
  letter-spacing:-0.03em; line-height:1; color:var(--hp-white); margin-bottom:0.7rem;
}

.hp-engage-principal {
  font-family: var(--hp-sc); font-weight:400; font-size:0.56rem;
  letter-spacing:0.22em; color:var(--hp-meta); margin-bottom:1.8rem;
}

.hp-engage-rule { height:1px; background:var(--hp-border); margin-bottom:1.8rem; }

.hp-engage-rows { display:flex; flex-direction:column; gap:0.8rem; }

.hp-engage-row { display:flex; gap:1.5rem; align-items:baseline; }

.hp-engage-label {
  font-family: var(--hp-sc); font-weight:400; font-size:0.54rem;
  letter-spacing:0.26em; color:var(--hp-meta); width:7rem; flex-shrink:0;
}

.hp-engage-value {
  font-family: var(--hp-serif); font-weight:400; font-size:0.92rem; color:var(--hp-body);
}

.hp-engage-email {
  font-family: var(--hp-serif); font-weight:400; font-size:0.92rem;
  color:var(--hp-white); text-decoration:none; transition:text-decoration 0.1s;
}

.hp-engage-email:hover { text-decoration:underline; }

/* ── Terms ──────────────────────────────────────────────────── */
.hp-page-terms {
  padding:4rem 3.5rem; max-width:740px;
}

.hp-terms-h1 {
  font-family: var(--hp-serif); font-weight:500;
  font-size: clamp(2.2rem,3.8vw,3.2rem);
  line-height:1.06; letter-spacing:-0.015em; color:var(--hp-white); margin-bottom:1.8rem;
}

.hp-terms-intro {
  font-family: var(--hp-serif); font-weight:400; font-size:1rem;
  line-height:1.9; color:var(--hp-body); margin-bottom:4rem;
}

.hp-terms-count {
  font-family: var(--hp-sc); font-weight:400; font-size:0.5rem;
  letter-spacing:0.38em; color:var(--hp-meta); margin-bottom:2rem;
}

.hp-terms-toc { display:flex; flex-direction:column; gap:0.65rem; margin-bottom:3rem; }

.hp-terms-toc-row {
  display:flex; gap:1.5rem; align-items:baseline; cursor:pointer;
}

.hp-terms-toc-row:hover .hp-toc-sec,
.hp-terms-toc-row:hover .hp-toc-title { color:var(--hp-body); }

.hp-toc-sec {
  font-family: var(--hp-sc); font-weight:400; font-size:0.52rem;
  letter-spacing:0.2em; color:var(--hp-meta); width:1.5rem; flex-shrink:0;
  transition:color 0.2s;
}

.hp-toc-title {
  font-family: var(--hp-sc); font-weight:400; font-size:0.52rem;
  letter-spacing:0.14em; color:var(--hp-meta); transition:color 0.2s;
}

.hp-terms-top-rule { height:1px; background:var(--hp-border); }

/* Accordion */
.hp-acc-item { border-bottom:1px solid var(--hp-border); }

.hp-acc-header {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 0; cursor:pointer; user-select:none;
  background:none; border:none; text-align:left;
}

.hp-acc-header:hover .hp-acc-title { color:var(--hp-white); }

.hp-acc-left { display:flex; gap:2rem; align-items:baseline; }

.hp-acc-sec {
  font-family: var(--hp-sc); font-weight:400; font-size:0.58rem;
  letter-spacing:0.22em; color:var(--hp-meta); flex-shrink:0;
}

.hp-acc-title {
  font-family: var(--hp-serif); font-weight:500; font-size:1.05rem;
  color:#cccccc; transition:color 0.2s;
}

.hp-acc-title.open { color:var(--hp-white); }

.hp-acc-icon {
  color:var(--hp-meta); font-size:0.75rem; display:inline-block;
  line-height:1; flex-shrink:0; margin-left:2rem;
  transition:transform 0.28s;
}

.hp-acc-icon.open { transform:rotate(45deg); }

.hp-acc-body {
  overflow:hidden;
  /* Height is animated via JS using max-height */
  max-height:0;
  transition:max-height 0.32s cubic-bezier(0.4,0,0.2,1);
}

.hp-acc-body:not([hidden]) {
  /* When not hidden, JS sets explicit max-height */
}

.hp-acc-body-inner {
  padding:1.8rem 0 2.5rem 4.2rem;
}

.hp-acc-p {
  font-family: var(--hp-serif); font-weight:400; font-size:1rem;
  line-height:1.9; color:var(--hp-body); margin-bottom:1rem;
}

.hp-acc-p:last-child { margin-bottom:0; }

/* ── Portal ─────────────────────────────────────────────────── */
.hp-portal-body {
  background: var(--hp-black);
  margin:0; padding:0;
}

#hp-portal-page {
  display:flex; flex-direction:column; height:100vh; background:var(--hp-black);
}

.hp-portal-main {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:3rem 2rem;
  background: radial-gradient(ellipse 65% 65% at 50% 40%, #08080f 0%, #030303 65%);
}

.hp-portal-inner {
  width:100%; max-width:320px;
  opacity:0; transition:opacity 0.3s ease;
}

.hp-portal-inner.visible { opacity:1; }

.hp-portal-mark {
  display:block; text-align:center; margin-bottom:1.8rem;
  text-decoration:none; transition:opacity 0.2s ease;
}

.hp-portal-mark:hover { opacity:0.75; }

.hp-portal-mark-row {
  display:flex; align-items:flex-end; justify-content:center; line-height:1;
}

.hp-portal-hp {
  font-family: var(--hp-serif); font-weight:500; font-size:5rem;
  letter-spacing:-0.03em; color:var(--hp-white); line-height:1;
}

.hp-portal-dot {
  font-family: var(--hp-serif); font-weight:500; font-size:5rem;
  color:#b0b0b0; line-height:1; margin-bottom:0.04em;
}

.hp-portal-form {
  border:1px solid var(--hp-borderM); padding:1.5rem 1.8rem;
  background:rgba(255,255,255,0.035);
}

.hp-portal-label {
  display:block; font-family: var(--hp-sc); font-weight:400; font-size:0.56rem;
  letter-spacing:0.28em; color:var(--hp-meta); margin-bottom:0.45rem;
}

.hp-portal-input {
  width:100%; background:transparent; border:none;
  border-bottom:1px solid var(--hp-border); color:var(--hp-white);
  font-family: var(--hp-serif); font-size:1rem; font-weight:400;
  padding:0.65rem 0; outline:none; margin-bottom:1.7rem;
  letter-spacing:0.02em;
}

.hp-portal-input-pass { letter-spacing:0.08em; }

.hp-portal-enter {
  width:100%; background:rgba(255,255,255,0.06);
  border:1px solid var(--hp-borderM); color:var(--hp-white);
  font-family: var(--hp-sc); font-weight:400; font-size:0.6rem;
  letter-spacing:0.32em; padding:1.2rem;
  transition:background 0.2s ease; cursor:pointer;
}

.hp-portal-enter:hover { background:rgba(255,255,255,0.10); }

.hp-portal-security {
  margin-top:1.4rem; font-family: var(--hp-sc); font-weight:400; font-size:0.44rem;
  letter-spacing:0.14em; color:rgba(232,232,232,0.22);
  text-align:center; line-height:2;
}

.hp-portal-back-wrap { margin-top:1.2rem; text-align:center; }

.hp-portal-back {
  font-family: var(--hp-sc); font-weight:400; font-size:0.44rem;
  letter-spacing:0.2em; color:rgba(232,232,232,0.28);
  text-decoration:none; transition:color 0.2s;
}

.hp-portal-back:hover { color:var(--hp-meta); }

.hp-portal-footer {
  border-top:1px solid var(--hp-border); padding:1.4rem 3.5rem;
  display:flex; align-items:center; justify-content:center; background:#020202;
}

.hp-portal-footer span {
  font-family: var(--hp-sc); font-weight:400; font-size:0.46rem;
  letter-spacing:0.18em; color:rgba(232,232,232,0.18);
}