:root{--navy:#1c3244;--yellow:#e8b64a;--glass:rgba(90,104,128,.42);--gold:#c9a961;--cream:#e8d9b8;}
  *{margin:0;padding:0;box-sizing:border-box;}

  /* ===== HERO — content pinned to bottom => image always flush ===== */
  .hero{
    display:grid;align-content:end;overflow:hidden;min-height:54vw;padding:9vw 5.56vw 0;
    background:url("../img/Ellipse.png") no-repeat -9vw 42% / 46vw auto, var(--navy);  /* cream glow behind left text */
    padding-top: 160px;
  }
  .hero-boat-only .hero {
    padding-top: 190px;
}
.hero-conte .hero--style-4 .hero {
    padding-top: 200px;
    min-height: auto;
    padding-bottom: 125px;
}

  .hero__inner{display:grid;grid-template-columns:43.33vw 1fr;gap:2.22vw;align-items:end;}

  /* LEFT — 80px (5.56vw) space under the text */
  .hero__content{align-self:end;padding-bottom:5.56vw;display:flex;flex-direction:column;gap:2.22vw;}
  .hero__head{display:flex;flex-direction:column;gap:1.67vw;}
  .eyebrow{display:flex;align-items:center;gap:.56vw;}
  .eyebrow i{display:block;width:1.67vw;height:.14vw;min-height:2px;background:#fff;}
  .eyebrow span{font-size:.97vw;letter-spacing:.05em;text-transform:uppercase;}
  .hero__title{font-family:'Big Shoulders Display',sans-serif;font-size:7.64vw;line-height:.9;letter-spacing:-.01em;}
  /* One .hero__line per visual line; the weighted spans inside it stay inline
     so two repeater rows marked "Same Line" share one — "Get in" light next to
     "Touch" bold. The break belongs to the wrapper, never to .thin/.fat, or a
     row could never join the one above it. */
  .hero__line{display:block;}
  .hero__title .thin{font-weight:300;}
  .hero__title .fat{font-weight:900;}
  .hero__text{font-size: 1.0617vw;
    line-height: 1.6;
    max-width: 38.7vw;}
  .btn{align-self:flex-start;background:var(--yellow);color:var(--navy);font-size:1.39vw;text-transform:capitalize;padding:1.25vw 2.36vw;border-radius:.56vw;text-decoration:none;transition:filter .2s ease,transform .2s ease;}
  .btn:hover{filter:brightness(1.05);transform:translateY(-2px);}
  .trust{display:flex;gap:2.22vw;padding-top:2.78vw;flex-wrap:wrap;}
  .trust__item{display:flex;align-items:center;gap:.56vw;font-size:.97vw;}
  .trust__item svg{width:1.39vw;height:1.39vw;flex:none;color:var(--yellow);}

  /* RIGHT — grid overlap (no absolute) */
  .hero__media{display:grid;align-self:end;position:relative;}
  .hero__media > *{grid-area:1 / 1;}

  /* White shape sits UNDER the image (behind), flush bottom, scales with vw.
     Taken out of the grid on purpose: as a grid item it shared cell 1/1 with
     .banner, so the row grew to whichever was taller — and at 50vw wide with
     an auto-height image this one is taller than the 42.36vw portrait, which
     is what opened the empty space below the media column. Absolute means it
     paints in the same place but no longer sizes anything. */
  /* Centred on the portrait rather than pinned to the column edge. At 50vw
     against the 42.36vw .banner and right:-3vw, the 7.64vw of extra width did
     not split evenly — 4.64vw landed on the left and only 3vw on the right, so
     the shape read as sitting beside the person instead of behind them. The
     right offset is now derived from the two widths, so the overhang stays
     even if either changes. --glow-w is the only number to touch: lower it to
     tighten the shape around the portrait, raise it for a wider backdrop. */
  .media__glow{
        --glow-w: 42vw;
    position: absolute;
    right: calc((46.36vw - var(--glow-w)) / 2);
    bottom: 0;
    width: var(--glow-w);
    z-index: 0;
    pointer-events: none;
    opacity: .92;
  }
  .media__glow img{display:block;width:100%;height:auto;}

  .banner{justify-self:end;align-self:end;width:42.36vw;display:grid;z-index:1;}
  .banner > *{grid-area:1 / 1;}
  .banner > img{width:100%;height:auto;display:block;}
  .banner .save-card{justify-self:end;align-self:end;width:29.5%;margin:0 4% 28% 0;z-index:2;background:#5A6880;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.09);border-radius:1.67vw;padding:1.67vw;}
  .save-card b{display:block;font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:2.22vw;color:var(--cream);line-height:1;margin-bottom:.4vw;}
  .save-card span{display:block;font-family:'Geist',sans-serif;font-size:.97vw;color:#fff;}

  .exp-badge{justify-self: start;
    align-self: start;
    margin-top: 14vw;
    margin-left: -4.93vw;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.11vw;
    height: max-content;
    background: #5A6880;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 1.11vw;
    padding: 1.11vw;}
  .exp-badge__ico{flex:none;width:2.78vw;height:2.78vw;border-radius:.83vw;background:var(--gold);display:flex;align-items:center;justify-content:center;}
  .exp-badge__ico svg{width:1.39vw;height:1.39vw;color:#fff;}
  .exp-badge__txt b{display:block;font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:1.39vw;line-height:1;}
  .exp-badge__txt span{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:.83vw;text-transform:uppercase;margin-top:.28vw;}

  /* ===== STYLE 2 — soft glow, oversized portrait =====
     The cream ellipse and its background image go; the portrait is the whole
     right half, flush to the bottom and running a little past the section
     padding. Every number here is a custom property so the Layout and Portrait
     controls can move it without touching this file. */
  .hero--style-2 .hero{
    --hero-img-w: 50vw;
    --hero-img-bleed: 2.6vw;
    --hero-copy-w: 38vw;
    min-height: 57vw;
  }

  .hero--style-2 .hero__inner{grid-template-columns:var(--hero-copy-w) 1fr;gap:1.6vw;}

  /* The bleed rides on the column, not the portrait: the Portrait → Width
     control writes `margin-inline: auto` alongside its width at a higher
     specificity, and that would cancel a margin set on .banner. */
  .hero--style-2 .hero__media{
    margin-right: calc(var(--hero-img-bleed) * -1);
  }

  /* wider than its 1fr column on purpose, so the figure reaches the section
     edge; justify-self keeps the overflow on the left where the copy sits */
  .hero--style-2 .banner{width:var(--hero-img-w);}

  /* With no glow image uploaded the container has no height of its own, so
     Style 1 shows nothing. Here the circle is drawn in CSS instead, sized off
     the portrait so the two stay concentric at any width. */
  .hero--style-2 .media__glow:not(.media__glow--custom){
    --glow-w: 46vw;
    right: calc((var(--hero-img-w) - var(--glow-w)) / 2);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgba(126, 170, 200, .22) 0%,
      rgba(126, 170, 200, .10) 52%,
      rgba(27, 50, 68, 0) 71%);
  }

  /* both cards are tuned to Style 1's 42.36vw portrait; re-seat them against
     this one so they still land on the figure if they are switched on */
  .hero--style-2 .banner .save-card{width:26%;margin:0 5% 24% 0;}
  .hero--style-2 .exp-badge{margin-top:17vw;margin-left:-3vw;}

  /* ===== STYLE 3 — image full on the right =====
     Style 2's layout with the image opened right up: it takes the whole right
     side and bleeds out to the section edge. Nothing new happens to the image
     itself — it keeps its own aspect ratio and sits flush to the bottom, the
     same as in Styles 1 and 2, so it is never cropped. */
  .hero--style-3 .hero{
    --hero-img-w: 55vw;
    --hero-img-bleed: 5.56vw;   /* = the section's side padding, so the image reaches the edge */
    --hero-copy-w: 36vw;
    min-height: 52vw;
  }

  .hero--style-3 .hero__inner{grid-template-columns:var(--hero-copy-w) 1fr;gap:1.6vw;}

  /* same reason as Style 2: the bleed rides on the column, not the image, so
     Portrait → Width can still write margin-inline on .banner */
  .hero--style-3 .hero__media{margin-right:calc(var(--hero-img-bleed) * -1);}

  .hero--style-3 .banner{width:var(--hero-img-w);}

  /* re-seated against the wider image */
  .hero--style-3 .banner .save-card{width:24%;margin:0 5% 22% 0;}
  .hero--style-3 .exp-badge{margin-top:19vw;margin-left:-3vw;}

  /* ===== STYLE 4 — centred column, no media =====
     One band of copy in the middle of a plain field. The media column is not
     hidden by a switch but by the skin: every part of it belongs to a layout
     this one does not have, so leaving it to the panel would mean four
     switches to set before the hero looked right.

     The field is flat navy here — Style 1's ellipse artwork is a background on
     .hero, so it has to be overwritten rather than removed. Anything richer
     comes from Section → Background, which writes to the same element after
     this file and so always wins. */
  /* The top inset is deeper than the bottom on purpose: the site header sits
     over this section, so an even padding puts the eyebrow under the nav. The
     max() floors it at the header's own height, which is where 160px comes
     from in the base rule above. */
  .hero--style-4 .hero{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44vw;
    padding:max(190px, 12vw) 5.56vw 8vw;
    background:var(--navy);
  }

  .hero--style-4 .hero__inner{
    grid-template-columns:1fr;
    width:100%;
    max-width:52vw;
    margin-inline:auto;
    gap:0;
  }

  .hero--style-4 .hero__media{display:none;}

  /* the copy no longer sits against the foot of a portrait, so the bottom
     padding that held it there goes with the media column */
  .hero--style-4 .hero__content{
    align-self:auto;
    gap:2vw;
    padding-bottom:0;
  }

  .hero--style-4 .hero__head{gap:1.1vw;}

  /* line 1 light over line 2 heavy, the same two weights the title repeater
     already carries — only the size and the tighter leading are the skin's */
  .hero--style-4 .hero__title{font-size:6.4vw;line-height:.94;}

  .hero--style-4 .hero__text{
    max-width:44vw;
    font-size:1.06vw;
    line-height:1.65;
  }

  .hero--style-4 .trust{padding-top:1.4vw;}

  /* Only while Content Alignment is untouched — see the class comment in
     render(). .hero--centred is added to the section itself, alongside .hero,
     so these compound rather than descend; the pair is what outranks the
     panel's own default, which lands on .hero__content from the widget's
     element id at two classes. */
  .hero.hero--centred .hero__content{align-items:center;}
  .hero.hero--centred .hero__head{text-align:center;}
  .hero.hero--centred .eyebrow{justify-content:center;}
  .hero.hero--centred .trust{justify-content:center;}

  /* ===== RESPONSIVE : starts at 1024px ===== */
  @media (max-width:1024px){
    .hero{align-content:start;min-height:0;padding:160px 24px 0;
      background:url("") no-repeat -20vw 16% / 92vw auto, var(--navy);}

    /* The header is drawn over the hero rather than above it, so this padding
       is the only thing holding the copy clear of it. The theme's header is
       100px tall here, which left 60px of empty navy under the logo — more air
       than the eyebrow needs. 130px keeps 30px of clearance.
       (0,2,0) against the base rule's (0,1,0), so it wins wherever it sits.) */
    .hero--style-1 .hero{padding-top:130px;}
    .hero__inner{grid-template-columns:1fr;gap:52px;align-items:stretch;}
    .hero__content{align-self:auto;max-width:560px;gap:24px;padding-bottom:0;}
    .hero__head{gap:18px;}
    .eyebrow i{width:24px;height:2px;}
    .eyebrow span{font-size:13px;}
    .hero__title{font-size:clamp(56px,15vw,104px);}
    .hero__text{font-size:clamp(16px,4vw,20px);max-width:52ch;}
    .btn{font-size:18px;padding:16px 30px;border-radius:8px;}
    .trust{gap:20px;padding-top:8px;}
    .trust__item{font-size:14px;}
    .trust__item svg{width:20px;height:20px;}

    .hero__media{width:100%;max-width:520px;margin:0 auto;}
    .media__glow{width:105%;left:50%;right:auto;transform:translateX(-50%);margin:0;}   /* fits behind image on mobile; centred with left/transform since justify-self does nothing once absolute */
    .banner{width:100%;}
    .banner .save-card{width:150px;margin:0 14px 20% 0;border-radius:18px;padding:18px;}
    .save-card b{font-size:30px;margin-bottom:4px;}
    .save-card span{font-size:13px;}
    .exp-badge{align-self:start;justify-self:start;margin:16px 0 0 -6px;gap:12px;border-radius:16px;padding:14px;}
    .exp-badge__ico{width:44px;height:44px;border-radius:12px;}
    .exp-badge__ico svg{width:20px;height:20px;}
    .exp-badge__txt b{font-size:20px;}
    .exp-badge__txt span{font-size:11px;margin-top:2px;}

    /* stacked: the portrait goes back to the column width and stops bleeding,
       otherwise the negative margin opens a horizontal scroll */
    .hero--style-2 .hero{
      --hero-img-w: 100%;
      --hero-img-bleed: 0vw;
      min-height: 0;
      padding: 170px 24px 0;
    }

    .hero--style-2 .hero__inner{grid-template-columns:1fr;gap:52px;}

    .hero--style-2 .hero__media{margin-right:0;width:100%;max-width:520px;margin-inline:auto;}

    .hero--style-2 .media__glow:not(.media__glow--custom){
      --glow-w: 118%;
      right: auto;
      left: 50%;
      transform: translateX(-50%);
    }

    .hero--style-2 .exp-badge{margin:16px 0 0 -6px;}

    /* stacked, but unlike Style 2 the image keeps its right-hand bleed: this
       skin is the one where the figure owns the whole right side, so once the
       columns stack it fills the width outright and the bleed comes back at
       the section padding's own value — nothing is left between the figure and
       the edge. The centring the base rule applies is undone with it: width
       and max-width go back to the column, and the auto side margins to 0.
       .hero's overflow:hidden clips the overhang, so the negative margin
       cannot open a horizontal scroll here. */
    .hero--style-3 .hero{
      --hero-img-w: 100%;
      --hero-img-bleed: 24px;   /* = the section's side padding at this width */
      min-height:0;
    }

    .hero--style-3 .hero__inner{grid-template-columns:1fr;gap:52px;}

    .hero--style-3 .hero__media{
      width:auto;
      max-width:none;
      margin:0 calc(var(--hero-img-bleed) * -1) 0 0;
      justify-self:stretch;
    }

    .hero--style-3 .banner{width:100%;}
    .hero--style-3 .banner .save-card{width:150px;margin:0 14px 20% 0;}
    .hero--style-3 .exp-badge{margin:16px 0 0 -6px;}

    /* stacked: the band takes the column and the vw sizing above collapses to
       a few pixels. min-height goes with it — the copy sets the height now. */
    .hero--style-4 .hero{min-height:0;padding:150px 24px 90px;}
    .hero--style-4 .hero__inner{max-width:640px;}
    .hero--style-4 .hero__content{max-width:none;gap:26px;}
    .hero--style-4 .hero__head{gap:16px;}
    .hero--style-4 .hero__title{font-size:clamp(40px,10vw,72px);}
    .hero--style-4 .hero__text{max-width:56ch;font-size:16px;}
    .hero--style-4 .trust{padding-top:4px;}
  }
  @media (max-width:480px){
    .hero, .hero-boat-only .hero{padding:140px 18px 0;}

    /* the header shrinks to 80px on small phones, so the gap here was the
       widest of the lot at 90px — the one place the spacing ran backwards,
       growing as the screen got smaller */
    .hero--style-1 .hero{padding-top:130px;}
    .media__glow{width:130%;}
    .banner .save-card{width:132px;margin-right:12px;}
    .exp-badge{margin-left:0;}
    .hero--style-2 .media__glow:not(.media__glow--custom){--glow-w:132%;}
    /* the section's side padding drops here, so the bleed follows it down */
    .hero--style-3 .hero{--hero-img-bleed:18px;}
    .hero--style-3 .banner .save-card{width:132px;margin-right:12px;}
    .hero--style-4 .hero{padding:130px 18px 72px;}
    .hero--style-4 .hero__content{gap:22px;}
    .hero-conte .hero--style-4 .hero {
    padding-top: 140px;
    min-height: auto;
    padding-bottom: 79px;
}
  }

  /* ===== MOTION =====
     Gated on .hero--animated, which the widget's Animation control adds, and
     held at frame one by assets/css/reveal.css until the section scrolls into
     view. .hero--float adds the ambient drift on top.

     Two rules make this safe to layer over the styles above:

     1. fill-mode is `backwards`, never `forwards`/`both`. Every animation here
        ends at the element's own natural state, and a forwards fill would keep
        overriding that state forever — which would kill .btn:hover's
        translateY and, below 1024px, the translateX(-50%) that centres
        .media__glow. Backwards paints the from-state only during the delay.

     2. Most keyframes declare `from` alone. The implicit to-keyframe is
        whatever the element already computes to, so the end state is never
        hardcoded and can't drift out of sync when the layout above changes. */
  @media (prefers-reduced-motion: no-preference){

    .hero--animated .eyebrow,
    .hero--animated .hero__text,
    .hero--animated .btn,
    .hero--animated .trust__item{
      animation:hero-rise .8s cubic-bezier(.22,1,.36,1) backwards;
    }

    /* the rule draws itself out rather than fading in with the label */
    .hero--animated .eyebrow i{
      transform-origin:left center;
      animation:hero-rule .7s cubic-bezier(.22,1,.36,1) .18s backwards;
    }

    /* each headline line lifts out from behind its own baseline. The wrapper
       is what animates, not the weighted spans inside it — two rows sharing a
       line have to rise together, and animating both would clip each half
       against its own mask. */
    .hero--animated .hero__line{
      animation:hero-line 1s cubic-bezier(.22,1,.36,1) backwards;
    }

    .hero--animated .eyebrow{animation-delay:.05s;}
    .hero--animated .hero__line:nth-child(1){animation-delay:.18s;}
    .hero--animated .hero__line:nth-child(2){animation-delay:.28s;}
    .hero--animated .hero__line:nth-child(3){animation-delay:.38s;}
    .hero--animated .hero__line:nth-child(n+4){animation-delay:.48s;}
    .hero--animated .hero__text{animation-delay:.54s;}
    .hero--animated .btn{animation-delay:.64s;}
    .hero--animated .trust__item:nth-child(1){animation-delay:.74s;}
    .hero--animated .trust__item:nth-child(2){animation-delay:.81s;}
    .hero--animated .trust__item:nth-child(3){animation-delay:.88s;}
    .hero--animated .trust__item:nth-child(n+4){animation-delay:.95s;}

    /* Media column: shape settles first, portrait rises into it, then the two
       cards snap in from the side each one sits on.
       The shape is animated on its <img>, not on .media__glow — the container
       carries translateX(-50%) below 1024px and animating it there would drop
       that centring for the length of the animation. */
    .hero--animated .media__glow img{
      transform-origin:center bottom;
      animation:hero-shape 1.1s cubic-bezier(.22,1,.36,1) .1s backwards;
    }

    .hero--animated .banner > img{
      transform-origin:center bottom;
      animation:hero-portrait 1.1s cubic-bezier(.22,1,.36,1) .24s backwards;
    }

    .hero--animated .save-card{
      animation:hero-pop-right .8s cubic-bezier(.34,1.32,.64,1) .82s backwards;
    }

    .hero--animated .exp-badge{
      animation:hero-pop-left .8s cubic-bezier(.34,1.32,.64,1) .94s backwards;
    }

    /* Both cards carry a backdrop-filter and a 1px border, and together those
       are what made the drift shake instead of glide: a backdrop-filtered
       layer has its backdrop re-sampled every frame, so at the fractional
       offsets a float passes through, the blur and the hairline border snap to
       the pixel grid one frame at a time. Dropping the filter lets the card
       rasterise once and then just be moved by the compositor, which is what
       will-change asks for.

       Scoped to .hero--float so a card that is not drifting keeps its glass.
       At the shipped colour the filter is invisible either way — .save-card
       and .exp-badge both paint an opaque #5A6880, so no backdrop shows
       through to blur — but the Background control accepts a translucent
       value, and that case still gets the effect whenever the drift is off. */
    .hero--float .save-card,
    .hero--float .exp-badge{
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      will-change:transform;
    }

    /* Ambient drift — same specificity as the entrance rules above, so it has
       to come after them to win. The entrance is repeated in the shorthand
       because a second `animation` declaration would replace it outright. */
    .hero--float .save-card{
      animation:
        hero-pop-right .8s cubic-bezier(.34,1.32,.64,1) .82s backwards,
        hero-drift 7s ease-in-out 1.9s infinite;
    }

    .hero--float .exp-badge{
      animation:
        hero-pop-left .8s cubic-bezier(.34,1.32,.64,1) .94s backwards,
        hero-drift 8.5s ease-in-out 2.2s infinite;
    }
  }

  @keyframes hero-rise{
    from{opacity:0;transform:translateY(1.6vw);}
  }

  @keyframes hero-rule{
    from{opacity:0;transform:scaleX(0);}
  }

  /* negative top/bottom insets so the mask never clips ascenders or
     descenders — .hero__title runs at line-height .9 */
  @keyframes hero-line{
    from{opacity:0;transform:translateY(.5em);clip-path:inset(-.2em 0 100% 0);}
    to{opacity:1;transform:translateY(0);clip-path:inset(-.2em 0 -.2em 0);}
  }

  @keyframes hero-shape{
    from{opacity:0;transform:scale(.88);}
  }

  @keyframes hero-portrait{
    from{opacity:0;transform:translateY(2.4vw) scale(.97);}
  }

  @keyframes hero-pop-right{
    from{opacity:0;transform:translate(1.6vw,1.2vw) scale(.92);}
  }

  @keyframes hero-pop-left{
    from{opacity:0;transform:translate(-1.6vw,1.2vw) scale(.92);}
  }

  /* only the midpoint is declared: the implicit from/to are the element's
     resting position, so the drift can't fight the entrance's end state */
  @keyframes hero-drift{
    50%{transform:translateY(-.7vw);}
  }