:root{
    --parchment:#F6F1E4;
    --parchment-deep:#EFE7D3;
    --ink:#122E27;
    --emerald:#0B3D2E;
    --emerald-deep:#082B20;
    --emerald-pale:#E5EEE7;
    --gold:#C9A24B;
    --gold-bright:#E4C273;
    --gold-line:#DCC896;
    --clay:#B5563A;
    --clay-pale:#F3E1D9;
    --hair:#D8CDA9;
    --shadow-soft: 0 18px 40px -22px rgba(10,36,32,0.35);
  }

  /* *{box-sizing:border-box;} */

  .help-page-container {
    background:
      radial-gradient(1100px 620px at 12% -6%, rgba(201,162,75,0.10), transparent 60%),
      radial-gradient(900px 560px at 92% 8%, rgba(11,61,46,0.07), transparent 55%),
      var(--parchment);
    font-family:'Jost', sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    position: relative;
    padding-bottom: 80px;
  }

  @media (prefers-reduced-motion: reduce){
    .help-page-container *{animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important;}
  }

  /* ---------------------------------- background lattice ---------------------------------- */
  .lattice-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    opacity:0.55;
    width: 100%; height: 100%;
  }

  /* ---------------------------------- header/hero ---------------------------------- */
  .hd-wrap{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    padding:140px 32px 60px;
  }

  .hd-wrap .crumbs{
    position:relative; z-index:2;
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--emerald);
    opacity:0.65;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:28px;
    font-weight:500;
  }
  .hd-wrap .crumbs a { color:var(--emerald); text-decoration: none; }
  .hd-wrap .crumbs .sep{ color:var(--gold); opacity:0.9; }
  .hd-wrap .crumbs .cur{ color:var(--clay); opacity:1; }

  .hero-row{
    position:relative; z-index:2;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
  }

  .hero-title{
    font-family:'Amiri', serif;
    font-weight:700;
    font-style:italic;
    font-size:clamp(40px, 6vw, 68px);
    line-height:1.02;
    margin:0;
    color:var(--emerald-deep);
    letter-spacing:0.005em;
  }
  .hero-title .accent{ color:var(--clay); }

  .hero-sub{
    font-size:16px;
    max-width:420px;
    color:var(--emerald);
    opacity:0.72;
    line-height:1.65;
    margin:14px 0 0;
  }

  .seal{
    width:96px; height:96px;
    flex-shrink:0;
  }

  /* ornamental rule under hero */
  .rule{
    position:relative; z-index:2;
    margin-top:44px;
    height:26px;
  }

  /* ---------------------------------- main split ---------------------------------- */
  .split{
    position:relative; z-index:2;
    margin-top:56px;
    display:grid;
    grid-template-columns:minmax(300px, 420px) minmax(0,1fr);
    gap:40px;
    align-items:start;
  }
  @media (max-width: 940px){
    .split{ grid-template-columns:1fr; }
  }

  /* ============================= LEFT :: MIHRAB PANEL ============================= */
  .mihrab-shell{
    position:relative;
    padding-top:8px;
  }

  .mihrab{
    position:relative;
    background: linear-gradient(180deg, var(--emerald) 0%, var(--emerald-deep) 100%);
    color:var(--parchment);
    border-radius: 210px 210px 0 0;
    padding:0;
    min-height:600px;
    max-width:420px;
    display:flex;
    flex-direction:column;
    box-shadow: var(--shadow-soft);
  }

  .mihrab-inner{
    position:relative;
    padding:72px 40px 44px;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    z-index:2;
  }

  .mihrab-glow{
    position:absolute;
    top:-40px; left:50%;
    width:340px; height:340px;
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(228,194,115,0.28), transparent 68%);
    z-index:1;
    animation:breathe 6s ease-in-out infinite;
  }
  @keyframes breathe{
    0%,100%{ opacity:0.55; transform:translateX(-50%) scale(1); }
    50%{ opacity:0.95; transform:translateX(-50%) scale(1.08); }
  }

  .eyebrow-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 16px 7px 12px;
    border:1px solid rgba(228,194,115,0.55);
    border-radius:999px;
    font-size:11.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold-bright);
    margin-bottom:26px;
    background:rgba(228,194,115,0.06);
  }
  .eyebrow-pill svg{ width:14px; height:14px; }

  .mihrab h2{
    font-family:'Amiri', serif;
    font-weight:700;
    font-size:38px;
    line-height:1.14;
    margin:0 0 8px;
    color:#fff !important;
  }
  .mihrab h2 em{
    font-style:italic;
    color:var(--gold-bright);
  }

  .mihrab-desc{
    font-size:14.5px;
    line-height:1.7;
    color:rgba(246,241,228,0.68);
    max-width:300px;
    margin:0 0 40px;
  }

  /* muqarnas stack (replaces plain feature list) */
  .muqarnas{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:auto;
    padding-top:10px;
  }

  .tier{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:15px 18px 15px 20px;
    border-radius:0 10px 10px 0;
    background:rgba(246,241,228,0.055);
    border:1px solid rgba(228,194,115,0.2);
    border-left:2px solid rgba(228,194,115,0.55);
    opacity:0;
    transform:translateY(14px) scaleX(0.98);
    transform-origin:left center;
    animation:tierRise 0.65s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .tier:nth-child(1){ animation-delay:0.35s; margin-right:0; }
  .tier:nth-child(2){ animation-delay:0.52s; margin-right:20px; background:rgba(246,241,228,0.09); }
  .tier:nth-child(3){ animation-delay:0.69s; margin-right:40px; background:rgba(246,241,228,0.13); }
  .tier:not(:last-child){ margin-bottom:9px; }

  @keyframes tierRise{ to{ opacity:1; transform:translateY(0) scaleX(1);} }

  .tier-icon{
    width:34px; height:34px;
    flex-shrink:0;
    border-radius:8px;
    background:rgba(228,194,115,0.14);
    border:1px solid rgba(228,194,115,0.3);
    display:flex; align-items:center; justify-content:center;
  }
  .tier-icon svg{ width:17px; height:17px; }

  .tier-title{
    font-size:14px; font-weight:600; color:#fff; margin:0 0 3px;
  }
  .tier-text{
    font-size:12.5px; line-height:1.55; color:rgba(246,241,228,0.6); margin:0;
  }

  .track-link{
    margin-top:22px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:500;
    color:var(--gold-bright);
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:1px solid rgba(228,194,115,0.35);
    width:fit-content;
    transition:border-color 0.25s ease, gap 0.25s ease;
  }
  .track-link:hover{ gap:11px; border-color:var(--gold-bright); }
  .track-link svg{ width:14px; height:14px; transition:transform 0.25s ease; }
  .track-link:hover svg{ transform:translateX(2px); }

  /* girih star border tracing the arch */
  .girih-border{
    position:absolute; inset:0;
    z-index:3;
    pointer-events:none;
  }
  .girih-border path{
    fill:none;
    stroke:var(--gold-bright);
    opacity:0.9;
  }
  .girih-trace{
    stroke-width:1.6;
    stroke-dasharray:1500;
    stroke-dashoffset:1500;
    animation:draw 3.4s cubic-bezier(.4,0,.2,1) 0.2s forwards;
  }
  .girih-inner{
    stroke-width:0.8;
    opacity:0.4;
    stroke-dasharray:1500;
    stroke-dashoffset:1500;
    animation:draw 3.4s cubic-bezier(.4,0,.2,1) 0.35s forwards;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  .girih-dot{
    fill:var(--gold-bright);
    opacity:0;
    animation:dotPop 0.5s ease forwards;
  }
  @keyframes dotPop{ from{opacity:0; transform:scale(0);} to{opacity:0.95; transform:scale(1);} }

  .quick-contact-card {
    margin-top: 30px;
    background: #FFFDF7;
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(14px);
    animation: tierRise 0.65s cubic-bezier(.2,.8,.2,1) 0.85s forwards;
  }
  .quick-contact-card h4 {
    margin: 0;
    font-family: 'Amiri', serif;
    font-style: italic;
    font-size: 20px;
    color: var(--emerald-deep);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .quick-contact-card h4 svg {
    width: 20px; height: 20px;
    color: var(--clay);
  }
  .quick-contact-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink);
    opacity: 0.7;
  }
  .quick-contact-card .btn-ghost {
    align-self: flex-start;
    margin-top: 8px;
    height: 38px;
    padding: 0 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }

  /* ============================= RIGHT :: FORM ============================= */
  .form-card{
    position:relative;
    background:#FFFDF7;
    border:1px solid var(--hair);
    border-radius:14px;
    padding:32px;
    box-shadow: var(--shadow-soft);
    opacity:0;
    animation:cardIn 0.7s cubic-bezier(.2,.8,.2,1) 0.15s forwards;
  }
  @keyframes cardIn{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

  .corner-orn{
    position:absolute;
    width:52px; height:52px;
    opacity:0.9;
  }
  .corner-orn.tl{ top:-1px; left:-1px; }
  .corner-orn.tr{ top:-1px; right:-1px; transform:scaleX(-1); }

  .form-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding-bottom:16px;
    margin-bottom:24px;
    border-bottom:1px dashed var(--gold-line);
  }
  .form-head h3{
    font-family:'Amiri', serif;
    font-style:italic;
    font-weight:700;
    font-size:27px;
    margin:0 0 6px;
    color:var(--emerald-deep);
  }
  .form-head p{
    font-size:13.5px;
    color:var(--ink);
    opacity:0.6;
    max-width:400px;
    line-height:1.6;
    margin:0;
  }

  .star-mark{ width:38px; height:38px; flex-shrink:0; margin-top:4px; opacity:0.8;}

  .help-form-custom{ display:flex; flex-direction:column; gap:16px; margin: 0;}

  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:560px){ .grid-2{ grid-template-columns:1fr; } }

  .field{
    position:relative;
    opacity:0;
    transform:translateY(10px);
    animation:fieldIn 0.55s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .field:nth-of-type(1){ animation-delay:0.25s; }
  .field:nth-of-type(2){ animation-delay:0.30s; }
  .field:nth-of-type(3){ animation-delay:0.35s; }
  .field:nth-of-type(4){ animation-delay:0.40s; }
  .field:nth-of-type(5){ animation-delay:0.45s; }
  .field:nth-of-type(6){ animation-delay:0.50s; }
  .field:nth-of-type(7){ animation-delay:0.55s; }
  .field:nth-of-type(8){ animation-delay:0.60s; }
  @keyframes fieldIn{ to{ opacity:1; transform:none; } }

  .help-form-custom label{
    display:block;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.04em;
    color:var(--emerald-deep);
    margin-bottom:6px;
  }
  .help-form-custom label .opt{
    font-weight:400;
    color:var(--ink);
    opacity:0.42;
    text-transform:none;
    letter-spacing:0;
  }

  .input-wrap{ position:relative; }

  .help-form-custom input[type=text], .help-form-custom input[type=email], .help-form-custom input[type=tel], .help-form-custom select, .help-form-custom textarea{
    width:100%;
    font-family:'Jost', sans-serif;
    font-size:14.5px;
    color:var(--ink);
    background:#FCFAF2;
    border:1px solid var(--gold-line);
    border-radius:8px;
    padding:10px 14px;
    outline:none;
    transition:border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    appearance:none;
  }
  .help-form-custom select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230B3D2E'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
    cursor:pointer;
  }
  .help-form-custom textarea{ resize:vertical; min-height:96px; line-height:1.55; }

  .help-form-custom input::placeholder, .help-form-custom textarea::placeholder{ color:var(--ink); opacity:0.32; }

  .help-form-custom input:focus, .help-form-custom select:focus, .help-form-custom textarea:focus{
    border-color:var(--emerald);
    box-shadow:0 0 0 3px rgba(11,61,46,0.09);
    background:#fff;
  }
  .help-form-custom select:disabled {
      opacity: 0.6;
      cursor: not-allowed;
  }

  /* Searchable dropdown — custom combobox */
  .searchable-wrap{ position:relative; z-index:10; }
  .searchable-wrap.is-open{ z-index:9999; }
  .help-form-custom .field.dd-open,
  .help-form-custom .grid-2.dd-open{ position:relative; z-index:9999; }
  .searchable-display{
    width:100%;
    font-family:'Jost', sans-serif;
    font-size:14.5px;
    color:var(--ink);
    background:#FCFAF2;
    border:1px solid var(--gold-line);
    border-radius:8px;
    padding:10px 36px 10px 14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    transition:border-color 0.25s ease, box-shadow 0.25s ease;
    position:relative;
    box-sizing:border-box;
    user-select:none;
  }
  .searchable-display::after{
    content:'';
    position:absolute;
    right:14px; top:50%; transform:translateY(-50%);
    width:0; height:0;
    border-left:5px solid transparent; border-right:5px solid transparent;
    border-top:5px solid var(--ink);
    opacity:0.4;
    transition:transform 0.2s ease;
    pointer-events:none;
  }
  .searchable-wrap.is-open .searchable-display::after{ transform:translateY(-20%) rotate(180deg); }
  .searchable-display.is-empty{ color:var(--ink); opacity:0.42; }
  .searchable-display:focus, .searchable-display:focus-within{
    border-color:var(--emerald);
    box-shadow:0 0 0 3px rgba(11,61,46,0.09);
    background:#fff;
  }
  .searchable-panel{
    display:none;
    position:absolute;
    top:calc(100% + 4px); left:0; right:0;
    background:#fff;
    border:1px solid var(--gold-line);
    border-radius:10px;
    box-shadow:0 12px 36px rgba(10,36,32,0.25);
    z-index:9999;
    overflow:hidden;
    max-height:280px;
    flex-direction:column;
  }
  .searchable-wrap.is-open .searchable-panel{ display:flex; }
  .searchable-panel-search{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-bottom:1px solid rgba(0,0,0,0.06);
    background:#FCFAF2;
    flex-shrink:0;
  }
  .searchable-panel-search i{ color:var(--emerald); opacity:0.4; font-size:13px; flex-shrink:0; }
  .searchable-panel-search input{
    flex:1;
    border:none;
    outline:none;
    font-family:'Jost', sans-serif;
    font-size:13px;
    color:var(--ink);
    background:transparent;
    padding:4px 0;
  }
  .searchable-panel-search input::placeholder{ color:var(--ink); opacity:0.35; }
  .searchable-panel-list{
    overflow-y:auto;
    margin:0;
    padding:4px 0;
    list-style:none;
  }
  .searchable-panel-list li{
    padding:9px 14px;
    font-size:13.5px;
    color:var(--ink);
    cursor:pointer;
    transition:background 0.15s ease;
    line-height:1.35;
  }
  .searchable-panel-list li:hover{ background:rgba(11,61,46,0.06); }
  .searchable-panel-list li.is-selected{ background:rgba(11,61,46,0.10); font-weight:600; }
  .searchable-panel-list li.is-placeholder{ color:var(--ink); opacity:0.35; font-style:italic; }
  .searchable-panel-list li.no-results{ color:var(--ink); opacity:0.35; cursor:default; font-style:italic; }
  .searchable-count{ font-size:11px; color:var(--emerald); opacity:0.6; padding:0 14px; }
  .searchable-wrap.is-disabled .searchable-display{ opacity:0.5; cursor:not-allowed; pointer-events:none; }

  /* geometric corner brackets that extend on focus */
  .bracket{
    position:absolute;
    width:11px; height:11px;
    border-color:var(--gold);
    opacity:0;
    transition:opacity 0.25s ease, width 0.25s ease, height 0.25s ease;
    pointer-events:none;
  }
  .bracket.bl{ left:-1px; bottom:-1px; border-left:2px solid; border-bottom:2px solid; border-radius:0 0 0 6px; }
  .bracket.tr{ right:-1px; top:-1px; border-right:2px solid; border-top:2px solid; border-radius:0 6px 0 0; }
  .input-wrap:focus-within .bracket{ opacity:1; width:16px; height:16px; }

  /* OTP verify panel */
  .otp-panel{
    background:var(--emerald-pale);
    border:1px solid rgba(11,61,46,0.16);
    border-radius:10px;
    padding:16px;
    position:relative;
    overflow:hidden;
  }
  .otp-panel::before{
    content:'';
    position:absolute;
    top:-30px; right:-30px;
    width:110px; height:110px;
    background:radial-gradient(circle, rgba(201,162,75,0.18), transparent 70%);
    animation:otpPulse 3.2s ease-in-out infinite;
  }
  @keyframes otpPulse{ 0%,100%{opacity:0.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.15);} }

  .otp-head{
    display:flex; align-items:center; gap:9px;
    font-size:13.5px; font-weight:600; color:var(--emerald-deep);
    margin-bottom:5px;
    position:relative; z-index:1;
  }
  .otp-head svg{ width:16px; height:16px; flex-shrink:0; }
  .otp-sub{
    font-size:12px; color:var(--emerald-deep); opacity:0.6; margin:0 0 14px;
    position:relative; z-index:1;
  }
  .otp-sub.is-verified {
      color: var(--emerald-deep);
      font-weight: 700;
      opacity: 0.9;
  }
  .otp-row{ display:flex; gap:10px; position:relative; z-index:1; }
  .otp-row input{
    flex:1;
    letter-spacing:0.3em;
    font-weight:500;
    text-align:center;
    background:#fff;
  }

  .help-form-custom button{ font-family:'Jost', sans-serif; cursor:pointer; border:none; }

  .btn-ghost{
    padding:0 18px;
    height:42px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    color:var(--emerald-deep);
    background:#fff;
    border:1px solid var(--emerald);
    white-space:nowrap;
    transition:background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  }
  .btn-ghost:hover{ background:var(--emerald); color:#fff; }
  .btn-ghost:active{ transform:scale(0.97); }

  .btn-solid{
    padding:0 20px;
    height:42px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    color:#fff;
    background:var(--emerald);
    white-space:nowrap;
    transition:background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  }
  .btn-solid:hover{ background:var(--emerald-deep); box-shadow:0 6px 16px -6px rgba(11,61,46,0.5); }
  .btn-solid:active{ transform:scale(0.97); }

  /* file upload */
  .file-drop{
    border:1.5px dashed var(--gold-line);
    border-radius:10px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:14px;
    background:rgba(201,162,75,0.045);
    transition:border-color 0.25s ease, background 0.25s ease;
    cursor:pointer;
    margin: 0;
  }
  .file-drop:hover{ border-color:var(--gold); background:rgba(201,162,75,0.09); }
  .file-icon{
    width:38px; height:38px;
    border-radius:8px;
    background:var(--clay-pale);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .file-icon svg{ width:18px; height:18px; }
  .file-copy p{ margin:0; }
  .file-copy .ft-1{ font-size:13.5px; font-weight:600; color:var(--emerald-deep); }
  .file-copy .ft-2{ font-size:11.5px; color:var(--ink); opacity:0.5; margin-top:2px; }
  .file-drop input[type=file]{ display:none; }

  .hint{ font-size:11.5px; color:var(--ink); opacity:0.45; margin:8px 0 0; line-height:1.5; }

  .submit-row{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:6px;
    padding-top:20px;
    border-top:1px dashed var(--gold-line);
  }

  .btn-submit{
    position:relative;
    padding:0 34px;
    height:50px;
    border-radius:9px;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:0.02em;
    color:#fff;
    background:linear-gradient(135deg, var(--emerald) 0%, var(--emerald-deep) 100%);
    display:inline-flex;
    align-items:center;
    gap:10px;
    overflow:hidden;
    transition:transform 0.15s ease, box-shadow 0.25s ease;
    box-shadow:0 10px 24px -10px rgba(11,61,46,0.55);
  }
  .btn-submit svg{ width:17px; height:17px; position:relative; z-index:1; transition:transform 0.3s ease; }
  .btn-submit span{ position:relative; z-index:1; }
  .btn-submit::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(120deg, transparent 30%, rgba(228,194,115,0.35) 50%, transparent 70%);
    transform:translateX(-120%);
    transition:transform 0.7s ease;
  }
  .btn-submit:hover::after{ transform:translateX(120%); }
  .btn-submit:hover svg{ transform:translateX(3px); }
  .btn-submit:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(11,61,46,0.6); }
  .btn-submit:active{ transform:translateY(0) scale(0.98); }
  .btn-submit:disabled{ opacity:0.6; cursor:not-allowed; }

  .submit-note{
    font-size:12px; color:var(--ink); opacity:0.5; line-height:1.5; margin:0;
  }

  @media (max-width:640px){
    .hd-wrap{ padding:90px 20px 80px; }
    .mihrab-inner{ padding:48px 26px 30px; }
    .form-card{ padding:30px 22px 28px; }
    .form-head{ flex-direction:column; }
    .mihrab { min-height: auto; max-width: 100%; }
    .mihrab h2 { font-size: 28px; }
    .tier:nth-child(2) { margin-right: 10px; }
    .tier:nth-child(3) { margin-right: 20px; }
  }