/*
Theme Name: HarbourForm
Theme URI: https://harbourform.co.uk/
Author: HarbourForm
Description: Lightweight custom theme for the HarbourForm public website and customer acquisition journey.
Version: 1.3.1
Text Domain: harbourform
*/

:root {
  --hf-midnight: #03101F;
  --hf-navy: #071F3A;
  --hf-blue: #006BFF;
  --hf-azure: #00B7FF;
  --hf-silver: #C7D0DA;
  --hf-bright-silver: #F2F5F7;
  --hf-graphite: #111820;
  --hf-white: #FFFFFF;
  --hf-ink: #111820;
  --hf-muted: #536579;
  --hf-bg: #F2F5F7;
  --hf-line: #C7D0DA;
  --hf-brand: #006BFF;
  --hf-brand-dark: #071F3A;
  --hf-accent: rgba(0,183,255,.12);
  --hf-warm: #F2F5F7;
  --hf-radius: 22px;
  --hf-shadow: 0 18px 50px rgba(3,16,31,.12);
  --hf-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--hf-ink);
  background: var(--hf-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.hf-wrap { width: min(calc(100% - 40px), var(--hf-width)); margin: 0 auto; }
.hf-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 249, 248, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(223,231,228,.85);
}
.hf-nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hf-brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.03em; font-size: 1.25rem; }
.hf-mark { width: 34px; height: 34px; border-radius: 11px; position: relative; background: var(--hf-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.hf-mark:before, .hf-mark:after { content: ""; position: absolute; background: #fff; border-radius: 999px; }
.hf-mark:before { width: 15px; height: 4px; left: 8px; top: 10px; }
.hf-mark:after { width: 11px; height: 4px; left: 13px; top: 19px; }
.hf-menu { display: flex; align-items: center; gap: 24px; list-style: none; padding: 0; margin: 0; font-weight: 650; font-size: .95rem; }
.hf-menu a { color: #C7D0DA; }
.hf-menu a:hover { color: var(--hf-brand); }
.hf-nav-actions { display: flex; align-items: center; gap: 10px; }
.hf-mobile-toggle { display: none; border: 0; background: transparent; font-size: 1.4rem; }

.hf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--hf-brand); background: var(--hf-brand); color: #fff; font-weight: 750;
  transition: .2s ease;
}
.hf-btn:hover { transform: translateY(-1px); background: var(--hf-brand-dark); border-color: var(--hf-brand-dark); }
.hf-btn.secondary { background: transparent; color: var(--hf-ink); border-color: var(--hf-line); }
.hf-btn.secondary:hover { background: #fff; border-color: #AEBAC6; }
.hf-btn.small { min-height: 42px; padding: 0 16px; font-size: .92rem; }

.hf-hero { padding: 92px 0 68px; overflow: hidden; }
.hf-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hf-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--hf-accent); color: var(--hf-brand-dark); font-size: .84rem; font-weight: 800; }
.hf-kicker:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hf-brand); }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.045em; margin-top: 0; }
h1 { font-size: clamp(3.1rem, 7vw, 6.2rem); margin-bottom: 24px; }
h2 { font-size: clamp(2.2rem, 4.2vw, 4rem); margin-bottom: 20px; }
h3 { font-size: 1.35rem; margin-bottom: 10px; }
.hf-lead { font-size: clamp(1.08rem, 2vw, 1.28rem); color: var(--hf-muted); max-width: 680px; }
.hf-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hf-proof { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 34px; color: var(--hf-muted); font-size: .93rem; }
.hf-proof strong { color: var(--hf-ink); display: block; font-size: 1.05rem; }

.hf-browser { background: #fff; border: 1px solid var(--hf-line); border-radius: 28px; box-shadow: var(--hf-shadow); padding: 12px; transform: rotate(1deg); }
.hf-browser-bar { height: 38px; border-bottom: 1px solid var(--hf-line); display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.hf-dot { width: 8px; height: 8px; border-radius: 50%; background: #c7d1ce; }
.hf-demo { border-radius: 19px; overflow: hidden; background: linear-gradient(145deg, #071F3A 0%, #03101F 100%); min-height: 500px; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.hf-demo-tag { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hf-brand); }
.hf-demo h3 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 420px; }
.hf-demo-card { align-self: flex-end; width: 72%; background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 14px 34px rgba(17, 37, 45, .1); border-radius: 18px; padding: 20px; }

.hf-section { padding: 82px 0; }
.hf-section.alt { background: #fff; border-top: 1px solid var(--hf-line); border-bottom: 1px solid var(--hf-line); }
.hf-section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.hf-section-head p { max-width: 560px; color: var(--hf-muted); margin: 0; }
.hf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hf-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.hf-card { background: #fff; border: 1px solid var(--hf-line); border-radius: var(--hf-radius); padding: 28px; box-shadow: 0 8px 24px rgba(16,33,43,.035); }
.hf-card.soft { background: #F7F9FB; box-shadow: none; }
.hf-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--hf-accent); display: grid; place-items: center; font-weight: 900; color: var(--hf-brand-dark); margin-bottom: 22px; }
.hf-card p { color: var(--hf-muted); margin-bottom: 0; }

.hf-template { min-height: 390px; display: flex; flex-direction: column; justify-content: end; overflow: hidden; position: relative; }
.hf-template:before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(16,33,43,.74)); }
.hf-template > div { position: relative; z-index: 2; color: #fff; }
.hf-template.one { background: linear-gradient(145deg, #071F3A, #006BFF); }
.hf-template.two { background: linear-gradient(145deg, #03101F, #00B7FF); }
.hf-template.three { background: linear-gradient(145deg, #071F3A, #C7D0DA); }
.hf-template small { opacity: .85; text-transform: uppercase; letter-spacing: .09em; font-weight: 750; }

.hf-steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.hf-step { padding: 24px; border-top: 3px solid var(--hf-brand); background: #fff; border-radius: 0 0 18px 18px; min-height: 190px; }
.hf-step:before { counter-increment: step; content: "0" counter(step); font-weight: 900; color: var(--hf-brand); display: block; margin-bottom: 36px; }
.hf-step p { color: var(--hf-muted); font-size: .94rem; }

.hf-price { position: relative; }
.hf-price.featured { border-color: var(--hf-brand); box-shadow: 0 18px 48px rgba(11,107,93,.13); }
.hf-badge { position: absolute; top: 18px; right: 18px; background: var(--hf-brand); color:#fff; border-radius:999px; padding:6px 10px; font-size:.75rem; font-weight:800; }
.hf-price-value { font-size: 2.5rem; font-weight: 900; letter-spacing: -.05em; margin: 12px 0 4px; }
.hf-list { list-style: none; padding: 0; margin: 24px 0; }
.hf-list li { padding: 8px 0; color: #536579; }
.hf-list li:before { content: "✓"; color: var(--hf-brand); font-weight: 900; margin-right: 10px; }

.hf-cta { margin: 70px auto; border-radius: 32px; background: var(--hf-ink); color: #fff; padding: 62px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.hf-cta p { color: #C7D0DA; margin-bottom: 0; }
.hf-cta .hf-btn.secondary { color: #fff; border-color: #C7D0DA; }

.hf-page-hero { padding: 80px 0 34px; }
.hf-page-hero .hf-lead { max-width: 760px; }
.hf-content { padding-bottom: 80px; }
.hf-content .entry-content { max-width: 850px; }
.hf-contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; }
.hf-form { display: grid; gap: 14px; }
.hf-form input, .hf-form textarea, .hf-form select { width:100%; border:1px solid var(--hf-line); border-radius:14px; background:#fff; padding:14px 15px; font:inherit; }
.hf-form textarea { min-height: 150px; resize: vertical; }

.hf-footer { padding: 54px 0 30px; background: #03101F; color: #F2F5F7; }
.hf-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.hf-footer h4 { color: #fff; margin: 0 0 14px; }
.hf-footer a { color: #C7D0DA; display: block; margin: 8px 0; }
.hf-footer a:hover { color: #fff; }
.hf-footer-bottom { border-top:1px solid #071F3A; margin-top:42px; padding-top:22px; font-size:.88rem; color:#8FA1B4; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

@media (max-width: 980px) {
  .hf-menu { display:none; position:absolute; left:20px; right:20px; top:78px; background:#fff; border:1px solid var(--hf-line); border-radius:18px; padding:18px; flex-direction:column; align-items:flex-start; box-shadow:var(--hf-shadow); }
  .hf-menu.open { display:flex; }
  .hf-mobile-toggle { display:block; }
  .hf-nav-actions .secondary { display:none; }
  .hf-hero-grid, .hf-contact-grid { grid-template-columns: 1fr; }
  .hf-grid-3 { grid-template-columns: 1fr 1fr; }
  .hf-steps { grid-template-columns: 1fr 1fr; }
  .hf-footer-grid { grid-template-columns: 1fr 1fr; }
  .hf-cta { grid-template-columns: 1fr; }
}
@media (max-width: 660px) {
  .hf-wrap { width: min(calc(100% - 28px), var(--hf-width)); }
  .hf-hero { padding-top: 58px; }
  h1 { font-size: clamp(2.7rem, 16vw, 4.4rem); }
  .hf-grid-3, .hf-grid-2, .hf-steps, .hf-footer-grid { grid-template-columns: 1fr; }
  .hf-section { padding: 58px 0; }
  .hf-section-head { align-items:flex-start; flex-direction:column; }
  .hf-demo { min-height:390px; padding:28px; }
  .hf-demo-card { width:100%; }
  .hf-cta { padding:38px 28px; }
  .hf-nav-actions .hf-btn { display:none; }
}

/* HarbourForm v1.1.0 visual hardening and expanded homepage */
body, .hf-site-header, .hf-section, .hf-hero { color: var(--hf-ink); }
.hf-hero h1, .hf-section h2, .hf-section h3, .hf-section h4, .hf-page-hero h1, .hf-page-hero h2,
.hf-brand, .hf-brand:link, .hf-brand:visited,
.hf-menu a, .hf-menu a:link, .hf-menu a:visited,
.hf-card h3, .hf-price-value { color: var(--hf-ink) !important; }
.hf-brand > span:last-child { color: var(--hf-ink) !important; }
.hf-hero h1 { color: var(--hf-white) !important; }
.hf-template h3, .hf-template p, .hf-template small { color: #fff !important; }
.hf-portal-section h2, .hf-portal-section h3, .hf-portal-section strong,
.hf-portal-section .hf-dashboard-mock h3 { color: #fff !important; }
.hf-cta h2 { color: #fff !important; }
.hf-demo h3, .hf-demo-card strong { color: var(--hf-ink) !important; }
.hf-demo-card p { margin: 6px 0 0; color: #60717a !important; }
.hf-section-head h2 { margin-top: 14px; }
.hf-actions-center { justify-content: center; }

.hf-trust-strip { border-top: 1px solid var(--hf-line); border-bottom: 1px solid var(--hf-line); background: #fff; }
.hf-trust-grid { min-height: 76px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 18px; color: #42565f; font-weight: 700; font-size: .92rem; }
.hf-trust-grid span { position: relative; padding-left: 20px; }
.hf-trust-grid span:before { content: "✓"; position: absolute; left: 0; color: var(--hf-brand); font-weight: 900; }

.hf-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hf-mini-card { border: 1px solid var(--hf-line); border-radius: 18px; padding: 24px; background: #fff; }
.hf-mini-card > span { display: block; color: var(--hf-brand); font-size: .78rem; letter-spacing: .09em; font-weight: 900; margin-bottom: 40px; }
.hf-mini-card h3 { margin-bottom: 10px; }
.hf-mini-card p { margin: 0; color: var(--hf-muted); font-size: .94rem; }

.hf-portal-section { background: #10212b; color: #fff !important; border-top: 1px solid #1d333e; border-bottom: 1px solid #1d333e; }
.hf-portal-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.hf-kicker-dark { background: #173b3b; color: #bde7dc !important; }
.hf-kicker-dark:before { background: #65cdb7; }
.hf-lead-dark { color: #b7c7cd !important; font-size: 1.08rem; max-width: 620px; }
.hf-portal-list { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 20px; }
.hf-portal-list li { padding-left: 30px; position: relative; }
.hf-portal-list li:before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #1b514a; color: #bde7dc; display: grid; place-items: center; font-size: .72rem; font-weight: 900; }
.hf-portal-list strong { display: block; margin-bottom: 3px; }
.hf-portal-list span { color: #9db0b8; font-size: .94rem; }
.hf-btn-light { background: #fff !important; border-color: #fff !important; color: var(--hf-ink) !important; }
.hf-btn-light:hover { background: #eaf1ef !important; border-color: #eaf1ef !important; }

.hf-dashboard-mock { background: #f7f9f8; color: var(--hf-ink) !important; border-radius: 24px; padding: 14px; box-shadow: 0 28px 80px rgba(0,0,0,.28); transform: rotate(1deg); }
.hf-dashboard-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 20px; border-bottom: 1px solid var(--hf-line); font-size: .88rem; }
.hf-dashboard-top strong { color: var(--hf-ink) !important; }
.hf-dashboard-top span { color: var(--hf-muted); }
.hf-dashboard-body { padding: 16px; }
.hf-dashboard-project { background: #fff; border: 1px solid var(--hf-line); border-radius: 18px; padding: 22px; margin-bottom: 12px; }
.hf-dashboard-project small { color: var(--hf-brand); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.hf-dashboard-project h3 { color: var(--hf-ink) !important; margin: 8px 0 22px; }
.hf-progress { height: 9px; background: #e2e9e6; border-radius: 999px; overflow: hidden; }
.hf-progress span { display: block; width: 60%; height: 100%; background: var(--hf-brand); border-radius: inherit; }
.hf-progress-label { display: flex; justify-content: space-between; margin-top: 8px; font-size: .82rem; }
.hf-progress-label strong { color: var(--hf-ink) !important; }
.hf-dashboard-row { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--hf-line); border-radius: 14px; padding: 13px 16px; margin-top: 8px; font-size: .86rem; }
.hf-dashboard-row strong { color: #60717a !important; font-size: .78rem; }
.hf-dashboard-row.active { border-color: #75b9aa; background: #ecf7f3; }
.hf-dashboard-row.active strong { color: var(--hf-brand) !important; }

.hf-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
.hf-grid-stack { display: grid; gap: 16px; }

.hf-faq-wrap { max-width: 980px; }
.hf-faqs { border-top: 1px solid var(--hf-line); }
.hf-faq { border-bottom: 1px solid var(--hf-line); background: transparent; }
.hf-faq summary { cursor: pointer; list-style: none; padding: 24px 42px 24px 0; font-size: 1.08rem; font-weight: 800; color: var(--hf-ink) !important; position: relative; }
.hf-faq summary::-webkit-details-marker { display: none; }
.hf-faq summary:after { content: "+"; position: absolute; right: 4px; top: 19px; font-size: 1.6rem; color: var(--hf-brand); font-weight: 500; }
.hf-faq[open] summary:after { content: "–"; }
.hf-faq p { margin: -8px 0 24px; color: var(--hf-muted); max-width: 780px; }

@media (max-width: 980px) {
  .hf-grid-4 { grid-template-columns: 1fr 1fr; }
  .hf-portal-grid, .hf-split { grid-template-columns: 1fr; gap: 42px; }
  .hf-trust-grid { grid-template-columns: 1fr 1fr; padding: 20px 0; }
}
@media (max-width: 660px) {
  .hf-grid-4, .hf-trust-grid { grid-template-columns: 1fr; }
  .hf-trust-grid { gap: 8px; }
  .hf-trust-grid span { padding-top: 4px; padding-bottom: 4px; }
  .hf-portal-grid { gap: 32px; }
}

/* v1.2.0 – keep HarbourForm application/plugin pages independent from public-site typography */
.hf-system-content {
  padding: 54px 0 90px;
  background: #f6f8f7;
  min-height: calc(100vh - 78px);
}
.hf-system-wrap {
  max-width: 1180px;
}
.hf-system-entry {
  max-width: none !important;
}
/* Do not impose theme heading/link colours on embedded HarbourForm apps. */
.hf-system-entry h1,
.hf-system-entry h2,
.hf-system-entry h3,
.hf-system-entry h4,
.hf-system-entry h5,
.hf-system-entry h6,
.hf-system-entry a,
.hf-system-entry label,
.hf-system-entry p,
.hf-system-entry span,
.hf-system-entry strong {
  color: revert;
}
/* Let plugin controls own their typography while retaining sensible form sizing. */
.hf-system-entry input:not([type="checkbox"]):not([type="radio"]),
.hf-system-entry select,
.hf-system-entry textarea,
.hf-system-entry button {
  font: inherit;
}
@media (max-width: 720px) {
  .hf-system-content { padding: 28px 0 60px; }
}


/* HarbourForm Brand Pack implementation - v1.3.0 */
.hf-site-header {
  background: rgba(3,16,31,.97);
  border-bottom-color: rgba(199,208,218,.18);
}
.hf-nav { min-height: 82px; }
.hf-brand-logo { display:block; width: 255px; max-width: 28vw; height:auto; }
.hf-menu a { color: var(--hf-bright-silver); }
.hf-menu a:hover { color: var(--hf-azure); }
.hf-mobile-toggle { color: var(--hf-white); }
.hf-btn { border-color: var(--hf-blue); background: var(--hf-blue); color: var(--hf-white); }
.hf-btn:hover { background: var(--hf-azure); border-color: var(--hf-azure); color: var(--hf-midnight); }
.hf-btn.secondary { background: transparent; color: var(--hf-bright-silver); border-color: rgba(199,208,218,.45); }
.hf-btn.secondary:hover { background: rgba(255,255,255,.08); border-color: var(--hf-azure); color: var(--hf-white); }
.hf-hero { background: var(--hf-midnight); color: var(--hf-white); padding-top: 82px; }
.hf-hero h1 { color: var(--hf-white); }
.hf-hero .hf-lead { color: var(--hf-silver); }
.hf-hero .hf-proof { color: var(--hf-silver); }
.hf-hero .hf-proof strong { color: var(--hf-white); }
.hf-kicker { background: rgba(0,183,255,.12); color: var(--hf-azure); border: 1px solid rgba(0,183,255,.22); letter-spacing:.08em; text-transform:uppercase; }
.hf-kicker:before { background: var(--hf-azure); }
.hf-hero-brand-card { min-height:520px; border-radius:28px; display:grid; place-items:center; position:relative; overflow:hidden; border:1px solid rgba(199,208,218,.16); background:radial-gradient(circle at 50% 45%, rgba(0,107,255,.22), transparent 52%), #03101F; box-shadow:0 24px 70px rgba(0,0,0,.28); }
.hf-hero-brand-card:after { content:""; position:absolute; inset:auto 12% 7% 12%; height:1px; background:linear-gradient(90deg,transparent,var(--hf-azure),transparent); box-shadow:0 0 24px rgba(0,183,255,.6); }
.hf-hero-brand-card img { width:min(94%, 720px); height:auto; position:relative; z-index:1; }
.hf-section.alt { background:#fff; }
.hf-card { border-color:#DCE3EA; }
.hf-icon { background:rgba(0,107,255,.10); color:var(--hf-blue); border:1px solid rgba(0,107,255,.16); }
.hf-step { border-top-color:var(--hf-blue); }
.hf-step:before { color:var(--hf-blue); }
.hf-price.featured { border-color:var(--hf-blue); box-shadow:0 18px 48px rgba(0,107,255,.14); }
.hf-badge { background:var(--hf-blue); }
.hf-list li:before { color:var(--hf-blue); }
.hf-portal-section, .hf-cta { background:var(--hf-midnight); }
.hf-footer { background:var(--hf-midnight); border-top:1px solid rgba(199,208,218,.16); }
.hf-footer-logo { width:290px; max-width:100%; height:auto; display:block; }
.hf-footer a:hover { color:var(--hf-azure); }
.hf-footer-bottom { border-top-color:rgba(199,208,218,.16); }
.hf-brand-rule { height:2px; background:linear-gradient(90deg,var(--hf-blue),var(--hf-azure),transparent); border:0; margin:0; }
@media (max-width:980px){ .hf-menu { background:var(--hf-midnight); border-color:rgba(199,208,218,.2); } .hf-brand-logo{max-width:230px;width:230px;} }
@media (max-width:660px){ .hf-brand-logo{width:185px;max-width:56vw;} .hf-hero-brand-card{min-height:350px;} }


/* HarbourForm v1.3.1 — complete public brand rollout */
.hf-page-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  background:
    radial-gradient(circle at 82% 34%, rgba(0,107,255,.22), transparent 28%),
    linear-gradient(135deg, var(--hf-midnight), var(--hf-navy));
  border-bottom: 1px solid rgba(0,183,255,.2);
  color: var(--hf-white);
}
.hf-page-hero:after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -110px;
  top: -170px;
  background: url('primary-logo.png') center/contain no-repeat;
  opacity: .10;
  pointer-events: none;
}
.hf-page-hero .hf-wrap { position: relative; z-index: 1; }
.hf-page-hero h1,
.hf-page-hero h2 { color: var(--hf-white) !important; max-width: 920px; }
.hf-page-hero .hf-lead { color: var(--hf-silver) !important; }
.hf-page-hero .hf-kicker { color: var(--hf-azure) !important; }
.hf-page-hero .hf-kicker:before { background: var(--hf-azure); }

.hf-public-page .hf-section { background: var(--hf-bright-silver); }
.hf-public-page .hf-section.alt { background: var(--hf-white); }
.hf-public-page .hf-card {
  border-color: rgba(7,31,58,.12);
  box-shadow: 0 14px 38px rgba(3,16,31,.06);
}
.hf-public-page .hf-card:hover { transform: translateY(-2px); transition: transform .2s ease, box-shadow .2s ease; box-shadow:0 20px 48px rgba(3,16,31,.09); }
.hf-public-page .hf-card h3,
.hf-public-page .hf-price-value { color: var(--hf-graphite) !important; }

.hf-brand-band {
  background: var(--hf-midnight);
  color: var(--hf-white);
  border-top: 1px solid rgba(0,183,255,.18);
  border-bottom: 1px solid rgba(0,183,255,.18);
}
.hf-brand-band h2, .hf-brand-band h3 { color: var(--hf-white) !important; }
.hf-brand-band p { color: var(--hf-silver); }
.hf-brand-band .hf-card {
  background: rgba(7,31,58,.72);
  border-color: rgba(199,208,218,.16);
  box-shadow: none;
}
.hf-brand-band .hf-card h3 { color: var(--hf-white) !important; }
.hf-brand-band .hf-card p { color: var(--hf-silver); }

.hf-template-showcase { position:relative; min-height:430px; }
.hf-template-showcase:after {
  content:"HarbourForm";
  position:absolute;
  right:22px;
  top:18px;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:rgba(255,255,255,.66);
}

.hf-process-intro { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start; }
.hf-process-intro > p { margin:0; color:var(--hf-muted); font-size:1.08rem; }

.hf-about-crest {
  background: var(--hf-midnight);
  border:1px solid rgba(0,183,255,.22);
  border-radius:30px;
  min-height:420px;
  display:grid;
  place-items:center;
  padding:40px;
  overflow:hidden;
  position:relative;
}
.hf-about-crest:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(0,107,255,.24),transparent 55%); }
.hf-about-crest img { position:relative; z-index:1; width:min(100%,560px); }

.hf-contact-card { background:var(--hf-midnight) !important; color:var(--hf-white); border-color:rgba(0,183,255,.22) !important; }
.hf-contact-card h3 { color:var(--hf-white) !important; }
.hf-contact-card p, .hf-contact-card .hf-list li { color:var(--hf-silver); }
.hf-contact-card .hf-list li:before { color:var(--hf-azure); }

.hf-section-cta { padding-top:0; }
.hf-section-cta .hf-cta { margin-top:0; }

::selection { background: rgba(0,107,255,.24); color: inherit; }

@media (max-width:980px) {
  .hf-process-intro { grid-template-columns:1fr; gap:20px; }
  .hf-page-hero:after { width:360px; height:360px; right:-130px; top:-100px; }
}

/* Plugin-owned public rendering guarantees */
body.hf-public-page { background:#F2F5F7 !important; color:#111820 !important; }
body.hf-public-page .hf-site-header { background:#03101F !important; }
body.hf-public-page .hf-brand-logo { width:255px !important; height:auto !important; }
body.hf-public-page .hf-primary-nav { display:flex; gap:24px; align-items:center; }
body.hf-public-page .hf-primary-nav a { color:#F2F5F7 !important; font-weight:700; text-decoration:none; font-size:.95rem; }
body.hf-public-page .hf-primary-nav a:hover { color:#00B7FF !important; }
body.hf-public-page .hf-about-grid { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
@media (max-width:980px){ body.hf-public-page .hf-primary-nav{display:none;} body.hf-public-page .hf-about-grid{grid-template-columns:1fr;} }


/* HarbourForm updated branding pack - v1.2.0 */
body.hf-public-page { font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.hf-public-page .hf-site-header { background:rgba(3,16,31,.985)!important; border-bottom:1px solid rgba(199,208,218,.16)!important; }
body.hf-public-page .hf-brand-logo { width:285px!important; max-width:31vw!important; height:auto!important; display:block; object-fit:contain; }
body.hf-public-page .hf-hero-brand-card img { width:min(96%,760px)!important; }
body.hf-public-page .hf-about-crest img { width:min(100%,720px)!important; }
body.hf-public-page .hf-footer-logo { width:315px!important; max-width:100%!important; }
body.hf-public-page .hf-btn { background:#006BFF!important; border-color:#006BFF!important; color:#fff!important; }
body.hf-public-page .hf-btn:hover { background:#00B7FF!important; border-color:#00B7FF!important; color:#03101F!important; }
body.hf-public-page .hf-btn.secondary { background:transparent!important; border-color:rgba(199,208,218,.52)!important; color:#F2F5F7!important; }
body.hf-public-page .hf-page-hero, body.hf-public-page .hf-hero { background:radial-gradient(circle at 78% 38%,rgba(0,107,255,.18),transparent 30%),linear-gradient(135deg,#03101F,#071F3A)!important; }
body.hf-public-page .hf-kicker { color:#00B7FF!important; background:rgba(0,183,255,.10)!important; border-color:rgba(0,183,255,.24)!important; }
body.hf-public-page .hf-brand-rule { background:linear-gradient(90deg,#006BFF,#00B7FF,transparent)!important; }
@media(max-width:980px){body.hf-public-page .hf-brand-logo{width:235px!important;max-width:58vw!important;}}
@media(max-width:660px){body.hf-public-page .hf-brand-logo{width:190px!important;max-width:64vw!important;}}

/* HarbourForm Brand System v1.2.2 — public layout and contrast corrections */
body.hf-public-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}
body.hf-public-page > main,
body.hf-public-page main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.hf-public-page .hf-hero {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background:
    radial-gradient(circle at 72% 42%, rgba(0,107,255,.22), transparent 30%),
    linear-gradient(135deg, var(--hf-midnight) 0%, var(--hf-navy) 100%) !important;
}
body.hf-public-page .hf-hero > .hf-wrap {
  width: min(calc(100% - 48px), var(--hf-width)) !important;
  max-width: var(--hf-width) !important;
  margin-inline: auto !important;
}
body.hf-public-page .hf-hero-grid {
  width: 100% !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr) !important;
}

/* Light public sections always use dark readable typography. */
body.hf-public-page .hf-section:not(.hf-brand-band):not(.hf-portal-section) {
  color: var(--hf-graphite) !important;
}
body.hf-public-page .hf-section:not(.hf-brand-band):not(.hf-portal-section) h1,
body.hf-public-page .hf-section:not(.hf-brand-band):not(.hf-portal-section) h2,
body.hf-public-page .hf-section:not(.hf-brand-band):not(.hf-portal-section) h3,
body.hf-public-page .hf-section:not(.hf-brand-band):not(.hf-portal-section) h4,
body.hf-public-page .hf-section:not(.hf-brand-band):not(.hf-portal-section) strong {
  color: var(--hf-graphite) !important;
}
body.hf-public-page .hf-section:not(.hf-brand-band):not(.hf-portal-section) p,
body.hf-public-page .hf-section:not(.hf-brand-band):not(.hf-portal-section) li {
  color: var(--hf-muted) !important;
}

/* Dark branded sections must stay dark, overriding the generic public-section rule. */
body.hf-public-page .hf-section.hf-brand-band,
body.hf-public-page .hf-section.hf-portal-section {
  background:
    radial-gradient(circle at 82% 25%, rgba(0,107,255,.18), transparent 30%),
    var(--hf-midnight) !important;
  color: var(--hf-white) !important;
  border-color: rgba(0,183,255,.18) !important;
}
body.hf-public-page .hf-section.hf-brand-band h1,
body.hf-public-page .hf-section.hf-brand-band h2,
body.hf-public-page .hf-section.hf-brand-band h3,
body.hf-public-page .hf-section.hf-brand-band h4,
body.hf-public-page .hf-section.hf-brand-band strong,
body.hf-public-page .hf-section.hf-portal-section h1,
body.hf-public-page .hf-section.hf-portal-section h2,
body.hf-public-page .hf-section.hf-portal-section h3,
body.hf-public-page .hf-section.hf-portal-section h4,
body.hf-public-page .hf-section.hf-portal-section strong {
  color: var(--hf-white) !important;
}
body.hf-public-page .hf-section.hf-brand-band p,
body.hf-public-page .hf-section.hf-brand-band li,
body.hf-public-page .hf-section.hf-portal-section p,
body.hf-public-page .hf-section.hf-portal-section li {
  color: var(--hf-silver) !important;
}
body.hf-public-page .hf-section.hf-brand-band .hf-card,
body.hf-public-page .hf-section.hf-portal-section .hf-card {
  background: rgba(7,31,58,.78) !important;
  border-color: rgba(199,208,218,.18) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.14) !important;
}
body.hf-public-page .hf-section.hf-brand-band .hf-card h3,
body.hf-public-page .hf-section.hf-brand-band .hf-card strong,
body.hf-public-page .hf-section.hf-portal-section .hf-card h3,
body.hf-public-page .hf-section.hf-portal-section .hf-card strong {
  color: var(--hf-white) !important;
}
body.hf-public-page .hf-section.hf-brand-band .hf-card p,
body.hf-public-page .hf-section.hf-portal-section .hf-card p {
  color: var(--hf-silver) !important;
}

/* Keep decorative crest fully visible on internal public-page heroes. */
body.hf-public-page .hf-page-hero {
  min-height: 390px;
  display: flex;
  align-items: center;
}
body.hf-public-page .hf-page-hero:after {
  width: clamp(250px, 27vw, 430px) !important;
  height: clamp(250px, 27vw, 430px) !important;
  right: max(28px, calc((100vw - var(--hf-width))/2)) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: .115 !important;
}
body.hf-public-page .hf-page-hero .hf-wrap {
  width: min(calc(100% - 48px), var(--hf-width)) !important;
}
body.hf-public-page .hf-page-hero h1,
body.hf-public-page .hf-page-hero .hf-lead {
  max-width: min(760px, 62vw) !important;
}

@media (max-width: 980px) {
  body.hf-public-page .hf-hero-grid {
    grid-template-columns: 1fr !important;
  }
  body.hf-public-page .hf-page-hero h1,
  body.hf-public-page .hf-page-hero .hf-lead {
    max-width: 72% !important;
  }
  body.hf-public-page .hf-page-hero:after {
    right: 22px !important;
    width: 300px !important;
    height: 300px !important;
    opacity: .08 !important;
  }
}
@media (max-width: 680px) {
  body.hf-public-page .hf-hero > .hf-wrap,
  body.hf-public-page .hf-page-hero .hf-wrap {
    width: min(calc(100% - 32px), var(--hf-width)) !important;
  }
  body.hf-public-page .hf-page-hero {
    min-height: 330px;
  }
  body.hf-public-page .hf-page-hero h1,
  body.hf-public-page .hf-page-hero .hf-lead {
    max-width: 100% !important;
  }
  body.hf-public-page .hf-page-hero:after {
    width: 220px !important;
    height: 220px !important;
    right: -30px !important;
    top: 56% !important;
    opacity: .045 !important;
  }
}


/* HarbourForm Brand System v1.2.3 — hero legibility + brand artwork visibility */
body.hf-public-page .hf-hero,
body.hf-public-page .hf-page-hero {
  color: #F2F5F7 !important;
}
body.hf-public-page .hf-hero h1,
body.hf-public-page .hf-hero h2,
body.hf-public-page .hf-page-hero h1,
body.hf-public-page .hf-page-hero h2 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.18) !important;
}
body.hf-public-page .hf-hero .hf-lead,
body.hf-public-page .hf-page-hero .hf-lead {
  color: #DCE3EA !important;
}
body.hf-public-page .hf-hero .hf-proof,
body.hf-public-page .hf-hero .hf-proof p,
body.hf-public-page .hf-hero .hf-proof span {
  color: #C7D0DA !important;
}
body.hf-public-page .hf-hero .hf-proof strong {
  color: #FFFFFF !important;
}

/* The internal-page crest is branded artwork, not a near-invisible watermark. */
body.hf-public-page .hf-page-hero:after {
  opacity: .58 !important;
  filter: drop-shadow(0 0 28px rgba(0,107,255,.24));
}

/* Make secondary hero actions readable against navy. */
body.hf-public-page .hf-hero .hf-btn.secondary,
body.hf-public-page .hf-page-hero .hf-btn.secondary {
  color: #F2F5F7 !important;
  border-color: rgba(199,208,218,.58) !important;
  background: rgba(3,16,31,.18) !important;
}
body.hf-public-page .hf-hero .hf-btn.secondary:hover,
body.hf-public-page .hf-page-hero .hf-btn.secondary:hover {
  color: #03101F !important;
  background: #00B7FF !important;
  border-color: #00B7FF !important;
}

@media (max-width: 980px) {
  body.hf-public-page .hf-page-hero:after { opacity: .42 !important; }
}
@media (max-width: 680px) {
  body.hf-public-page .hf-page-hero:after { opacity: .24 !important; }
}