/* ============================================================
   تبي؟ / Tapai — contact.html
   Page-specific sections only. Everything shared lives in core.css.
   Logical properties throughout. letter-spacing is never set.

   Ground plan (60/20/10/5/5): header, hero, the request section and
   the closing band are all ink/deep — dark carries the page. Paper is
   used for routes and FAQ, and for ONE object inside the dark request
   section: the request sheet itself.

   Why the sheet is light. Round one put dark fields on the dark
   ground; a field ended up 1.5:1 against its own surface and the form
   was, in practice, invisible. Inputs are the one place on this page
   where a visitor must see an affordance before they understand it,
   so they get the brightest surface in the palette and a 4.4:1 edge.
   The message preview — output, not input — takes the dark side, so
   the section still reads ink and the two halves are never confused.

   Layout rule for this page: nothing is pushed to a container edge by
   an auto margin or space-between. A control belongs beside the thing
   it operates; slack collects at the end of a row, never inside it.
   ============================================================ */

/* sticky-header offset for the in-page jump links */
#routes,#request,#faq{scroll-margin-block-start:96px}

/* Repair, not a redefinition: the shared .nav-toggle <svg> carries no .icon
   class, so the stroke-only #i-menu / #i-close symbols paint as fill:black
   with zero area — the mobile menu button is invisible below 900px.
   Paint properties only; no layout, no geometry, nothing else touched. */
.nav-toggle svg{fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------
   Contrast floor, page-wide.
   core's .eyebrow is teal (2.7:1 on paper). Teal keeps its spec job —
   icon strokes and active states — but never carries small text here.
   ------------------------------------------------------------ */
.surface-paper .eyebrow,
.route-sm-kicker,
.faq-n{color:var(--deep)}

/* Arabic body floor — core's .lead ships at 1.7, spec asks 1.75–1.85 */
.page-lead,
.sec-lead,
.cta-text .lead,
.footer-brand .lead{line-height:1.8}

/* the float duplicates a real CTA, so it tucks away whenever one is on
   screen (see the observer at the foot of the page) and can never cover
   the button it copies. Colour is core's — this page does not restyle it. */
.wa-float.is-tucked{opacity:0;visibility:hidden;transform:scale(.86);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .wa-float{transition:transform var(--t-mid) var(--e-out),
                       opacity var(--t-mid) var(--e-soft),
                       visibility var(--t-mid) var(--e-soft)}
}

/* footer link tap targets: 17px × 1.8 ≈ 31px, below the 44px floor */
.footer-col a{min-height:44px;display:inline-flex;align-items:center}
/* same floor for the logo link — the mark is 40px tall (34px under 600px),
   so the anchor around it came in at 34–40px. Height only; the header bar is
   78px and the footer lockup sits on its own line, so nothing moves. */
.brand{min-height:44px}

/* shared section header block ------------------------------- */
.sec-head{max-width:70ch}
.sec-head .h2{margin-block-end:var(--s-4)}
.sec-lead{margin-block-start:var(--s-2)}


/* ============================================================
   1. Page header — ONE focal point.
   Round one ran a headline against a sample chat panel and the eye had
   to choose. The chat is gone: the message specimen already exists
   further down, live, in the preview. What is left is a single
   editorial stack bottom-anchored on a full-width index rail, which is
   navigation — deliberately small, never a second headline.
   ============================================================ */
.page-head{
  position:relative;overflow:hidden;
  min-height:clamp(29rem,72vh,42rem);
  display:grid;align-content:end;
  padding-block:clamp(5rem,10vw,8rem) 0;
}
.page-head::after{           /* soft teal glow, palette-only */
  content:"";position:absolute;
  inset-block-start:-34%;inset-inline-start:-14%;
  width:min(62vw,720px);aspect-ratio:1;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--teal) 22%,transparent) 0%,
    transparent 68%);
  pointer-events:none;
}
.page-head-in{
  position:relative;z-index:1;
  display:grid;
  gap:clamp(2.75rem,6vw,5rem);
}
.page-title{
  font-size:clamp(2.75rem,6.4vw,5.25rem);
  line-height:1.18;font-weight:700;
  max-width:14ch;
}
.page-lead{
  color:var(--on-dark-soft);
  max-width:48ch;
  margin-block-start:var(--s-5);
}

/* --- the index rail: three sections, one hairline, no cards ---- */
.jump{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block-start:1px solid var(--line-dark);
}
.jump a{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);
  min-height:44px;
  padding-block:var(--s-5) var(--s-6);
  padding-inline-end:var(--s-6);
  transition:color var(--t-fast) var(--e-soft);
}
.jump a + a{
  border-inline-start:1px solid var(--line-dark);
  padding-inline-start:var(--s-6);
}
.jump-n{font-size:var(--fs-label);font-weight:700;color:var(--gold);line-height:1.6}
.jump-t{
  font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:500;
  color:var(--on-dark);line-height:1.5;
  transition:color var(--t-fast) var(--e-soft);
}
.jump-d{color:var(--on-dark-soft);line-height:1.75;max-width:24ch}
.jump a:hover .jump-t{color:var(--gold)}


/* ============================================================
   2. Contact routes — deliberately unequal, never three twins.
   No eyebrow here: the headline carries the section on its own, so the
   four section openings on this page are not the same stack four times.
   ============================================================ */
.routes{padding-block:clamp(5rem,10vw,9rem) var(--s-8)}
.routes .sec-head{margin-block-end:var(--s-7)}
.routes .sec-head .h2{margin-block-end:var(--s-3)}

.routes-grid{
  display:grid;gap:var(--s-5);
  grid-template-columns:1.15fr 1fr;
  align-items:stretch;
}

.route{display:block;position:relative}

/* --- the primary panel --------------------------------------- */
.route-lg{
  grid-row:span 2;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:linear-gradient(155deg,var(--ink) 0%,var(--ink-900) 62%,var(--deep) 100%);
  color:var(--on-dark);
  padding:clamp(1.75rem,3vw,2.75rem);
  box-shadow:var(--sh-md);
  transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid) var(--e-out);
}
.route-lg-in{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}

.route-kicker{
  align-self:flex-start;
  display:inline-block;
  padding-inline:var(--s-4);padding-block:.3rem;
  border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--teal) 26%,transparent);
  color:var(--on-dark);
  font-size:var(--fs-label);font-weight:500;line-height:1.6;
}
.route-well{
  margin-block:var(--s-6) var(--s-5);
  width:84px;height:84px;
}
.route-well .icon{width:38px;height:38px}
.route-title{margin-block-end:var(--s-2)}
.route-num{
  font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:500;line-height:1.5;
  color:var(--on-dark);
}
.route-text{
  color:var(--on-dark-soft);
  margin-block:var(--s-4) var(--s-6);
  max-width:34ch;
}
.route-go{
  margin-block-start:auto;
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-weight:500;color:var(--gold);
}
.route-go .arrow{transition:transform var(--t-mid) var(--e-out)}
.route-lg:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.route-lg:hover .route-go .arrow{transform:translateX(-6px)}
.route-lg:hover .icon-well{transform:scale(1.05)}

/* --- the two secondary rows ---------------------------------- */
.route-sm{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--s-5);
  padding:clamp(1.5rem,2.4vw,2rem);
  border-radius:var(--r-lg);
  background:var(--paper-pure);
  border:1px solid var(--line-light);
  transition:transform var(--t-mid) var(--e-out),
             border-color var(--t-fast) var(--e-soft),
             box-shadow var(--t-mid) var(--e-out);
}
.route-sm-top{display:flex;align-items:center;gap:var(--s-3)}
.route-ic{color:var(--teal);flex:none}
.route-sm-kicker{font-size:var(--fs-label);font-weight:500;line-height:1.6}
.route-sm-value{
  font-size:clamp(1.375rem,2.1vw,1.75rem);font-weight:700;line-height:1.4;
  color:var(--ink);overflow-wrap:anywhere;
}
/* the arrow belongs to the sentence, so it sits one space after it —
   not at the far edge of the card, where its hover travel had nothing
   to travel toward */
.route-sm-foot{
  display:flex;align-items:flex-end;justify-content:flex-start;gap:var(--s-5);
  padding-block-start:var(--s-4);
  border-block-start:1px solid var(--line-light);
}
.route-sm-text{
  color:var(--on-light-soft);font-size:var(--fs-body);line-height:1.75;
  flex:0 1 auto;max-width:36ch;
}
.route-sm-arrow{
  color:var(--on-light-soft);flex:none;
  transition:transform var(--t-mid) var(--e-out),color var(--t-fast) var(--e-soft);
}
.route-sm:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--teal) 55%,transparent);
  box-shadow:var(--sh-md);
}
.route-sm:hover .route-sm-arrow{transform:translateX(-6px);color:var(--teal)}


/* ============================================================
   3. Request section — the page's centre of gravity.
   ============================================================ */
.form-sec{position:relative;overflow:hidden}
/* --deep as a real surface, not just a gradient stop nobody sees.
   The page head and this section were both flat --ink, so the page read
   two-tone: one dark, one paper, repeated. This is the 20% token doing its
   documented job on the largest dark area of the page, and it separates the
   two dark sections from each other. Contrast on the deep band holds:
   --on-dark 6.9:1, --on-dark-soft 4.9:1, the gold eyebrow 4.6:1. */
.form-sec.surface-ink{
  background:linear-gradient(176deg,
    var(--deep) 0%,
    var(--ink) 34%,
    var(--ink) 74%,
    var(--ink-900) 100%);
}
.form-sec-in{position:relative;z-index:1}
.form-sec .sec-head{margin-block-end:var(--s-8)}

.form-grid{
  display:grid;gap:clamp(2rem,3.6vw,3.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
}

/* ------------------------------------------------------------
   3a. The sheet — the one light object in the dark section.
   ------------------------------------------------------------ */
.req-form{
  display:flex;flex-direction:column;gap:var(--s-6);
  background:var(--paper);
  color:var(--on-light);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.75rem);
  box-shadow:var(--sh-lg);
}
.sheet-top{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-5);
  padding-block-end:var(--s-5);
  border-block-end:1px solid var(--line-light);
}
.sheet-cap{font-size:var(--fs-body);font-weight:500;color:var(--ink);line-height:1.7}
.sheet-note{color:var(--on-light-soft);line-height:1.75}
.req{color:var(--deep);font-weight:700;margin-inline-start:.15rem}

.row-2{display:grid;gap:var(--s-6);grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:var(--s-2);border:0;padding:0;min-width:0}

/* the label outranks the sentence that explains it */
.field-label{
  font-size:var(--fs-body);font-weight:500;color:var(--ink);
  line-height:1.7;padding:0;
}
.opt{color:var(--on-light-soft);font-weight:400;font-size:var(--fs-sm)}
.field-hint{font-size:var(--fs-body);color:var(--on-light-soft);line-height:1.75}

/* ------------------------------------------------------------
   3b. Controls. Every one of these carries a fill 11.9:1 brighter
   than the section ground AND a 2px edge at 4.6:1 against its own
   fill (4.2:1 against the sheet) — so the affordance survives even
   if the fills are ever flattened.
   2px, not 1.5px: Chrome floors a 1.5px border to one device pixel
   at dpr 1, which is exactly the density review screenshots use.
   ------------------------------------------------------------ */
.input{
  width:100%;
  min-height:54px;
  padding-inline:var(--s-4);padding-block:.7rem;
  border-radius:var(--r-sm);
  border:2px solid color-mix(in srgb,var(--ink) 68%,var(--paper-pure));
  background:var(--paper-pure);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.8;
  transition:border-color var(--t-fast) var(--e-soft),
             background-color var(--t-fast) var(--e-soft),
             box-shadow var(--t-fast) var(--e-soft);
}
.input::placeholder{color:var(--on-light-soft)}
.input:hover{border-color:var(--deep)}
/* focus: the edge goes to --deep (7.5:1) AND a solid 3px teal ring —
   never a tint, which would read as no ring at all on a light sheet */
.input:focus{
  outline:none;
  border-color:var(--deep);
  box-shadow:0 0 0 3px var(--teal);
}
.input:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.textarea{resize:vertical;min-height:132px;line-height:1.8}

.select-wrap{position:relative;display:block}
.select{
  appearance:none;-webkit-appearance:none;
  padding-inline-end:calc(var(--s-4) + 30px);
  cursor:pointer;
}
/* the unchosen placeholder option reads as a placeholder, not as text */
.select:invalid{color:var(--on-light-soft)}
.select option{color:var(--ink);background:var(--paper-pure)}
.select-chev{
  position:absolute;inset-inline-end:var(--s-4);inset-block-start:50%;
  transform:translateY(-50%);
  width:22px;height:22px;color:var(--deep);pointer-events:none;
}

/* --- services -------------------------------------------------
   Not a grid of identical cells. Two named clusters that mirror the
   brand's own taxonomy, each a wrapping row of content-width chips —
   so every chip is the width of its own label and no cell contains a
   hole. The irregular wrap is the point: it reads as a list of real
   services, not as a generated 2×4 matrix.
   ------------------------------------------------------------- */
.field-services{gap:var(--s-3)}
.field-services .field-hint{margin-block-end:var(--s-3)}

.svc-sets{display:flex;flex-direction:column;gap:var(--s-5)}
.svc-set-cap{
  display:flex;align-items:center;gap:var(--s-4);
  font-size:var(--fs-body);font-weight:500;color:var(--ink);
  line-height:1.6;margin-block-end:var(--s-3);
}
.svc-set-cap::after{
  content:"";flex:1 1 auto;height:1px;
  background:var(--line-light);
}
.svc-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}

.svc{
  display:inline-flex;align-items:center;gap:var(--s-3);
  min-height:56px;
  padding-inline:var(--s-5) var(--s-4);
  border-radius:var(--r-pill);
  border:2px solid color-mix(in srgb,var(--ink) 60%,var(--paper-pure));
  background:var(--paper-pure);
  cursor:pointer;
  transition:border-color var(--t-fast) var(--e-soft),
             background-color var(--t-fast) var(--e-soft),
             box-shadow var(--t-fast) var(--e-soft),
             transform var(--t-fast) var(--e-out);
}
.svc:hover{
  border-color:var(--deep);
  background:color-mix(in srgb,var(--teal) 8%,var(--paper-pure));
}
.svc-ic{width:28px;height:28px;color:var(--deep);flex:none;
  transition:color var(--t-fast) var(--e-soft)}
.svc-name{font-weight:500;line-height:1.6;font-size:var(--fs-body);color:var(--ink)}
/* the box follows its own label by one gap — never travels to an edge.
   2px edge at 6.8:1 unchecked, solid teal with an ink tick when on. */
.svc input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:24px;height:24px;flex:none;margin:0;
  border-radius:8px;
  border:2px solid color-mix(in srgb,var(--ink) 74%,var(--paper-pure));
  background:var(--paper-pure) center/15px no-repeat;
  cursor:pointer;
  transition:background-color var(--t-fast) var(--e-soft),
             border-color var(--t-fast) var(--e-soft);
}
.svc input[type="checkbox"]:checked{
  background-color:var(--teal);border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3D3E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
/* one ring, on the chip — not two, one on the input and one on the chip */
.svc input:focus-visible{outline:none}
.svc:has(input:focus-visible){
  border-color:var(--deep);
  box-shadow:0 0 0 3px var(--teal);
}
.svc:has(input:checked){
  border-color:var(--deep);
  background:color-mix(in srgb,var(--teal) 15%,var(--paper-pure));
}
.svc:has(input:checked) .svc-ic{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .svc:active{transform:scale(.99)}
}

/* --- error state ---------------------------------------------
   Gold is the CTA colour on this screen, so it cannot also mean
   "you got this wrong" as a fill. It appears only as a 30% wash on
   the broken field, under an ink edge at 2.5px — weight and value
   carry the message, colour merely warms it.
   :user-invalid covers the native pass (after interaction only);
   .has-error is what the submit handler sets.
   ------------------------------------------------------------- */
.field-error{
  display:flex;align-items:flex-start;gap:var(--s-3);
  font-size:var(--fs-body);font-weight:500;color:var(--ink);line-height:1.75;
}
.field-error[hidden]{display:none}
.field-error::before{
  content:"!";
  display:grid;place-items:center;flex:none;
  width:22px;height:22px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--gold);
  font-weight:700;font-size:.95rem;line-height:1;
  margin-block-start:.3rem;
}
.has-error .input,
.req-form .input:user-invalid{
  border-color:var(--ink);border-width:3px;
  background:color-mix(in srgb,var(--gold) 30%,var(--paper-pure));
}
/* a broken field that gains focus keeps speaking the error's language */
.has-error .input:focus,
.req-form .input:user-invalid:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 3px var(--gold);
}
.has-error .svc-sets{
  border:3px solid var(--ink);
  border-radius:var(--r-md);
  padding:var(--s-4);
  background:color-mix(in srgb,var(--gold) 18%,var(--paper));
}

/* --- submit ---------------------------------------------------- */
.form-foot{
  display:flex;flex-direction:column;gap:var(--s-4);
  padding-block-start:var(--s-5);
  border-block-start:1px solid var(--line-light);
}
.form-send{align-self:flex-start}
.form-send .icon{width:22px;height:22px}
.form-disclaimer{color:var(--on-light-soft);line-height:1.8;max-width:52ch}
.form-status{
  display:flex;align-items:flex-start;gap:var(--s-3);
  padding:var(--s-4);border-radius:var(--r-sm);
  font-weight:500;line-height:1.8;
  border-inline-start:3px solid var(--teal);
  background:color-mix(in srgb,var(--teal) 10%,var(--paper-pure));
  color:var(--ink);
}
.form-status[hidden]{display:none}
.form-status.is-error{
  border-inline-start-color:var(--ink);
  background:color-mix(in srgb,var(--gold) 26%,var(--paper-pure));
}

/* ------------------------------------------------------------
   3c. Side column — output, so it takes the dark side.
   Preview and mechanism are one object, stacked tight, and the whole
   column travels with the form instead of leaving a gap between them.
   ------------------------------------------------------------ */
.side{
  display:flex;flex-direction:column;gap:var(--s-6);
  position:sticky;inset-block-start:calc(78px + var(--s-5));
}
.preview{
  background:var(--ink-900);color:var(--on-dark);
  border:1px solid color-mix(in srgb,var(--paper) 26%,transparent);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  box-shadow:var(--sh-lg);
}
.preview-head{margin-block-end:var(--s-5)}
.preview .preview-title{font-size:var(--fs-h3);font-weight:700;color:var(--on-dark)}
.preview-sub{
  color:var(--on-dark-soft);line-height:1.75;
  margin-block-start:var(--s-2);
}
.bubble{
  border-radius:var(--r-md);
  border:1.5px solid color-mix(in srgb,var(--paper) 26%,transparent);
  background:color-mix(in srgb,var(--paper) 7%,transparent);
  overflow:hidden;
  transition:border-color var(--t-mid) var(--e-soft),
             box-shadow var(--t-mid) var(--e-out);
}
.preview.is-ready .bubble{
  border-color:var(--teal);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent);
}
.bubble-head{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-2) var(--s-4);
  padding:var(--s-3) var(--s-4);
  border-block-end:1px solid color-mix(in srgb,var(--paper) 20%,transparent);
  background:color-mix(in srgb,var(--teal) 16%,transparent);
}
.bubble-to{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-label);font-weight:500;color:var(--on-dark);
}
.bubble-to .icon{width:19px;height:19px;color:var(--teal)}
.bubble-num{font-size:var(--fs-label);color:var(--on-dark-soft)}

.bubble-body{padding:var(--s-5) var(--s-4)}
.pv-line{
  font-size:var(--fs-body);line-height:1.8;
  color:var(--on-dark);
  overflow-wrap:anywhere;
  transition:color var(--t-mid) var(--e-soft);
}
.pv-line + .pv-line{margin-block-start:.4rem}
.pv-head{
  font-weight:500;color:var(--on-dark);
  padding-block-end:var(--s-3);margin-block-end:var(--s-3);
  border-block-end:1px solid color-mix(in srgb,var(--paper) 20%,transparent);
}
.pv-k{font-weight:500;color:var(--teal);margin-inline-end:.4rem}
/* an empty row's label was teal at 72% alpha — 3.3:1 on --ink-900, under the
   floor for 17px text. Ghost labels go neutral (8.9:1) and gain their teal
   the moment the field is filled, so the state change reads as a change of
   hue rather than a change of legibility. */
.pv-line.is-ghost .pv-k{color:var(--on-dark-soft);font-weight:400}
.pv-line.is-ghost .pv-v{color:var(--on-dark-soft)}

/* --- the mechanism, three steps on a rule ---------------------- */
.mech{
  flex:none;
  padding-block-start:var(--s-5);
  border-block-start:1px solid color-mix(in srgb,var(--paper) 26%,transparent);
}
.mech-cap{
  font-size:var(--fs-label);font-weight:500;color:var(--on-dark);
  margin-block-end:var(--s-5);
}
.steps{display:flex;flex-direction:column;gap:var(--s-6)}
.steps li{display:flex;align-items:baseline;gap:var(--s-4)}
.steps .step-n{
  flex:none;width:2.1rem;
  font-weight:700;color:var(--on-dark);
  line-height:1.8;
  border-block-end:2px solid var(--teal);
}
.steps .step-t{color:var(--on-dark-soft);line-height:1.8}

/* closes the column: the one thing a visitor wants to know before
   handing over event details, said where the button is */
.side-note{
  margin-block-start:var(--s-6);
  padding-block-start:var(--s-5);
  border-block-start:1px solid color-mix(in srgb,var(--paper) 16%,transparent);
  color:var(--on-dark-soft);line-height:1.8;max-width:44ch;
}


/* ============================================================
   4. FAQ accordion — closes the page, so the weight goes below it: 64 / 96.
   ============================================================ */
.faq-sec{padding-block:var(--s-8) var(--s-9)}
.faq-grid{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
}
.faq-aside .h2{margin-block-end:var(--s-4)}
.faq-aside-text{color:var(--on-light-soft);max-width:44ch}

/* the aside's third element — it holds the two real addresses side by
   side, so the column fills its width and carries weight down to the
   height of the list beside it */
.faq-ask{
  margin-block-start:var(--s-6);
  padding:var(--s-5);
  border-radius:var(--r-lg);
  border:1px solid var(--line-light);
  background:var(--paper-pure);
}
.faq-ask-cap{
  display:flex;align-items:center;gap:var(--s-4);
  font-size:var(--fs-body);font-weight:500;color:var(--ink);
  line-height:1.7;margin-block-end:var(--s-4);
}
.faq-ask-cap::after{content:"";flex:1 1 auto;height:1px;background:var(--line-light)}
.faq-ask-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.faq-ask-line{
  display:flex;flex-direction:column;gap:var(--s-2);
  min-height:44px;
  transition:color var(--t-fast) var(--e-soft);
}
.faq-ask-k{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-label);font-weight:500;color:var(--deep);
  line-height:1.6;
}
.faq-ask-k .icon{width:20px;height:20px;color:var(--teal);flex:none;
  transition:color var(--t-fast) var(--e-soft)}
.faq-ask-v{
  font-size:clamp(1.125rem,1.55vw,1.375rem);font-weight:500;
  line-height:1.5;color:var(--ink);overflow-wrap:anywhere;
  transition:color var(--t-fast) var(--e-soft);
}
.faq-ask-line:hover .faq-ask-v{color:var(--deep)}
.faq-ask-line:hover .icon{color:var(--deep)}

.faq-list{border-block-start:1px solid var(--line-light)}
.faq-item{border-block-end:1px solid var(--line-light)}
/* number → question → control, one continuous unit. The control is not
   flung to the container edge: it opens the question it sits beside. */
.faq-item summary{
  display:flex;align-items:center;gap:var(--s-4);
  padding-block:var(--s-5);
  cursor:pointer;list-style:none;
  transition:color var(--t-fast) var(--e-soft);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-n{
  font-size:var(--fs-sm);font-weight:500;
  flex:none;width:1.9rem;line-height:1.6;
}
/* the question owns the row: it takes the slack, so the control lands
   one gap past it instead of at the container edge */
.faq-q{
  font-size:clamp(1.125rem,1.55vw,1.375rem);
  font-weight:500;line-height:1.6;color:var(--ink);
  flex:1 1 auto;min-width:0;
  transition:color var(--t-fast) var(--e-soft);
}
.faq-item summary:hover .faq-q{color:var(--deep)}

/* the ring was --line-light (ink at 12%) — 1.2:1 on paper, so the button's
   edge was invisible and only the glyph inside said "this opens". The glyph
   is full --ink and is what identifies the control, so the ring is not
   load-bearing for contrast; at 30% it reads as a button rather than a stray
   plus, and stays quieter than the question beside it. */
.faq-plus{
  position:relative;flex:none;
  width:38px;height:38px;border-radius:var(--r-pill);
  border:1.5px solid color-mix(in srgb,var(--ink) 30%,transparent);
  color:var(--ink);
  transition:background-color var(--t-mid) var(--e-soft),
             border-color var(--t-mid) var(--e-soft),
             color var(--t-mid) var(--e-soft);
}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;
  inset-block-start:50%;inset-inline-start:50%;
  width:14px;height:1.75px;border-radius:2px;
  background:currentColor;
  transform:translate(50%,-50%);
  transition:transform var(--t-mid) var(--e-out);
}
.faq-plus::after{transform:translate(50%,-50%) rotate(90deg)}
.faq-item summary:hover .faq-plus{border-color:var(--teal);color:var(--teal)}
.faq-item[open] .faq-plus{
  background:var(--teal);border-color:var(--teal);color:var(--paper-pure);
}
.faq-item[open] .faq-plus::after{transform:translate(50%,-50%) rotate(90deg) scaleX(0)}

.faq-body{
  padding-inline-start:calc(1.9rem + var(--s-4));
  padding-inline-end:var(--s-5);
  padding-block-end:var(--s-6);
  max-width:68ch;
}
.faq-body p{color:var(--on-light-soft)}
.faq-body a{
  color:var(--deep);font-weight:500;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--teal) 60%,transparent);
  transition:color var(--t-fast) var(--e-soft);
}
.faq-body a:hover{color:var(--teal)}

@media (prefers-reduced-motion:no-preference){
  .faq-item[open] .faq-body{animation:faqIn .38s var(--e-out) both}
}
@keyframes faqIn{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:none}
}


/* ============================================================
   5. Footer CTA band
   ============================================================ */
.cta-band.surface-deep{
  position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--deep) 0%,var(--ink) 58%,var(--ink-900) 100%);
  padding-block:clamp(3.5rem,7vw,6rem);
}
/* a split band: headline at the inline-start margin, actions at the
   inline-end one, both flush with every other section's edges. The
   headline runs its full line rather than being capped short, so the
   space between the two blocks is a margin, not a hole. */
.cta-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto auto;
  justify-content:space-between;
  gap:var(--s-7);align-items:end;
}
.cta-text .h2{margin-block-end:var(--s-4)}
.cta-text .lead{color:var(--on-dark-soft);max-width:44ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s-4)}


/* ============================================================
   6. Responsive
   ============================================================ */

/* The preview must sit ABOVE the send button, or it is not a preview.
   .side stops being a box so its two children can be ordered
   independently around the form. */
@media (max-width:1080px){
  .form-grid{display:flex;flex-direction:column;gap:var(--s-7);align-items:stretch}
  .side{display:contents}
  .preview{order:-2}
  .req-form{order:-1}
  .mech{order:0;border-block-start:0;padding-block-start:0}
  /* it sits above the fields now, so it earns its height back:
     the section lead already says what the sub-line says */
  .preview{padding:var(--s-5)}
  .preview-head{margin-block-end:var(--s-4)}
  .preview-sub{display:none}
  .bubble-body{padding:var(--s-4)}
  .pv-line + .pv-line{margin-block-start:.15rem}
}

@media (max-width:960px){
  .page-head{min-height:auto;padding-block:clamp(3.5rem,8vw,5rem) 0}
  .page-title{max-width:none}
  .routes-grid{grid-template-columns:1fr}
  .route-lg{grid-row:auto}
  .route-well{width:76px;height:76px;margin-block:var(--s-5) var(--s-4)}
  .faq-grid{grid-template-columns:1fr;gap:var(--s-7)}
  .faq-aside-text{max-width:52ch}
  .faq-ask{max-width:26rem}
  .cta-in{grid-template-columns:1fr;justify-content:start;align-items:start}
  .cta-text .lead{max-width:46ch}
}

@media (max-width:760px){
  #routes,#request,#faq{scroll-margin-block-start:88px}
  .row-2{grid-template-columns:1fr}
  .routes{padding-block:var(--s-9) var(--s-8)}
  .routes .sec-head,
  .form-sec .sec-head{margin-block-end:var(--s-7)}
  .faq-body{padding-inline-end:0}
  .form-send{align-self:stretch;width:100%}
  /* the index rail becomes three rules, one per section */
  .jump{grid-template-columns:1fr}
  .jump a{
    flex-direction:row;align-items:baseline;gap:var(--s-3);
    padding-block:var(--s-4);padding-inline:0;
  }
  .jump a + a{border-inline-start:0;padding-inline-start:0;
    border-block-start:1px solid var(--line-dark)}
  .jump-d{display:none}
  /* A fixed float can land on any element at some scroll offset, and at
     this width it landed on «افتح المحادثة» inside the واتساب card —
     same destination, one covering the other. This page already carries
     four inline WhatsApp entry points, so on small screens the float
     goes rather than competes. */
  .wa-float{display:none}
}

@media (max-width:520px){
  /* the number must never break across two lines */
  .faq-ask-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .faq-ask-line + .faq-ask-line{
    padding-block-start:var(--s-4);
    border-block-start:1px solid var(--line-light);
  }
}

@media (max-width:430px){
  .svc{padding-inline:var(--s-4) var(--s-3);gap:var(--s-2)}
  .route-sm{gap:var(--s-4);padding:var(--s-5) var(--s-4)}
  .route-sm-foot{gap:var(--s-4)}
  .faq-item summary{gap:var(--s-3)}
  .faq-body{padding-inline-start:calc(1.9rem + var(--s-3))}
}


/* ============================================================
   7. Reduced motion
   Movement on hover is decorative, so it goes. The accordion's
   plus→minus is state, not decoration, so that one stays.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .route-lg:hover,
  .route-sm:hover{transform:none}
  .route-lg:hover .icon-well,
  .route-lg:hover .route-go .arrow,
  .route-sm:hover .route-sm-arrow{transform:none}
}