/* ============================================================
   INSPECTRA PLUS — Color & Type Foundations
   Home inspection + homeowner maintenance consulting
   Brand colors sampled from logo: Navy #135795 · Slate #7C9CAD
   ============================================================ */

/* Fonts loaded via Google Fonts (see note in README — wordmark is a
   geometric sans; Montserrat is the closest free match). */
:root {
  /* ---------- BRAND CORE ---------- */
  --brand-navy: #135795;   /* primary — INSpectra "Plus" + mark */
  --brand-slate: #7C9CAD;  /* secondary — "INSpectra" wordmark + plus */

  /* ---------- NAVY SCALE (primary) ---------- */
  --navy-50:  #EAF1F8;
  --navy-100: #CFE0EE;
  --navy-200: #9FBFDB;
  --navy-300: #5E92C4;
  --navy-400: #2E72AE;
  --navy-500: #135795;  /* brand */
  --navy-600: #0F4A80;
  --navy-700: #0C3A66;
  --navy-800: #0A2E50;
  --navy-900: #071F37;

  /* ---------- SLATE SCALE (secondary) ---------- */
  --slate-50:  #F1F5F7;
  --slate-100: #DFE8ED;
  --slate-200: #C2D2DA;
  --slate-300: #A3BCC7;
  --slate-400: #8DAAB8;
  --slate-500: #7C9CAD;  /* brand */
  --slate-600: #5E7E8F;
  --slate-700: #4A6473;
  --slate-800: #374B57;
  --slate-900: #25333B;

  /* ---------- NEUTRALS (cool, slight blue cast) ---------- */
  --ink:    #1A2530;  /* near-black, primary text */
  --fg-1:   #1A2530;  /* headings, high-emphasis text */
  --fg-2:   #475561;  /* body text */
  --fg-3:   #6B7884;  /* secondary / muted text */
  --fg-4:   #99A6B0;  /* disabled / placeholder */

  --bg-1:   #FFFFFF;  /* cards, surfaces */
  --bg-2:   #F5F8FA;  /* page background */
  --bg-3:   #EAF0F4;  /* sunken / subtle fill */
  --bg-navy: #0A2E50; /* dark sections / footers */

  --border-1: #E2E9EE; /* hairline dividers */
  --border-2: #CBD7DF; /* default control borders */
  --border-3: #A3BCC7; /* emphasized / focus-ring base */

  /* ---------- SEMANTIC — INSPECTION SEVERITY ---------- */
  /* Core to the product: every report finding carries a rating. */
  --pass:        #2E7D52;  --pass-bg:   #E6F2EA;  --pass-fg:   #1E5638;  /* Sound / functional */
  --monitor:     #C8860D;  --monitor-bg:#FBF1DC;  --monitor-fg:#8A5C06;  /* Maintain / monitor */
  --defect:      #C0492E;  --defect-bg: #FAE7E1;  --defect-fg: #8C2F19;  /* Repair / replace */
  --safety:      #A8281E;  --safety-bg: #F8E2DF;  --safety-fg: #7A1A12;  /* Safety hazard */
  --info:        #135795;  --info-bg:   #EAF1F8;  --info-fg:   #0C3A66;  /* Informational */

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(16,48,80,0.10);
  --shadow-sm: 0 2px 6px rgba(16,48,80,0.12);
  --shadow-md: 0 8px 18px rgba(16,48,80,0.16);
  --shadow-lg: 0 18px 40px rgba(16,48,80,0.22);
  --shadow-focus: 0 0 0 3px rgba(19,87,149,0.28);

  /* ---------- RADII ---------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (semantic) ---------- */
  --display-size: 56px;   --display-lh: 1.05;  /* @kind font */
  --display-ls: -0.02em;  /* @kind font */
  --display-wt: 800;      /* @kind font */
  --h1-size: 40px;        --h1-lh: 1.1;        /* @kind font */
  --h1-ls: -0.015em;      /* @kind font */
  --h1-wt: 700;           /* @kind font */
  --h2-size: 30px;        --h2-lh: 1.15;       /* @kind font */
  --h2-ls: -0.01em;       /* @kind font */
  --h2-wt: 700;           /* @kind font */
  --h3-size: 22px;        --h3-lh: 1.25;       /* @kind font */
  --h3-ls: -0.005em;      /* @kind font */
  --h3-wt: 600;           /* @kind font */
  --h4-size: 18px;        --h4-lh: 1.3;        /* @kind font */
  --h4-ls: 0;             /* @kind font */
  --h4-wt: 600;           /* @kind font */
  --body-lg-size: 18px;   --body-lg-lh: 1.6;   /* @kind font */
  --body-size: 16px;      --body-lh: 1.6;      /* @kind font */
  --body-sm-size: 14px;   --body-sm-lh: 1.55;  /* @kind font */
  --caption-size: 12.5px; --caption-lh: 1.4;   /* @kind font */
  --overline-size: 12px;  --overline-ls: 0.12em; /* @kind font */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply via classes
   ============================================================ */
.ip-display {
  font-family: var(--font-display); font-weight: var(--display-wt);
  font-size: var(--display-size); line-height: var(--display-lh);
  letter-spacing: var(--display-ls); color: var(--fg-1);
}
.ip-h1 {
  font-family: var(--font-display); font-weight: var(--h1-wt);
  font-size: var(--h1-size); line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls); color: var(--fg-1);
}
.ip-h2 {
  font-family: var(--font-display); font-weight: var(--h2-wt);
  font-size: var(--h2-size); line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls); color: var(--fg-1);
}
.ip-h3 {
  font-family: var(--font-display); font-weight: var(--h3-wt);
  font-size: var(--h3-size); line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls); color: var(--fg-1);
}
.ip-h4 {
  font-family: var(--font-body); font-weight: var(--h4-wt);
  font-size: var(--h4-size); line-height: var(--h4-lh); color: var(--fg-1);
}
.ip-body-lg { font-family: var(--font-body); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); color: var(--fg-2); }
.ip-body    { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg-2); }
.ip-body-sm { font-family: var(--font-body); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--fg-2); }
.ip-caption { font-family: var(--font-body); font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--fg-3); }
.ip-overline {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--overline-size); letter-spacing: var(--overline-ls);
  text-transform: uppercase; color: var(--brand-slate);
}
.ip-mono { font-family: var(--font-mono); font-size: var(--body-sm-size); }


  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg-2);}
  a{color:var(--navy-600);text-decoration:none;}
  a:hover{color:var(--navy-700);text-decoration:underline;text-underline-offset:3px;}
  ::selection{background:var(--navy-100);}
  @keyframes ipRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

a.ip-cta:hover{filter:brightness(0.92);}
@media (max-width: 900px){
  header{height:auto !important;flex-wrap:wrap !important;padding:12px 20px !important;gap:12px !important;}
  header nav{margin-left:0 !important;order:3;width:100%;overflow-x:auto;gap:18px !important;padding-bottom:4px;}
  header > div:last-child{margin-left:auto !important;}
  main section, footer{padding-left:20px !important;padding-right:20px !important;}
  main [style*="grid-template-columns"], footer [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important;}
  main h1{font-size:34px !important;}
}
header nav a{white-space:nowrap;}
@media (max-width:1100px){header nav{gap:16px !important;margin-left:8px !important;}}