.contact-page {
  --contact-gold: #d2ad55;
  --contact-gold-light: #efd68d;
  --contact-ink: #171913;
  --contact-panel: #20221c;
  min-height: 100vh;
  color: #f2e8d3;
  background: radial-gradient(circle at 18% 12%, rgba(207,172,86,.11), transparent 28%), radial-gradient(circle at 82% 76%, rgba(182,137,48,.08), transparent 31%), #11130f;
}
.contact-header { min-height:82px; color:#f1e6cd; background:rgba(14,16,13,.92); border-color:rgba(210,173,85,.23); backdrop-filter:blur(14px); }
.contact-header .brand-name { color:#f1e6cd; }
.contact-header .academy-symbol { color:var(--contact-gold-light); }
.contact-back { color:#e6d4ac; border-color:rgba(230,212,172,.38); }
.contact-back:hover { color:#161711; background:var(--contact-gold-light); border-color:var(--contact-gold-light); }
.contact-main { position:relative; overflow:hidden; padding:clamp(84px,9vw,140px) max(24px,calc((100vw - 1280px)/2)) clamp(90px,10vw,150px); }
.contact-main::before { content:'كوفي'; position:absolute; right:-55px; top:35px; color:rgba(221,185,97,.035); font:320px/1 KufiLegacy,serif; pointer-events:none; }
.contact-intro { position:relative; max-width:970px; margin:0 auto clamp(60px,7vw,95px); text-align:center; }
.contact-intro .eyebrow { justify-content:center; color:var(--contact-gold); }
.contact-intro h1 { margin:0; font:400 clamp(52px,7vw,104px)/.92 var(--display); letter-spacing:-.055em; text-wrap:balance; }
.contact-intro h1 em { color:var(--contact-gold-light); font-weight:400; }
.contact-intro>p:last-child { max-width:700px; margin:30px auto 0; color:rgba(239,228,202,.68); font-size:clamp(15px,1.3vw,18px); line-height:1.75; }
.contact-panel { position:relative; display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); max-width:1240px; margin:0 auto; overflow:hidden; border:1px solid rgba(210,173,85,.48); border-radius:28px 28px 58px 28px; background:linear-gradient(138deg,rgba(38,40,32,.98),rgba(24,26,21,.99)); box-shadow:0 34px 100px rgba(0,0,0,.36),inset 0 1px rgba(255,246,212,.05); }
.contact-panel::before { content:''; position:absolute; top:0; left:11%; width:180px; height:1px; background:linear-gradient(90deg,transparent,#f4d982,transparent); box-shadow:0 0 24px 4px rgba(234,196,94,.45); }
.contact-directory,.inquiry-form { padding:clamp(34px,4.3vw,64px); }
.contact-directory { border-right:1px solid rgba(210,173,85,.18); }
.contact-panel-index { margin:0 0 24px; color:#a98a43; font:700 9px/1 var(--sans); letter-spacing:.18em; }
.contact-directory h2 { margin:0; color:var(--contact-gold-light); font:400 clamp(34px,3.4vw,52px)/1 var(--display); letter-spacing:-.035em; }
.directory-intro { max-width:36ch; margin:22px 0 38px; color:rgba(240,229,203,.62); font-size:14px; line-height:1.75; }
.contact-list { display:grid; gap:24px; margin:0; }
.contact-list>div { min-width:0; }
.contact-list dt { display:flex; align-items:center; gap:13px; color:rgba(240,229,203,.48); font:700 8px/1.3 var(--sans); letter-spacing:.14em; }
.contact-list dd { margin:-10px 0 0 52px; }
.contact-list dd a { color:#f0d486; font-size:13px; font-weight:650; text-decoration-color:transparent; text-underline-offset:5px; overflow-wrap:anywhere; transition:color .2s,text-decoration-color .2s; }
.contact-list dd a:hover,.contact-list dd a:focus-visible { color:#fff1bd; text-decoration-color:currentColor; }
.contact-icon { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border:1px solid rgba(210,173,85,.42); border-radius:50%; color:var(--contact-gold); background:rgba(210,173,85,.07); }
.contact-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.35; }
.contact-note { display:flex; gap:10px; margin:42px 0 0; color:rgba(240,229,203,.42); font-size:11px; line-height:1.6; }
.contact-note span { flex:0 0 6px; width:6px; height:6px; margin-top:6px; border-radius:50%; background:var(--contact-gold); box-shadow:0 0 12px rgba(234,196,94,.65); }
.inquiry-form { display:grid; align-content:start; gap:22px; background:rgba(9,11,9,.19); }
.form-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.form-heading>p:last-child { margin:0; color:rgba(239,224,188,.46); font:700 9px/1 var(--sans); letter-spacing:.16em; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.inquiry-form label { display:grid; gap:9px; color:#d8c9a9; font-size:11px; font-weight:650; }
.inquiry-form input,.inquiry-form select,.inquiry-form textarea { width:100%; min-height:50px; padding:13px 15px; border:1px solid rgba(222,197,139,.23); border-radius:8px; outline:0; color:#f2e7cf; background:rgba(4,6,5,.54); font:14px/1.45 var(--sans); transition:border-color .2s,background .2s,box-shadow .2s; }
.inquiry-form textarea { min-height:152px; resize:vertical; }
.inquiry-form input::placeholder,.inquiry-form textarea::placeholder { color:rgba(239,227,199,.3); }
.inquiry-form select { appearance:auto; }
.inquiry-form select option { color:#171913; background:#f2e6cc; }
.inquiry-form input:hover,.inquiry-form select:hover,.inquiry-form textarea:hover { border-color:rgba(222,197,139,.44); }
.inquiry-form input:focus-visible,.inquiry-form select:focus-visible,.inquiry-form textarea:focus-visible { border-color:var(--contact-gold-light); box-shadow:0 0 0 3px rgba(210,173,85,.14),0 0 24px rgba(210,173,85,.08); }
.form-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; }
.form-footer p { max-width:42ch; margin:0; color:rgba(240,229,203,.38); font-size:10px; line-height:1.6; }
.form-footer button { display:inline-flex; align-items:center; justify-content:space-between; gap:36px; min-width:225px; min-height:52px; padding:12px 19px; border:1px solid #d4ae4f; border-radius:4px; color:#181911; background:linear-gradient(105deg,#f0d783,#ae7f08); box-shadow:0 12px 34px rgba(190,143,26,.2); font-size:12px; font-weight:800; letter-spacing:.035em; transition:transform .25s,box-shadow .25s,filter .25s; }
.form-footer button:hover { transform:translateY(-3px); filter:brightness(1.06); box-shadow:0 16px 42px rgba(190,143,26,.3); }
.form-footer button:focus-visible { outline:3px solid #fff0bd; outline-offset:4px; }
.form-status { min-height:18px; margin:-7px 0 0; color:#f0d486; font-size:11px; }
.contact-page .signature-strip { border-top:1px solid rgba(210,173,85,.18); }
@media(max-width:860px){.contact-panel{grid-template-columns:1fr;border-radius:24px 24px 44px 24px}.contact-directory{border-right:0;border-bottom:1px solid rgba(210,173,85,.18)}.contact-directory,.inquiry-form{padding:42px}.contact-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.contact-list dt{align-items:flex-start;flex-direction:column}.contact-list dd{margin:10px 0 0}}
@media(max-width:620px){.contact-header{padding-inline:16px}.contact-header .button{width:auto;min-height:44px;padding-inline:14px}.contact-main{padding:70px 16px 90px}.contact-main::before{right:-90px;font-size:230px}.contact-intro{margin-bottom:48px;text-align:left}.contact-intro .eyebrow{justify-content:flex-start}.contact-intro h1{font-size:clamp(46px,14vw,62px)}.contact-intro>p:last-child{margin-left:0;font-size:14px}.contact-directory,.inquiry-form{padding:30px 22px}.contact-list{grid-template-columns:1fr;gap:22px}.contact-list dt{flex-direction:row;align-items:center}.contact-list dd{margin:-10px 0 0 52px}.field-row,.form-footer{grid-template-columns:1fr}.form-footer button{width:100%}}
@media(prefers-reduced-motion:reduce){.contact-back,.contact-list a,.inquiry-form input,.inquiry-form select,.inquiry-form textarea,.form-footer button{transition:none}.form-footer button:hover{transform:none}}