/* ==========================================================================
   Holland Capital Investments — stylesheet
   Modern tech palette: indigo ink + coral/teal gradient, matching the logo
   ========================================================================== */

:root{
  --ink:        #1E2A5E;
  --ink-2:      #4A5578;
  --paper:      #F7F8FB;
  --surface:    #FFFFFF;
  --surface-alt:#EEF1FA;

  --coral:      #FF6B4A;
  --teal:       #2EC4B6;
  --amber:      #FF9F1C;
  --gradient:   linear-gradient(90deg, var(--coral), var(--teal));
  --gradient-d: linear-gradient(135deg, var(--coral), var(--teal));

  --line:       #E4E7F1;
  --slate:      #6B7280;
  --shadow:     0 4px 22px rgba(30,42,94,0.07);
  --shadow-lg:  0 10px 34px rgba(30,42,94,0.10);
  --radius:     12px;
  --radius-sm:  8px;

  --display: "Poppins", "Segoe UI", Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--coral); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-0.01em;
  margin:0 0 0.5em;
  color:var(--ink);
}

h1{ font-size:clamp(2.1rem, 4vw, 3.2rem); font-weight:700; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); }
h3{ font-size:1.1rem; font-weight:600; }

p{ margin:0 0 1.1em; color:var(--ink-2); }

.container{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:0 28px;
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:9px;
  height:9px;
  background:var(--gradient-d);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display:inline-block;
  flex:none;
}

/* Signature divider — gradient rule with a small hex mark at centre,
   echoing the logo's hexagon */
.ledger-rule{
  position:relative;
  height:1px;
  background:var(--line);
  margin:52px 0;
}
.ledger-rule::before{
  content:"";
  position:absolute;
  left:0; top:0;
  height:1px;
  width:64px;
  background:var(--gradient);
}
.ledger-rule::after{
  content:"";
  position:absolute;
  left:64px; top:-4px;
  width:9px; height:9px;
  background:var(--gradient-d);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* ---------------------------------------------------------------------- */
/* Header / navigation                                                    */
/* ---------------------------------------------------------------------- */

.site-header{
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:20px;
  padding-bottom:20px;
  flex-wrap:wrap;
  gap:14px;
}

.wordmark{
  display:flex;
  align-items:center;
}
.wordmark:hover{ text-decoration:none; }
.wordmark .logo-img{
  height:52px;
  width:auto;
  display:block;
}

.site-nav ul{
  list-style:none;
  display:flex;
  gap:8px;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.site-nav a{
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--ink-2);
  text-transform:uppercase;
  font-family:var(--mono);
  padding:8px 14px;
  border-radius:999px;
  transition:background 0.15s ease, color 0.15s ease;
}
.site-nav a:hover{ color:var(--ink); background:var(--surface-alt); text-decoration:none; }
.site-nav a.current{ color:var(--surface); background:var(--gradient-d); }

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */

.hero{
  position:relative;
  padding:88px 0 64px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-160px; right:-160px;
  width:520px; height:520px;
  background:radial-gradient(circle at center, rgba(255,107,74,0.14), rgba(46,196,182,0.10) 55%, transparent 72%);
  pointer-events:none;
}
.hero .container{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
.hero h1{ max-width:11ch; }
.hero .lede{
  font-size:1.05rem;
  max-width:46ch;
  color:var(--ink-2);
}
.hero-art{
  width:100%;
  height:auto;
  filter:drop-shadow(var(--shadow-lg));
}

.page-hero{
  padding:60px 0 40px;
  border-bottom:1px solid var(--line);
}
.page-hero .lede{ max-width:60ch; font-size:1.02rem; }

/* ---------------------------------------------------------------------- */
/* Pillars / cards                                                        */
/* ---------------------------------------------------------------------- */

.pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.pillar{
  padding:30px 28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.pillar:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.pillar .num{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono);
  font-size:0.78rem;
  font-weight:600;
  color:var(--surface);
  background:var(--gradient-d);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  margin-bottom:18px;
}
.pillar h3{ margin-bottom:10px; }
.pillar p{ font-size:0.94rem; margin-bottom:0; }

/* ---------------------------------------------------------------------- */
/* Statement / quote block                                                */
/* ---------------------------------------------------------------------- */

.statement{ padding:66px 0; }
.statement blockquote{
  position:relative;
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight:600;
  color:var(--ink);
  line-height:1.42;
  max-width:34ch;
  padding-left:28px;
}
.statement blockquote::before{
  content:"";
  position:absolute;
  left:0; top:2px; bottom:2px;
  width:3px;
  border-radius:3px;
  background:var(--gradient);
}

/* ---------------------------------------------------------------------- */
/* Generic content section                                                */
/* ---------------------------------------------------------------------- */

.section{ padding:52px 0; }
.section.tight{ padding:30px 0; }
.section-grid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:48px;
}
.section-grid .side{ color:var(--slate); }
.section-grid .side h4{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:600;
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.two-col > div{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 30px;
}

.fact-list{ list-style:none; margin:0; padding:0; }
.fact-list li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:0.94rem;
}
.fact-list li span:first-child{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--slate);
}
.fact-list li span:last-child{ color:var(--ink); text-align:right; }

.fact-list--left li{ justify-content:flex-start; gap:18px; }
.fact-list--left li span:first-child{ width:170px; flex:none; }
.fact-list--left li span:last-child{ text-align:left; }

/* ---------------------------------------------------------------------- */
/* Disclaimer band                                                        */
/* ---------------------------------------------------------------------- */

.disclaimer{
  position:relative;
  background:var(--surface-alt);
  color:var(--ink);
  padding:38px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.disclaimer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--gradient);
}
.disclaimer p{
  color:var(--ink-2);
  font-size:0.86rem;
  max-width:74ch;
  margin:0;
}
.disclaimer strong{ color:var(--ink); }

/* ---------------------------------------------------------------------- */
/* Forms                                                                  */
/* ---------------------------------------------------------------------- */

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.form-grid .full{ grid-column:1 / -1; }

label{
  display:block;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:8px;
}
input, textarea, select{
  width:100%;
  font-family:var(--sans);
  font-size:0.95rem;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--ink);
}
input:focus, textarea:focus{ border-color:var(--teal); }
textarea{ resize:vertical; min-height:130px; }

.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:var(--gradient-d);
  color:var(--surface);
  border:none;
  border-radius:var(--radius-sm);
  padding:13px 28px;
  cursor:pointer;
  text-decoration:none;
  transition:filter 0.15s ease, transform 0.15s ease;
}
.btn:hover{ filter:brightness(1.06); transform:translateY(-1px); text-decoration:none; }

.notice{
  border:1px solid var(--line);
  border-left:3px solid var(--teal);
  border-radius:var(--radius-sm);
  background:var(--surface-alt);
  padding:16px 18px;
  font-size:0.9rem;
  margin-bottom:26px;
}
.notice.success{ border-left-color:var(--teal); }
.notice.error{ border-left-color:var(--coral); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */

.site-footer{
  border-top:1px solid var(--line);
  padding:34px 0;
}
.site-footer .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
.site-footer .foot-links{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0;
  padding:0;
}
.site-footer .foot-links a{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--slate);
}
.site-footer .foot-links a:hover{ color:var(--coral); }
.site-footer .copy{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--slate);
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */

@media (max-width: 860px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:280px; }
  .pillars{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
  .section-grid{ grid-template-columns:1fr; gap:20px; }
  .form-grid{ grid-template-columns:1fr; }
  .site-nav ul{ gap:6px; }
}