:root{
      --black:#000000;
      --white:#F5F5F5;
      --accent:#A57C00; /* choose ONE: #C9A646 (gold) | #0A1A2F (midnight) #004225 (British Racing Green)*/
      --maxw:960px;
      --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:var(--black); color:var(--white);
      font-family: Inter, "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", sans-serif;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }
    .wrap{
      min-height:100vh; display:flex; align-items:center; justify-content:center;
      padding:var(--space-5) var(--space-4);
    }
    .hero{
      width:100%; max-width:var(--maxw);
      display:flex; flex-direction:column; gap:var(--space-4);
    }
    .headline{
      font-family: "Cormorant Garamond", "Garamond", "Goudy Old Style", serif;
      letter-spacing: 0.02em; line-height:1.05; margin:0;
    }
    .h1{ font-size: clamp(40px, 7vw, 72px); font-weight:600; text-decoration: underline solid var(--accent); text-decoration-thickness: 2px; }
    .h2{ font-size: clamp(28px, 4vw, 36px); font-weight:400; opacity:0.98; font-family: Inter, "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", sans-serif; color: #A57C00; }
    .sub{
      font-size: clamp(14px, 2.2vw, 18px); font-weight:300; color: rgba(255,255,255,0.66);
      max-width: 60ch;
      white-space: pre-line;
      line-height: 1;
    }
    .actions{ margin-top: var(--space-3); display:flex; gap: var(--space-2); align-items:center; }
    .btn{
      appearance:none; background:transparent; color:var(--white);
      border:1px solid var(--accent); padding:12px 22px; font-size:14px; letter-spacing:0.06em;
      text-transform:uppercase; border-radius:2px; cursor:pointer; transition: all 120ms ease;
    }
    .btn:hover{ background:var(--accent); color:var(--black); }
    .btn:focus{ outline:2px solid var(--accent); outline-offset:2px; }
    .rule{
      width: 80px; height:1px; background:var(--accent); opacity:0.7;
    }
    .footer{
      position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:center;
      padding: var(--space-2) 0; pointer-events:none;
    }
    .footnote{
      font-size:10px; color: rgba(255,255,255,0.4); letter-spacing:0.06em;
    }
    /* Optional: Background image container for BW photo or motion blur */
    .bg{
      position:fixed; inset:0; z-index:-1; overflow:hidden; opacity:0.14; /* subtle */
      background-image: url('Images/3.png'); background-size: cover; background-position: center; background-repeat: no-repeat;
    }
    /* Modal styles */
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
      box-sizing: border-box;
    }
    .modal.open { display: flex; }
    .modal-content {
      background-color: var(--black);
      margin: 0 auto;
      padding: var(--space-4);
      border: 1px solid var(--accent);
      width: 100%;
      max-width: 520px;
      border-radius: calc(var(--space-1) / 1.5);
      position: relative;
      box-shadow: 0 6px 24px rgba(0,0,0,0.6);
    }
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      margin-bottom: var(--space-3);
    }
    #apply-form h3 {
      margin: 0;
      font-family: "Cormorant Garamond", "Garamond", "Goudy Old Style", serif;
      font-size: 24px;
      color: var(--accent);
      text-align: center;
    }
    .close {
      color: var(--white);
      background: transparent;
      border: none;
      font-size: 28px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      padding: calc(var(--space-1) / 2);
      border-radius: 4px;
    }
    .close:hover,
    .close:focus {
      color: var(--accent);
      outline: none;
      background: rgba(255,255,255,0.02);
    }
    /* Form styles */
    #apply-form {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      font-family: inherit;
      color: var(--white);
    }
    #apply-form h3 {
      margin: 0;
      font-family: "Cormorant Garamond", "Garamond", "Goudy Old Style", serif;
      font-size: 24px;
      color: var(--accent);
    }
    #apply-form label {
      font-size: 14px;
      color: var(--white);
      font-weight: 300;
      display: block;
      margin-bottom: calc(var(--space-1) / 2);
    }
    #apply-form input,
    #apply-form textarea,
    #apply-form select {
      background: var(--black);
      color: var(--white);
      border: 1px solid var(--accent);
      padding: 12px;
      font-size: 14px;
      border-radius: 2px;
      font-family: inherit;
      width: 100%;
      box-sizing: border-box;
    }
    #apply-form input::placeholder,
    #apply-form textarea::placeholder {
      color: rgba(255,255,255,0.4);
    }
    #apply-form input:focus,
    #apply-form textarea:focus,
    #apply-form select:focus {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    #apply-form textarea {
      resize: vertical;
      min-height: 100px;
    }
    #apply-form .form-actions {
      display: flex;
      gap: var(--space-3);
      justify-content: flex-end;
      margin-top: var(--space-2);
    }
    #apply-form .btn {
      background: transparent;
      color: var(--white);
      border: 1px solid var(--accent);
      padding: 10px 16px;
      border-radius: 2px;
      cursor: pointer;
      font-size: 14px;
    }
    #apply-form .btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--black);
      font-weight: 600;
    }
    #apply-form .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    /* Background image now handled via .bg background-image */
    @media (min-width: 1200px){
      .hero{ gap: var(--space-5); }
      .actions{ margin-top: var(--space-4); }
    }
    @media (max-width: 767px){
      .h1{ font-size: 48px; }
      .h2{ font-size: 24px; }
      .sub{ font-size: 16px; }
      .wrap{ padding: var(--space-3) var(--space-2); }
      .bg{ opacity: 0.14; background-image: url('Images/6.png'); }
    }