/* ============================================================
   6KZ, www.6-kz.com

   Light only. A consultancy site is read by clients, lenders and
   caseworkers; it should look the same to all of them, so there is
   no dark-mode variant.

   Type: Jost (geometric, matches the wordmark) for display and small
   caps; Inter for body and UI, which carries dense text better.

   One accent, used sparingly, on eyebrow labels, primary buttons and the
   active nav rule. Change --accent alone to reskin the site.
   ============================================================ */

:root{
  --bg:        #ffffff;
  --surface:   #f6f6f5;
  --ink:       #14161a;
  --ink-2:     #3f444c;
  --muted:     #767b83;
  --rule:      #e2e3e5;
  --accent:    #9e2b25;
  --accent-d:  #7f221d;

  --measure:   64ch;
  --pad:       clamp(1.25rem, 5vw, 5.5rem);
  --max:       82rem;

  --display: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', sans-serif;
  --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--text);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--ink); color:var(--bg); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:20;
  background:var(--ink); color:#fff; padding:.75rem 1rem;
}
.skip:focus{ left:0; }

.wrap{ max-width:var(--max); margin-inline:auto; }

/* ============================================================
   Header
   ============================================================ */

.site-head{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  padding:1.15rem var(--pad);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rule);
}
.brand{ display:block; line-height:0; }
.mark{ height:24px; width:auto; display:block; mix-blend-mode:multiply; }
.mark.on-dark{ display:none; }

nav{ display:flex; gap:clamp(1.1rem,2.6vw,2.4rem); }
nav a{
  position:relative;
  color:var(--ink-2); text-decoration:none;
  font-family:var(--display); font-weight:400;
  font-size:.75rem; letter-spacing:.17em; text-transform:uppercase;
  padding:.35rem 0;
}
nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
nav a:hover, nav a:focus-visible{ color:var(--ink); }
nav a:hover::after, nav a:focus-visible::after, nav a[aria-current="page"]::after{
  transform:scaleX(1);
}
nav a[aria-current="page"]{ color:var(--ink); }

/* ============================================================
   Layout
   ============================================================ */

main{ padding:0 var(--pad); }
section{ max-width:var(--max); margin-inline:auto; padding:clamp(3.5rem,7vw,6rem) 0; }
hr{ border:0; border-top:1px solid var(--rule); margin:0 auto; max-width:var(--max); }

/* Full-bleed tinted band, breaking out of the main padding */
.band{
  background:var(--surface);
  border-block:1px solid var(--rule);
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
}

/* ============================================================
   Type
   ============================================================ */

.eyebrow{
  margin:0 0 1.25rem;
  color:var(--accent);
  font-family:var(--display); font-weight:500;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
}

h1{
  margin:0 0 1.75rem;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.5rem, 5.5vw, 4.5rem);
  line-height:1.06; letter-spacing:-0.02em;
  color:var(--ink);
  text-wrap:balance;
}
h2{
  margin:0 0 1.5rem;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.75rem, 3.2vw, 2.6rem);
  line-height:1.15; letter-spacing:-0.015em;
  color:var(--ink);
  text-wrap:balance;
}
h3{
  margin:0 0 .5rem;
  font-family:var(--display); font-weight:500;
  font-size:1.0625rem; color:var(--ink);
}

.lede{
  max-width:var(--measure); margin:0 0 1.25rem;
  font-size:1.1875rem; line-height:1.6; color:var(--ink-2);
}
.lede.muted{ color:var(--muted); font-size:1.0625rem; }
.section-lede{ max-width:var(--measure); margin:0 0 1.5rem; }
.note{ max-width:var(--measure); margin:2rem 0 0; color:var(--muted); font-size:.9375rem; }

/* ============================================================
   Hero
   ============================================================ */

.hero{
  display:grid; align-items:center;
  gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  padding-block:clamp(3.5rem,8vw,7rem);
}
@media (max-width:60rem){ .hero{ grid-template-columns:1fr; } }

.hero-figure{
  position:relative;
  aspect-ratio:5/4;
  display:grid; place-items:stretch;
  padding:clamp(1rem,3vw,2.5rem);
  background:var(--surface);
  border:1px solid var(--rule);
  overflow:hidden;
}
.hero-cap{
  position:absolute; left:1.1rem; bottom:.9rem; margin:0;
  color:var(--muted);
  font-family:var(--display);
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
}
.hero-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:2.25rem; }

/* ============================================================
   Buttons
   ============================================================ */

.button{
  display:inline-block;
  padding:.9rem 1.9rem;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  font-family:var(--display); font-weight:500;
  font-size:.75rem; letter-spacing:.17em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.button:hover, .button:focus-visible{ background:var(--accent-d); border-color:var(--accent-d); }
.button[disabled]{ opacity:.5; cursor:default; }

.button.ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.button.ghost:hover, .button.ghost:focus-visible{
  background:transparent; border-color:var(--ink); color:var(--ink);
}

/* ============================================================
   Deliverable list
   ============================================================ */

ol.deliverable{
  list-style:none; counter-reset:d; margin:0; padding:0;
  border-top:1px solid var(--rule);
  max-width:58rem;
}
ol.deliverable li{
  counter-increment:d;
  display:grid; grid-template-columns:3rem 1fr; gap:1.25rem;
  padding:1.25rem 0;
  border-bottom:1px solid var(--rule);
}
ol.deliverable li::before{
  content:counter(d,decimal-leading-zero);
  color:var(--accent);
  font-family:var(--display); font-weight:500;
  font-size:.75rem; letter-spacing:.1em; padding-top:.45rem;
}

/* ============================================================
   Fee tiers
   ============================================================ */

.tiers{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));
  background:var(--rule); border:1px solid var(--rule);
  margin-top:2.5rem;
}
.tier{ background:var(--bg); padding:1.75rem 1.5rem; display:flex; flex-direction:column; }
.tier h3{ margin-bottom:.65rem; }
.tier .scope{ margin:0 0 1.5rem; color:var(--muted); font-size:.9375rem; flex:1; }
.tier dl{ margin:0; border-top:1px solid var(--rule); padding-top:1rem; }
.tier dt{
  color:var(--muted);
  font-family:var(--display);
  font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase;
  margin-top:.9rem;
}
.tier dt:first-of-type{ margin-top:0; }
.tier dd{ margin:.15rem 0 0; font-size:.9375rem; color:var(--ink-2); }
.tier dd.price{
  font-family:var(--display); font-size:1.25rem; font-weight:400; color:var(--ink);
}

ul.fine{
  margin:2rem 0 0; padding:0; list-style:none;
  max-width:var(--measure); color:var(--muted); font-size:.9375rem;
}
ul.fine li{ padding:.4rem 0 .4rem 1.25rem; position:relative; }
ul.fine li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:.6rem; height:1px; background:var(--muted);
}

/* ============================================================
   Columns
   ============================================================ */

.cols{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));
  max-width:68rem;
}
.cols > div{ border-top:2px solid var(--ink); padding-top:1.15rem; }
.cols p{ margin:0; color:var(--muted); font-size:.9375rem; }

.split{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  align-items:start;
}
@media (max-width:56rem){ .split{ grid-template-columns:1fr; } }
.split h2{ margin-bottom:0; }

/* ============================================================
   Contact link
   ============================================================ */

.contact{ margin:2.25rem 0 1.5rem; }
a.mail{
  color:var(--ink); text-decoration:none;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,3vw,1.85rem);
  border-bottom:1px solid var(--rule); padding-bottom:.12em;
  transition:border-color .16s ease;
}
a.mail:hover, a.mail:focus-visible{ border-bottom-color:var(--accent); }

/* ============================================================
   Footer
   ============================================================ */

footer{
  background:var(--ink); color:#9aa0a8;
  padding:3rem var(--pad) 3.25rem;
  font-size:.8125rem;
}
footer .wrap{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
footer p{ margin:0; }
footer .strap{
  color:#fff; font-family:var(--display);
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
}
footer a{ color:#cfd3d8; }

/* ============================================================
   Page head (work, contact)
   ============================================================ */

.page-head{
  max-width:var(--max);
  padding:clamp(3rem,7vw,5rem) 0 clamp(1.75rem,3.5vw,2.75rem);
}

/* ============================================================
   Work
   ============================================================ */

.placeholder-notice{
  max-width:var(--max); margin:0 0 clamp(2.5rem,5vw,3.5rem);
  padding:1.1rem 1.35rem;
  background:var(--surface);
  border:1px solid var(--rule); border-left:3px solid var(--accent);
  color:var(--muted); font-size:.9375rem; line-height:1.6;
}
.placeholder-notice strong{ color:var(--ink); font-weight:600; }

.work{ padding-top:0; }
.work-grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(19rem,1fr));
  background:var(--rule); border:1px solid var(--rule);
}
.work-card{ background:var(--bg); display:flex; flex-direction:column; }

.work-figure{
  position:relative; aspect-ratio:4/3;
  display:grid; place-items:stretch;
  padding:2.25rem;
  background:var(--surface);
  overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.sample-badge{
  position:absolute; top:.85rem; left:.85rem; z-index:1;
  padding:.22rem .55rem;
  background:var(--bg); border:1px solid var(--rule); color:var(--muted);
  font-family:var(--display);
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
}

svg.massing{ width:100%; height:100%; min-width:0; min-height:0; }
svg.massing polygon{
  stroke:var(--ink); stroke-width:1; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
svg.massing .top{ fill:#ffffff; }
svg.massing .fl { fill:#f0f0ef; }
svg.massing .fr { fill:#dcdddf; }
.hero-massing .fl{ fill:#eaebec; }
.hero-massing .fr{ fill:#d5d7da; }

.work-body{ padding:1.75rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.work-use{
  margin:0 0 .5rem; color:var(--accent);
  font-family:var(--display); font-weight:500;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
}
.work-card h3{ margin:0 0 .85rem; font-size:1.25rem; font-weight:400; }
.work-note{ margin:0 0 1.5rem; color:var(--muted); font-size:.9375rem; flex:1; }

.work-meta{ margin:0; border-top:1px solid var(--rule); padding-top:1rem; }
.work-meta dt{
  color:var(--muted);
  font-family:var(--display);
  font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase;
  margin-top:.8rem;
}
.work-meta dt:first-of-type{ margin-top:0; }
.work-meta dd{ margin:.1rem 0 0; font-size:.9375rem; color:var(--ink-2); }

.cta{ max-width:var(--max); }

/* ============================================================
   Contact
   ============================================================ */

.contact-layout{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  max-width:var(--max);
  padding-bottom:clamp(3.5rem,8vw,6rem);
}
@media (max-width:56rem){ .contact-layout{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.4rem; }
.field label{
  display:block; margin-bottom:.45rem;
  color:var(--ink); font-weight:500; font-size:.8125rem;
}
.field .opt{ color:var(--muted); font-weight:400; }

.field input, .field select, .field textarea{
  width:100%; padding:.75rem .9rem;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--rule); border-radius:0;
  font-family:var(--text); font-size:1rem; line-height:1.5;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ resize:vertical; min-height:8.5rem; }
.field select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 1.3rem, calc(100% - .8rem) 1.3rem;
  background-size:.35rem .35rem, .35rem .35rem; background-repeat:no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(20,22,26,.07);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ margin:1rem 0 0; font-size:.9375rem; color:var(--muted); min-height:1.5em; }
.form-status.is-error{ color:var(--accent); }
.form-status.is-ok{ color:var(--ink); }
.fine-print{ margin:1.5rem 0 0; color:var(--muted); font-size:.8125rem; }

.contact-aside{
  background:var(--surface); border:1px solid var(--rule);
  padding:clamp(1.5rem,3vw,2.25rem);
}
.contact-aside h2{
  margin:2rem 0 .6rem;
  font-family:var(--display); font-weight:500;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}
.contact-aside h2:first-child{ margin-top:0; }
.contact-aside p{ margin:0; }
.muted-block{ color:var(--muted); font-size:.9375rem; }

/* ============================================================
   Print
   ============================================================ */

@media print{
  nav, .skip, .hero-figure, .button{ display:none; }
  .site-head{ position:static; }
  body{ color:#000; }
  footer{ background:none; color:#000; border-top:1px solid #000; }
  footer .strap{ color:#000; }
}