/* ============================================================
   Lindisfarne Labs — website styles
   Built on the Lindisfarne Labs Design System (blue brand).
   Tokens + fonts come from colors_and_type.css.
   Edit colours/type there; edit layout & components here.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:var(--leading-body);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none;}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}

/* ---------- layout helpers ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 64px;}

.eyebrow{
  font-family:var(--font-display);font-weight:var(--w-semibold);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-primary);
}

.lede{
  font-size:20px;color:var(--brand-deep);opacity:.85;
  max-width:60ch;text-wrap:pretty;
}

.measure{max-width:68ch;}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--brand-deep);text-wrap:balance;}
h1{font-weight:var(--w-extrabold);font-size:var(--clamp-h1);line-height:1.08;letter-spacing:-.02em;}
h2{font-weight:var(--w-bold);font-size:var(--clamp-h2);line-height:1.12;letter-spacing:-.01em;}
h3{font-weight:var(--w-semibold);font-size:var(--font-h4);line-height:1.25;}
p{text-wrap:pretty;}
p + p{margin-top:16px;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(252,253,252,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .inner{display:flex;align-items:center;gap:24px;height:68px;}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;}
.brand .dot{width:16px;height:16px;border-radius:50%;background:var(--brand-primary);flex:none;}
.brand .word{
  font-family:var(--font-display);font-weight:var(--w-extrabold);
  font-size:20px;letter-spacing:-.01em;color:var(--brand-deep);
}
.brand .word span{color:var(--brand-primary);}

.site-nav{display:flex;gap:28px;margin-right:8px;}
.site-nav a{
  font-family:var(--font-display);font-weight:var(--w-medium);
  font-size:15px;color:var(--brand-deep);padding:4px 0;
  border-bottom:2px solid transparent;transition:.2s var(--ease);
}
.site-nav a:hover{color:var(--brand-primary);}
.site-nav a.active{color:var(--brand-primary);border-bottom-color:var(--brand-primary);}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-display);font-weight:var(--w-semibold);
  font-size:16px;letter-spacing:.01em;border:none;
  border-radius:var(--radius-md);padding:14px 26px;cursor:pointer;
  transition:.25s var(--ease);display:inline-flex;align-items:center;gap:8px;
}
.btn svg{width:18px;height:18px;}
.btn-cta{background:var(--brand-accent-text);color:#fff;}
.btn-cta:hover{filter:brightness(.92);}
.btn-primary{background:var(--brand-primary);color:#fff;}
.btn-primary:hover{filter:brightness(.92);}
.btn-ghost{background:transparent;color:var(--brand-primary);border:1.5px solid var(--brand-primary);}
.btn-ghost:hover{background:var(--brand-tint);}
.btn-sm{padding:10px 20px;font-size:15px;}
.btn-ghost-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);}

/* ---------- pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:var(--w-semibold);
  font-size:13px;padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--brand-sky);color:var(--brand-deep);
}
.pill.signal{background:var(--brand-signal);color:#fff;}

/* ---------- sections ---------- */
.section{padding:80px 0;border-bottom:1px solid var(--border);}
.section.tight{padding:64px 0;}
.section-head{margin-bottom:48px;}
.section-head .eyebrow{margin-bottom:12px;}
.section-head h2{margin-bottom:16px;}

/* ---------- page hero (interior pages) ---------- */
.page-hero{padding:80px 0 56px;border-bottom:1px solid var(--border);}
.page-hero .eyebrow{margin-bottom:16px;}
.page-hero h1{margin-bottom:20px;}

/* ---------- home hero ---------- */
.hero{padding:104px 0 88px;border-bottom:1px solid var(--border);}
.hero h1{font-size:var(--clamp-display);line-height:1.02;margin-bottom:24px;max-width:16ch;}
.hero .lede{margin-bottom:32px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
.hero-proof{display:flex;gap:28px;flex-wrap:wrap;}
.hero-proof span{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;
  font-weight:var(--w-medium);font-family:var(--font-display);color:var(--brand-deep);
}

/* ---------- cards ---------- */
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:32px;box-shadow:var(--shadow-1);transition:.25s var(--ease);
}
a.card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);}
.icon-badge{
  width:48px;height:48px;border-radius:var(--radius-md);background:var(--brand-tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--brand-primary);
}
.icon-badge svg{width:22px;height:22px;}
.card h3{margin-bottom:10px;}
.card p{font-size:15px;color:var(--brand-deep);opacity:.82;}
.card-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-family:var(--font-display);font-weight:var(--w-semibold);
  font-size:14px;color:var(--brand-primary);
}
.card-link svg{width:15px;height:15px;}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}

/* ---------- project rows (detailed) ---------- */
.project{
  display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;
  padding:56px 0;border-bottom:1px solid var(--border);
}
.project:last-child{border-bottom:none;}
.project.flip .project-media{order:2;}
.project-body .pill{margin-bottom:20px;}
.project-body h2{margin-bottom:16px;}
.project-body p{color:var(--brand-deep);opacity:.85;max-width:50ch;}
.project-meta{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;}
.project-meta .item{font-size:14px;font-family:var(--font-display);font-weight:var(--w-medium);
  color:var(--brand-deep);display:inline-flex;align-items:center;gap:8px;}
.project-meta svg{width:16px;height:16px;color:var(--brand-primary);}

/* ---------- image placeholder ----------
   Drop a real <img> in place of .img-placeholder when you have photos.
   Keep the same border-radius (radius-lg) for framed images, or use
   class "bleed" on the <img> for full-bleed. */
.img-placeholder{
  border-radius:var(--radius-lg);
  background:
    repeating-linear-gradient(45deg, var(--brand-tint), var(--brand-tint) 14px, #fff 14px, #fff 28px);
  border:1.5px dashed var(--border);
  min-height:300px;display:flex;align-items:center;justify-content:center;
  color:var(--brand-primary);font-family:var(--font-display);font-weight:var(--w-semibold);
  font-size:14px;text-align:center;padding:24px;
}
.img-placeholder span{
  background:rgba(252,253,252,.9);padding:8px 14px;border-radius:var(--radius-pill);
}
img.framed{border-radius:var(--radius-lg);width:100%;height:auto;display:block;}

/* ---------- colour block (heroes / CTAs) ---------- */
.block{
  background:var(--brand-primary);color:#fff;border-radius:var(--radius-lg);
  padding:64px 56px;
}
.block h2{color:#fff;margin-bottom:16px;}
.block p{color:#fff;opacity:.9;font-size:18px;margin-bottom:28px;max-width:52ch;}
.block-deep{background:var(--brand-deep);}

/* ---------- theory of change steps ---------- */
.toc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.toc-step{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:32px;box-shadow:var(--shadow-1);}
.toc-step .num{font-family:var(--font-display);font-weight:var(--w-extrabold);
  font-size:14px;color:var(--brand-accent-text);letter-spacing:.04em;margin-bottom:16px;}
.toc-step h3{margin-bottom:10px;}
.toc-step p{font-size:15px;color:var(--brand-deep);opacity:.82;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start;}
.contact-line{display:flex;align-items:center;gap:14px;margin-top:24px;}
.contact-line .icon-badge{margin-bottom:0;}
.contact-line a{font-family:var(--font-display);font-weight:var(--w-semibold);
  font-size:20px;color:var(--brand-primary);}
.contact-line a:hover{text-decoration:underline;}
.contact-sub{font-size:14px;color:var(--brand-deep);opacity:.7;margin-top:2px;}

/* ---------- footer ---------- */
.site-footer{background:var(--paper);padding-top:64px;}
.site-footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding-bottom:40px;}
.site-footer .tag{font-size:14px;color:var(--brand-deep);opacity:.75;max-width:38ch;margin:14px 0;}
.site-footer .col-h{font-family:var(--font-display);font-weight:var(--w-semibold);font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--brand-primary);margin-bottom:14px;}
.site-footer .col a{display:block;font-size:15px;color:var(--brand-deep);opacity:.8;margin-bottom:10px;}
.site-footer .col a:hover{opacity:1;color:var(--brand-primary);}
.site-footer .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--border);padding:24px 0;font-size:13px;color:var(--brand-deep);opacity:.7;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .grid-3,.toc-steps{grid-template-columns:1fr;}
  .grid-2,.contact-grid{grid-template-columns:1fr;}
  .project,.project.flip .project-media{grid-template-columns:1fr;gap:28px;}
  .project.flip .project-media{order:0;}
  .site-footer .grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:720px){
  .wrap{padding:0 24px;}
  .site-nav{display:none;}
  .block{padding:40px 28px;}
  .hero{padding:72px 0 56px;}
  .site-footer .grid{grid-template-columns:1fr;}
}