/* ============================================================
   BIZREAP — Design Tokens
   Concept: digital growth, for people and for businesses.
   A path with three waypoints — Learn, Operate, Grow — running
   through every page: skill becomes system becomes scale.
   ============================================================ */
:root{
  --indigo:        #151B33;   /* primary dark ground */
  --indigo-2:      #1E2745;   /* raised surface on dark ground */
  --indigo-3:      #2A3560;   /* hover / border on dark ground */
  --canvas:        #F1F3F6;   /* light ground (cool, not warm cream) */
  --canvas-2:      #E4E8EE;   /* raised surface on light ground */
  --coral:         #FF6B47;   /* primary accent — CTAs, momentum, "Grow" */
  --coral-deep:    #E2532F;   /* accent hover */
  --teal:          #2FB8A6;   /* secondary accent — "Learn", links, tags */
  --teal-deep:     #1F8B7C;
  --ink:           #1A2233;   /* body text on light ground */
  --ink-soft:      #545F79;   /* muted text on light ground */
  --paper-ink:     #ECEEF5;   /* body text on dark ground */
  --paper-soft:    #A6AFCB;   /* muted text on dark ground */
  --line:          #D6DBE3;   /* hairline on light ground */
  --line-dark:     #2B3560;   /* hairline on dark ground */

  --display: "Fraunces", "Iowan Old Style", serif;
  --body:    "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --max: 1180px;
  --gap: clamp(1.25rem, 2.5vw, 2.5rem);
  --radius: 14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:var(--body);
  background:var(--canvas);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:500; }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); }
h3{ font-size:clamp(1.2rem, 2vw, 1.5rem); }
p{ margin:0 0 1em; color:var(--ink-soft); max-width:62ch; }
.on-dark p{ color:var(--paper-soft); }

.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal-deep);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  margin-bottom:1rem;
}
.on-dark .eyebrow{ color:var(--coral); }
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:currentColor;
}

.wrap{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  font-family:var(--body);
  font-weight:600;
  font-size:0.98rem;
  padding:0.85em 1.6em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }

.btn-gold{ background:var(--coral); color:#171018; }
.btn-gold:hover{ background:var(--coral-deep); }

.btn-ghost{ background:transparent; border-color:var(--line-dark); color:var(--paper-ink); }
.btn-ghost:hover{ border-color:var(--coral); color:var(--coral); }

.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ border-color:var(--teal-deep); color:var(--teal-deep); }

/* ---------------- Header / Nav ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--indigo);
  border-bottom:1px solid var(--line-dark);
  transition:box-shadow 0.25s ease;
}
.site-header.is-scrolled{
  box-shadow:0 4px 18px rgba(0,0,0,0.25);
  backdrop-filter:blur(8px);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1.1rem;
}
.brand{ display:flex; align-items:center; gap:0.7em; text-decoration:none; }
.brand img{ width:36px; height:36px; border-radius:9px; }
.brand-word{
  font-family:var(--display); font-weight:600; font-size:1.28rem;
  color:var(--paper-ink); letter-spacing:-0.01em;
}
.brand-word em{ color:var(--coral); font-style:italic; }

.nav-links{
  display:flex; align-items:center; gap:clamp(1.2rem,2vw,2.2rem);
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; color:var(--paper-soft);
  font-size:0.96rem; font-weight:500;
  padding-block:0.4rem;
  border-bottom:2px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--paper-ink); border-color:var(--coral); }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-dark);
  border-radius:8px; padding:0.5em 0.7em; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--paper-ink);
  position:relative; transition:0.2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

@media (max-width: 820px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; inset-inline:0; top:100%;
    flex-direction:column; align-items:flex-start;
    background:var(--indigo); border-top:1px solid var(--line-dark);
    padding:1.2rem clamp(1.25rem,4vw,3rem) 1.6rem;
    display:none;
  }
  .nav-links.is-open{ display:flex; }
  .site-header{ background:var(--indigo); border-color:var(--line-dark); }
}

/* ---------------- Hero + Path visual ---------------- */
.hero{
  background:var(--indigo);
  color:var(--paper-ink);
  position:relative;
  overflow:clip;
  padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(4rem, 10vw, 8rem);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{ color:var(--paper-ink); margin-bottom:0.4em; }
.hero h1 em{ font-style:italic; color:var(--coral); }
.hero .lede{ font-size:1.15rem; max-width:46ch; color:var(--paper-soft); }
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }

.path-card{
  padding:1.4rem;
  background:var(--indigo-2);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
}
.path-card svg{ width:100%; height:auto; display:block; }
.path-dash{
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: draw 1.6s cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay: 0.2s;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.path-node{
  opacity:0;
  animation: pop 0.5s ease forwards;
}
.path-node.n1{ animation-delay:0.3s; }
.path-node.n2{ animation-delay:0.95s; }
.path-node.n3{ animation-delay:1.6s; }
@keyframes pop{ from{ opacity:0; transform:scale(0.4); transform-origin:center; } to{ opacity:1; transform:scale(1); } }
.field-caption{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em;
  color:var(--paper-soft); text-transform:uppercase; margin-top:0.8rem;
}

/* ---------------- Sections ---------------- */
section{ padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-head{ max-width:56ch; margin-bottom:clamp(2rem,4vw,3rem); }
.on-dark{ background:var(--indigo); color:var(--paper-ink); }
.on-dark h2{ color:var(--paper-ink); }
.alt{ background:var(--canvas-2); }

/* ---------------- Track grid (services) ---------------- */
.plots{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
@media (max-width:920px){ .plots{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .plots{ grid-template-columns:1fr; } }

.plot{
  background:var(--canvas);
  padding:2rem 1.7rem;
  display:flex; flex-direction:column; gap:0.6rem;
}
.plot .tag{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--teal-deep);
}
.plot h3{ margin-bottom:0.2em; }
.plot p{ font-size:0.96rem; margin-bottom:0.6em; }
.plot a{ font-size:0.9rem; font-weight:600; color:var(--teal-deep); text-decoration:none; }
.plot a:hover{ text-decoration:underline; }

.cluster-heading{
  grid-column:1 / -1;
  background:var(--indigo);
  color:var(--paper-ink);
  padding:0.9rem 1.7rem;
  display:flex; align-items:baseline; gap:0.8rem;
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
}
.cluster-heading span{ color:var(--coral); }

/* ---------------- Cards / stats ---------------- */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
@media (max-width:820px){ .stat-row{ grid-template-columns:1fr 1fr; } }
.stat b{ display:block; font-family:var(--display); font-size:clamp(1.8rem,3vw,2.6rem); color:var(--coral); font-weight:600; }
.stat span{ font-family:var(--mono); font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-soft); }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; }
@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }

.value-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.4rem; }
.value-list li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.value-list .mark{
  width:34px; height:34px; border-radius:9px;
  background:var(--teal); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--indigo); font-family:var(--mono); font-size:0.8rem; font-weight:700;
}

.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
@media (max-width:820px){ .team-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .team-grid{ grid-template-columns:1fr; } }
.team-card{ background:var(--canvas-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; }
.team-card .avatar{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--coral), var(--teal));
  margin-bottom:1rem;
}
.team-card .role{ font-family:var(--mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--teal-deep); }

/* ---------------- Timeline (about) ---------------- */
.timeline{ border-left:2px solid var(--line); padding-left:2rem; display:grid; gap:2.2rem; }
.timeline .row .yr{ font-family:var(--mono); color:var(--teal-deep); font-size:0.85rem; }

/* ---------------- Testimonial / quote strip ---------------- */
.quote-strip{
  background:var(--indigo); color:var(--paper-ink);
  border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.4rem);
  display:grid; gap:1.2rem;
}
.quote-strip blockquote{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.9rem); margin:0; color:var(--paper-ink);
}
.quote-strip cite{ font-family:var(--mono); font-style:normal; font-size:0.8rem; letter-spacing:0.06em; color:var(--paper-soft); }

/* ---------------- CTA banner ---------------- */
.cta-banner{
  background:linear-gradient(120deg, var(--teal-deep), var(--indigo) 70%);
  color:var(--paper-ink);
  border-radius:var(--radius);
  padding:clamp(2.4rem,5vw,3.6rem);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cta-banner h2{ color:var(--paper-ink); margin-bottom:0.2em; }

/* ---------------- Forms (contact) ---------------- */
.form-grid{ display:grid; gap:1.3rem; }
.field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
@media (max-width:620px){ .field-pair{ grid-template-columns:1fr; } }
label{ display:block; font-size:0.88rem; font-weight:600; margin-bottom:0.4rem; color:var(--ink); }
input, select, textarea{
  width:100%; font-family:var(--body); font-size:1rem;
  padding:0.8em 0.95em; border-radius:9px;
  border:1px solid var(--line); background:var(--canvas);
  color:var(--ink);
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(47,184,166,0.18);
}
textarea{ min-height:140px; resize:vertical; }
.form-note{ font-size:0.85rem; color:var(--ink-soft); }
.form-note.is-error{ color:var(--coral-deep); font-weight:600; }
.btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none; }
input.is-invalid, select.is-invalid, textarea.is-invalid{
  border-color:var(--coral-deep);
  box-shadow:0 0 0 3px rgba(226,83,47,0.14);
}

.contact-card{
  background:var(--indigo); color:var(--paper-ink);
  border-radius:var(--radius); padding:2.2rem;
  display:grid; gap:1.4rem; align-content:start;
}
.contact-card a.email{
  font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--coral); text-decoration:none;
}
.contact-line{ display:flex; gap:0.8rem; align-items:flex-start; }
.contact-line .k{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--paper-soft); min-width:88px; }

/* ---------------- Footer ---------------- */
footer{
  background:var(--indigo); color:var(--paper-soft);
  padding-block:3rem 2rem; border-top:1px solid var(--line-dark);
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--gap); margin-bottom:2.2rem; }
@media (max-width:720px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
footer h4{ color:var(--paper-ink); font-family:var(--body); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.9em; }
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.6em; }
footer a{ text-decoration:none; color:var(--paper-soft); font-size:0.93rem; }
footer a:hover{ color:var(--coral); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  border-top:1px solid var(--line-dark); padding-top:1.6rem; font-size:0.82rem;
}

/* Skip link for accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--coral); color:#171018; padding:0.8em 1.2em; border-radius:8px; z-index:100;
}
.skip-link:focus{ left:1rem; top:1rem; }