/* ==========================================================================
   MATKIN MARKETING & TECH — DESIGN SYSTEM
   Direction: Slate Office (light, cool slate-blue structure, amber accent)
   ========================================================================== */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}

/* ---------- design tokens ---------- */
:root{
  /* Color */
  --color-bg:#EEF1F4;
  --color-surface:#FFFFFF;
  --color-structural:#33475B;      /* slate band — nav / footer */
  --color-structural-text:#EEF1F4;
  --color-structural-text-muted:#C7D0D8;
  --color-ink:#1F2A37;
  --color-ink-muted:#5B6B7C;
  --color-border:#33475B;
  --color-border-soft:rgba(51,71,91,.16);
  --color-accent:#C97A2B;
  --color-accent-hover:#B36A22;
  --color-accent-tint:rgba(201,122,43,.12);
  --color-accent-contrast:#FFFFFF;
  --color-error:#B3261E;
  --color-error-tint:rgba(179,38,30,.08);
  --color-success:#2E7D4F;
  --color-focus-ring:#7FB0C9;
  --color-placeholder:#DDE2E7;
  --color-placeholder-text:#8A929B;

  /* Type */
  --font-display:'Archivo',sans-serif;
  --font-body:'Public Sans',sans-serif;

  --text-display-xl:2.75rem;   /* 44px — H1 home hero */
  --text-display-l:2rem;       /* 32px — H1 subpage */
  --text-display-m:1.5rem;     /* 24px — H2 */
  --text-display-s:1.1875rem;  /* 19px — H3 / card titles */
  --text-body-l:1.0625rem;     /* 17px — intro paragraphs */
  --text-body-m:0.9375rem;     /* 15px — default body */
  --text-body-s:0.8125rem;     /* 13px — captions */
  --text-micro:0.6875rem;      /* 11px — labels/eyebrows */

  --lh-tight:1.15;
  --lh-heading:1.3;
  --lh-body:1.6;

  /* Spacing — 4px base */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;

  /* Radius */
  --radius-sm:3px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-pill:999px;

  /* Shadow */
  --shadow-sm:0 1px 4px rgba(31,42,55,.06);
  --shadow-md:0 2px 10px rgba(31,42,55,.08);
  --shadow-lg:0 8px 24px rgba(31,42,55,.14);

  /* Motion / borders */
  --transition-fast:120ms ease;
  --transition-base:200ms ease;
  --border-w:1px;
}

body{
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-ink);
  line-height:var(--lh-body);
  font-size:var(--text-body-m);
}

.container{max-width:1120px;margin:0 auto;padding:0 var(--space-5)}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px}
@media(max-width:760px){ .contact-grid{grid-template-columns:1fr} }

h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:var(--lh-tight);letter-spacing:0}
h1{font-size:var(--text-display-l)}
h2{font-size:var(--text-display-m);line-height:var(--lh-heading);margin-bottom:var(--space-4)}
h3{font-size:var(--text-display-s);line-height:var(--lh-heading)}
p{color:var(--color-ink-muted);font-size:var(--text-body-m)}
.eyebrow{font-family:var(--font-display);font-size:var(--text-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);font-weight:700;margin-bottom:var(--space-2);display:block}

section{padding:var(--space-8) 0}
@media(max-width:760px){ section{padding:var(--space-6) 0} }

/* ---------- logo lockup ---------- */
.logo-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;text-decoration:none}
.logo-lockup .mark{font-family:var(--font-display);font-weight:800;font-size:32px;letter-spacing:-0.02em;color:var(--color-ink)}
.logo-lockup .mark .k{color:var(--color-accent);margin-left:-0.14em}
.logo-lockup .word{font-family:var(--font-body);font-weight:700;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--color-ink-muted);margin-top:3px}
.on-structural .logo-lockup .mark{color:var(--color-structural-text)}
.on-structural .logo-lockup .word{color:var(--color-structural-text-muted)}

/* ---------- buttons (all states) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:var(--text-body-m);padding:12px 22px;border-radius:var(--radius-sm);text-decoration:none;border:var(--border-w) solid transparent;cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast)}
.btn-sm{padding:8px 16px;font-size:var(--text-body-s)}

.btn-primary{background:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-md)}
.btn-primary:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}
.btn-primary:active{transform:translateY(1px);box-shadow:var(--shadow-sm)}
.btn-primary:disabled,.btn-primary.is-disabled{background:#C7CDD3;color:#8A929B;box-shadow:none;cursor:not-allowed}

.btn-secondary{background:transparent;color:var(--color-ink);border-color:var(--color-ink)}
.btn-secondary:hover{background:rgba(31,42,55,.06)}
.btn-secondary:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}
.btn-secondary:active{transform:translateY(1px)}
.btn-secondary:disabled,.btn-secondary.is-disabled{color:#A8AFB6;border-color:#C7CDD3;cursor:not-allowed}

.btn-on-structural{background:var(--color-accent);color:#fff}
.btn-on-structural:hover{background:var(--color-accent-hover)}

/* ---------- nav ---------- */
.navbar{background:var(--color-structural);border-bottom:var(--border-w) solid var(--color-structural)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding-top:var(--space-4);padding-bottom:var(--space-4)}
.nav-links{display:flex;gap:var(--space-5);font-family:var(--font-display);font-weight:700;font-size:var(--text-body-s);letter-spacing:.02em}
.nav-links a{text-decoration:none;color:var(--color-structural-text-muted);padding-bottom:4px;border-bottom:2px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast)}
.nav-links a:hover{color:#fff}
.nav-links a[aria-current="page"]{color:#fff;border-color:var(--color-accent)}
.nav-right{display:flex;align-items:center;gap:var(--space-4)}
.phone-link{font-family:var(--font-display);font-weight:700;font-size:var(--text-body-m);color:#fff;text-decoration:none}
.phone-link:hover{color:var(--color-accent)}
.nav-toggle{display:none;position:relative}
.nav-toggle summary{list-style:none;cursor:pointer;color:#fff;font-family:var(--font-display);font-weight:700;display:flex;align-items:center;gap:10px;font-size:var(--text-body-s);letter-spacing:.02em;padding:6px 2px}
.nav-toggle summary::-webkit-details-marker{display:none}
.hamburger-icon{width:20px;height:14px;position:relative;flex-shrink:0}
.hamburger-icon span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:#fff;transition:transform var(--transition-fast),opacity var(--transition-fast)}
.hamburger-icon span:nth-child(1){top:0}
.hamburger-icon span:nth-child(2){top:6px}
.hamburger-icon span:nth-child(3){top:12px}
.nav-toggle[open] .hamburger-icon span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[open] .hamburger-icon span:nth-child(2){opacity:0}
.nav-toggle[open] .hamburger-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:820px){
  .nav-links{display:none}
  .navbar .container{flex-wrap:wrap;row-gap:var(--space-3)}
  .nav-toggle{display:block}
  .nav-right{width:100%;justify-content:space-between;padding-top:var(--space-3);margin-top:var(--space-1);border-top:1px solid rgba(255,255,255,.14)}
  .nav-toggle .nav-links{display:none}
  .nav-toggle[open] .nav-links{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:calc(100% + 10px);right:0;
    background:var(--color-structural);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    padding:var(--space-3);
    min-width:200px;
    z-index:30;
  }
  .nav-toggle[open] .nav-links a{padding:10px 6px;border-bottom:none}
}

/* ---------- hero ---------- */
.hero{padding-top:var(--space-9);padding-bottom:var(--space-8)}
.hero h1{font-size:var(--text-display-xl);max-width:760px;margin-bottom:var(--space-4)}
.hero .lede{font-size:var(--text-body-l);max-width:560px;margin-bottom:var(--space-6)}
.hero .ctas{display:flex;gap:var(--space-4);flex-wrap:wrap}
.page-hero h1{font-size:var(--text-display-l)}
.page-hero{padding-top:var(--space-7);padding-bottom:var(--space-6)}
@media(max-width:600px){
  .hero{padding-top:var(--space-7)}
  .hero h1{font-size:1.75rem}
  .hero .lede{font-size:var(--text-body-m)}
  .ctas{flex-direction:column;align-items:stretch}
  .ctas .btn{width:100%}
  .page-hero h1{font-size:1.5rem}
  .quote-text{font-size:var(--text-display-s)}
  .quote-mark{font-size:44px}
}

/* ---------- trust strip ---------- */
.trust-strip{background:var(--color-surface);border-top:var(--border-w) solid var(--color-border-soft);border-bottom:var(--border-w) solid var(--color-border-soft)}
.trust-strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:0;padding-bottom:0}
.trust-strip div{padding:var(--space-4) var(--space-4);font-family:var(--font-display);font-weight:700;font-size:var(--text-body-s);border-right:var(--border-w) solid var(--color-border-soft)}
.trust-strip div:last-child{border-right:none}
@media(max-width:760px){ .trust-strip .container{grid-template-columns:repeat(2,1fr)} }

/* ---------- price list ---------- */
.price-list{border-top:var(--border-w) solid var(--color-border-soft)}
.price-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-2);border-bottom:var(--border-w) solid var(--color-border-soft);background:var(--color-surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);margin-bottom:var(--space-2)}
.price-row:hover{box-shadow:var(--shadow-md)}
.price-row .name{font-family:var(--font-display);font-weight:700;font-size:var(--text-body-l)}
.price-row .desc{color:var(--color-ink-muted);font-size:var(--text-body-s);margin-top:var(--space-1)}
.price-row .price{font-family:var(--font-display);font-weight:800;color:var(--color-accent);font-size:var(--text-display-s);white-space:nowrap}
.price-note{margin-top:var(--space-4);font-size:var(--text-body-s);color:var(--color-ink-muted)}

/* ---------- cards ---------- */
.card{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--space-5);border:var(--border-w) solid var(--color-border-soft)}
.card:hover{box-shadow:var(--shadow-md)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media(max-width:820px){ .card-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .card-grid{grid-template-columns:1fr} }

/* ---------- stat callout (replaces photo) ---------- */
.stat-callout{width:140px;flex-shrink:0;text-align:center;background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--space-5) var(--space-3)}
.stat-callout .num{font-family:var(--font-display);font-size:40px;font-weight:800;color:var(--color-accent);line-height:1}
.stat-callout .lbl{font-size:var(--text-micro);color:var(--color-ink-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:var(--space-2);line-height:1.4}

/* ---------- placeholder blocks (photos not yet provided — [CHECK]) ---------- */
.placeholder{background:var(--color-placeholder);border:1px dashed var(--color-ink-muted);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-placeholder-text);font-family:var(--font-display);font-size:var(--text-body-s);text-align:center;padding:var(--space-4)}

/* ---------- forms (all states) ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-5)}
.field label{font-family:var(--font-display);font-weight:700;font-size:var(--text-body-s);color:var(--color-ink)}
.field input,.field textarea{font-family:var(--font-body);font-size:var(--text-body-m);padding:12px 14px;border-radius:var(--radius-sm);border:var(--border-w) solid var(--color-border-soft);background:#fff;color:var(--color-ink);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-tint)}
.field .hint{font-size:var(--text-body-s);color:var(--color-ink-muted)}
.field.is-error input,.field.is-error textarea{border-color:var(--color-error);background:var(--color-error-tint)}
.field .error-text{font-size:var(--text-body-s);color:var(--color-error)}
.field input:disabled,.field textarea:disabled{background:#F3F4F6;color:#9AA1A8;cursor:not-allowed}
.field input::placeholder,.field textarea::placeholder{color:#A6ADB4}

/* ---------- pull quote (used in place of a personal photo) ---------- */
.quote-block{background:var(--color-structural);color:var(--color-structural-text);text-align:center;padding:var(--space-8) var(--space-5)}
.quote-mark{font-family:var(--font-display);font-size:64px;font-weight:800;color:var(--color-accent);line-height:1;margin-bottom:var(--space-2)}
.quote-text{font-family:var(--font-display);font-weight:700;font-size:var(--text-display-m);max-width:640px;margin:0 auto;line-height:var(--lh-heading)}
.quote-attribution{margin-top:var(--space-4);font-size:var(--text-body-s);color:var(--color-structural-text-muted);letter-spacing:.04em;text-transform:uppercase}

/* ---------- footer ---------- */
.site-footer{background:var(--color-structural);color:var(--color-structural-text);padding-top:var(--space-7)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-6);padding-bottom:var(--space-6);border-bottom:var(--border-w) solid rgba(255,255,255,.14)}
.footer-tagline{color:var(--color-structural-text-muted);font-size:var(--text-body-s);margin-top:var(--space-3);max-width:260px}
.footer-heading{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--text-body-s);letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:var(--space-3)}
.footer-col a{display:block;color:var(--color-structural-text-muted);text-decoration:none;font-size:var(--text-body-s);margin-bottom:var(--space-2)}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-5) 0;font-size:var(--text-body-s);color:var(--color-structural-text-muted)}
@media(max-width:760px){ .footer-grid{grid-template-columns:1fr} }

/* ---------- misc ---------- */
.section-alt{background:var(--color-surface)}
.center{text-align:center}
.flag{display:inline-block;background:#FFF4E5;color:#8A5A00;font-family:var(--font-display);font-size:var(--text-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-sm);border:1px solid #F0C77A}