/* ============================================================
   EnlightenedBits design system
   Ported from the Claude Design canvas export (LandingPage.dc.html).
   Colour is drawn from kuvat/landing-page-picture.webp: near-black
   headlands, desaturated tide blues, grey-green water shadow,
   washed sky. Nothing here is saturated. If a colour feels
   bright, it is wrong.
   ============================================================ */

/* ---------- Fonts (self-hosted; nothing is fetched from Google) ---------- */
@font-face{font-family:'Gajraj One';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/gajraj-one.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/work-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/work-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Colour ---------- */
:root{
  /* Ink — headland dark. Near-black, faintly blue. */
  --ink-950:#0D1418;--ink-900:#141E23;--ink-800:#1E2C33;--ink-700:#2B3C44;
  /* Tide — the water. Core brand ramp and action colour. */
  --tide-900:#33474F;--tide-800:#3E5763;--tide-700:#4A6470;--tide-600:#5B7887;
  --tide-500:#6E8C9B;--tide-400:#8AA4B0;--tide-300:#A8BDC5;--tide-200:#C6D3D8;
  --tide-100:#DEE6E8;--tide-50:#EFF3F4;
  /* Sage — grey-green water shadow. Quiet secondary. */
  --sage-700:#3E5A57;--sage-500:#5F817C;--sage-300:#9BB3AE;--sage-100:#DCE5E2;
  /* Haze — sky and paper neutrals, cooled and slightly green. */
  --haze-0:#FFFFFF;--haze-25:#FAFBFA;--haze-50:#F4F5F4;--haze-100:#EBEDEC;
  --haze-200:#DEE1E1;--haze-300:#C4CACA;--haze-400:#9AA3A4;--haze-500:#737D7F;
  --haze-600:#545E60;--haze-700:#3C4547;--haze-800:#262D2F;--haze-900:#161B1C;
  /* Semantic hues — muted to sit inside the photograph, not on top of it. */
  --moss-100:#DCE7DF;--moss-500:#4C7A5E;--moss-700:#31543F;
  --ochre-100:#F0E6D5;--ochre-500:#A8792F;--ochre-700:#6E501F;
  --brick-100:#EFDCD8;--brick-500:#A4463C;--brick-700:#77332C;

  --text-strong:var(--ink-950);
  --text-body:var(--haze-700);
  --text-muted:var(--haze-500);
  --text-subtle:var(--haze-400);
  --text-inverse:var(--haze-0);
  --text-link:var(--tide-700);
  --text-link-hover:var(--ink-950);

  --surface-page:#FAF9F7;      /* paper */
  --surface-card:var(--haze-0);
  --surface-sunken:var(--haze-50);
  --surface-inverse:var(--ink-950);
  --surface-hover:var(--haze-50);

  --border-subtle:var(--haze-200);
  --border-default:var(--haze-300);
  --border-strong:var(--haze-400);
  --border-inverse:rgb(255 255 255 / .14);

  --action-primary:var(--ink-950);
  --focus-ring:var(--tide-600);

  --status-success:var(--moss-500);--status-success-soft:var(--moss-100);
  --status-warning:var(--ochre-500);--status-warning-soft:var(--ochre-100);
  --status-danger:var(--brick-500);--status-danger-soft:var(--brick-100);

  --scrim-photo:linear-gradient(180deg,rgb(13 20 24 / 0) 0%,rgb(13 20 24 / .5) 100%);
  --wash-deep:linear-gradient(176deg,#1E2C33 0%,#141E23 58%,#0D1418 100%);
}

/* ---------- Type ---------- */
:root{
  --font-display:'Gajraj One','Work Sans',system-ui,sans-serif;
  --font-core:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --text-body-lg:1.0625rem;--text-body-md:.9375rem;--text-body-sm:.8125rem;
  /* Hero type. Tune these two to resize every page's opening statement
     and its lede together — nothing else reads them. */
  --hero-size:clamp(24px,2.2vw,30px);
  --hero-lede:.9375rem;
  --text-caption:.75rem;--text-micro:.6875rem;

  --leading-relaxed:1.65;
  --tracking-tight:-.015em;--tracking-eyebrow:.14em;

  --type-body:400 var(--text-body-md)/var(--leading-relaxed) var(--font-core);
  --type-eyebrow:500 var(--text-micro)/1 var(--font-mono);
}

/* ---------- Space & shape ---------- */
:root{
  --page-max:1200px;
  --grid-cols:4;
  --grid-pad:22px;
  --grid-rule:1px solid var(--border-subtle);
  --section-y:56px;
  --ease-calm:cubic-bezier(.22,.61,.36,1);
  --dur-fast:160ms;
  --texture-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --grain-opacity:.10;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-strong);font-family:var(--font-core);
  font-weight:600;letter-spacing:var(--tracking-tight);line-height:1.2;text-wrap:balance}
p{margin:0 0 16px;text-wrap:pretty}
ul,ol{margin:0;padding:0}
img{max-width:100%;height:auto}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-calm)}
a:hover{color:var(--text-link-hover)}
code,kbd,pre,samp{font-family:var(--font-mono);font-size:.9em}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--tide-200);color:var(--ink-950)}
.eb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.eb-skip{position:absolute;left:-9999px;top:0;z-index:900;background:var(--ink-950);
  color:#fff;padding:10px 16px;font-size:var(--text-body-sm);text-decoration:none}
.eb-skip:focus{left:8px;top:8px;color:#fff}

/* ---------- The editorial grid ----------
   Four columns, hairline gutters, everything hangs off column starts.
   Type is placed in cells, not centred; columns 1–2 are usually empty
   and that emptiness is intentional. */
.eb-grid{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);width:100%;
  max-width:var(--page-max);margin:0 auto}
.eb-cell{padding:var(--grid-pad);min-width:0}
.eb-span-2{grid-column:span 2}
.eb-span-3{grid-column:span 3}
.eb-span-4{grid-column:span 4}
.eb-rule-r{border-right:var(--grid-rule)}
.eb-rule-b{border-bottom:var(--grid-rule)}
.eb-rule-t{border-top:var(--grid-rule)}
section{border-top:var(--grid-rule)}
/* Anchor targets must clear the sticky header when jumped to. */
section[id]{scroll-margin-top:72px}

/* ---------- Helpers ---------- */
.eb-display{font-family:var(--font-display);font-weight:400;letter-spacing:-.012em;line-height:1.04}
.eb-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-muted)}
.eb-mono{font-family:var(--font-mono)}
.eb-muted{color:var(--text-muted)}
.eb-lead{font-size:var(--hero-lede);line-height:var(--leading-relaxed);max-width:58ch}
.eb-measure{max-width:42ch}
.eb-grain{position:relative}
.eb-grain::after{content:'';position:absolute;inset:0;background-image:var(--texture-grain);
  background-size:140px 140px;opacity:var(--grain-opacity);pointer-events:none;mix-blend-mode:overlay}

/* ---------- Header ---------- */
.eb-header{position:sticky;top:0;z-index:100;background:var(--surface-page);
  border-bottom:var(--grid-rule)}
.eb-header .eb-cell{display:flex;align-items:center}
.eb-wordmark{font-family:var(--font-display);font-weight:400;font-size:19px;line-height:1;
  color:var(--ink-950);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.eb-wordmark:hover{color:var(--ink-950)}
.eb-nav{gap:30px;font-size:var(--text-body-sm);flex-wrap:wrap}
.eb-nav a{color:var(--haze-700);text-decoration:none}
.eb-nav a:hover,.eb-nav a[aria-current="page"]{color:var(--ink-950);text-decoration:underline;text-underline-offset:3px}
.eb-header-action{justify-content:flex-end}

/* ---------- Links & actions ---------- */
.eb-action{font-size:var(--text-body-sm);font-weight:500;color:var(--ink-950);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.eb-action-quiet{font-size:var(--text-body-sm);font-weight:500;color:var(--text-muted);
  text-decoration:underline;text-underline-offset:3px}
.eb-actions{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px}

/* ---------- Photography in a grid cell ----------
   The photo cell spans both hero rows so the image top lines up with the
   eyebrow opposite it. --photo-max is the one knob for how big it sits. */
:root{--photo-max:360px}
.eb-photo-cell{padding-top:44px}
.eb-photo{display:block;width:100%;max-width:var(--photo-max);height:auto}

/* ---------- Statement / hero ---------- */
.eb-statement{margin:0;font-size:var(--hero-size);font-weight:600;
  letter-spacing:var(--tracking-tight);line-height:1.24;color:var(--ink-950);max-width:26ch}
.eb-caption{margin:0;font-size:var(--text-body-sm);line-height:var(--leading-relaxed);
  color:var(--text-muted);max-width:24ch}

/* ---------- Photo band ---------- */
.eb-band{position:relative;height:420px;border-top:var(--grid-rule);
  background-position:center top;background-size:cover;background-repeat:no-repeat}
.eb-band::before{content:'';position:absolute;inset:auto 0 0 0;height:120px;
  background:var(--scrim-photo)}
.eb-band .eb-grid{position:absolute;inset:auto 0 0 0}
.eb-band-label{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:#fff}
.eb-band-label-r{text-align:right}

/* ---------- Numbered feature cells ---------- */
.eb-item{display:flex;gap:18px}
.eb-num{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-eyebrow);
  color:var(--haze-400);padding-top:4px;flex:none}
.eb-item h3{margin:0 0 6px;font-size:18px;font-weight:600;color:var(--ink-950)}
.eb-item p{margin:0;font-size:var(--text-body-sm);line-height:var(--leading-relaxed);
  color:var(--text-muted);max-width:42ch}
.eb-item p:last-child{margin-bottom:0}
/* Generated bios may run to several paragraphs; keep them apart. */
.eb-item .eb-bio{margin:0 0 12px}
.eb-item .eb-bio:last-of-type{margin-bottom:14px}

/* ---------- Section heads ---------- */
.eb-h2{margin:0;font-size:var(--hero-size);font-weight:600;letter-spacing:var(--tracking-tight);color:var(--ink-950)}
.eb-h2-lg{margin:0;font-size:var(--hero-size);font-weight:600;
  letter-spacing:var(--tracking-tight);line-height:1.26;color:var(--ink-950);max-width:30ch}
.eb-pt{padding-top:var(--section-y)}
.eb-pb{padding-bottom:var(--section-y)}

/* ---------- Prose blocks ---------- */
.eb-prose p{font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:60ch}
.eb-prose p:last-child{margin-bottom:0}
.eb-prose strong,.eb-item strong{color:var(--ink-950);font-weight:600}

/* ---------- Contact list ---------- */
.eb-contacts{display:flex;flex-direction:column;gap:18px}
.eb-contact p{margin:0 0 4px;font-size:var(--text-body-sm);line-height:var(--leading-relaxed)}
.eb-contact p:last-child{margin-bottom:0}
.eb-contact-name{color:var(--ink-950);font-weight:600}

/* ---------- Definition rows (FAQ) ---------- */
.eb-faq{border-top:var(--grid-rule)}
.eb-faq dt{font-size:16px;font-weight:600;color:var(--ink-950);margin:0 0 6px}
.eb-faq dd{margin:0;font-size:var(--text-body-sm);line-height:var(--leading-relaxed);
  color:var(--text-muted);max-width:52ch}

/* ---------- Table ---------- */
.eb-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.eb-table{width:100%;border-collapse:collapse;font-size:var(--text-body-sm);min-width:420px}
.eb-table th,.eb-table td{text-align:left;padding:12px 16px 12px 0;border-bottom:var(--grid-rule);
  vertical-align:baseline}
.eb-table th{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-muted);font-weight:500}
.eb-table td{color:var(--text-body)}
.eb-table td:first-child{color:var(--ink-950);font-weight:500}

/* ---------- Footer ---------- */
.eb-footer{border-top:var(--grid-rule);background:var(--surface-page)}
.eb-footer .eb-cell{font-size:var(--text-caption);color:var(--text-muted);text-align:center}
.eb-footer a{color:var(--text-muted)}
.eb-footer a:hover{color:var(--ink-950)}

/* ---------- Language switch ---------- */
.eb-lang{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.eb-lang a{color:var(--text-muted);text-decoration:none}
.eb-lang a:hover{color:var(--ink-950)}
.eb-lang [aria-current]{color:var(--ink-950)}
.eb-lang span{color:var(--border-default);margin:0 6px}

/* ---------- Responsive ----------
   The four-column grid collapses to two, then one. The deliberately
   empty leading columns are dropped rather than preserved as blank
   space once there is no room for them. */
@media (max-width:900px){
  :root{--grid-cols:2;--grid-pad:18px;--section-y:40px}
  .eb-span-3,.eb-span-4{grid-column:span 2}
  .eb-spacer{display:none}
  .eb-band{height:320px}
  /* Desktop-only furniture: the hanging caption and the left band label are
     column-1 grace notes. Once the grid collapses they are just extra rows. */
  .eb-caption-cell{display:none}
  .eb-band-label:not(.eb-band-label-r){display:none}
  /* A full-width cell's right rule separates nothing — make it a bottom rule
     so stacked cells stay divided. */
  .eb-span-2.eb-rule-r{border-right:0;border-bottom:var(--grid-rule)}
  /* Header: wordmark and language switch share the top row, nav sits under
     them. Without this each header cell claims a row of its own. */
  .eb-header .eb-grid{grid-template-columns:1fr auto}
  .eb-header .eb-cell{padding-top:14px;padding-bottom:14px}
  .eb-header .eb-cell:first-child{order:1}
  .eb-header-action{order:2;justify-content:flex-end}
  .eb-header .eb-nav{order:3;grid-column:1 / -1;padding-top:0}
}
@media (max-width:600px){
  :root{--grid-cols:1;--grid-pad:16px}
  .eb-span-2,.eb-span-3,.eb-span-4{grid-column:span 1}
  .eb-rule-r{border-right:0;border-bottom:var(--grid-rule)}
  .eb-band{height:260px}
  .eb-band-label-r{text-align:left}
  .eb-nav{gap:18px}
}