/* Neue Machina — Pangram Pangram, personal-use license (see
     UI/assets/fonts/Personal-license-agreement.txt). Swap in a commercial
     license before using this on a live/commercial site. */
  @font-face{
    font-family:'Neue Machina';
    src:url('assets/fonts/NeueMachina-Light.woff') format('woff'),
        url('assets/fonts/NeueMachina-Light.otf') format('opentype');
    font-weight:300;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Neue Machina';
    src:url('assets/fonts/NeueMachina-Regular.woff') format('woff'),
        url('assets/fonts/NeueMachina-Regular.otf') format('opentype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Neue Machina';
    src:url('assets/fonts/NeueMachina-Ultrabold.woff') format('woff'),
        url('assets/fonts/NeueMachina-Ultrabold.otf') format('opentype');
    font-weight:800;
    font-style:normal;
    font-display:swap;
  }


  :root{
    /* Brand palette, sampled directly from the Aoibh brand guidelines deck:
       charcoal, light grey, electric blue, white. */
    --paper: #FFFFFF;
    --paper-dim: #F2F4F5;
    --panel: #FFFFFF;
    --ink: #293239;
    --ink-soft: #55575C;
    --ink-faint: #8B8D8F;
    --line: #C6CBD2;
    --line-soft: #E5E8EB;

    --indigo: #0E30FC;
    --indigo-dim: #E2E6FF;
    /* Dashboard-only accent — a more subdued, luxury-leaning navy used in
       the Studio dashboard specifically, so the rest of the brand's
       electric blue accent stays untouched everywhere else on the site. */
    --navy: #1B2A4A;
    --navy-glow: rgba(27,42,74,.55);
    /* Gold is retired — the brand guide defines a single accent (Electric
       Blue). Kept as an alias rather than deleting outright so nothing
       that still references --gold/--gold-dim breaks. */
    --gold: var(--indigo);
    --gold-dim: var(--indigo-dim);

    --serif: 'Fraunces', serif;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'Inter', sans-serif;

    --container: 1220px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }

  .wrap{ max-width:var(--container); margin:0 auto; padding:0 32px; }

  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--indigo);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--indigo);
    box-shadow:0 0 0 3px var(--indigo-dim);
  }
  .eyebrow.gold{ color:var(--gold); }
  .eyebrow.gold .dot{ background:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); }

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(237,237,231,.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:72px;
  }
  .logo{
    font-family:'Neue Machina', var(--serif);
    font-weight:400;
    font-size:22px;
    letter-spacing:-.01em;
    display:flex; align-items:baseline; gap:8px;
  }
  .logo-header{ font-size:44px; }
  .logo span{
    font-family:var(--mono);
    font-size:10px;
    color:var(--ink-faint);
    letter-spacing:.1em;
    font-weight:400;
  }
  .navlinks{ display:flex; gap:36px; font-family:var(--mono); font-size:13px; color:var(--ink-soft); }
  .navlinks a{ transition:color .15s ease; }
  .navlinks a:hover{ color:var(--ink); }
  .navcta{ display:flex; align-items:center; gap:20px; }

  .btn{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.02em;
    padding:11px 20px;
    border-radius:3px;
    border:1px solid var(--ink);
    display:inline-flex; align-items:center; gap:8px;
    transition:all .15s ease;
    cursor:pointer;
    white-space:nowrap;
  }
  .btn-primary{ background:var(--ink); color:var(--paper); }
  .btn-primary:hover{ background:#000; }
  .btn-ghost{ background:transparent; color:var(--ink); }
  .btn-ghost:hover{ background:var(--ink); color:var(--paper); }
  .btn:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }

  @media (max-width:860px){ .navlinks{ display:none; } }

  /* ---------- Hero ---------- */
  .hero{ padding:96px 0 64px; position:relative; }
  .hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
  .hero h1{
    font-family:var(--serif);
    font-weight:450;
    font-size:clamp(42px, 6.4vw, 92px);
    line-height:0.98;
    letter-spacing:-.02em;
    max-width:920px;
    margin-top:22px;
  }
  .hero h1 em{
    font-style:italic;
    font-weight:450;
    color:var(--ink);
  }
  .hero h1 .tag{
    font-family:var(--mono);
    font-size:.34em;
    vertical-align:middle;
    background:var(--indigo-dim);
    color:var(--indigo);
    padding:4px 10px;
    border-radius:3px;
    letter-spacing:0;
    display:inline-block;
    transform:translateY(-8px);
  }
  .hero-sub{
    font-size:18px;
    line-height:1.6;
    color:var(--ink-soft);
    max-width:520px;
    margin-top:28px;
  }
  .hero-cta{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }

  .hero-stats{
    display:flex; gap:0; margin-top:72px;
    border-top:1px solid var(--line);
    padding-top:0;
  }
  .stat{
    flex:1; padding:22px 24px 0;
    border-right:1px solid var(--line);
  }
  .stat:last-child{ border-right:none; }
  .stat .num{ font-family:var(--serif); font-size:34px; font-weight:450; }
  .stat .lbl{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; margin-top:6px; }
  @media (max-width:760px){ .hero-stats{ flex-wrap:wrap; } .stat{ flex:1 1 50%; border-right:none; border-bottom:1px solid var(--line); padding-bottom:18px; } }

  /* ---------- Feed (signature element) ---------- */
  .feed-section{ padding:80px 0; }
  .feed-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
  .feed-head h2{ font-family:var(--serif); font-size:clamp(26px,3vw,36px); font-weight:450; margin-top:14px; max-width:560px; }
  .feed-head p{ color:var(--ink-soft); font-size:15px; max-width:340px; }

  .feed-panel{
    border:1px solid var(--ink);
    border-radius:4px;
    background:var(--ink);
    color:var(--paper);
    overflow:hidden;
    position:relative;
  }
  .feed-panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px;
    border-bottom:1px solid #33353A;
    font-family:var(--mono);
    font-size:11px;
    color:#8C8E92;
    letter-spacing:.06em;
  }
  .feed-panel-head .dots{ display:flex; gap:6px; }
  .feed-panel-head .dots span{ width:7px; height:7px; border-radius:50%; background:#3A3C42; }

  .feed-cols{
    display:grid;
    grid-template-columns: 2.4fr 1.1fr 1fr 1fr;
    gap:12px;
    padding:12px 20px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#6F7176;
    border-bottom:1px solid #26282D;
  }

  .feed-viewport{
    height:392px;
    overflow:hidden;
    position:relative;
    mask-image:linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  .feed-track{
    animation: feedScroll 22s linear infinite;
  }
  .feed-viewport:hover .feed-track{ animation-play-state:paused; }
  @keyframes feedScroll{
    0%{ transform:translateY(0); }
    100%{ transform:translateY(-50%); }
  }
  @media (prefers-reduced-motion: reduce){ .feed-track{ animation:none; } }

  .feed-row{
    display:grid;
    grid-template-columns: 2.4fr 1.1fr 1fr 1fr;
    gap:12px;
    padding:14px 20px;
    align-items:center;
    border-bottom:1px solid #202226;
    font-size:13px;
  }
  .feed-row .job{ font-family:var(--sans); font-weight:500; }
  .feed-row .job .client{ color:#8C8E92; font-family:var(--mono); font-size:11px; display:block; margin-top:2px; letter-spacing:.02em; }
  .stagepill{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
    padding:4px 8px; border-radius:2px; width:fit-content;
  }
  .stagepill.brief{ background:#26282D; color:#B9BABD; }
  .stagepill.draft{ background:var(--indigo); color:#fff; }
  .stagepill.review{ background:#3A3C42; color:#E9E9EA; }
  .stagepill.ship{ background:#C9F2D4; color:#0F5C33; }
  .tagpill{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:#B9BABD; }
  .tagpill.ai{ color:#9FA2FF; }
  .tagpill.human{ color:#E8C27A; }
  .node{ font-family:var(--mono); font-size:11.5px; color:#B9BABD; }

  @media (max-width:900px){
    .feed-cols{ display:none; }
    .feed-row{ grid-template-columns:1fr; gap:6px; padding:16px 20px; }
    .feed-row > div:not(.job){ display:inline-block; margin-right:12px; }
  }

  /* ---------- How it works ---------- */
  .process{ padding:80px 0; border-top:1px solid var(--line); }

  .stats{ padding:80px 0; border-top:1px solid var(--line); }
  .stats-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:48px 60px; margin-top:48px;
  }
  .stat-item{ padding-bottom:22px; border-bottom:1px dashed var(--line); }
  .stat-value{
    font-family:'Neue Machina', var(--serif); font-weight:800;
    font-size:clamp(44px, 6vw, 68px);
    color:var(--indigo); line-height:1;
    margin-bottom:18px;
  }
  .stat-desc{ font-size:15px; color:var(--ink); max-width:420px; line-height:1.5; }
  @media (max-width:700px){ .stats-grid{ grid-template-columns:1fr; gap:36px; } }
  .process-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top:40px;
  }
  .process-step{ background:var(--paper); padding:32px 26px 34px; }
  .process-step .idx{ font-family:var(--mono); font-size:12px; color:var(--indigo); }
  .process-step h3{ font-family:var(--serif); font-size:22px; font-weight:450; margin-top:16px; }
  .process-step p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-top:10px; }
  @media (max-width:900px){ .process-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }

  /* ---------- Network / Engine split ---------- */
  .split{ padding:90px 0; border-top:1px solid var(--line); }
  .split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); }
  .split-col{ padding:44px 40px; }
  .split-col + .split-col{ border-left:1px solid var(--line); }
  .split-col h3{ font-family:var(--serif); font-size:28px; font-weight:450; margin-top:14px; }
  .split-col > p{ color:var(--ink-soft); font-size:14.5px; margin-top:12px; max-width:420px; line-height:1.6; text-wrap:pretty; }

  .nodegrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin-top:32px; }
  .nodeitem{ display:flex; justify-content:space-between; border-bottom:1px solid var(--line-soft); padding-bottom:10px; }
  .network-coverage{
    font-family:var(--serif); font-size:15px; font-weight:500;
    color:var(--indigo); margin-top:22px;
  }
  .nodeitem .city{ font-size:14.5px; }
  .nodeitem .count{ font-family:var(--mono); font-size:13px; color:var(--gold); }

  .enginelist{ margin-top:32px; display:flex; flex-direction:column; gap:22px; }
  .engineitem{ display:flex; gap:16px; align-items:flex-start; }
  .engineitem .mark{ font-family:var(--mono); font-size:11px; color:var(--indigo); background:var(--indigo-dim); padding:3px 7px; border-radius:2px; margin-top:2px; flex-shrink:0; min-width:34px; text-align:center; }
  .engineitem .txt strong{ font-weight:600; display:block; font-size:14.5px; }
  .engineitem .txt span{ font-size:13.5px; color:var(--ink-soft); }

  @media (max-width:860px){ .split-grid{ grid-template-columns:1fr; } .split-col + .split-col{ border-left:none; border-top:1px solid var(--line); } .nodegrid{ grid-template-columns:1fr; } }

  /* ---------- Capabilities ---------- */
  .capabilities{ padding:80px 0; border-top:1px solid var(--line); }
  .cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px; }
  .cap-item{
    position:relative; overflow:hidden;
    background:var(--ink); padding:30px; min-height:220px;
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .cap-item img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 30%;
    transition:transform .5s ease;
  }
  .cap-item:hover img{ transform:scale(1.04); }
  .cap-item .n{ position:relative; z-index:1; font-family:var(--mono); font-size:11px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); }
  .cap-item h4{ position:relative; z-index:1; font-family:var(--serif); font-size:19px; font-weight:450; margin-top:8px; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6); }
  @media (max-width:860px){ .cap-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .cap-grid{ grid-template-columns:1fr; } }

  /* ---------- Clients ---------- */
  .clients{ padding:56px 0; border-top:1px solid var(--line); }
  .clients .eyebrow{ margin-bottom:28px; }
  .clientmarks{ display:flex; flex-wrap:wrap; gap:36px 48px; align-items:center; }
  .clientmarks span{ font-family:var(--mono); font-size:15px; letter-spacing:.03em; color:var(--ink-faint); }

  .pricing{ padding:80px 0; border-top:1px solid var(--line); }

  .faq{ padding:80px 0; border-top:1px solid var(--line); }
  .faq-list{ max-width:760px; margin-top:40px; }
  .faq-item{ border-bottom:1px solid var(--line); padding:20px 0; }
  .faq-item:first-child{ border-top:1px solid var(--line); }
  .faq-question{
    font-family:var(--serif); font-weight:600; font-size:17px;
    cursor:pointer; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
    color:var(--ink);
  }
  .faq-question::-webkit-details-marker{ display:none; }
  .faq-question::marker{ content:''; }
  .faq-question::after{
    content:'+'; font-family:var(--mono); font-size:20px; font-weight:400;
    color:var(--indigo); flex-shrink:0;
  }
  .faq-item[open] .faq-question::after{ content:'−'; }
  .faq-answer{
    font-size:14.5px; line-height:1.65; color:var(--ink-soft);
    margin-top:14px; max-width:640px;
  }
  .pricing-info-trigger{
    display:inline-flex; align-items:center; gap:7px;
    background:none; border:none; cursor:pointer;
    font-family:var(--sans); font-size:13.5px; color:var(--ink-soft);
    margin-top:16px; padding:0;
  }
  .pricing-info-trigger:hover{ color:var(--ink); }
  .pricing-info-icon{
    width:16px; height:16px; border-radius:50%;
    border:1.3px solid var(--ink-faint); color:var(--ink-faint);
    display:flex; align-items:center; justify-content:center;
    font-size:10.5px; font-style:italic; font-family:var(--serif); font-weight:600;
    flex-shrink:0;
  }
  .pricing-info-trigger:hover .pricing-info-icon{ border-color:var(--indigo); color:var(--indigo); }

  .info-overlay{
    position:fixed; inset:0; z-index:500;
    background:rgba(0,0,0,.45);
    display:none; align-items:center; justify-content:center;
    padding:20px;
  }
  .info-overlay.open{ display:flex; }
  .info-modal{
    background:var(--paper); border:1px solid var(--line); border-radius:10px;
    max-width:480px; width:100%; padding:28px 26px 24px;
    box-shadow:0 24px 60px rgba(0,0,0,.28);
    position:relative;
  }
  .info-modal-close{
    position:absolute; top:14px; right:14px;
    background:none; border:none; cursor:pointer;
    font-size:15px; color:var(--ink-faint); padding:4px;
  }
  .info-modal-close:hover{ color:var(--ink); }
  .info-modal h3{
    font-family:var(--serif); font-weight:600; font-size:18px; margin-bottom:14px; padding-right:20px;
  }
  .info-modal p{
    font-size:14px; line-height:1.6; color:var(--ink-soft); margin-bottom:14px;
  }
  .info-modal p:last-child{ margin-bottom:0; }
  .info-modal p strong{ color:var(--ink); font-weight:600; }
  .info-modal-steps{
    list-style:none; counter-reset:vetstep; padding:0; margin:0;
    display:flex; flex-direction:column; gap:16px;
  }
  .info-modal-steps li{
    counter-increment:vetstep;
    font-size:14px; line-height:1.6; color:var(--ink-soft);
    padding-left:28px; position:relative;
  }
  .info-modal-steps li::before{
    content:counter(vetstep); position:absolute; left:0; top:0;
    width:19px; height:19px; border-radius:50%;
    background:var(--indigo); color:#fff;
    font-family:var(--mono); font-size:11px; font-weight:600;
    display:flex; align-items:center; justify-content:center;
  }
  .info-modal-steps li strong{ color:var(--ink); font-weight:600; }

  .subscribe-modal-input{
    width:100%; padding:11px 13px; margin-bottom:14px;
    border:1px solid var(--line); border-radius:6px;
    font-family:var(--sans); font-size:14px; color:var(--ink);
    box-sizing:border-box;
  }
  .subscribe-modal-input:focus{ outline:2px solid var(--indigo); outline-offset:1px; }
  .subscribe-modal-error{ color:#c0392b; font-size:13px; margin-top:10px; min-height:16px; }

  .task-review-modal{ max-width:560px; }
  .task-preview-placeholder{
    background:var(--paper-dim); border:1px dashed var(--line); border-radius:8px;
    height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; margin:16px 0;
  }
  .task-preview-icon{ font-size:26px; opacity:.35; }
  .task-preview-text{ font-size:12px; color:var(--ink-faint); text-align:center; max-width:300px; padding:0 20px; line-height:1.5; }
  .task-revision-count{
    font-family:var(--mono); font-size:11px; color:var(--ink-faint);
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px;
  }
  .task-revision-count.capped{ color:#D64545; }
  .task-feedback-log{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
  .task-feedback-entry{
    background:var(--paper-dim); border-radius:6px; padding:10px 12px;
    font-size:13px; color:var(--ink-soft); line-height:1.5;
  }
  .task-feedback-entry-num{
    font-family:var(--mono); font-size:10px; color:var(--navy);
    text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:4px;
  }
  .task-feedback-label{ font-size:12.5px; font-weight:600; color:var(--ink); display:block; margin-bottom:8px; }
  .task-feedback-input{
    width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 14px;
    font-family:var(--sans); font-size:14px; color:var(--ink); resize:vertical;
    margin-bottom:14px; background:var(--paper);
  }
  .task-feedback-input:focus{ outline:none; border-color:var(--navy); }
  .task-feedback-input:disabled{ opacity:.5; cursor:not-allowed; }
  .task-feedback-send{ width:100%; justify-content:center; }
  .task-feedback-send:disabled{ opacity:.45; cursor:not-allowed; }

  .studio-task{ cursor:pointer; transition:opacity .15s ease; }
  .studio-task:hover{ opacity:.82; }
  .studio-task-badge{
    display:inline-block; margin-top:8px;
    font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
    background:rgba(255,255,255,.2); padding:3px 8px; border-radius:10px;
  }
  .pricing-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    margin-top:44px; align-items:stretch;
  }
  .pricing-card{
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:28px 26px; display:flex; flex-direction:column;
    position:relative;
  }
  .pricing-featured{
    background:var(--ink); border-color:var(--ink);
    box-shadow:0 16px 40px -20px rgba(0,0,0,.4);
  }
  .pricing-badge{
    position:absolute; top:-13px; left:26px;
    background:var(--indigo); color:#fff;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
    padding:5px 10px; border-radius:20px;
  }
  .pricing-name{
    font-family:var(--serif); font-weight:600; font-size:19px;
  }
  .pricing-featured .pricing-name{ color:#fff; }
  .pricing-price{
    font-family:'Neue Machina', var(--serif); font-weight:800;
    font-size:34px; color:var(--indigo);
    margin-top:10px; line-height:1;
  }
  .pricing-featured .pricing-price{ color:#fff; }
  .pricing-price span{
    font-family:var(--sans); font-weight:400; font-size:14px;
    color:var(--ink-faint); margin-left:2px;
  }
  .pricing-featured .pricing-price span{ color:rgba(255,255,255,.6); }
  .pricing-audience{
    font-size:13px; color:var(--ink-faint); margin-top:10px; line-height:1.5;
  }
  .pricing-featured .pricing-audience{ color:rgba(255,255,255,.65); }
  .pricing-guarantee{
    display:inline-flex; align-items:center; gap:5px;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.02em;
    color:#0a7d4f; background:#e3f6ea;
    padding:4px 10px; border-radius:20px;
    margin-top:14px; width:fit-content;
  }
  .pricing-featured .pricing-guarantee{ color:#8fedbb; background:rgba(255,255,255,.12); }
  .pricing-features{
    list-style:none; margin:20px 0 24px; padding:0;
    display:flex; flex-direction:column; gap:10px; flex:1;
  }
  .pricing-features li{
    font-size:13.5px; line-height:1.5; color:var(--ink);
    padding-left:18px; position:relative;
  }
  .pricing-featured .pricing-features li{ color:rgba(255,255,255,.9); }
  .pricing-features li::before{
    content:'✓'; position:absolute; left:0; top:0;
    color:var(--indigo); font-weight:600; font-size:12px;
  }
  .pricing-featured .pricing-features li::before{ color:#fff; }
  .pricing-cta{ width:100%; text-align:center; justify-content:center; }
  .pricing-featured .pricing-cta.btn-primary{
    background:var(--indigo); border-color:var(--indigo); color:#fff;
  }
  .pricing-featured .pricing-cta.btn-primary:hover{ background:#0A26D6; }

  .trial-project{
    margin-top:24px;
    background:var(--paper-dim); border:1px solid var(--line); border-radius:10px;
    padding:28px 30px;
    display:flex; justify-content:space-between; align-items:center; gap:30px;
    flex-wrap:wrap;
  }
  .trial-project-eyebrow{
    font-family:var(--mono); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--indigo); margin-bottom:8px;
  }
  .trial-project-name{ font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink); }
  .trial-project-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-top:8px; max-width:440px; }
  .trial-project-features{
    list-style:none; margin:14px 0 0; padding:0;
    display:flex; flex-wrap:wrap; gap:6px 16px;
  }
  .trial-project-features li{ font-size:12.5px; color:var(--ink); padding-left:16px; position:relative; }
  .trial-project-features li::before{
    content:'✓'; position:absolute; left:0; top:0;
    color:var(--indigo); font-weight:600; font-size:11px;
  }
  .trial-project-buy{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex-shrink:0; }
  .trial-project-price{
    font-family:'Neue Machina', var(--serif); font-weight:800;
    font-size:34px; color:var(--indigo); line-height:1; text-align:right;
  }
  .trial-project-price span{
    font-family:var(--sans); font-weight:400; font-size:14px;
    color:var(--ink-faint); margin-left:4px;
  }

  @media (max-width:700px){
    .trial-project{ flex-direction:column; align-items:flex-start; }
    .trial-project-buy{ align-items:flex-start; width:100%; }
    .trial-project-buy .btn{ width:100%; }
  }

  @media (max-width:900px){
    .pricing-grid{ grid-template-columns:1fr; }
  }

  /* ---------- CTA ---------- */
  .cta{ padding:110px 0; border-top:1px solid var(--line); text-align:center; }

  .not-found{ padding:140px 0; text-align:center; }
  .not-found .eyebrow{ justify-content:center; display:flex; align-items:center; gap:8px; }
  .not-found h1{
    font-family:var(--serif); font-weight:450; font-size:clamp(30px,4.5vw,46px);
    margin-top:16px; max-width:620px; margin-left:auto; margin-right:auto;
  }
  .not-found p{ color:var(--ink-soft); font-size:15px; margin-top:14px; }
  .not-found-actions{
    display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap;
  }

  .legal-header{ padding:64px 0 0; }
  .legal-header h1{
    font-family:var(--serif); font-weight:450; font-size:clamp(30px,4.5vw,44px);
    max-width:640px;
  }
  .legal-updated{ font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin-top:14px; }
  .legal-draft-notice{
    background:var(--paper-dim); border:1px solid var(--line); border-radius:10px;
    padding:18px 22px; margin:26px 0 0; max-width:680px;
  }
  .legal-draft-notice p{
    font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:0;
  }
  .legal-draft-notice strong{ color:var(--ink); }

  /* ---- Photography ---- */
  .hero-photo{
    width:100%;
    height:min(57.2vw, 572px);
    min-height:312px;
    overflow:hidden;
    position:relative;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .hero-photo-track{
    display:flex;
    height:100%;
    width:max-content;
    animation: heroPhotoScroll 110s linear infinite;
  }
  .hero-photo:hover .hero-photo-track{ animation-play-state:paused; }
  @keyframes heroPhotoScroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){ .hero-photo-track{ animation:none; } }

  /* ---- Client logo bar ---- */
  .clients-bar{ padding:36px 0 44px; border-bottom:1px solid var(--line); }
  .clients-bar .eyebrow{ justify-content:center; margin-bottom:22px; }
  .clients-track-wrap{
    overflow:hidden; width:100%;
    mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  }
  .clients-track{
    display:flex; align-items:center; width:max-content; gap:72px;
    padding:0 36px;
    animation: clientsScroll 28s linear infinite;
  }
  .clients-track-wrap:hover .clients-track{ animation-play-state:paused; }
  @keyframes clientsScroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){ .clients-track{ animation:none; } }
  .clients-track img{
    flex:0 0 auto;
    height:40px; width:auto; max-width:180px; object-fit:contain;
    filter:grayscale(1); opacity:.5;
    transition:opacity .2s ease, filter .2s ease;
  }
  .clients-track img:hover{ filter:grayscale(0); opacity:1; }
  .hero-photo-track img{
    flex:0 0 min(46vw, 460px);
    height:100%; object-fit:cover; object-position:center 20%;
    border-right:1px solid rgba(255,255,255,.12);
  }
  .hero-photo::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 32%);
    pointer-events:none;
  }
  .hero-photo .caption{
    position:absolute; left:32px; right:32px; bottom:18px; z-index:1;
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:#fff; display:flex; align-items:center; gap:8px;
  }
  .hero-photo .caption .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }

  .gallery{ padding:80px 0; border-top:1px solid var(--line); }
  .gallery-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
  .gallery-head h2{ font-family:var(--serif); font-weight:450; font-size:clamp(26px,3vw,36px); margin-top:14px; max-width:520px; }
  .gallery-head p{ max-width:340px; color:var(--ink-soft); font-size:14.5px; line-height:1.55; padding-bottom:4px; }
  .gallery-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:220px 220px;
    gap:14px;
  }
  .g-item{
    position:relative; overflow:hidden; border-radius:4px;
    border:1px solid var(--line);
    background:var(--panel);
  }
  .g-item img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s ease;
  }
  .g-item:hover img{ transform:scale(1.03); }
  .g-item .g-cap{
    position:absolute; left:14px; bottom:12px; z-index:1;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
    color:#fff;
  }
  .g-item::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 38%);
    pointer-events:none;
  }
  .g-item.is-dashboard{ background:var(--ink); }
  .g-item.is-dashboard::after{ display:none; }
  .dash-panel{ height:100%; display:flex; flex-direction:column; color:var(--paper); }
  .dash-panel-head{
    display:flex; align-items:center; gap:10px;
    padding:10px 14px;
    border-bottom:1px solid #2A2C31;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:#8C8E92;
  }
  .dash-panel-head .dots{ display:flex; gap:5px; }
  .dash-panel-head .dots span{ width:6px; height:6px; border-radius:50%; background:#3A3C42; }
  .dash-track{ flex:1; padding:12px 14px 12px 27px; position:relative; display:flex; flex-direction:column; justify-content:space-between; }
  .dash-track::before{ content:''; position:absolute; left:16px; top:18px; bottom:18px; width:1px; background:#33353A; }
  .dash-node{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .dash-node .rail-dot{ position:absolute; left:-17px; width:8px; height:8px; border-radius:50%; background:#26282D; border:1.5px solid #4A4D54; }
  .dash-node.done .rail-dot{ background:var(--indigo); border-color:var(--indigo); }
  .dash-node.active .rail-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 3px rgba(214,154,50,.25); animation:pulse 1.6s ease-in-out infinite; }
  .dash-label{ font-family:var(--sans); font-size:11.5px; color:#D8D9DB; }
  .dash-node.pending .dash-label{ color:#6F7176; }
  .dash-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:2px; flex-shrink:0; }
  .dash-tag.done{ background:#26282D; color:#9FA2FF; }
  .dash-tag.live{ background:var(--gold); color:#1a1400; }
  .dash-tag.next{ background:#26282D; color:#6F7176; }

  @media (max-width:820px){
    .gallery-grid{ grid-template-columns:1fr 1fr; grid-template-rows:180px 180px 180px; }
    .gallery-grid .g-item:nth-child(1){ grid-column:1 / 3; grid-row:1; }
    .gallery-grid .g-item:nth-child(2){ grid-row:2; }
    .gallery-grid .g-item:nth-child(3){ grid-row:2; }
    .gallery-grid .g-item:nth-child(4){ grid-column:1 / 3; grid-row:3; }
  }
  .cta h2{ font-family:var(--serif); font-weight:450; font-size:clamp(34px,5vw,60px); letter-spacing:-.01em; max-width:760px; margin:20px auto 0; }
  .cta-actions{ display:flex; justify-content:center; gap:14px; margin-top:34px; flex-wrap:wrap; }
  .cta .eyebrow{ justify-content:center; }

  /* ---------- Footer ---------- */
  footer{ border-top:1px solid var(--line); padding:44px 0 36px; }
  .foot-grid{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:28px; }
  .foot-right{ display:flex; flex-direction:column; align-items:flex-end; gap:18px; }
  .foot-links{ display:flex; gap:32px; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap; }
  .foot-social{ display:flex; gap:10px; }
  .foot-social-link{
    width:32px; height:32px; border-radius:50%;
    border:1px solid var(--line); color:var(--ink-faint);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .15s ease, color .15s ease;
  }
  .foot-social-link svg{ width:15px; height:15px; }
  .foot-social-link:hover{ border-color:var(--indigo); color:var(--indigo); }
  .foot-copy{ font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin-top:24px; }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* ---------- Brief chat modal ---------- */
  .brief-overlay{
    position:fixed; inset:0; z-index:300;
    background:rgba(21,23,26,.55);
    display:none;
    align-items:center; justify-content:center;
    padding:24px;
    backdrop-filter:blur(2px);
  }
  .brief-overlay.open{ display:flex; }

  .brief-modal{
    width:min(600px, 100%);
    max-height:min(760px, 90vh);
    background:var(--paper);
    border:1px solid var(--ink);
    border-radius:6px;
    display:flex; flex-direction:column;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.28);
  }

  .brief-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
  }
  .brief-head-title{
    display:flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  }
  .brief-head-avatar{
    width:66px; height:66px; border-radius:50%; flex-shrink:0;
    object-fit:cover; object-position:50% 20%;
    border:1px solid var(--line);
  }
  .brief-head-title .pulse{
    width:7px; height:7px; border-radius:50%;
    background:var(--indigo);
    box-shadow:0 0 0 3px var(--indigo-dim);
    animation:pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
  .brief-close{
    background:none; border:none; cursor:pointer;
    font-family:var(--mono); font-size:16px; color:var(--ink-soft);
    line-height:1; padding:4px;
  }
  .brief-close:hover{ color:var(--ink); }

  .brief-chat{
    flex:1; overflow-y:auto;
    padding:22px 20px;
    display:flex; flex-direction:column; gap:12px;
    background:var(--paper-dim);
  }

  .msg{
    max-width:82%;
    padding:11px 15px;
    font-size:14.5px;
    line-height:1.55;
    border-radius:12px;
    white-space:pre-wrap;
  }
  .msg.ai{
    align-self:flex-start;
    background:var(--ink);
    color:var(--paper);
    border-bottom-left-radius:3px;
  }
  .msg.user{
    align-self:flex-end;
    background:var(--indigo);
    color:#fff;
    border-bottom-right-radius:3px;
  }
  .brief-chat.hidden, .brief-review.hidden{ display:none; }

  .brief-review{
    flex:1; overflow-y:auto;
    padding:24px 22px;
    display:flex; flex-direction:column; gap:18px;
    background:var(--paper-dim);
  }
  .review-intro{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); }

  .review-grid{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
  }
  .review-row{
    display:flex; align-items:baseline; gap:16px;
    padding:11px 16px;
    border-bottom:1px solid var(--line-soft);
  }
  .review-row:last-child{ border-bottom:none; }
  .review-label{
    font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-faint); width:112px; flex-shrink:0; white-space:nowrap;
  }
  .review-value{ font-size:15px; line-height:1.45; color:var(--ink); font-weight:500; }

  .review-designer{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
    padding:18px;
    display:flex; gap:15px; align-items:flex-start;
  }
  .review-designer .designer-avatar{
    width:68px; height:68px; border-radius:50%; flex-shrink:0;
    background:var(--indigo-dim); color:var(--indigo);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:600; font-size:18px;
    border:2px solid #fff;
  }
  .review-designer .designer-avatar-photo{
    object-fit:cover; object-position:50% 20%; background:var(--panel);
  }
  .review-designer .designer-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; display:block; }
  .review-designer .designer-name{ font-weight:600; font-size:17px; }
  .review-designer .designer-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }
  .review-designer .designer-reason{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin-top:9px; }
  .designer-profile-link{
    background:none; border:none; cursor:pointer; padding:0; margin-top:10px;
    font-family:var(--mono); font-size:11.5px; color:var(--indigo);
  }
  .designer-profile-link:hover{ text-decoration:underline; }
  .review-designer.loading{ align-items:center; color:var(--ink-faint); font-size:13.5px; }

  /* Full designer profile modal */
  .profile-modal{ max-width:440px; }
  .profile-modal-photo{
    width:100%; height:220px; border-radius:8px; object-fit:cover; object-position:50% 20%;
    margin-bottom:16px; background:var(--panel);
  }
  .profile-modal-name{ font-family:var(--serif); font-weight:600; font-size:22px; color:var(--ink); }
  .profile-modal-title{ font-size:14px; color:var(--ink-soft); margin-top:2px; }
  .profile-modal-meta{
    font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-faint); margin-top:8px;
  }
  .profile-modal-match{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--indigo); background:var(--indigo-dim); padding:4px 10px; border-radius:20px;
    margin-top:12px;
  }
  .profile-modal-reason{
    font-size:14px; line-height:1.6; color:var(--ink-soft); margin-top:14px;
    padding-top:14px; border-top:1px solid var(--line-soft);
  }
  .profile-modal-skills-label{
    font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--ink-faint); margin-top:16px; margin-bottom:8px;
  }
  .profile-modal-skills{ display:flex; flex-wrap:wrap; gap:6px; }
  .profile-modal-skill-chip{
    font-family:var(--mono); font-size:11px; color:var(--ink);
    background:var(--paper-dim); border:1px solid var(--line); border-radius:20px;
    padding:4px 11px; text-transform:capitalize;
  }

  .review-upload{
    background:var(--panel); border:1px solid var(--line); border-radius:8px;
    padding:18px;
  }
  .review-upload-head{
    display:flex; justify-content:space-between; align-items:center;
    font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:12px;
  }
  .review-upload-count{ color:var(--indigo); }
  .review-dropzone{
    border:1.5px dashed var(--line); border-radius:8px;
    padding:26px 20px; text-align:center; cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
  }
  .review-dropzone:hover, .review-dropzone:focus-visible, .review-dropzone.dragover{
    border-color:var(--indigo); background:var(--indigo-dim); outline:none;
  }
  .review-dropzone-icon{
    width:34px; height:34px; border-radius:50%; margin:0 auto 10px;
    background:var(--paper); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-size:15px; color:var(--ink-soft);
  }
  .review-dropzone-text{ font-size:14px; color:var(--ink); }
  .review-dropzone-browse{ color:var(--indigo); text-decoration:underline; }
  .review-dropzone-hint{ font-size:12px; color:var(--ink-faint); margin-top:6px; }
  .review-file-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  .review-file-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 12px; background:var(--paper); border:1px solid var(--line-soft); border-radius:6px;
    font-size:13px;
  }
  .review-file-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .review-file-size{ color:var(--ink-faint); font-size:11.5px; flex-shrink:0; margin-left:auto; margin-right:6px; }
  .review-file-remove{
    background:none; border:none; cursor:pointer; color:var(--ink-faint);
    font-size:15px; flex-shrink:0; line-height:1; padding:2px;
  }
  .review-file-remove:hover{ color:var(--ink); }

  .studio-assets-section{}
  .studio-upload-card{ max-width:none; }

  .studio-secondary-row{
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    margin-top:38px; align-items:start;
  }
  @media (max-width:900px){
    .studio-secondary-row{ grid-template-columns:1fr; }
  }

  .studio-clock-card{
    background:var(--ink); border-radius:10px;
    padding:20px 24px; margin-top:26px; max-width:520px;
    box-shadow:0 10px 30px -16px rgba(0,0,0,.45);
  }
  .studio-clock-label{
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:rgba(255,255,255,.6);
  }
  .studio-clock-face{
    font-family:var(--mono); font-variant-numeric:tabular-nums;
    font-size:clamp(34px, 5vw, 46px); font-weight:600;
    color:#fff; letter-spacing:.02em;
    margin-top:6px; line-height:1;
  }
  .studio-clock-face.urgent{ color:#FF5C5C; }
  .studio-clock-face.overdue{ color:#FF5C5C; }
  .studio-clock-sub{
    font-size:12.5px; color:rgba(255,255,255,.55); margin-top:8px;
  }

  .typing{
    align-self:flex-start;
    background:var(--ink);
    padding:13px 16px;
    border-radius:12px;
    border-bottom-left-radius:3px;
    display:flex; gap:4px;
  }
  .typing span{
    width:6px; height:6px; border-radius:50%;
    background:#8C8E92;
    animation:typingBounce 1.1s infinite ease-in-out;
  }
  .typing span:nth-child(2){ animation-delay:.15s; }
  .typing span:nth-child(3){ animation-delay:.3s; }
  @keyframes typingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

  .brief-input-row{
    display:flex; gap:10px;
    padding:14px 16px;
    border-top:1px solid var(--line);
    background:var(--paper);
  }
  .brief-input{
    flex:1;
    padding:11px 13px;
    border:1px solid var(--line);
    border-radius:4px;
    font-family:var(--sans);
    font-size:14px;
    background:#fff;
    color:var(--ink);
  }
  .brief-input:focus{ outline:2px solid var(--indigo); outline-offset:1px; }
  .brief-input-row .btn{ padding:11px 18px; }
  .brief-input-row.hidden, .brief-actions.hidden{ display:none; }

  .brief-actions{
    display:flex; gap:10px; flex-wrap:wrap;
    padding:14px 16px;
    border-top:1px solid var(--line);
    background:var(--paper);
  }
  .brief-actions .btn{ font-size:12.5px; padding:10px 16px; }

  .brief-status{
    padding:0 16px 14px;
    background:var(--paper);
    font-size:13px; line-height:1.5; color:var(--ink-soft);
  }
  .brief-status.hidden{ display:none; }
  .brief-status strong{ color:var(--ink); }

  /* ---- How it works carousel ---- */
  .how-overlay{
    position:fixed; inset:0; z-index:300;
    background:rgba(21,23,26,.55);
    display:none;
    align-items:center; justify-content:center;
    padding:24px;
    backdrop-filter:blur(2px);
  }
  .how-overlay.open{ display:flex; }

  .how-modal{
    width:min(600px, 100%);
    background:var(--paper);
    border:1px solid var(--ink);
    border-radius:6px;
    display:flex; flex-direction:column;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.28);
  }
  .how-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  }
  .how-close{
    background:none; border:none; cursor:pointer;
    font-family:var(--mono); font-size:16px; color:var(--ink-soft);
    line-height:1; padding:4px;
  }
  .how-close:hover{ color:var(--ink); }

  .how-slides{
    position:relative;
    overflow:hidden;
    height:min(56vh, 420px);
    background:var(--paper-dim);
  }
  .how-slide{
    position:absolute; inset:0;
    padding:32px 30px;
    display:flex; flex-direction:column; justify-content:center;
    opacity:0; visibility:hidden;
    transition:opacity .35s ease;
  }
  .how-slide.active{ opacity:1; visibility:visible; }
  .how-slide-center{ align-items:center; text-align:center; }

  .how-eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gold); margin-bottom:16px;
  }
  .how-headline{ font-family:var(--serif); font-weight:450; font-size:clamp(24px,3.4vw,32px); line-height:1.25; }
  .how-headline-sm{ font-size:clamp(19px,2.6vw,23px); margin-bottom:14px; }
  .how-sub{ color:var(--ink-soft); font-size:14.5px; line-height:1.5; margin-top:2px; margin-bottom:18px; }

  .how-chat{ display:flex; flex-direction:column; gap:14px; }
  .how-msg{ display:flex; align-items:flex-end; gap:10px; max-width:100%; }
  .how-msg-user{ flex-direction:row-reverse; align-self:flex-end; }
  .how-msg-ai{ align-self:flex-start; }
  .how-msg .msg{ max-width:100%; }
  .how-avatar{
    width:45px; height:45px; border-radius:50%; flex-shrink:0;
    border:1px solid var(--line);
  }
  .how-avatar-ai{
    width:90px; height:90px;
    display:block;
    object-fit:cover; object-position:50% 20%;
    background:var(--panel);
  }
  .how-avatar-user{
    display:flex; align-items:center; justify-content:center;
    background:var(--indigo); color:#fff; border-color:var(--indigo);
    font-family:var(--serif); font-size:13px; font-weight:600;
  }

  .how-deliverables{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .how-tag{
    font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-soft); background:var(--panel); border:1px solid var(--line);
    padding:6px 11px; border-radius:20px;
  }

  .how-team{ display:flex; flex-direction:column; gap:10px; }
  .how-team-member{
    display:flex; align-items:center; gap:12px;
    background:var(--panel); border:1px solid var(--line); border-radius:6px;
    padding:10px 14px;
  }
  .how-team-avatar{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:var(--indigo-dim); color:var(--indigo);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:600; font-size:14px;
  }
  .how-team-name{ font-weight:600; font-size:14px; }
  .how-team-meta{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-faint); margin-top:2px;
  }

  .how-nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px;
    border-top:1px solid var(--line);
    background:var(--paper);
  }
  .how-arrow{
    background:none; border:1px solid var(--line); border-radius:50%;
    width:32px; height:32px; cursor:pointer;
    font-size:14px; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .how-arrow:hover{ color:var(--ink); border-color:var(--ink-faint); }
  .how-dots{ display:flex; gap:8px; }
  .how-dot{
    width:7px; height:7px; border-radius:50%; background:var(--line);
    border:none; cursor:pointer; padding:0;
  }
  .how-dot.active{ background:var(--indigo); }

  /* ---------- Studio dashboard ---------- */
  .studio-overlay{
    position:fixed; inset:0; z-index:400;
    background:var(--paper);
    display:flex;
  }
  .studio-overlay.hidden{ display:none; }
  .studio-shell{ display:flex; width:100%; height:100%; }

  .studio-sidebar{
    width:230px; flex-shrink:0;
    background:var(--ink); color:#fff;
    display:flex; flex-direction:column;
    padding:26px 18px;
  }
  .studio-logo{
    font-family:'Neue Machina', var(--serif);
    font-weight:400; font-size:22px;
    margin-bottom:36px; padding:0 6px;
  }
  .studio-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
  .studio-nav a{
    padding:10px 12px; border-radius:8px;
    color:rgba(255,255,255,.6); font-size:14px;
    cursor:default;
  }
  .studio-nav a.active{ background:rgba(255,255,255,.1); color:#fff; }
  .studio-exit{
    background:none; border:1px solid rgba(255,255,255,.22); color:#fff;
    padding:10px 14px; border-radius:8px; font-size:13px;
    cursor:pointer; font-family:inherit;
  }
  .studio-exit:hover{ background:rgba(255,255,255,.1); }

  .studio-main{ flex:1; overflow-y:auto; padding:34px 42px 70px; background:var(--paper-dim); }
  .studio-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:30px;
  }
  .studio-header h1{ font-family:var(--serif); font-size:28px; font-weight:600; }
  .studio-search{
    border:1px solid var(--line); border-radius:8px;
    background:var(--paper);
    padding:9px 16px; font-size:13px; color:var(--ink-faint);
    min-width:220px;
  }

  .studio-overview h2, .studio-kanban h2, .studio-team h2, .studio-assets-section h2{
    font-family:var(--serif); font-size:19px; font-weight:600;
    margin-bottom:14px;
  }
  .studio-card{
    background:var(--navy); border-radius:10px;
    padding:6px 20px; max-width:520px;
    box-shadow:0 10px 30px -14px var(--navy-glow);
  }
  .studio-brief-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 0; border-bottom:1px solid rgba(255,255,255,.18);
    font-size:14px; color:#fff;
  }
  .studio-brief-row:last-child{ border-bottom:none; }
  .studio-brief-row span{ color:rgba(255,255,255,.72); }
  .studio-brief-row strong{ font-weight:600; text-align:right; max-width:60%; color:#fff; }

  .journey-track{
    position:relative;
    display:grid; grid-template-columns:repeat(8, minmax(0,1fr));
    gap:6px; padding-top:4px;
  }
  .journey-line{
    position:absolute; top:20px; left:20px; right:20px; height:3px;
    background:var(--line); z-index:0; border-radius:2px; overflow:hidden;
  }
  .journey-line-fill{
    height:100%; width:0%; background:var(--indigo);
    border-radius:2px; transition:width .6s ease;
  }
  .journey-step{
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:flex-start; gap:10px;
    padding-right:6px;
  }
  .journey-dot{
    width:40px; height:40px; border-radius:50%;
    background:var(--paper); border:3px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
    flex-shrink:0;
  }
  .journey-check{ opacity:0; font-size:15px; color:#fff; transition:opacity .3s ease; }
  .journey-step.done .journey-dot{ background:#1F8A4C; border-color:#1F8A4C; }
  .journey-step.done .journey-check{ opacity:1; }
  .journey-step.active .journey-dot{
    background:var(--indigo); border-color:var(--indigo);
    animation: journeyPulse 1.1s ease-out infinite;
  }
  @keyframes journeyPulse{
    0%{ box-shadow:0 0 0 0 rgba(14,48,252,.55); }
    70%{ box-shadow:0 0 0 12px rgba(14,48,252,0); }
    100%{ box-shadow:0 0 0 0 rgba(14,48,252,0); }
  }
  @media (prefers-reduced-motion: reduce){
    .journey-step.active .journey-dot{ animation:none; box-shadow:0 0 0 6px var(--indigo-dim); }
  }
  .journey-label strong{ display:block; font-size:12px; font-weight:600; color:var(--ink); line-height:1.3; }
  .journey-label span{ display:block; font-size:11px; color:var(--ink-faint); margin-top:3px; line-height:1.35; }
  .journey-step.upcoming .journey-label strong{ color:var(--ink-faint); }
  @media (max-width:860px){
    .journey-track{ grid-template-columns:repeat(4, minmax(0,1fr)); row-gap:26px; }
    .journey-line{ display:none; }
  }

  /* The how-it-works modal is a fixed 600px box — too narrow for 8 columns
     side-by-side at readable size, so this shows 4 on top, 4 on bottom
     instead of scrolling. The connecting line doesn't make sense across
     two rows, so it's dropped here (same simplification already used for
     the dashboard version on narrow screens). */
  .how-journey-track{
    grid-template-columns:repeat(4, minmax(0,1fr));
    row-gap:18px; column-gap:8px; margin-top:14px;
  }
  .how-journey-track .journey-line{ display:none; }
  .how-journey-track .journey-label span{ font-size:10.5px; line-height:1.3; }

  .studio-kanban{ margin-top:38px; }
  .studio-kanban-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
  .studio-col-head{
    font-size:13px; font-weight:600; padding:10px 12px; border-radius:6px;
    background:var(--ink); color:#fff; margin-bottom:10px;
  }
  .studio-col-head-active{ background:var(--navy); }
  .studio-col-head-done{ background:#1F8A4C; }
  .studio-task-list{ display:flex; flex-direction:column; gap:10px; }
  .studio-task{
    border-radius:8px;
    padding:12px 14px; font-size:13.5px; line-height:1.4;
    color:#fff;
    background:#3D444C; /* To Do — mid charcoal-grey */
  }
  .studio-col:nth-child(2) .studio-task{ background:var(--navy); }
  .studio-col:nth-child(3) .studio-task{ background:#1F8A4C; }

  .studio-team{}
  .studio-overview{}
  .studio-team-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:14px;
  }
  .studio-person{
    background:var(--ink); border-radius:10px; color:#fff;
    padding:16px; display:flex; align-items:center; gap:12px;
  }
  .studio-person-avatar{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    object-fit:cover; object-position:50% 20%;
    background:rgba(255,255,255,.14); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:600;
  }
  .studio-person-avatar-lg{ width:84px; height:84px; }
  .studio-person-name{ font-weight:600; font-size:14px; color:#fff; }
  .studio-person-role{ font-size:12.5px; color:rgba(255,255,255,.65); margin-top:1px; }

  @media (max-width:860px){
    .studio-sidebar{ display:none; }
    .studio-main{ padding:24px 20px 50px; }
    .studio-kanban-grid{ grid-template-columns:1fr; }
    .studio-search{ min-width:0; flex:1; margin-left:16px; }
  }

/* ---------- Journal (listing + article pages) ---------- */
.journal-hero{ padding:64px 0 20px; }
.journal-hero h1{
  font-family:var(--serif); font-weight:450; font-size:clamp(32px,4.5vw,50px);
  margin-top:14px; max-width:640px;
}
.journal-hero p{ color:var(--ink-soft); font-size:15.5px; max-width:520px; margin-top:14px; }

.journal-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  background:transparent; border-top:1px solid var(--line); border-left:1px solid var(--line);
  margin:44px 0 90px;
}
.journal-card{
  background:var(--panel); padding:30px; display:flex; flex-direction:column;
  gap:14px; transition:background .15s ease;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.journal-card:hover{ background:var(--paper); }
.journal-card-meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; justify-content:space-between; gap:10px;
}
.journal-card h2{
  font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.3;
}
.journal-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; flex:1; }
.journal-card-link{
  font-family:var(--mono); font-size:12.5px; color:var(--indigo);
  display:inline-flex; align-items:center; gap:6px;
}
@media (max-width:900px){ .journal-grid{ grid-template-columns:1fr; } }

.article-header{ padding:56px 0 10px; border-bottom:1px solid var(--line); }
.article-header .eyebrow{ margin-bottom:0; }
.article-header h1{
  font-family:var(--serif); font-weight:450; font-size:clamp(30px,4.5vw,46px);
  margin-top:16px; max-width:760px; line-height:1.15;
}
.article-meta{
  font-family:var(--mono); font-size:12px; color:var(--ink-faint);
  margin-top:20px; padding-bottom:36px; display:flex; gap:16px; flex-wrap:wrap;
}

.article-body{ max-width:680px; margin:0 auto; padding:50px 0 30px; }
.article-body p{ font-size:16.5px; line-height:1.75; color:var(--ink); margin-bottom:22px; }
.article-body h2{
  font-family:var(--serif); font-weight:600; font-size:26px;
  margin:44px 0 18px; line-height:1.3;
}
.article-body h3{
  font-family:var(--serif); font-weight:600; font-size:20px;
  margin:32px 0 14px;
}
.article-body ul, .article-body ol{ margin:0 0 22px; padding-left:22px; }
.article-body li{ font-size:16.5px; line-height:1.7; color:var(--ink); margin-bottom:10px; }
.article-body strong{ font-weight:600; color:var(--ink); }
.article-body blockquote{
  border-left:3px solid var(--indigo); padding:4px 0 4px 22px;
  margin:32px 0; font-family:var(--serif); font-style:italic; font-size:19px;
  color:var(--ink-soft); line-height:1.5;
}
.article-cta{
  background:var(--ink); border-radius:10px; padding:34px 36px;
  margin:52px 0 20px; text-align:center;
}
.article-cta h3{
  font-family:var(--serif); font-weight:600; font-size:22px; color:#fff; margin-bottom:10px;
}
.article-cta p{ color:rgba(255,255,255,.7); font-size:14.5px; margin-bottom:20px; }
.article-cta .btn{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.article-cta .btn:hover{ background:#0A26D6; }

.article-back{
  font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:6px; margin:26px 0 0;
}
.article-back:hover{ color:var(--ink); }

.article-related{ margin:44px 0 0; padding-top:28px; border-top:1px solid var(--line); }
.article-related-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:14px;
}
.article-related-link{
  display:block; font-family:var(--serif); font-size:16px; color:var(--ink); margin-bottom:10px;
}
.article-related-link:hover{ color:var(--indigo); }