:root{
    --sky-1:#e6f8fc; --sky-2:#b3e9f2;
    --sea-1:#3fd0d8; --sea-2:#20aec2; --sea-3:#14879e;
    --sand-1:#f9ecd2;
    --coral:#ff6b4a; --mango:#ffb03a;
    --ink:#053742; --ink-soft:#0a5163;
    --cream:#fffaf0;
    --line:rgba(5,55,66,.14);
    --font-display:'Anton',Impact,sans-serif;
    --font-body:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0; font-family:var(--font-body); color:var(--ink); background:var(--sky-1);
       -webkit-font-smoothing:antialiased}

  .band{position:relative; background:linear-gradient(180deg,var(--sky-2) 0%,var(--sea-2) 60%,var(--sea-3) 100%);
        padding:26px clamp(18px,5vw,48px) 74px; overflow:hidden}
  .band::after{content:""; position:absolute; left:0; right:0; bottom:0; height:34px;
        background:var(--sand-1); clip-path:ellipse(75% 100% at 50% 100%)}
  .mark{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
        letter-spacing:.06em; font-size:15px; color:var(--ink); text-transform:uppercase; text-decoration:none}
  .mark .dot{width:10px; height:10px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px rgba(255,107,74,.22)}
  .band h1{margin:28px 0 0; font-family:var(--font-display); font-weight:400; text-transform:uppercase;
        font-size:clamp(34px,6vw,64px); line-height:.95; color:var(--cream);
        text-shadow:0 4px 0 rgba(5,55,66,.12),0 20px 36px rgba(5,55,66,.28)}
  .band p{margin:14px 0 0; max-width:56ch; color:var(--cream); font-weight:300;
        font-size:clamp(15px,1.8vw,17px); line-height:1.6; text-shadow:0 2px 10px rgba(5,55,66,.4)}

  main{max-width:760px; margin:-34px auto 0; padding:0 clamp(18px,5vw,48px) 80px; position:relative; z-index:2}
  form{background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(24px,4vw,40px);
       box-shadow:0 26px 60px -34px rgba(5,55,66,.6)}
  fieldset{border:0; margin:0 0 30px; padding:0}
  legend{font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.04em;
         font-size:15px; color:var(--sea-3); margin-bottom:14px; padding:0}
  .grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
  label .req{color:var(--coral)}
  .hint{font-weight:300; color:var(--ink-soft); font-size:12px; margin-top:5px}
  input[type=text],input[type=email],input[type=number],textarea,select{
    width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:12px;
    font:inherit; font-size:15px; color:var(--ink); background:#fdfefe; transition:border-color .15s, box-shadow .15s}
  input:focus,textarea:focus,select:focus{outline:none; border-color:var(--sea-2);
    box-shadow:0 0 0 4px rgba(32,174,194,.16)}
  textarea{min-height:130px; resize:vertical; line-height:1.55}

  .drop{margin-top:6px; border:2px dashed rgba(32,174,194,.55); border-radius:16px; padding:30px 20px;
        text-align:center; background:linear-gradient(180deg,#f4fdff,#eafaff); cursor:pointer;
        transition:border-color .15s, background .15s}
  .drop:hover,.drop.over{border-color:var(--coral); background:#fff6f2}
  .drop strong{display:block; font-size:16px; margin-bottom:4px}
  .drop span{font-size:13px; color:var(--ink-soft); font-weight:300}
  .drop input{display:none}
  .thumbs{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); margin-top:14px}
  .thumb{position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#eef7f9}
  .thumb img{width:100%; height:100%; object-fit:cover; display:block}
  .thumb button{position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:50%; border:0;
        background:rgba(5,55,66,.78); color:#fff; font-size:14px; line-height:1; cursor:pointer}
  .thumb .sz{position:absolute; left:0; right:0; bottom:0; padding:3px 6px; font-size:10px;
        background:rgba(5,55,66,.72); color:#fff; font-weight:600}

  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

  .consent{display:flex; gap:11px; align-items:flex-start; font-size:13px; font-weight:300;
           line-height:1.5; color:var(--ink-soft)}
  .consent input{margin-top:3px; width:17px; height:17px; accent-color:var(--sea-2); flex:none}

  .actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px}
  button.send{border:0; border-radius:999px; padding:16px 34px; background:var(--coral); color:#fff;
        font:inherit; font-weight:600; font-size:16px; cursor:pointer;
        box-shadow:0 16px 34px -16px rgba(255,107,74,.8); transition:transform .16s, opacity .16s}
  button.send:hover:not(:disabled){transform:translateY(-2px)}
  button.send:disabled{opacity:.55; cursor:not-allowed; transform:none}
  .back{color:var(--sea-3); font-size:14px; text-decoration:none; font-weight:600}

  .msg{margin-top:18px; padding:14px 16px; border-radius:12px; font-size:14px; line-height:1.5; display:none}
  .msg.err{display:block; background:#fff1ed; border:1px solid #ffc9ba; color:#a83318}

  .done{display:none; background:#fff; border:1px solid var(--line); border-radius:22px;
        padding:clamp(30px,5vw,54px); text-align:center; box-shadow:0 26px 60px -34px rgba(5,55,66,.6)}
  .done .tick{width:66px; height:66px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center;
        background:linear-gradient(135deg,var(--sea-1),var(--sea-3)); color:#fff; font-size:32px}
  .done h2{margin:0 0 10px; font-family:var(--font-display); font-weight:400; text-transform:uppercase;
        font-size:clamp(24px,4vw,36px)}
  .done p{margin:0 auto 24px; max-width:44ch; color:var(--ink-soft); font-weight:300; line-height:1.6}
  .done .ref{display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
        background:#eef8fb; border:1px solid var(--line); border-radius:8px; padding:7px 12px; margin-bottom:24px}

  footer{text-align:center; padding:0 20px 46px; font-size:13px; font-weight:300; color:var(--ink-soft)}
  @media (prefers-reduced-motion:reduce){*{transition:none !important}}
/* spacing utilities — replaced inline style="" attributes so the CSP can
   drop 'unsafe-inline' for style-src */
.mt16{margin-top:16px}
.mb22{margin-bottom:22px}