/* Layout: header + navigation, page/section spacing, grids, footer */

/* ---------- Skip link (visible only when focused with the keyboard) ---------- */
.skip-link{
  position:absolute;
  left:12px; top:-60px;
  z-index:100;
  background:var(--btn-bg);
  color:var(--btn-ink);
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
}
.skip-link:focus{ top:12px; }

/* ---------- Header ---------- */
header.site{
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
/* Three columns: logo | links | button. The two side columns are always the
   same width, so the links sit in the true centre of the page. */
.nav-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  column-gap:clamp(8px, 1.6vw, 16px);
  /* A little wider than the page content so the logo, centred links and
     button all have room on large screens */
  max-width:1360px;
  padding-block:clamp(10px, 1.6vw, 14px);
}
.brand{
  grid-column:1;
  justify-self:start;
  display:flex;
  align-items:center;
  gap:clamp(8px, 1.4vw, 12px);
  text-decoration:none;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
}
.brand-logo{
  height:34px;
  width:auto;
  display:block;
  flex:none;
}
.brand-tagline{
  display:block;
  font-family:'Work Sans',sans-serif;
  font-weight:500;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}
/* When the header gets tight, main.js adds .nav-compact: the words beside
   the logo go first, leaving just the logo image */
header.site.nav-compact .brand-tagline{ display:none; }
nav.links{
  grid-column:2;
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(0px, 0.4vw, 6px);
}
nav.links a{
  white-space:nowrap;
  flex:none;
}
nav.links a:not(.c-button){
  text-decoration:none;
  /* Text and padding shrink smoothly with the window so all links fit */
  font-size:clamp(0.82rem, 0.6rem + 0.3vw, 0.9rem);
  font-weight:600;
  color:var(--ink-soft);
  padding:8px clamp(6px, 0.2rem + 0.55vw, 12px);
  border-radius:999px;
  transition:background 0.15s ease, color 0.15s ease;
}
nav.links a:not(.c-button):hover{ color:var(--ink); background:var(--surface-2); }
nav.links a:not(.c-button)[aria-current="page"]{
  color:var(--navy-ink, var(--navy));
  background:var(--surface-2);
}
.c-button--sm{ padding:8px clamp(12px, 1.4vw, 18px); font-size:0.86rem; }
.nav-cta{
  grid-column:3;
  justify-self:end;
  align-self:center;
  white-space:nowrap;
}
.menu-btn{
  grid-column:3;
  justify-self:end;
  display:none;
  background:none;border:1px solid var(--line);
  border-radius:10px;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  color:var(--ink);
  cursor:pointer;
}

/* ---------- Layout blocks ---------- */
main{ display:block; }
.page{ padding-block: clamp(12px, 2.2vw, 16px) clamp(72px, 11vw, 108px); }
.page--about{ padding-bottom: clamp(28px, 4vw, 40px); }
.page--contact{ padding-bottom: clamp(28px, 4vw, 40px); }
.page--services{ padding-bottom: clamp(18px, 2.5vw, 27px); }

section + section{ margin-top:clamp(64px, 10vw, 104px); }
.container + section{ margin-top:clamp(64px, 10vw, 104px); }

.tint{ background:var(--surface-2); padding-block:clamp(56px, 9vw, 84px); }
.tint + section{ margin-top:clamp(40px, 6vw, 56px); }
section:has(+ .tint){ margin-bottom:0; }

.section-head{ max-width:60ch; margin-bottom:clamp(30px, 5vw, 44px); }
.section-head h2{ font-size:clamp(1.5rem,3vw,2rem); margin-top:10px; }
.section-head p{ margin-top:14px; color:var(--ink-soft); }
.section-head.center{ max-width:640px; margin-inline:auto; text-align:center; }

.basics-highlight-card{
  max-width:480px;
  margin:clamp(34px, 5vw, 46px) auto 0;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px, 3.5vw, 28px);
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(20px, 3.5vw, 28px);
}
.svc-grid{ align-items:start; }
.notes-grid .card{ padding:clamp(28px, 4vw, 36px) clamp(24px, 4vw, 32px); }

footer.site{
  border-top:1px solid var(--line-soft);
  margin-top:clamp(12px, 2vw, 16px);
  padding-block:36px calc(36px + env(safe-area-inset-bottom,0px));
}
.footer-grid{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.footer-legal{
  max-width:640px;
  font-size:0.78rem;
  color:var(--ink-soft);
  line-height:1.6;
}
.footer-legal p + p{ margin-top:8px; }
.footer-logo{ height:28px; width:auto; display:block; }
.footer-place{ font-size:0.85rem; color:var(--ink-soft); margin-top:4px; }
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink-soft);
  transition:color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.footer-social a:hover{ color:var(--accent); border-color:var(--accent); background:var(--surface-2); }
.footer-social svg{ width:16px; height:16px; }