/* ===========================================================================
   Atlantic · WordPress adaptation layer
   Loads AFTER atlantic.css. atlantic.css is NEVER edited (LAW L9).
   SHA-256 of the frozen file:
     0330b203747c2a822afe73c7ef0399948222960fb8115eace0802d4abcb79a7d

   Every rule here exists for ONE registered reason, listed in
   build-notes/BUILD-PLAN.md under "Intentional DOM deviations".
   Do not add anything to this file without registering it there.
   ===========================================================================

   DV1 · nav items are <a href> in WordPress, not <button>
   ---------------------------------------------------------------------------
   The design routed pages through React state, so its nav items were <button>.
   A real site needs real URLs: for SEO, for Polylang's translated slugs, for
   middle-click and open-in-new-tab, and because a <button> is not announced as
   a link by a screen reader.

   atlantic.css styles these by ELEMENT (`.ag-links button`), so anchors do not
   inherit them. The declarations below are copied VERBATIM from atlantic.css.
   They cannot drift, because atlantic.css is frozen and hash-checked.

   Already fine, no rule needed here:
     .ag-btn      - class-based. DESIGN's own Btn component renders <a> when
                    given href, so anchors were always supported.
     .ag-brand    - class-based.
     .ag-navitem-b- class-based.
     .ag-sheet a  - the mobile sheet already styled anchors.
   =========================================================================== */

/* --- from: .ag-links button --- */
.ag-links a{border:0;background:none;padding:6px 0;font-size:.9rem;font-weight:500;color:var(--ink);opacity:.72;cursor:pointer;position:relative;white-space:nowrap}
/* --- from: .ag-links button:hover --- */
.ag-links a:hover{opacity:1;color:var(--r)}
/* --- from: .ag-links button.on --- */
.ag-links a.on{opacity:1;font-weight:600}
/* --- from: .ag-links button.on:after --- */
.ag-links a.on:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--g)}

/* --- from: .ag-mega-links button --- */
.ag-mega-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 10px;text-align:start;padding:10px 13px;border:0;background:none;border-radius:11px;cursor:pointer;opacity:0;transform:translateY(7px);transition:background .2s var(--ease),opacity .4s var(--ease),transform .4s var(--ease)}
/* --- from: .ag-navitem.open .ag-mega-links button --- */
.ag-navitem.open .ag-mega-links a{opacity:1;transform:none}
/* --- from: .ag-mega-links button b --- */
.ag-mega-links a b{grid-column:1;font-size:.95rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
/* --- from: .ag-mega-links button span --- */
.ag-mega-links a span{grid-column:1;font-size:.78rem;color:var(--grey)}
/* --- from: .ag-mega-links button i --- */
.ag-mega-links a i{grid-column:2;grid-row:1/3;display:flex;color:var(--r);opacity:0;transform:translateX(-7px);transition:opacity .24s var(--ease),transform .24s var(--ease)}
/* --- from: .ag-mega-links button:hover --- */
.ag-mega-links a:hover{background:var(--sand)}
/* --- from: .ag-mega-links button:hover i --- */
.ag-mega-links a:hover i{opacity:1;transform:none}
/* --- from: .ag-mega-links button.on b --- */
.ag-mega-links a.on b{color:var(--r)}

/* --- DV1 side effect, caught by measurement ---
   atlantic.css sets `button{font:inherit;color:inherit}` but `a{color:var(--r)}`.
   So converting .ag-brand from <button> to <a> flipped its inherited colour from
   ink to brand red. It holds only <img> today so nothing is visible, but any
   currentColor descendant (e.g. the .ag-brand-tx text lockup variant) WOULD
   change. Restoring inherit makes the anchor behave exactly as the button did. */
.ag-nav .ag-brand{color:inherit}

/* --- midnight mood parity (design-tool mood; kept for safety) --- */
[data-mood=midnight] .ag-links a{color:#E6ECF1}
[data-mood=midnight] .ag-mega-links a b{color:#EAF0F5}
[data-mood=midnight] .ag-mega-links a span{color:#93A4B2}
[data-mood=midnight] .ag-mega-links a:hover{background:rgba(255,255,255,.07)}

/* ===========================================================================
   DV3 - footer navigation buttons become <a href>
   Same reason as DV1/DV2: these navigate. atlantic.css scopes them by element
   (`.ag-foot ul button`), so anchors need the same declarations. Copied
   verbatim from atlantic.css; it is frozen, so they cannot drift apart.

   NOT converted, correctly: "Chat with Atlantic AI" stays a <button> because
   it opens the on-page chat widget rather than navigating.
   =========================================================================== */

/* --- from: .ag-foot ul button --- */
.ag-foot ul a{border:0;background:none;padding:0;text-align:start;font-size:.9rem;color:rgba(255,255,255,.72);cursor:pointer}
/* --- from: .ag-foot ul button:hover --- */
.ag-foot ul a:hover{color:#fff}
/* --- from: .ag-foot ul button.ag-foot-cta --- */
.ag-foot ul a.ag-foot-cta{border:0;background:none;padding:0;margin-top:4px;font-size:.9rem;font-weight:600;color:var(--r);cursor:pointer;transition:color .3s var(--ease)}
/* --- from: .ag-foot ul button.ag-foot-cta:hover --- */
.ag-foot ul a.ag-foot-cta:hover{color:#fff}
/* --- from: .ag-foot-b nav button --- */
.ag-foot-b nav a{border:0;background:none;padding:0;font:inherit;font-size:.82rem;color:rgba(255,255,255,.5);cursor:pointer;transition:color .25s var(--ease)}
/* --- from: .ag-foot-b nav button:hover --- */
.ag-foot-b nav a:hover{color:#fff}

/* ===========================================================================
   DV9 - the legal documents become real PAGES, not just a modal.
   They need real URLs: for SEO, and so the quote email and the payment page can
   link to the terms a customer is agreeing to. DESIGN only rendered them inside
   LegalModal.

   .ag-lg is reused verbatim so the card looks identical. Only the three
   modal-specific constraints are neutralised - nothing is restyled.
   =========================================================================== */
.ag-lg-page{max-height:none;width:100%;margin-inline:auto;border:1px solid var(--line);box-shadow:var(--sh)}
.ag-lg-page .ag-lg-b{overflow:visible;flex:none}          /* no inner scrollbar on a page */
.ag-lg-page .ag-lg-h h3{font-size:1.9rem}                 /* page heading, not modal heading */

/* ===========================================================================
   D2 FIX - phone numbers render BACKWARDS in Dari and Pashto.
   Measured 6 Sep: source "+1 206 962 9882" painted as "9882 962 206 1+".
   The stored value and the tel: href were always correct; only the rendering
   was wrong, because a phone number is a neutral-plus-digits run inside an RTL
   paragraph and the bidi algorithm reorders the segments.

   DESIGN already solved this for the fare price
   (atlantic.css:178  [dir=rtl] .ag-fl-price{direction:ltr;unicode-bidi:isolate})
   but not for phone numbers. Same rule, applied where it was missed.
   Trap T5 predicted exactly this.
   =========================================================================== */
[dir=rtl] a[href^="tel:"],
[dir=rtl] .ag-tel span,
[dir=rtl] .ag-foot-addr a,
[dir=rtl] .ag-cofc li a{direction:ltr;unicode-bidi:isolate}
/* opt-in helper for a number that sits INSIDE a sentence, where CSS alone cannot
   reach it - wrap it in <span class="ag-ltr"> (or a <bdi>) in the markup */
[dir=rtl] .ag-ltr{direction:ltr;unicode-bidi:isolate}

/* ---------------------------------------------------------------------------
   DV12 - server-side error summary above a form.

   MIRRORS: .ag-pax-warn { color:#FFB3B0 } - the design's own "something is not
   finished" colour, on the same dark form card. DESIGN never needed this block
   because its forms could not fail: they were mocks that always succeeded.
   A real form can be rejected, and the person needs to be told what is missing.

   Sits inside .ag-form (dark, glass) on the quote page, and inside
   .ag-callback (light) on the contact page, so the colour is set per context
   rather than assumed.
   --------------------------------------------------------------------------- */
.ag-formerr{margin:0 0 18px;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(221,48,45,.45);background:rgba(221,48,45,.10);
  font-size:14.5px;line-height:1.5}
.ag-formerr b{display:block;margin-bottom:6px;font-weight:650}
.ag-formerr ul{margin:0;padding-inline-start:18px}
.ag-formerr li{margin:3px 0}

/* on the dark quote card, borrow .ag-pax-warn's exact colour */
.ag-form .ag-formerr{color:#FFB3B0;border-color:rgba(255,179,176,.4);
  background:rgba(255,179,176,.10)}
/* on the light contact card, the design's own red reads correctly */
.ag-callback .ag-formerr{color:var(--r3)}

/* The success state is DESIGN's own .ag-sent / .ag-cb-done, and NO CSS is added
   for it. Checked before writing any: atlantic.css already styles .ag-sent,
   .ag-sent-ico, .ag-sent-l and .ag-sent-l li in full.

   In particular .ag-sent-l is NOT given list-style:none or padding:0 here.
   DESIGN's own markup is an <ol class="ag-sent-l"> too, so the browser's
   default list padding is part of the layout the CEO approved. Zeroing it
   would have shifted the row - a "tidy-up" that is really an unapproved
   design change. The markers are already gone because the design sets
   display:flex on the li, which stops it being a list-item at all.

   The only markup difference is <a class="ag-btn"> in place of DESIGN's
   <button>, which is DV1's reason again and needs no new CSS. */

/* ---------------------------------------------------------------------------
   DV13 - the reviews section's "Write your review" control is an <a>, not a
   <button>.

   MIRRORS: .ag-rvw-cta in atlantic.css, which styles it as a button element.

   Same reason as DV1 and DV2: it now navigates to a real page (/review/), and a
   <button> is not a link. It cannot be middle-clicked, opened in a new tab,
   bookmarked, or read as a link by a screen reader.

   WHY IT NAVIGATES AT ALL: the reviews section is hidden until a real review
   exists (CEO, 8 Sep). A composer inside that section could never be reached to
   write the FIRST review, so the composer is its own page and this is the way in.

   atlantic.css styles .ag-rvw-cta by class, not by element, so everything else
   about it already applies. Only the two things an anchor brings with it need
   answering.
   --------------------------------------------------------------------------- */
a.ag-rvw-cta{text-decoration:none}
a.ag-rvw-cta:hover{color:#fff}


/* ---------------------------------------------------------------------------
   THE FOOTER LOCKUP, on the dark footer rather than on a white card.

   Client, 12 Sep: use the sign-in screen's logo on every footer.

   atlantic.css draws .ag-foot-lockup on a white panel - background:#fff, 12/16
   padding, 16px radius - and it HAD to, because the logo it was given has its
   wordmark in charcoal and charcoal on a dark footer is unreadable. The white
   card was carrying the logo, not decorating it.

   The white-ink lockup does not need carrying, so the card goes. Only the
   background is dropped: the padding still insets it inside its own box, and
   the radius is invisible without a fill.

   This lives here, not in atlantic.css, because that file is the frozen design
   and is never edited. wp-adapt.css loads after it and before mobile.css, so
   the phone footer's own sizing still wins.
   --------------------------------------------------------------------------- */
.ag-foot-lockup{background:none}
/* .agm-pgfoot-lockup{background:none} used to be here and never applied - mobile.css loads after
   this file. The real fix is in mobile.css (26 Sep). */

/* ---------------------------------------------------------------- no sideways scroll (8 Oct)
   The footer's two decorative corner pieces (.ag-foot::before/::after) sit 14px outside the
   page on purpose - and the right-hand one gave EVERY page 14px of sideways scroll on a
   desktop with ordinary scrollbars (measured: scrollWidth 1279 against 1265). `clip`, not
   `hidden`: it creates no scroll container, so sticky and fixed elements behave exactly as
   before, and what it trims was already off-screen. */
html { overflow-x: clip; }

/* The payment page's definition lists (8 Oct). DESIGN draws .ag-pay-meta and .ag-stub-meta as
   grids and assumes no browser indent on <dd>; WordPress leaves the default 40px, which pushed
   every value sideways on a phone. */
.ag-pay-meta dd, .ag-stub-meta dd, .ag-stub-meta dt { margin: 0; }

/* PRINTING THE RECEIPT (audit 9 Oct, #20). "Print receipt" on the confirmation page printed the
   whole dark page: nav, chat, the desk band, the buttons. On paper only the confirmation band
   stays, on white. Nothing in the frozen design file is touched. */
@media print {
	.ag-nav, .agc, footer, .ag-foot, .ag-footer, .ag-deskcta, .ag-ok-act, .ag-ok-resend, .ag-phero .ag-bg, .ag-hero-ctl { display: none !important; }
	body, .ag-okband, .ag-pageband, .ag-sec { background: #fff !important; color: #111 !important; }
	.ag-ok h2, .ag-ok p, .ag-ok b, .ag-ok span, .ag-ok dt, .ag-ok dd, .ag-eyebrow { color: #111 !important; }
	.ag-card, .ag-stub { border: 1px solid #ccc !important; box-shadow: none !important; background: #fff !important; }
	.ag-ok-ring { display: none !important; }
}

/* EXPRESS CHECKOUT ON THE PAYMENT PAGE (client, 15 Oct). A label above the wallet row, the
   "More payment options" button and the panel it opens (page-payment.php, assets/js/pay.js).
   Same language as DESIGN's tabs above it: 14px radius, the 1px white-14% line, the red focus.
   The panel opens by grid rows 0fr -> 1fr, so the wallets inside keep their real width while
   closed (Stripe measures them) and the panel needs no fixed height. */
.ag-pay-xph { margin: 0 0 12px; font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ag-pay-more-p { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .4s var(--ease), opacity .3s, visibility 0s linear .4s; }
.ag-pay-more-p > div { min-height: 0; overflow: hidden; }
.ag-pay-more-p > div > div { padding-top: 10px; }
.ag-pay-more-p.open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .4s var(--ease), opacity .3s .08s, visibility 0s; }
.ag-pay-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 11px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: rgba(255,255,255,.82); font: inherit; font-size: .86rem; font-weight: 500; cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.ag-pay-more:hover { border-color: rgba(255,255,255,.32); color: #F3F6F8; }
.ag-pay-more:focus-visible { outline: 2px solid var(--r); outline-offset: 2px; }
.ag-pay-more svg { flex: 0 0 auto; transition: transform .35s var(--ease); }
.ag-pay-more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ag-pay-more-p, .ag-pay-more svg { transition: none; } }

/* CASH APP PAY under "More payment options" (client, 15 Oct): our own button, because Stripe's
   express row has none. Sized to sit with Stripe's buttons above it: 44px tall, full width,
   the dark Cash App Pay style with its green mark, a thin line so it reads on the dark card. */
.ag-pay-cash { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 44px; margin-top: 8px; padding: 0 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: #000; color: #fff; font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: opacity .2s, border-color .2s; }
.ag-pay-cash:hover { border-color: rgba(255,255,255,.4); }
.ag-pay-cash:disabled { opacity: .6; cursor: default; }
.ag-pay-cash:focus-visible { outline: 2px solid var(--r); outline-offset: 2px; }
.ag-pay-cash svg { flex: 0 0 auto; }

/* The patch over the circled "S" on Stripe's Amazon Pay button (client and CEO, 15 Oct). Placed
   by assets/js/pay.js; Amazon Pay's own yellow; clicks pass straight through to the button. */
#att-pay-express-amz { position: relative; }
.ag-pay-amz-patch { position: absolute; z-index: 2; width: 26px; height: 23px; border-radius: 4px; background: rgb(255,216,20); pointer-events: none; }
/* Amazon Pay's own hover colour (sampled 15 Oct): the mouse over its frame is the mouse over the
   button, so the patch darkens at the same moment the button does. */
#att-pay-express-amz:hover .ag-pay-amz-patch,
#att-pay-express-amz.hot .ag-pay-amz-patch { background: rgb(247,202,0); }
/* Amazon Pay and Link, each in its own frame, side by side with Stripe's 8px gap; one alone
   takes the whole row (pay.js sets .one). The 10px above comes from .ag-pay-more-p > div > div. */
.ag-pay-xrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ag-pay-xrow.one { grid-template-columns: 1fr; }

/* Card first, Express checkout below the Pay button (client, 15 Oct). Inside .ag-pay-foot's
   18px grid the divider needs no extra margin above; the label above the card form gets the
   same space below it as the Express checkout label. */
.ag-pay-xp .ag-pay-or { margin-top: 4px; }
.ag-pay-form .ag-pay-xph[data-att-pane="full"] { margin-bottom: 12px; }

/* "Prefer Stripe's own page?" (client, 15 Oct). DESIGN caps .ag-pay-note at 70ch, which left this
   one line off-centre under the full-width buttons: it now spans the card and centres the words
   and the button together (they wrap onto two centred lines on a narrow phone). The button wears
   Stripe's own brand colour, #635BFF, since it takes the customer to Stripe. */
.ag-pay-note.ag-pay-alt { max-width: none; margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.ag-pay-alt .ag-ws-cancel { padding: 10px 18px; border-color: #635BFF; background: #635BFF; color: #fff; font-weight: 600; }
.ag-pay-alt .ag-ws-cancel:hover { border-color: #5851EA; background: #5851EA; color: #fff; }
.ag-pay-alt .ag-ws-cancel:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ag-pay-alt .ag-ws-cancel:disabled { opacity: .6; cursor: default; }

/* ONE FORM, SIX SERVICES (CEO, 21 Oct). theme.js section 25 hides the parts of the quote form
   a service does not use with the hidden attribute; DESIGN's own display rules (.ag-field flex,
   .ag-paxb, .ag-row grid) would otherwise beat the browser's [hidden]. Nothing here draws
   anything new: the chooser and the Hajj/Marhaba fields are the form's own chips and inputs. */
.ag-form [hidden] { display: none !important; }
/* the service-only fields sit in the column's own flex gap, as if they were loose fields */
.ag-svx { display: contents; }
/* "Where to?" alone on its row once "Flying from" is gone */
.ag-row.ag-row-one { grid-template-columns: 1fr; }
/* a numbers-only service (hotel, holiday, Marhaba): the steppers stay, the passport cards go */
.ag-paxs-count .ag-trv,
.ag-paxs-count .ag-pax-cv { display: none !important; }
.ag-paxs-count .ag-pax-t { cursor: default; }
/* the Marhaba airport is fixed and read-only: customer.css's .ag-inp[readonly] already styles it */
/* The sixth service card (21 Oct). atlantic.css frames each medallion photo by the card's
   POSITION (1-3 masked, 4-5 lowered 13%); Marhaba moved from 5th to 6th, so 6 gets 5's framing. */
.ag-svc:nth-child(6) .ag-med-face img { transform: translateY(13%) scale(1.72); }
.ag-svc:nth-child(6):hover .ag-med-face img { transform: translateY(13%) scale(1.8); }

/* THE RED RINGS ON AN iPHONE (client, 21 Oct: "those red circles are broken").
   Both rings are <svg> elements placed with inset alone (-14px home, -12px Services page) and
   no width or height. Chromium stretches an absolutely placed SVG to fill its inset box;
   WebKit (every iPhone browser, and Safari on a Mac) does not - it sizes the SVG to the
   container and pins it to top/left, so the ring sat 12-14px up and to the left of the
   white circle, and the spinning home ring turned around the wrong centre. The ring is now
   given its box outright - the same geometry, stated in a way every engine agrees on - so it
   is locked concentric to the circle it frames whatever the browser. */
.ag-med-ring {
	top: -14px; left: -14px; right: auto; bottom: auto;
	width: calc(100% + 28px); height: calc(100% + 28px);
	transform-box: border-box; transform-origin: 50% 50%;
}
.ag-svl-ring {
	top: -12px; left: -12px; right: auto; bottom: auto;
	width: calc(100% + 24px); height: calc(100% + 24px);
	transform-box: border-box; transform-origin: 50% 50%;
}

/* THE EMPTY BAND ABOVE "Request a quote" (client's iPhone, 21 Oct). The Services page grid gives
   every row the height of the tallest card (grid-auto-rows:1fr) - right for two cards side by
   side, wrong once they stack: every card on a phone or tablet grew to the height of the
   longest one (now the CEO's Marhaba paragraph) and left a hole above its button. One column
   = each card its own height. */
@media (max-width: 1000px) { .ag-svl-grid { grid-auto-rows: auto; } }

/* THE PASSPORT WARNING UNDER "WHO IS TRAVELLING" (client, 21 Oct: "change the icon to warning and
   flashing red, make it centre and a little bit bigger"). Its own class, because .ag-pax-note is
   shared with the review page, which keeps its look. Under reduced motion the icon stays red and
   still - a flashing element is exactly what that setting asks a site not to do. */
.ag-pax-note.ag-pax-alert { justify-content: center; align-items: center; text-align: center; gap: 10px; font-size: .86rem; color: rgba(255,255,255,.72); }
.ag-pax-alert .ag-pax-alert-i { width: 22px; height: 22px; margin-top: 0; color: #FF3B30; animation: agWarnFlash 1.1s ease-in-out infinite; }
@keyframes agWarnFlash { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 59, 48, .85)); } 50% { opacity: .25; filter: none; } }
/* on a phone the sentence wraps to several lines: the icon sits centred ABOVE it, not beside it */
@media (max-width: 820px) { .ag-pax-note.ag-pax-alert { font-size: .9rem; flex-direction: column; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .ag-pax-alert .ag-pax-alert-i { animation: none; } }

/* "My Requests" in the line under "Tell us about your trip." (client, 21 Oct): underlined and linked -
   My requests when signed in, the registration form when not (inc/customer-gate.php). */
.att-myreq { cursor: pointer; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.att-myreq:hover, .att-myreq:focus-visible { color: #fff; text-decoration-thickness: 2px; }

/* The quote thank-you card's two buttons (21 Oct): "Go to My Requests" first, side by side, stacked on a phone. */
.ag-sent-act .ag-btn { cursor: pointer; }
.ag-sent-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 520px) { .ag-sent-act { flex-direction: column; align-self: stretch; } .ag-sent-act .ag-btn { justify-content: center; } }

/* THE DEAL WINDOW'S FILM (CEO, 21 Oct): the country's 30-second film over the photograph, in the
   photograph's own frame and colour grade; it fades in only once it is really playing, so a slow
   connection sees the photo, never a black box. The dark gradient and the caption stay on top. */
.ag-bd-ph > .ag-bd-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.ag-bd-ph.has-vid > .ag-bd-vid { opacity: 1; }

/* THE DEAL, FULL SCREEN (CEO, 21 Oct) - theme.js section 21. One layer over the page that scrolls
   by itself; the film is fixed inside it, so it stays put and keeps playing while the words and the
   form scroll up over it. .ag-dfs-dim darkens it as they scroll (opacity set from the scroll). The
   form is the site's own #quote section, borrowed from the phone sheet - it arrives wearing its page
   clothes (a dark slab), which come off here so it sits on the film. z-index 110: over the nav and
   the chat (below 100), under the WhatsApp scrim (120) and the form's own pop-ups (200). */
.ag-dfs { position: fixed; inset: 0; z-index: 110; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #0A1117; color: #fff; animation: agDfsIn .45s var(--ease) both; }
@keyframes agDfsIn { from { opacity: 0; } to { opacity: 1; } }
.ag-dfs-film { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0A1117; pointer-events: none; }
.ag-dfs-film > img, .ag-dfs-film > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); }
.ag-dfs-film > video { opacity: 0; transition: opacity .8s var(--ease); }
.ag-dfs-film.has-vid > video { opacity: 1; }
.ag-dfs-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,13,18,.5) 0%, rgba(8,13,18,0) 20%, rgba(8,13,18,0) 48%, rgba(8,13,18,.82) 100%); }
.ag-dfs-dim { position: absolute; inset: 0; z-index: 1; background: rgba(8,13,18,.66); opacity: 0; }
.ag-dfs-x { position: fixed; z-index: 3; top: max(18px, env(safe-area-inset-top)); inset-inline-end: 18px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(9,16,21,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease), transform .35s var(--ease); }
.ag-dfs-x:hover, .ag-dfs-x:focus-visible { background: var(--r); border-color: var(--r); transform: rotate(90deg); }

.ag-dfs-hero { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 96px clamp(20px, 5vw, 64px) clamp(88px, 13vh, 130px); }
.ag-dfs-hero-in { width: min(1140px, 100%); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ag-dfs-hero .ag-bd-chip { position: static; }
.ag-dfs-name { display: flex; align-items: center; gap: 18px; }
.ag-dfs-name h2 { margin: 0; font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 600; letter-spacing: -.045em; line-height: .95; text-transform: uppercase; text-shadow: 0 6px 40px rgba(0,0,0,.45); }
.ag-dfs-name .ag-bd-flag { height: clamp(34px, 4.4vw, 58px); }
.ag-dfs-s { margin: 0; font-size: clamp(1rem, 1.6vw, 1.3rem); color: rgba(255,255,255,.9); text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.ag-dfs-hero .ag-dfs-go { margin-top: 8px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
.ag-dfs-cue { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px; }
.ag-dfs-cue i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: agDfsCue 1.6s ease-in-out infinite; }
@keyframes agDfsCue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

.ag-dfs-body { position: relative; z-index: 1; width: min(1140px, 100%); margin: 0 auto; padding: 0 clamp(14px, 3vw, 24px) clamp(48px, 9vh, 96px); display: flex; flex-direction: column; gap: 18px; }
.ag-dfs-grid { display: grid; grid-template-columns: 1.26fr .74fr; gap: 14px; }
.ag-dfs-grid .ag-bd-f { grid-column: 1 / -1; }
.ag-dfs .ag-bd-t, .ag-dfs .ag-bd-f > div { background: rgba(12,20,27,.7); border-color: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.ag-dfs .ag-bd-t:hover { background: rgba(12,20,27,.78); }
.ag-dfs .ag-bd-f > div:last-child { background: rgba(221,48,45,.3); border-color: rgba(221,48,45,.6); }

/* the borrowed form: no slab of its own, its heading over the film, its card as frosted glass */
.ag-dfs-form > .ag-sec, .ag-dfs-sec { margin: 0; padding: clamp(24px, 5vh, 56px) 0 0; background: none; border-radius: 0; overflow: visible; }
.ag-dfs-form > .ag-sec::before, .ag-dfs-form > .ag-sec::after { display: none; }
.ag-dfs-form .ag-wrap { width: 100%; max-width: none; padding: 0; }
.ag-dfs-form .ag-head { margin-inline: auto; text-align: center; }
.ag-dfs-form .ag-head .ag-h2 { text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.ag-dfs-form .ag-head-p { color: rgba(255,255,255,.88); text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.ag-dfs-form .ag-form { background: linear-gradient(180deg, rgba(10,17,23,.82), rgba(10,17,23,.74)); -webkit-backdrop-filter: blur(22px) saturate(120%); backdrop-filter: blur(22px) saturate(120%); border-color: rgba(255,255,255,.16); }
.ag-dfs [data-reveal] { opacity: 1; transform: none; }
.ag-dfs .ag-card .ag-btn-g { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.ag-dfs .ag-card .ag-btn-g:hover { background: rgba(255,255,255,.24); color: #fff; border-color: rgba(255,255,255,.45); }

@media (max-width: 820px) {
	.ag-dfs-hero { padding: 84px 18px 96px; }
	.ag-dfs-name { gap: 13px; }
	.ag-dfs-hero .ag-dfs-go { width: 100%; }
	.ag-dfs-body { padding: 0 12px calc(var(--ag-mbot, 0px) + 40px); gap: 12px; }
	.ag-dfs-grid { grid-template-columns: 1fr; gap: 12px; }
	.ag-dfs-grid .ag-bd-f { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ag-dfs .ag-bd-t { padding: 20px 20px; }
	/* frosted glass over a playing film costs a phone every frame: solid enough to read instead */
	.ag-dfs .ag-bd-t, .ag-dfs .ag-bd-f > div, .ag-dfs-form .ag-form { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12,20,27,.86); }
	.ag-dfs .ag-bd-f > div:last-child { background: rgba(90,24,26,.88); }
	.ag-dfs-x { width: 44px; height: 44px; top: max(14px, env(safe-area-inset-top)); inset-inline-end: 14px; }
	.ag-dfs-form .ag-head { margin-bottom: 18px; padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.ag-dfs { animation: none; }
	.ag-dfs-cue i { animation: none; }
}

/* "How booking works": its intro sits UNDER the heading (client, 21 Oct), in the left column. */
.ag-head-sub { margin-top: 16px; max-width: 54ch; }

/* EVERY ROW ITS OWN HEIGHT (24 Oct). DESIGN's grid-auto-rows:1fr makes every row as tall as the
   tallest one; with the CEO's three Corporate paragraphs that put about 300px of empty space
   above every other card's button. Each row now takes the taller of its own two cards (they
   still match each other); the lone seventh card takes its own height. */
.ag-svl-grid { grid-auto-rows: auto; }

/* The seventh service (24 Oct) carries the CEO's three paragraphs on the Services page; DESIGN set
   .ag-svl-b p to margin 0 for a single paragraph, so the second and third get a line's space. */
.ag-svl-b p + p { margin-top: .75em; }

/* Corporate Travel page (24 Oct): the CEO's three paragraphs live in the hero, so the lead is
   wider than the one-line DESIGN lead and its paragraphs get a line's space; the two facts use
   the Services card chips, left-aligned under the text. */
.ag-corp-lead { max-width: 66ch; }
.ag-corp-lead p + p { margin-top: .7em; }
.ag-corp-f { justify-content: flex-start; margin: 22px 0 0; }

/* CEO, 24 Oct: the route caption under the hero ("USA -> Kabul - via Dubai", "Holiday packages,
   priced against the fare of the day") belongs to the HOME page only. Every inside page uses
   .ag-phero, the home page .ag-hero, so this takes it off all of them and leaves home alone.
   visibility (not display) so the slide dots keep their place on the right. */
.ag-phero .ag-hero-cap { visibility: hidden; }

/* ---------------------------------------------------------------- Corporate Travel: the company sign-up (24 Oct)
   template-parts/corporate-signup.php. Atlantic's own parts (eyebrow, h2, the red-glass
   call-back card, .ag-field/.ag-inp, the red button); this only lays them out and switches the
   three steps (pick / form / done) that assets/js/corporate.js moves between. */
.ag-corp { max-width: 640px; margin: 0 auto; scroll-margin-top: 110px; }
.ag-corp[data-step="pick"] .ag-corp-formrow, .ag-corp[data-step="pick"] .ag-corp-done,
.ag-corp[data-step="form"] .ag-corp-pick, .ag-corp[data-step="form"] .ag-corp-done,
.ag-corp[data-step="done"] .ag-corp-pick, .ag-corp[data-step="done"] .ag-corp-formrow { display: none; }
.ag-corp-pick { text-align: center; }
.ag-corp-q { margin: 16px 0 30px; font-size: clamp(1rem, 1.3vw, 1.15rem); color: rgba(255,255,255,.74); }
.ag-corp-opt {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
	width: min(100%, 340px); margin: 0 auto; padding: 30px 26px 26px; border-radius: 20px; cursor: pointer;
	color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
	border: 1px solid rgba(255,255,255,.16); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 30px 70px -40px rgba(0,0,0,.7);
	transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.ag-corp-opt:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.ag-corp-opt:has(.ag-corp-tick:checked) {
	border-color: rgba(255,120,116,.75);
	background: linear-gradient(180deg, rgba(221,48,45,.24), rgba(10,17,23,.6));
}
.ag-corp-tick { position: absolute; top: 16px; left: 16px; width: 20px; height: 20px; margin: 0; accent-color: var(--r); cursor: pointer; }
.ag-corp-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #FF8A84; background: rgba(221,48,45,.14); border: 1px solid rgba(255,120,116,.3); }
.ag-corp-t { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
/* The plane FLIES (client, 24 Oct): it stays in the middle of its round badge, bobbing a little,
   while clouds stream past it inside the circle from upper right to lower left - against its
   north-east heading - and the badge clips them at the border. Each cloud keeps its own lane
   (--k, across the stream) and its own speed and delay, so the sky never repeats in step. */
.ag-corp-ic { position: relative; overflow: hidden; }
.ag-corp-sky { position: absolute; inset: 0; }
.ag-corp-sky i {
	position: absolute; left: 50%; top: 50%; display: block; width: calc(var(--w) * var(--s, 1)); margin: calc(var(--w) * var(--s, 1) * -.33) 0 0 calc(var(--w) * var(--s, 1) * -.5);
	color: rgba(255,255,255,var(--a)); animation: agCorpCloud var(--t) linear infinite; animation-delay: var(--d);
}
.ag-corp-sky i svg { display: block; width: 100%; height: auto; }
.ag-corp-sky .c1 { --w: 22px; --a: .5;  --k: -15px; --t: 2.6s; --d: 0s; }
.ag-corp-sky .c2 { --w: 14px; --a: .32; --k: 4px;   --t: 3.4s; --d: -1.2s; }
.ag-corp-sky .c3 { --w: 26px; --a: .42; --k: 17px;  --t: 2.9s; --d: -2.1s; }
.ag-corp-sky .c4 { --w: 12px; --a: .28; --k: -4px;  --t: 3.8s; --d: -.6s; }
@keyframes agCorpCloud {
	from { transform: translate(calc((var(--k) + 50px) * var(--s, 1)), calc((var(--k) - 50px) * var(--s, 1))); }
	to   { transform: translate(calc((var(--k) - 50px) * var(--s, 1)), calc((var(--k) + 50px) * var(--s, 1))); }
}
.ag-corp-plane { position: relative; z-index: 1; transform: rotate(45deg); animation: agCorpBob 2.4s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
@keyframes agCorpBob {
	0%, 100% { transform: rotate(45deg) translate(0, 0); }
	50%      { transform: rotate(43deg) translate(0, -2.5px); }
}
.ag-corp-opt:hover .ag-corp-sky i { animation-duration: calc(var(--t) * .6); }
@media (prefers-reduced-motion: reduce) { .ag-corp-plane, .ag-corp-sky i { animation: none; } }
.ag-corp-go { margin-top: 30px; }
/* .ag-btn is display:inline-flex, which beats the [hidden] attribute - Get started waits for the tick. */
.ag-corp-go[hidden], .ag-corp-hint[hidden] { display: none; }
.ag-corp-form, .ag-corp-done { padding: clamp(22px, 3vw, 34px); }
.ag-corp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .86rem; color: rgba(255,255,255,.66); }
.ag-corp-back:hover { color: #fff; }
.ag-corp-form .ag-cb-p { margin-bottom: 18px; }
/* The sign-up's badge is twice the card's (client): --s doubles every cloud's size, lane and run. */
.ag-corp-formic { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 4px 0 20px; }
.ag-corp-formic-t { font-size: 1.15rem; font-weight: 600; letter-spacing: .01em; color: #fff; text-align: center; }
.ag-corp-formic .ag-corp-ic { --s: 2; width: 128px; height: 128px; }
.ag-corp-formic .ag-corp-plane { width: 60px; height: 60px; }
.ag-corp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ag-corp-opt-l { font-style: normal; font-weight: 400; color: rgba(255,255,255,.5); }
.ag-corp-hint { font-size: .82rem; line-height: 1.45; color: #FF8A7A; }
.ag-corp-legal { margin: 2px 0 0; font-size: .8rem; line-height: 1.55; color: rgba(255,255,255,.56); }
.ag-corp-legal a { color: rgba(255,255,255,.82); text-decoration: underline; text-underline-offset: 2px; }
.ag-corp-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ag-corp-ok { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; background: var(--g, #DD302D); }
.ag-corp-ref { margin: 4px 0 0; font-size: .9rem; color: rgba(255,255,255,.7); }
.ag-corp-ref b { color: #fff; letter-spacing: .04em; }
@media (max-width: 560px) { .ag-corp-two { grid-template-columns: 1fr; } }
/* Phones: the band's own padding is tight there, so the card would touch the footer. */
@media (max-width: 820px) { .ag-corp { padding: 14px 0 48px; } }

/* The slideshow beside the sign-up form (client, 24 Oct): the form keeps its width on the left,
   a tall rounded panel on the right crossfades the photos with a slow zoom and a caption in the
   CEO's words; dots switch them. Below 980px the form has the screen to itself. */
/* Form step (client): the slideshow is as tall as the form and twice its first width (~1040px),
   so the page column widens on this step only - form 600px + 26px + slideshow up to 1040px. */
.ag-corp-wrap:has(.ag-corp[data-step="form"]) { max-width: 1880px; }
.ag-corp[data-step="form"] { max-width: 1826px; }
.ag-corp-formrow { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1200px); justify-content: center; gap: 26px; align-items: stretch; }
.ag-corp-show {
	/* exactly as tall as the form beside it (the grid row stretches it) */
	position: relative; align-self: stretch; min-height: 480px;
	overflow: hidden; border-radius: 24px; background: #0d151c;
	border: 1px solid rgba(255,255,255,.14); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 48px 100px -46px rgba(0,0,0,.85);
}
.ag-corp-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.ag-corp-slide.on { opacity: 1; }
/* Every photo FILLS the frame (client: "zoom them on the frame"): cover, with each photo's own
   focus point (inline object-position) keeping its subject in view, and a slow zoom. */
.ag-corp-slide-bg { display: none; }
.ag-corp-slide img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 7s linear; }
.ag-corp-slide.on img { transform: scale(1.07); }
/* previous / next */
.ag-corp-nav {
	position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px;
	padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
	background: rgba(10,17,23,.38); border: 1px solid rgba(255,255,255,.28);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.ag-corp-nav.prev { left: 18px; }
.ag-corp-nav.next { right: 18px; }
.ag-corp-nav:hover { background: #DD302D; border-color: #DD302D; transform: scale(1.06); }
.ag-corp-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ag-corp-slide::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10,17,23,0) 42%, rgba(10,17,23,.9) 100%), linear-gradient(118deg, rgba(221,48,45,.2), rgba(221,48,45,0) 55%);
}
.ag-corp-slide figcaption {
	position: absolute; left: 30px; right: 30px; bottom: 58px; z-index: 1; display: flex; flex-direction: column; gap: 9px; color: #fff;
	opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease) .35s, transform .8s var(--ease) .35s;
}
.ag-corp-slide.on figcaption { opacity: 1; transform: none; }
.ag-corp-slide figcaption span { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #FFB4AE; }
.ag-corp-slide figcaption b { max-width: 22ch; font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 600; line-height: 1.25; }
.ag-corp-dots { position: absolute; left: 30px; bottom: 28px; z-index: 2; display: flex; gap: 8px; }
.ag-corp-dots button { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; background: rgba(255,255,255,.35); transition: width .4s var(--ease), background .4s var(--ease); }
.ag-corp-dots button.on { width: 42px; background: #DD302D; }
@media (max-width: 980px) { .ag-corp-formrow { grid-template-columns: 1fr; } .ag-corp-show { display: none; } }
@media (prefers-reduced-motion: reduce) { .ag-corp-slide img, .ag-corp-slide.on img { transition: none; transform: none; } }

/* Home slider FILMS (24 Oct, inc/home-video.php): the design's slow photo zoom and brightness
   filter would be redrawn on every frame of a 4K film - costly on modest laptops and phones, and a
   film has its own motion. Films get neither; the hero's own scrim still darkens them. */
.ag-hero .ag-bg-vid, .ag-hero .ag-bg-vid.on, .ag-phero .ag-bg-vid, .ag-phero .ag-bg-vid.on { transform: none; filter: none; will-change: opacity; background: #0d151c; }
/* NO FADE between films (client, 25 Oct): "this is not a video" - one film cuts straight to the next. */
.ag-hero .ag-bg-vid, .ag-hero .ag-bg-vid.on, .ag-phero .ag-bg-vid, .ag-phero .ag-bg-vid.on { transition: none; }

/* Home Services cards - "Request a quote" on hover (client, 25 Oct): the site-wide a:hover in
   atlantic.css (dark red, specificity 0,1,1) out-ranked the button's own white text (.ag-svc-go,
   0,1,0), so the text went dark red on the red gradient. White, as the button was designed. */
.ag-svc-go:hover, .ag-svc-go:focus-visible, .ag-svc:hover .ag-svc-go { color: #fff; }

/* HOME HERO, CEO 25 Oct: (1) the prices come off - "FROM $892 APPROX" goes, the rotating city and
   its route line stay (theme.js still builds the price spans; they are simply not shown); (2) the
   glass box sits LOW, just above the caption line ("Afghanistan · the Bamyan Valley"), instead of
   in the middle of the screen. The caption is tied to the bottom of the hero rather than to 100vh,
   so the box and the caption keep the same gap on short and tall screens. Phones have their own
   low layout already (mobile.css). */
.ag-hero .ag-fl-from, .ag-hero .ag-fl-price { display: none; }
@media (min-width: 821px) {
	.ag-hero { align-items: flex-end; }
	.ag-hero .ag-hero-ctl { top: auto; bottom: 96px; }
	.ag-hero .ag-hero-in { padding-bottom: 136px; }
}

/* THE QUOTE PAGE INSIDE THE COMPANY PORTAL (27 Oct, page-quote.php embed mode). The portal room
   around it (company/request.php) already carries the title, so the page's hero and its section
   heading step aside; the form itself is untouched. */
.att-embed .ag-phero,
.att-embed #quote .ag-head { display: none; }
.att-embed .ag-pageband,
.att-embed .ag-homeband { margin-top: 0; }
.att-embed #quote { padding-top: 22px; padding-bottom: 28px; }
.att-embed .ag-site { padding-top: 0; }

/* The Corporate Account Terms & Privacy tick on the company sign-up (29 Oct 2026, template-parts/corporate-signup.php). */
.ag-corp-agree { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; line-height: 1.55; color: rgba(255,255,255,.72); cursor: pointer; }
.ag-corp-agree input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--att-red, #E11226); }
.ag-corp-agree a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.ag-corp-agree.err span { color: #FF8A7A; }

/* Live chat in the assistant (client, 30 Oct 2026): the two things that are always on show. */
.agc-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.75); }
.agc-live-b, .agc-live-call { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 10px; border-radius: 100px; font: inherit; font-size: .84rem; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; }
.agc-live-b { border: 0; background: var(--g); color: #fff; }
.agc-live-call { border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.78); color: var(--ink); }
.agc-live-call:hover { border-color: var(--r); color: var(--r); }
.agc-sys { align-self: center; max-width: 92%; padding: 2px 10px; font-size: .78rem; line-height: 1.4; text-align: center; color: #5B6670; }
.agc-who { display: block; margin-bottom: 3px; font-size: .76rem; color: var(--r); }
.agc-liveform form { display: grid; gap: 8px; margin-top: 10px; }
.agc-liveform input { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid rgba(16,27,36,.16); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.agc-liveform button { padding: 11px 14px; border: 0; border-radius: 100px; background: var(--g); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.agc-liveform button:disabled { opacity: .6; cursor: default; }

/* CLIENT 30 Oct (polish, home hero): the price note sits at the right, under Request a quote, and the
   "via Dubai" pill shares a row with the two buttons. Wide screens only: below 1100px the three do
   not fit on one line, so they stack as before. Phones are untouched. */
@media (min-width: 821px) {
	.ag-hero-copy .ag-hero-act { align-items: flex-end; }
	.ag-hero-copy .ag-micro { justify-content: flex-end; text-align: right; font-size: .75rem; gap: 6px; }
}
@media (min-width: 1100px) {
	.ag-hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
	.ag-hero-copy > .ag-h1 { grid-column: 1 / -1; }
	.ag-hero-copy > .ag-fld { grid-column: 1; margin: 32px 0 0; min-height: 54px; display: flex; align-items: center; }
	.ag-hero-copy > .ag-hero-act { grid-column: 2; margin-inline-start: 0; }
}