/* McMackin & Co. — site styles. Design system: steel square, rules not boxes,
   one gold object per page, Paper ground, nothing rounded, nothing floats. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&family=Barlow:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap");
/* ---- McMackin & Co. design-system tokens (inlined; source of truth is the design system) ---- */
:root {
  /* ---- Brand base values ---- */
  --steel: #60818E;        /* the brand colour */
  --deep-steel: #3A505B;   /* reversed grounds, section dividers */
  --graphite: #56595B;     /* the wordmark, secondary text */
  --ink: #1D1F20;          /* headings and small text */
  --paper: #F2F2F3;        /* the ground — never pure white */
  --brass: #A98545;        /* the document highlight */
  --deep-brass: #7D6132;   /* brass set as text */
  --brass-tint: #D8C9A8;   /* callout grounds, table rules */

  /* ---- Steel ramp ---- */
  --steel-100: #EDF1F3;
  --steel-200: #D6E0E4;
  --steel-300: #B4C6CD;
  --steel-400: #8AA4AE;
  --steel-500: #60818E;
  --steel-600: #4E6C78;
  --steel-700: #3A505B;
  --steel-800: #2C3D45;
  --steel-900: #1E2A30;

  /* ---- Neutral ramp (paper to ink) ---- */
  --neutral-100: #F7F7F6;
  --neutral-200: #F2F2F3;
  --neutral-300: #E2E3E3;
  --neutral-400: #C7C9CA;
  --neutral-500: #9A9EA0;
  --neutral-600: #6E7376;
  --neutral-700: #56595B;
  --neutral-800: #35383A;
  --neutral-900: #1D1F20;

  /* ---- Brass ramp — documents only ---- */
  --brass-100: #F5EFE2;
  --brass-200: #E9DDC3;
  --brass-300: #D8C9A8;
  --brass-400: #C2A472;
  --brass-500: #A98545;
  --brass-600: #937037;
  --brass-700: #7D6132;
  --brass-800: #5E4926;
  --brass-900: #40321A;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--paper);
  --surface-raised: #FFFFFF;
  --surface-inverse: var(--deep-steel);
  --surface-tint: var(--steel-100);
  --surface-highlight: var(--brass-100);

  --text-heading: var(--ink);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-600);
  --text-inverse: var(--paper);
  --text-accent: var(--steel-700);
  --text-highlight: var(--deep-brass);

  --accent: var(--steel);
  --accent-deep: var(--deep-steel);
  --highlight: var(--brass);

  --rule-hairline: var(--neutral-400);
  --rule-strong: var(--ink);
  --rule-accent: var(--steel);
  --rule-highlight: var(--brass);

  --focus-ring: var(--steel-600);
}

:root {
  /* Families */
  --font-logo: "American Typewriter ITC Pro", "American Typewriter", Georgia, serif;
  --font-heading: "Barlow Condensed", "Helvetica Neue Condensed", Arial Narrow, sans-serif;
  --font-body: "Source Serif 4", Charter, Georgia, serif;
  --font-data: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Scale — print-first, 15px body */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 21px;
  --text-xl: 27px;
  --text-2xl: 34px;
  --text-3xl: 44px;
  --text-4xl: 58px;
  --text-5xl: 76px;

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-loose: 1.7;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Tracking — the eyebrow/label lockup used throughout */
  --tracking-label: 0.13em;
  --tracking-eyebrow: 0.16em;
  --tracking-tight: 0.005em;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 36px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 88px;
  --space-11: 120px;

  /* The brand is square. Radius is 0 unless a screen control needs a hair. */
  --radius-none: 0px;
  --radius-sm: 2px;

  /* Rule weights */
  --border-hairline: 1px;
  --border-normal: 2px;
  --border-heavy: 3px;

  /* Document measures */
  --measure-body: 68ch;
  --measure-narrow: 46ch;
  --page-margin: var(--space-10);
}
/* ---- end tokens ---- */

:root{
  /* base ramps, scale and spacing come from the design system tokens above */
  --hairline:var(--rule-hairline);
  --head:var(--font-heading); --body:var(--font-body); --data:var(--font-data);
  --measure:68ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;text-wrap:pretty}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
a{color:var(--steel-700);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--steel-900);text-decoration-thickness:2px}
img{max-width:100%}

/* header */
.site-head{border-bottom:1px solid var(--hairline)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:20px;padding-bottom:20px}
.head-row .logo{display:flex;align-items:center;gap:14px;flex:none}
.head-row .logo .mark{display:block;height:34px;width:34px}
.head-row .logo .wordmark{display:block;height:22px;width:auto}
.nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.nav a{font-family:var(--head);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--tracking-label);font-size:var(--text-sm);color:var(--ink);text-decoration:none}
.nav a:hover{color:var(--steel-700)}
.nav a[aria-current="page"]{color:var(--steel);border-bottom:2px solid var(--brass);padding-bottom:2px}
.navtoggle{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--head);font-weight:var(--weight-medium);
  text-transform:uppercase;letter-spacing:var(--tracking-label);font-size:var(--text-sm);
  padding:var(--space-2) var(--space-5);border:2px solid var(--steel-500);background:var(--steel-500);color:var(--paper);
  text-decoration:none;border-radius:0;white-space:nowrap;
  transition:background 120ms cubic-bezier(.2,0,.2,1),color 120ms cubic-bezier(.2,0,.2,1),border-color 120ms cubic-bezier(.2,0,.2,1);cursor:pointer}
.btn:hover{background:var(--steel-600);border-color:var(--steel-600);color:var(--paper)}
.btn-outline{background:transparent;color:var(--steel-700);border-color:var(--steel-500)}
.btn-outline:hover{background:var(--steel-100);color:var(--steel-700);border-color:var(--steel-500)}
.btn-rev{background:var(--paper);border-color:var(--paper);color:var(--steel-700)}
.btn-rev:hover{background:var(--steel-200);border-color:var(--steel-200);color:var(--steel-700)}
:focus-visible{outline:2px solid var(--steel-600);outline-offset:2px}

/* type */
.eyebrow{font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--steel);margin:0 0 10px}
h1{font-family:var(--head);font-weight:500;font-size:clamp(38px,6vw,58px);line-height:1.05;margin:0 0 16px;max-width:20ch}
h2{font-family:var(--head);font-weight:500;font-size:clamp(27px,4vw,34px);line-height:1.05;margin:0 0 12px;max-width:26ch}
h3{font-family:var(--head);font-weight:500;font-size:21px;line-height:1.1;margin:0 0 10px}
p{max-width:var(--measure);margin:0 0 14px}
.lede{font-size:21px;line-height:1.5}
.small{font-size:15px}
.muted{color:var(--graphite)}
ul.plain{list-style:none;padding:0;margin:0}

/* sections + rules */
section{padding:64px 0}
section.tight{padding:48px 0}
hr.rule{border:0;border-top:1px solid var(--hairline);margin:0}
.rule-heavy{border:0;border-top:3px solid var(--brass);margin:0 0 28px;max-width:var(--measure)}
.rule-norm{border:0;border-top:2px solid var(--deep-steel);margin:0 0 22px}

/* statement list — bold lead-in blocks divided by hairlines */
.statements{border-top:1px solid var(--hairline);max-width:var(--measure);margin:0;padding:0}
.statements li{list-style:none;border-bottom:1px solid var(--hairline);padding:16px 0}
.statements strong{font-family:var(--body);font-weight:600}
.statements ul{margin:10px 0 0;padding-left:20px}
.statements ul li{border:0;padding:4px 0;list-style:disc}

/* capability blocks */
.cap{padding:36px 0;border-top:2px solid var(--deep-steel)}
.cap h3{font-size:27px}
.cap dt{font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--steel);margin:18px 0 6px}
.cap dd{margin:0;max-width:var(--measure)}
.cap ul{margin:0;padding-left:20px;max-width:var(--measure)}
.cap ul li{margin-bottom:8px}
.cap ul ul{margin-top:8px}

/* two-column grid */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px}
.cols p{max-width:46ch}

/* stack list (home capabilities) */
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 36px;border-top:1px solid var(--hairline)}
.stack a.item{display:block;border-bottom:1px solid var(--hairline);padding:18px 0;text-decoration:none;color:var(--ink)}
.stack a.item:hover{color:var(--steel-700)}
.stack .label{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:15px;display:block;margin-bottom:4px}
.stack .desc{font-size:15px;color:var(--graphite);display:block;max-width:36ch}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;border-top:1px solid var(--hairline);padding-top:22px}
.steps .n{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:34px;color:var(--brass);display:block;line-height:1;margin-bottom:8px}
.steps h3{margin-bottom:6px}
.steps p{font-size:15px;max-width:36ch;margin:0}

/* reversed CTA band */
.cta{background:var(--deep-steel);color:var(--paper);padding:64px 0}
.cta h2{color:var(--paper);max-width:22ch}
.cta p{color:var(--steel-100)}
.cta .eyebrow{color:var(--steel-200)}
.cta .after{font-size:var(--text-base);color:var(--steel-200);margin:12px 0 0}

/* tinted block (Sandbox, disclaimers) */
.tint{background:var(--brass-tint);border-top:3px solid var(--deep-brass);padding:28px;max-width:var(--measure)}
.tint .eyebrow{color:var(--deep-brass)}
.tag{display:inline-block;font-family:var(--head);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);font-size:var(--text-xs);
  color:var(--deep-brass);border:1px solid var(--deep-brass);padding:3px 9px;margin-bottom:12px}

/* figure */
figure.portrait{margin:0;width:264px;max-width:100%}
figure.portrait .frame{border:1px solid var(--hairline);padding:22px;background:transparent}
figure.portrait img{display:block;width:100%;height:auto;background:var(--paper)}
figure.portrait figcaption{margin-top:8px;font-family:var(--data);font-size:11px;letter-spacing:.06em;color:var(--graphite)}
.principal{display:grid;grid-template-columns:264px minmax(0,1fr);gap:44px;align-items:start}

/* form */
form.contact{max-width:640px}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--steel);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:var(--text-md);color:var(--ink);
  background:var(--surface-raised);border:1px solid var(--hairline);border-radius:0;padding:11px 12px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--steel-600);outline:2px solid var(--steel-600);outline-offset:0}
.field .helper{font-size:15px;color:var(--graphite);margin:6px 0 0}
.hp{position:absolute;left:-9999px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:start}
.contact-detail dt{font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--steel);margin:0 0 4px}
.contact-detail dd{margin:0 0 16px;font-size:17px}

/* footer */
.site-foot{border-top:2px solid var(--deep-steel);padding:48px 0 36px;margin-top:0}
.foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:36px;padding-bottom:28px;border-bottom:1px solid var(--hairline)}
.foot-top h4{font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--steel);margin:0 0 10px;font-weight:500}
.foot-top p{font-size:15px;max-width:42ch;margin:0}
.foot-top ul{list-style:none;margin:0;padding:0;font-size:15px}
.foot-top ul li{margin-bottom:6px}
.foot-top ul a{color:var(--ink);text-decoration:none}
.foot-top ul a:hover{color:var(--steel-700);text-decoration:underline}
.foot-logo img{display:block;height:34px;width:auto;margin-bottom:14px}
.legal{font-size:13px;color:var(--graphite);padding-top:22px;max-width:none}
.disclaimer{font-size:13px;color:var(--graphite);max-width:90ch;margin-top:12px}

@media (max-width:860px){
  .principal{grid-template-columns:1fr;gap:28px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:1060px){
  .head-row{flex-wrap:wrap;gap:14px}
  .nav{gap:18px;order:3;width:100%;border-top:1px solid var(--hairline);padding-top:14px}
  .head-row .btn{order:2}
}
@media (max-width:680px){
  body{font-size:16px}
  section{padding:44px 0}
  .foot-top{grid-template-columns:1fr}
}
@media print{
  .site-head .btn,.cta .btn{display:none}
  body{background:#fff}
}