:root{
    --ink:#12213c;
    --ink-70:rgba(18,33,60,0.68);
    --ink-45:rgba(18,33,60,0.45);
    --paper:#ffffff;
    --paper-alt:#f6f6f3;
    --rule:#e1dfd6;
    --rule-strong:#c9c6b9;
    --brass:#8a6a24;
    --brass-fill:#c9a34e;
    --brass-soft:#f1e6cd;
    --green:#2f6b4f;
    --green-soft:#e5efe9;
    --red:#a4402f;
    --red-soft:#f3e6e2;
    --font-display:'Fraunces', Georgia, serif;
    --font-body:'Public Sans', -apple-system, sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --max:1120px;
  }

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

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  a{color:var(--ink);}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

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

  :focus-visible{
    outline:2px solid var(--brass);
    outline-offset:3px;
  }

  /* ---------- Letterhead ---------- */
  header.letterhead{
    border-bottom:1px solid var(--rule);
  }
  .letterhead-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 0;
  }
  .mark{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .mark-glyph{
    width:36px; height:36px;
    border-radius:50%;
    object-fit:cover;
    flex:none;
  }
  .mark-word{
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-weight:500;
  }
  .letterhead-support{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--ink-70);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .letterhead-support:hover{border-bottom-color:var(--ink-70);}

  /* ---------- Hero ---------- */
  .hero{
    padding:76px 0 88px;
    display:grid;
    grid-template-columns:7fr 5fr;
    gap:64px;
    align-items:start;
  }
  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--brass);
    margin:0 0 18px;
  }
  h1{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(38px, 5.4vw, 64px);
    line-height:1.05;
    letter-spacing:-0.01em;
    margin:0 0 22px;
  }
  .hero-copy{
    font-size:18px;
    color:var(--ink-70);
    max-width:46ch;
    margin:0 0 32px;
  }
  .cta-row{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
  .btn-primary{
    display:inline-block;
    background:var(--ink);
    color:var(--paper);
    border:1px solid var(--ink);
    padding:14px 26px;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .btn-primary:hover{background:var(--paper); color:var(--ink);}
  .link-quiet{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--ink-70);
    text-decoration:none;
    border-bottom:1px solid var(--rule-strong);
  }
  .link-quiet:hover{color:var(--ink);}

  /* Ticket-stub pass */
  .pass{
    position:relative;
    border:1px solid var(--ink);
    background:var(--paper-alt);
    padding:26px 26px 22px;
  }
  .pass::before, .pass::after{
    content:"";
    position:absolute;
    width:20px; height:20px;
    background:var(--paper);
    border:1px solid var(--ink);
    border-radius:50%;
    top:50%;
    transform:translateY(-50%);
  }
  .pass::before{left:-11px;}
  .pass::after{right:-11px;}
  .pass-title{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--brass);
    margin:0 0 16px;
  }
  .pass-row{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-top:1px dashed var(--rule-strong);
    font-size:14px;
  }
  .pass-row:first-of-type{border-top:none;}
  .pass-row dt{color:var(--ink-70); margin:0; font-weight:400;}
  .pass-row dd{margin:0; font-family:var(--font-mono); font-weight:500;}
  .pass-foot{
    margin:16px 0 0;
    font-size:12.5px;
    color:var(--ink-45);
    font-family:var(--font-mono);
  }

  section{padding:78px 0;}
  section + section{border-top:1px solid var(--rule);}
  h2{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(28px, 3.4vw, 38px);
    letter-spacing:-0.01em;
    margin:0 0 14px;
  }
  .section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
  .section-lede{color:var(--ink-70); font-size:16.5px; margin:0;}

  /* ---------- Video preview ---------- */
  .video-frame{
    max-width:300px;
    margin:0 auto;
    aspect-ratio:9/16;
    border:1px solid var(--ink);
    overflow:hidden;
    background:var(--paper-alt);
  }
  .video-frame iframe{width:100%; height:100%; border:0; display:block;}

  /* ---------- Step rail ---------- */
  .step-rail{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    max-width:820px;
    margin:0 auto 52px;
    position:relative;
  }
  .step-rail::before{
    content:"";
    position:absolute;
    top:17px; left:6%; right:6%;
    height:1px;
    background:var(--rule-strong);
    z-index:0;
  }
  .step{
    position:relative;
    text-align:center;
    z-index:1;
    padding:0 8px;
  }
  .step-num{
    width:34px; height:34px;
    margin:0 auto 12px;
    border-radius:50%;
    border:1px solid var(--ink);
    background:var(--paper);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono);
    font-size:13px;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .step-label{font-size:13px; color:var(--ink-70);}
  .step.is-active .step-num{background:var(--ink); color:var(--paper);}
  .step.is-active .step-label{color:var(--ink); font-weight:600;}
  .step.is-done .step-num{background:var(--green); border-color:var(--green); color:var(--paper);}

  /* ---------- Booking widget ---------- */
  .widget{
    max-width:520px;
    margin:0 auto;
    border:1px solid var(--rule-strong);
    background:var(--paper-alt);
    padding:38px 34px;
  }
  @media (max-width:560px){ .widget{padding:28px 20px;} }

  .refer-cta{
    max-width:520px;
    margin:20px auto 0;
    text-align:center;
    font-size:13.5px;
    color:var(--ink-70);
  }
  .refer-cta a{color:var(--brass); border-bottom:1px solid var(--brass); text-decoration:none;}

  .field{margin-bottom:20px;}
  .field label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
  }
  .field input{
    width:100%;
    border:1px solid var(--rule-strong);
    background:var(--paper);
    padding:12px 14px;
    font-size:15px;
    color:var(--ink);
  }
  .field input:focus{border-color:var(--ink);}
  .help{font-size:12.5px; color:var(--ink-45); margin-top:7px;}
  .otp-input{
    letter-spacing:0.6em;
    font-family:var(--font-mono);
    font-size:20px;
    text-align:center;
  }

  .widget-btn{
    width:100%;
    background:var(--ink);
    color:var(--paper);
    border:1px solid var(--ink);
    padding:13px 18px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  }
  .widget-btn:hover{background:var(--paper); color:var(--ink);}
  .widget-btn:disabled{opacity:0.4; cursor:not-allowed;}
  .widget-btn:disabled:hover{background:var(--ink); color:var(--paper);}

  .resend-row{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:16px; font-family:var(--font-mono); font-size:12.5px;
  }
  .resend-link{
    background:none; border:none; cursor:pointer; color:var(--brass);
    font-family:var(--font-mono); font-size:12.5px; padding:0;
    text-decoration:underline;
  }
  .resend-link:disabled{color:var(--ink-45); cursor:not-allowed; text-decoration:none;}

  .error-msg{
    background:var(--red-soft);
    color:var(--red);
    border:1px solid var(--red);
    padding:10px 13px;
    font-size:13.5px;
    margin-bottom:18px;
    display:none;
  }
  .error-msg.show{display:block;}

  /* Informational notice (e.g. candidate already has an upcoming booking) */
  .info-msg{
    background:var(--green-soft);
    color:var(--green);
    border:1px solid var(--green);
    padding:10px 13px;
    font-size:13.5px;
    margin-bottom:18px;
    display:none;
  }
  .info-msg.show{display:block;}

  /* Calendar */
  .cal-label{
    font-size:13px; font-weight:600; margin:26px 0 12px;
  }
  .cal-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:6px;
  }
  .cal-dow{
    text-align:center;
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--ink-45);
    text-transform:uppercase;
  }
  .cal-day{
    aspect-ratio:1;
    border:1px solid var(--rule-strong);
    background:var(--paper);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer;
    font-family:var(--font-mono);
    font-size:13px;
    gap:3px;
    position:relative;
  }
  .cal-day .dot{width:5px; height:5px; border-radius:50%; background:var(--green);}
  .cal-day.is-full{
    color:var(--ink-45);
    cursor:not-allowed;
    background:var(--paper-alt);
  }
  .cal-day.is-full .dot{background:var(--red);}
  .cal-day.is-empty{visibility:hidden; cursor:default;}
  .cal-day.is-selected{border-color:var(--ink); background:var(--ink); color:var(--paper);}
  .cal-day.is-selected .dot{background:var(--paper);}
  .cal-legend{
    display:flex; gap:18px; margin-top:14px; font-size:12px; color:var(--ink-70);
  }
  .cal-legend span{display:inline-flex; align-items:center; gap:6px;}
  .cal-legend .dot{width:5px; height:5px; border-radius:50%;}

  .slot-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  @media (max-width:480px){ .slot-grid{grid-template-columns:1fr;} }
  .slot-btn{
    border:1px solid var(--rule-strong);
    background:var(--paper);
    padding:11px 12px;
    font-family:var(--font-mono);
    font-size:12.5px;
    cursor:pointer;
    text-align:left;
    color:var(--ink);
  }
  .slot-btn:hover{border-color:var(--ink);}
  .slot-btn.is-selected{border-color:var(--ink); background:var(--ink); color:var(--paper);}

  /* Confirmation */
  .confirm-stamp{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--green);
    border:1px solid var(--green);
    background:var(--green-soft);
    padding:5px 10px;
    margin-bottom:18px;
  }
  .confirm-note{
    font-size:14px;
    color:var(--ink-70);
    margin-top:18px;
    padding-top:18px;
    border-top:1px dashed var(--rule-strong);
  }

  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }

  /* ---------- About ---------- */
  .fact-list{list-style:none; margin:26px 0 0; padding:0;}
  .fact-list li{
    padding:16px 0;
    border-top:1px solid var(--rule);
    font-size:15px;
    color:var(--ink-70);
  }
  .fact-list li:first-child{border-top:none;}
  .fact-list li strong{color:var(--ink); font-weight:600;}

  /* ---------- Offerings / pricing ---------- */
  .offer-list{
    max-width:640px;
    margin:0 auto;
    border:1px solid var(--ink);
    background:var(--paper-alt);
  }
  .offer-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:16px 22px;
    border-top:1px dashed var(--rule-strong);
    gap:16px;
  }
  .offer-row:first-child{border-top:none;}
  .offer-name{font-size:15px; font-weight:600;}
  .offer-price{
    font-family:var(--font-mono);
    font-size:14.5px;
    font-weight:500;
    white-space:nowrap;
  }
  .offer-price.offer-free{color:var(--green); font-weight:600;}
  .offer-note{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--ink-45);
    font-weight:400;
  }
  .offer-footnote{
    max-width:640px;
    margin:18px auto 0;
    font-size:13.5px;
    color:var(--ink-45);
    text-align:center;
  }
  @media (max-width:560px){
    .offer-row{flex-direction:column; gap:4px;}
  }

  /* ---------- Blueprint / learn more ---------- */
  .blueprint{
    max-width:920px; margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    position:relative;
    padding-top:8px;
  }
  .blueprint::before{
    content:"";
    position:absolute;
    top:8px; left:5%; right:5%;
    height:1px;
    background:var(--rule-strong);
  }
  .clause{padding:0 16px; text-align:left;}
  .clause-tag{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--brass);
    background:var(--paper);
    display:inline-block;
    padding-right:8px;
    margin-bottom:14px;
    position:relative;
    top:-8px;
  }
  .clause-title{font-weight:600; font-size:15px; margin:0 0 8px;}
  .clause-copy{font-size:14px; color:var(--ink-70); margin:0;}

  @media (max-width:900px){
    .hero{grid-template-columns:1fr; gap:40px;}
    .blueprint{grid-template-columns:1fr 1fr; row-gap:32px;}
    .blueprint::before{display:none;}
  }
  @media (max-width:640px){
    .step-rail{grid-template-columns:1fr 1fr;}
    .step{margin-bottom:24px;}
    .step-rail::before{display:none;}
    .blueprint{grid-template-columns:1fr;}
    .cal-grid{gap:5px;}
  }

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--rule); padding:30px 0;}
  .footer-inner{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    font-family:var(--font-mono); font-size:12.5px; color:var(--ink-45);
  }
  .footer-inner a{color:var(--ink-70); text-decoration:none; border-bottom:1px solid var(--rule-strong);}