/* Kaladian Technologies — public site
   Brand: Visual Identity Guidelines v1.0 (Sep 2026).

   Two rules from the guidelines drive most of the choices below:

   1. "Kaladian Cyan is the only accent colour anywhere in the system."
      There is no second accent. Light surfaces use Steel for emphasis.
   2. "Cyan on white reads at only 1.7:1 ... the chevron alone should never
      carry meaning that needs to be read, only recognised."
      Measured: 1.77:1. So cyan appears ONLY on Steel or Deep Navy, never on
      Paper or white. Every cyan use in this file is on a dark ground.

   Contrast ratios in comments are measured, not estimated. */

  /* Inter — one variable file per subset, wght 100-900. Upstream is
     Inter[opsz,wght]; opsz is pinned at its default (14) in the shipped file,
     so this is the standard text-optimised Inter. Verified pixel-identical to
     Google's build at 400/500/700/800/900. Filenames carry a content hash
     because firebase.json caches woff2 for a year as immutable. */
  @font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('/fonts/inter-var-latin.edfe364f.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:'Inter';
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('/fonts/inter-var-latin-ext.e08937bf.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;
  }

  /* Roboto Mono - technical use only, 12-14px, 400/500 per the guidelines. */
  @font-face{
    font-family:'Roboto Mono';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('/fonts/roboto-mono-400-latin.3ee027bb.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:'Roboto Mono';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('/fonts/roboto-mono-400-latin-ext.967f4792.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:'Roboto Mono';
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url('/fonts/roboto-mono-500-latin.7818559a.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:'Roboto Mono';
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url('/fonts/roboto-mono-500-latin-ext.39d9a57d.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;
  }

  :root{
    /* UI palette (tokens/colors.css) */
    --steel:#33414f;
    --mist:#8fa3b5;
    --paper:#f2f3f4;

    /* brand accent — the only one */
    --cyan:#00d4ff;

    /* neutrals */
    --off-white:#f8f9fa;
    --light-gray:#e8eaed;
    --dark-gray:#5f6368;
    --near-black:#202124;
    --deep-navy:#0f1b2d;

    /* semantic */
    --success:#1e8e3e;
    --error:#d32f2f;

    /* derived. The design set body copy on Steel as Mist, which measures
       4.02:1 — below AA for 18px text. Lightened to clear AA while keeping
       the cool cast. Mist is retained for decorative use only. */
    --on-steel:#c3cdd6;        /* 6.48:1 on --steel */
    --error-on-steel:#ff9e8a;  /* 5.23:1 on --steel; --error is 3.0:1 there */

    --field-bg:#3d4c5c;
    --field-line:#4a5a6a;
    --rule:#d8dadd;
    --focus:#00d4ff;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--steel);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img,svg{display:block;max-width:100%;}
  a{color:inherit;}

  .wrap{max-width:1600px;margin:0 auto;}
  .pad{padding-left:clamp(20px,5vw,64px);padding-right:clamp(20px,5vw,64px);}

  /* Display sizes take negative tracking; small sizes take none. */
  h1,h2,h3,h4{margin:0;font-weight:800;text-wrap:pretty;}
  h1{font-size:clamp(34px,6vw,56px);line-height:1.05;letter-spacing:-0.02em;font-weight:900;}
  h2{font-size:clamp(28px,4.5vw,38px);line-height:1.12;letter-spacing:-0.01em;}
  h3{font-size:21px;line-height:1.25;}
  h4{font-size:17px;line-height:1.3;font-weight:700;}

  .mono{font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;}

  /* Section kicker. On light grounds this is Steel (9.41:1) — cyan would be
     1.9:1 here and is forbidden for anything that must be read. */
  .kicker{
    font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13px;
    font-weight:500;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--steel);
    margin:0 0 16px;
  }
  .kicker-on-dark{color:var(--cyan);}   /* 5.90:1 on --steel */

  .lede{font-size:17px;line-height:1.6;color:var(--dark-gray);max-width:66ch;margin:0;}

  button,input,textarea{font-family:inherit;}

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

  .skip-link{
    position:absolute;
    top:-48px;
    left:12px;
    z-index:100;
    background:var(--cyan);
    color:var(--near-black);
    font-family:'Roboto Mono',ui-monospace,monospace;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    padding:14px 18px;
    transition:top .15s ease;
  }
  .skip-link:focus{top:12px;}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:15px;
    padding:14px 28px;
    min-height:44px;
    border:1px solid transparent;
    text-decoration:none;
    cursor:pointer;
    transition:background-color .15s ease,border-color .15s ease,color .15s ease;
  }
  /* Primary on dark grounds: the brand-level moment the guidelines reserve
     cyan for. Near Black label on cyan measures 9.09:1. */
  .btn-cyan{background:var(--cyan);color:var(--near-black);}
  .btn-cyan:hover{background:#3ddfff;}
  /* Primary on light grounds. Cyan is unusable here, so Steel carries it. */
  .btn-steel{background:var(--steel);color:var(--paper);}
  .btn-steel:hover{background:#3d4c5c;}
  .btn-ghost{border-color:var(--mist);color:var(--paper);}
  .btn-ghost:hover{border-color:var(--paper);background:rgba(255,255,255,0.06);}

  /* ---------- nav ---------- */
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding-top:20px;
    padding-bottom:20px;
    background:var(--steel);
  }
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:9px 0;}
  .brand svg{height:26px;width:auto;flex:none;}
  .brand-word{font-weight:900;font-size:20px;color:var(--paper);letter-spacing:0.02em;}
  .nav-links{
    display:flex;
    align-items:center;
    gap:clamp(16px,3vw,40px);
    flex-wrap:wrap;
    font-family:'Roboto Mono',ui-monospace,monospace;
    font-size:13px;
    /* 500 matches the guidelines' "Label 13 / 500 · UI labels", and keeps the
       above-the-fold mono to a single weight so only one file is preloaded. */
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  /* Design specified Mist here (4.02:1). Lightened for AA. */
  /* Vertical padding is load-bearing, not cosmetic: without it these links
     are 17px tall, below WCAG 2.2 SC 2.5.8's 24px minimum and far below a
     comfortable touch target. */
  .nav-links a{color:var(--on-steel);text-decoration:none;padding:14px 2px;transition:color .15s ease;}
  .nav-links a:hover{color:var(--paper);}
  .nav-links a.nav-cta{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    background:var(--cyan);
    color:var(--near-black);
    padding:10px 20px;
    font-weight:600;
  }
  .nav-links a.nav-cta:hover{background:#3ddfff;color:var(--near-black);}

  /* ---------- hero ---------- */
  .hero{
    background:var(--steel);
    padding-top:clamp(60px,10vw,100px);
    padding-bottom:clamp(80px,12vw,140px);
  }
  .hero-inner{max-width:780px;}
  .hero h1{color:var(--paper);margin:0 0 24px;}
  /* Scoped to a class, NOT `.hero p`. An element-descendant selector here
     (0,1,1) outranks `.kicker-on-dark` (0,1,0) and silently repaints the
     hero kicker, which is exactly the bug KWP-15 records on the old site. */
  .hero-lede{font-size:18px;line-height:1.6;color:var(--on-steel);max-width:480px;margin:0 0 36px;}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

  /* ---------- sections ---------- */
  .section{padding-top:clamp(60px,10vw,100px);padding-bottom:clamp(60px,10vw,100px);}
  .section-white{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
  .section h2{margin:0 0 60px;max-width:640px;}

  /* capabilities */
  .cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1px;
    background:var(--rule);
    border:1px solid var(--rule);
  }
  .card{background:#fff;padding:48px 36px;}
  /* The design distinguished the three by colour. Cyan cannot appear on white,
     so the ramp is Near Black / Steel / Mist — three on-palette tones. */
  .card-bar{width:40px;height:8px;margin-bottom:28px;}
  .bar-1{background:var(--near-black);}
  .bar-2{background:var(--steel);}
  .bar-3{background:var(--mist);}
  .card h3{margin:0 0 14px;}
  .card p{font-size:15px;line-height:1.65;color:var(--dark-gray);margin:0;}

  /* steps + founders share a grid */
  .grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;}
  .step-num{
    font-family:'Roboto Mono',ui-monospace,monospace;
    font-size:13px;
    color:var(--steel);
    margin-bottom:12px;
  }
  .step h4{margin:0 0 10px;}
  .step p,.founder p{font-size:14px;line-height:1.6;color:var(--dark-gray);margin:0;}

  .founder-photo{
    background:repeating-linear-gradient(135deg,#e8eaec,#e8eaec 10px,#dde0e3 10px,#dde0e3 20px);
    width:100%;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
  }
  .founder-photo span{
    font-family:'Roboto Mono',ui-monospace,monospace;
    color:var(--dark-gray);
    font-size:12px;
  }
  .founder h4{margin:0 0 4px;}
  .founder-role{
    font-family:'Roboto Mono',ui-monospace,monospace;
    font-size:12px;
    color:var(--steel);
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-bottom:12px;
  }

  /* ---------- contact ---------- */
  .contact{
    background:var(--steel);
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:60px;
  }
  .contact h2{color:var(--paper);margin:0 0 20px;}
  .contact-copy p{font-size:16px;line-height:1.6;color:var(--on-steel);max-width:420px;margin:0;}
  .contact-direct{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    margin-top:20px;
    font-family:'Roboto Mono',ui-monospace,monospace;
    font-size:13.5px;
    color:var(--cyan);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .contact-direct:hover{border-color:var(--cyan);}

  form{display:flex;flex-direction:column;gap:16px;}
  .field{display:flex;flex-direction:column;gap:6px;}
  .field label{
    font-family:'Roboto Mono',ui-monospace,monospace;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--on-steel);
  }
  .field input,.field textarea{
    background:var(--field-bg);
    border:1px solid var(--field-line);
    color:var(--paper);
    padding:14px 16px;
    font-family:'Roboto Mono',ui-monospace,monospace;
    font-size:14px;
    min-height:44px;
    resize:vertical;
  }
  .field textarea{min-height:96px;}
  .field input::placeholder,.field textarea::placeholder{color:#93a3b3;}
  .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error-on-steel);}
  .form-note{margin:0;font-size:13px;color:var(--on-steel);min-height:18px;}
  .form-note.success{color:#9adf9f;}
  .form-note.error{color:var(--error-on-steel);}
  .form-note a{color:inherit;text-decoration:underline;}
  .form-submit{align-self:flex-start;}

  /* ---------- 404 ---------- */
  .error-code{
    font-family:'Roboto Mono',ui-monospace,monospace;
    font-size:13px;
    font-weight:500;
    letter-spacing:0.1em;
    color:var(--on-steel);
    margin:22px 0 0;
  }

  /* ---------- footer ---------- */
  .footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    padding-top:32px;
    padding-bottom:32px;
    font-family:'Roboto Mono',ui-monospace,monospace;
    font-size:13px;
    color:var(--dark-gray);
  }
  .footer-links{display:flex;gap:32px;list-style:none;margin:0;padding:0;}
  .footer-links a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
  .footer-links a:hover{color:var(--near-black);}

  @media (max-width:600px){
    .hero-actions .btn{width:100%;}
    /* The comp's nav wraps rather than collapsing behind a toggle. That works
       until the brand lockup and the links compete for one row: below ~600px
       the links get squeezed to roughly a link's width each and stack one per
       row, making the nav ~205px tall on a 320px screen. Giving the links
       their own full-width row drops that to two rows. */
    .nav{flex-direction:column;align-items:flex-start;gap:4px;}
    .nav-links{width:100%;gap:0 22px;}
  }

  /* ---------- holding page (temporary homepage) ----------
     Deep Navy end to end so the cyan accent never lands on a light ground.
     Everything here is additive: the full homepage in apps/www/draft/ still
     works against the rules above when it returns. */
  .holding-body{background:var(--deep-navy);color:var(--on-steel);}
  .holding{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
  .holding .nav{background:transparent;border-bottom:0;}
  .holding-tag{margin:0;letter-spacing:0.12em;font-size:12px;color:var(--on-steel);}
  .holding-main{
    flex-grow:1;
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    gap:clamp(32px,5vw,72px);
    align-items:center;
    padding-top:clamp(40px,8vw,96px);
    padding-bottom:clamp(40px,8vw,96px);
  }
  .holding-copy{max-width:560px;}
  .holding-copy h1{color:var(--paper);margin:0 0 24px;font-size:clamp(38px,6.5vw,64px);}
  .holding-status{
    display:flex;align-items:center;gap:12px;margin:0 0 28px;
    font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--cyan);            /* 9.76:1 on Deep Navy */
  }
  .holding-dot{width:10px;height:10px;border-radius:50%;background:var(--cyan);flex:none;}
  .holding-email{font-size:13px;color:var(--on-steel);align-self:center;}
  .build-log{
    margin:0;
    background:var(--steel);
    border-radius:10px;
    padding:22px 26px;
    font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13.5px;line-height:1.85;
    color:var(--on-steel);
    white-space:pre;
    overflow-x:auto;
  }
  .log-ok{color:var(--cyan);}       /* 5.90:1 on Steel */
  .log-wait{color:var(--on-steel);}
  .log-bright{color:var(--paper);}
  .holding-footer{color:var(--on-steel);border-top:1px solid rgba(255,255,255,0.08);}
  @media (max-width:860px){
    .holding-main{grid-template-columns:1fr;align-items:start;}
    .build-log{font-size:12px;}
  }