/*
Theme Name: Anchors Away 2.0
Theme URI: https://aaworldcruises.com
Description: Custom child theme for Anchors Away World Cruise Specialists. Design system, animated ocean bands, curated Viator excursions and structured content types so the site stays editable from the WordPress admin.
Author: Vero Web Consulting
Author URI: https://verowebconsulting.com
Template: hello-elementor
Version: 1.7.1
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary. Licensed to Anchors Away World Cruise Specialists.
Text Domain: anchors-away
Tags: travel, cruise, custom
*/

/* ============================================================
   1. TOKENS

   1.1.0 repaints the whole system in the client's own colours,
   measured off aaworldcruises.com rather than chosen by us:

     #FFFFFF  page ground, 24,247k px2, the dominant surface
     #2574B8  brand blue, 17 elements, 4,336k px2
     #F0F0ED  warm off-white alternating band, 3,360k px2
     #39394E  footer slate (purple-leaning, not a navy)
     #B5E0F7  pale sky, the button face on her hero
     #333333  headings
     #747474  body copy

   There is no gold on her site. The old --gold #D5AD62 was ours,
   and it is the "yellow" in her note about white and yellow small
   print. It is gone. The token names are kept so the templates and
   their class names (.btn.gold, .aa-sec.navy) keep working.
   ============================================================ */
:root{
  /* her palette */
  --blue:#2574B8;
  --blue-dk:#1B5A91;
  --blue-dp:#164A78;
  --sky:#B5E0F7;
  --link:#1172C1;
  --slate:#39394E;
  --slate-2:#434458;
  --band:#F0F0ED;

  /* text */
  --ink:#333333;
  --body:#747474;
  --muted:#747474;
  --muted-lt:#606060;

  /* surfaces */
  --ivory:#FFFFFF;
  --sand:#F0F0ED;
  --line:#E2E2DD;

  /* legacy names, repainted. Nothing in the templates changes. */
  --navy:#2574B8;
  --deep:#39394E;
  --abyss:#39394E;
  --gold:#2574B8;
  --gold-lt:#B5E0F7;

  /* TWO faces, and only two. Mary: "We want to change the fonts to be sure
     all fonts are the same." Limelight carries every heading because it is her
     logo lettering; Inter carries every piece of running text. --serif and
     --script are kept as names so no template has to change, but they now both
     resolve to the same two faces rather than pulling in Cormorant Garamond
     and Poiret One as a third and fourth. */
  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Arial,sans-serif;
  --serif:var(--sans);
  --script:var(--disp);
  /* Her logo face. Limelight is the closest thing on Google Fonts to the
     lettering in ANCHORS AWAY: the same heavy Deco stroke contrast, the same
     flat topped A. It is a display face and belongs on h1, h2 and card
     headings only - never on body copy, never below about 20px. */
  --disp:Limelight,Georgia,serif;
  --wrap:1240px;

  /* The map. Janet loves the world map - it is the globe from her own logo -
     and Mary's note is that the COLOURFUL one is the one she loved. So the
     continents are tinted rather than left as a white silhouette: a vintage
     atlas, warm gold through to jade, on her sky blue sea. Six hues, each
     different from the ones it touches. They live here so they can be
     retuned without regenerating the geometry. */
  --map-sea-1:#DCEDF8;
  --map-sea-2:#C3E0F2;
  --map-na:#EFC673;
  --map-sa:#7CC4AE;
  --map-eu:#E2907A;
  --map-af:#D89E63;
  --map-as:#A9C782;
  --map-oc:#C79CC2;
}

/* ============================================================
   2. BASE

   Type sizes: her site sets 15px body and nothing below 12px on
   the whole home page. Ours had 27 declarations at 11px or under,
   one as low as 8.5px. Floor is now 11px on the logo tagline and
   12px everywhere else.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%}
body{
  background:#fff;
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
/* Hello Elementor's reset.css paints every link #C36 and gives every <button>
   that same pink as a background, with a deeper pink on hover and focus. None
   of it is hers, and it surfaced anywhere we had not put a ground on a button
   of our own. Links inherit; buttons start with no ground, and the components
   that mean to carry one declare it themselves at higher specificity. */
[type="button"],[type="submit"],button,
[type="button"]:hover,[type="button"]:focus,
[type="submit"]:hover,[type="submit"]:focus,
button:hover,button:focus{background-color:transparent;color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit}

h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:.01em;line-height:1.12;color:var(--ink)}
h1{font-size:clamp(40px,5.2vw,76px);font-weight:400}
h2{font-size:clamp(32px,3.8vw,54px)}
h3{font-size:clamp(21px,1.7vw,26px)}
h4{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;width:100%}
.wrap.narrow{max-width:900px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--blue);margin:0 0 12px}
.eyebrow.dark{color:var(--blue-dk)}
/* The eyebrow is brand blue, which disappears on both blue grounds.
   Sky reads well over the dark hero photograph (8.38:1) but only manages
   3.51:1 on the flat brand blue band, so the band gets white instead. */
.aa-hero .eyebrow{color:#fff}
.aa-sec.navy .eyebrow{color:#fff}
.script{font-family:var(--script)}
.lede{font-family:var(--serif);font-size:clamp(18px,1.6vw,21px);color:#5a5a5a;line-height:1.6}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:999;background:var(--blue);color:#fff;padding:12px 18px;width:auto;height:auto;clip:auto}

/* ============================================================
   3. BUTTONS
   .btn.gold keeps its class name but is now her hero button:
   pale sky face, deep blue label. It reads on the white page and
   on the blue hero alike.
   ============================================================ */
.btn{
  display:inline-block;padding:15px 26px;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;text-align:center;
}
.btn.gold{background:var(--sky);color:var(--blue-dp)}
.btn.gold:hover{background:#CFE9FA}
.btn.ghost{border-color:rgba(255,255,255,.72);color:#fff;background:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn.navy{background:var(--blue);color:#fff}
.btn.navy:hover{background:var(--blue-dk)}
.btn.outline{border-color:var(--blue);color:var(--blue);background:transparent}
.btn.outline:hover{background:var(--blue);color:#fff}
.btn.wide{width:100%}

/* ============================================================
   4. HEADER
   Her header is white with dark nav. This is the single largest
   change from 1.0.8 and the main answer to "the site is dark".
   ============================================================ */
/* The strip above the header was the last dark band left at the top of the
   page - the "navy banner" on the hero. It goes light like the footer did, so
   the page opens bright from the very first pixel. Her blue stays as the
   accent on the emphasised words rather than as a ground. */
.aa-topbar{background:var(--band);color:#5A6068;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.aa-topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:40px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.aa-topbar b{color:var(--blue-dp);font-weight:700}
.aa-topbar a:hover{color:var(--blue)}

.aa-hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.admin-bar .aa-hdr{top:32px}
.aa-hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:98px}
.aa-brand{display:flex;align-items:center;gap:14px;min-width:0}
/* The mark ships ivory, drawn for the navy header of 1.0.8. On the white
   header it has to be black, which brightness(0) does without shipping a
   second asset: it drives every opaque pixel to black and leaves the alpha
   channel alone. The footer keeps the ivory original on the slate. */
/* Her lockup is tall, not wide: at 60px it was a smudge beside the wordmark.
   brightness(0) stays so a colour file she uploads later still comes out black. */
.aa-brand img{height:74px;width:auto;filter:brightness(0)}
.aa-brand .txt{color:#111;line-height:1.15;min-width:0}
.aa-brand .txt b{font-family:var(--disp);font-size:21px;letter-spacing:.14em;font-weight:600;display:block}
.aa-brand .txt small{font-size:11px;letter-spacing:.16em;color:var(--blue);display:block}

.aa-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.aa-nav a{position:relative;padding:6px 0;display:inline-block}
.aa-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--blue);transition:right .3s}
.aa-nav a:hover::after,.aa-nav .current-menu-item>a::after{right:0}
.aa-nav .current-menu-item>a{color:var(--blue)}
.aa-hdr .btn{flex-shrink:0}

.aa-burger{display:none;flex-shrink:0;background:none;border:1px solid rgba(37,116,184,.55);color:var(--ink);padding:10px 12px;cursor:pointer;line-height:0}
.aa-burger span{display:block;width:20px;height:2px;background:var(--blue);margin:4px 0;transition:.25s}
.aa-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.aa-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.aa-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1040px){
  .aa-hdr .wrap{min-height:84px}
  .aa-burger{display:block}
  /* fully opaque: at 98% the hero headline read straight through the panel */
  .aa-nav{position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);display:none;
    box-shadow:0 18px 30px -18px rgba(57,57,78,.45)}
  .aa-nav.open{display:block}
  .aa-nav ul{flex-direction:column;gap:0;padding:10px 32px 22px}
  .aa-nav li{border-bottom:1px solid var(--line)}
  .aa-nav a{display:block;padding:15px 0;width:100%}
  .aa-hdr>.wrap>.btn{display:none}
  .aa-brand img{height:64px}
}
@media(max-width:520px){
  .aa-brand .txt b{font-size:17px}
  .wrap{padding:0 20px}
  .eyebrow{letter-spacing:.14em}
  .aa-sec{padding:72px 0}
  .aa-hero .wrap{padding-top:54px;padding-bottom:54px}
}

@media(max-width:430px){
  /* the small caps tagline is the first thing to overflow once a phone
     inflates text, and the mark already says it. */
  .aa-brand .txt small{display:none}
  .aa-brand .txt b{font-size:16px;letter-spacing:.10em}
  .aa-brand img{height:56px}
}

/* ============================================================
   5. OCEAN BANDS  (hero + reef)
   Still a gradient, because the theme ships no photography. It is
   now built from her blues rather than our abyss navy. A real
   hero photograph is the outstanding item.
   ============================================================ */
.aa-hero{
  position:relative;min-height:min(90vh,840px);display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(180deg,#2574B8 0%,#22689F 34%,#1B5A91 66%,#164A78 100%);
}
.aa-hero.short{min-height:min(62vh,560px)}

/* --- opening photograph -------------------------------------
   Her own hero, the view forward from the deck at sunset. The
   scrim is neutral rather than blue so the warmth of the sunset
   survives, and it is weighted to the left: the headline sits
   there, the sun and the deck are on the right and stay clear.
   ------------------------------------------------------------ */
/* No transform here. The 3% zoom bought nothing — there is no parallax on the
   hero — and cost 3% more of a photograph that already loses about a third of
   its height to the cover crop. background-position is the fallback; each page
   overrides it inline with its own focus point. */
.aa-hero .photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 45%}
/* The scrim used to be a dark wash carrying white type, and it is the single
   thing Janet cannot read. It now works the way the Deco banner does: the veil
   is FLAT white across the column the words sit in, and only becomes a fade
   after the words have ended. A gradient of any colour is still a fade, so the
   text never sits on one. Worst case over a dark photograph the ground comes
   out near #EEE, which puts the headline at about 11:1. */
.aa-hero .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,
  rgba(255,255,255,.93) 0%,rgba(255,255,255,.93) 52%,rgba(255,255,255,.74) 63%,
  rgba(255,255,255,.32) 74%,rgba(255,255,255,0) 86%)}
@media(max-width:820px){
  /* nothing is beside the headline on a phone, so the veil goes top to bottom
     instead of left to right, flat over the words and clearing below them. */
  .aa-hero .photo{background-position:center 62%}
  .aa-hero .scrim{background:linear-gradient(180deg,
    rgba(255,255,255,.94) 0%,rgba(255,255,255,.94) 62%,
    rgba(255,255,255,.55) 78%,rgba(255,255,255,.15) 100%)}
}
/* Some photographs put their subject on the left, where the words go. Rather
   than crop the person out or dim them under the scrim, the words move to the
   other side and the scrim mirrors with them. About Us is the case: the woman
   on the stern lounger sits left of centre. */
.aa-hero.align-right .wrap > *{margin-left:auto;margin-right:0;max-width:620px}
.aa-hero.align-right .scrim{background:linear-gradient(270deg,
  rgba(255,255,255,.93) 0%,rgba(255,255,255,.93) 52%,rgba(255,255,255,.74) 63%,
  rgba(255,255,255,.32) 74%,rgba(255,255,255,0) 86%)}
@media(max-width:820px){
  /* on a phone the scrim is already flat top to bottom, and there is no room
     to sit the words anywhere but full width. */
  .aa-hero.align-right .wrap > *{margin-left:0;max-width:none}
  .aa-hero.align-right .scrim{background:linear-gradient(180deg,
    rgba(255,255,255,.94) 0%,rgba(255,255,255,.94) 62%,
    rgba(255,255,255,.55) 78%,rgba(255,255,255,.15) 100%)}
}
/* Type on a photograph is ink now, not white with a shadow behind it. The
   shadow existed to rescue white letters from a busy picture; on a flat white
   veil there is nothing to rescue them from. These match the Deco banner
   exactly, so Contact and Blog read like Home and Destinations. */
.aa-hero.has-photo{background:#EAF0F4}
.aa-hero.has-photo .aa-deco{border-color:rgba(10,20,30,.26)}
.aa-hero.has-photo .aa-seal{box-shadow:inset 0 0 0 7px #fff,inset 0 0 0 8px var(--blue),0 18px 40px -18px rgba(8,22,36,.35)}
.aa-hero.has-photo h1,.aa-hero.has-photo .lead{text-shadow:none}
.aa-hero.has-photo h1{color:var(--ink)}
.aa-hero.has-photo h1 em{font-style:normal;color:var(--blue)}
.aa-hero.has-photo .lead{color:#2C3A45}
.aa-hero.has-photo .eyebrow{color:var(--blue-dp);text-shadow:none;font-weight:700;letter-spacing:.26em}
.aa-hero.has-photo .btn.gold{background:var(--ink);color:#fff}
.aa-hero.has-photo .btn.gold:hover{background:#25394A}
.aa-hero.has-photo .btn.ghost{background:rgba(255,255,255,.96);color:var(--ink);border-color:var(--ink);border-width:2px}
.aa-hero.has-photo .btn.ghost:hover{background:#fff;color:var(--ink)}
.aa-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.aa-rays{position:absolute;inset:-10% -10% 0;pointer-events:none;mix-blend-mode:screen;opacity:.7;z-index:1}
.aa-ray{position:absolute;top:-20%;width:16vw;height:150%;filter:blur(22px);transform-origin:top center;
  background:linear-gradient(180deg,rgba(214,240,255,.4),rgba(214,240,255,0) 70%);animation:aa-sway 14s ease-in-out infinite}
.aa-ray:nth-child(1){left:8%;transform:rotate(9deg)}
.aa-ray:nth-child(2){left:32%;transform:rotate(4deg);animation-delay:-4s;opacity:.75}
.aa-ray:nth-child(3){left:58%;transform:rotate(12deg);animation-delay:-8s;opacity:.6}
.aa-ray:nth-child(4){left:78%;transform:rotate(6deg);animation-delay:-11s;opacity:.5}
@keyframes aa-sway{0%,100%{transform:rotate(6deg) translateX(0)}50%{transform:rotate(10deg) translateX(28px)}}
.aa-vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 40%,rgba(22,74,120,0) 34%,rgba(22,74,120,.5) 100%)}
.aa-deco{position:absolute;inset:26px;border:1px solid rgba(255,255,255,.34);pointer-events:none;z-index:2}
.aa-deco i{position:absolute;width:46px;height:46px}
.aa-deco i:nth-child(1){top:-1px;left:-1px;border-top:3px solid #fff;border-left:3px solid #fff}
.aa-deco i:nth-child(2){top:-1px;right:-1px;border-top:3px solid #fff;border-right:3px solid #fff}
.aa-deco i:nth-child(3){bottom:-1px;left:-1px;border-bottom:3px solid #fff;border-left:3px solid #fff}
.aa-deco i:nth-child(4){bottom:-1px;right:-1px;border-bottom:3px solid #fff;border-right:3px solid #fff}
.aa-hero .wrap{position:relative;z-index:3;padding-top:70px;padding-bottom:70px}
.aa-hero h1{color:#fff}
.aa-hero h1 em{font-style:italic;color:var(--sky)}
.aa-hero .lead{font-family:var(--serif);font-size:clamp(19px,1.6vw,23px);color:#fff;max-width:620px;margin:26px 0 34px;line-height:1.6}
.aa-hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.aa-seal{
  position:absolute;right:6vw;bottom:9vh;z-index:3;width:168px;height:168px;border-radius:50%;
  background:#fff;color:var(--blue-dp);display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;box-shadow:inset 0 0 0 7px #fff,inset 0 0 0 8px var(--blue);
  animation:aa-bob 7s ease-in-out infinite;
}
@keyframes aa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Mary: "Is the 40 in her font? that would look cool". It is now. */
.aa-seal strong{font-family:var(--disp);font-size:46px;line-height:1;letter-spacing:.01em}
.aa-seal span{font-size:11px;letter-spacing:.14em;margin-top:8px;line-height:1.5}
@media(max-width:1100px){.aa-seal{display:none}}
.aa-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;color:#fff;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.9;text-align:center}
.aa-scroll::after{content:'';display:block;width:1px;height:34px;margin:10px auto 0;
  background:linear-gradient(#fff,transparent);animation:aa-drop 2.4s ease-in-out infinite}
@keyframes aa-drop{0%,100%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}



/* ============================================================
   5b. THE DECO HERO  (.aa-hero.deco)

   Built with Mary on 13 September, and every rule in it answers
   something Janet said.

   "SHE HAS A HARD TIME READING THE TEXT on top of fades, or dark
   backgrounds." That one constraint decides the whole band. It
   rules out the dark scrim used elsewhere on the site - which is
   also the "two tone" look she rejected on the call, so one cause
   under two complaints. It rules out a soft white gradient behind
   the words too: a gradient of any colour is still a fade.

   So the veil is FLAT. Held at 93% white across the whole column
   that carries type, and only allowed to become a fade once the
   words have ended. Flat is the point: the ground behind every
   letter is the same value, so contrast cannot drift from one word
   to the next. The floor is arithmetic rather than a measurement -
   93% white over a pure black pixel is #EDEDED, which gives the
   headline 14.16:1, body copy 9.97:1 and the eyebrow 7.84:1. AAA
   wants 7. Every one clears it before the photograph is even
   considered, and a real photograph only improves it.

   Her own header photograph runs the full width underneath and is
   never covered by a solid block: "i think it should be light to
   see the background all the way."

   The arch is the only ornament. "I do not like the lines" - so no
   keylines, no double rules, no sunburst. Geometry carries the
   Deco instead, and the same arch repeats down the page on the
   destination cards so it reads as a theme and not a banner trick.
   ============================================================ */
.aa-hero.deco{min-height:min(50vw,700px);display:flex;align-items:center;background:#EAF0F4}
.aa-hero.deco .photo{background-position:center 52%}
.aa-hero.deco .veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,
  rgba(255,255,255,.93) 0%,rgba(255,255,255,.93) 42%,rgba(255,255,255,.70) 54%,
  rgba(255,255,255,.30) 64%,rgba(255,255,255,0) 74%)}
.aa-hero.deco .wrap{position:relative;z-index:2;padding-top:0;padding-bottom:0}
.aa-hero-grid{display:grid;grid-template-columns:minmax(0,33%) minmax(0,67%);gap:20px;align-items:center}
.aa-hero.deco .copy{padding:54px 0}

/* dark type on a light flat ground, the whole reason this mode exists */
.aa-hero.deco h1{color:var(--ink);text-shadow:none}
.aa-hero.deco h1 em{font-style:normal;color:var(--blue)}
.aa-hero.deco .eyebrow{color:var(--blue-dp);text-shadow:none;font-weight:700;letter-spacing:.26em}
.aa-hero.deco .lead{font-family:var(--serif);color:#2C3A45;text-shadow:none;font-size:clamp(19px,1.7vw,23px);margin:20px 0 28px;max-width:22em}
.aa-hero.deco .btn.gold{background:var(--ink);color:#fff}
.aa-hero.deco .btn.gold:hover{background:#25394A}
.aa-hero.deco .btn.ghost{background:rgba(255,255,255,.96);color:var(--ink);border-color:var(--ink);border-width:2px}
.aa-hero.deco .btn.ghost:hover{background:#fff;color:var(--ink)}
.aa-hero.deco .aa-hero-actions{gap:10px}
.aa-hero.deco .btn{padding:15px 18px;letter-spacing:.13em}

/* the arched windows. Several photographs, which is the other half of the
   brief: one frame cannot carry Antarctica, Santorini, a family of nine and a
   couple on their fortieth. Left holds the views, the middle holds the group,
   the right holds the couples - Mary's arrangement, and the middle is widest
   because the multi generational family runs right across its frame and the
   child sits at the far right of it. */
.aa-hero .wins{display:grid;grid-template-columns:.9fr 2.3fr .9fr;gap:16px;align-items:end;height:min(25vw,350px)}
.aa-hero .win{position:relative;height:100%;overflow:hidden;border-radius:50% 50% 0 0/22% 22% 0 0;
  box-shadow:0 28px 56px -22px rgba(10,20,30,.45),0 0 0 7px rgba(255,255,255,.96)}
.aa-hero .win.side{height:78%}
.aa-hero .win .ph{position:absolute;inset:0;background-size:cover;background-position:center 42%;opacity:0;transition:opacity .9s ease}
.aa-hero .win .ph.on{opacity:1}
.aa-hero .win.mid .ph{background-position:72% 46%}
.aa-hero .wins .win:last-child .ph{background-position:58% 40%}

@media(prefers-reduced-motion:reduce){
  .aa-hero .win .ph{transition:none}
}

@media(max-width:900px){
  /* On a phone the words run the full width, so there is no clear half to fade
     into. The veil goes flat everywhere rather than becoming a gradient under
     letters. Three arches side by side would be three slivers, and the middle
     one carries a family of five, so the family takes its own full width row
     and the other two sit beneath it, half each. All three stay, all three
     stay legible. */
  .aa-hero.deco{min-height:0;display:block}
  .aa-hero.deco .veil{background:rgba(255,255,255,.93)}
  .aa-hero-grid{grid-template-columns:1fr;gap:0}
  .aa-hero.deco .copy{padding:40px 0 0}
  .aa-hero.deco .lead{max-width:none}
  .aa-hero.deco .btn{flex:1 1 auto;text-align:center;padding:15px 16px}
  .aa-hero .wins{margin:32px 0 0;height:auto;gap:10px;grid-template-columns:1fr 1fr;padding-bottom:34px}
  .aa-hero .win{box-shadow:0 16px 30px -16px rgba(10,20,30,.45),0 0 0 4px rgba(255,255,255,.96)}
  .aa-hero .win.side{height:auto;aspect-ratio:3/4}
  .aa-hero .win.mid{grid-column:1/-1;order:-1;height:auto;aspect-ratio:16/10}
  .aa-hero .win.mid .ph{background-position:center 46%}
}


/* ============================================================
   5c. THE ARCH, REPEATED
   Mary: "I loved what you did with the arched views. we can use
   those with the how can we help you?" So the banner's arch is
   not a banner trick - it is the shape of the theme, and it comes
   back on every How Can We Help You card. The icon disc then sits
   half on the photograph and half on the card, which is the piece
   of Deco that ties the two together.
   ============================================================ */
.aa-card .arch{width:100%;height:210px;border-radius:50% 50% 0 0/18% 18% 0 0;
  background:#DCE9F2 center 45%/cover no-repeat}
.aa-card.icon-card{background:#fff;border:1px solid var(--line);overflow:hidden;
  transition:box-shadow .3s,transform .3s}
.aa-card.icon-card:hover{box-shadow:0 26px 50px -30px rgba(10,20,30,.4);transform:translateY(-3px)}
.aa-card.icon-card .body{position:relative;padding:0 30px 32px}
.aa-card.icon-card .arch + .body .aa-icon{margin-top:-30px;position:relative;z-index:2;
  box-shadow:0 0 0 5px #fff,0 10px 22px -12px rgba(10,20,30,.5)}
.aa-card.icon-card h3{margin-top:12px}

/* ============================================================
   5d. OUR PARTNERS
   Her cruise lines. They were on her old home page and never came
   across, and they are the strongest trust signal she owns: a
   visitor recognises Princess and Viking long before they read a
   word about us. Grey at rest so the wall reads as one texture,
   full colour on hover.
   ============================================================ */
.aa-partners{background:#fff;padding:74px 0 80px;border-top:1px solid var(--line)}
.aa-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:30px 34px;align-items:center;margin-top:34px}
.aa-logos img{max-height:54px;width:auto;margin:0 auto;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.aa-logos img:hover{filter:none;opacity:1}
@media(max-width:1000px){.aa-logos{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.aa-logos{grid-template-columns:repeat(3,1fr);gap:24px}.aa-logos img{max-height:42px}}


/* ============================================================
   5e. EXPERIENCED
   Rebuilt from her own site: her blue ground, a bright scenic
   photograph on the left, white type on the right, and the wave
   divider carrying the band down into the next one.

   The blue is hers exactly, #2574B8. White on it measures 4.92:1 -
   AA at every size, short of AAA. Kept because it is her colour
   and because the type here is large; one step down to #1B5A91
   would reach 7.2 if Janet ever says this band is hard work.
   ============================================================ */
.aa-experienced{position:relative;background:var(--blue);color:#fff;padding:88px 0 0;overflow:hidden}
.exp-grid{display:grid;grid-template-columns:minmax(0,48%) minmax(0,52%);gap:clamp(28px,4vw,62px);align-items:stretch;padding-bottom:clamp(96px,11vw,150px)}
.exp-photo{height:auto;min-height:min(34vw,440px);background-size:cover;background-position:center;
  box-shadow:0 34px 70px -34px rgba(6,26,44,.75)}
.aa-experienced .eyebrow{color:#CFE7F8;font-weight:700}
.aa-experienced h2{color:#fff}
.aa-experienced .rule{display:block;width:96px;height:2px;background:rgba(255,255,255,.85);margin:22px 0 24px}
.aa-experienced .lede{color:#fff;font-size:clamp(19px,1.6vw,22px);line-height:1.55;margin-bottom:20px}
.aa-experienced .aa-entry,.aa-experienced .aa-entry p{color:#F2F7FB;font-size:16.5px;line-height:1.75}
.aa-experienced .aa-entry p + p{margin-top:16px}

/* the waves. Drawn, not stretched. */
.aa-waves{position:absolute;left:0;right:0;bottom:-1px;line-height:0;pointer-events:none}
.aa-waves svg{display:block;width:100%;height:clamp(70px,9vw,130px)}

@media(max-width:900px){
  .aa-experienced{padding-top:60px}
  .exp-grid{grid-template-columns:1fr;gap:26px;padding-bottom:76px}
  .exp-photo{min-height:58vw}
}


/* ============================================================
   5f. WHERE WE SAIL - the map
   Light sea, white land, her blue for the pins. The opposite of
   the Winspection map on purpose: that one is a dark territory
   map answering "do you serve me", this one is a bright planning
   map answering "when do I go". Nothing on it is dark, and the
   reading panel is solid, not a fade.
   ============================================================ */
.aa-map{padding:96px 0 104px;background:#fff}
.aa-map-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:38px;align-items:start;margin-top:44px}
.aa-map-stage{position:relative;background:var(--map-sea-1);overflow:hidden}
.aa-map-stage svg{display:block;width:100%;height:auto}
.aa-map .land{transition:none}
.aa-map .land .na{fill:var(--map-na)}
.aa-map .land .sa{fill:var(--map-sa)}
.aa-map .land .eu{fill:var(--map-eu)}
.aa-map .land .af{fill:var(--map-af)}
.aa-map .land .as{fill:var(--map-as)}
.aa-map .land .oc{fill:var(--map-oc)}
/* The map heading carries a hard break of its own ("Anywhere in the world /
   that floats."). At the section h2 size it broke a third time and the line
   "world" sat alone, so the display face is stepped down here only. */
.aa-map .aa-head h2{font-size:clamp(30px,3.4vw,46px)}
.aa-map .pin{cursor:pointer;outline:none}
/* transform-box matters here. An SVG element's default box is the view-box,
   so "transform-origin:center" means the centre of the whole 1000x460 map,
   and scaling a halo down about that point slides it a couple of hundred
   units toward the middle of the ocean. Every resting halo sat well away
   from its own pin; only the selected one, at scale(1), looked right.
   fill-box makes the origin the circle's own centre, which is what was
   meant. */
.aa-map .pin .halo{fill:#fff;opacity:.5;transform:scale(.55);transform-box:fill-box;transform-origin:center;transition:transform .28s,opacity .28s}
.aa-map .pin .dot{fill:var(--blue-dp);stroke:#fff;stroke-width:2.8;transition:fill .2s}
.aa-map .pin:hover .halo,.aa-map .pin:focus-visible .halo,.aa-map .pin.on .halo{transform:scale(1);opacity:.3}
.aa-map .pin.on .dot,.aa-map .pin:focus-visible .dot{fill:var(--ink)}
/* On the coloured map a white halo is the resting state, so the chosen pin
   needs a colour of its own or it reads the same as the other eleven. */
.aa-map .pin.on .halo,.aa-map .pin:hover .halo,.aa-map .pin:focus-visible .halo{fill:var(--blue);opacity:.42}

.aa-map-side{position:sticky;top:120px}
.aa-map-read{background:var(--band);border-left:3px solid var(--blue);padding:22px 22px 24px;min-height:168px}
.aa-map-read .grp{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--blue-dp);margin-bottom:8px}
.aa-map-read h3{font-size:26px;color:var(--ink);margin-bottom:8px}
.aa-map-read .det{font-size:15.5px;line-height:1.65;color:#4A5560}
.aa-map-read.empty .grp::before{content:'Choose a region'}
.aa-map-list{list-style:none;margin:22px 0 0;padding:0;display:grid}
.aa-map-list button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:11px 2px;font:inherit;font-size:15px;color:#3A4650;cursor:pointer;transition:color .2s,padding .2s}
.aa-map-list button:hover,.aa-map-list button:focus-visible{color:var(--blue);padding-left:8px}
.aa-map-list button.on{color:var(--blue-dp);font-weight:700}

@media(max-width:980px){
  .aa-map{padding:70px 0 76px}
  .aa-map-grid{grid-template-columns:1fr;gap:26px}
  .aa-map-side{position:static}
  .aa-map-read{min-height:0}
}
/* On a phone the map is a fifth of the size it is on a desktop, and a pin
   drawn at the desktop radius comes out about four millimetres across, which
   is below anything a thumb can hit. The stage runs to both edges of the
   screen to buy back the width, and the geometry properties on the circles
   put the targets back up to a tappable size. The heading steps down again
   because it carries its own line break and "Anywhere in the world" will not
   sit on one line at 30px inside a 390px screen. */
@media(max-width:600px){
  .aa-map .aa-head h2{font-size:clamp(23px,6vw,46px)}
  .aa-map-stage{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:auto}
  .aa-map .pin .dot{r:11px}
  .aa-map .pin .halo{r:25px}
}

/* reef band */
.aa-reef{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#2574B8}
.aa-reef .photo{position:absolute;inset:-6% 0;background-size:cover;background-position:center 60%;transform:scale(1.06);will-change:transform}
/* Vibrancy, and the darkening kept OFF the coral.
   Mary: "can this be a little more vibrant? we might need to add a slight
   fade behind the text."

   The old tint dimmed the ENTIRE band - a radial at .74 plus a full width
   linear on top of it - which is what was flattening the reef. The fish and
   the coral are the point of this band, so the overall tint is now barely
   there, and the darkening is a contained pool sitting behind the words only.

   The pool is held FLAT at .70 across its middle and only fades once it is
   past the text, so every letter sits on the same value - the same rule as
   the hero veil. Worst case, against a pure white pixel, white type on it
   measures 6.56:1; against the real coral it is better than that. */
.aa-reef .photo{filter:saturate(1.22) contrast(1.06)}
.aa-reef .tint{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,22,36,.22),rgba(8,22,36,0) 26%,rgba(8,22,36,0) 68%,rgba(8,22,36,.30))}
.aa-reef canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.aa-reef .inner{position:relative;z-index:3;text-align:center;color:#fff;padding:70px 24px;max-width:760px}
.aa-reef .inner::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;
  width:150%;height:175%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side ellipse at center,
    rgba(6,22,36,.70) 0%,rgba(6,22,36,.70) 52%,rgba(6,22,36,.36) 74%,rgba(6,22,36,0) 100%)}
.aa-reef .eyebrow{color:#fff;text-shadow:0 1px 10px rgba(8,22,36,.9)}
.aa-reef h2{color:#fff;font-size:clamp(40px,5vw,74px);text-shadow:0 2px 22px rgba(22,74,120,.75)}
.aa-reef p{margin:16px auto 30px;color:#fff;font-family:var(--serif);font-size:19px;max-width:560px;
  text-shadow:0 1px 12px rgba(22,74,120,.85)}

/* ============================================================
   6. SECTION SHELL
   ============================================================ */
.aa-sec{padding:104px 0}
.aa-sec.tight{padding:72px 0}
/* A coda, not a second call to action. Quieter than a full section: the
   heading steps down so it does not compete with the band underneath it, and
   there is no button, because the reef band already has the only one. */
.aa-sec.coda{padding:64px 0 68px}
.aa-sec.coda h2{font-size:clamp(28px,3vw,42px)}
.aa-sec.coda .lede{margin:18px auto 0;max-width:600px;font-size:clamp(17px,1.4vw,19px)}
.aa-sec.white{background:#fff}
.aa-sec.sand{background:var(--band);color:#6A6A6A}
/* Her #747474 body grey clears 4.5:1 on white (4.67) but drops to 4.09 on the
   #F0F0ED band, and her #2574B8 does the same (4.92 -> 4.31). Both are nudged
   one step darker on that ground only, so the band passes AA too. */
.aa-sec.sand p,.aa-sec.sand li,.aa-sec.sand .aa-head p{color:#6A6A6A}
.aa-sec.sand .eyebrow{color:var(--blue-dk)}
.aa-sec.navy{background:var(--blue);color:#fff}
.aa-sec.navy h2,.aa-sec.navy h3{color:#fff}
.aa-head{display:grid;grid-template-columns:1.25fr .75fr;gap:8vw;align-items:end;margin-bottom:52px}
.aa-head p{font-family:var(--serif);font-size:19px;color:#5a5a5a}
.aa-sec.navy .aa-head p{color:#fff}
/* .lede carries its own dark grey for light grounds, which would otherwise
   beat the section's inherited white. Five templates also hard-coded
   color:#a9c2d2 inline here — fine on the old #031D30 band, 2.66:1 on this
   one. The inline colours are gone; this rule replaces them. */
.aa-sec.navy .lede,.aa-sec.navy p{color:#fff}
.aa-head.center{grid-template-columns:1fr;text-align:center;max-width:760px;margin-left:auto;margin-right:auto;gap:16px}
.aa-head.center p{margin:0 auto}
@media(max-width:900px){.aa-head{grid-template-columns:1fr;gap:20px}}

/* trust strip */
/* and the credentials strip under it. White on white would vanish, so this
   one keeps her blue for the type and the diamonds and loses it as a ground. */
.aa-trust{background:#fff;color:var(--blue-dp);border-bottom:1px solid var(--line)}
.aa-trust .wrap{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;align-items:center;
  padding:20px 32px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-align:center}
@media(max-width:820px){.aa-trust b{display:none}.aa-trust .wrap{gap:8px 18px}}
.aa-trust b{color:var(--blue);font-weight:700}

/* ============================================================
   7. CARDS
   ============================================================ */
.aa-grid{display:grid;gap:26px}
.aa-grid.c2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.aa-grid.c3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.aa-grid.c4{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}

.aa-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .3s,box-shadow .3s}
.aa-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -24px rgba(37,116,184,.42)}
.aa-card .thumb{height:172px;position:relative;overflow:hidden;background:linear-gradient(160deg,#EDF4F9,#D4E5F1)}
.aa-card .thumb img{width:100%;height:100%;object-fit:cover}
.aa-card .thumb svg{position:absolute;inset:0;width:100%;height:100%}
.aa-card .body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.aa-card h3{color:var(--ink)}
.aa-card p{font-size:15.5px;color:var(--body)}
.aa-card .meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-lt)}
.aa-card .stars{color:var(--blue);font-size:13px;letter-spacing:.08em}
.aa-card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.aa-card .price b{font-family:var(--serif);font-size:24px;color:var(--ink);display:block}
.aa-card .price span{font-size:12px;color:var(--muted-lt);letter-spacing:.08em;text-transform:uppercase}
.aa-card .go{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
  border-bottom:1px solid var(--sky);padding-bottom:3px}
.aa-card .num{font-family:var(--serif);font-size:34px;color:var(--blue);line-height:1}

/* icon cards — the six "How Can We Help You?" cards, marked with a line
   icon in a brand blue disc the way her original site marks them. */
.aa-icon{width:58px;height:58px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:6px;
  transition:background .25s,transform .25s}
.aa-icon svg{width:28px;height:28px;display:block}
.aa-card.icon-card .body{padding:30px 28px 28px;gap:12px}
.aa-card.icon-card:hover .aa-icon{background:var(--blue-dk);transform:translateY(-2px)}
.aa-card.icon-card h3{margin-top:2px}

.aa-note{margin-top:26px;font-size:14px;color:var(--muted-lt);border-left:2px solid var(--blue);padding-left:14px;max-width:900px}

/* ============================================================
   8. TESTIMONIALS
   ============================================================ */
.aa-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;align-items:start}
.aa-quote{background:#fff;border:1px solid var(--line);padding:34px 30px;position:relative}
.aa-quote::before{content:'\201C';position:absolute;top:6px;left:18px;font-family:var(--serif);font-size:82px;
  color:var(--sky);opacity:.85;line-height:1}
.aa-quote blockquote{font-family:var(--serif);font-size:18px;line-height:1.62;color:#3f3f3f;position:relative;z-index:1}
.aa-quote cite{display:block;margin-top:18px;font-style:normal;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--blue)}
.aa-quote.short blockquote{font-size:26px}

/* ============================================================
   9. TEAM
   ============================================================ */
/* Two across, not four. These are Janet's own bios, in full, and hers runs to
   a hundred and twenty words - four narrow columns turned that into a column
   of text one inch wide and three feet tall.

   The portrait is the arch again, the same shape as the banner windows and the
   How Can We Help You cards, but small - a medallion at the top of the card,
   not a picture the bio has to live underneath. Two earlier versions were
   wrong in opposite directions: a full height strip down the side of the card
   cropped three landscape photographs into close-ups, and a full width arch
   across the top was simply too big. A square arch at 210px crops almost
   nothing and leaves the bio the whole width of the card to read across. */
.aa-team{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;align-items:start}
@media(max-width:1000px){.aa-team{grid-template-columns:1fr;gap:24px}}
.aa-person{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
/* Placeholder until real headshots land. The initials sat at 62% white over
   the lighter end of the old gradient, which measured 2.28:1 — mush. Deeper
   gradient and near-solid white takes it to 3.81:1. */
.aa-person .ph{width:210px;aspect-ratio:1/1;margin:26px 0 0 30px;border-radius:50% 50% 0 0/26% 26% 0 0;
  background:linear-gradient(160deg,#F3F0E9,#E3DCCE);position:relative;overflow:hidden}
@media(max-width:1000px){.aa-person .ph{width:170px}}
.aa-person .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aa-person .ph .initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:64px;color:rgba(255,255,255,.9)}
/* Her heading for this section carries its own break and still ran to three
   lines at the section h2 size, leaving "are" stranded on a line of its own.
   Same step-down as the map. */
#team .aa-head h2{font-size:clamp(30px,3.4vw,46px)}
.aa-person .ph img{object-position:50% 28%}
.aa-person .in{padding:20px 30px 30px;flex:1 1 auto;min-width:0}
.aa-person .in p + p{margin-top:14px}
.aa-person h3{font-size:24px}
.aa-person .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  font-weight:700;margin:6px 0 12px}
.aa-person p{font-size:15.5px;line-height:1.68;color:var(--body)}

/* ============================================================
   9b. THE PHOTO WALL

   Her own pictures of her own travelers. They come off a phone in
   both orientations, so this is a column layout, not a grid: each
   photograph keeps its own shape and nothing gets cropped to fill
   a cell. Nothing is tinted or scrimmed either - these are the one
   set of images on the site that are actually hers.
   ============================================================ */
.aa-wall{column-count:3;column-gap:22px}
@media(max-width:900px){.aa-wall{column-count:2;column-gap:16px}}
@media(max-width:560px){.aa-wall{column-count:1}}
.aa-wall figure{margin:0 0 22px;break-inside:avoid;background:#fff;overflow:hidden;
  box-shadow:0 18px 34px -26px rgba(10,20,30,.5)}
.aa-wall img{width:100%;height:auto;display:block;transition:transform .6s ease}
.aa-wall figure:hover img{transform:scale(1.035)}
.aa-wall figcaption{padding:12px 16px 14px;font-size:13.5px;color:var(--muted-lt)}

/* ============================================================
   10. CREDENTIAL / ICON LISTS
   ============================================================ */
.aa-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.aa-list li{position:relative;padding-left:26px;font-size:15.5px}
.aa-list li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:9px;
  border:1px solid var(--blue);transform:rotate(45deg)}
.aa-list.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 30px}

.aa-dest{background:#fff;border:1px solid var(--line);padding:32px 30px;height:100%}
.aa-dest h3{font-size:24px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.aa-dest ul{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.aa-dest li{font-size:15.5px;color:var(--body)}
.aa-dest li b{display:block;color:var(--ink);font-weight:600;font-size:16px;margin-bottom:2px}

/* counters */
.aa-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;text-align:center}
.aa-count b{display:block;font-family:var(--serif);font-size:clamp(44px,4.4vw,64px);color:#fff;line-height:1}
.aa-count span{display:block;margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}

/* ============================================================
   11. EXCURSIONS (Viator)
   ============================================================ */
.aa-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.aa-filter{border:1px solid #D5DCE2;background:#fff;padding:9px 16px;font-size:13px;cursor:pointer;
  transition:.2s;color:var(--ink)}
.aa-filter:hover{border-color:var(--blue)}
.aa-filter.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.aa-filter .n{opacity:.7;margin-left:6px;font-size:12px}

.aa-tour{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .3s,box-shadow .3s}
.aa-tour:hover{transform:translateY(-5px);box-shadow:0 18px 40px -26px rgba(37,116,184,.45)}
.aa-tour .thumb{height:168px;position:relative;overflow:hidden;background:linear-gradient(160deg,#EDF4F9,#D4E5F1)}
.aa-tour .thumb img{width:100%;height:100%;object-fit:cover}
.aa-tour .thumb .port{position:absolute;left:14px;top:13px;background:rgba(22,74,120,.9);color:#fff;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;font-weight:600}
.aa-tour .in{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.aa-tour h3{font-size:20px}
.aa-tour .rating{font-size:13px;color:var(--muted-lt)}
.aa-tour .rating b{color:var(--blue);letter-spacing:.06em}
.aa-tour .janet{font-size:14.5px;color:#4f4f4f;border-left:2px solid var(--blue);padding-left:12px;font-style:italic}
.aa-tour .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;
  align-items:flex-end;justify-content:space-between;gap:12px}
.aa-tour .price i{font-style:normal;display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-lt)}
.aa-tour .price b{font-family:var(--serif);font-size:26px;color:var(--ink);line-height:1}
.aa-tour .acts{display:flex;gap:8px;align-items:center}
.aa-tour .det{background:none;border:0;border-bottom:1px solid var(--sky);padding:0 0 3px;cursor:pointer;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.aa-tour .book{background:var(--blue);color:#fff;padding:10px 15px;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.aa-tour .book:hover{background:var(--blue-dk)}
.aa-tour .panel{display:none;border-top:1px solid var(--line);padding:18px 22px 22px;background:#F7FAFC;font-size:15px;color:var(--body)}
.aa-tour .panel.open{display:block}
.aa-tour .panel dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 12px;font-size:13.5px}
.aa-tour .panel dt{font-weight:700;color:var(--ink);letter-spacing:.04em}
.aa-tour .panel dd{margin:0}
.aa-tour[hidden]{display:none}

/* ============================================================
   12. FAQ
   ============================================================ */
.aa-faq{border-top:1px solid var(--line);max-width:900px}
.aa-faq details{border-bottom:1px solid var(--line)}
.aa-faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--serif);font-size:23px;color:var(--ink);line-height:1.3}
.aa-faq summary::-webkit-details-marker{display:none}
.aa-faq summary::after{content:'+';position:absolute;right:8px;top:22px;font-family:var(--sans);
  font-size:24px;color:var(--blue);font-weight:300;transition:transform .25s}
.aa-faq details[open] summary::after{transform:rotate(45deg)}
.aa-faq .answer{padding:0 44px 26px 0;font-size:15.5px;color:var(--body)}
.aa-faq .answer a{color:var(--link);border-bottom:1px solid var(--sky)}

/* ============================================================
   13. FORM
   ============================================================ */
/* The heading sits in the narrow column beside the form, so it cannot carry
   the full section size - at 54px "Tell us about your dream destination." came
   out four lines deep and taller than the fields next to it. */
.aa-form-shell h2{font-size:clamp(28px,3vw,42px)}
/* Prefer to talk. The number carries the block, in her logo face, so the
   column reads heading / number / address rather than heading / footnote. */
.aa-talk{margin-top:30px}
.aa-talk .label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--blue-dp);margin-bottom:6px}
.aa-talk .num{font-family:var(--disp);font-size:clamp(28px,2.5vw,36px);line-height:1.1;color:var(--ink)}
.aa-talk .num a:hover{color:var(--blue)}
.aa-talk .addr{font-size:15.5px;line-height:1.7;color:var(--body);margin-top:14px}
/* The arch beside the form. The column has only a heading, a line of lede and
   the address in it, so without this it was a tall empty rectangle next to a
   long form. Same arch as the banner windows and the team portraits. */
.aa-contact-arch{margin-top:40px;width:100%;max-width:400px;aspect-ratio:4/5;
  border-radius:50% 50% 0 0/22% 22% 0 0;background-size:cover;background-position:center 50%;
  /* The white ring is the banner window's, not a leftover from the old look:
     the arched views in the hero carry the same 7px of white and the same soft
     drop. It is what makes an arch read as a window rather than a cut-out. */
  box-shadow:0 0 0 7px rgba(255,255,255,.96),0 30px 60px -34px rgba(10,20,30,.55)}
@media(max-width:960px){.aa-contact-arch{max-width:none;aspect-ratio:5/4;margin-top:30px}}
.aa-form-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:6vw;align-items:start}
@media(max-width:960px){.aa-form-shell{grid-template-columns:1fr;gap:36px}}
.aa-form{background:#fff;padding:36px;border:1px solid var(--line)}
@media(max-width:560px){.aa-form{padding:26px 20px}}
.aa-steps{display:flex;gap:8px;margin-bottom:26px}
.aa-steps div{flex:1;height:3px;background:#D9DEE3}
.aa-steps div.on{background:var(--blue)}
.aa-form fieldset{border:0;margin:0 0 26px;padding:0}
.aa-form legend{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink);
  margin-bottom:14px;padding:0}
.aa-form label{display:block;font-size:13px;letter-spacing:.04em;color:#555;margin-bottom:6px}
.aa-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.aa-row{grid-template-columns:1fr}}
.aa-form input,.aa-form select,.aa-form textarea{
  width:100%;padding:12px 13px;border:1px solid #CFD8DE;background:#fff;font:inherit;font-size:15px;
  color:var(--ink);margin-bottom:16px;border-radius:0;
}
.aa-form input:focus,.aa-form select:focus,.aa-form textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,116,184,.18)}
.aa-form textarea{min-height:104px;resize:vertical}
.aa-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.aa-chip{border:1px solid #D5DCE2;padding:9px 15px;font-size:13px;cursor:pointer;user-select:none;
  transition:.2s;background:#fff;color:var(--ink)}
.aa-chip:hover{border-color:var(--blue)}
.aa-chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.aa-hint{font-size:13px;color:var(--muted-lt);margin:-8px 0 18px}
.aa-hp{position:absolute;left:-9999px}
.aa-msg{padding:14px 16px;font-size:15px;margin-bottom:22px;border-left:3px solid}
.aa-msg.ok{background:#eef8f2;border-color:#2e9e6b;color:#1d6444}
.aa-msg.err{background:#fdf1ef;border-color:#c2543f;color:#8d3524}

/* ============================================================
   14. BLOG
   ============================================================ */
.aa-posts{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
@media(max-width:1000px){.aa-posts{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}}
.aa-post{border:1px solid var(--line);display:flex;flex-direction:column;background:#fff;overflow:hidden;
  transition:transform .3s,box-shadow .3s}
.aa-post:hover{transform:translateY(-5px);box-shadow:0 18px 40px -26px rgba(37,116,184,.45)}
.aa-post .ph{position:relative;height:196px;overflow:hidden;background:linear-gradient(160deg,#EDF4F9,#D4E5F1)}
.aa-post.feature .ph{height:296px}
.aa-post .ph img{width:100%;height:100%;object-fit:cover}
.aa-post .ph .tagline{position:absolute;left:18px;top:16px;z-index:2;background:rgba(22,74,120,.9);
  color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;font-weight:600}
.aa-post .in{padding:24px;display:flex;flex-direction:column;gap:9px;flex:1}
.aa-post h3{font-size:23px}
.aa-post.feature h3{font-size:31px}
.aa-post p{font-size:15.5px;color:var(--body)}
.aa-post .rd{margin-top:auto;padding-top:14px;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);border-top:1px solid var(--line)}
.aa-blog-foot{margin-top:34px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}

/* single post */
.aa-article{max-width:760px;margin:0 auto;padding:80px 0 90px}
.aa-article .meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.aa-article h1{font-size:clamp(34px,4.4vw,58px);margin-bottom:24px}
.aa-article .thumb{margin:0 0 34px}
.aa-entry{font-size:17px;line-height:1.75;color:#444}
.aa-entry p{margin:0 0 22px}
.aa-entry h2{font-size:32px;margin:40px 0 16px}
.aa-entry h3{font-size:24px;margin:32px 0 12px}
.aa-entry ul,.aa-entry ol{margin:0 0 22px;padding-left:22px}
.aa-entry li{margin-bottom:9px}
.aa-entry a{color:var(--link);border-bottom:1px solid var(--sky)}
.aa-entry blockquote{border-left:3px solid var(--blue);padding-left:22px;margin:0 0 22px;
  font-family:var(--serif);font-size:22px;color:#3f3f3f}
.aa-entry img{margin:0 0 22px}
.aa-pager{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;
  padding-top:26px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--blue)}
.aa-pagination{display:flex;gap:8px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.aa-pagination .page-numbers{border:1px solid var(--line);padding:11px 16px;font-size:13.5px;background:#fff}
.aa-pagination .page-numbers.current{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ============================================================
   15. GENERIC PAGE CONTENT
   ============================================================ */
.aa-page{padding:80px 0 96px}
.aa-page .aa-entry{max-width:820px;margin:0 auto}

/* ============================================================
   16. FOOTER
   ============================================================ */
/* Light ground, so her logo can be the black line drawing she wants.
   "she does not like the white version of the logo, she prefers black on
   white background. MAYBE we change the footer color to accomodate the black
   line drawing." */
.aa-footer{background:var(--band);color:#4A4A52;padding:64px 0 42px;font-size:14.5px;border-top:1px solid var(--line)}
.aa-footer a{color:#3A4650}
.aa-footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:4vw}
@media(max-width:1000px){.aa-footer .cols{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:620px){.aa-footer .cols{grid-template-columns:1fr;gap:30px}}
.aa-footer img.flogo{height:150px;width:auto;margin-bottom:20px}
@media(max-width:620px){.aa-footer img.flogo{height:120px}}
.aa-footer h4{color:var(--blue-dp);margin-bottom:14px}
.aa-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.aa-footer a:hover{color:var(--blue)}
.aa-social{display:flex;gap:12px;margin-top:18px}
.aa-social a{width:36px;height:36px;border:1px solid rgba(37,116,184,.45);display:flex;align-items:center;
  justify-content:center;color:var(--blue-dp);transition:.25s}
.aa-social a:hover{background:var(--blue);color:#fff}
.aa-social svg{width:16px;height:16px;fill:currentColor}
.aa-copy{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;
  color:#5C6169;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ============================================================
   17. MOTION PREFERENCE
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   19. LONG FORM ARTICLE COMPONENTS
   Used by the AEO pages and posts, written as plain HTML in the
   WordPress editor so the client can edit them without a builder.
   The old .aa-note was a cream box with brown text, the last of
   the gold family. It is now a pale blue callout.
   ============================================================ */
.aa-entry .aa-answer{font-size:17.5px;color:#2A4257;border-left:3px solid var(--blue);
  padding-left:16px;margin:0 0 22px;font-weight:500;line-height:1.6}
.aa-entry .aa-box{background:#fff;border:1px solid var(--line);padding:26px 28px;margin:0 0 26px}
.aa-entry .aa-box h4{color:var(--blue-dk);margin:0 0 12px}
.aa-entry .aa-box ul:last-child,.aa-entry .aa-box p:last-child{margin-bottom:0}
.aa-entry .aa-note{background:#EEF5FB;border:1px solid #CFE2F2;padding:22px 24px;margin:0 0 28px;
  font-size:15.5px;color:#2A4257}
.aa-entry .aa-note p:last-child{margin-bottom:0}
.aa-entry .aa-note strong{color:var(--blue-dp)}
.aa-entry .aa-asof{font-size:13.5px;color:var(--muted-lt);margin:-6px 0 28px;font-style:italic}
.aa-entry table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:15px;background:#fff;
  display:block;overflow-x:auto;white-space:nowrap}
@media(min-width:720px){.aa-entry table{display:table;white-space:normal}}
/* on a phone the table scrolls sideways. iOS hides the scrollbar until you
   move, so a soft fade on the right edge says there is more to see. */
@media(max-width:719px){
  .aa-entry table{
    background-image:linear-gradient(to right,#fff,rgba(255,255,255,0)),
      linear-gradient(to left,#fff,rgba(255,255,255,0)),
      linear-gradient(to right,rgba(37,116,184,.18),rgba(37,116,184,0)),
      linear-gradient(to left,rgba(37,116,184,.18),rgba(37,116,184,0));
    background-position:left center,right center,left center,right center;
    background-repeat:no-repeat;
    background-size:22px 100%,22px 100%,12px 100%,12px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}
.aa-entry th,.aa-entry td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.aa-entry th{background:var(--blue);color:#fff;font-family:var(--sans);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.aa-entry h2{font-size:clamp(26px,3vw,36px);margin:52px 0 10px}
.aa-entry h3{font-size:23px;margin:34px 0 8px}
.aa-entry h4{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}

/* ============================================================
   20. LINK STATES
   Hello Elementor's reset.css paints every link #333366 on hover
   and active. That is wrong on every ground we use, so every
   state is declared here instead.
   ============================================================ */
a:hover,a:active,a:focus{color:inherit}
a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.aa-topbar a:hover,.aa-topbar a:focus{color:var(--blue)}
.aa-nav a:hover,.aa-nav a:focus{color:var(--blue)}
.aa-footer a:hover,.aa-footer a:focus{color:var(--blue)}
.aa-social a:hover,.aa-social a:focus{color:#fff}

.aa-entry a:hover,.aa-entry a:focus{color:var(--blue-dp)}
.aa-card a:hover,.aa-post a:hover,.aa-post h3 a:hover{color:var(--blue)}
.aa-faq .answer a:hover{color:var(--blue-dp)}

.btn:hover,.btn:active,.btn:focus{color:inherit}
.btn.gold:hover,.btn.gold:active,.btn.gold:focus{color:var(--blue-dp)}
.btn.navy:hover,.btn.navy:active,.btn.navy:focus{color:#fff}
.btn.ghost:hover,.btn.ghost:active,.btn.ghost:focus{color:#fff}
.btn.outline:hover,.btn.outline:active,.btn.outline:focus{color:#fff}
.aa-tour .book:hover,.aa-tour .book:focus{color:#fff}
.aa-tour .det:hover,.aa-tour .det:focus{color:var(--blue-dp)}

/* ============================================================
   18. PRINT
   ============================================================ */
@media print{
  .aa-hdr,.aa-topbar,.aa-footer,.aa-hero canvas,.aa-reef canvas,.aa-scroll{display:none!important}
  body{background:#fff;color:#000}
}