/* ==========================================================================
   wf-contact-nq: the AI LAB contact page in the NoveQ contact layout (noveq.framer.website/contact,
   measured 2026-09-14): light ground, eyebrow, one large heading with a blue word, lead, a row of
   contact details, then one white card with an intro left and the grey form panel right.
   Only the look changed: the form fields, the lead endpoint, the Cal.com booking tab and WhatsApp
   are the same markup hooks wf-contact.js already drives. Source of truth: products/_wf-nav.
   ========================================================================== */

.nqc{--nq-ink:#0A0A0A;--nq-body:#4F4F4F;--nq-mute:#5F5F5F;--nq-faint:#A6A6A6;--nq-blue:#0274DE;--nq-ground:#F0F0F0;--nq-card:#FFFFFF;
  --nq-head:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,sans-serif;--nq-ui:Inter,"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  position:relative;background:var(--nq-ground);color:var(--nq-ink);font-family:var(--nq-head);-webkit-font-smoothing:antialiased;
  padding:140px 40px 120px}
.nqc *{box-sizing:border-box}
.nqc a{color:inherit;text-decoration:none}
/* zero-specificity reset, so the component margins below (lead, intro text, terms) are not undone */
:where(.nqc) :where(h1,h2,h3,h4,p){margin:0}
.nqc-in{max-width:1360px;margin:0 auto}

/* eyebrow: a 2px blue bar and a small grey label */
.nqc-eyebrow{display:flex;align-items:center;gap:6px;font-family:var(--nq-ui);font-size:14px;font-weight:500;line-height:14px;letter-spacing:-.03em;color:var(--nq-mute)}
.nqc-eyebrow::before{content:"";width:2px;height:14px;background:var(--nq-blue)}

.nqc-h1{margin-top:16px;font-size:clamp(40px,7.36vw,106px);font-weight:600;line-height:1;letter-spacing:-.04em;color:var(--nq-ink);text-wrap:balance;max-width:1300px}
.nqc-h1 .ac{color:var(--nq-blue)}
.nqc-lead{margin-top:44px;max-width:600px;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--nq-body)}

/* contact details: three columns and the social icons on the right */
.nqc-info{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,316px)) 1fr;column-gap:32px;align-items:end}
.nqc-info .c1 a{display:block;width:fit-content;color:var(--nq-ink);font-weight:500;letter-spacing:-.03em}
/* Two of the three contact actions were 21 and 24 CSS pixels tall: fine with a mouse, fiddly with a
   thumb. Each hit area is now 44px.
   NO negative margin. An earlier attempt used `padding:10px 0;margin:-10px 0` to keep the column at
   its old height. That let each area reach 10px past its layout box, and since the two links sit
   directly on top of one another the areas overlapped by 10px. The later element wins the hit test,
   so the bottom quarter of the phone number opened the mail client instead: measured 34 usable
   pixels of 44, on every width and in both languages. Overlapping targets are worse than the small
   target they replace, and WCAG 2.5.8 asks for enlarged areas that do not overlap.
   The honest cost is height: two 44px areas cannot stack in less than 88px, so this column grows
   from 48px to 88px and what follows it moves down. That is the price of the larger target.
   `flex`, never `inline-flex`. This selector is (0,3,0) and beats the `display:block` on
   `.nqc-info .c1 a` above, which is (0,2,1). An inline display pulled the phone number and the mail
   address onto one line with nothing between them, reading as one string. A block level flex
   container keeps each on its own row and centres the text inside the taller area; the
   `width:fit-content` from the rule above keeps the area as wide as the text and no wider. */
.nqc-info .c1 .wa,.nqc-info .c1 .mail{display:flex;align-items:center;min-height:44px;padding:11px 0;margin:0}
.nqc-info .c1 .wa{font-size:16px;line-height:1.4;font-variant-numeric:tabular-nums}
.nqc-info .c1 .mail{font-size:18px;line-height:1.4}
.nqc-info .c1 a:hover,.nqc-info .c1 a:focus-visible{color:var(--nq-blue)}
.nqc-info dt{font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--nq-ink)}
.nqc-info dd{margin:4px 0 0;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--nq-body)}
.nqc-info dl{margin:0}
.nqc-soc{display:flex;gap:8px;justify-self:end;align-self:end;padding-bottom:1px}
/* The third contact action on this page: the social icons were 18x18, below the 24x24 minimum of
   WCAG 2.5.8. The box grows to 24x24 while the drawn icon stays 18px, so nothing changes visually.
   The 8px gap keeps the areas apart, and the row is right aligned in a free column, so the extra
   18px of width has room. Not 44x44: three of those plus gaps would be 148px instead of 70px and
   would reshape the row. */
.nqc-soc a{display:grid;place-items:center;width:24px;height:24px;color:var(--nq-ink);transition:color .2s}
.nqc-soc a:hover{color:var(--nq-blue)}
.nqc-soc svg{width:18px;height:18px;display:block}

/* the card: white, 6px inner edge, intro left, grey form panel right */
.nqc-card{margin-top:32px;background:var(--nq-card);border-radius:20px;padding:6px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;
  transition:grid-template-columns .28s cubic-bezier(.2,.7,.2,1)}
.nqc-intro{padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-width:0}
.nqc-h2{font-size:32px;font-weight:600;line-height:1.3;letter-spacing:-.03em;color:var(--nq-ink);max-width:598px;text-wrap:balance}
.nqc-intro-p{margin-top:16px;max-width:520px;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-.02em;color:var(--nq-body)}
.nqc-quote{font-size:26px;font-weight:500;line-height:1.35;letter-spacing:-.03em;color:var(--nq-ink);max-width:560px;text-wrap:balance}
.nqc-person{margin-top:24px;display:flex;align-items:center;gap:10px}
.nqc-person img{width:43px;height:43px;border-radius:50%;object-fit:cover;flex:none;background:#e5e5e5}
.nqc-person b{display:block;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#181818}
.nqc-person span{display:block;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--nq-body)}
.nqc-call{margin-top:32px;display:inline-flex;align-items:center;gap:8px;height:46px;padding:8px 20px;border-radius:50px;background:var(--nq-ground);
  font-family:var(--nq-ui);font-size:15px;font-weight:600;line-height:15px;letter-spacing:-.01em;color:#181818;transition:background-color .2s}
.nqc-call:hover{background:#E6E6E6}
.nqc-call svg{width:16px;height:16px;flex:none}

.nqc .wfk-card{scroll-margin-top:96px;background:var(--nq-ground);border-radius:16px;padding:32px;min-width:0}

/* message or call: a quiet segmented control at the head of the panel */
.nqc .wfk-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 24px;border-radius:50px;background:#E4E4E4;isolation:isolate}
.nqc .wfk-tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border:0;border-radius:50px;background:none;cursor:pointer;
  font-family:var(--nq-ui);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--nq-mute);transition:color .25s}
.nqc .wfk-tab svg{width:15px;height:15px;flex:none}
.nqc .wfk-tab.is-on,.nqc .wfk-tab:hover{color:var(--nq-ink)}
.nqc .wfk-tab-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:50px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:transform .45s cubic-bezier(.6,.01,.05,.95)}
.nqc .wfk-tabs.is-call .wfk-tab-ind{transform:translateX(calc(100% + 4px))}
.nqc .wfk-pane[hidden]{display:none}

/* the form: same fields, the reference's labels and white fields */
.nqc .wfk-form{display:flex;flex-direction:column;gap:16px}
.nqc .wfk-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nqc .wfk-field label{display:block;margin-bottom:10px;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--nq-body)}
.nqc .wfk-field label i{font-style:normal;color:var(--nq-blue);margin-left:2px}
.nqc .wfk-field input,.nqc .wfk-field textarea{display:block;width:100%;background:#fff;border:1px solid transparent;border-radius:20px;padding:15px 16px;
  font-family:var(--nq-ui);font-size:16px;line-height:19px;letter-spacing:-.02em;color:var(--nq-ink);outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.nqc .wfk-field textarea{min-height:160px;resize:vertical}
.nqc .wfk-field input::placeholder,.nqc .wfk-field textarea::placeholder{color:var(--nq-faint)}
html .nqc .wfk-field input:focus,html .nqc .wfk-field textarea:focus,html .nqc .wfk-field input:focus-visible,html .nqc .wfk-field textarea:focus-visible{border-color:rgba(2,116,222,.55);box-shadow:0 0 0 3px rgba(2,116,222,.14);outline:none}
.nqc .wfk-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:var(--nq-ink);caret-color:var(--nq-ink)}
.nqc .wfk-field input[aria-invalid="true"],.nqc .wfk-field textarea[aria-invalid="true"]{border-color:rgba(214,64,40,.6)}
.nqc .wfk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nqc .wfk-submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:12px 24px;border:0;border-radius:50px;cursor:pointer;background:var(--nq-blue);color:#fff;
  font-family:var(--nq-ui);font-size:17px;font-weight:600;line-height:17px;letter-spacing:-.01em;transition:background-color .2s,transform .2s}
.nqc .wfk-submit:hover{background:#0266C4}
.nqc .wfk-submit svg{width:12px;height:12px}
.nqc .wfk-submit[disabled]{opacity:.6;cursor:default}
.nqc .wfk-msg{font-size:14px;line-height:1.5;color:var(--nq-body)}
.nqc .wfk-msg:empty{display:none}
.nqc .wfk-msg.bad{color:#B43A22}
.nqc-terms{margin-top:16px;text-align:center;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--nq-body)}
.nqc-terms a{color:var(--nq-ink);text-decoration:underline;text-decoration-color:rgba(10,10,10,.25);text-underline-offset:3px}
.nqc .wfk-done{display:none;padding:40px 24px;text-align:center;background:#fff;border-radius:20px}
.nqc .wfk-card.is-done .wfk-form,.nqc .wfk-card.is-done .nqc-terms{display:none}
.nqc .wfk-card.is-done .wfk-done{display:block}
.nqc .wfk-done h4{margin:0 0 8px;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--nq-ink)}
.nqc .wfk-done p{font-size:14px;line-height:1.55;color:var(--nq-body)}
.nqc .wfk-done .wfk-ref{margin-top:14px;font-size:13px;letter-spacing:.02em;opacity:.72;font-variant-numeric:tabular-nums}

/* the booking tab: Cal.com draws its own frame; below ~820px of width it stacks, so the panel widens while it is open */
.nqc .wfk-cal-h{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0 0 2px}
.nqc .wfk-cal-meta{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--nq-body)}
.nqc .wfk-cal{min-height:0;border-radius:14px;overflow:hidden}
.nqc .wfk-cal.is-live{min-height:520px}
.nqc .wfk-cal.is-dead{display:none}
.nqc .wfk-cal-fb{margin-top:4px}
.nqc .wfk-cal-fb h3{margin:0 0 6px;font-size:17px;font-weight:600}
.nqc .wfk-cal-fb p{margin:0 0 14px;font-size:14px;line-height:21px;color:var(--nq-body)}
.nqc .wfk-cal-fb-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nqc .wfk-cal-fb-acts .wfk-cal-btn{width:auto;height:44px}
.nqc .wfk-cal-alt{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:50px;border:1px solid rgba(10,10,10,.2);background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer}
@media (min-width:1024px){.nqc.is-booking .nqc-card{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}}

.nqc a:focus-visible,.nqc button:focus-visible{outline:2px solid var(--nq-blue);outline-offset:3px;border-radius:6px}
.nqc .wfk-tab:focus-visible{outline-offset:-3px;border-radius:50px}
@media (prefers-reduced-motion:reduce){.nqc-card,.nqc .wfk-tab-ind{transition:none}}

/* tablet and phone: the reference's stacked layout */
@media (max-width:1023px){
  .nqc{padding:120px 24px 96px}
  .nqc-info{grid-template-columns:1fr 1fr;row-gap:24px}
  .nqc-soc{justify-self:start;grid-column:1/-1;grid-row:2}
  .nqc-card{grid-template-columns:1fr;gap:0}
  .nqc-intro{gap:40px}
}
@media (max-width:767px){
  .nqc{padding:100px 12px 80px}
  .nqc-eyebrow{font-size:13px;line-height:13px}
  .nqc-h1{margin-top:16px;font-size:clamp(34px,11.3vw,44px)}
  .nqc-lead{margin-top:28px;font-size:15px}
  .nqc-info{margin-top:30px;grid-template-columns:1fr;row-gap:22px}
  .nqc-info .c1 .wa{font-size:15px}.nqc-info .c1 .mail{font-size:17px}
  .nqc-info dt,.nqc-info dd{font-size:13px}
  .nqc-soc{grid-row:auto;grid-column:auto;order:2}
  .nqc-info .c1{order:1}.nqc-info .c2{order:3}.nqc-info .c3{order:4}
  .nqc-card{margin-top:32px}
  .nqc-intro{padding:16px;gap:36px}
  .nqc-h2{font-size:28px}
  .nqc-quote{font-size:22px}
  .nqc .wfk-card{margin:0;padding:24px}
  .nqc .wfk-row{grid-template-columns:1fr}
  .nqc .wfk-field label{font-size:13px}
  .nqc-terms{font-size:13px}
  .nqc .wfk-cal.is-live{min-height:560px}
}