/* ── ART DIRECTION ───────────────────────────────────────────────
   Concept: Scientific bridge-building. Quiet authority.
   Palette: Warm off-white surfaces + logo node colours as accents
   Logo colours: blue #4A72C4, green #6EAA47, red #BE2A2A,
                 amber #E8A800, purple #6B2D9A
   Primary accent: blue #4A72C4 (the top node — connects everything)
   Typography: Zodiak (display) + General Sans (body)
   Density: Spacious, editorial
─────────────────────────────────────────────────────────────── */

:root, [data-theme="light"] {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;
  --space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
  --space-8:2rem;--space-10:2.5rem;--space-12:3rem;
  --space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

  --color-bg:              #f8f7f3;
  --color-surface:         #faf9f6;
  --color-surface-2:       #fcfcfa;
  --color-surface-offset:  #f2efe9;
  --color-surface-dynamic: #e8e4dc;
  --color-divider:         #dedad2;
  --color-border:          #d2cec6;

  --color-text:            #1e1c18;
  --color-text-muted:      #6b6860;
  --color-text-faint:      #b0ada6;
  --color-text-inverse:    #faf9f6;

  --color-primary:         #4A72C4;
  --color-primary-hover:   #3a5ba0;
  --color-primary-active:  #2d4780;
  --color-primary-highlight: #dce5f5;

  --color-node-blue:   #4A72C4;
  --color-node-green:  #6EAA47;
  --color-node-red:    #BE2A2A;
  --color-node-amber:  #E8A800;
  --color-node-purple: #6B2D9A;

  --radius-sm:0.375rem;--radius-md:0.5rem;
  --radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 3px rgba(30,28,24,0.07);
  --shadow-md: 0 4px 16px rgba(30,28,24,0.09);
  --shadow-lg: 0 12px 40px rgba(30,28,24,0.12);

  --content-narrow:640px;--content-default:960px;--content-wide:1200px;
  --font-display:'Zodiak','Georgia',serif;
  --font-body:'General Sans','Helvetica Neue',sans-serif;
}

[data-theme="dark"] {
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
  --color-surface-offset:#1d1c1a;--color-surface-dynamic:#2d2c2a;
  --color-divider:#262523;--color-border:#393836;
  --color-text:#cdccca;--color-text-muted:#797876;
  --color-text-faint:#5a5957;--color-text-inverse:#2b2a28;
  --color-primary:#6b91d4;--color-primary-hover:#8aaade;
  --color-primary-active:#4A72C4;--color-primary-highlight:#1e2a40;
  --color-node-blue:#6b91d4;--color-node-green:#8fca66;
  --color-node-red:#d96060;--color-node-amber:#f0bc30;--color-node-purple:#9b5fc0;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.25);
  --shadow-md:0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.45);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
    --color-surface-offset:#1d1c1a;--color-surface-dynamic:#2d2c2a;
    --color-divider:#262523;--color-border:#393836;
    --color-text:#cdccca;--color-text-muted:#797876;
    --color-text-faint:#5a5957;--color-text-inverse:#2b2a28;
    --color-primary:#6b91d4;--color-primary-hover:#8aaade;
    --color-primary-active:#4A72C4;--color-primary-highlight:#1e2a40;
    --color-node-blue:#6b91d4;--color-node-green:#8fca66;
    --color-node-red:#d96060;--color-node-amber:#f0bc30;--color-node-purple:#9b5fc0;
  }
}

/* ── BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;scroll-behavior:smooth;
  hanging-punctuation:first last;scroll-padding-top:var(--space-10);}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);
  font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);}
img,picture,video,svg{display:block;max-width:100%;height:auto;}
ul[role="list"],ol[role="list"]{list-style:none;}
input,button,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{text-wrap:balance;line-height:1.15;font-family:var(--font-display);}
p,li{text-wrap:pretty;max-width:72ch;}
::selection{background:oklch(from var(--color-primary) l c h / 0.2);color:var(--color-text);}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;
    animation-iteration-count:1!important;transition-duration:0.01ms!important;}
}
button{cursor:pointer;background:none;border:none;}
a,button,[role="button"]{
  transition:color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    opacity var(--transition-interactive);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}

/* ── SCROLL REVEAL ── */
.fade-in{opacity:1;}
@supports(animation-timeline:scroll()){
  .fade-in{opacity:0;animation:reveal-fade linear both;
    animation-timeline:view();animation-range:entry 0% entry 80%;}
}
@keyframes reveal-fade{to{opacity:1;}}
.reveal-clip{opacity:1;}
@supports(animation-timeline:scroll()){
  .reveal-clip{clip-path:inset(8% 0 0 0);opacity:0;
    animation:reveal-full linear both;animation-timeline:view();
    animation-range:entry 0% entry 70%;}
}
@keyframes reveal-full{to{clip-path:inset(0 0 0 0);opacity:1;}}

/* ── LAYOUT ── */
.container{max-width:var(--content-wide);margin-inline:auto;
  padding-inline:clamp(var(--space-4),4vw,var(--space-8));}
.container--default{max-width:var(--content-default);margin-inline:auto;
  padding-inline:clamp(var(--space-4),4vw,var(--space-8));}
.container--wide{max-width:var(--content-wide);margin-inline:auto;
  padding-inline:clamp(var(--space-4),4vw,var(--space-8));}

/* ── SKIP LINK ── */
.skip-link{position:absolute;top:var(--space-2);left:var(--space-2);
  background:var(--color-primary);color:var(--color-text-inverse);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:600;z-index:9999;
  transform:translateY(-200%);transition:transform var(--transition-interactive);}
.skip-link:focus{transform:translateY(0);}

/* ── NAV ── */
.site-nav{position:sticky;top:0;z-index:100;
  background:oklch(from var(--color-bg) l c h / 0.92);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive);}
.site-nav.scrolled{border-color:var(--color-divider);box-shadow:var(--shadow-sm);}
.nav-inner{display:flex;align-items:center;gap:var(--space-6);
  padding-block:var(--space-3);max-width:var(--content-wide);margin-inline:auto;
  padding-inline:clamp(var(--space-4),4vw,var(--space-8));}
.nav-logo{display:flex;align-items:center;gap:var(--space-3);
  text-decoration:none;color:var(--color-text);flex-shrink:0;}
.nav-logo img{width:180px;height:180px;object-fit:contain;flex-shrink:0;
  transition:filter var(--transition-interactive);}

/* Dark mode logo fix: invert blacks to white, restore colours with hue-rotate */
[data-theme="dark"] .nav-logo img,
@media(prefers-color-scheme:dark){ :root:not([data-theme]) .nav-logo img { filter:invert(1) hue-rotate(180deg); } }
[data-theme="dark"] .nav-logo img { filter:invert(1) hue-rotate(180deg); }

.nav-wordmark{font-family:var(--font-display);font-size:var(--text-base);
  font-weight:500;letter-spacing:-0.01em;line-height:1;}
.nav-links{display:flex;align-items:center;gap:var(--space-6);
  list-style:none;margin-inline-start:auto;}
.nav-links a{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);
  text-decoration:none;letter-spacing:0.01em;padding-block:var(--space-1);
  border-bottom:2px solid transparent;
  transition:color var(--transition-interactive),border-color var(--transition-interactive);}
.nav-links a:hover{color:var(--color-text);}
.nav-links a.active{color:var(--color-text);border-bottom-color:var(--color-primary);}
.nav-right{display:flex;align-items:center;gap:var(--space-3);margin-inline-start:auto;}

.theme-toggle{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-full);
  color:var(--color-text-muted);cursor:pointer;
  transition:color var(--transition-interactive),background var(--transition-interactive);}
.theme-toggle:hover{color:var(--color-text);background:var(--color-surface-offset);}

.btn{display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer;
  transition:background var(--transition-interactive),color var(--transition-interactive),
    box-shadow var(--transition-interactive),transform var(--transition-interactive);}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse);border:none;}
.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-sm);}
.btn-ghost{background:transparent;color:var(--color-text);
  border:1px solid oklch(from var(--color-text) l c h / 0.15);}
.btn-ghost:hover{background:var(--color-surface-offset);transform:translateY(-1px);}
.btn-ghost:active{transform:translateY(0);}

.nav-mobile-toggle{display:none;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-md);color:var(--color-text);
  margin-inline-start:auto;transition:background var(--transition-interactive);}
.nav-mobile-toggle:hover{background:var(--color-surface-offset);}
.nav-mobile-menu{display:none;flex-direction:column;gap:0;
  background:var(--color-surface);border-bottom:1px solid var(--color-divider);
  padding:var(--space-2) 0 var(--space-4);}
.nav-mobile-menu.open{display:flex;}
.nav-mobile-menu a{padding:var(--space-3) clamp(var(--space-4),4vw,var(--space-12));
  font-size:var(--text-base);font-weight:500;color:var(--color-text-muted);text-decoration:none;
  transition:color var(--transition-interactive),background var(--transition-interactive);}
.nav-mobile-menu a:hover{color:var(--color-text);background:var(--color-surface-offset);}
.nav-mobile-menu .btn-primary{margin:var(--space-3) clamp(var(--space-4),4vw,var(--space-12)) 0;width:fit-content;}
@media(max-width:768px){
  .nav-links,.nav-right .btn-primary{display:none;}
  .nav-mobile-toggle{display:flex;}
}
@media(min-width:769px){
  .nav-mobile-toggle{display:none;}
  .nav-mobile-menu{display:none!important;}
}

/* ── HERO ── */
.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(var(--space-20),10vw,var(--space-32));position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 72% 50%,
    oklch(from var(--color-primary) l c h / 0.06) 0%,transparent 70%);
  pointer-events:none;}
.hero-decoration{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:min(440px,42vw);height:min(440px,42vw);opacity:0.055;pointer-events:none;}
[data-theme="dark"] .hero-decoration{opacity:0.08;}
.hero-content{position:relative;z-index:1;max-width:700px;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);
  font-size:var(--text-xs);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--color-primary);margin-bottom:var(--space-6);}
.hero-eyebrow-dot{width:6px;height:6px;background:var(--color-primary);border-radius:50%;}
.hero h1{font-size:var(--text-2xl);font-weight:500;color:var(--color-text);
  letter-spacing:-0.02em;margin-bottom:var(--space-6);line-height:1.1;}
.hero h1 em{font-style:italic;color:var(--color-primary);}
.hero-subhead{font-family:var(--font-body);font-size:var(--text-lg);
  color:var(--color-text-muted);font-weight:400;line-height:1.6;
  margin-bottom:var(--space-10);max-width:56ch;}
.hero-actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;}

/* ── SECTION NAV ── */
.section-nav{
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
  background: var(--color-bg);
}
.section-nav-list{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.section-nav-link{
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-6);
  background: var(--color-surface);
  text-decoration: none;
  transition: background var(--transition-interactive);
}
.section-nav-link:hover{
  background: var(--color-surface-offset);
}
.section-nav-link:hover .section-nav-title{
  color: var(--color-primary);
}
.section-nav-label{
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.section-nav-title{
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  transition: color var(--transition-interactive);
  max-width: unset;
}
@media(max-width:900px){
  .section-nav-list{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width:500px){
  .section-nav-list{
    grid-template-columns: 1fr;
  }
}

/* ── SHARED SECTION ── */
section{padding-block:clamp(var(--space-16),8vw,var(--space-32));}
.section-label{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4);}
.section-title{font-family:var(--font-display);font-size:var(--text-2xl);
  font-weight:500;letter-spacing:-0.02em;line-height:1.15;color:var(--color-text);margin-bottom:var(--space-6);}
.section-body{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.7;max-width:62ch;}
hr.divider{border:none;border-top:1px solid var(--color-divider);margin:0;}

/* ── INTEGRATION SECTION ── */
.integration-section{background:var(--color-surface);}
.integration-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(var(--space-8),5vw,var(--space-20));align-items:start;}
.integration-prose p{font-size:var(--text-base);color:var(--color-text-muted);
  line-height:1.75;margin-bottom:var(--space-5);}
.integration-prose p:last-child{margin-bottom:0;}
.integration-pull{position:sticky;top:calc(var(--space-16) + var(--space-4));
  padding:var(--space-8) var(--space-8) var(--space-8) var(--space-10);
  border-left:3px solid var(--color-primary);
  background:var(--color-surface-2);border-radius:0 var(--radius-lg) var(--radius-lg) 0;}
.integration-pull blockquote{font-family:var(--font-display);font-size:var(--text-xl);
  font-weight:400;font-style:italic;line-height:1.4;color:var(--color-text);margin-bottom:var(--space-4);}
.integration-pull cite{font-family:var(--font-body);font-size:var(--text-xs);
  font-style:normal;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-text-faint);}
@media(max-width:768px){
  .integration-grid{grid-template-columns:1fr;}
  .integration-pull{position:static;}
}

/* ── SERVICES ── */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-12);}
.service-card{background:var(--color-surface);
  border:1px solid oklch(from var(--color-text) l c h / 0.08);
  border-radius:var(--radius-xl);padding:var(--space-8);
  border-top:3px solid var(--color-node-blue);
  transition:box-shadow var(--transition-interactive),transform var(--transition-interactive);}
.service-card:nth-child(1){border-top-color:var(--color-node-blue);}
.service-card:nth-child(2){border-top-color:var(--color-node-green);}
.service-card:nth-child(3){border-top-color:var(--color-node-amber);}
.service-card-number{font-family:var(--font-display);font-size:var(--text-xs);
  font-weight:400;color:var(--color-text-faint);letter-spacing:0.06em;
  text-transform:uppercase;margin-bottom:var(--space-4);}
.service-card h3{font-family:var(--font-display);font-size:var(--text-xl);
  font-weight:500;color:var(--color-text);letter-spacing:-0.01em;margin-bottom:var(--space-4);}
.service-card p{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.7;}
.service-visual{border-radius:var(--radius-lg);overflow:hidden;
  background:var(--color-surface-offset);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;}
.service-visual svg{opacity:1;width:58%;height:58%;}
@media(max-width:768px){
  .services-grid{grid-template-columns:1fr;}
}

/* ── PATHWAYS ── */
.pathways-section{background:var(--color-surface);}
.pathways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-12);}
.pathway-item{padding:var(--space-6) var(--space-6) var(--space-8);
  border-top:2px solid var(--color-divider);
  transition:border-color var(--transition-interactive);}
.pathway-item:nth-child(1):hover{border-color:var(--color-node-purple);}
.pathway-item:nth-child(2):hover{border-color:var(--color-node-red);}
.pathway-item:nth-child(3):hover{border-color:var(--color-node-blue);}
.pathway-num{font-family:var(--font-display);font-size:var(--text-3xl);
  font-weight:500;line-height:1;margin-bottom:var(--space-4);
  -webkit-text-stroke:1px var(--color-border);color:transparent;}
.pathway-item h3{font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:500;margin-bottom:var(--space-3);color:var(--color-text);}
.pathway-item p{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.65;}
@media(max-width:768px){.pathways-grid{grid-template-columns:1fr;}}

/* ── CONTACT CTA ── */
.contact-section{background:var(--color-bg);}
.contact-inner{
  border:1px solid oklch(from var(--color-text) l c h / 0.08);
  border-radius:var(--radius-xl);
  padding:clamp(var(--space-10),5vw,var(--space-16));
  background:var(--color-surface);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-8);flex-wrap:wrap;
}
.contact-inner h2{font-family:var(--font-display);font-size:var(--text-xl);
  font-weight:500;letter-spacing:-0.01em;margin-bottom:var(--space-3);}
.contact-inner p{font-size:var(--text-base);color:var(--color-text-muted);
  line-height:1.65;max-width:46ch;}
.contact-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;flex-shrink:0;}

/* ── FOOTER ── */
.site-footer{background:var(--color-surface);
  border-top:1px solid var(--color-divider);
  padding-block:clamp(var(--space-12),5vw,var(--space-16));}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(var(--space-8),4vw,var(--space-16));}
.footer-brand .nav-wordmark{font-size:var(--text-lg);margin-bottom:var(--space-3);display:block;}
.footer-tagline{font-size:var(--text-sm);color:var(--color-text-muted);
  line-height:1.6;max-width:30ch;margin-bottom:var(--space-6);}
.footer-email a{display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:600;color:var(--color-primary);text-decoration:none;}
.footer-email a:hover{color:var(--color-primary-hover);}
.footer-col-title{font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--color-text-faint);margin-bottom:var(--space-4);}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);}
.footer-links a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;}
.footer-links a:hover{color:var(--color-text);}
.footer-bottom{margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:1px solid var(--color-divider);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);}
.footer-bottom p{font-size:var(--text-xs);color:var(--color-text-faint);}

/* Node colour dots in footer */
.footer-nodes{display:inline-flex;gap:6px;align-items:center;margin-top:0;}
.footer-node{width:8px;height:8px;border-radius:50%;}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:var(--space-8);}}

/* ── SERVICE CARD LINK ── */
.service-card-link{display:inline-flex;align-items:center;gap:var(--space-2);
  margin-top:var(--space-6);font-size:var(--text-sm);font-weight:600;
  color:var(--color-primary);text-decoration:none;
  transition:gap var(--transition-interactive),color var(--transition-interactive);}
.service-card-link:hover{color:var(--color-primary-hover);gap:var(--space-3);}

/* ── NAV MOBILE FIX ── */
@media(max-width:768px){
  .nav-logo img{width:clamp(56px,15vw,72px);height:clamp(56px,15vw,72px);}
  .nav-mobile-toggle{margin-inline-start:auto;flex-shrink:0;}
}