:root{
    --navy:#0A2A3A;
    --navy-deep:#071b26;
    --teal:#0D7B6E;
    --teal-light:#14a190;
    --tag-bg:#CCEDEB;
    --tag-text:#09665E;
    --paper:#F4F6F5;
    --paper-dim:#E9EDEC;
    --ink:#0A2A3A;
    --ink-soft:#3E5760;
    --red:#C64B3F;
    --green:#1E9E5A;
    --gray:#9AA8A6;
    --white:#FBFDFC;
    --max:920px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'IBM Plex Sans', sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--teal);}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
  h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em;}

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--teal-light);
  }

  /* ---------- HERO ---------- */
  .hero{
    background:radial-gradient(ellipse 120% 90% at 20% -10%, #123244 0%, var(--navy) 55%, var(--navy-deep) 100%);
    color:var(--white);
    padding:80px 0 88px;
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:"";
    position:absolute;
    right:-120px; top:-80px;
    width:420px; height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(13,123,110,0.28), transparent 70%);
    pointer-events:none;
  }
  .hero .eyebrow{color:var(--tag-bg); opacity:0.85; margin-bottom:20px; display:block;}
  .hero h1{
    font-size:clamp(2rem, 5vw, 3.2rem);
    line-height:1.12;
    max-width:800px;
    color:var(--white);
  }
  .hero h1 em{font-style:italic; color:#5FD9C7; font-weight:500;}
  .hero .sub{
    margin-top:20px;
    font-size:1.08rem;
    color:#B9CBD1;
    max-width:600px;
    font-weight:400;
  }
  .hero .role{
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.14);
    font-size:0.88rem;
    color:#9FB6BD;
    max-width:620px;
  }
  .hero .role b{color:var(--white); font-weight:500;}

  /* ---------- STATS BAR ---------- */
  .stats{background:var(--navy-deep); color:var(--white); padding:24px 0;}
  .stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .stat b{display:block; font-family:'IBM Plex Mono', monospace; font-size:1.5rem; color:#5FD9C7; font-weight:500;}
  .stat span{display:block; font-size:0.75rem; color:#9FB6BD; margin-top:4px;}

  /* ---------- SECTIONS ---------- */
  section.content{padding:56px 0;}
  section.content h2{font-size:1.55rem; color:var(--navy); margin-bottom:14px;}
  section.content p{color:var(--ink-soft); font-size:1rem; margin-bottom:12px; max-width:680px;}
  section.content p:last-child{margin-bottom:0;}
  .divider{height:1px; background:linear-gradient(90deg, var(--teal) 0, var(--paper-dim) 90px); max-width:110px; margin:12px 0 20px;}
  .band-alt{background:var(--white);}

  /* Quick facts row — replaces long paragraphs where possible */
  .facts{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 4px;}
  .fact{
    background:var(--tag-bg); color:var(--tag-text);
    font-family:'IBM Plex Mono', monospace; font-size:0.76rem;
    padding:7px 12px; border-radius:20px;
  }

  ul.plain{margin:14px 0 0; padding-left:0; list-style:none; max-width:680px;}
  ul.plain li{position:relative; padding-left:24px; margin-bottom:10px; color:var(--ink-soft); font-size:0.98rem;}
  ul.plain li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; background:var(--teal); border-radius:50%;}

  blockquote{
    border-left:3px solid var(--teal);
    padding:2px 0 2px 20px;
    margin:20px 0;
    max-width:620px;
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:1.05rem;
    color:var(--navy);
    line-height:1.5;
  }
  blockquote cite{
    display:block; font-family:'IBM Plex Mono', monospace; font-style:normal;
    font-size:0.7rem; color:var(--teal); margin-top:8px;
  }

  .callout{
    background:var(--tag-bg); border-radius:10px; padding:16px 20px;
    max-width:680px; margin:16px 0; font-size:0.92rem; color:var(--tag-text);
  }
  .callout b{color:var(--tag-text);}

  /* ---------- PHOTO GALLERY (field research) ---------- */
  .photo-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:24px;
  }
  @media (max-width:560px){
    .photo-grid{grid-template-columns:1fr;}
  }
  .photo{display:flex; flex-direction:column;}
  .photo-frame{
    position:relative;
    width:100%;
    aspect-ratio:5/4;
    border-radius:10px;
    overflow:hidden;
    background:linear-gradient(135deg, #0F3446, #14495c);
  }
  .photo-frame img{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block;}
  .photo-frame .placeholder{
    display:none;
    position:absolute; inset:0;
    align-items:center; justify-content:center;
    text-align:center;
    padding:14px;
    color:#8CA3AA;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    line-height:1.5;
    border:1.5px dashed rgba(140,163,170,0.5);
    border-radius:10px;
  }
  .photo figcaption{
    margin-top:8px;
    font-size:0.82rem;
    color:var(--ink-soft);
  }

  /* ---------- TIMELINE (evaluation methods) ---------- */
  .timeline{max-width:740px; margin-top:8px;}
  .tl-item{display:grid; grid-template-columns:30px 1fr; gap:14px; margin-bottom:24px;}
  .tl-num{
    font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--white);
    background:var(--teal); width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-weight:500;
  }
  .tl-item h3{font-size:1.02rem; color:var(--navy); margin-bottom:4px; font-weight:600;}
  .tl-item p{margin-bottom:0; font-size:0.92rem;}
  .tl-meta{
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--teal);
    text-transform:uppercase; letter-spacing:0.05em; margin-bottom:3px; display:block;
  }

  /* ---------- SIGNATURE DEMO ---------- */
  .demo-section{background:var(--navy); color:var(--white); padding:64px 0 72px;}
  .demo-section .eyebrow{color:#5FD9C7; margin-bottom:14px; display:block;}
  .demo-section h2{color:var(--white); font-size:1.55rem; margin-bottom:10px;}
  .demo-section > .wrap > p{color:#B9CBD1; max-width:620px; margin-bottom:30px; font-size:0.95rem;}

  .board{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
  @media (max-width:720px){ .board{grid-template-columns:1fr 1fr;} }

  .task-card{
    background:#0F3446; border:1px solid rgba(255,255,255,0.08); border-radius:12px;
    padding:16px; cursor:pointer; transition:transform 0.15s ease, border-color 0.2s ease; user-select:none;
  }
  .task-card:hover{transform:translateY(-2px); border-color:rgba(95,217,199,0.4);}
  .task-card .status-dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px;}
  .task-card .status-label{font-family:'IBM Plex Mono', monospace; font-size:0.65rem; letter-spacing:0.07em; text-transform:uppercase; color:#9FB6BD;}
  .task-card .task-name{font-family:'Fraunces', serif; font-weight:500; font-size:0.98rem; margin:10px 0 3px; color:var(--white);}
  .task-card .task-loc{font-size:0.78rem; color:#8CA3AA;}
  .task-card .task-hint{margin-top:12px; font-size:0.68rem; color:#5FD9C7; font-family:'IBM Plex Mono', monospace;}

  .status-Available .status-dot{background:var(--gray);}
  .status-Available{border-color:rgba(154,168,166,0.25) !important;}
  .status-InProgress .status-dot{background:#5FD9C7;}
  .status-InProgress{border-color:rgba(95,217,199,0.35) !important;}
  .status-Incomplete .status-dot{background:var(--red);}
  .status-Incomplete{border-color:rgba(198,75,63,0.4) !important;}
  .status-Complete .status-dot{background:var(--green);}
  .status-Complete{border-color:rgba(30,158,90,0.4) !important;}

  .demo-legend{margin-top:24px; display:flex; flex-wrap:wrap; gap:18px; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:#8CA3AA;}
  .demo-legend span{display:flex; align-items:center; gap:6px;}
  .demo-legend .dot{width:8px; height:8px; border-radius:50%;}
  .demo-note{margin-top:20px; font-size:0.8rem; color:#8CA3AA; max-width:620px;}

  /* ---------- INLINE DIAGRAM / IMAGE ---------- */
  .inline-figure{margin:22px 0; max-width:680px;}
  .inline-figure img{width:100%; display:block; border-radius:10px;}
  .inline-figure figcaption{margin-top:8px; font-size:0.8rem; color:var(--ink-soft);}
  .inline-figure.small{max-width:340px;}

  .full-bleed-figure{margin:0 0 8px;}
  .full-bleed-figure img{width:100%; display:block; border-radius:14px; box-shadow:0 20px 50px -20px rgba(10,42,58,0.35);}

  /* ---------- SCREEN SHOWCASE (real product screenshots) ---------- */
  .screens{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    margin-top:28px;
  }
  @media (max-width:720px){ .screens{grid-template-columns:1fr;} }
  .screen{display:flex; flex-direction:column;}
  .screen-frame{
    border-radius:10px;
    overflow:hidden;
    background:#0d2733;
    border:1px solid var(--paper-dim);
    box-shadow:0 14px 34px -18px rgba(10,42,58,0.28);
  }
  .screen-frame .chrome{
    display:flex; align-items:center; gap:6px;
    padding:9px 12px;
    background:#0F3446;
  }
  .screen-frame .chrome span{width:8px; height:8px; border-radius:50%; background:#3E5760;}
  .screen-frame img{width:100%; height:280px; object-fit:contain; display:block; background:var(--paper);}
  .screen figcaption{margin-top:10px; font-size:0.84rem; color:var(--ink-soft);}
  .screen figcaption b{color:var(--navy); font-weight:600;}

  /* ---------- closing ---------- */
  .closing{background:var(--navy-deep); color:#B9CBD1; padding:56px 0 48px; text-align:center;}
  .closing .wrap{max-width:620px;}
  .closing h2{color:var(--white); font-size:1.4rem; margin-bottom:14px;}
  .closing p{color:#9FB6BD; font-size:0.94rem;}
  .closing a.link{
    display:inline-block; margin-top:20px; color:#5FD9C7;
    font-family:'IBM Plex Mono', monospace; font-size:0.8rem; text-decoration:none;
    border-bottom:1px solid rgba(95,217,199,0.4); padding-bottom:2px;
  }

  .closing .closing-photo{
    width:100%;
    max-width:480px;
    margin:0 auto 32px;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 20px 50px -20px rgba(0,0,0,0.5);
  }
  .closing .closing-photo img{width:100%; display:block;}

  footer{padding:20px 0; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--gray); background:var(--navy-deep);}

  @media (max-width:640px){
    .stats .wrap{grid-template-columns:1fr 1fr; gap:20px;}
    .hero{padding:56px 0 64px;}
  }