:root{
    --navy:#17384d;
    /* Fixed brand navy for solid fills (buttons, the "coming soon" gradient)
       — never flips in dark mode. --navy itself flips for text-contrast
       purposes (light ink on a dark page); anything using it as an opaque
       fill with white text/content needs to stay navy in both themes. */
    --brand-navy:#17384d;
    --ink:#26363f;
    /* #2b8fc2 (this site's original blue) only manages 3.4-3.6:1 against
       white/paper as text and as the white-on-fill CTA button — fails AA's
       4.5:1 either way. Dark mode's --blue got its own AA fix for this
       already (see below); light mode's own --blue, and --brand-blue (used
       for the solid CTA fill, which never flips with the theme), had not
       been. #1e6f9e clears 5.2-5.5:1 in both roles and is the same blue
       already used as the canonical brand color elsewhere (icitywork.io's
       admin console, the sibling marketing site). */
    --blue:#1e6f9e;
    /* Fixed brand blue for solid fills (the nav's "Book a demo" pill) —
       same reasoning as --brand-navy: --blue flips for text-contrast in
       dark mode, but a solid button with white text needs to stay put. */
    --brand-blue:#1e6f9e;
    --blue-light:#5fc0e8;
    --gold:#f3ae00;
    --coral:#e17055;
    --paper:#f5fafc;
    --card:#ffffff;
    --line:#dbe9f2;
    --line-strong:#b9d7e8;
    --navy-tint:#e9f3f9;
    /* #c0392b (err) is fine on the light surfaces (5.2-5.4:1) but was never
       checked against the dark surface it also gets used on unmodified
       (2.46:1 there — fails badly); #1e8a5f (ok) actually fails on BOTH
       (4.1-4.3:1 light, 3.1:1 dark), just narrowly enough in light mode to
       be easy to miss without computing it. Both get a real dark-mode
       pairing below instead of silently reusing the light-mode value. */
    --err:#c0392b;
    --ok:#187150;
    /* Text-safe variant of --gold: the raw accent (#f3ae00) is fine as a
       decorative fill/border/dot (unaffected, still --gold) but only
       manages 1.9:1 as actual text on a light surface — used by the
       .pillar .num labels, the one real text use of gold on the page. */
    --gold-text:#8a5f00;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0d2230;
      --ink:#dbe9f0;
      --card:#123245;
      --line:#20475d;
      --line-strong:#2c5975;
      --navy-tint:#173c50;
      --navy:#eaf5fb;
      /* AA-checked against the darkest surface (--card #123245): the
         original #2b8fc2 only manages 3.71:1 there (fails 4.5:1) — this
         brighter blue clears 5.08:1 while still reading as its own shade,
         not white. Everywhere --blue is used as a solid fill (nav CTA)
         uses the separate, non-flipping --brand-blue instead. */
      --blue:#4fa8dc;
      --err:#f5847a;
      --ok:#3cc491;
      --gold-text:#f3ae00; /* the original accent already reads fine here (6.9:1) */
    }
  }
  :root[data-theme="dark"]{
    --paper:#0d2230;
    --ink:#dbe9f0;
    --card:#123245;
    --line:#20475d;
    --line-strong:#2c5975;
    --navy-tint:#173c50;
    --navy:#eaf5fb;
    --blue:#4fa8dc;
    --err:#f5847a;
    --ok:#3cc491;
    --gold-text:#f3ae00;
  }
  @media (prefers-color-scheme: dark){
    /* w2 uses gold, not another blue — #4fa8dc next to w1's #5fc0e8 read
       as one indistinguishable blue blob at this size, even though both
       individually pass AA. Gold is already this exact logo's own accent
       (the route line), so it reads as two colors AND ties to the mark. */
    :root:not([data-theme="light"]) .nav-brand span.w1,
    :root:not([data-theme="light"]) .foot-brand span.w1{ color:#5fc0e8; }
    :root:not([data-theme="light"]) .nav-brand span.w2,
    :root:not([data-theme="light"]) .foot-brand span.w2{ color:#f3ae00; }
  }
  :root[data-theme="dark"] .nav-brand span.w1,
  :root[data-theme="dark"] .foot-brand span.w1{ color:#5fc0e8; }
  :root[data-theme="dark"] .nav-brand span.w2,
  :root[data-theme="dark"] .foot-brand span.w2{ color:#f3ae00; }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Lora', Georgia, 'Times New Roman', serif;
    font-size:17px;
    line-height:1.65;
  }
  h1,h2,h3,.display{
    font-family:'Michroma','Segoe UI',Arial,sans-serif;
    color:var(--navy);
    font-weight:400;
    letter-spacing:0.01em;
    text-wrap:balance;
  }
  .label{
    font-family:'Work Sans','Segoe UI',Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-size:0.72rem;
    font-weight:600;
  }
  a{color:var(--blue);}
  img{display:block;}
  button{font-family:inherit;}

  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
  .measure{max-width:640px;}

  /* ---------- nav ---------- */
  .nav{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px;}
  .nav-brand{display:flex; align-items:center; gap:10px; min-width:0;}
  .nav-brand svg{height:34px;width:auto;flex:none;}
  .nav-brand span.w1{font-family:'Michroma',sans-serif; font-weight:400; font-size:1.15rem; color:#17384d;} .nav-brand span.w2{font-family:'Michroma',sans-serif; font-weight:400; font-size:1.15rem; color:#1e6f9e;}
  .nav-actions{display:flex; align-items:center; gap:18px; flex:none;}
  .nav-login{
    font-family:'Work Sans',sans-serif; font-weight:600; font-size:0.85rem;
    color:var(--navy); text-decoration:none; white-space:nowrap;
  }
  .nav a.cta{
    font-family:'Work Sans',sans-serif; font-weight:600; font-size:0.85rem;
    color:#fff; background:var(--brand-blue); padding:9px 18px; border-radius:100px;
    text-decoration:none; white-space:nowrap;
  }

  /* ---------- hero ---------- */
  .hero{position:relative; overflow:hidden; padding:76px 0 40px;}
  .hero .wrap{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
    position:relative; z-index:1;
  }
  .hero .wrap > *{min-width:0;}
  .hero .eyebrow{color:var(--blue); margin-bottom:16px;}
  .hero h1{font-size:2.5rem; line-height:1.22; margin:0 0 22px;}
  .hero h1 em{font-style:normal; color:var(--blue);}
  .hero p.lede{font-size:1.14rem; color:var(--ink); margin:0 0 30px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  .btn-primary{
    font-family:'Work Sans',sans-serif; font-weight:600; font-size:0.95rem;
    color:#fff; background:var(--brand-navy); padding:14px 26px; border-radius:8px;
    text-decoration:none; display:inline-block; border:none; cursor:pointer;
  }
  .btn-secondary{
    font-family:'Work Sans',sans-serif; font-weight:600; font-size:0.95rem;
    color:var(--navy); background:transparent; padding:14px 26px; border-radius:8px;
    text-decoration:none; display:inline-block; border:1.5px solid var(--line-strong);
  }

  .hero-art{position:relative; display:flex; justify-content:center;}
  .phone{
    width:230px; border-radius:34px; border:6px solid var(--navy);
    box-shadow:0 30px 60px -20px rgba(23,56,77,0.35);
    overflow:hidden; background:#000; position:relative;
  }
  .phone img{width:100%; display:block;}
  .phone.tilt{transform:rotate(-4deg);}
  .phone-b{
    width:190px; margin-left:-64px; margin-top:64px;
    box-shadow:0 24px 48px -18px rgba(23,56,77,0.4);
    transform:rotate(6deg);
  }
  .hero-collage{display:flex; align-items:flex-end;}

  /* ---------- band ---------- */
  .band{padding:70px 0;}
  .band-tight{padding:44px 0;}
  .band-alt{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

  .section-head{max-width:640px; margin:0 0 44px;}
  .section-head .label{color:var(--blue); margin-bottom:10px; display:block;}
  .section-head h2{font-size:1.7rem; margin:0 0 12px;}
  .section-head p{margin:0; color:var(--ink);}

  /* pillars */
  .pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .pillar{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 22px; min-width:0;}
  .pillar .num{font-family:'Michroma',sans-serif; font-size:0.78rem; color:var(--gold-text); display:block; margin-bottom:14px;}
  .pillar h3{font-size:1.02rem; margin:0 0 10px; font-family:'Work Sans',sans-serif; font-weight:600; letter-spacing:0; color:var(--navy);}
  .pillar p{margin:0; font-size:0.95rem; color:var(--ink);}

  /* feature split rows */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .split.rev .split-art{order:2;}
  .split.rev .split-copy{order:1;}
  .split-art{display:flex; justify-content:center; min-width:0;}
  .split-copy{min-width:0;}
  .split-copy h2{font-size:1.6rem; margin:0 0 16px;}
  .feature-list{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:16px;}
  .feature-list li{display:flex; gap:14px; align-items:flex-start;}
  .feature-list .dot{
    width:8px; height:8px; border-radius:50%; background:var(--gold); margin-top:9px; flex:none;
  }
  .feature-list strong{font-family:'Work Sans',sans-serif; font-weight:600; color:var(--navy); font-size:0.98rem;}
  .feature-list span.desc{display:block; font-size:0.95rem; color:var(--ink);}

  .frame-single .phone{margin:0 auto;}

  /* coming soon */
  .soon{
    background:linear-gradient(135deg,var(--brand-navy) 0%,#0e2836 100%);
    color:#eaf4fa; border-radius:20px; padding:52px 48px;
    display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
    position:relative; overflow:hidden;
  }
  .soon::after{
    content:''; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
    border-radius:50%; background:radial-gradient(circle, rgba(95,192,232,0.28), transparent 70%);
  }
  .soon .label{color:var(--blue-light);}
  .soon h2{color:#fff; font-size:1.55rem; margin:14px 0 16px;}
  .soon p{color:#c9dde8; margin:0; font-size:1rem;}
  .soon-badge{
    display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.18); border-radius:100px; padding:8px 16px;
    font-family:'Work Sans',sans-serif; font-size:0.82rem; color:#fff; margin-bottom:18px;
  }
  .soon-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);}
  .soon-visual{
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
    border-radius:16px; padding:24px; font-family:'Work Sans',sans-serif;
  }
  .soon-visual .push-row{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.1);}
  .soon-visual .push-row:last-child{border-bottom:none;}
  .soon-visual .push-icon{width:34px;height:34px;border-radius:9px;background:var(--blue-light);flex:none;}
  .soon-visual .push-title{font-size:0.86rem; font-weight:600; color:#fff; margin:0 0 3px;}
  .soon-visual .push-body{font-size:0.8rem; color:#b9d3e0; margin:0;}

  /* trust strip */
  .trust{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .trust-item{text-align:left; padding:0 0 0 20px; border-left:2px solid var(--gold); min-width:0;}
  .trust-item .stat{font-family:'Michroma',sans-serif; font-size:1.5rem; color:var(--navy); display:block; margin-bottom:6px;}
  .trust-item p{margin:0; font-size:0.9rem; color:var(--ink);}

  /* team grid */
  .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .team-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; min-width:0;}
  .team-card h3{font-family:'Work Sans',sans-serif; font-weight:600; letter-spacing:0; font-size:1rem; color:var(--navy); margin:0 0 10px;}
  .team-card ul{margin:0; padding-left:18px; font-size:0.92rem;}
  .team-card li{margin-bottom:6px;}

  /* contact */
  .contact{
    background:var(--card); border:1px solid var(--line); border-radius:20px;
    padding:48px; display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px;
  }
  .contact > div, .contact > form{min-width:0;}
  .contact h2{font-size:1.6rem; margin:0 0 14px;}
  .contact p{margin:0; color:var(--ink);}
  form.contact-form{display:flex; flex-direction:column; gap:16px;}
  .field-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px;}
  .field{display:flex; flex-direction:column; gap:6px; min-width:0;}
  .field label{font-family:'Work Sans',sans-serif; font-size:0.82rem; font-weight:600; color:var(--navy);}
  .field input, .field textarea, .field select{
    font-family:'Lora',Georgia,serif; font-size:0.98rem; color:var(--ink);
    background:var(--paper); border:1px solid var(--line-strong); border-radius:8px;
    padding:11px 13px; resize:vertical;
  }
  .field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--blue); outline-offset:1px;}
  .phone-row{display:flex; gap:8px;}
  .phone-row select{flex:0 0 auto; max-width:40%; min-width:0;}
  .phone-row input{flex:1 1 auto; min-width:0;}
  .contact-form .btn-primary{align-self:flex-start;}
  .form-consent{font-family:'Work Sans',sans-serif; font-size:0.8rem; color:var(--ink); opacity:0.75; margin:-6px 0 0;}
  .form-status{font-family:'Work Sans',sans-serif; font-size:0.88rem; min-height:20px;}
  .form-status[data-state="ok"]{color:var(--ok);}
  .form-status[data-state="err"]{color:var(--err);}

  /* closing */
  .closing{text-align:center; padding:84px 0 40px;}
  .closing h2{font-size:2rem; max-width:640px; margin:0 auto 18px;}
  .closing p{max-width:520px; margin:0 auto 32px; color:var(--ink);}

  footer{border-top:1px solid var(--line); padding:36px 0; background:var(--card);}
  footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
  .foot-brand{display:flex; align-items:center; gap:10px;}
  .foot-brand svg{height:34px;width:auto;}
  .foot-brand span.w1{font-family:'Michroma',sans-serif; font-weight:400; font-size:1.15rem; color:#17384d;} .foot-brand span.w2{font-family:'Michroma',sans-serif; font-weight:400; font-size:1.15rem; color:#1e6f9e;}
  footer p{margin:0; font-size:0.85rem; color:var(--ink); opacity:0.75; font-family:'Work Sans',sans-serif;}
  footer .copyright{width:100%; text-align:center; padding-top:20px; border-top:1px solid var(--line); font-size:0.8rem; opacity:0.65;}

  @media (max-width:880px){
    .hero .wrap{grid-template-columns:1fr; gap:40px;}
    .hero-art{order:-1;}
    .pillars{grid-template-columns:repeat(2,1fr);}
    .split, .split.rev{grid-template-columns:1fr;}
    .split.rev .split-art, .split.rev .split-copy{order:initial;}
    .soon{grid-template-columns:1fr; padding:36px 26px;}
    .trust{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:1fr;}
    .contact{grid-template-columns:1fr; padding:32px 24px;}
  }

  /* Narrow phones: brand + "Client login" + "Book a demo" don't fit on one
     row at full size — shrink them (not remove; login is only reachable
     from this nav) so the row fits with room to spare, instead of pushing
     the page wider than the viewport. */
  @media (max-width:480px){
    .nav .wrap{padding:0 16px; gap:8px;}
    .nav-brand{gap:7px;}
    .nav-brand svg{height:24px;}
    .nav-brand span.w1, .nav-brand span.w2{font-size:0.86rem;}
    .nav-actions{gap:10px;}
    .nav-login{font-size:0.72rem;}
    .nav a.cta{padding:8px 12px; font-size:0.72rem;}
  }

  /* ---------- legal / policy pages ---------- */
  .legal{padding:64px 0 80px;}
  .legal .wrap{max-width:820px;}
  .legal h1{font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 8px; color:var(--navy);}
  .legal .updated{font-family:'Work Sans',sans-serif; font-size:0.85rem; color:var(--ink); opacity:0.7; margin:0 0 40px;}
  .legal h2{font-family:'Work Sans',sans-serif; font-weight:600; font-size:1.2rem; color:var(--navy); margin:40px 0 14px; letter-spacing:0;}
  .legal p{margin:0 0 16px; color:var(--ink); line-height:1.7;}
  .legal ul{margin:0 0 16px; padding-left:22px; color:var(--ink); line-height:1.7;}
  .legal li{margin:0 0 8px;}
  .legal strong{color:var(--navy);}
  .legal a{color:var(--blue);}