/* designedconcepts.ai sample — design system
   Same tokens as the ESC hd funnel so the two sites read as one company:
   navy #0F2A50 (the mark's navy), grey #7C7C84 (the mark's grey), ink #1B1E24. */

:root{
  --navy:#0F2A50;
  --navy-deep:#0A1E3A;
  --grey:#7C7C84;
  --ink:#1B1E24;
  --line:#DCE3EF;
  --surface:#F7FAFE;
  --surface-2:#F1F4FA;
  --white:#fff;
  --good:#2F6B4F;
  --radius:10px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --max:1060px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);
     font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(15,42,80,.25)}
a:hover{border-bottom-color:var(--navy)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.narrow{max-width:720px;margin:0 auto}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);
           backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
                 min-height:64px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;border:0}
.brand img{width:210px;display:block}
.nav{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.nav a{font-size:14.5px;color:var(--ink);border-bottom:0;padding:2px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--navy);color:var(--navy)}
.nav .cta-mini{background:var(--navy);color:#fff;padding:8px 14px;border-radius:999px;font-size:14px}
.nav .cta-mini:hover{background:var(--navy-deep);border-bottom-color:transparent}
.nav-toggle{display:none}

/* ---------- type ---------- */
h1{font-size:clamp(29px,4.4vw,46px);line-height:1.14;letter-spacing:-.02em;margin:0 0 16px;font-weight:650}
h2{font-size:clamp(22px,2.6vw,29px);line-height:1.24;letter-spacing:-.01em;margin:0 0 12px;font-weight:650}
h3{font-size:17.5px;margin:0 0 6px;font-weight:650;letter-spacing:-.005em}
p{margin:0 0 15px}
.lede{font-size:clamp(17px,2vw,20px);color:#3A3F48;line-height:1.55;max-width:60ch}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
         font-weight:600;margin:0 0 14px}
.small{font-size:14px;color:var(--grey)}
.muted{color:#3A3F48}

/* ---------- layout blocks ---------- */
section{padding:56px 0}
section+section{border-top:1px solid var(--line)}
.hero{padding:66px 0 52px;background:
   radial-gradient(1200px 380px at 12% -10%, #EAF0F9 0%, rgba(234,240,249,0) 70%),var(--white)}
.hero .split{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.hero-art{display:flex;justify-content:center}

/* the identity card in the hero - this site's job is to answer "are these people real",
   so the hero carries the legal identity, not a second copy of the wordmark */
.btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:999px;
     padding:13px 22px;font-size:15.5px;font-weight:600;cursor:pointer;border-bottom:0}
.btn:hover{background:var(--navy-deep);border-bottom:0}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--navy);border-bottom:1px solid var(--navy)}
.btn.ghost:hover{background:var(--surface-2)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 18px}
.card.soft{background:var(--surface)}
.card p:last-child{margin-bottom:0}
.card .num{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--grey);letter-spacing:.05em}

/* ---------- ladder ---------- */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:16px 15px;background:var(--white);position:relative}
.step .tag{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#fff;background:var(--navy);
           border-radius:999px;padding:2px 8px;display:inline-block;margin-bottom:9px}
.step strong{display:block;font-size:15px;margin-bottom:4px}
.step span{font-size:13.5px;color:#3A3F48;display:block;line-height:1.45}

/* ---------- artifacts ---------- */
.art{display:grid;grid-template-columns:34px 1fr;gap:14px;border-top:1px solid var(--line);padding:18px 0}
.art:first-of-type{border-top:0}
.art .idx{font-family:ui-monospace,Consolas,monospace;color:var(--grey);font-size:13px;padding-top:2px}
.art h3{margin-bottom:3px}
.art p{margin:0;color:#3A3F48}
.art .proves{display:block;margin-top:5px;font-size:13.5px;color:var(--good)}

/* ---------- price note ---------- */
.price{font-weight:600;color:#0F2A50;letter-spacing:.005em}

/* ---------- callout ---------- */
.callout{border-left:3px solid var(--navy);background:var(--surface);padding:18px 20px;border-radius:0 8px 8px 0}
.callout p:last-child{margin:0}
.dark{background:var(--navy);color:#fff}
.dark h2,.dark h1{color:#fff}
.dark p{color:#D7E1EF}
.dark .btn{background:#fff;color:var(--navy)}
.dark .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.dark a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}

/* ---------- form ---------- */
form{display:grid;gap:14px;margin-top:8px}
label{font-size:13.5px;font-weight:600;display:block;margin-bottom:5px}
input,select,textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(15,42,80,.25);border-color:var(--navy)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
textarea{min-height:104px;resize:vertical}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--surface);padding:38px 0 46px;font-size:14px;color:#3A3F48}
.site-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.site-foot img{width:180px;margin-bottom:12px}
.site-foot a{border-bottom-color:rgba(15,42,80,.2)}
.site-foot h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin:0 0 8px}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.legal{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--grey);
       display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero .split{grid-template-columns:1fr;gap:26px}
  .hero-art{order:-1;justify-content:flex-start}
    .g3,.g2,.ladder{grid-template-columns:1fr 1fr}
  .site-foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  section{padding:42px 0}
  .brand img{width:170px}
  .g3,.g2,.ladder,.field-2,.site-foot .cols{grid-template-columns:1fr}
  /* real mobile nav, not just a logo and a footer */
  .nav-toggle{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
              border-radius:8px;padding:7px 12px;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:0;padding:6px 0 4px}
  .nav.open{display:flex}
  .nav a{padding:10px 0;width:100%;border-bottom:1px solid var(--line);font-size:15.5px}
  .nav .cta-mini{margin-top:10px;text-align:center;width:100%}
}

/* Brand names in running text are set the way the marks are set: two colours for
   designedconcepts.ai, and a lighter, smaller LLC after ESC hd. Real text, not images,
   so it wraps, scales, selects and reads aloud. */
.brand-dc{font-weight:650;letter-spacing:-.004em;white-space:nowrap}
.brand-dc .dc1{color:var(--navy)}
.brand-dc .dc2{color:var(--grey)}
.brand-dc .dc3{color:var(--grey);font-size:.84em;letter-spacing:.01em}
.brand-esc{font-weight:700;letter-spacing:.005em;color:var(--navy);white-space:nowrap}
.brand-esc .llc{font-weight:500;font-size:.8em;letter-spacing:.02em;color:#5B6573}
.dark .brand-dc .dc1{color:#fff}
.dark .brand-dc .dc2,.dark .brand-dc .dc3{color:#C3D0E2}
.dark .brand-esc{color:#fff}
.dark .brand-esc .llc{color:#C3D0E2}
.site-foot .brand-dc .dc1,.site-foot .brand-esc{color:var(--navy)}

/* the brand line above the headline is the logo's own casing, not an uppercase eyebrow */

/* the affiliation note sits under the hero, not beside it: one line, hairline rules, quiet */
.assocbar{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.assocbar p{margin:0;padding:13px 0;font-size:13.5px;color:#5B6573;line-height:1.6}
@media(max-width:560px){.assocbar p{font-size:13px}}

/* The wordmark earns its space at the top of the hero, not only at 17px in the header. */
.hero-mark{display:block;width:400px;max-width:82%;height:auto;margin:0 0 22px}
@media(max-width:560px){.hero-mark{width:290px;margin-bottom:16px}}
/* three cards: the links sit on one line across the row, not stepped */
.ways{display:flex;flex-direction:column}
.ways p:last-child{margin-top:auto;padding-top:14px;margin-bottom:0}