/* Contact page companion to code.tabitha.dev | blue / teal visual system.
   Changes presentation only. EmailJS request flow and field IDs are preserved. */
:root {
  --bg:#f4f9fd;
  --bg-soft:#eaf4fa;
  --surface:rgba(255,255,255,.96);
  --surface-solid:#ffffff;
  --surface-muted:#f7fbfe;
  --text:#16304d;
  --heading:#081b38;
  --muted:#455b74;
  --muted-2:#526982;
  --border:rgba(25,68,111,.17);
  --border-strong:rgba(19,83,139,.36);
  --primary:#1355bb;
  --primary-2:#087d9b;
  --accent:#087765;
  --success:#087765;
  --danger:#b42318;
  --focus:0 0 0 4px rgba(13,125,155,.20);
  --shadow-lg:0 24px 68px rgba(18,53,93,.13);
  --shadow-md:0 18px 42px rgba(18,53,93,.10);
  --shadow-sm:0 8px 24px rgba(18,53,93,.075);
  color-scheme:light;
}
html.dark {
  --bg:#081426;
  --bg-soft:#101f34;
  --surface:rgba(16,32,53,.95);
  --surface-solid:#102139;
  --surface-muted:#152940;
  --text:#e3f0ff;
  --heading:#fff;
  --muted:#bed2e7;
  --muted-2:#adc4db;
  --border:rgba(142,196,220,.25);
  --border-strong:rgba(142,215,228,.46);
  --primary:#72baff;
  --primary-2:#65dbcf;
  --accent:#71e4c8;
  --success:#71e4c8;
  --danger:#ff9e91;
  --focus:0 0 0 4px rgba(107,221,213,.23);
  --shadow-lg:0 25px 65px rgba(0,0,0,.34);
  --shadow-md:0 16px 44px rgba(0,0,0,.28);
  --shadow-sm:0 10px 25px rgba(0,0,0,.22);
  color-scheme:dark;
}
body {
  background:radial-gradient(ellipse 37rem 30rem at 6% 8%,rgba(64,164,221,.12),transparent 70%),
             radial-gradient(ellipse 35rem 27rem at 97% 12%,rgba(31,166,147,.11),transparent 74%),
             linear-gradient(160deg,var(--bg),var(--bg-soft));
}
body::before {opacity:.16;background-size:76px 76px;}
body::after {opacity:.025;}
.page {width:min(100% - 2rem,1190px);padding-top:max(1.1rem,env(safe-area-inset-top));}
.topbar {min-height:76px;padding:.65rem .85rem;margin-bottom:clamp(1.15rem,3vw,2rem);border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm);}
.topbar-actions{display:flex;align-items:center;gap:.55rem;}
.brand-mark {width:46px;height:46px;border-radius:13px;overflow:hidden;background:#111a30;border:1px solid rgba(112,196,220,.37);box-shadow:0 6px 17px rgba(8,30,54,.15);}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block;}
.brand-text small{color:var(--muted);font-size:.75rem;}
.topbar-home{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem .95rem;background:var(--surface-solid);border:1px solid var(--border);border-radius:999px;color:var(--heading);font-size:.87rem;font-weight:800;}
.topbar-home:hover,.topbar-home:focus-visible{background:var(--bg-soft);border-color:var(--border-strong);}
.topbar-home i{font-size:.9rem;color:var(--primary);}
.icon-button{box-shadow:none;background:var(--surface-solid);min-width:46px;min-height:46px;}
.icon-button:hover,.icon-button:focus-visible{transform:none;border-color:var(--border-strong);}
.panel {background:var(--surface);border-radius:27px;box-shadow:var(--shadow-md);backdrop-filter:none;-webkit-backdrop-filter:none;}
.panel::before {background:linear-gradient(135deg,rgba(80,173,209,.055),transparent 42%,rgba(51,167,138,.05));}
html.dark .panel::before {background:linear-gradient(135deg,rgba(51,121,169,.12),transparent 55%,rgba(19,139,119,.07));}
.profile-panel {border-top:3px solid var(--primary);}
.contact-panel {border-top:3px solid var(--accent);}
.panel-content{padding:clamp(1rem,2.2vw,1.55rem);}
.portrait-card {border-radius:21px;border-color:var(--border);background:var(--surface-muted);box-shadow:none;}
.portrait {border-radius:17px;}
.eyebrow {color:var(--primary);font-size:.79rem;letter-spacing:.09em;}
.profile-copy h2 {font-size:clamp(1.85rem,3.8vw,2.45rem);line-height:1.12;}
.role-line {color:var(--primary);font-weight:800;}
.lead{color:var(--text);line-height:1.6;}
.tag,.proof,.contact-row,.quick-action,.note-card {background:var(--surface-muted);border-color:var(--border);}
.tag{font-size:.82rem;padding:.52rem .7rem;color:var(--text);}
.proof strong{font-size:1.03rem;}
.proof span,.status-card span,.quick-action span,.note-card p{color:var(--muted);font-size:.82rem;line-height:1.45;}
.contact-row,.quick-action{min-height:50px;}
.contact-row:hover,.quick-action:hover,.contact-row:focus-visible,.quick-action:focus-visible{transform:none;box-shadow:var(--shadow-sm);}
.contact-row i,.quick-action i,.note-card i{background:rgba(35,126,178,.095);color:var(--primary);}
h1{font-size:clamp(2.7rem,5.7vw,4.65rem);line-height:1.08;max-width:16ch;letter-spacing:-.055em;}
.gradient-text{background:linear-gradient(104deg,#1a59bc,#087e99 55%,#087765);-webkit-background-clip:text;background-clip:text;color:transparent;}
html.dark .gradient-text{background:linear-gradient(104deg,#8dc6ff,#70d8f2 58%,#75e4c9);-webkit-background-clip:text;background-clip:text;}
.response-note{font-size:.87rem;line-height:1.45;max-width:260px;background:var(--surface-muted);border-color:var(--border);font-weight:750;white-space:normal;}
.response-note i{color:var(--accent);}
.form-card{background:var(--surface-solid);border-radius:22px;box-shadow:0 8px 28px rgba(23,65,101,.055);}
label{font-size:.82rem;letter-spacing:.055em;color:var(--heading);}
input,textarea,select{border-radius:13px;background:var(--surface-muted);border-color:var(--border);color:var(--heading);}
input::placeholder,textarea::placeholder{color:var(--muted-2);}
input:focus,textarea:focus,select:focus{box-shadow:var(--focus);border-color:var(--primary);background:var(--surface-solid);}
.field-hint,.error{font-size:.85rem;line-height:1.45;font-weight:650;}
.button{background:linear-gradient(105deg,#1457bf 12%,#0c68b0 65%,#08786f);box-shadow:0 13px 30px rgba(17,92,171,.18);min-height:52px;}
.button:hover,.button:focus-visible{transform:none;box-shadow:0 16px 34px rgba(17,92,171,.22);}
html.dark .button{background:linear-gradient(105deg,#90cbff,#68ddcb);color:#06182c;}
html.dark .button:hover,html.dark .button:focus-visible{background:linear-gradient(105deg,#a6d8ff,#85ecd7);}
.status-area{font-size:.92rem;line-height:1.5;}
.request-clarifier{margin-top:.65rem;font-size:.88rem;color:var(--muted);max-width:65ch;line-height:1.5;}
footer{font-size:.88rem;letter-spacing:0;line-height:1.5;padding:1.3rem 1rem 1.2rem;margin-top:1.5rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);}
.footer-back{color:var(--primary);text-decoration:underline;text-underline-offset:.2em;font-weight:800;}
a:focus-visible,button:focus-visible{outline:3px solid var(--primary-2)!important;outline-offset:3px;}
@media (min-width:1040px){
  .shell{grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr);}
  .profile-panel{position:sticky;top:1rem;}
  .portrait-card{grid-template-columns:112px minmax(0,1fr);}
  .response-note{max-width:210px;}
}
@media (min-width:721px) and (max-width:1039px){
  .profile-panel .panel-content{grid-template-columns:minmax(190px,.63fr) minmax(0,1.37fr);}
}
@media(max-width:720px){
 .page{width:min(100% - 1rem,1190px);}
 .topbar{border-radius:17px;min-height:68px;padding:.55rem .6rem;}
 .topbar-home{padding:.55rem .75rem;}
 .topbar-home span{display:none;}
 .topbar-home i{font-size:1rem;}
 h1{font-size:clamp(2.5rem,10.5vw,4.15rem);}
 .response-note{width:100%;max-width:none;}
 .form-card{border-radius:18px;}
 .panel{border-radius:20px;}
 .proof-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:480px){
 .proof-grid{grid-template-columns:1fr;}
 .proof{padding:.75rem .9rem;}
 .proof strong,.proof span{display:inline;}
 .proof span{margin-left:.45rem;}
 .portrait-card{grid-template-columns:90px minmax(0,1fr);}
 .portrait{border-radius:14px;}
 .brand-mark{width:42px;height:42px;}
 .brand-text span{font-size:.93rem;}
 .tag{font-size:.8rem;}
 footer{font-size:.82rem;}
}
@media(max-width:345px){
 .brand-text small{display:none;}
 .portrait-card{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}