/* Harborline Group — construction advisory
   Design system: drawing-set vernacular
   ink / slate / paper / signal amber, hairline rules, title block */

:root{
  --ink:#12151A;
  --ink-2:#171C22;
  --slate:#232932;
  --paper:#EDE9E1;
  --paper-2:#E2DDD2;
  --amber:#F0B429;
  --amber-dim:#B4831F;
  --rule:#39424D;
  --rule-light:#C8C2B5;
  --text:#E8E6E1;
  --text-dim:#98A0AB;
  --text-ink:#1A1F26;
  --text-ink-dim:#5A6470;
  --maxw:1180px;
  --gut:28px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Source Sans 3',system-ui,-apple-system,sans-serif;
  font-size:17.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:'Newsreader','Source Serif 4',Georgia,serif;
  font-weight:400;
  line-height:1.12;
  letter-spacing:-0.012em;
  margin:0;
}
h1{font-size:clamp(38px,5.4vw,66px);line-height:1.06;}
h2{font-size:clamp(28px,3.6vw,44px);}
h3{font-size:clamp(21px,2.1vw,26px);font-weight:500;letter-spacing:-0.004em;}
h4{font-size:18px;font-weight:500;}

p{margin:0 0 18px;}
a{color:var(--amber);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}

.lede{
  font-size:clamp(18px,1.9vw,21px);
  line-height:1.72;
  color:var(--text-dim);
  max-width:70ch;
}

/* mono utility — title block data */
.ref{
  font-family:'Source Sans 3',sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--amber);
  display:block;
  margin-bottom:14px;
}
.ref-dim{color:var(--text-dim);}

/* ---------- skip + focus ---------- */
.skip{
  position:absolute;top:-60px;left:0;
  background:var(--amber);color:var(--ink);
  padding:12px 18px;z-index:200;font-weight:600;
  font-family:'Source Sans 3',sans-serif;font-size:14px;
}
.skip:focus{top:0;}

a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}

.band{padding:88px 0;border-top:1px solid var(--rule);}
.band:first-of-type{border-top:none;}
.band-paper{
  background:var(--paper);
  color:var(--text-ink);
  border-top:1px solid var(--rule-light);
}
.band-paper h1,.band-paper h2,.band-paper h3,.band-paper h4{color:var(--text-ink);}
.band-paper .lede{color:var(--text-ink-dim);}
.band-paper .ref{color:var(--amber-dim);}
.band-slate{background:var(--ink-2);}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:100;
  background:rgba(18,21,26,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.masthead-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;
  min-height:74px;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-lockup{height:36px;width:auto;display:block;}
.nav{display:flex;gap:30px;align-items:center;}
.nav a{
  font-family:'Source Sans 3',sans-serif;font-weight:500;
  font-size:14px;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--text-dim);
  display:inline-flex;align-items:center;min-height:44px;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--amber);text-decoration:none;}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--amber);}

.menu-btn{
  display:none;background:none;border:1px solid var(--rule);
  color:var(--text);padding:10px 14px;cursor:pointer;
  font-family:'Source Sans 3',sans-serif;font-weight:500;font-size:13px;
  letter-spacing:0.1em;text-transform:uppercase;
  min-height:44px;
}

/* ---------- hero ---------- */
.hero{
  padding:104px 0 88px;
  border-bottom:1px solid var(--rule);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:78px 78px;
  opacity:0.16;pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;}
.hero h1{max-width:26ch;}
.hero .lede{margin-top:26px;}

/* ---------- title block ---------- */
.titleblock{
  border:1px solid var(--rule);
  margin-top:52px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  font-family:'IBM Plex Mono',monospace;
}
.tb-cell{
  padding:16px 18px;
  border-right:1px solid var(--rule);
}
.tb-cell:last-child{border-right:none;}
.tb-key{
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--text-dim);display:block;margin-bottom:6px;
}
.tb-val{font-size:14px;color:var(--text);letter-spacing:0.02em;}
.tb-val strong{color:var(--amber);font-weight:600;}

/* ---------- split: text + media ---------- */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:56px;align-items:center;margin-top:40px;
}
.split-wide{grid-template-columns:1.15fr 1fr;}
.split-text > :last-child{margin-bottom:0;}
.split-text .lede{max-width:none;}
.split-media{margin:0;}
.split-media img{width:100%;height:auto;display:block;border:1px solid var(--rule);}
.split-media figcaption{
  font-size:13.5px;color:var(--text-dim);margin-top:12px;line-height:1.55;
}
.band-paper .split-media img{border-color:var(--rule-light);}
.band-paper .split-media figcaption{color:var(--text-ink-dim);}

/* inline media block — supporting figure, not a banner */
.media{margin:36px 0 0;max-width:660px;}
.media img{width:100%;height:auto;display:block;border:1px solid var(--rule);}
.media figcaption{font-size:14px;color:var(--text-dim);margin-top:11px;line-height:1.55;max-width:60ch;}
.band-paper .media img{border-color:var(--rule-light);}
.band-paper .media figcaption{color:var(--text-ink-dim);}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:44px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.cell{background:var(--ink);padding:34px 30px;}
.band-slate .cell{background:var(--ink-2);}
.band-paper .grid{background:var(--rule-light);border-color:var(--rule-light);}
.band-paper .cell{background:var(--paper);}
.cell h3{margin-bottom:12px;}
.cell p:last-child{margin-bottom:0;}
.cell p{font-size:16px;color:var(--text-dim);}
.band-paper .cell p{color:var(--text-ink-dim);}

/* ---------- service entries ---------- */
.entry{
  display:grid;grid-template-columns:180px 1fr;gap:40px;
  padding:44px 0;border-top:1px solid var(--rule);
}
.band-paper .entry{border-top-color:var(--rule-light);}
.entry:last-of-type{border-bottom:1px solid var(--rule);}
.band-paper .entry:last-of-type{border-bottom-color:var(--rule-light);}
.entry-meta{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--amber);}
.band-paper .entry-meta{color:var(--amber-dim);}
.entry-meta span{display:block;color:var(--text-dim);margin-top:8px;letter-spacing:0.1em;}
.band-paper .entry-meta span{color:var(--text-ink-dim);}
.entry-body h3{margin-bottom:14px;}
.entry-body p:last-child{margin-bottom:0;}

/* ---------- lists ---------- */
.checks{list-style:none;padding:0;margin:20px 0 0;}
.checks li{
  padding-left:26px;position:relative;margin-bottom:11px;
  font-size:16px;color:var(--text-dim);
}
.band-paper .checks li{color:var(--text-ink-dim);}
.checks li::before{
  content:"—";position:absolute;left:0;color:var(--amber);
  font-family:'IBM Plex Mono',monospace;
}

/* ---------- callout ---------- */
.note{
  border-left:3px solid var(--amber);
  background:rgba(240,180,41,0.06);
  padding:22px 26px;margin:32px 0 0;
}
.note p:last-child{margin-bottom:0;}
.note p{color:var(--text);font-size:16px;}
.band-paper .note{background:rgba(240,180,41,0.13);}
.band-paper .note p{color:var(--text-ink);}

/* ---------- cta ---------- */
.btn{
  display:inline-block;
  background:var(--amber);color:var(--ink);
  font-family:'Source Sans 3',sans-serif;
  font-size:14px;letter-spacing:0.11em;text-transform:uppercase;
  font-weight:600;padding:17px 36px;
  border:1px solid var(--amber);
  min-height:44px;
}
.btn:hover{background:transparent;color:var(--amber);text-decoration:none;}
.btn-ghost{background:transparent;color:var(--amber);}
.btn-ghost:hover{background:var(--amber);color:var(--ink);}
.band-paper .btn:hover{color:var(--amber-dim);border-color:var(--amber-dim);}

/* ---------- form ---------- */
.form{max-width:640px;margin-top:40px;}
.field{margin-bottom:22px;}
.field label{
  display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;
  background:var(--ink-2);border:1px solid var(--rule);
  color:var(--text);font-family:inherit;font-size:16px;
  min-height:48px;border-radius:0;
}
.field textarea{min-height:130px;resize:vertical;}
.hint{font-size:14px;color:var(--text-dim);margin-top:26px;}

/* ---------- footer title block ---------- */
.band-cta{padding:80px 0 72px;}
.foot{border-top:1px solid var(--rule);background:var(--ink-2);padding-top:56px;}
.foot-intro{
  font-size:16px;color:var(--text-dim);max-width:62ch;margin-bottom:52px;
}
.foot-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:44px;
  padding-bottom:50px;
}
.foot-col h4{
  font-family:'Source Sans 3',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--amber);margin-bottom:18px;
}
.foot-col a{
  display:block;color:var(--text-dim);font-size:16px;
  margin-bottom:12px;line-height:1.45;
}
.foot-col a:hover{color:var(--amber);text-decoration:none;}
.foot-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  border-top:1px solid var(--rule);
  padding:26px 0 18px;
  font-size:14px;color:var(--text-dim);
}
.foot-legal{
  padding-bottom:48px;font-size:13.5px;color:var(--text-dim);
  opacity:0.72;line-height:1.65;max-width:78ch;margin:0;
}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.rise.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .rise{opacity:1;transform:none;}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split,.split-wide{grid-template-columns:1fr;gap:32px;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .titleblock{grid-template-columns:repeat(2,1fr);}
  .tb-cell{border-bottom:1px solid var(--rule);}
  .tb-cell:nth-child(2n){border-right:none;}
  .entry{grid-template-columns:1fr;gap:16px;}
  .foot-cols{grid-template-columns:1fr 1fr;gap:34px;}
}

@media (max-width:760px){
  .menu-btn{display:block;}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--rule);
  }
  .nav.open{display:flex;}
  .nav a{
    padding:17px var(--gut);width:100%;
    border-bottom:1px solid var(--rule);min-height:48px;
  }
  .nav a[aria-current="page"]{border-bottom:1px solid var(--rule);}
  .brand-lockup{height:28px;}
  .foot-cols{grid-template-columns:1fr;gap:32px;}
  .foot-base{flex-direction:column;gap:8px;}
  .band{padding:72px 0;}
  .hero{padding:80px 0 64px;}
  body{font-size:16px;}
}