/* ==========================================================================
   MAROC SKYDIVE — landing page
   --------------------------------------------------------------------------
   Art direction: aviation document (navigation chart / flight strip),
   grounded in place by the Moroccan pentagram taken from the logo's own star.

   The palette is sampled from the logo and from nothing else. Red and green
   carry EQUAL weight, as they do in the mark. Green is a brand colour here,
   not a "success" colour — that misuse is what made the earlier pass read as
   a generic red SaaS template.

   These are not eyeballed. logo.png was decoded and its pixels counted:
       red   #ED1C24   canopy band + MAROC wordmark   (measured #ED1B24, 23.1%)
       green #00A651   canopy band + star             (measured #00A652, 12.9%)
       ink   #231F20   "skydive" script + TOUCH THE SKY  (measured exactly, 13.8%)
   Red and green sit one unit off the measurement, which is compression noise;
   the spec values are kept. The ink was NOT one unit off — it was #17181A here
   against #231F20 in the mark, a warm near-black (K100 in print). The logo won,
   and the warmer ink also sits better on this paper ground. Revert by editing
   --ink alone; nothing else hardcodes it.

   Two rules hold this file together. Break either one and it stops being
   this design and goes back to being a template:
     1. ONE radius: 3px. Nothing is a pill, nothing is a 20px card.
     2. Separation is drawn with RULES, not with drop shadows.
   ========================================================================== */

:root{
  /* brand ------------------------------------------------------------- */
  --red:#ED1C24;   --red-d:#C1141B;   --red-w:#FCEEEE;
  --grn:#00A651;   --grn-d:#00793B;   --grn-w:#E8F6EE;
  --ink:#231F20;   --ink-2:#4A4442;   --ink-3:#6F6A61;

  /* ground — warm paper. Clinical #fff is half of why this looked generic. */
  --paper:#FBF8F2; --paper-2:#F4EFE4; --card:#FFFFFF;
  --rule:#E4DDCE;  --rule-2:#CFC5B1;  --rule-3:#B2A68C;

  /* system ------------------------------------------------------------ */
  --r:3px;
  /* Type ---------------------------------------------------------------
     Archivo + IBM Plex Mono was replaced. Not because either is a bad face,
     but because together they are THE pairing of the last few years'
     generated design work — a neutral grotesque over a technical mono, the
     default "considered" choice. It reads as a template because it is one.

     What is here instead follows the art direction the page already had:

       --display  Instrument Serif. A masthead, not a UI font. 400 IS ITS
                  ONLY WEIGHT, which is why every heading below sets 400 and
                  builds hierarchy from size and tracking instead of from
                  bold. Asking for 700 gets a synthesised smear.

       --sans     Instrument Sans, variable 400-700. Its companion, so the
                  proportions agree. Nothing above 700 exists.

       --mono     Spline Sans Mono. 400 and 700.

                  Courier Prime was here first and was WRONG, for a reason
                  worth recording rather than quietly fixing: the idea was
                  sound — flight strips and load sheets are typewritten — but
                  a typewriter face cannot do this job. FORTY-FOUR of the
                  fifty-nine uses of this token are between 9px and 11.5px:
                  tracked uppercase micro-labels and tabular figures. Courier
                  is thin-stroked, wide-set and low in x-height, so at 10px it
                  goes grey and mushy and the labels run long.

                  Spline Sans Mono is the opposite where it matters: high
                  x-height, tighter set, and enough colour to hold at 9px. Its
                  proportions are close to Plex Mono's, which is why the
                  tracking on these rules was restored to the values it had
                  before the Courier experiment rather than re-guessed.

                  The lesson: pick a mono for the SIZE it is used at. This one
                  is a label face that happens to be monospaced, not a
                  code face.

       --arab     Almarai. Loaded properly now: the old stack named IBM Plex
                  Sans Arabic and Noto Kufi as if they were installed, which
                  on most machines meant Arabic fell back to whatever the
                  system had while French and English got a webfont. */
  --display:'Instrument Serif','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --arab:'Almarai','Noto Kufi Arabic',sans-serif;
  --pad:clamp(18px,4vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:inherit}

/* Arabic swaps the family everywhere and drops the Latin tracking, which
   looks broken on Arabic glyphs. Numerals stay in the mono face. */
html[lang="ar"] body,
html[lang="ar"] .kick,html[lang="ar"] .fset-t,html[lang="ar"] .lbl,
html[lang="ar"] .btn,html[lang="ar"] .strip,html[lang="ar"] .dl-k,
html[lang="ar"] .nav a,html[lang="ar"] .spec-k{font-family:var(--arab)}
/* Headings MUST be named here now. They used to carry no font-family of their
   own and inherited the Arabic face from body; giving them an explicit
   --display broke that, and Instrument Serif has no Arabic glyphs at all — the
   headings would have fallen through to whatever the system happened to offer
   while the rest of the page was set properly. */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] .kick,html[lang="ar"] .fset-t,html[lang="ar"] .strip,
html[lang="ar"] .nav a{font-family:var(--arab);letter-spacing:0;text-transform:none}

/* Almarai has no 400-only constraint, so Arabic headings can carry the weight
   the serif cannot. Without this they would read lighter than their French and
   English counterparts at the same size. */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-weight:700}
html[lang="ar"] .num,html[lang="ar"] .ltr{font-family:var(--mono)}

/* Latin data (coordinates, ICAO, prices) must not be reordered by the
   bidi algorithm when the page flips to RTL. */
.ltr,.num{direction:ltr;unicode-bidi:isolate}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 20px;font:600 14px var(--sans);text-decoration:none}
.skip:focus{inset-inline-start:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:1px}

.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* The Moroccan pentagram, lifted straight off the logo's star. It is the only
   ornament on the page, so it stands in wherever a lesser design puts a dot. */
.star{width:14px;height:14px;flex:none;fill:none;stroke:var(--grn);stroke-width:1.6;stroke-linejoin:round}

/* ---------- logo ----------------------------------------------------------
   logo.png IS PRESENT and is the real artwork. The chain below it —
   logo.svg, then the drawn inline mark — only exists so the page degrades
   sanely if the file is ever moved or renamed. Both are reconstructions and
   neither should be mistaken for the real thing.                            */
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
/* logo.png ships with an OPAQUE WHITE background (colour type 2, no alpha
   channel — measured), so on this warm paper ground it would read as a white
   rectangle. multiply blends white into the ground and leaves the red, green
   and ink essentially untouched. It is exact only against a light ground,
   which is why the header below is opaque paper rather than frosted glass.
   The proper fix is a transparent PNG or an SVG from whoever drew the mark.
   Height is set for the INK, not the canvas: 24% of the file is white margin
   (ink bbox 1128x575 inside 1194x714), so the box must run larger to make the
   mark itself the size it should be. */
.logo-img{height:58px;width:auto;display:block;mix-blend-mode:multiply}
.footer .logo-img{height:84px}
.logo-fb{display:flex;align-items:center;gap:9px}
.logo-canopy{width:46px;height:36px;flex:none}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-script{font-family:'Kaushan Script',cursive;font-size:18px;color:var(--ink);
  margin:0 0 -3px 7px;transform:rotate(-4deg);transform-origin:left bottom}
.logo-word{display:flex;align-items:center;font-family:var(--sans);font-size:21px;font-weight:700;
  letter-spacing:.005em;color:var(--red)}
.logo-star{width:17px;height:17px;flex:none;margin:0 -.5px;stroke:var(--grn);stroke-width:1.9;fill:none}
.logo-tag{font-family:var(--sans);font-size:6px;letter-spacing:.42em;color:var(--ink);font-weight:600;margin-top:3px}
html[dir="rtl"] .logo-script{margin:0 7px -3px 0;transform-origin:right bottom}

/* ---------- buttons -------------------------------------------------------
   Flat, square, ruled. The translateY(-1px) lift that was here before is the
   most template-ish micro-interaction in circulation; it is gone.           */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border-radius:var(--r);border:1.5px solid transparent;
  font:600 14.5px/1 var(--sans);letter-spacing:.005em;text-decoration:none;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn .ico{width:17px;height:17px;stroke-width:1.9}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-sm{min-height:40px;padding:0 16px;font-size:13.5px}
.btn-block{width:100%;min-height:56px;font-size:16px}
.btn-line{background:var(--card);color:var(--ink);border-color:var(--rule-2);width:100%;min-height:46px;
  font-size:14px;justify-content:space-between;font-weight:600}
.btn-line:hover{border-color:var(--ink);background:var(--paper)}
.btn-line .ico{color:var(--red)}
html[dir="rtl"] .btn-line .ico{transform:scaleX(-1)}

/* ---------- header -------------------------------------------------------- */
/* Opaque paper, not frosted glass. Two reasons: the blurred translucent
   sticky header is itself a template signature, and mix-blend-mode on the
   logo above is only reliable over a known opaque ground. */
.hdr{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--rule);transition:border-color .2s,box-shadow .2s}
.hdr.stuck{border-bottom-color:var(--rule-2);box-shadow:0 10px 20px -20px rgba(35,31,32,.55)}
.hdr-in{display:flex;align-items:center;gap:20px;height:80px}
.nav{display:flex;gap:2px;margin-inline-start:auto}
.nav a{position:relative;color:var(--ink-2);text-decoration:none;font-size:12.5px;font-weight:700;
  font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:10px 13px;transition:color .16s}
.nav a::after{content:"";position:absolute;inset-inline:13px;bottom:3px;height:1.5px;background:var(--red);
  transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav a[aria-current="true"]{color:var(--ink)}

.hdr-act{display:flex;align-items:center;gap:10px;margin-inline-start:6px}
.lang{display:inline-flex;border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}
.lang button{border:0;border-inline-end:1px solid var(--rule-2);background:transparent;padding:9px 11px;
  cursor:pointer;font:700 11.5px var(--mono);letter-spacing:.09em;color:var(--ink-3);transition:.15s}
.lang button:last-child{border-inline-end:0}
.lang button:hover{background:var(--paper-2);color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}

.burger{display:none;width:46px;height:46px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:19px;height:1.6px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ---------- data strip ----------------------------------------------------
   The line that sets the whole tone: real coordinates, real ICAO code, set
   in mono like the header of a flight plan.                                 */
.strip{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.strip-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:44px;
  font:400 11.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.strip-in .sep{width:1px;height:12px;background:var(--rule-2);flex:none}
.strip-in .on{color:var(--grn-d);font-weight:600}
.strip-in .star{width:11px;height:11px}

/* ---------- hero ---------------------------------------------------------- */
.hero{padding:clamp(44px,7vw,84px) 0 clamp(44px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,62px);align-items:center}
h1{font-family:var(--display);font-size:clamp(42px,6vw,74px);line-height:1.04;letter-spacing:-.012em;font-weight:400;
  margin:0 0 20px;max-width:14ch}
h1 .l2{display:block;color:var(--red)}
h1 .l2::after{content:"";display:inline-block;width:.34em;height:.34em;margin-inline-start:.14em;
  background:var(--grn);vertical-align:.06em}
.lead{font-size:clamp(16.5px,1.5vw,18.5px);color:var(--ink-2);max-width:46ch;margin:0 0 30px;line-height:1.6}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* facts read as a spec table, not as three big marketing numbers */
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;
  margin-top:38px;border-top:1.5px solid var(--ink);padding-top:0}
.fact{padding:16px 26px 0 0;border-inline-end:1px solid var(--rule);margin-inline-end:26px}
.fact:last-child{border-inline-end:0;margin-inline-end:0;padding-inline-end:0}
.fact .dl-k{display:block;font:400 10.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}
.fact .dl-v{display:block;font-size:20px;font-weight:700;letter-spacing:-.015em;font-family:var(--mono)}

/* ---------- the chart ----------------------------------------------------
   This replaces the generic skyline illustration. It is a stylised VFR
   sectional of the operating area: coast, city, the airfield, a flight track.
   Specific beats decorative — and it is the piece a photograph will
   eventually sit beside rather than replace.                               */
.chart{position:relative;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r)}
.chart-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--rule);
  font:400 10.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.chart-hd b{color:var(--ink);font-weight:600}
.chart svg{display:block;width:100%;height:auto}
/* The route map. Square-ish corners inside a 3px-radius panel would show a
   hairline of card behind the photo, so it is clipped to the panel instead of
   being given a radius of its own. */
.chart-map{display:block;width:100%;height:auto;border-block:1.5px solid var(--ink)}
.chart{overflow:hidden}
.chart-cap{font:400 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.chart-ft{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 16px;border-top:1px solid var(--rule);background:var(--paper)}
.chart-ft .lgd{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.chart-ft .lgd i{display:inline-flex;align-items:center;gap:6px;font-style:normal}
.chart-ft .lgd .sw{width:16px;height:0;border-top:2px dashed var(--red)}
.chart-ft .lgd .sw.g{border-top:2px solid var(--grn)}
.chart-pr{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.chart-pr span{font-size:10.5px;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase;
  display:block;font-weight:500}
.chart-pr .v{display:block;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em;text-transform:none;margin-top:2px}

/* ---------- section heads ------------------------------------------------
   Left-aligned with a rule that runs out to the margin. The centred
   kicker/h2/paragraph stack repeated three times was a dead giveaway.      */
.section{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--rule)}
.section.alt{background:var(--paper-2)}
.sec-head{margin:0 0 clamp(30px,4vw,48px);max-width:none}
.kick{display:flex;align-items:center;gap:12px;margin:0 0 16px;
  font:700 11px var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3)}
.kick::after{content:"";flex:1;height:1px;background:var(--rule-2)}
.kick .star{margin-inline-end:-4px}
h2{font-family:var(--display);font-size:clamp(30px,3.9vw,48px);line-height:1.1;letter-spacing:-.01em;font-weight:400;
  margin:0 0 12px;max-width:18ch}
.sec-sub{color:var(--ink-2);font-size:16.5px;margin:0;max-width:56ch}

/* ---------- experience cards ---------------------------------------------
   Flight strips. Each carries a colour band from the mark — Cessna takes the
   red, the two gyroplanes take the green — so the palette is split evenly
   across the product line instead of red-everything-plus-green-checkmarks.  */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid var(--ink);
  border-radius:var(--r);overflow:hidden;background:var(--card)}
.card{display:flex;flex-direction:column;border-inline-end:1px solid var(--rule);position:relative}
.card:last-child{border-inline-end:0}
/* --brand is set INLINE per card from the flight's accent colour, which the
   operator picks in the panel. The fallback keeps a card sane if that value is
   ever missing — a transparent 4px band reads as a rendering bug. */
.card{--brand:var(--red)}
.card::before{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:var(--brand);z-index:2}

/* Three states, in order of preference: a photograph the operator uploaded, the
   plan-view drawing of a known aircraft, or the pentagram. The chart-paper
   background and the vignette exist to make the DRAWING sit on something; a
   photograph wants neither, so .has-photo drops both. */
.card-media{aspect-ratio:16/11;border-bottom:1px solid var(--rule);position:relative;overflow:hidden;
  background:
    linear-gradient(var(--rule) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/34px 100%,
    var(--paper);
  display:grid;place-items:center;padding:20px}
.card-media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 30%,transparent 40%,rgba(251,248,242,.85) 100%)}
.card-media.has-photo{background:var(--paper-2);padding:0}
.card-media.has-photo::after{display:none}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.plan{width:min(78%,230px);height:auto;position:relative;z-index:1;color:var(--ink);opacity:.86}
.plan.is-mark{width:44px;stroke:var(--brand);fill:none;stroke-width:1.4;opacity:.7}
.card-tag{position:absolute;z-index:2;top:12px;inset-inline-start:12px;padding:5px 9px;background:var(--ink);
  color:#fff;border-radius:var(--r);font:700 10.5px var(--mono);letter-spacing:.11em;text-transform:uppercase}
.card-body{padding:22px var(--pad) var(--pad);display:flex;flex-direction:column;flex:1}
.card-body h3{font-family:var(--display);font-size:23px;font-weight:400;letter-spacing:-.005em;margin:0 0 3px}
.card-sub{font-size:13.5px;color:var(--ink-3);margin:0 0 18px}
.price{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:30px;font-weight:700;
  letter-spacing:-.03em;padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.price small{font-size:12px;font-weight:500;color:var(--ink-3);letter-spacing:.07em}

.spec{display:grid;gap:0;margin:0 0 20px;padding:0;list-style:none}
.spec li{display:flex;align-items:flex-start;gap:11px;padding:8px 0;font-size:14.5px;color:var(--ink-2);
  border-bottom:1px dotted var(--rule)}
.spec li:last-child{border-bottom:0}
.spec .star{margin-top:4px;width:12px;height:12px;stroke:var(--brand)}
.card-body .btn-line{margin-top:auto}

/* ---------- process: a flight track --------------------------------------- */
.track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.track::before{content:"";position:absolute;top:22px;inset-inline:11%;height:0;
  border-top:1.5px dashed var(--rule-3);z-index:0}
.wp{position:relative;z-index:1}
.wp-n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
  background:var(--card);border:1.5px solid var(--ink);font:700 14px var(--mono);color:var(--ink)}
.wp:last-child .wp-n{background:var(--grn);border-color:var(--grn);color:#fff}
.wp h3{font-family:var(--display);font-size:19px;font-weight:400;margin:0 0 6px;letter-spacing:-.004em}
.wp p{font-size:14.5px;color:var(--ink-3);margin:0;max-width:30ch}

/* ---------- form ---------------------------------------------------------- */
.form-section{border-top:1px solid var(--rule);padding:clamp(56px,8vw,96px) 0;background:var(--paper-2)}
.form-shell{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0;
  border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);overflow:hidden}

/* left rail: keeps the form from being a lonely centred box, and gives the
   practical detail (where, when, what to bring) somewhere real to live */
.rail{background:var(--ink);color:#fff;padding:var(--pad);display:flex;flex-direction:column;gap:26px}
.rail h3{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.005em;margin:0 0 8px;color:#fff}
.rail p{font-size:14px;color:rgba(255,255,255,.72);margin:0;line-height:1.55}
.rail .kick{color:rgba(255,255,255,.5);margin-bottom:14px}
.rail .kick::after{background:rgba(255,255,255,.2)}
.rail-dl{display:grid;gap:14px;margin:0;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.rail-dl > div{display:grid;gap:3px}
.rail-dl dt{font:400 10.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.rail-dl dd{margin:0;font-size:14.5px;color:#fff;font-weight:500}
.rail-note{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.5}

.form-main{min-width:0}
.form-head{padding:var(--pad);border-bottom:1px solid var(--rule)}
.form-head h3{font-family:var(--display);font-size:23px;font-weight:400;letter-spacing:-.005em;margin:0 0 6px}
.form-head p{font-size:14.5px;color:var(--ink-3);margin:0}
.req-note{margin-top:14px;font:400 11.5px var(--mono);letter-spacing:.06em;color:var(--red)}
.form-body{padding:var(--pad)}

.fset{border:0;padding:0;margin:0 0 34px;min-width:0}
.fset:last-of-type{margin-bottom:0}
.fset-t{display:flex;align-items:center;gap:12px;width:100%;padding:0;margin-bottom:18px;
  font:700 11px var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}
.fset-t::after{content:"";flex:1;height:1px;background:var(--rule)}
.fset-t .n{display:grid;place-items:center;width:24px;height:24px;flex:none;border:1px solid var(--rule-2);
  border-radius:var(--r);color:var(--ink);font-size:11px;letter-spacing:0;background:var(--paper)}
.fset-t .req{color:var(--red);margin-inline-start:-6px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:20px}
.field:last-child{margin-bottom:0}
.lbl{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.req{color:var(--red);margin-inline-start:3px}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:8px}
.sub-lbl{font:400 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:7px;display:block}

input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time]{
  width:100%;min-height:50px;padding:0 14px;border:1.5px solid var(--rule-2);border-radius:var(--r);
  background:var(--card);font:400 15px var(--sans);color:var(--ink);outline:none;
  transition:border-color .15s,background .15s}
html[lang="ar"] input{font-family:var(--arab)}
input[type=date],input[type=time],input[type=number]{font-family:var(--mono);font-size:14.5px}
input:hover{border-color:var(--rule-3)}
input:focus{border-color:var(--ink);background:var(--card)}
input::placeholder{color:#A79E8C}
input[aria-invalid="true"]{border-color:var(--red);background:var(--red-w)}

/* inline validation — the old build scrolled you at the problem and said
   nothing. This says what is wrong, in the active language, politely. */
.err{display:flex;align-items:flex-start;gap:7px;margin-top:8px;font-size:13px;font-weight:500;color:var(--red)}
.err .ico{width:15px;height:15px;margin-top:2.5px;stroke-width:2}
.err[hidden]{display:none}
.err-c{justify-content:center;margin-top:14px}

/* selectable rows — activity and payment */
.opts{display:grid;gap:10px}
.opt{position:relative;display:flex;align-items:center;gap:14px;padding:15px 16px;
  border:1.5px solid var(--rule-2);border-radius:var(--r);cursor:pointer;background:var(--card);
  transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--rule-3);background:var(--paper)}
.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opt .box{flex:none;width:21px;height:21px;border:1.5px solid var(--rule-3);border-radius:2px;
  display:grid;place-items:center;transition:background .15s,border-color .15s;background:var(--card)}
.opt.radio .box{border-radius:50%}
.opt .box .ico{width:13px;height:13px;stroke-width:3;color:#fff;opacity:0;transition:opacity .12s}
.opt.radio .box::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff;opacity:0;transition:opacity .12s}
.opt input:checked ~ .box{background:var(--grn);border-color:var(--grn)}
.opt input:checked ~ .box .ico,.opt input:checked ~ .box::after{opacity:1}
.opt:has(input:checked){border-color:var(--grn);background:var(--grn-w)}
.opt input:focus-visible ~ .box{outline:2px solid var(--red);outline-offset:2px}
.opt-main{flex:1;min-width:0}
.opt-t{display:block;font-size:15px;font-weight:600;line-height:1.35}
.opt-s{display:block;font:400 11px var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-top:4px}
.opt-price{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.opt-price small{font-size:10.5px;font-weight:500;color:var(--ink-3);letter-spacing:.08em}

/* per-flight departure calendar ------------------------------------------
   Sits under the flight it belongs to, inset so it reads as part of that row
   rather than as a separate control. One radius, hairline rules, no shadows —
   the same separation language as the rest of the page.

   Nothing here needs an RTL special case: the grid fills along the inline axis,
   so in Arabic the week runs right-to-left on its own, and every offset below
   is a logical property. */
.sched{margin:10px 0 0;padding:14px 16px 16px;border:1.5px solid var(--rule);
  border-radius:var(--r);background:var(--paper)}
.sched-note{font-size:12.5px;color:var(--ink-3);margin:0}
.sched-note.is-empty{color:var(--red-d)}

.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cal-month{font:600 13.5px var(--sans);text-transform:capitalize}
.cal-nav{width:30px;height:30px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1.5px solid var(--rule-2);border-radius:var(--r);background:var(--card);
  font-size:15px;line-height:1;color:var(--ink);transition:border-color .15s,background .15s}
.cal-nav:hover:not(:disabled){border-color:var(--ink);background:var(--paper-2)}
.cal-nav:disabled{opacity:.35;cursor:default}
/* The chevrons are direction, not language: mirror them for Arabic. */
html[dir="rtl"] .cal-nav{transform:scaleX(-1)}

.cal-lead{font:400 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px}
.cal-lead.is-times{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}

.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal-dow{font:700 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;padding-bottom:4px}
.cal-pad{visibility:hidden}

.cal-day{position:relative;aspect-ratio:1;min-height:34px;display:grid;place-items:center;
  border:1.5px solid transparent;border-radius:var(--r);background:var(--card);
  font:500 13px var(--sans);color:var(--ink);cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.cal-day:hover{border-color:var(--grn);background:var(--grn-w)}
.cal-day.is-on{background:var(--grn);border-color:var(--grn);color:#fff}
/* A day with nothing free is drawn but never offered — the shape of the month
   tells the customer more than a list with silent gaps in it. */
.cal-day.is-off{aspect-ratio:1;min-height:34px;display:grid;place-items:center;
  font:400 13px var(--sans);color:var(--rule-2);background:transparent;cursor:default}

/* A dot, not a count: how MANY seats are left is the operator's business. */
.cal-dot{position:absolute;bottom:5px;width:3px;height:3px;border-radius:50%;
  background:var(--grn);opacity:.75}
.cal-day.is-on .cal-dot{background:#fff;opacity:.9}

.cal-times{display:flex;flex-wrap:wrap;gap:7px}
.cal-time{padding:8px 13px;border:1.5px solid var(--rule-2);border-radius:var(--r);
  background:var(--card);cursor:pointer;color:var(--ink);
  font:400 13px var(--mono);letter-spacing:.02em;
  transition:border-color .15s,background .15s,color .15s}
.cal-time:hover{border-color:var(--ink)}
.cal-time.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

@media (max-width:420px){
  .sched{padding:12px}
  .cal-day,.cal-day.is-off{min-height:30px;font-size:12px}
  .cal-time{padding:7px 11px;font-size:12.5px}
}

/* extras, under the flight they are bought for ---------------------------
   Deliberately quieter than the flight rows above: an add-on is a decision
   taken after the flight, not a competing one. Same control, less weight. */
.addons{margin-top:2px}
.opt.addon{padding:11px 13px;border-color:var(--rule);background:var(--card)}
.opt.addon:hover{border-color:var(--rule-2);background:var(--paper-2)}
.opt.addon .box{width:18px;height:18px}
.opt.addon .box .ico{width:11px;height:11px}
.opt.addon .opt-t{font-size:13.5px;font-weight:500}
.opt.addon .opt-s{font:400 12px var(--sans);letter-spacing:0;text-transform:none;
  color:var(--ink-3);margin-top:2px}
.opt.addon .opt-price{font-size:13.5px;color:var(--ink-2)}
.opt.addon .opt-price small{font-size:9.5px}
.opt.addon:has(input:checked){border-color:var(--grn);background:var(--grn-w)}

/* the confirmation recap lists them under their flight */
.rc-addon{font-size:12.5px;color:var(--ink-3);padding-inline-start:14px}

/* running total — computed from the existing checkboxes, submits nothing */
.total{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;
  padding:14px 16px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--ink);color:#fff}
.total-k{font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.total-v{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.02em}
.total-v small{font-size:11px;color:rgba(255,255,255,.62);letter-spacing:.07em;font-weight:500}

/* file upload */
.drop{border:1.5px dashed var(--rule-3);border-radius:var(--r);padding:26px;text-align:center;
  background:var(--paper);cursor:pointer;display:block;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--grn);background:var(--grn-w)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop-ico{width:44px;height:44px;border-radius:var(--r);background:var(--card);border:1.5px solid var(--rule-2);
  display:grid;place-items:center;margin:0 auto 13px;color:var(--ink-2)}
.drop-t{font-size:14.5px;font-weight:600;display:block}
.drop-s{font:400 11px var(--mono);letter-spacing:.06em;color:var(--ink-3);margin-top:5px;display:block}
.drop-name{margin-top:13px;font-size:13.5px;font-weight:600;color:var(--grn-d);
  display:inline-flex;align-items:center;gap:8px;max-width:100%}
.drop-name .ico{width:15px;height:15px;stroke-width:2.4}
.drop-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop:focus-within{border-color:var(--ink)}

/* attribution chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1.5px solid var(--rule-2);border-radius:var(--r);background:var(--card);cursor:pointer;
  font-size:14px;font-weight:500;transition:border-color .15s,background .15s,color .15s}
.chip:hover{border-color:var(--rule-3);background:var(--paper)}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip .star{opacity:.28;transition:opacity .14s,stroke .14s}
.chip:has(input:checked){background:var(--grn-w);border-color:var(--grn);color:var(--grn-d);font-weight:600}
.chip:has(input:checked) .star{opacity:1}
.chip:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}
#otherWrap{margin-top:12px;max-width:340px}

.submit-row{margin-top:34px;padding-top:26px;border-top:1.5px solid var(--ink)}
.submit-note{font-size:12.5px;color:var(--ink-3);text-align:center;margin:14px auto 0;max-width:46ch}

/* confirmation */
.done{padding:clamp(44px,6vw,64px) var(--pad);text-align:center}
.done-ico{width:62px;height:62px;border-radius:50%;background:var(--grn);color:#fff;
  display:grid;place-items:center;margin:0 auto 22px}
.done-ico .ico{width:28px;height:28px;stroke-width:2.6}
.done h3{font-family:var(--display);font-size:26px;font-weight:400;letter-spacing:-.006em;margin:0 0 10px}
.done p{color:var(--ink-3);font-size:15px;margin:0 auto 24px;max-width:44ch}
.recap{display:inline-grid;gap:9px;text-align:start;margin:0 auto 26px;padding:16px 20px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);min-width:min(100%,280px)}
.recap div{display:flex;justify-content:space-between;gap:22px;font-size:13.5px}
.recap dt{font:400 10.5px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  padding-top:2px}
.recap dd{margin:0;font-weight:600;text-align:end}
.mock-note{margin-top:28px;font:400 11.5px var(--mono);letter-spacing:.05em;color:var(--ink-3);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);
  padding:11px 15px;display:inline-block;max-width:100%}

/* ---------- footer -------------------------------------------------------- */
.footer{border-top:1.5px solid var(--ink);padding:clamp(48px,6vw,72px) 0 30px;background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:clamp(28px,4vw,48px)}
.foot-blurb{font-size:14.5px;color:var(--ink-3);margin:20px 0 0;max-width:34ch}
.foot h4{font:700 10.5px var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
html[lang="ar"] .foot h4{font-family:var(--arab);letter-spacing:0}
.foot a,.foot .fl{color:var(--ink-2);text-decoration:none;font-size:14.5px;display:block;margin:0 0 11px}
.foot a:hover{color:var(--red)}
.foot-bar{margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
html[lang="ar"] .foot-bar{font-family:var(--arab);letter-spacing:0;text-transform:none}

/* ---------- entrance ------------------------------------------------------
   Deliberately small: 10px and one shot. Anything larger and it reads as a
   scroll-animation library, which is its own kind of tell.                  */
.rv{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1080px){
  .form-shell{grid-template-columns:1fr}
  .rail{flex-direction:row;flex-wrap:wrap;gap:28px;align-items:flex-start}
  .rail > *{flex:1 1 220px}
  .rail-note{margin-top:0;flex-basis:100%}
}
@media (max-width:940px){
  .burger{display:inline-flex}
  .nav{position:absolute;top:100%;inset-inline:0;flex-direction:column;gap:0;background:var(--paper);
    border-bottom:1px solid var(--rule-2);padding:6px 0;display:none;margin:0;
    box-shadow:0 14px 24px -18px rgba(35,31,32,.5)}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:15px var(--pad);font-size:13.5px}
  .nav a::after{inset-inline:var(--pad);bottom:8px}
  .hdr-act{margin-inline-start:auto}
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .card{border-inline-end:0;border-bottom:1px solid var(--rule)}
  .card:last-child{border-bottom:0}
  .track{grid-template-columns:1fr 1fr;gap:28px 22px}
  .track::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid-2{grid-template-columns:1fr}
  .track{grid-template-columns:1fr;gap:0}
  .wp{display:grid;grid-template-columns:46px 1fr;gap:0 16px;padding-bottom:24px;position:relative}
  .wp:not(:last-child)::after{content:"";position:absolute;inset-inline-start:22px;top:52px;bottom:6px;
    width:0;border-inline-start:1.5px dashed var(--rule-3)}
  .wp-n{margin-bottom:0;grid-row:span 2}
  .wp h3{align-self:center;margin-top:10px}
  .wp p{grid-column:2}
  .facts{grid-template-columns:1fr 1fr;gap:0 0}
  .fact{padding:14px 18px 14px 0;border-bottom:1px solid var(--rule);margin-inline-end:18px}
  .fact:nth-child(2n){border-inline-end:0;margin-inline-end:0}
  .fact:last-child{border-bottom:0}
  .foot-grid{grid-template-columns:1fr}
  .chart-ft{flex-direction:column;align-items:flex-start}
  h1{max-width:none}
}
@media (max-width:400px){
  .hero-cta .btn{width:100%}
  .chips{gap:8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}

@media print{
  .hdr,.hero-cta,.lang,.burger,.submit-row,.chart-ft{display:none}
  body{background:#fff}
  .section,.form-section{padding:24px 0}
}