@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* Harlia Finance — navy + gold on a bone ground. Direction B, site-wide.
   Retunes the Organic tokens: ink navy carries structure, gold is the accent. */
:root {
  --font-nav: "Space Grotesk", system-ui, sans-serif;
  --color-bg: #f6f5f1;
  --color-surface: #ffffff;
  --color-text: #0d1730;
  --color-accent: #0d1730;
  --color-accent-2: #d9a94b;
  --color-divider: rgba(13,23,48,0.12);

  --ink: #0b142c;
  --ink-2: #101d3c;
  --bone: #f6f5f1;
  --tint: #eef0f5;
  --gold: #c9992f;
  --gold-bright: #d9a94b;
  --gold-deep: #a87d24;
  --gold-line: rgba(201,153,47,0.42);
  --line: rgba(13,23,48,0.12);
  --dim: rgba(13,23,48,0.66);

  --color-neutral-100: #f6f5f1;
  --color-neutral-200: #eeece6;
  --color-neutral-300: #dcdad2;
  --color-neutral-400: #bebcb4;
  --color-neutral-500: #94928b;
  --color-neutral-600: rgba(13,23,48,0.6);
  --color-neutral-700: rgba(13,23,48,0.72);
  --color-neutral-800: rgba(13,23,48,0.85);
  --color-neutral-900: #0d1730;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(13,23,48,0.06);
  --shadow-md: 0 10px 30px rgba(13,23,48,0.09);
  --shadow-lg: 0 28px 70px rgba(13,23,48,0.14);
}
body { background: var(--bone); color: var(--color-text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; }
h6 { letter-spacing: 0.1em; font-weight: 700; }
a { color: var(--gold); }
a:hover { color: var(--ink); }
.btn { font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; border-radius: 2px; padding: 16px 30px; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s; white-space: nowrap; }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-primary:active { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn-secondary { background: transparent; color: var(--ink); border-color: rgba(13,23,48,0.28); }
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold { background: var(--gold-bright); color: var(--ink); border-color: var(--gold-bright); }
.btn-gold:hover { background: #e8bf70; border-color: #e8bf70; }
.input { border-radius: 2px; border: 1px solid var(--line); font-size: 16px; padding: 15px 18px; font-family: var(--font-body); }
.card { border-radius: 3px; }
.washed { filter: saturate(0.72) contrast(1.02); }
::selection { background: rgba(201,153,47,0.25); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* nav labels: a cleaner, more modern grotesque than the heading face */
.harlia-navlinks a, [data-drawer] a, .harlia-navbtn, .harlia-navphone {
  font-family: var(--font-nav);
}
.harlia-navlinks a { letter-spacing: 0.04em; font-weight: 600; font-size: 13.5px; text-transform: none; }
[data-drawer] a { letter-spacing: 0.01em; }

/* header: desktop bar down to 1024px, then a burger drawer */
@media (max-width: 1250px) { .harlia-navphone { display: none !important; } }
@media (max-width: 1120px) { .harlia-navlinks { gap: 18px; font-size: 12px; } }
@media (max-width: 1024px) {
  .harlia-navlinks, .harlia-navcta { display: none !important; }
  .harlia-burger { display: flex !important; }
  .harlia-tapcall { display: flex !important; margin-left: auto !important; }
  .harlia-burger + .harlia-tapcall, .harlia-tapcall + .harlia-burger { margin-left: 10px !important; }
  [data-hdr-bar] { padding: 14px 22px !important; gap: 12px !important; flex-wrap: nowrap !important; height: 74px !important; box-sizing: border-box !important; }
}

/* wide data tables scroll sideways rather than squashing or overflowing */
.harlia-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Loan balance chart: geometry stretches, labels are HTML at fixed px */
.hchart { position: relative; padding: 4px 6px 44px 60px; }
.hchart-plot { position: relative; height: 210px; }
.hchart-y { position: absolute; right: calc(100% + 9px); transform: translateY(-50%); font-size: 11.5px; font-weight: 600; color: rgba(13,23,48,0.55); white-space: nowrap; }
.hchart-x { position: absolute; top: calc(100% + 8px); transform: translateX(-50%); font-size: 11.5px; font-weight: 600; color: rgba(13,23,48,0.55); }
.hchart-xtitle, .hchart-ytitle { position: absolute; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(13,23,48,0.42); }
.hchart-xtitle { bottom: 4px; left: 60px; right: 6px; text-align: center; }
.hchart-ytitle { left: 0; top: 50%; transform: translateY(-50%) rotate(-180deg); writing-mode: vertical-rl; }
@media (max-width: 700px) {
  .hchart { padding: 4px 4px 42px 52px; }
  .hchart-plot { height: 190px; }
  .hchart-xtitle { left: 52px; }
  .hchart-y, .hchart-x { font-size: 11px; }
}

/* Attention pulse — a halo that flashes outward from a call-to-action button */
@keyframes harlia-btn-flash {
  0% { box-shadow: 0 0 0 0 rgba(232, 191, 112, 0.7); }
  70% { box-shadow: 0 0 0 16px rgba(232, 191, 112, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 191, 112, 0); }
}
.harlia-flash { animation: harlia-btn-flash 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
.harlia-flash:hover { animation-play-state: paused; }

/* Availability indicator — the pulsing dot used beside call-to-action buttons */
@keyframes harlia-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.82); }
}
@keyframes harlia-live-ring {
  0% { opacity: 0.55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .harlia-live-dot, .harlia-live-ring { animation: none !important; }
  .harlia-live-ring { opacity: 0; }
  .harlia-flash { animation: none !important; }
}

/* Calculator controls */
.hseg { display: flex; border: 1px solid var(--line); overflow: hidden; background: var(--tint); padding: 3px; gap: 3px; }
.hseg button { -webkit-appearance: none; appearance: none; flex: 1 1 0; min-width: 0; padding: 8px 8px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; background: transparent; color: var(--dim); border: 0; cursor: pointer; transition: background .16s, color .16s, box-shadow .16s; }
.hseg button:hover { background: rgba(255,255,255,0.7); color: var(--ink); }
.hseg button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(13,23,48,0.12); }
.hseg button:focus-visible { outline: 2px solid var(--gold); outline-offset: -1px; }

.htabs { display: flex; gap: 4px; padding: 5px; background: var(--tint); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.htabs::-webkit-scrollbar { display: none; }
.htabs button { -webkit-appearance: none; appearance: none; flex: 1 1 0; min-width: max-content; padding: 10px 20px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; background: transparent; color: var(--dim); border: 0; cursor: pointer; transition: background .16s, color .16s, box-shadow .16s; }
.htabs button:hover { color: var(--ink); background: rgba(255,255,255,0.65); }
.htabs button[aria-pressed="true"] { color: var(--ink); background: #fff; font-weight: 800; box-shadow: 0 1px 3px rgba(13,23,48,0.13); }
.htabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: -1px; }

.hmoney { display: flex; align-items: stretch; border: 1px solid var(--line); background: #fff; overflow: hidden; transition: border-color .16s, box-shadow .16s; }
.hmoney span { display: flex; align-items: center; padding: 0 12px; font-size: 12.5px; font-weight: 700; color: var(--dim); background: var(--tint); border-right: 1px solid var(--line); }
.hmoney span.suffix { border-right: 0; border-left: 1px solid var(--line); }
.hmoney input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 9px 12px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink); }
.hmoney input:focus { outline: 0; }
.hmoney:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,153,47,0.15); }

.hfield { display: flex; flex-direction: column; gap: 6px; }
.hfield > label { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--dim); }
.hrow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-top: 1px solid rgba(246,245,241,0.13); }
.hrow-lab { font-size: 11.5px; line-height: 1.35; color: rgba(246,245,241,0.66); }
.hrow-val { font-family: var(--font-heading); font-size: 14.5px; font-weight: 800; color: #fff; white-space: nowrap; letter-spacing: -0.02em; }

@media (max-width: 700px) {
  .hseg { flex-wrap: wrap; }
  .hseg { flex-wrap: wrap; }
  .hseg button { flex: 1 0 44%; min-height: 42px; padding: 11px 10px; font-size: 13px; }
  /* five tabs cannot fit one phone row — wrap instead of scrolling off-screen */
  .htabs { flex-wrap: wrap; overflow-x: visible; }
  .htabs button { flex: 1 0 44%; min-width: 0; min-height: 46px; padding: 11px 12px; font-size: 13.5px; }
  .hmoney input { padding: 12px 12px; }
}

/* Responsive.
   NOTE: inline styles are re-serialized by the render layer as `prop: value`
   with a space and `0` normalised to `0px`, so any attribute-substring selector
   must be written in BOTH forms. Prefer a real class where one exists. */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* stacked stat cells: flush left, vertical rules become horizontal */
  .harlia-stat { padding: 24px 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(246,245,241,0.14) !important; }
  .harlia-stat-last { border-bottom: 0 !important; }
  /* home hero: headline takes the full width, photo sits behind as a wash */
  .harlia-hero-inner { padding: 96px 22px 60px !important; }
  .harlia-hero-text { max-width: none !important; }
  .harlia-hero-photo { width: 100% !important; opacity: 0.4 !important; }
  .harlia-hero-title { font-size: 34px !important; max-width: none !important; }
  [style*="grid-template-columns:64px"], [style*="grid-template-columns: 64px"] { grid-template-columns: 48px 1fr !important; }
  [style*="grid-template-columns:28px"], [style*="grid-template-columns: 28px"] { grid-template-columns: 24px 1fr !important; }
  section, footer { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding:84px 32px"], [style*="padding: 84px 32px"],
  [style*="padding:88px 32px"], [style*="padding: 88px 32px"],
  [style*="padding:80px 32px"], [style*="padding: 80px 32px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="font-size:78px"], [style*="font-size: 78px"],
  [style*="font-size:72px"], [style*="font-size: 72px"],
  [style*="font-size:62px"], [style*="font-size: 62px"] { font-size: 38px !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"],
  [style*="font-size:54px"], [style*="font-size: 54px"],
  [style*="font-size:52px"], [style*="font-size: 52px"],
  [style*="font-size:50px"], [style*="font-size: 50px"] { font-size: 33px !important; }
  [style*="font-size:48px"], [style*="font-size: 48px"],
  [style*="font-size:44px"], [style*="font-size: 44px"],
  [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 29px !important; }
  [style*="font-size:38px"], [style*="font-size: 38px"],
  [style*="font-size:36px"], [style*="font-size: 36px"],
  [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 26px !important; }
  [style*="font-size:32px"], [style*="font-size: 32px"],
  [style*="font-size:30px"], [style*="font-size: 30px"] { font-size: 24px !important; }
  [style*="font-size:27px"], [style*="font-size: 27px"],
  [style*="font-size:25px"], [style*="font-size: 25px"] { font-size: 22px !important; }
  [style*="font-size:20px"], [style*="font-size: 20px"],
  [style*="font-size:19.5px"], [style*="font-size: 19.5px"] { font-size: 17.5px !important; }
  [style*="padding:76px"], [style*="padding: 76px"],
  [style*="padding:64px 56px"], [style*="padding: 64px 56px"],
  [style*="padding:60px 56px"], [style*="padding: 60px 56px"],
  [style*="padding:56px"], [style*="padding: 56px"],
  [style*="padding:52px"], [style*="padding: 52px"],
  [style*="padding:44px"], [style*="padding: 44px"] { padding: 30px !important; }
  [style*="max-width:17ch"], [style*="max-width: 17ch"],
  [style*="max-width:18ch"], [style*="max-width: 18ch"],
  [style*="max-width:19ch"], [style*="max-width: 19ch"] { max-width: none !important; }
  .table, table { font-size: 14px !important; }
  .table td, .table th { padding: 12px 14px !important; }
  /* full-width buttons in page content, but never in the header bar */
  section .btn, footer .btn, [data-drawer] .btn { width: 100%; text-align: center; }
  /* comfortable tap targets */
  a, button { -webkit-tap-highlight-color: rgba(217,169,75,0.2); }
  input, select, textarea { font-size: 16px !important; }
}
@media (max-width: 620px) {
  .harlia-hero-title { font-size: 29px !important; }
  [style*="font-size:78px"], [style*="font-size: 78px"],
  [style*="font-size:72px"], [style*="font-size: 72px"],
  [style*="font-size:62px"], [style*="font-size: 62px"] { font-size: 32px !important; }
  [style*="padding:30px"], [style*="padding: 30px"] { padding: 22px !important; }
}
/* Never set overflow-x on html/body — it makes them scroll containers and
   breaks every position:sticky descendant. Nothing currently overflows. */
img { max-width: 100%; }