/* ═══════════════════════════════════════════════════════════════════════
   FIDA — CONTACT
   A 1:1 build of Figma frame "CONTACT" (1440 × 2828, id 81:119).
   Loaded AFTER main.css. Only what is new to this page lives here.

   This page inverts the palette: the hero and the footer are lilac with
   BLACK type, logo, hairlines and social glyphs, where every other page is
   black with lilac. That is why the wordmark and the social icons are
   exported flat black and drawn as masks — see main.css.
   ═══════════════════════════════════════════════════════════════════════ */

:root{ --stage-h:2828px; --field:#d9d9d9; }
.stage{background:var(--white)}

/* ── type new to this page ─────────────────────────────────────────────
   CONTACT uses its own sizes and line-heights — 48/62.4 rather than
   48/73.44, 15/16.55 rather than 15/22.95 — so these do not reuse main.css's
   classes even where the size matches.                                   */
.f-script69{font:400 69px/81.59px var(--ff-script)}   /* "Let`s begin…"      */
.f-h48c    {font:500 48px/62.4px var(--ff-display)}   /* hero line           */
.f-p16     {font:400 16px/17.66px var(--ff-display)}  /* intro paragraph     */
.f-i15l    {font:300 15px/16.55px var(--ff-sans)}     /* every form label    */
.f-i15m2   {font:500 15px/16.55px var(--ff-sans)}     /* "Have a questions?" */
.ed-64     {font:400 64px/83.2px var(--ff-script)}    /* "Meanningful"       */
.ls069{letter-spacing:.69px}
.ls03 {letter-spacing:.3px}
.ls06 {letter-spacing:.6px}
.f-script69 .in,.f-i15l .in{white-space:pre-wrap}

/* ── z-order · Figma children[0] paints first ─────────────────────────── */
.sec-body  {z-index:1}
.sec-hero  {z-index:2}
.sec-footer{z-index:3}

/* ── page hero · 1440 × 445 · #ddd2f0 + IMAGE @15% ─────────────────────
   imageTransform [[0.9897,0,0.0055],[0,0.1413,0.5477]] — a plain crop, no
   rotation, so it resolves to a background-size / position pair.        */
.sec-hero{background:var(--lilac);overflow:hidden}
.sec-hero i{
  position:absolute;inset:0;display:block;opacity:.15;
  background-image:var(--img-tex-create);background-repeat:no-repeat;
  background-size:101.04% 707.72%;background-position:-53.35% 63.83%;
}

/* the navbar here is FIXED in Figma (like HOME's) and sits on lilac */
.sec-nav{background:transparent;overflow:visible;color:var(--ink)}
.sec-nav .f-nav{color:#2d2d2d}
.sec-nav .f-nav.dark{color:var(--ink)}
.sec-nav .logo-nav{color:var(--ink)}
.sec-nav .hairline{background:var(--ink)}

/* ── body · 1440 × 2383 @ (0,445) · #000000 ───────────────────────────── */
.sec-body{background:var(--ink)}

/* Figma "Vector 6" / "Vector 7" — 1px lilac rules inside the intro block */
.rule{position:absolute;height:1px;background:currentColor}

/* the 257 × 232 ornamental star */
.big-star{
  position:absolute;display:block;
  background:url('../assets/img/big-star.svg') center/contain no-repeat;
}

/* ── the form ──────────────────────────────────────────────────────────
   Real inputs, styled to be exactly the Figma rectangles: 32px tall,
   #d9d9d9, 3px radius, no border. Exact to look at and actually usable. */
.field{
  position:absolute;display:block;box-sizing:border-box;
  background:var(--field);border:0;border-radius:3px;
  font:300 15px/16.55px var(--ff-sans);color:var(--ink);
  padding:0 10px;
}
.field:focus{outline:2px solid var(--lilac);outline-offset:1px}

/* The two "select" groups are drawn OPEN in the Figma — a closed row with a
   chevron, then the remaining options stacked below. Reproduced as real
   radios so the appearance is exact and the control still works.        */
.opt{position:absolute;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .bar{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--field);border-radius:3px;
  font:600 10px/11.04px var(--ff-sans);color:var(--ink);
}
.opt input:focus-visible + .bar{outline:2px solid var(--lilac);outline-offset:1px}
.opt input:checked + .bar{box-shadow:inset 0 0 0 1.5px var(--ink)}
.chevron{
  position:absolute;width:9px;height:7.79px;
  background:url('../assets/img/chevron.svg') center/contain no-repeat;
}

/* SUBMIT · 87 × 25, white, radius 3 */
.submit{
  position:absolute;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:0;border-radius:3px;cursor:pointer;
  font:italic 400 15px/16.55px var(--ff-name);color:var(--ink);
}

/* ── FOOTER — lilac with black type on this page only ─────────────────── */
.sec-footer{background:var(--lilac)}
.sec-footer .f-nav{color:var(--ink)}
.sec-footer .hairline{background:var(--ink)}
.sec-footer .soc{color:var(--ink)}
.sec-footer .built-by{color:var(--ink)}   /* lilac footer → black credit */

/* the required-field asterisk, red per Figma's character override */
.req{color:#ff0000}

/* ── phone · this page's own hero framing ─────────────────────────────────
   mobile.css switches the hero backdrop to `cover` so it stops being
   stretched, and frames it where SERVICES and PORTFOLIO want it. CONTACT
   carries a different picture at a different placement, so it sets its own.

   Hers: x-85..1165, y-1238..1467.6 of a 1250 x 2705.6 picture, against a
   hero band running 0..591. The artboard therefore sees 86.4% of its width
   from 6.8%, and 21.84% of its height from 45.76% — a visible centre of
   50.0% / 56.68%. The layer is turned 180deg, which mirrors the background's
   axes, so the position is written as the complement.

   `.sec.sec-hero` and not `.sec-hero`: this file is linked BEFORE mobile.css,
   so at equal specificity mobile.css's !important would win on order. The
   doubled class settles it regardless of link order. */
@media (max-width: 1023.98px){
  .stage .sec.sec-hero i{background-position:50% 43.32% !important}
}