/* ============================================================
   MCF CONTACT PAGE (2026-10-27, Alicia: "contact page is fine"), drawn by
   templates/mcf-contact.php behind the `mcf_contact` switch. MCE's approved
   Contact design (mce-child custom.css .ctpage, 2026-10-17) with MCF's words:
   a photo hero with a short headline, ONE card floating over its edge (the
   form beside the direct details and "what happens next"), three proof lines,
   a closing band.
   The look is MCE's live Contact page as visitors see it, measured 2026-10-27
   at 1440, 900 and 390 (title 64 / 700, form heading 28, side headings 19,
   text 17), written out here so MCF draws it whatever loads around it.
   Its own tokens (--ct-*), read by this sheet alone: nothing here reaches
   another page, and no other page's token reaches this one. Every rule is
   scoped to #edWrap.mcfct, which only the contact template prints.
   Narrow screens SCALE a Global number with a named multiplier, never replace
   it. The layout follows #edWrap's width (container "ct"), so the panel's
   iPad and Phone buttons show the real iPad and phone layouts.
   ============================================================ */
/* Roboto Flex, served from the theme (the same file chrome.css declares), so the page draws in it even with the theme header off. */
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../fonts/roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../fonts/roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* text sizes */
  --ct-h1:64px;          /* the headline (desktop; 50 iPad, 40 phone by --ct-h1-mul) */
  --ct-h1-w:700;         /* its weight (unitless) */
  --ct-eye:12.5px;       /* "Contact Mission Critical Forensics" */
  --ct-lead:20px;        /* the intro under the headline (18 on phones by --ct-lead-mul) */
  --ct-h2:28px;          /* "Submit an assignment" */
  --ct-sub:15.5px;       /* the line under it */
  --ct-label:13.5px;     /* the field labels */
  --ct-field:16px;       /* what is typed in a field */
  --ct-check:14.5px;     /* the two consent lines */
  --ct-btn-fs:16px;      /* Send message */
  --ct-h3:19px;          /* "Prefer to reach us directly?", "What happens next" */
  --ct-key:12px;         /* Email / Telephone / Office */
  --ct-detail:16px;      /* the address, number and email */
  --ct-step:15px;        /* the three next steps */
  --ct-fx:14.5px;        /* the line to Mission Critical Engineers */
  --ct-proof:19px;       /* the three proof lines */
  --ct-band-h:26px;      /* the closing headline */
  --ct-body:17px;        /* the closing line */
  /* colours */
  --ct-ink:#1C244B;      /* labels, side headings, details, proof lines, the closing button */
  --ct-head:#073579;     /* "Submit an assignment" and the closing headline */
  --ct-text:#324A6D;     /* text */
  --ct-eyec:#D9A63C;     /* the eyebrow, the proof rules, a field in focus */
  --ct-gold:#815C00;     /* Email / Telephone / Office */
  --ct-link:#336DC2;     /* the link to Mission Critical Engineers, a detail on hover */
  --ct-hero:#1C244B;     /* behind the photo */
  --ct-lead-c:#DCE3F2;   /* the intro on the photo */
  --ct-btn:#5186F7;      /* Send message */
  --ct-btn-txt:#FFFFFF;  /* its text */
  --ct-side:#F4F6FA;     /* the details panel */
  --ct-line:#E2E6EC;     /* outlines and the rule above the last line */
  --ct-mute:#6B7690;     /* "We reply within one business day." */
  --ct-bg:#FFFFFF;       /* the page */
  /* layout */
  --ct-wrap:1180px;      /* the page, side padding included */
  --ct-hero-h:620px;     /* the photo band (desktop) */
  --ct-overlap:150px;    /* how far the card rises over the photo (90 on phones by --ct-overlap-mul) */
  --ct-radius:20px;      /* the card's and the band's corners */
  --ct-proof-gap:28px    /* between the proof lines */
}

/* narrow-screen multipliers and side padding (not panel controls); set on the sections, which a container query can style */
#edWrap.mcfct > *{--ct-h1-mul:1;--ct-lead-mul:1;--ct-overlap-mul:1;--ct-side-pad:10px}
@container ct (max-width:1200px){#edWrap.mcfct > *{--ct-side-pad:30px}}
@container ct (max-width:1024px){#edWrap.mcfct > *{--ct-h1-mul:.78125}}
@container ct (max-width:860px){#edWrap.mcfct > *{--ct-h1-mul:.625;--ct-lead-mul:.9;--ct-overlap-mul:.6}}
@container ct (max-width:560px){#edWrap.mcfct > *{--ct-side-pad:20px}}

/* base: Elementor's kit and the parent theme's reset style bare tags site-wide, so every part sets what it draws */
#edWrap.mcfct{container:ct / inline-size;background:var(--ct-bg);color:var(--ct-text);font-family:var(--font,"Roboto Flex",system-ui,-apple-system,"Segoe UI",Arial,sans-serif);font-size:var(--ct-body);line-height:1.72;-webkit-font-smoothing:antialiased;margin:0;padding:0}
#edWrap.mcfct *,#edWrap.mcfct *::before,#edWrap.mcfct *::after{box-sizing:border-box}
#edWrap.mcfct :is(h1,h2,h3,p,ul,ol,li,section,div,a,label,small,strong){font-family:inherit;text-transform:none}
#edWrap.mcfct :is(h1,h2,h3,p,ul,ol,li,section){margin:0;padding:0}
#edWrap.mcfct :is(h1,h2,h3){letter-spacing:normal}
#edWrap.mcfct a{text-decoration:none;background:none}
#edWrap.mcfct .wrap{width:100%;max-width:var(--ct-wrap);margin:0 auto;padding:0 var(--ct-side-pad)}

/* hero */
@keyframes mcfCtFade{from{opacity:0}to{opacity:1}}
#edWrap.mcfct .cthero{position:relative;min-height:var(--ct-hero-h);display:flex;align-items:center;color:#fff;background:var(--ct-hero);overflow:hidden}
#edWrap.mcfct .cthero-media{position:absolute;inset:0;margin:0}
#edWrap.mcfct .cthero-media img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 45%;display:block}
#edWrap.mcfct .cthero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,22,52,.80) 0%,rgba(16,22,52,.55) 48%,rgba(16,22,52,.12) 100%)}
#edWrap.mcfct .cthero-in{position:relative;z-index:1;flex:1 1 100%;padding:96px var(--ct-side-pad) calc(var(--ct-overlap) * var(--ct-overlap-mul) + 50px)}
#edWrap.mcfct .cteye{margin:0 0 18px;font-size:var(--ct-eye);line-height:1.72;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ct-eyec)}
#edWrap.mcfct .cthero h1{margin:0;color:#fff;font-size:calc(var(--ct-h1) * var(--ct-h1-mul));font-weight:var(--ct-h1-w);line-height:1.1;letter-spacing:-.015em;max-width:13ch;text-align:left;animation:mcfCtFade 1.4s ease-out both}
@media(prefers-reduced-motion:reduce){#edWrap.mcfct .cthero h1{animation:none}}
#edWrap.mcfct .ctlead{margin:24px 0 0;font-size:calc(var(--ct-lead) * var(--ct-lead-mul));font-weight:300;line-height:1.5;max-width:52ch;color:var(--ct-lead-c)}
#edWrap.mcfct .ctlead a{font-weight:500;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;transition:text-decoration-color .15s}
#edWrap.mcfct .ctlead a:hover{color:#fff;text-decoration-color:var(--ct-eyec)}

/* the card */
#edWrap.mcfct .ctcardsec .wrap{position:relative;z-index:2}
#edWrap.mcfct .ctcard{margin-top:calc(var(--ct-overlap) * var(--ct-overlap-mul) * -1);background:#fff;border-radius:var(--ct-radius);box-shadow:0 36px 90px rgba(16,22,52,.22),0 2px 6px rgba(16,22,52,.06);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);overflow:hidden}
#edWrap.mcfct .ctform{padding:56px 56px 52px}
#edWrap.mcfct .ctform h2{margin:0;font-size:var(--ct-h2);font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--ct-head)}
#edWrap.mcfct .ctsub{margin:8px 0 32px;font-size:var(--ct-sub);line-height:1.72}
#edWrap.mcfct .ctform form{display:grid;gap:18px;margin:0}
#edWrap.mcfct .ctform form[hidden]{display:none}
#edWrap.mcfct .ctform .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#edWrap.mcfct .ctform .ff{display:block;margin:0}
#edWrap.mcfct .ctform .ff>span{display:block;font-size:var(--ct-label);line-height:1;font-weight:600;color:var(--ct-ink);margin-bottom:7px;letter-spacing:.01em}
#edWrap.mcfct .ctform input:not([type=checkbox]),#edWrap.mcfct .ctform select,#edWrap.mcfct .ctform textarea{box-sizing:border-box;width:100%;min-height:50px;margin:0;padding:13px 16px;font:inherit;font-size:var(--ct-field);line-height:1;color:var(--ct-ink);background:#fff;border:1px solid #CBD3DF;border-radius:10px;box-shadow:none;transition:border-color .15s,box-shadow .15s}
#edWrap.mcfct .ctform select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231C244B' stroke-width='1.8'/%3E%3C/svg%3E") right 16px center no-repeat;padding-right:40px}
#edWrap.mcfct .ctform textarea{min-height:132px;line-height:1.5;resize:vertical}
#edWrap.mcfct .ctform :is(input,select,textarea):focus-visible{outline:0;border-color:var(--ct-eyec);box-shadow:0 0 0 3px rgba(217,166,60,.22)}
#edWrap.mcfct .ctform .mcff-ck{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:var(--ct-check);line-height:1.5;color:var(--ct-text);font-weight:400}
#edWrap.mcfct .ctform .mcff-ck input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--ct-btn)}
#edWrap.mcfct .ctform .mcff-ck a{color:var(--ct-link)}
#edWrap.mcfct .ctform .mcff-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#edWrap.mcfct .ctform .mcff-msg{margin:0;font-size:var(--ct-sub);color:#A12A2A}
#edWrap.mcfct .ctform .mcff-msg:empty{display:none}
#edWrap.mcfct .ctsend{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
#edWrap.mcfct .ctsend small{font-size:13.5px;color:var(--ct-mute)}
/* Buttons: blue fill, white text; hover inverts to transparent with blue text and a hairline outline (the house button) */
#edWrap.mcfct .btn{display:inline-block;font-weight:500;border-radius:10px;cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s}
#edWrap.mcfct .ctform .btn{padding:0 32px;min-height:48px;line-height:46px;font:inherit;font-weight:500;font-size:var(--ct-btn-fs);background:var(--ct-btn);color:var(--ct-btn-txt);border:1px solid var(--ct-btn)}
#edWrap.mcfct .ctform .btn:hover{background:transparent;color:var(--ct-btn);border-color:var(--ct-btn)}
#edWrap.mcfct .ctform .btn:disabled{opacity:.6;cursor:default}
#edWrap.mcfct .ctfine{margin:0;font-size:var(--ct-sub)}
#edWrap.mcfct .mcff-ct-done{margin-top:24px;padding:18px 20px;background:#F1F3F6;border-left:5px solid var(--ct-eyec)}
#edWrap.mcfct .mcff-ct-done[hidden]{display:none}
#edWrap.mcfct .mcff-ct-done p{margin:0}

/* the details panel */
#edWrap.mcfct .ctside{background:var(--ct-side);padding:56px 44px;display:flex;flex-direction:column;gap:36px}
#edWrap.mcfct .ctside h3{margin:0 0 18px;font-size:var(--ct-h3);font-weight:600;line-height:1.3;color:var(--ct-ink)}
#edWrap.mcfct .ctlist{list-style:none;margin:0;padding:0;display:grid;gap:18px}
#edWrap.mcfct .ctlist li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;margin:0;padding:0}
#edWrap.mcfct .ctlist .ic{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--ct-line);display:grid;place-items:center;color:var(--ct-ink)}
#edWrap.mcfct .ctlist .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#edWrap.mcfct .ctlist .tx{display:block;min-width:0}
#edWrap.mcfct .ctlist .k{display:block;font-size:var(--ct-key);letter-spacing:.12em;text-transform:uppercase;color:var(--ct-gold);font-weight:600;margin-bottom:2px;line-height:1.72}
#edWrap.mcfct .ctlist a{display:block;color:var(--ct-ink);font-size:var(--ct-detail);line-height:1.45;font-weight:500;text-decoration:none;overflow-wrap:anywhere}
#edWrap.mcfct .ctlist a:hover{color:var(--ct-link)}
#edWrap.mcfct .ctsteps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
#edWrap.mcfct .ctsteps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;margin:0;padding:0;font-size:var(--ct-step);line-height:1.5;color:var(--ct-text)}
#edWrap.mcfct .ctsteps li::before{counter-increment:s;content:counter(s);width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--ct-line);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ct-ink)}
#edWrap.mcfct .ctfx{margin:auto 0 0;padding-top:22px;border-top:1px solid var(--ct-line);font-size:var(--ct-fx);line-height:1.55;color:var(--ct-text)}
#edWrap.mcfct .ctfx a{color:var(--ct-link)}

/* proof */
#edWrap.mcfct .ctproof{padding:88px 0 40px;margin:0}
#edWrap.mcfct .ctproof-in{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ct-proof-gap)}
#edWrap.mcfct .ctproof-in li{margin:0;padding:0 28px;border-left:2px solid var(--ct-eyec);color:var(--ct-ink);font-size:var(--ct-proof);font-weight:600;line-height:1.3}

/* closing band */
#edWrap.mcfct .ctband{padding:64px 0 96px;margin:0}
#edWrap.mcfct .ctband-in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:40px 48px;border:1px solid var(--ct-line);border-radius:var(--ct-radius);background:linear-gradient(180deg,#fff,#F6F8FB)}
#edWrap.mcfct .ctband h2{margin:0;font-size:var(--ct-band-h);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--ct-head)}
#edWrap.mcfct .ctband p{margin:10px 0 0;font-size:var(--ct-body);line-height:1.72;color:var(--ct-text)}
#edWrap.mcfct .ctband .btn-o{font-size:15px;line-height:1.72;border:1px solid var(--ct-ink);color:var(--ct-ink);background:transparent;padding:13px 26px;border-radius:10px}
#edWrap.mcfct .ctband .btn-o:hover{background:var(--ct-ink);color:#fff;border-color:var(--ct-ink)}

@container ct (max-width:1024px){#edWrap.mcfct .ctform{padding:40px 36px}#edWrap.mcfct .ctside{padding:40px 32px}}
@container ct (max-width:860px){
  #edWrap.mcfct .cthero{min-height:0}
  #edWrap.mcfct .cthero-in{padding:72px var(--ct-side-pad) calc(var(--ct-overlap) * var(--ct-overlap-mul) + 60px)}
  #edWrap.mcfct .ctcard{grid-template-columns:1fr;border-radius:calc(var(--ct-radius) * .8)} /* 16 on MCE's phone layout: scaled, so her number still moves it */
  #edWrap.mcfct .ctform .frow{grid-template-columns:1fr}
  #edWrap.mcfct .ctform{padding:30px 22px}
  #edWrap.mcfct .ctside{padding:30px 22px;gap:28px}
  #edWrap.mcfct .ctproof{padding:56px 0 8px}
  #edWrap.mcfct .ctproof-in{grid-template-columns:1fr;gap:22px}
  #edWrap.mcfct .ctband{padding:48px 0 72px}
  #edWrap.mcfct .ctband-in{grid-template-columns:1fr;padding:28px 22px}
}
@container ct (max-width:560px){#edWrap.mcfct .ctform .btn{width:100%}#edWrap.mcfct .ctsend{gap:12px}}