/* =============================================================================
   ATLANTIC · THE PHONE VIEW

   Design source: "_handoff/Atlantic Mobile view new/Atlantic Mobile App.html"
   (framed by "Atlantic Mobile Interface.html" - iPhone 16 Pro 393x852 and
   Pixel 9 412x915). That folder is the CURRENT drop. The earlier
   "Atlantic Travel & Tours Mobile View Design" folder was an older export and
   has been deleted by the client; nothing here comes from it.

   Every number below is copied from that file. Where the design names a class
   the site does not use, the site's own class carries the rule instead - the
   mock was drawn from this site, so the mapping is one to one apart from the
   ag- prefix:

       design      site                design      site
       .top        .ag-nav             .svl-*      .ag-svl-*
       .hcopy      .ag-hero-copy       .bo-*       .ag-bo-*
       .rail/.svc  .ag-svcs/.ag-svc    .cofc       .ag-cofc
       .dest       .ag-jd-c            .chart      .agr-rt
       .note       .ag-note            .reel-c     .ag-reel-c
       .panel      .agm-panel          .qsheet     the real /quote/ page

   WHY THIS IS A STYLESHEET AND NOT A SECOND SET OF TEMPLATES
   Measured on the live host before a line was written:

       cache-control: public, max-age=2678400        (31 days)
       vary: Accept-Encoding                          (User-Agent is NOT in it)
       cf-cache-status: HIT

   The same URL fetched with a desktop and an iPhone User-Agent came back
   byte-identical, same age, same last-modified. The HTML is held at the
   Cloudflare edge for a month keyed on the URL alone, so a server that returned
   phone markup to a phone would have whichever variant was requested FIRST
   served to everybody for the next 31 days. wp_is_mobile() cannot be used on
   this hosting. The decision has to happen in the browser - one document, one
   set of media queries. See LAW L22 in the handoff.

   Nothing here runs above 820px. Everything is inside the media query on
   purpose: a rule that leaked out would be invisible on the phone and would
   quietly damage the desktop.
   ============================================================================= */

@media (max-width: 820px) {

/* ---------- 1. page ground ------------------------------------------------ */
:root {
	--ag-nav-top: 0px;
	--ag-nav-x: 0px;
	--ag-nav-h: 62px;                          /* the design's --bar */
	--ag-mtop: env(safe-area-inset-top, 0px);  /* the design's --top */
	--ag-mbot: env(safe-area-inset-bottom, 0px);
	--slab-x: 12px;
	--slab: 22px;
	/* The trust bar is display:none site-wide, so the hero must not reserve
	   130px for something that is not there. */
	--ag-trust-overlap: 0px;
}
html { font-size: 15px; }
body { overflow-x: hidden; }
/* THE DRAWER LOCK. `overflow:hidden` alone stops the document scrolling but does NOT
   stop a scroll that STARTS inside the drawer from chaining to the page behind it once
   the drawer hits its end - which is what the client saw as "it's showing the back page
   below". overscroll-behavior is the property that stops the chain, and it is the same
   fix on every engine that matters: Chrome/Edge (Blink), Firefox (Gecko) and iOS Safari
   (WebKit, 16+). Older WebKit simply ignores it and behaves as it does today. */
body.agm-lock { overflow: hidden; overscroll-behavior: none; }
.ag-wrap { padding: 0 16px; }
.ag-sec { padding: 30px 0; }
.ag-h2 { font-size: 1.3rem; line-height: 1.12; letter-spacing: -.035em; }
.ag-eyebrow { font-size: .74rem; letter-spacing: .2em; margin-bottom: 8px; }
.ag-head { margin-bottom: 0; gap: 12px; }
.ag-head-p, .ag-lead { font-size: .84rem; line-height: 1.55; }
.ag-btn { min-height: 44px; padding: 11px 18px; font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ag-btn-lg { min-height: 46px; padding: 12px 20px; font-size: .78rem; }
.ag-only-m { display: inline-flex; }
.ag-body-p { font-size: .86rem; line-height: 1.72; margin-top: 14px; }
.ag-hint { margin-top: 12px; font-size: .84rem; }

/* ---------- 2. the top bar ------------------------------------------------ */
/* The design: burger left, lockup centred, one call button right, on 10-28%
   white glass that turns solid white once you are past the hero.

   The markup has the burger and the phone INSIDE .ag-nav-r, on the right, in
   that order. .ag-nav-r { display: contents } dissolves that wrapper so its
   children become flex items of .ag-nav-in itself and order: can place them.
   No markup moves, so the parity-verified nav block is untouched. */
/* The bar is nailed to the top and must never animate there. The desktop moves it
   with `transition: top .3s` and a `--ag-nav-top` of 14px; on a phone that is what
   makes it appear to slide up and sit half off the screen while you scroll. Both the
   offset and the transition are removed here, so it cannot move at all. */
.ag-nav { top: 0; padding-inline: 0; transition: none; }
.ag-nav-in {
	max-width: none; margin: 0; gap: 8px;
	/* HEIGHT IS A FLOOR, NOT A FIXED VALUE, and box-sizing is stated rather than assumed.
	   Reported from a real Samsung: the bar was clipping its own contents while scrolling,
	   showing only the bottom half of the burger and the lockup. A fixed `height` plus a
	   `padding-top` of env(safe-area-inset-top) only fits its 44px controls while that
	   inset is small and the device is not scaling text; on a handset that does either,
	   the content is taller than the box and a fixed height cuts it. min-height cannot -
	   the bar grows instead, which is always better than hiding the navigation.

	   The desktop is untouched: this whole block is inside @media (max-width:820px). */
	box-sizing: border-box;
	height: auto;
	min-height: calc(var(--ag-nav-h) + var(--ag-mtop));
	overflow: visible;
	padding: var(--ag-mtop) 12px 0;
	border-radius: 0; border-inline: 0; border-top: 0;
	background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.1));
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255,255,255,.2);
	box-shadow: none;
	transition: background .35s var(--ease), border-color .35s var(--ease);
}
.ag-nav.agm-solid .ag-nav-in {
	background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
	border-bottom-color: var(--line);
	box-shadow: 0 10px 26px -22px rgba(16,27,36,.6);
}
.ag-nav-r { display: contents; }
.ag-mail, .ag-nav-r > .ag-btn { display: none; }

.ag-burger, .ag-tel {
	position: relative; order: 1;
	display: grid; place-items: center;
	width: 44px; height: 44px; flex: 0 0 44px;
	border: 0; border-radius: 15px; color: var(--r); cursor: pointer;
	background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 -1px 0 rgba(255,255,255,.28) inset, 0 10px 22px -12px rgba(16,27,36,.5);
	transition: background .35s var(--ease), transform .2s var(--ease);
}
.ag-nav.agm-solid .ag-burger, .ag-nav.agm-solid .ag-tel { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)); }
.ag-burger:active, .ag-tel:active { transform: scale(.95); }
.ag-tel { order: 3; }
.ag-tel span { display: none; }
.ag-tel svg { width: 19px; height: 19px; color: var(--r); }

/* Three lines, from a button whose markup carries a chevron. The <svg> is
   re-used as the short middle bar; the two long bars are the pseudo-elements.
   The design's geometry exactly: 20 / 13 / 20 px, 2.6px thick, 6px apart. */
.ag-burger svg { width: 13px; height: 2.6px; border-radius: 3px; background: var(--r); }
.ag-burger svg path { stroke: transparent; }
.ag-burger::before, .ag-burger::after {
	content: ""; position: absolute; left: 50%; width: 20px; height: 2.6px;
	border-radius: 3px; background: var(--r); transform: translateX(-50%);
	transition: transform .4s var(--ease), opacity .2s var(--ease);
}
.ag-burger::before { margin-top: -12px; }
.ag-burger::after { margin-top: 12px; }

/* THE CALL BUTTON MUST NEVER BE PUSHED OFF THE EDGE. Reported from a real device: the
   phone icon was half cut off on the right. The bar is a flex row of burger, lockup and
   call button, and the lockup sits in the middle on `margin:0 auto`. A flex item cannot
   shrink below its content's intrinsic size unless it is told it may, so on a narrower
   viewport - or one scaling text up - the lockup held its natural width and shoved the
   call button past the right edge. `min-width:0` plus a `max-width` on the image lets the
   lockup give way first. The two 44px controls are pinned with `flex:0 0 44px` so they
   are the last thing to move, and the inline padding went 8px -> 12px for clearance. */
.ag-brand { order: 2; margin: 0 auto; padding: 2px; display: grid; place-items: center; min-width: 0; }
.ag-brand-lockup { max-width: 100%; }
.ag-burger, .ag-tel { flex: 0 0 44px; }
/* Two lockups, one grid cell, cross-faded. ag-lockup-light.png - the one the
   markup tags .dark, because it is the midnight-mood asset - is the WHITE-ink
   artwork and belongs over the photograph; ag-lockup.png is the dark-ink
   artwork and belongs on the white bar. Getting these the wrong way round
   paints white on white and the brand simply vanishes. Settled by opening both
   files, not by reading their names. */
.ag-brand-lockup { grid-area: 1/1; height: 46px; width: auto; display: block; transition: opacity .3s var(--ease); }
.ag-brand-lockup:not(.dark) { opacity: 0; }
.ag-brand-lockup.dark { display: block; opacity: 1;
	/* The bar is 10-28% white glass, so on a pale hero frame the white artwork
	   washes out. Measured on the Dubai slide, which is a bright sky. */
	filter: drop-shadow(0 1px 6px rgba(9,16,21,.55)); }
.ag-nav.agm-solid .ag-brand-lockup:not(.dark) { opacity: 1; }
.ag-nav.agm-solid .ag-brand-lockup.dark { opacity: 0; }

/* The desktop link row, the mega menu and the old click-built sheet never
   appear on a phone. The drawer below replaces all three. */
.ag-links, .ag-sheet { display: none !important; }

/* ---------- 3. the drawer ------------------------------------------------- */
/* "Tap it and the panel slides in from the left with all four top bar
   destinations, numbered, plus the live Renton and Kabul desk clocks."
   Markup: template-parts/mobile-nav.php, server-rendered. */
.agm-veil {
	position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100dvh; touch-action: none; z-index: 78;
	background: rgba(9,16,21,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
	opacity: 0; visibility: hidden;
	transition: opacity .4s var(--ease), visibility .4s;
}
body.agm-open .agm-veil { opacity: 1; visibility: visible; }

.agm-panel {
	position: fixed; top: 0; bottom: auto;
	/* THE PANEL AND THE VEIL MUST FILL WHAT THE USER CAN ACTUALLY SEE.
	   `top:0;bottom:0` sizes to the LAYOUT viewport, which on a phone is the height with
	   the browser's address bar SHOWN. Once that bar retracts the visible area is taller,
	   the fixed layer is not, and the page shows through underneath - exactly what was
	   reported, and it is identical in Chrome, Edge and Firefox because they all behave
	   this way. 100dvh is the DYNAMIC viewport height: it tracks the address bar as it
	   moves. The plain 100vh above it is the fallback for engines that do not know dvh
	   (iOS below 15.4, Chrome below 108), which simply keep today's behaviour.
	   overscroll-behavior stops a scroll inside the drawer chaining to the page. */
	height: 100vh; height: 100dvh; overscroll-behavior: contain; inset-inline-start: 0; z-index: 80;
	width: 86%; max-width: 340px;
	display: flex; flex-direction: column;
	padding: calc(var(--ag-mtop) + 14px) 0 calc(var(--ag-mbot) + 14px);
	background: linear-gradient(168deg, #16232C 0%, #101B24 48%, #0B1318 100%);
	color: #fff;
	transform: translate3d(-102%, 0, 0);
	will-change: transform; backface-visibility: hidden;
	transition: transform .5s var(--rise);
	box-shadow: 26px 0 60px -20px rgba(0,0,0,.7);
}
body.ag-rtl .agm-panel { transform: translate3d(102%, 0, 0); box-shadow: -26px 0 60px -20px rgba(0,0,0,.7); }
body.agm-open .agm-panel, body.ag-rtl.agm-open .agm-panel { transform: none; }
.agm-panel::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(60% 34% at 8% -2%, rgba(221,48,45,.34), transparent 68%);
}
.agm-panel > * { position: relative; }

.agm-head { display: flex; align-items: center; gap: 10px; padding: 0 16px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.agm-head img { height: 44px; width: auto; }
.agm-head .tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.agm-head .tx b { font-size: .86rem; font-weight: 600; }
.agm-head .tx span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.44); margin-top: 3px; }
.agm-x { margin-inline-start: auto; flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; }

.agm-body {
	flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 0; scrollbar-width: none;
	/* momentum on old iOS, no chaining anywhere else */
	-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.agm-body::-webkit-scrollbar { display: none; }
.agm-nav { display: flex; flex-direction: column; gap: 2px; }
.agm-nav > div { display: flex; flex-direction: column; }
.agm-i {
	display: flex; align-items: center; gap: 12px; width: 100%;
	padding: 12px; border: 0; border-radius: 14px; background: none;
	font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: #fff;
	text-align: start; cursor: pointer; transition: background .25s var(--ease);
}
.agm-i:hover { color: #fff; }
.agm-i em { font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.32); width: 16px; flex: 0 0 16px; }
.agm-i .ch { margin-inline-start: auto; display: flex; opacity: .5; transition: transform .35s var(--ease); }
.agm-i:active { background: rgba(255,255,255,.08); }
.agm-i.on { background: rgba(221,48,45,.16); box-shadow: inset 0 0 0 1px rgba(255,132,128,.3); }
.agm-i.on em { color: #FF8480; }
.agm-g.open > .agm-i .ch { transform: rotate(180deg); }
/* 0fr -> 1fr: the sub list animates open without anyone measuring its height. */
.agm-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.agm-g.open .agm-sub { grid-template-rows: 1fr; }
.agm-sub-in { overflow: hidden; display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 22px; padding-inline-start: 12px; border-inline-start: 1px solid rgba(255,255,255,.14); }
.agm-sub a { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 11px; }
.agm-sub a b { font-size: .86rem; font-weight: 600; color: #EAF0F5; letter-spacing: -.01em; }
.agm-sub a span { font-size: .84rem; color: rgba(255,255,255,.46); }
.agm-sub a:active { background: rgba(255,255,255,.07); }
.agm-sub a.on b { color: #FF8480; }

.agm-clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 2px 0; }
.agm-clocks .ag-deskclock { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.agm-clocks .ag-deskclock b { font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.agm-clocks .ag-deskclock span { font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.8); }
.agm-clocks .ag-deskclock em { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: .74rem; color: rgba(255,255,255,.42); }
.agm-clocks .ag-deskclock em::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); }
.agm-clocks .ag-deskclock.on em { color: #6FD79A; }
.agm-clocks .ag-deskclock.on em::before { background: #37A05F; box-shadow: 0 0 0 3px rgba(55,160,95,.2); }

.agm-con { margin: 16px 2px 0; display: flex; flex-direction: column; gap: 7px; }
.agm-h { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 3px; }
.agm-h i { flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.agm-con a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; }
.agm-con a:active { background: rgba(255,255,255,.11); color: #fff; }
.agm-con .ic { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; background: rgba(221,48,45,.2); border: 1px solid rgba(255,132,128,.3); color: #FF9D97; }
.agm-con .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.agm-con .tx b { font-size: .82rem; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agm-con .tx > span { font-size: .84rem; color: rgba(255,255,255,.48); }
.agm-con .ltr { direction: ltr; unicode-bidi: isolate; }

.agm-foot { padding: 12px 14px 0; margin-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.agm-foot .ag-btn { width: 100%; }
.agm-foot p { margin-top: 9px; font-size: .84rem; text-align: center; color: rgba(255,255,255,.34); }

/* ---------- 4. hero (home) ------------------------------------------------ */
.ag-hero {
	min-height: 72vh; min-height: 72svh; padding: calc(var(--ag-mtop) + var(--ag-nav-h) + 18px) 0 60px;
	display: flex; align-items: flex-end;
}
.ag-bg-scrim {
	background:
		linear-gradient(178deg, rgba(9,16,21,.84) 0%, rgba(9,16,21,.36) 32%, rgba(9,16,21,.6) 64%, rgba(9,16,21,.94) 100%),
		radial-gradient(70% 38% at 88% 4%, rgba(221,48,45,.32), transparent 66%);
}
.ag-hero-in, .ag-hero-in.b { gap: 0; padding-bottom: 0; }
/* "Hero glass card ... panel raised for more room." */
.ag-hero-copy,
.ag-hero-in:not(.b) .ag-hero-copy { width: calc(100% - 32px); margin-inline: auto; padding: 24px 15px 17px; }
.ag-hero-copy::before, .ag-hero-copy::after { border-radius: 22px; }
/* The design sets 1.62rem and shrinks it in script when a city name is long.
   The clamp does the same thing without the script: 6.2vw is 1.62rem at 393px. */
.ag-hero-copy:not(.wide) .ag-fareloop,
.ag-hero-copy.wide .ag-fareloop { font-size: clamp(1.35rem, 6.2vw, 1.62rem); line-height: 1.04; }
.ag-fl-row { flex-wrap: nowrap; white-space: nowrap; }
.ag-fl-city { font-size: 1em; }
.ag-fld { margin-top: 11px; font-size: .8rem; }
.ag-fld-item { flex-direction: column; align-items: flex-start; gap: 7px; }
/* The routing caption - "nonstop Turkish Airlines - daily - 12h".

   The DESKTOP draws it as a glass pill: a translucent white fill, a 1px border and a
   100px radius. THE MOCK DRAWS PLAIN TEXT. Its whole rule is:

       .fld-r { font-size:.84rem; color:rgba(255,255,255,.84) }

   No background, no border, no radius, no padding. The pill was never overridden for
   the phone, so the desktop's version came through - which is what the client saw and
   reported. Landing the mock's rule, not inventing a new treatment.

   Every property the desktop sets has to be unset explicitly. Dropping only the
   background would leave a 1px rounded outline around nothing, which looks more like a
   bug than the pill did. */
.ag-fld-c {
	background: none; border: 0; border-radius: 0; padding: 0;
	backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
	font-size: .84rem; color: rgba(255,255,255,.84);
}
.ag-fld-r, .ag-fld-c { font-size: .84rem; white-space: normal; }

/* "How booking works and a red Request a quote sit in one row at equal width,
   the price lock note centred under them." .ag-hero-cta is display:contents so
   its two buttons become cells of this grid without moving any markup. */
.ag-hero-act { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7px; width: 100%; margin: 0; margin-top: 16px; }
.ag-hero-cta { display: contents; }
.ag-hero-cta .ag-btn, .ag-hero-act .ag-btn {
	width: 100%; min-width: 0; justify-content: center;
	height: 40px; min-height: 40px; padding: 9px 8px;
	white-space: nowrap; font-size: .8rem; letter-spacing: .04em; border-radius: 999px;
}
.ag-hero-act .ag-btn svg { width: 11px; height: 11px; flex: 0 0 auto; }
.ag-hero-copy .ag-micro,
.ag-hero-act .ag-micro { grid-column: 1 / -1; justify-content: center; white-space: nowrap; font-size: .84rem; line-height: 1.3; }
.ag-hero-act .ag-micro svg { width: 9px; height: 9px; flex: 0 0 auto; }

.ag-hero-ctl {
	top: auto; bottom: calc(var(--ag-mbot) + 16px);
	padding: 0 24px; max-width: none; gap: 12px;
}
.ag-hero-cap { font-size: .74rem; letter-spacing: .13em; }
.ag-dots button { width: 16px; height: 3px; background: rgba(255,255,255,.32); }
.ag-dots button.on { width: 26px; background: var(--r); }

/* ---------- 5. services band (home) --------------------------------------- */
/* The design turns the grid into a snapping rail of 72%-wide glass cards with a
   progress dot row underneath. .ag-svcs is the track. */
.ag-sec-canvas { padding: 30px 0 26px; }
.ag-sec-canvas .ag-wrap { padding: 0; }
.ag-head-gt { margin-bottom: 0; padding: 2px 16px 0; display: block; text-align: center; }
.ag-gt-wrap { font-size: 2.5rem; letter-spacing: .08em; text-indent: .08em; }
.ag-gt-ghost { filter: blur(9px); }
.ag-svcs {
	display: flex; gap: 10px; padding: 16px;
	overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ag-svcs::-webkit-scrollbar { display: none; }
.ag-svc, .ag-svc.wide, .ag-svc:nth-child(3n+1):nth-last-child(2), .ag-svc:nth-child(3n+1):nth-last-child(1) {
	flex: 0 0 72%; grid-column: auto; scroll-snap-align: center;
	padding: 18px 14px 14px; border-radius: 20px;
}
/* THE MEDALLION. The card was scaled to the mock and the medallion INSIDE it was not,
   which is the defect the client reported: the spinning ring crosses the card's top
   border as it floats. The width was already right; the ring, the glow and the float
   DISTANCE were all left at their desktop values, and they are what overflow.

   Measured, against a card whose padding-top is 18px:

                        ring inset   ring top   float   ring top at peak
     desktop values        -14px        4px      -8px      -4px   OUTSIDE the border
     the mock's values      -9px        9px      -6px       3px   never touches

   So it is not a rounding error or a device quirk. At the top of every float cycle the
   ring was 4px past the border, on every card, on every phone. The mock's own numbers
   are the fix, exactly as the client said they would be.

   The glow goes back to -14px for the same reason. It is a soft radial gradient with no
   hard edge, so it reads as light rather than as a line, but at -26px it started 8px
   outside the card before the animation even began.

   A separate keyframe is needed because a keyframe cannot be parameterised: agMedFloat
   is the desktop's -8px and must stay untouched, since the desktop is fingerprinted as
   unchanged at four widths. */
.ag-med { width: 104px; margin-bottom: 13px; animation-name: agMedFloatPhone; }
.ag-med-ring { top: -9px; left: -9px; right: auto; bottom: auto; width: calc(100% + 18px); height: calc(100% + 18px); } /* explicit box: WebKit does not stretch an SVG to its insets (wp-adapt.css, 21 Oct) */
.ag-med-glow { inset: -14px; }
.ag-med-face { padding: 9px; }
@keyframes agMedFloatPhone {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -6px, 0); }
}
.ag-svc-k { font-size: .74rem; letter-spacing: .18em; }
.ag-svc h3 { margin-top: 6px; font-size: .96rem; }
.ag-svc-rule { width: 32px; height: 2px; margin: 9px 0; }
.ag-svc p { font-size: .84rem; line-height: 1.5; }
.ag-svc-fact { margin: 10px 0 0; padding: 6px 12px; font-size: .8rem; }
.ag-svc-go { width: 100%; min-height: 40px; margin-top: 12px; justify-content: center; font-size: .84rem; letter-spacing: .1em; }
/* HOVER HAS NO BUSINESS ON A TOUCHSCREEN, and this is the defect behind the client's
   report that the button "showing another color".

   atlantic.css has `.ag-svc:hover .ag-svc-go { background:var(--g) }` - hovering the CARD
   floods the button with the red gradient. That is right with a mouse. On a phone there
   is no hover to leave: a tap latches :hover on the element and it STAYS latched until
   something else is tapped, so scrolling past a card leaves its button stuck solid red
   with the label washing out against it.

   The mock has no card-hover rule at all. It has exactly one state change:

       .svc-go:active { background:var(--g); border-color:transparent }

   So hover is returned to the resting look and :active gets the design's red. Written at
   the same specificity as the rule it beats - one class plus a pseudo-class plus a class
   - and mobile.css loads after atlantic.css, so it wins on order without !important. */
.ag-svc:hover .ag-svc-go {
	background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26);
	box-shadow: none; color: #fff;
}
.ag-svc-go:hover { transform: none; }
.ag-svc-go:hover svg { transform: none; }
.ag-svc-go:active { background: var(--g); border-color: transparent; color: #fff; }
/* Built by initSvcRail() in theme.js - one dot per card, tracking the scroll. */
.agm-dots { display: flex; justify-content: center; gap: 5px; padding-top: 2px; }
.agm-dots i { width: 16px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.3); transition: width .3s var(--ease), background .3s var(--ease); }
.agm-dots i.on { width: 28px; background: #fff; }

/* ---------- 6. holiday deals · the journey deck becomes a rail ------------ */
.ag-sec-sand { padding: 30px 0; }
.ag-jd-vp { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ag-jd-vp::-webkit-scrollbar { display: none; }
.ag-jd { display: flex; gap: 9px; width: max-content; height: auto; padding: 16px 16px 16px 0; }
.ag-jd-c, .ag-jd-c.on {
	flex: 0 0 152px; width: 152px; aspect-ratio: 3/4.3; height: auto;
	border-radius: 16px; overflow: hidden; box-shadow: 0 16px 32px -22px rgba(0,0,0,.8);
}
.ag-jd-c > img, .ag-jd-c.on > img { filter: var(--photo-grade); transform: none; }
.ag-jd-c::after { background: linear-gradient(0deg, rgba(9,16,21,.9) 0%, rgba(9,16,21,.1) 62%); }
.ag-jd-v { display: none; }
/* The panel stops being an overlay bar and becomes the card's own caption. */
.ag-jd-p, .ag-jd-c.bar .ag-jd-p {
	display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
	inset: auto 10px 9px; padding: 0; opacity: 1; pointer-events: auto;
	background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
	animation: none;
}
.ag-jd-p > *, .ag-jd-c.bar .ag-jd-p > * { opacity: 1; animation: none; }
.ag-jd-row { gap: 6px; }
.ag-jd-flag { width: 16px; height: 11px; border-radius: 2px; }
.ag-jd-p b { font-size: .84rem; font-weight: 600; letter-spacing: -.02em; text-transform: none; }
.ag-jd-p em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: .74rem; line-height: 1.32; color: rgba(255,255,255,.72); flex: none; }
.ag-jd-p q { display: none; }
/* initDealModal() binds the click on .ag-jd-c itself, not only on this button,
   so inside a 152px tile the button is redundant chrome and comes out. The card
   still opens the deal sheet. */
.ag-jd-p button { display: none; }

/* ---------- 7. how booking works ----------------------------------------- */
.ag-steps { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; grid-template-columns: none; }
.ag-tkt { display: grid; grid-template-columns: 40px 1fr; gap: 0; border-radius: 13px; overflow: hidden; }
/* The design keeps the icon under the step number in that 40px stub. */
.ag-tkt-s { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 0; }
/* The desktop stands the step number on its end in a tall 56px rail. In a 40px
   stub the design lays it flat with the icon under it, so the writing mode and
   the 180deg rotate both have to be undone. */
.ag-tkt-s b { writing-mode: horizontal-tb; transform: none; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.ag-tkt-ic { display: grid; place-items: center; }
.ag-tkt-ic svg { width: 15px; height: 15px; }
.ag-tkt-b { padding: 12px 13px; }
.ag-tkt-b h4 { font-size: .9rem; letter-spacing: -.02em; }
.ag-tkt-b p { margin-top: 4px; font-size: .84rem; line-height: 1.45; }
.ag-tkt-b em { margin-top: 8px; font-size: .74rem; letter-spacing: .18em; }
.ag-runway { margin-top: 18px; padding-top: 18px; }

/* ---------- 8. what clients say · the note rail --------------------------- */
.ag-sec-dark { border-radius: 22px; margin-inline: 12px; padding: 30px 0 26px; }
/* .ag-voices is both the track and the scroller. No wrapper element is added,
   so the DOM the parity walk fingerprints is exactly as it was. */
.ag-voices {
	display: flex; gap: 16px; grid-template-columns: none;
	padding: 26px 16px 20px 0; margin-inline: -16px; padding-inline-start: 16px;
	overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ag-voices::-webkit-scrollbar { display: none; }
.ag-voice { flex: 0 0 232px; width: 232px; }
.ag-note { min-height: 200px; padding: 22px 20px 18px; }
.ag-note p { font-size: .86rem; line-height: 1.46; margin-bottom: 18px; }
.ag-note-ref { font-size: .74rem; letter-spacing: .22em; }
.ag-voice-w b { font-size: .8rem; }
.ag-voice-w span { font-size: .74rem; line-height: 1.35; }
.ag-note-ok { top: 18px; inset-inline-end: 18px; width: 24px; height: 24px; }

/* ---------- 9. institutional · the route chart becomes a list ------------- */
/* MEASURED, not assumed. Two things were wrong here first time round:

   1. .agr-area is the SVG fill PATH, not a box - giving it a height does nothing.
   2. atlantic.css already answers the phone at max-width:1000px: it sets
      .agr-rt { height:auto }, hides the SVG and the plane, and turns every .agr-pin
      into a list row - which is exactly the .clients list the design draws under
      its chart. Forcing the design's 206px chart back on top of that overlapped
      the pins with the airline marquee and pushed the beacons off both edges.

   THAT JUDGEMENT WAS REVERSED BY THE CLIENT ON 9 SEP, and they were right: the mock
   DOES draw the chart on the phone. `.chart{height:206px;margin:30px 0 16px}` with the
   plane, the beacons and the flying line, and the year list is not in it at all.

   So the list is undone and the mock's chart is landed. The earlier overlap was real,
   and it happened because the 206px chart was forced on top of the list WITHOUT undoing
   what the list rules do to the pins - the pins stayed as grid rows with padding and
   borders while the chart tried to position them. Every one of those rules is reversed
   below, in the order atlantic.css sets them.

   `position:absolute!important` is required, not preferred: atlantic.css uses
   `position:static!important` at max-width:1000px and nothing without !important can
   beat it (L26, L27).

   The pins already carry inline `left:8%;top:80%` from the markup and the SVG already
   ships every path, so nothing here needs JavaScript to place anything. What DID need
   changing is initRoute()'s hardcoded max-width:1000px bail-out, which hid the plane on
   exactly the screens that had just got their chart back - it now asks whether the SVG
   is displayed instead of asking how wide the screen is. */
.agr { padding: 30px 0; }
/* THE TOTAL IS INSIDE THE CHART BOX IN OUR MARKUP, AND IT IS A SIBLING IN THE MOCK.
   That difference is the whole of the client's "it shouldn't touch the graph section".

   The mock is `<div class="cl-tot">` then `<div class="chart">` - two siblings. Ours
   nests `.agr-tot` inside `.agr-rt`, where it was harmless while `.agr-rt` was
   `height:auto` and everything stacked. The moment the chart got its 206px back,
   `.agr-tot` became the ONLY in-flow child of a fixed-height box and rendered at the top
   of it, straight over the graph. Measured: the chart's top sat 40px ABOVE the total's
   bottom, and the "5,600 Clients" label 31px inside it.

   It is lifted out with `bottom:100%` rather than by re-ordering the markup, because
   moving it in PHP would change the desktop, which is fingerprinted as unchanged at four
   widths.

   PADDING WAS NOT AN OPTION, and this is worth knowing before someone tries it: the pins
   are placed with `top:80%` etc., and a percentage resolves against the PADDING box. Any
   padding-top on `.agr-rt` silently moves all five pins off the line they belong to.

   100px is the room the lift needs: 41px of total, a 28px gap to the chart, and the rest
   clear of the heading. Generous on purpose - if the subtitle ever wraps to a third line
   the total grows upward, and this still leaves it clear. */
/* `top: auto` IS LOAD-BEARING. atlantic.css positions .agr-tot absolutely with a `top`
   of its own. Setting `bottom:100%` without clearing that leaves BOTH offsets set, and
   an absolutely positioned box with top AND bottom resolved has its height computed from
   the gap between them rather than from its content - which came out as zero. The text
   still painted, because overflow is visible, so it LOOKED fine while every measurement
   of it returned height 0 and the spacing maths silently worked from nothing. */
.agr-tot { position: absolute; left: 0; right: 0; top: auto; bottom: 100%; margin: 0 0 26px; }
.agr-tot b { font-size: 1.5rem; letter-spacing: -.045em; }
.agr-tot em { font-size: .74rem; letter-spacing: .14em; }

/* the chart, at the mock's geometry */
.agr-rt { height: 206px; margin: 92px 0 16px; }
.agr-rt svg { display: block; position: absolute; left: 0; top: 0; width: 112%; height: 100%; overflow: visible; }
.agr-plane { display: block; position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 4; pointer-events: none; }

/* the pins go back to being points on a line, not rows in a list */
.agr-pin {
	position: absolute !important; transform: translate(-50%, -50%);
	display: block; gap: 0; padding: 0; border-bottom: 0;
}
.agr-pin i { width: 11px; height: 11px; }
.agr-pin b {
	position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%);
	width: 70px; text-align: center;
	font-size: .74rem; font-weight: 600; line-height: 1.2; letter-spacing: -.024em;
}
.agr-pin em {
	position: absolute; left: 50%; top: 12px; transform: translateX(calc(-50% - .6px));
	margin-top: 0; font-size: .74rem; font-weight: 600; letter-spacing: .18em;
}
.agr-bk {
	position: absolute; left: calc(50% + 3px); top: 28px; inset-inline-end: auto;
	margin-top: 0; display: flex; flex-direction: column; align-items: flex-start;
	gap: 1px; white-space: nowrap;
}
.agr-bk .n { font-size: .74rem; font-weight: 700; letter-spacing: -.018em; }
/* ONLY THE NUMBER. This is the collision the 8 Sep note warned about, and it is caused
   by the WORDS, not by the chart's geometry. atlantic.css's list rules turn on
   `.agr-bk .w{display:inline}` so each year reads "42,000 Tickets & Hotels Booked" - fine
   stacked in a list, unreadable when five of them are pinned to points on a curve 70px
   apart, and the rightmost one runs off the screen because .agr-bk is white-space:nowrap.

   The mock's badge carries the number alone: `.cl-bk .n` is the figure and `.cl-bk .s` is
   `display:none`. There is no equivalent of `.w` in the mock at all. So both are hidden
   here and the phrase lives where the mock puts it, once, under the total at the top:
   "TICKETS & HOTELS BOOKED SINCE 2012". */
.agr-bk .w, .agr-bk .s { display: none; }

/* the airline marquee. THE TOP MARGIN IS THE FIX for the client's second report: the
   logos sat hard against the rule above them because the rail had `margin:0 16px` and
   nothing separated it from what came before. The mock puts a heading above it carrying
   `margin:20px 16px 9px`, so 20px is the design's own gap, not a number chosen here. */
.agr-rail { margin: 20px 16px 0; padding: 16px 0; border-radius: 16px; }
.agr-set { gap: 26px; padding-inline-end: 26px; }
.agr-set img { height: 26px; width: auto; }
.agr-track img { height: 26px; }

/* ---------- 10. reviews --------------------------------------------------- */
/* The mock hard-codes "4.9" and "309 verified reviews" and eight written
   reviews. NONE of it is carried across, on any screen. The section is governed
   by atlantic_reviews_visible() - it does not exist in the HTML until a real
   review does, and then it appears at phone scale. That is the CEO's rule and
   it is also the FTC's. */
.ag-rvw { padding: 40px 0; margin: 0 12px; border-radius: 20px; }
.ag-rvw-grid { grid-template-columns: 1fr; }
.ag-rvw-top { grid-template-columns: 1fr; }
.ag-rvw-sc-t b { font-size: 2.1rem; }
.ag-rvw-sum { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ag-rvw-sum b { font-size: .94rem; }
.ag-rvw-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ag-rvw-chips::-webkit-scrollbar { display: none; }
.ag-rvw-chips button, .ag-rvw-chips a { flex: 0 0 auto; min-height: 34px; padding: 0 13px; font-size: .84rem; }
.ag-rvw-c { padding: 15px; border-radius: 17px; }
.ag-rvw-c-h { font-size: .94rem; }
.ag-rvw-c-d { font-size: .8rem; line-height: 1.5; }
.ag-rvw-cta { width: 100%; min-height: 46px; margin-top: 9px; font-size: .84rem; }

/* ---------- 11. inner page hero ------------------------------------------- */
/* MEASURED, not assumed: .ag-phero-in's padding-bottom computes to 0px on this
   build, not the calc() the stylesheet asks for. The caption and dots are
   absolutely positioned at the foot of the section, so on /services/ they
   landed ON TOP of the last line of the lead paragraph. The room is reserved
   on .ag-phero itself instead of trusting that rule.
   (The desktop has the same latent problem and is worth a look.) */
.ag-phero { min-height: 0; padding: calc(var(--ag-mtop) + var(--ag-nav-h) + 22px) 16px 54px; }
.ag-phero .ag-hero-ctl { bottom: 16px; padding: 0 16px; }
.ag-phero h1, .ag-h1-s { font-size: 1.62rem; line-height: 1.08; letter-spacing: -.04em; }
.ag-phero p { margin-top: 10px; font-size: .84rem; line-height: 1.55; }
.ag-kick { margin-bottom: 12px; font-size: .74rem; letter-spacing: .16em; padding: 6px 12px; }

/* ---------- 12. services page · the tall glass cards ---------------------- */
/* The design stacks them one per row, portrait medallion centred above the
   copy, and the "Request a quote" pill in the website's frosted white glass
   with a red border and red text, filling red on press. */
.ag-svl-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 18px; padding: 0 16px; }
.ag-svl { border-radius: 26px; }
.ag-svl-in { padding: 30px 20px 20px; }
.ag-svl-l { width: 60%; max-width: 210px; margin-bottom: 22px; }
/* THE RING GLITCHED ON IPHONE (client screenshot, 14 Sep): a fat red crescent
   cutting into the photograph, and a torn ring on the card below. Chrome never
   showed it, because it is a WebKit compositing fault, not a layout one.
   The medallion was three stacked GPU layers - the glass card (backdrop-filter +
   overflow:hidden), the floating .ag-svl-pw (will-change, translate3d,
   backface-visibility:hidden, agFloat forever) and the spinning orb - with the
   SVG ring drawn 12px OUTSIDE the floating layer's box. iOS rasterizes an
   animated layer once and moves the bitmap, so a stroke outside its bounds,
   inside a backdrop-filter clip, is clipped and mis-scaled.
   Taking the medallion off its own animated layer is the fix. Geometry, ring,
   border and colour are untouched - this is the same still medallion that
   prefers-reduced-motion already shows. */
.ag-svl-pw { animation: none; transform: none; will-change: auto; backface-visibility: visible; }
.ag-svl-orb { animation: none; will-change: auto; backface-visibility: visible; }
.ag-svl-k { font-size: .74rem; letter-spacing: .18em; }
.ag-svl-b h3 { margin: 10px 0 0; font-size: 1.16rem; line-height: 1.16; }
.ag-svl-rule { width: 48px; height: 3px; margin: 13px 0; }
.ag-svl-b p { margin: 0; font-size: .84rem; line-height: 1.6; }
.ag-svl-f { gap: 7px; margin: 16px 0 20px; }
.ag-svl-f span { padding: 7px 13px; font-size: .74rem; }
.ag-svl-go {
	margin-top: auto; align-self: center;
	min-height: 46px; padding: 12px 22px; font-size: .86rem;
	background: rgba(255,255,255,.94);
	border-color: rgba(221,48,45,.34); color: var(--r);
}
/* A phone has no hover. The press state is what the design draws. */
.ag-svl-go:active { background: var(--r); border-color: transparent; color: #fff; transform: translateY(-2px); }
.ag-svl-go:active svg { transform: translateX(3px); }

/* ---------- 13. about page ------------------------------------------------ */
.ag-about { grid-template-columns: 1fr; gap: 0; }
.ag-about-r { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.ag-about-r .ag-stat { padding: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: none; }
/* atlantic.css paints this one with a red glass at [data-homebg=ink] .ag-pageband
   .ag-stat:first-child - four selectors deep. The design draws it in ink, so the
   override has to be at least as specific or it loses silently. It did. */
.ag-pageband .ag-about-r .ag-stat:first-child { grid-column: span 2; background: var(--ink); border-color: rgba(255,255,255,.14); }
.ag-about-r .ag-stat b { font-size: 1.6rem; letter-spacing: -.04em; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--r); color: var(--r); }
.ag-about-r .ag-stat:first-child b { -webkit-text-fill-color: #fff; color: #fff; }
.ag-about-r .ag-stat span { margin-top: 4px; font-size: .74rem; line-height: 1.4; color: rgba(255,255,255,.6); }

/* ---------- 14. team page · portraits, tether, bios, reel ----------------- */
/* "the three dot tether between every portrait frame and its bio card" - on the
   desktop it is a horizontal run from the circle to the card at left:400px. On
   a phone the card is UNDER the portrait, so the same three dots stand up and
   sit between them. It is hidden below 900px in atlantic.css; this brings it
   back the right way up. */
.ag-bo { grid-template-columns: 1fr; gap: 18px; margin: 20px 0; align-items: stretch; }
.ag-bo-fr { width: 78%; max-width: 280px; justify-self: center; }
/* `.ag-bo.alt .ag-bo-tt` in atlantic.css is three selectors deep and pins the
   tether to `right: 320px` with `scale: -1 1` for the mirrored rows. A one-selector
   override loses to it, which is why two of the four cards had dots and two did not.
   Both forms are matched here. */
.ag-bo-tt,
.ag-bo.alt .ag-bo-tt {
	display: block; position: relative; top: auto; left: auto; right: auto;
	justify-self: center; width: 30px; height: 24px; margin: -11px 0;
	translate: none; scale: none; z-index: 3;
}
/* The desktop sets left:14/50/86% on these three, at nth-of-type specificity, so
   the override has to match it or the dots come out on a diagonal. They did. */
.ag-bo-tt i:nth-of-type(1), .ag-bo.alt .ag-bo-tt i:nth-of-type(1) { top: 14%; left: 50%; }
.ag-bo-tt i:nth-of-type(2), .ag-bo.alt .ag-bo-tt i:nth-of-type(2) { top: 50%; left: 50%; }
.ag-bo-tt i:nth-of-type(3), .ag-bo.alt .ag-bo-tt i:nth-of-type(3) { top: 86%; left: 50%; }
.ag-bo-card { min-height: 0; padding: 22px 20px; border-radius: 22px; }
.ag-bo-nm { font-size: 1.1rem; }
.ag-bo-role { font-size: .8rem; margin-top: 7px; }
.ag-bo-bio p { font-size: .84rem; line-height: 1.72; margin-top: 13px; }
.ag-reel { margin-top: 16px; }
.ag-reel-t { gap: 12px; }
.ag-reel-c { flex: 0 0 200px; width: 200px; height: auto; aspect-ratio: 4/3; border-radius: 18px; }

/* ---------- 15. contact page ---------------------------------------------- */
.ag-contact { grid-template-columns: 1fr; gap: 0; }
.ag-contact-l { gap: 12px; margin-top: 16px; }
.ag-cofc { padding: 18px; border-radius: 20px; }
.ag-cofc h3 { margin: 5px 0 12px; font-size: 1.08rem; letter-spacing: -.03em; }
.ag-cofc li { font-size: .8rem; line-height: 1.45; }
.ag-flagline { font-size: .74rem; letter-spacing: .18em; }
.ag-callback { margin-top: 14px; padding: 18px; border-radius: 20px; }
.ag-cb-h { font-size: 1.14rem; letter-spacing: -.035em; }
.ag-cb-p { font-size: .8rem; line-height: 1.5; margin-top: 5px; }

/* ---------- 16. quote page · the site's own field kit --------------------- */
/* The mock draws its quote sheet with WHITE input fields. The client caught it
   and he is right: the site's field kit is dark glass on a dark card, and that
   is what ships. Nothing here changes a colour - only the sizes the design
   calls for, and the two-column rows that have to stack at 393px. */
.ag-form { padding: 20px 16px; }
.ag-form-g { grid-template-columns: 1fr; gap: 20px; }
.ag-legs { gap: 14px; }
.ag-leg + .ag-leg { padding-top: 14px; }
.ag-leg-n { font-size: .74rem; }
.ag-legadd .ag-btn { min-height: 46px; }
.ag-leg-cap { font-size: .74rem; }
.ag-row, .ag-pgrid, .ag-offices, .ag-office { grid-template-columns: 1fr; }
.ag-lbl { font-size: .84rem; }
.ag-inp { min-height: 48px; padding: 12px 14px; border-radius: 13px; font-size: .9rem; }
.ag-seg { display: flex; }
.ag-seg button { flex: 1; min-height: 38px; padding: 9px 6px; font-size: .84rem; }
.ag-chip { min-height: 38px; padding: 9px 14px; font-size: .84rem; }
/* Travellers: one stepper row per kind, each opening one form per person. */
.ag-paxs { gap: 8px; }
/* The site gives BOTH .ag-paxb and .ag-pax the same glass surface, so a stepper
   row draws its panel twice and leaves a seam where the traveller form opens.
   The design puts it on the outer box only. */
/* The site gives BOTH .ag-paxb and .ag-pax a glass surface, so an open stepper
   draws its panel twice and leaves a seam where the traveller form starts. The
   design puts it on the outer box only.
   The second selector is not belt and braces: atlantic.css repaints .ag-pax at
   [data-homebg=ink] .ag-homeband #quote .ag-pax, which carries an id and beats
   anything class-only. Matched here, not forced with !important. */
.ag-pax { padding: 9px 13px; gap: 12px; background: none; border: 0; border-radius: 0; }
.ag-homeband #quote .ag-paxb .ag-pax { background: none; border: 0; border-radius: 0; }
.ag-pax-tx b { font-size: .88rem; }
.ag-pax-s { font-size: .84rem; }
.ag-pax-c { gap: 6px; }
.ag-pax-c button { width: 36px; height: 36px; }
.ag-pax-note { font-size: .84rem; line-height: 1.5; }
.ag-trv { padding: 2px 13px 14px; gap: 12px; }
.ag-trv-g { grid-template-columns: 1fr; gap: 11px; }
.ag-trv-g .ag-row { grid-template-columns: 1fr 1fr; gap: 11px; }
.ag-trv-tab { padding: 7px 12px; font-size: .84rem; }
.ag-trv-hd { padding-bottom: 9px; }
.ag-trv-hd b { font-size: .86rem; }
.ag-trv-hd span { font-size: .74rem; }
.ag-trv-f { padding-top: 11px; gap: 10px; }
.ag-trv-pos { font-size: .84rem; line-height: 1.45; }
.ag-trv-btns { margin-inline-start: auto; gap: 7px; }
.ag-trv-b { min-height: 40px; padding: 9px 14px; font-size: .84rem; }
.ag-dt-i { min-height: 46px; }

/* ---------- 17. consulting blocks (services and team pages) --------------- */
.ag-consult-a { flex-direction: column; gap: 8px; margin-top: 18px; }
.ag-consult-a .ag-btn { width: 100%; }
.ag-consult-r { margin-top: 18px; padding: 6px; border-radius: 20px; }
.ag-consult-i { gap: 12px; padding: 13px; border-radius: 0; }
.ag-consult-i + .ag-consult-i { border-top: 1px solid rgba(255,255,255,.13); }
.ag-consult-i .ag-ico { width: 42px; height: 42px; flex: 0 0 42px; margin-top: 2px; border-radius: 13px; }
.ag-consult-i b { font-size: .8rem; letter-spacing: .04em; margin-bottom: 3px; }
.ag-consult-i span { font-size: .78rem; line-height: 1.5; }

/* ---------- 18. footer ---------------------------------------------------- */
.ag-foot { border-radius: 22px 22px 0 0; padding: 28px 0 calc(var(--ag-mbot) + 26px); }
.ag-foot-g { grid-template-columns: 1fr; gap: 4px; }
/* The desktop lockup is a 375x215 white plate. The design shrinks it to a 124px
   chip - the height has to come off with the width or it stays 215px tall and
   the logo floats in a tall white box. It did. */
.ag-foot-lockup { width: 124px; height: auto; padding: 8px 10px; border-radius: 11px; }
.ag-foot-brand p { margin: 12px 0; font-size: .78rem; line-height: 1.55; }
.ag-foot h5 { margin: 20px 0 10px; font-size: .74rem; letter-spacing: .2em; }
.ag-foot ul { gap: 10px; }
.ag-foot ul a, .ag-foot ul button { font-size: .82rem; }
.ag-foot-addr { gap: 10px; }
.ag-foot-soc { gap: 7px; margin-top: 6px; }
.ag-foot-soc a { width: 40px; height: 40px; border-radius: 12px; }
.ag-foot-b { flex-direction: column; align-items: flex-start; gap: 8px; font-size: .74rem; }

/* ---------- 19. the quote sheet ------------------------------------------ */
/* The design does not send a phone to a separate quote page: every "Request a
   quote" lifts the same bottom sheet over whatever you were reading. The sheet
   carries the site's OWN form, lifted whole out of page-quote.php at render time -
   see template-parts/quote-sheet.php for why it is lifted rather than copied. */
.agm-qsheet {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 82;
	max-height: 92vh; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 calc(var(--ag-mbot) + 14px);
	background: #0E1922; border-radius: 22px 22px 0 0;
	box-shadow: 0 -20px 54px -20px rgba(0,0,0,.75);
	transform: translateY(101%);
	will-change: transform; backface-visibility: hidden;
	transition: transform .55s var(--rise);
}
body.agm-qs .agm-qsheet { transform: none; }
body.agm-qs .agm-veil { opacity: 1; visibility: visible; }
.agm-qs-grab { position: sticky; top: 0; z-index: 3; display: flex; justify-content: center; padding: 11px 0 9px; background: #0E1922; }
.agm-qs-grab i { width: 38px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); }
.agm-qs-x {
	position: absolute; top: 8px; inset-inline-end: 12px; z-index: 4;
	display: grid; place-items: center; width: 34px; height: 34px;
	border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
	background: rgba(9,16,21,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer;
}
.agm-qs-top { position: relative; margin: 6px 12px 0; padding: 17px 16px; border-radius: 17px; color: #fff; background: var(--g); overflow: hidden; }
.agm-qs-top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 54%); }
.agm-qs-top .k { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.agm-qs-top h3 { position: relative; z-index: 2; margin-top: 8px; font-size: 1.14rem; letter-spacing: -.035em; }
.agm-qs-top p { position: relative; z-index: 2; margin-top: 6px; font-size: .84rem; color: rgba(255,255,255,.86); }

/* The lifted section arrives wearing its page clothes - a dark slab, a rounded
   card, its own heading. The sheet IS the card and .agm-qs-top IS the heading, so
   all of that comes off and only the fields are left. */
.agm-qs-body .ag-sec, .agm-qs-body .ag-sec-dark {
	margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.agm-qs-body .ag-sec-dark::before, .agm-qs-body .ag-sec-dark::after { display: none; }
.agm-qs-body .ag-wrap { padding: 0; }
.agm-qs-body .ag-head { display: none; }
.agm-qs-body .ag-form, .agm-qs-body .ag-card {
	margin: 0; padding: 16px 16px 0; border: 0; border-radius: 0;
	background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.agm-qs-body .ag-form-g { gap: 13px; }
.agm-qs-body [data-reveal] { opacity: 1; transform: none; }

/* ---------- 20. chat launcher -------------------------------------------- */
/* DESIGN's mock has no chat widget at all, so there is nothing to copy here - this
   is the site's own chat, brought down to phone scale.

   MEASURED: the launcher was shipping as an EMPTY red circle, 26x26. The cause was
   this file's own `.agc-launch span { display: none }`, which is two spans, not one:
   the label AND `.agc-mark`, the logo. Only the label should go. atlantic.css makes
   the same mistake at max-width:560px, so the fix has to be explicit rather than a
   narrower repeat of it. */
.agc { bottom: calc(var(--ag-mbot) + 14px); inset-inline-end: 14px; }
.agc-launch > span:not(.agc-mark) { display: none; }
/* Not enough on its own: atlantic.css hides EVERY span in the launcher at
   max-width:560px, so the mark has to be put back explicitly. `.agc-launch > .agc-mark`
   is (0,2,0) against that rule's (0,1,1) and comes later, so no !important is needed
   for the display - only for the size, which is set inline on the element. */
.agc-launch > .agc-mark { display: grid; }
.agc-launch, .agc-launch:hover {
	padding: 18px 12px; border-radius: 50%;
	box-shadow: 0 14px 30px -12px rgba(221,48,45,.8), 0 1px 0 rgba(255,255,255,.34) inset;
	transform: none;
}
.agc-launch:active { transform: scale(.94); }
/* The mark carries width/height as INLINE attributes on the element, so a class rule
   cannot win without !important. This is that case, not laziness. */
.agc-launch > .agc-mark { width: 32px !important; height: 20px !important; }
.agc-mark img { width: 100%; height: 100%; object-fit: contain; }

/* The panel: full width less a margin, and short enough that the launcher and the
   phone's own home indicator both stay clear of it. */
.agc-panel {
	width: calc(100vw - 24px);
	height: min(520px, calc(100vh - var(--ag-nav-h) - var(--ag-mtop) - var(--ag-mbot) - 96px));
	height: min(520px, calc(100svh - var(--ag-nav-h) - var(--ag-mtop) - var(--ag-mbot) - 96px));
	border-radius: 22px;
}
.agc-head { padding: 12px 13px; }
.agc-feed { padding: 14px 13px; gap: 12px; }
.agc-bar { padding: 10px 11px 12px; }
.agc-bar input { font-size: 16px; }  /* iOS zooms the page for anything under 16px */

/* ---------- 20. the footer ------------------------------------------------ */
/* THE ONE PLACE THE MOCK AND THE SITE DO NOT SHARE MARKUP, so this is the one place the
   phone view ships its own. `template-parts/mobile-footer.php` carries DESIGN's footer:
   a lockup, the brand paragraph, a 2x2 Pages grid, three contact rows, the social row and
   the legal line. The desktop's three link columns cannot be restyled into that - the
   content itself differs (the mock's Pages are Home / Services / About / Contact Us; the
   desktop's COMPANY column is About us / Our Team / Request a quote / Contact us).

   So one is hidden and the other is shown. The desktop footer stays in the document -
   it is parity-fingerprinted and must not move - it is simply not displayed here.

   Every value below is DESIGN's, from .foot* in the mock. */
.ag-foot { display: none; }
.agm-pgfoot-wrap { display: block; background: #0F1A22; padding-top: 30px; }
.agm-pgfoot {
	position: relative; overflow: hidden; color: #fff;
	background: var(--ink); border-radius: 22px 22px 0 0;
	padding: 28px 16px calc(var(--ag-mbot) + 26px);
}
.agm-pgfoot::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(66% 36% at 84% -6%, rgba(221,48,45,.3), transparent 68%);
}
.agm-pgfoot > * { position: relative; }
/* NO WHITE PLATE (client, 26 Sep, with a screenshot). This drew the logo on background:#fff -
   right for the design's original INK lockup, wrong for the WHITE-lettered one it actually
   shows: white letters on a white plate, so "Atlantic" vanished and only the red swoosh and the
   red t-accent were left. A fix (background:none) was written into wp-adapt.css, which loads
   BEFORE this file - so it never once applied. Fixed here, at the source. */
.agm-pgfoot-lockup { display: block; width: 150px; height: auto; background: none; padding: 0; border-radius: 0; }
/* text-align is set explicitly: the site centres paragraphs in this region and the
   mock's footer copy is left-aligned like everything else in the column. */
.agm-pgfoot-t { margin-top: 12px; font-size: .78rem; line-height: 1.55; color: rgba(255,255,255,.62); text-align: left; }
.agm-pgfoot h5 { margin: 20px 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.agm-pgfoot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.agm-pgfoot-nav a {
	padding: 9px 11px; border-radius: 12px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
	font-size: .84rem; font-weight: 600; color: #fff; text-align: left; text-decoration: none;
}
.agm-pgfoot-nav a:active { background: rgba(255,255,255,.12); }
.agm-pgfoot-addr { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.agm-pgfoot-addr li { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; }
.agm-pgfoot-addr li b { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.agm-pgfoot-addr a { color: #fff; font-weight: 600; text-decoration: none; }
.agm-pgfoot-soc { display: flex; gap: 7px; margin-top: 6px; }
.agm-pgfoot-soc a {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff;
}
.agm-pgfoot-b {
	margin-top: 20px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12);
	display: flex; flex-direction: column; gap: 8px; font-size: .74rem; color: rgba(255,255,255,.4);
}
.agm-pgfoot-b nav { display: flex; gap: 12px; flex-wrap: wrap; }
.agm-pgfoot-b a { font-size: .84rem; color: rgba(255,255,255,.6); font-weight: 600; text-decoration: none; }

/* ==========================================================================
   THE 9 SEP AUDIT
   Eleven of the client's phone reports were re-measured on the LIVE site with
   a real engine. Four were still broken. These are the four, plus the
   mechanism that turned out to be behind three of them.
   ========================================================================== */

/* 1 - HOLIDAY DEALS HAD NOTHING TO LOOP ONTO.
   deals.php prints three passes of the nine cards and marks passes 0 and 2
   `data-twin`. Those duplicates are the entire reason the drift can wrap onto
   an identical frame and show no seam. atlantic.css then deletes them again on
   any scrolling rail:
       :691  .ag-jd-scroll .ag-jd-c[data-twin]{display:none}        (0,3,0)
       :651  .ag-jd-vp.rest .ag-jd-c[data-twin]{opacity:0;...}      (0,4,0)
   So the phone carried ONE set while theme.js still divided the scroll width
   by three. Measured live: period 485px against a 1113px rail - the cards
   crept forward three places and snapped back, and Kyrgyzstan, Sri Lanka,
   Oman, Uzbekistan and Qatar never drifted into view at all.
   Outranked here rather than edited there, because atlantic.css is never
   touched for the phone. Five classes beats four. */
.ag-jd-vp.ag-jd-scroll.rest .ag-jd-c[data-twin],
.ag-jd-vp.ag-jd-scroll .ag-jd-c[data-twin] {
	display: block; opacity: 1; pointer-events: auto;
}

/* 2 - THE AEROPLANE HAD 0.38px OF SKY.
   The pin's box is its 11px dot centred on the data point, so the box bottom
   sits 5.5px BELOW that point and `bottom:13px` left only 7.5px above it. The
   banked 22px mark reaches 7.14px. That is not clearance, it is a collision
   rounded down - and the mark's 7px glow covered the label outright. Desktop
   gives the same mark 20px. The client asked to "give him space". */
.agr-pin b { bottom: 22px; }

/* 3 - "REQUEST A QUOTE" SHOWED NO RED AT ALL.
   A touch applies :hover to the element AND every ancestor at the same instant
   as :active, so on a phone these two were always live together:
       .ag-svc:hover .ag-svc-go   (0,3,0)   <- the neutraliser at line 423
       .ag-svc-go:active          (0,2,0)   <- one class short. Silently lost.
   The tap feedback was not the wrong colour, it was absent. Restated at (0,3,0)
   and (0,4,0) so it wins under a finger. `transition:none` because the button
   carries a .4s background fade and a tap is nearer 100ms - without this the
   red only ever ramps a quarter of the way in. */
.ag-svc .ag-svc-go:active,
.ag-svc:hover .ag-svc-go:active {
	background: var(--g); border-color: transparent; color: #fff;
	box-shadow: 0 18px 34px -16px rgba(221,48,45,.95);
	transition: none;
}

/* 4 - IOS ZOOMS THE PAGE IN ON EVERY FORM FIELD.
   Safari zooms whenever a focused field is under 16px, and `.ag-inp` resolves
   to 13.5px on the phone (line 734, .9rem against html{font-size:15px}). The
   rule was already known here - line 880 pins the chat bar to 16px for exactly
   this reason - it just never reached the quote, contact and review forms, the
   three that matter. Worst inside the quote sheet, where the zoom happens
   against a fixed panel over a locked body and the field can end up behind the
   keyboard with no way to scroll back. */
.ag-inp { font-size: 16px; }

/* 5 - EVERY OTHER HOVER STATE STILL LATCHES.
   199 :hover rules are live on the phone. Exactly one had been neutralised.
   On a touchscreen :hover STICKS after the finger lifts and only clears when
   something else is tapped, so each of these leaves a control frozen in a
   state the customer never asked for.

   `hover: none` asks the DEVICE whether it can hover. A width cannot answer
   that - a narrow desktop window has a mouse and an iPad has none.

   NESTED INSIDE THE 820 BLOCK ON PURPOSE. mobile.css must keep exactly TWO
   top-level blocks; a third one added here would be invisible on the phone and
   would reach the desktop. */
@media (hover: none) {

	/* the services card the client reported */
	.ag-svc:hover {
		transform: none;
		border-color: rgba(255,255,255,.24);
		box-shadow: 0 1px 0 rgba(255,255,255,.26) inset, 0 34px 64px -30px rgba(74,10,9,.8);
	}
	.ag-svc:hover .ag-svc-rule { width: 32px; }

	/* /services/ runs a DIFFERENT card - .ag-svl - so the fix above never
	   reached it and BOTH of the client's complaints were still live one nav
	   tap away: the pill went solid red and stayed there, and the card stayed
	   lifted 8px. */
	/* !important, and that is a decision rather than a shortcut. /services/ renders
	   under html[data-homebg=ink] inside .ag-pageband, so atlantic.css:1747 reaches this
	   card as `[data-homebg=ink] .ag-pageband .ag-svl:hover` - four selectors deep, which
	   outranks anything sane written here. Chasing that with an ever-longer selector
	   means guessing every wrapper the page might gain later. Inside a block gated on
	   `hover: none` the intent is not ambiguous: on a device that cannot hover, this
	   state must not paint at all. That is what !important is for.
	   THE RESTING VALUES ARE THE PHONE'S, NOT THE DESKTOP'S - the first attempt reset the
	   rule to 58px, which is atlantic.css's desktop width; line 657 above sets 48px here,
	   so the "fix" moved it 10px and left it there. */
	.ag-svl:hover {
		transform: none !important;
		border-color: rgba(255,255,255,.14) !important;
		box-shadow: 0 1px 0 rgba(255,255,255,.13) inset,
		            0 46px 92px -44px rgba(0,0,0,.75) !important;
	}
	.ag-svl:hover .ag-svl-rule { width: 48px !important; }
	.ag-svl:hover .ag-svl-ph {
		border-color: rgba(255,255,255,.24) !important;
		box-shadow: 0 0 0 1px rgba(255,255,255,.16),
		            0 26px 54px -20px rgba(0,0,0,.7) !important;
	}
	.ag-svl:hover .ag-svl-ph img,
	.ag-svl:hover .ag-svl-ph.ic img { transform: none !important; }
	.ag-svl:hover .ag-svl-pw:before {
		transform: none !important; border-color: rgba(221,48,45,.18) !important;
	}
	.ag-svl:hover .ag-svl-ring { transform: rotate(-90deg) !important; }
	.ag-svl:hover .ag-svl-sheen { transform: translateX(-125%) !important; }
	.ag-svl:hover .ag-svl-f span {
		background: rgba(255,255,255,.07) !important;
		border-color: rgba(255,255,255,.14) !important;
		box-shadow: none !important;
	}
	.ag-svl-go:hover {
		background: rgba(255,255,255,.5); border-color: rgba(221,48,45,.34);
		color: var(--r); transform: none;
	}
	.ag-svl-go:hover svg { transform: none; }
	.ag-svl-go:active {
		background: var(--g); border-color: transparent; color: #fff; transition: none;
	}

	/* /team/ - ONE tap anywhere on the reel stopped its drift for good. That is
	   the client's own sentence about the notes rail ("it's stopped and not
	   moving") reproduced on another page, by a single rule nobody had read. */
	.ag-reel:hover .ag-reel-t { animation-play-state: running; }

	/* the sticky notes they complained about, and the deal photos */
	.ag-note:hover {
		transform: rotate(var(--tw,0deg));
		box-shadow: 0 1px 1px rgba(0,0,0,.16), 0 12px 22px -14px rgba(0,0,0,.7),
		            0 30px 46px -30px rgba(0,0,0,.85);
		z-index: auto;
	}
	.ag-jd-c:not(.on):hover > img { filter: var(--photo-grade-dim); }

	/* /team/ people cards */
	.ag-bo:hover .ag-bo-card {
		transform: none;
		border-color: rgba(255,255,255,.14);
		box-shadow: 0 26px 54px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.14);
	}
}

/* 6 - THE CHAT BUBBLE SAT ON TOP OF THE DRAWER'S OWN BUTTON.
   Stacking measured live: veil 78, drawer panel 80, quote sheet 82, chat launcher 88.
   With the drawer open the 56px red bubble at {305,742 - 361,798} overlapped the
   corner of the drawer's main "Request a quote" at {14,732 - 308.5,776} and took the
   taps meant for it. Nothing hid it because every layer was built on its own and
   nobody had looked at two of them at once. */
body.agm-open .agc,
body.agm-qs .agc,
body.agm-lock .agc,
body.agm-lock .ag-tools { display: none; }
/* The deal dialog lives inside main.ag-site, whose stacking context sits below the chat
   launcher and the account disc (third hunt, 11 Oct): both showed crisp over the dimmed
   dialog. agm-lock is on the body for all three overlays, so one rule hides both. */

} /* end @media (max-width:820px) */

/* =============================================================================
   READABLE ON A PHONE (client go-ahead, 26 Sep 2026)

   The 57 sizes raised elsewhere in this file were measured at 375px before the change: the
   smallest was 5.3px, the hero's own buttons 8.5px, service labels 7.8px. The floor now is:
       buttons 13.5px . body, hints, form labels, chips 12.6px . pills and the hero pair 12px
       small uppercase labels 11.1px . nothing under 11px anywhere
   Layout, colours and spacing are unchanged. See handoff section 82.

   These three could not be fixed by a size alone.
   ============================================================================= */
@media (max-width: 820px) {

/* The fare's "from" and "approx" were sized as FRACTIONS of the fare number (.3em, .17em in
   atlantic.css), and that number is itself made smaller on a phone - so "approx" came out at
   5.3px. Set in rem instead. vertical-align is re-stated because the drop's 3.1em is relative
   to the element's OWN font size and would lift an 11px label twice as high as before; 1.4em
   keeps it where it sat. */
.ag-fl-from   { font-size: .8rem; }
.ag-fl-approx { font-size: .74rem; vertical-align: 1.4em; }

/* The hero's slide dots were 16x3px to a thumb. The bars keep their look; an invisible area
   around each one takes the tap. */
.ag-dots button { position: relative; }
.ag-dots button::after { content: ""; position: absolute; inset: -14px -4px; }

/* The footer's telephone numbers, email and legal links were 13-16px tall - too small to hit
   without zooming. A taller tap area with a matching negative margin, so nothing moves. */
.agm-pgfoot-addr a,
.agm-pgfoot-b a { display: inline-block; padding: 9px 0; margin: -9px 0; }

/* "Step one" .. "Step four" on the booking tickets: atlantic.css sets .66rem (9.9px) and this
   file never overrode it, so the first measurement after the change still found them. */
.ag-tkt-b span { font-size: .74rem; }

/* THE TICKET CODES (SEA, DESK, OK, GATE) SAT ON TOP OF THE PARAGRAPH. atlantic.css pins them to
   the card's bottom-right corner; this file gives them margin-top:8px, which only means anything
   in the flow - so the phone layer always meant them UNDER the text. Measured after the size
   change: each code overlapped its paragraph by 19-37px. Put in the flow, right-aligned. */
.ag-tkt-b em { position: static; display: block; text-align: right; }

/* THE HERO'S TWO BUTTONS SIT SIDE BY SIDE IN FIXED HALVES, with nowrap - so at 12px "How
   booking works" measured 157px of text in a 151px box. Tighter letter-spacing makes it fit at
   375px; and on a narrower phone the label may now wrap inside the pill (height grows) instead
   of being clipped. Nothing is ever cut off. */
.ag-hero-cta .ag-btn, .ag-hero-act .ag-btn {
	letter-spacing: .01em; padding: 9px 6px; gap: 6px;
	white-space: normal; text-align: center; line-height: 1.15;
	height: auto; min-height: 40px;
}
/* SEEN ON THE PHONE after the change: "How booking works" wrapped to two lines and its pill
   stood taller than "Request a quote" beside it. The pair now stretches to one shared height,
   so it reads as a deliberate pair whether or not a label wraps on a given phone. */
.ag-hero-act { align-items: stretch; }

}

/* Desktop keeps every phone-only affordance out of the layout. */
@media (min-width: 821px) {
	.agm-dots, .agm-qsheet, .ag-only-m,
	.agm-pgfoot-wrap { display: none !important; }
}
@media (min-width: 1380px) {
	.agm-veil, .agm-panel { display: none !important; }
}

/* The payment page (8 Oct) - the same phone floor as the rest of the site (handoff 82): DESIGN's
   small capitals on the Amount-due card and the ticket stub were 10.2px at phone width. */
@media (max-width: 820px) {
	.ag-pay-meta dt, .ag-stub-meta dt, .ag-stub-k, .ag-pay-trust span { font-size: .74rem; }
}

/* NO ZOOM ON TAP (audit 9 Oct, #37). iOS Safari zooms the page into any field whose text is
   under 16px: the date field (.ag-dt-i, .96rem = 14.4px) and the nationality search
   (.ag-sm-s input, .9rem = 13.5px) both did, worst inside the locked quote sheet. 16px on a
   phone; the design file is untouched. */
@media (max-width: 767px) {
	.ag-dt-i, .ag-sm-s input { font-size: 16px; }
}

/* HOVER LATCHES ON TOUCH (client, 9 Oct: "the services red line is not in the place on
   iPhone"). iOS Safari keeps :hover on whatever was last tapped, so after one tap the
   services card stayed lifted 10px, the medallion stayed scaled, the sheen stayed slid and
   the red rule stayed at its 96px hover width - off-centre next to its neighbours. Only the
   button had been returned to rest (above). On a device with no hover, every hover state of
   a card goes back to its resting look; :active still gives the design's press. The frozen
   design file is untouched; this loads after it. */
@media (max-width: 820px) and (hover: none) {
	.ag-svc:hover { transform: none; border-color: rgba(255,255,255,.24); box-shadow: 0 1px 0 rgba(255,255,255,.26) inset, 0 34px 64px -30px rgba(74,10,9,.8); }
	.ag-svc:hover .ag-svc-rule { width: 32px; }
	.ag-svc:hover .ag-med-glow { opacity: .6; transform: none; }
	.ag-svc:hover .ag-med-ring { animation-duration: 9s; }
	.ag-svc:hover .ag-med-face { transform: none; box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 26px 46px -20px rgba(16,27,36,.7); }
	.ag-svc:hover .ag-med-face img { transform: none; }
	.ag-svc:hover .ag-med-face.fill img:not(#_) { transform: none; }
	.ag-svc:nth-child(-n+3):hover .ag-med-face img { transform: translateY(10%) scale(1.72); }
	.ag-svc:nth-child(4):hover .ag-med-face img, .ag-svc:nth-child(5):hover .ag-med-face img, .ag-svc:nth-child(6):hover .ag-med-face img { transform: translateY(13%) scale(1.72); }
	/* M8: the rest of the site's hover lifts, back to rest on a touch screen */
	.ag-reel-c:hover { transform: none; z-index: auto; }
	.agr-set img:hover { transform: none; filter: grayscale(1) invert(1) brightness(1.75); opacity: .7; }
	.ag-rvw-pk button:hover { transform: none; }
	.ag-btn-p:hover { box-shadow: 0 14px 30px -12px rgba(221,48,45,.6); }
	.ag-bd-ph:hover > img { transform: none; }
	.ag-svc:hover .ag-svc-sheen { transform: none; }
	.ag-tkt:hover { transform: none; box-shadow: 0 26px 50px -28px rgba(16,27,36,.55); }
	.ag-tkt:hover .ag-tkt-s b { transform: none; }
	.ag-deal:hover > img { transform: none; opacity: 1; }
	.ag-note:hover { transform: none; }
	.ag-fb-star:hover { transform: none; }
	.ag-btn-p:hover, .ag-svc-go:hover, .ag-pay-btn:hover:not(:disabled) { transform: none; }
	/* Third hunt, 11 Oct: the four that were still missing. */
	.ag-rvw-nav:hover { scale: none; }
	.ag-rvw-cta:hover { transform: none; box-shadow: none; }
	.agc-bar button:not(:disabled):hover { transform: none; }
	.ag-brand:hover .ag-brand-lockup { transform: none; }
	/* The animated mesh behind a services card runs inside backdrop-filter inside a snap rail,
	   the stack that tore on /services/; on a touch screen it rests. The card looks the same. */
	.ag-svc::before { animation: none; }
}

/* EDGE FADES ON iOS (third hunt, 11 Oct). The deals and review rails carry their fade mask on
   the box that scrolls; WebKit applies a mask on an async-scrolled overflow box to the scrolled
   CONTENTS, so the fade travelled with the cards or the rail went blank while composited. On
   WebKit only (the -webkit-touch-callout test matches iOS and iPadOS Safari and nothing else)
   the rails lose the mask and show plain edges. Blink keeps the fade. */
@media (max-width: 820px) {
	@supports (-webkit-touch-callout: none) {
		.ag-jd-vp, .ag-voices { -webkit-mask-image: none; mask-image: none; }
	}
}

/* NO ZOOM ON ANY TOUCH SCREEN (third hunt, 11 Oct). The 16px rules above are gated on width,
   and an iPhone held sideways is 852-932px wide: there the desktop sizes came back (.ag-inp
   15.36px, .agc-bar input 14px, .ag-sm-s input 13.5px) and Safari zoomed into the field. The
   test is the input, not the width. An iPad gets 16px too, which is harmless. */
@media (hover: none) and (pointer: coarse) {
	.ag-inp, .ag-dt-i, .ag-sm-s input, .agc-bar input { font-size: 16px; }
}

/* THE HEADER DOTS ARE 16x3 PIXELS (second audit, 9 Oct): a fingertip cannot hit them. The
   drawn dot stays exactly as designed; the tap area around it grows to a comfortable 44px. */
@media (max-width: 820px) {
	.ag-dots button { position: relative; }
	.ag-dots button::after { content: ""; position: absolute; inset: -20px -8px; }
}

/* THE DRAWER ON TABLETS AND LANDSCAPE PHONES (second audit, 9 Oct). atlantic.css hides the
   link row and shows the burger from 1379px down, but the drawer only existed up to 820px:
   an iPad, or an iPhone held sideways, had a burger that opened nothing and locked the
   page. The drawer's rules are repeated here for that band, unchanged. */
@media (min-width: 821px) and (max-width: 1379px) {
:root {
	--ag-nav-top: 0px;
	--ag-nav-x: 0px;
	--ag-nav-h: 62px;                          /* the design's --bar */
	--ag-mtop: env(safe-area-inset-top, 0px);  /* the design's --top */
	--ag-mbot: env(safe-area-inset-bottom, 0px);
	--slab-x: 12px;
	--slab: 22px;
	/* The trust bar is display:none site-wide, so the hero must not reserve
	   130px for something that is not there. */
	--ag-trust-overlap: 0px;
}
body.agm-lock { overflow: hidden; overscroll-behavior: none; }
/* ---------- 3. the drawer ------------------------------------------------- */
/* "Tap it and the panel slides in from the left with all four top bar
   destinations, numbered, plus the live Renton and Kabul desk clocks."
   Markup: template-parts/mobile-nav.php, server-rendered. */
.agm-veil {
	position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100dvh; touch-action: none; z-index: 78;
	background: rgba(9,16,21,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
	opacity: 0; visibility: hidden;
	transition: opacity .4s var(--ease), visibility .4s;
}
body.agm-open .agm-veil { opacity: 1; visibility: visible; }

.agm-panel {
	position: fixed; top: 0; bottom: auto;
	/* THE PANEL AND THE VEIL MUST FILL WHAT THE USER CAN ACTUALLY SEE.
	   `top:0;bottom:0` sizes to the LAYOUT viewport, which on a phone is the height with
	   the browser's address bar SHOWN. Once that bar retracts the visible area is taller,
	   the fixed layer is not, and the page shows through underneath - exactly what was
	   reported, and it is identical in Chrome, Edge and Firefox because they all behave
	   this way. 100dvh is the DYNAMIC viewport height: it tracks the address bar as it
	   moves. The plain 100vh above it is the fallback for engines that do not know dvh
	   (iOS below 15.4, Chrome below 108), which simply keep today's behaviour.
	   overscroll-behavior stops a scroll inside the drawer chaining to the page. */
	height: 100vh; height: 100dvh; overscroll-behavior: contain; inset-inline-start: 0; z-index: 80;
	width: 86%; max-width: 340px;
	display: flex; flex-direction: column;
	padding: calc(var(--ag-mtop) + 14px) 0 calc(var(--ag-mbot) + 14px);
	background: linear-gradient(168deg, #16232C 0%, #101B24 48%, #0B1318 100%);
	color: #fff;
	transform: translate3d(-102%, 0, 0);
	will-change: transform; backface-visibility: hidden;
	transition: transform .5s var(--rise);
	box-shadow: 26px 0 60px -20px rgba(0,0,0,.7);
}
body.ag-rtl .agm-panel { transform: translate3d(102%, 0, 0); box-shadow: -26px 0 60px -20px rgba(0,0,0,.7); }
body.agm-open .agm-panel, body.ag-rtl.agm-open .agm-panel { transform: none; }
.agm-panel::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(60% 34% at 8% -2%, rgba(221,48,45,.34), transparent 68%);
}
.agm-panel > * { position: relative; }

.agm-head { display: flex; align-items: center; gap: 10px; padding: 0 16px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.agm-head img { height: 44px; width: auto; }
.agm-head .tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.agm-head .tx b { font-size: .86rem; font-weight: 600; }
.agm-head .tx span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.44); margin-top: 3px; }
.agm-x { margin-inline-start: auto; flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; }

.agm-body {
	flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 0; scrollbar-width: none;
	/* momentum on old iOS, no chaining anywhere else */
	-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.agm-body::-webkit-scrollbar { display: none; }
.agm-nav { display: flex; flex-direction: column; gap: 2px; }
.agm-nav > div { display: flex; flex-direction: column; }
.agm-i {
	display: flex; align-items: center; gap: 12px; width: 100%;
	padding: 12px; border: 0; border-radius: 14px; background: none;
	font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: #fff;
	text-align: start; cursor: pointer; transition: background .25s var(--ease);
}
.agm-i:hover { color: #fff; }
.agm-i em { font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.32); width: 16px; flex: 0 0 16px; }
.agm-i .ch { margin-inline-start: auto; display: flex; opacity: .5; transition: transform .35s var(--ease); }
.agm-i:active { background: rgba(255,255,255,.08); }
.agm-i.on { background: rgba(221,48,45,.16); box-shadow: inset 0 0 0 1px rgba(255,132,128,.3); }
.agm-i.on em { color: #FF8480; }
.agm-g.open > .agm-i .ch { transform: rotate(180deg); }
/* 0fr -> 1fr: the sub list animates open without anyone measuring its height. */
.agm-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.agm-g.open .agm-sub { grid-template-rows: 1fr; }
.agm-sub-in { overflow: hidden; display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 22px; padding-inline-start: 12px; border-inline-start: 1px solid rgba(255,255,255,.14); }
.agm-sub a { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 11px; }
.agm-sub a b { font-size: .86rem; font-weight: 600; color: #EAF0F5; letter-spacing: -.01em; }
.agm-sub a span { font-size: .84rem; color: rgba(255,255,255,.46); }
.agm-sub a:active { background: rgba(255,255,255,.07); }
.agm-sub a.on b { color: #FF8480; }

.agm-clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 2px 0; }
.agm-clocks .ag-deskclock { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.agm-clocks .ag-deskclock b { font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.agm-clocks .ag-deskclock span { font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.8); }
.agm-clocks .ag-deskclock em { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: .74rem; color: rgba(255,255,255,.42); }
.agm-clocks .ag-deskclock em::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); }
.agm-clocks .ag-deskclock.on em { color: #6FD79A; }
.agm-clocks .ag-deskclock.on em::before { background: #37A05F; box-shadow: 0 0 0 3px rgba(55,160,95,.2); }

.agm-con { margin: 16px 2px 0; display: flex; flex-direction: column; gap: 7px; }
.agm-h { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 3px; }
.agm-h i { flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.agm-con a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; }
.agm-con a:active { background: rgba(255,255,255,.11); color: #fff; }
.agm-con .ic { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; background: rgba(221,48,45,.2); border: 1px solid rgba(255,132,128,.3); color: #FF9D97; }
.agm-con .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.agm-con .tx b { font-size: .82rem; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agm-con .tx > span { font-size: .84rem; color: rgba(255,255,255,.48); }
.agm-con .ltr { direction: ltr; unicode-bidi: isolate; }

.agm-foot { padding: 12px 14px 0; margin-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.agm-foot .ag-btn { width: 100%; }
.agm-foot p { margin-top: 9px; font-size: .84rem; text-align: center; color: rgba(255,255,255,.34); }

}

/* No-hover devices in the desktop band (iPad, landscape phones): the design's DESKTOP resting
   values, so a tap does not leave the card lifted or the red rule at its 96px hover width. */
@media (min-width: 821px) and (hover: none) {
	.ag-svc:hover { transform: none; border-color: rgba(255,255,255,.24); box-shadow: 0 1px 0 rgba(255,255,255,.26) inset, 0 34px 64px -30px rgba(74,10,9,.8); }
	.ag-svc:hover .ag-svc-rule { width: 44px; }
	.ag-svc:hover .ag-med-glow { opacity: .6; transform: none; }
	.ag-svc:hover .ag-med-face { transform: none; box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 26px 46px -20px rgba(16,27,36,.7); }
	.ag-svc:hover .ag-med-face img, .ag-svc:nth-child(-n+3):hover .ag-med-face img { transform: translateY(10%) scale(1.72); }
	.ag-svc:nth-child(4):hover .ag-med-face img, .ag-svc:nth-child(5):hover .ag-med-face img, .ag-svc:nth-child(6):hover .ag-med-face img { transform: translateY(13%) scale(1.72); }
	.ag-svc:hover .ag-med-face.fill img:not(#_) { transform: none; }
	.ag-svc:hover .ag-svc-sheen { transform: none; }
	.ag-svc:hover .ag-svc-go { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26); box-shadow: none; color: #fff; }
	.ag-tkt:hover { transform: none; box-shadow: 0 26px 50px -28px rgba(16,27,36,.55); }
	.ag-tkt:hover .ag-tkt-s b { transform: rotate(180deg); }
	.ag-deal:hover > img { transform: none; opacity: 1; }
	.ag-note:hover { transform: none; }
	.ag-reel-c:hover { transform: none; z-index: auto; }
	.ag-bd-ph:hover > img { transform: none; }
}

/* iOS, the rest (second audit, 9 Oct): the home medallion carries the same compositing stack
   that tore on /services/ (animated will-change layer + ring + backdrop-filter + clip, see
   section 12 above); the deal dialog sized itself to the LARGE viewport and let the page pan
   underneath; the grey tap flash; fingertip-sized controls. */
@media (max-width: 820px) {
	.ag-med { animation: none; transform: none; will-change: auto; backface-visibility: visible; }
	.ag-med-ring { will-change: auto; backface-visibility: visible; }
	.ag-svc::before { will-change: auto; }
	.ag-bd { max-height: 92vh; max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
	.ag-modal-bd { touch-action: none; }
	body.agm-lock { position: fixed; left: 0; right: 0; width: 100%; }
	a, button, [role=button], .ag-jd-c { -webkit-tap-highlight-color: transparent; }
	.agm-x, .agm-qs-x, .ag-dt-b, .ag-pax-c button, .ag-chip { position: relative; }
	.agm-x::after, .agm-qs-x::after, .ag-dt-b::after, .ag-pax-c button::after, .ag-chip::after { content: ""; position: absolute; inset: -6px; }
}

/* CLIENT 30 Oct (polish): the chat button is a plain white circle with the Atlantic logo in it and
   nothing else, the way Meta draws its assistant. All screen sizes, so it sits outside the media
   blocks above, last in the last stylesheet that touches it. The aria-label keeps its name for
   screen readers now the words are gone. */
.agc .agc-launch, .agc .agc-launch:hover {
	display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border-radius: 50%;
	background: #fff; box-shadow: 0 12px 30px -8px rgba(16,27,36,.5), 0 0 0 1px rgba(16,27,36,.07);
}
.agc .agc-launch:hover { transform: translateY(-2px); }
.agc .agc-launch > span:not(.agc-mark) { display: none; }
.agc .agc-launch > .agc-mark {
	display: grid; width: 48px !important; height: 17px !important;
	border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
.agc .agc-launch > .agc-mark img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.agc .agc-launch .agc-pip { top: 3px; inset-inline-end: 3px; }
@media (max-width: 820px) {
	.agc .agc-launch, .agc .agc-launch:hover { width: 58px; height: 58px; transform: none; }
	.agc .agc-launch > .agc-mark { width: 44px !important; height: 15px !important; }
}

/* CLIENT 30 Oct (polish): the "Can I help" box points at the chat circle, centred on the circle
   (64px wide on a computer, 58px on a phone). */
.agc .agc-tease::after {
	content: ""; position: absolute; top: 100%; inset-inline-end: 22px; width: 0; height: 0;
	border-style: solid; border-width: 10px 10px 0 10px; border-color: rgba(255,255,255,.94) transparent transparent transparent;
	filter: drop-shadow(0 3px 3px rgba(16,27,36,.14));
}
@media (max-width: 820px) { .agc .agc-tease::after { inset-inline-end: 19px; } }