/* ---- primitives -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
/* Zero the UA default body margin — without this every full-bleed section
   (Navbar/Hero/CTA/Footer) is inset ~8px on each side, exposing the page tint
   as "spacing" beside the hero image. */
html,body{margin:0;}
img{max-width:100%;}
.ak-root{
  margin:0;
  font-family:var(--site-font-body);color:var(--site-fg);
  background:var(--site-bg);background:var(--site-page-bg);
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.ak-section{padding:clamp(3rem,7vw,5.5rem) var(--site-space-4);}
.ak-container{width:100%;max-width:var(--site-maxw,1200px);margin:0 auto;}

/* full-bleed alternating bands (applied to the section wrapper by the renderer) */
.ak-band--surface{background:var(--site-surface);}
.ak-band--tint{background:var(--site-bg);background:var(--site-section-tint);}
.ak-wrap--sticky{position:sticky;top:0;z-index:50;}

/* ---- per-section style overrides (props.style) ------------------------- */
/* The renderer applies these to EVERY section's .ak-section-wrap, so any section
   can be restyled. Semantic values map to tokens; custom hex/named colours win.
   Navbar/Footer paint their own background, so they are re-coloured too. */
.ak-section-wrap[data-bg="surface"],.ak-section-wrap[data-bg="surface"] :is(.ak-navbar,.ak-footer){background:var(--site-surface);}
.ak-section-wrap[data-bg="muted"],.ak-section-wrap[data-bg="muted"] :is(.ak-navbar,.ak-footer){background:var(--site-surface-muted);}
.ak-section-wrap[data-bg="primary"],.ak-section-wrap[data-bg="primary"] :is(.ak-navbar,.ak-footer){background:var(--site-primary);}
.ak-section-wrap[data-bg="dark"],.ak-section-wrap[data-bg="dark"] :is(.ak-navbar,.ak-footer){background:var(--site-surface-dark);}
/* On brand/dark bands, light text for contrast. */
.ak-section-wrap[data-bg="primary"] :is(.ak-heading,h1,h2,h3,.ak-lead,p,li,a),.ak-section-wrap[data-bg="dark"] :is(.ak-heading,h1,h2,h3,.ak-lead,p,li,a){color:var(--site-on-dark);}
/* Explicit tone overrides. */
.ak-section-wrap[data-title-tone="muted"] :is(.ak-heading,h1,h2,h3){color:var(--site-muted);}
.ak-section-wrap[data-title-tone="inverted"] :is(.ak-heading,h1,h2,h3){color:var(--site-on-dark);}
.ak-section-wrap[data-title-tone="accent"] :is(.ak-heading,h1,h2,h3){color:var(--site-accent);}
.ak-section-wrap[data-title-tone="primary"] :is(.ak-heading,h1,h2,h3){color:var(--site-primary);}
.ak-section-wrap[data-body-tone="muted"] :is(.ak-lead,p){color:var(--site-muted);}
.ak-section-wrap[data-body-tone="inverted"] :is(.ak-lead,p){color:var(--site-on-dark);}
.ak-section-wrap[data-body-tone="accent"] :is(.ak-lead,p){color:var(--site-accent);}
.ak-section-wrap[data-body-tone="primary"] :is(.ak-lead,p){color:var(--site-primary);}
/* Custom hex/named colours (inline --sec-* vars from the renderer) — win. */
.ak-section-wrap[data-custom-bg],.ak-section-wrap[data-custom-bg] :is(.ak-navbar,.ak-footer){background:var(--sec-bg)!important;}
.ak-section-wrap[data-custom-title] :is(.ak-heading,h1,h2,h3){color:var(--sec-title)!important;}
.ak-section-wrap[data-custom-body] :is(.ak-lead,p,li){color:var(--sec-body)!important;}
.ak-section-wrap[data-custom-btn] :is(.ak-btn,button){background:var(--sec-btn)!important;border-color:var(--sec-btn)!important;}
/* Alignment + density (best-effort on the wrapper). */
.ak-section-wrap[data-align="center"]{text-align:center;}
.ak-section-wrap[data-density="compact"]{padding-block:clamp(1rem,3vw,2rem);}
.ak-section-wrap[data-density="spacious"]{padding-block:clamp(3rem,8vw,6rem);}

/* ---- typography -------------------------------------------------------- */
.ak-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--site-primary);font-weight:700;margin:0 0 var(--site-space-3);
}
.ak-eyebrow::before{content:"";width:1.6rem;height:2px;border-radius:2px;background:var(--site-accent);}
.ak-heading{
  font-family:var(--site-font-heading);color:var(--site-heading);line-height:1.12;
  margin:0 0 var(--site-space-3);font-weight:800;letter-spacing:-.02em;text-wrap:balance;
}
.ak-h1{font-size:clamp(2.1rem,6vw,3.4rem);}
/* Optional two-line headline (the Hero titleAccent prop). Both halves are block-level so
   the accent always starts its own line; neither rule matches a headline that
   has no accent line, so untouched sites render exactly as before. */
.ak-h1__line,.ak-h1__accent{display:block;}
.ak-h1__accent{color:var(--site-accent);}
.ak-h2{font-size:clamp(1.65rem,3.6vw,2.4rem);}
.ak-lead{color:var(--site-muted);font-size:clamp(1rem,1.4vw,1.15rem);margin:0 0 var(--site-space-5);max-width:60ch;line-height:1.7;}

/* ---- buttons ----------------------------------------------------------- */
.ak-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:var(--site-radius-full);
  font-family:var(--site-font-body);font-weight:600;font-size:.98rem;line-height:1;
  text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}
.ak-btn:focus-visible{outline:none;box-shadow:var(--site-focus-ring);}
.ak-btn--primary{background:var(--site-primary);color:var(--site-primary-contrast);box-shadow:var(--site-shadow-sm);}
.ak-btn--primary:hover{background:var(--site-primary-hover);}
.ak-btn--accent{background:var(--site-accent);color:var(--site-accent-contrast);box-shadow:var(--site-shadow-sm);}
.ak-btn--accent:hover{filter:brightness(.95);}
.ak-btn--ghost{background:transparent;color:var(--site-primary);border-color:var(--site-border);}
.ak-btn--ghost:hover{background:var(--site-primary-soft);border-color:var(--site-primary-light);}
.ak-btn:hover{transform:translateY(-2px);box-shadow:var(--site-shadow-md);}
.ak-btn:active{transform:translateY(0);}

/* ---- motion: scroll reveal --------------------------------------------- */
/*
 * TWO MECHANISMS, each used for what it is actually good at.
 *
 *   TIME-BASED (reveal)   A block fades and rises over a fixed duration once it
 *                         has scrolled into a comfortable reading position. The
 *                         islands bundle's IntersectionObserver adds .ak-pre
 *                         (the hidden state) and later .is-revealed.
 *   SCROLL-DRIVEN         Hero parallax, the receding hero copy and the reading
 *   (parallax/progress)   progress bar. These are SUPPOSED to track the scrollbar
 *                         frame-by-frame, so animation-timeline is exactly right
 *                         and costs no main-thread work.
 *
 * WHY REVEAL IS NOT SCROLL-DRIVEN — this was tried and it felt broken.
 * A scroll timeline SCRUBS: progress is the scroll position, not elapsed time.
 * With animation-range in the "entry" range, the range's LENGTH is the element's
 * own height, so a ~60px FAQ row finished its whole animation within 60px of
 * scrolling — while it was still at the very bottom edge of the screen. By the
 * time a reader had scrolled it somewhere readable it had long since finished,
 * and the per-item stagger (a few percent of 60px ≈ 4px) was invisible. Reveal
 * has to be time-based to be seen at all.
 *
 * The tier scales INTENSITY, never presence. Tier 1 ships no client bundle at
 * all, so it uses the zero-JS scroll-driven reveal below: subtle by design, and
 * its "already finished" behaviour is unnoticeable at a 10px rise.
 *
 * Reveal targets are CONTENT BLOCKS (cards, columns, media wrappers) — never a
 * full-height section.
 *
 * Stagger uses --i. Components set it from the array index; the observer then
 * OVERWRITES it with the item's position within the batch that came into view
 * together, so a cascade starts at zero wherever the reader entered the page
 * instead of making item 9 wait for nine slots that already animated offscreen.
 */
[data-reveal]{opacity:1;transform:none;}

[data-motion-tier="1"]{--ak-rise:10px;--ak-dur:.45s;--ak-stagger:0ms;}
[data-motion-tier="2"]{--ak-rise:22px;--ak-dur:.62s;--ak-stagger:90ms;}
[data-motion-tier="3"]{--ak-rise:28px;--ak-dur:.72s;--ak-stagger:105ms;}

@keyframes ak-reveal{from{opacity:0;transform:translateY(var(--ak-rise,18px));}to{opacity:1;transform:none;}}
/* Hero entrance is transform-ONLY on purpose: an element at opacity 0 does not
   count as painted, so fading the headline would delay LCP. Sliding it does not. */
@keyframes ak-hero-in{from{transform:translateY(14px);}to{transform:none;}}
@keyframes ak-hero-parallax{from{transform:translateY(-3%) scale(1.12);}to{transform:translateY(7%) scale(1.12);}}
@keyframes ak-hero-recede{to{opacity:.35;transform:translateY(-8%);}}
@keyframes ak-progress{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* ── Time-based reveal (tier 2/3) ───────────────────────────────────────── */
/* .ak-pre is applied by the observer, and ONLY to elements that were still
   below the fold when it ran. Anything already on screen is left untouched at
   the visible base state, which removes both the flash-of-hidden and any risk
   of the LCP element starting at opacity 0. */
[data-reveal].ak-pre{
  opacity:0;transform:translateY(var(--ak-rise,20px));
  transition:opacity var(--ak-dur,.6s) ease,
             transform var(--ak-dur,.6s) cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * var(--ak-stagger,0ms));
}
/* Decorative media scales in rather than sliding. Product-card images are
   deliberately excluded so product photography never moves under a shopper. */
:is(.ak-hero__media,.ak-about__media,.ak-gallery__item,.ak-flex__imagetext-media)[data-reveal].ak-pre{
  transform:scale(1.045);
}
[data-reveal].ak-pre.is-revealed{opacity:1;transform:none;}

/* ── Scroll-driven: only where scrubbing is the point ───────────────────── */
@supports (animation-timeline: view()){
  /* Tier 1 loads no JavaScript, so its (deliberately slight) reveal is CSS-only.
     A cover-based range is used rather than entry: cover spans the viewport plus
     the element, so the animation lasts a readable distance even for a short row,
     which is the exact defect that made entry unusable for tiers 2 and 3. */
  [data-motion-tier="1"] [data-reveal]:not(.ak-pre){
    animation:ak-reveal linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 34%;
  }

  /* T3 hero: the photo drifts slower than the page and the copy recedes as the
     reader scrolls past. Keyed to the ROOT scroller so they track the page. */
  [data-motion-tier="3"] .ak-hero__bg{
    animation:ak-hero-parallax linear both;
    animation-timeline:scroll(root);
    animation-range:0 100vh;
  }
  [data-motion-tier="3"] .ak-hero__content{
    animation:ak-hero-recede linear both;
    animation-timeline:scroll(root);
    animation-range:0 90vh;
  }

  /* Reading-progress bar under the navbar (T2+). Zero JS, zero scroll listener. */
  [data-motion-tier="2"] .ak-navbar__progress,
  [data-motion-tier="3"] .ak-navbar__progress{
    animation:ak-progress linear both;
    animation-timeline:scroll(root);
  }
}

/* Hero copy entrance — load-triggered (the hero is already in view, so a
   scroll timeline would resolve it instantly). Transform-only; see above. */
[data-motion-tier="2"] .ak-hero__content > [data-hero-in],
[data-motion-tier="3"] .ak-hero__content > [data-hero-in]{
  animation:ak-hero-in var(--ak-dur,.6s) cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i,0) * var(--ak-stagger,0ms));
}

.ak-navbar__progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;transform:scaleX(0);
  transform-origin:0 50%;background:var(--site-primary);pointer-events:none;
}

/* The editor sets data-ak-editing on <body> while a section is selected: a
   half-revealed block is miserable to edit, and the preview must show the real
   content, not a mid-animation frame. */
[data-ak-editing] [data-reveal],
[data-ak-editing] [data-reveal].ak-pre,
[data-ak-editing] .ak-hero__content > [data-hero-in]{
  animation:none!important;opacity:1!important;transform:none!important;
}

@media (prefers-reduced-motion: reduce){
  /* Covers BOTH mechanisms. opacity MUST be !important here: .ak-pre sets
     opacity:0 at a higher specificity, so a plain opacity:1 would lose and a
     reader who turns reduced-motion on AFTER load would be left staring at
     permanently invisible blocks. */
  [data-reveal],[data-reveal].ak-pre,.ak-hero__content > [data-hero-in],
  .ak-hero__bg,.ak-hero__content,.ak-navbar__progress{
    animation:none!important;opacity:1!important;transform:none!important;transition:none!important;
  }
  .ak-btn:hover,.ak-card:hover{transform:none;}
  *{scroll-behavior:auto!important;}
}

@media print{
  /* A reveal that never fired must not blank the page on paper. */
  [data-reveal],.ak-hero__content > [data-hero-in]{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .ak-navbar__progress{display:none;}
}

/* ---- navbar ------------------------------------------------------------ */
.ak-navbar{
  /* Positioned so the reading-progress bar and the mobile drawer both resolve
     against the navbar itself. Geometrically identical to the sticky wrapper
     they used to resolve against, so the drawer is unaffected. */
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:var(--site-space-4);
  padding:.85rem clamp(1rem,4vw,2rem);
  background:var(--site-surface);
  background:color-mix(in srgb, var(--site-surface) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;transition:box-shadow .25s ease,background-color .25s ease,border-color .25s ease;
}
.ak-navbar.is-scrolled{
  background:var(--site-surface);
  background:color-mix(in srgb, var(--site-surface) 94%, transparent);
  border-bottom-color:var(--site-border);box-shadow:var(--site-shadow-sm);
}
.ak-navbar__brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--site-font-heading);
  font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:var(--site-fg);text-decoration:none;}
.ak-navbar__brand img{height:clamp(40px,5vw,52px);width:auto;max-width:200px;object-fit:contain;border-radius:var(--site-radius-sm);display:block;}
.ak-navbar__check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.ak-navbar__nav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);}
.ak-navbar__links{display:flex;list-style:none;margin:0;padding:0;gap:clamp(1rem,2.2vw,1.9rem);}
.ak-navbar__links a{color:var(--site-fg-soft);text-decoration:none;font-weight:500;font-size:.98rem;position:relative;padding:.25rem 0;transition:color .18s ease;}
.ak-navbar__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;background:var(--site-primary);transition:right .22s ease;}
.ak-navbar__links a:hover{color:var(--site-primary);}
.ak-navbar__links a:hover::after{right:0;}
/* Scroll-spy ACTIVE state (JS sets aria-current on the in-view section's link):
   the same underline + brand colour as hover, but PERSISTENT so the current
   section is always visible in the nav. */
.ak-navbar__links a[aria-current="true"]{color:var(--site-primary);font-weight:600;}
.ak-navbar__links a[aria-current="true"]::after{right:0;}
.ak-navbar__cta{padding:.65rem 1.25rem;font-size:.92rem;}
.ak-navbar__toggle{display:none;align-items:center;justify-content:center;background:none;border:1px solid var(--site-border);
  border-radius:var(--site-radius-md);padding:.5rem;cursor:pointer;color:var(--site-fg);width:44px;height:44px;}
.ak-navbar__toggle .ak-i-close{display:none;}
.ak-navbar__check:focus-visible ~ .ak-navbar__toggle{box-shadow:var(--site-focus-ring);}

/* ---- hero -------------------------------------------------------------- */
.ak-hero{position:relative;display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;grid-template-columns:1fr;
  padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,2rem);
  background:var(--site-primary-soft);overflow:hidden;}
.ak-hero__content{max-width:640px;position:relative;z-index:2;}
.ak-hero__media{position:relative;overflow:hidden;border-radius:var(--site-radius-xl);box-shadow:var(--site-shadow-lg);}
.ak-hero__media img,.ak-hero__media video,.ak-hero__media iframe{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:center;
  border-radius:var(--site-radius-xl);display:block;border:0;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.ak-hero__media:hover img,.ak-hero__media:hover video{transform:scale(1.03);}
.ak-hero__actions{display:flex;flex-wrap:wrap;gap:var(--site-space-3);margin-top:var(--site-space-2);}
.ak-hero--overlay{grid-template-columns:1fr;min-height:clamp(30rem,max(48vw,62vh),50rem);align-items:center;
  color:#fff;background-color:var(--site-primary-strong);}
/* Full-bleed hero photo layer (real <img>, z0). object-fit:cover; zooms gently on
   hover — the same motion as the About/Gallery images. .ak-hero{overflow:hidden}
   clips the zoom. */
.ak-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  z-index:0;display:block;border:0;transition:transform .6s cubic-bezier(.22,.61,.36,1);}
/* A background-video iframe (YouTube/Vimeo) can't object-fit; scale it up so it
   always covers the hero without letterboxing. */
iframe.ak-hero__bg{width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;}
.ak-hero--overlay:hover img.ak-hero__bg,.ak-hero--overlay:hover video.ak-hero__bg{transform:scale(1.045);}
/* Overlay scrim (z1, above the photo). A LIGHT directional dark on the text side
   that fades to FULLY CLEAR on the right, so the photo stays crisp and HD (no
   dull full-image wash), PLUS a brand bottom scrim matching About/Gallery. Text
   sits at z2; a text-shadow adds legibility over the lighter areas. Tier-scaled. */
.ak-hero--overlay::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;}
[data-motion-tier="1"] .ak-hero--overlay::before{
  background:linear-gradient(90deg, rgba(8,10,18,.64) 0%, rgba(8,10,18,.34) 44%, rgba(8,10,18,0) 74%);}
[data-motion-tier="2"] .ak-hero--overlay::before{
  background:linear-gradient(90deg, rgba(8,10,18,.6) 0%, rgba(8,10,18,.3) 44%, rgba(8,10,18,0) 74%),
            linear-gradient(to top, rgba(var(--site-primary-rgb),.34) 0%, rgba(var(--site-primary-rgb),.12) 24%, rgba(var(--site-primary-rgb),0) 52%);}
[data-motion-tier="3"] .ak-hero--overlay::before{
  background:linear-gradient(90deg, rgba(8,10,18,.62) 0%, rgba(8,10,18,.32) 44%, rgba(8,10,18,0) 74%),
            linear-gradient(to top, rgba(var(--site-primary-rgb),.5) 0%, rgba(var(--site-primary-rgb),.2) 24%, rgba(var(--site-primary-rgb),0) 52%);}
.ak-hero--overlay .ak-heading,.ak-hero--overlay .ak-lead{color:#fff;}
.ak-hero--overlay .ak-heading{text-shadow:0 2px 20px rgba(0,0,0,.4);}
.ak-hero--overlay .ak-lead{color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.34);}
.ak-hero--overlay .ak-eyebrow{color:#fff;background:rgba(255,255,255,.16);padding:.4rem .8rem;border-radius:var(--site-radius-full);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.ak-hero--overlay .ak-eyebrow::before{display:none;}
/* Ghost secondary CTA must stay legible on the dark hero photo. */
.ak-hero--overlay .ak-btn--ghost{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.1);}
.ak-hero--overlay .ak-btn--ghost:hover{background:rgba(255,255,255,.18);border-color:#fff;}

/* ---- section head (shared) --------------------------------------------- */
.ak-section__head{max-width:60ch;margin-bottom:var(--site-space-5);}

/* ---- product / activity grid ------------------------------------------- */
.ak-product-grid__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,2.5vw,1.75rem);margin-top:var(--site-space-6);list-style:none;padding:0;}
/* Section header carrying a "View all" action: title block left, button right,
   pinned to the section title's baseline. Stacks on narrow screens. */
.ak-product-grid__head{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;}
.ak-product-grid__headtext{max-width:60ch;}
.ak-product-grid__viewall{flex:none;gap:.6rem;}
.ak-product-grid__count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .45rem;border-radius:999px;background:var(--site-primary-soft);color:var(--site-primary);font-size:.8125rem;font-weight:700;}
.ak-card{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--site-shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.ak-card:hover{transform:translateY(-4px);box-shadow:var(--site-shadow-lg);border-color:var(--site-primary-light);}
.ak-card__media{position:relative;overflow:hidden;}
.ak-card__media img,.ak-card>img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease;}
.ak-card:hover .ak-card__media img{transform:scale(1.04);}
.ak-card__badge{position:absolute;top:.75rem;left:.75rem;background:color-mix(in srgb,var(--site-surface) 90%,transparent);
  color:var(--site-primary);font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:.32rem .7rem;border-radius:var(--site-radius-full);box-shadow:var(--site-shadow-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.ak-card__body{padding:var(--site-space-5);display:flex;flex-direction:column;gap:.6rem;flex:1;}
.ak-card__title{font-family:var(--site-font-heading);font-weight:700;font-size:1.15rem;margin:0;letter-spacing:-.01em;line-height:1.3;}
.ak-card__desc{color:var(--site-muted);font-size:.94rem;margin:0;line-height:1.6;}
.ak-card__metarow{display:flex;flex-wrap:wrap;gap:.35rem .9rem;color:var(--site-muted);font-size:.85rem;margin:.1rem 0 .2rem;}
.ak-card__metarow span{display:inline-flex;align-items:center;gap:.35rem;}
.ak-card__meta{color:var(--site-muted);font-size:.88rem;margin:0;}
.ak-card__footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;padding-top:.4rem;}
.ak-card__price{color:var(--site-fg);font-weight:800;font-family:var(--site-font-heading);font-size:1.05rem;}
.ak-card__price small{color:var(--site-muted);font-weight:500;font-size:.78rem;}
.ak-card__avail{font-size:.74rem;font-weight:700;padding:.28rem .6rem;border-radius:var(--site-radius-full);
  color:#14733a;background:#e7f7ec;}
.ak-card__avail--out{color:#8a1c1c;background:#fbeaea;}
.ak-card .ak-btn{width:100%;margin-top:.4rem;}

/* ---- booking widget ---------------------------------------------------- */
.ak-booking{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius-lg);
  padding:clamp(1.5rem,3vw,2rem);max-width:520px;margin-inline:auto;box-shadow:var(--site-shadow-md);}
.ak-booking .ak-eyebrow{margin-bottom:.4rem;}
.ak-booking__price{font-family:var(--site-font-heading);font-size:2rem;font-weight:800;color:var(--site-fg);margin:.2rem 0 var(--site-space-5);letter-spacing:-.02em;}
.ak-booking__price small{font-size:.85rem;font-weight:500;color:var(--site-muted);margin-left:.5rem;}
.ak-field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:var(--site-space-4);}
.ak-field label{font-weight:600;font-size:.88rem;color:var(--site-fg-soft);}
.ak-field select,.ak-field input,.ak-contact textarea{padding:.8rem .9rem;border:1px solid var(--site-border);
  border-radius:var(--site-radius-md);font:inherit;background:var(--site-surface);color:var(--site-fg);width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;}
.ak-field select:focus,.ak-field input:focus,.ak-contact textarea:focus{outline:none;border-color:var(--site-primary);box-shadow:var(--site-focus-ring);}
.ak-booking__options{list-style:none;margin:0 0 var(--site-space-4);padding:0;display:flex;flex-direction:column;gap:.6rem;}
.ak-booking__options label{display:flex;align-items:center;gap:.6rem;font-size:.95rem;}
.ak-booking__result{border-radius:var(--site-radius-md);padding:var(--site-space-4);background:#e7f7ec;color:#14512a;}
.ak-booking__result h3{margin:0 0 .3rem;}
.ak-booking__soldout,.ak-booking__error{color:#8a1c1c;font-weight:600;font-size:.9rem;}
.ak-booking__hint{color:var(--site-primary);font-weight:600;font-size:.9rem;}

/* ---- booking: pill controls + attendee circles ------------------------ */
.ak-pills{display:flex;flex-wrap:wrap;gap:.55rem;}
.ak-pill{border:1.5px solid var(--site-border);background:var(--site-surface);color:var(--site-fg);
  padding:.6rem 1.1rem;border-radius:var(--site-radius-full);font:inherit;font-size:.9rem;font-weight:600;
  cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease;}
.ak-pill:hover{border-color:var(--site-fg);}
.ak-pill[aria-pressed="true"]{background:var(--site-fg);border-color:var(--site-fg);color:var(--site-surface);}
.ak-pill:focus-visible{outline:none;box-shadow:var(--site-focus-ring);}
.ak-nums{display:flex;flex-wrap:wrap;gap:.55rem;}
.ak-num{width:2.9rem;height:2.9rem;border-radius:var(--site-radius-full);border:1.5px solid var(--site-border);
  background:var(--site-surface);color:var(--site-fg);font:inherit;font-weight:700;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:border-color .15s ease,background .15s ease,color .15s ease;}
.ak-num:hover{border-color:var(--site-fg);}
.ak-num[aria-pressed="true"]{background:var(--site-fg);border-color:var(--site-fg);color:var(--site-surface);}
.ak-num:focus-visible{outline:none;box-shadow:var(--site-focus-ring);}

/* ---- booking: image + form modal (progressive enhancement) ------------ */
.ak-book-trigger{display:flex;justify-content:center;margin:var(--site-space-4) 0;}
.ak-book{max-width:960px;margin-inline:auto;}
.ak-book__backdrop{display:none;}
.ak-book__dialog{display:grid;grid-template-columns:.82fr 1.18fr;background:var(--site-surface);
  border:1px solid var(--site-border);border-radius:var(--site-radius-xl);overflow:hidden;box-shadow:var(--site-shadow-lg);}
.ak-book__dialog--noimg{grid-template-columns:1fr;}
.ak-book__media{position:relative;overflow:hidden;background:var(--site-section-tint);min-height:16rem;}
.ak-book__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ak-book__form{display:flex;flex-direction:column;min-height:0;}
.ak-book__head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:clamp(1.1rem,2.4vw,1.5rem);border-bottom:1px solid var(--site-border);}
.ak-book__head .ak-eyebrow{margin-bottom:.35rem;}
.ak-book__head .ak-h2{font-size:clamp(1.25rem,2.6vw,1.6rem);margin:0;}
.ak-book__head .ak-booking__price{font-size:1.5rem;margin:.4rem 0 0;}
.ak-book__close{flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:var(--site-radius-full);
  border:1px solid var(--site-border);background:var(--site-surface);color:var(--site-fg);font-size:1rem;line-height:1;
  cursor:pointer;transition:background .15s ease,color .15s ease;}
.ak-book__close:hover{background:var(--site-fg);color:var(--site-surface);border-color:var(--site-fg);}
.ak-book__close:focus-visible{outline:none;box-shadow:var(--site-focus-ring);}
.ak-book:not(.ak-book--modal) .ak-book__close{display:none;}
.ak-book__body{padding:clamp(1.1rem,2.4vw,1.5rem);display:flex;flex-direction:column;gap:var(--site-space-4);}
.ak-book__body .ak-field{margin-bottom:0;}

.ak-book--modal:not(.ak-book--open){display:none;}
.ak-book--modal.ak-book--open{position:fixed;inset:0;z-index:1000;max-width:none;margin:0;display:flex;
  align-items:center;justify-content:center;padding:clamp(.75rem,3vw,2.5rem);}
.ak-book--modal .ak-book__backdrop{display:block;position:absolute;inset:0;border:0;padding:0;cursor:pointer;
  background:rgba(20,16,10,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
/* Definite height so the right column is bounded and the form body can scroll. */
.ak-book--modal .ak-book__dialog{position:relative;width:min(960px,100%);height:min(700px,92vh);
  grid-template-rows:minmax(0,1fr);}
.ak-book--modal .ak-book__media{min-height:0;}
.ak-book--modal .ak-book__form{min-height:0;overflow:hidden;}
.ak-book--modal .ak-book__body{overflow-y:auto;flex:1 1 auto;min-height:0;}

@media (max-width:640px){
  .ak-book__dialog{grid-template-columns:1fr;}
  .ak-book__media{min-height:9rem;max-height:11rem;}
  .ak-book--modal.ak-book--open{padding:0;align-items:stretch;}
  .ak-book--modal .ak-book__dialog{width:100%;height:100dvh;border-radius:0;grid-template-rows:auto minmax(0,1fr);}
  .ak-book--modal .ak-book__media{min-height:9rem;max-height:11rem;}
}

/* ---- product detail ---------------------------------------------------- */
.ak-product-detail{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:center;}
.ak-product-detail__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--site-radius-xl);display:block;box-shadow:var(--site-shadow-lg);}
.ak-product-detail__price{font-family:var(--site-font-heading);font-size:1.5rem;font-weight:800;color:var(--site-primary);margin:.2rem 0 var(--site-space-3);}
.ak-product-detail__features{list-style:none;padding:0;margin:var(--site-space-4) 0;display:flex;flex-direction:column;gap:.7rem;}
.ak-product-detail__features li{padding-left:1.9rem;position:relative;color:var(--site-fg-soft);}
.ak-product-detail__features li::before{content:"";position:absolute;left:0;top:.05rem;width:1.25rem;height:1.25rem;border-radius:var(--site-radius-full);
  background:var(--site-primary-soft);color:var(--site-primary);}
.ak-product-detail__features li::after{content:"✓";position:absolute;left:.28rem;top:.02rem;color:var(--site-primary);font-weight:800;font-size:.8rem;}

/* ---- gallery ----------------------------------------------------------- */
/* Auto-fit so each photo is LARGE: it fills at least ~clamp(340→420px) and grows
   to share the row. In a narrow pane (editor preview) this collapses to a single
   full-width image instead of two cramped squares; on a wide page it lays out
   2–3 big tiles. min(100%,…) guards against overflow on very small screens. */
.ak-gallery__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(1rem,2vw,1.5rem);margin-top:var(--site-space-6);}
/* Each image lives in a figure so the decorative grade overlay can attach. A
   4:3 landscape frame reads bigger and more editorial than a small square. */
.ak-gallery__item{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:var(--site-radius-lg);
  box-shadow:var(--site-shadow-sm);margin:0;display:block;transition:box-shadow .3s ease;}
.ak-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.ak-gallery__item:hover{box-shadow:var(--site-shadow-md);}
.ak-gallery__item:hover img{transform:scale(1.02);}
/* Back-compat: a bare <img> (older gallery markup) keeps its own styling. */
.ak-gallery__grid>img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--site-radius-lg);display:block;
  transition:transform .4s ease,box-shadow .3s ease;box-shadow:var(--site-shadow-sm);}
.ak-gallery__grid>img:hover{transform:scale(1.02);box-shadow:var(--site-shadow-md);}

/* ---- decorative image grade (tier-scaled BOTTOM scrim) ----------------- */
/* Applied to hero/about/gallery decorative media ONLY. Product-card images
   (.ak-card__media) are deliberately never graded, so product photos stay true.
   The photo itself is left a TRUE image — there is NO full-image recolour. A
   single brand-tinted gradient rises from the BOTTOM edge and fades to fully
   transparent before the half-way line, so the top of every photo stays clean
   and real (the "graded" look reads as depth, not a colour wash). Intensity is
   keyed off the site tier (body[data-motion-tier]): Basic = neutral shade,
   Refined = light brand, Premium = stronger brand — a Basic site can never
   render the premium brand grade. pointer-events:none keeps the editor's
   click-to-select working. */
.ak-hero__media,.ak-about__media,.ak-gallery__item{isolation:isolate;}
.ak-hero__media::before,.ak-about__media::before,.ak-gallery__item::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;}
.ak-hero__media::before,.ak-about__media::before{border-radius:var(--site-radius-xl);}
.ak-gallery__item::before{border-radius:var(--site-radius-lg);}

/* T1 Basic — neutral charcoal bottom shade only, NO brand hue. */
[data-motion-tier="1"] .ak-hero__media::before,
[data-motion-tier="1"] .ak-about__media::before,
[data-motion-tier="1"] .ak-gallery__item::before{
  background:linear-gradient(to top, rgba(15,18,26,.34) 0%, rgba(15,18,26,.12) 22%, rgba(15,18,26,0) 46%);}

/* T2 Refined — a LIGHT brand bottom scrim (bottom-only, top stays clean). */
[data-motion-tier="2"] .ak-hero__media::before,
[data-motion-tier="2"] .ak-about__media::before,
[data-motion-tier="2"] .ak-gallery__item::before{
  background:linear-gradient(to top, rgba(var(--site-primary-rgb),.52) 0%, rgba(var(--site-primary-rgb),.22) 22%, rgba(var(--site-primary-rgb),0) 50%);}

/* T3 Premium — a STRONGER brand bottom scrim (still bottom-only; --site-image-scrim
   fades out by ~52%, so the upper half of the photo is untouched). */
[data-motion-tier="3"] .ak-hero__media::before,
[data-motion-tier="3"] .ak-about__media::before,
[data-motion-tier="3"] .ak-gallery__item::before{
  background:var(--site-image-scrim);}

/* Placeholder guard — while an image is still a grey placeholder awaiting AI
   enrichment (data-placeholder on the media wrapper / overlay hero section), it
   gets NO brand scrim: a shaded grey placeholder reads as a solid colour block.
   The attribute drops the instant the real photo lands, so the scrim returns
   automatically — no re-render logic needed. */
.ak-hero__media[data-placeholder]::before,
.ak-about__media[data-placeholder]::before,
.ak-gallery__item[data-placeholder]::before{display:none;}

/* ---- testimonials ------------------------------------------------------ */
.ak-testimonials__summary{display:flex;align-items:center;gap:.6rem;margin:0 0 var(--site-space-5);font-weight:600;color:var(--site-fg-soft);}
.ak-testimonials__summary .ak-stars{color:#fbbf24;letter-spacing:.1em;}
.ak-testimonials__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,2.5vw,1.75rem);margin-top:var(--site-space-5);}
.ak-quote{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius-lg);
  padding:clamp(1.25rem,2.6vw,1.6rem);display:flex;flex-direction:column;gap:.85rem;box-shadow:var(--site-shadow-sm);}
.ak-quote__head{display:flex;align-items:center;gap:.75rem;}
.ak-quote__avatar{width:44px;height:44px;border-radius:var(--site-radius-full);object-fit:cover;flex:none;display:block;}
.ak-quote__avatar--initials{display:inline-flex;align-items:center;justify-content:center;
  background:var(--site-fg);color:#fff;font-family:var(--site-font-heading);font-weight:700;font-size:1.05rem;line-height:1;}
.ak-quote__meta{display:flex;flex-direction:column;min-width:0;}
.ak-quote__name{font-weight:700;color:var(--site-fg);line-height:1.2;}
.ak-quote__date{color:var(--site-muted);font-size:.82rem;margin-top:.15rem;}
.ak-quote__rating{display:flex;align-items:center;gap:.45rem;}
.ak-quote__rating .ak-stars{color:#fbbf24;letter-spacing:.08em;font-size:1.05rem;line-height:1;}
.ak-quote__verified{display:block;flex:none;}
.ak-quote__text{margin:0;color:var(--site-fg-soft);line-height:1.6;font-size:.96rem;}
.ak-quote__posted{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--site-muted);margin-top:.1rem;}
.ak-quote__source{color:var(--site-fg-soft);font-weight:700;}

/* ---- faq --------------------------------------------------------------- */
.ak-faq__list{margin-top:var(--site-space-6);display:flex;flex-direction:column;gap:.75rem;max-width:820px;}
.ak-faq details{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius-md);
  padding:1.1rem 1.25rem;transition:border-color .2s ease,box-shadow .2s ease;}
.ak-faq details[open]{border-color:var(--site-primary-light);box-shadow:var(--site-shadow-sm);}
.ak-faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--site-fg);}
.ak-faq summary::-webkit-details-marker{display:none;}
.ak-faq summary::after{content:"+";color:var(--site-primary);font-weight:700;font-size:1.4rem;line-height:1;transition:transform .2s ease;}
.ak-faq details[open] summary::after{content:"\2212";}
.ak-faq p{margin:.9rem 0 0;color:var(--site-muted);line-height:1.7;}
.ak-faq details[open] p{animation:ak-fade-in .3s ease;}
@keyframes ak-fade-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

/* ---- about ------------------------------------------------------------- */
.ak-about{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;}
/* overflow:hidden CLIPS the hover zoom to the rounded frame — without it the
   scaled photo escapes past the scrim at the bottom edge. Shadow lives on the
   wrapper (not the img) so it isn't clipped away by overflow:hidden. */
.ak-about__media{position:relative;overflow:hidden;border-radius:var(--site-radius-xl);box-shadow:var(--site-shadow-lg);}
.ak-about__media img,.ak-about__media video,.ak-about__media iframe{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--site-radius-xl);display:block;border:0;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.ak-about__media:hover img,.ak-about__media:hover video{transform:scale(1.03);}
.ak-about__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--site-space-4);margin-top:var(--site-space-5);}
.ak-about__stat{padding:1rem 1.1rem;background:var(--site-primary-soft);border-radius:var(--site-radius-md);}
.ak-about__stat b{display:block;font-family:var(--site-font-heading);font-size:1.7rem;color:var(--site-primary);letter-spacing:-.02em;}
.ak-about__stat span{color:var(--site-muted);font-size:.85rem;}

/* ---- cta --------------------------------------------------------------- */
.ak-cta{position:relative;overflow:hidden;color:var(--site-primary-contrast);border-radius:var(--site-radius-xl);
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);text-align:center;box-shadow:var(--site-shadow-lg);
  background:var(--site-primary);
  background:linear-gradient(135deg,var(--site-primary),var(--site-primary-strong));}
.ak-cta .ak-heading{color:var(--site-primary-contrast);}
.ak-cta .ak-lead{color:color-mix(in srgb,var(--site-primary-contrast) 88%,transparent);margin-left:auto;margin-right:auto;}
.ak-cta__actions{display:flex;gap:var(--site-space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--site-space-2);}
.ak-cta .ak-btn--accent{box-shadow:var(--site-shadow-md);}
.ak-cta .ak-btn--ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);}
.ak-cta .ak-btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;}

/* ---- contact ----------------------------------------------------------- */
.ak-contact{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:start;}
.ak-contact__list{list-style:none;padding:0;margin:var(--site-space-4) 0;display:flex;flex-direction:column;gap:var(--site-space-3);}
.ak-contact__list li{color:var(--site-fg-soft);}
.ak-contact__list a{color:var(--site-primary);text-decoration:none;}
.ak-contact__list a:hover{text-decoration:underline;}
.ak-contact form{display:flex;flex-direction:column;gap:var(--site-space-4);background:var(--site-surface);
  border:1px solid var(--site-border);border-radius:var(--site-radius-lg);padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--site-shadow-sm);}
.ak-contact textarea{min-height:130px;resize:vertical;}
.ak-contact form .ak-btn{align-self:flex-start;}

/* ---- rich text --------------------------------------------------------- */
.ak-richtext{max-width:72ch;margin:0 auto;}
.ak-richtext h2{font-family:var(--site-font-heading);letter-spacing:-.01em;margin:var(--site-space-5) 0 var(--site-space-3);}
.ak-richtext p{margin:0 0 var(--site-space-4);color:var(--site-fg-soft);line-height:1.75;}
.ak-richtext a{color:var(--site-primary);}
.ak-richtext ul,.ak-richtext ol{padding-left:var(--site-space-5);margin:0 0 var(--site-space-4);color:var(--site-fg-soft);}
.ak-richtext li{margin:0 0 .4rem;}

/* ---- flex section (bounded fallback blocks) ---------------------------- */
/* Every value below is a var(--site-*) token, so an AI-composed FlexSection
   inherits the tenant theme exactly like a curated section. */
.ak-flex__head{max-width:70ch;margin:0 auto var(--site-space-6);text-align:center;}
.ak-flex__head .ak-lead{color:var(--site-muted);margin:.6rem 0 0;}
.ak-flex__blocks{display:flex;flex-direction:column;gap:var(--site-space-6);}
.ak-flex__para{color:var(--site-fg-soft);line-height:1.75;margin:0;max-width:72ch;}
.ak-flex__list{padding-left:var(--site-space-5);margin:0;color:var(--site-fg-soft);max-width:72ch;}
.ak-flex__list li{margin:0 0 .4rem;}

/* cards */
.ak-flex__cards{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.5rem);}
.ak-flex__card{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--site-shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.ak-flex__card:hover{transform:translateY(-4px);box-shadow:var(--site-shadow-lg);border-color:var(--site-primary-light);}
.ak-flex__card-media{position:relative;overflow:hidden;}
.ak-flex__card-media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease;}
.ak-flex__card:hover .ak-flex__card-media img{transform:scale(1.04);}
.ak-flex__card-body{padding:var(--site-space-5);display:flex;flex-direction:column;gap:.5rem;flex:1;}
.ak-flex__card-body h4{font-family:var(--site-font-heading);font-weight:700;font-size:1.1rem;margin:0;letter-spacing:-.01em;line-height:1.3;}
.ak-flex__card-body p{color:var(--site-muted);font-size:.94rem;margin:0;line-height:1.6;}
.ak-flex__card-sub{color:var(--site-primary)!important;font-weight:600;font-size:.88rem!important;}
.ak-flex__badge{align-self:flex-start;background:var(--site-primary-soft);color:var(--site-primary);
  font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:.28rem .65rem;border-radius:var(--site-radius-full);}
/* Team cards intentionally use the same complete card treatment as every
   other card: a full-width contextual image, then role and description. This
   avoids detached circular portraits and gives each generated profile a clear
   visual container. */
/* steps: CSS counter — a numbered process needs no photo, so no image slot is
   enumerated for this variant (see image-enrichment.service.ts). */
.ak-flex__cards[data-variant="steps"]{counter-reset:ak-step;}
.ak-flex__cards[data-variant="steps"] .ak-flex__card{counter-increment:ak-step;position:relative;padding-top:var(--site-space-5);}
.ak-flex__cards[data-variant="steps"] .ak-flex__card::before{content:counter(ak-step);
  position:absolute;top:var(--site-space-4);left:var(--site-space-5);
  width:2.25rem;height:2.25rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--site-radius-full);background:var(--site-primary);color:var(--site-on-primary,#fff);
  font-family:var(--site-font-heading);font-weight:800;font-size:1rem;}
.ak-flex__cards[data-variant="steps"] .ak-flex__card-body{padding-top:calc(var(--site-space-5) + 2rem);}

/* stats */
.ak-flex__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--site-space-4);}
.ak-flex__stat{padding:1rem 1.1rem;background:var(--site-primary-soft);border-radius:var(--site-radius-md);text-align:center;}
.ak-flex__stat b{display:block;font-family:var(--site-font-heading);font-size:1.75rem;font-weight:800;color:var(--site-primary);letter-spacing:-.02em;}
.ak-flex__stat span{color:var(--site-fg-soft);font-size:.9rem;}

/* image + text */
.ak-flex__imagetext{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:center;}
.ak-flex__imagetext-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--site-radius-lg);display:block;box-shadow:var(--site-shadow-md);}
.ak-flex__imagetext-body p{color:var(--site-fg-soft);line-height:1.75;margin:.6rem 0 var(--site-space-4);}

/* buttons + logos */
.ak-flex__buttons{display:flex;flex-wrap:wrap;gap:.75rem;}
.ak-flex__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.25rem,4vw,3rem);}
.ak-flex__logo img{height:clamp(1.75rem,4vw,2.5rem);width:auto;object-fit:contain;opacity:.7;
  filter:grayscale(1);transition:opacity .2s ease,filter .2s ease;}
.ak-flex__logo img:hover{opacity:1;filter:grayscale(0);}

/* ---- footer ------------------------------------------------------------ */
.ak-footer{background:var(--site-footer-bg);color:var(--site-on-dark);padding:clamp(3.5rem,7vw,5.75rem) clamp(1rem,4vw,2rem) clamp(1.5rem,3vw,2.25rem);}
.ak-footer__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,3.5rem);align-items:start;}
.ak-footer__brand{max-width:28rem;}
.ak-footer h3{margin:0 0 var(--site-space-3);color:#fff;}
.ak-footer__brand-name{display:flex;align-items:center;gap:.55rem;font-family:var(--site-font-heading);font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.15;letter-spacing:-.01em;}
.ak-footer__brand-name::before{content:"";width:.65rem;height:.65rem;border-radius:999px;background:var(--site-accent);box-shadow:0 0 0 4px rgba(var(--site-primary-rgb),.08);flex:0 0 auto;}
.ak-footer__column-title{font-family:var(--site-font-body);font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--site-accent)!important;}
.ak-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.ak-footer a{color:var(--site-on-dark);text-decoration:none;transition:opacity .16s ease,color .16s ease,transform .16s ease;opacity:.8;}
.ak-footer a:hover{opacity:1;color:#fff;}
.ak-footer a:focus-visible{outline:2px solid var(--site-accent);outline-offset:4px;border-radius:2px;}
.ak-footer__tagline{margin:0;color:var(--site-on-dark);opacity:.76;line-height:1.65;max-width:25rem;}
.ak-footer__contact{font-style:normal;margin:0;display:flex;flex-direction:column;gap:.7rem;}
.ak-footer__contact :is(a,span){color:var(--site-on-dark);opacity:.88;font-size:.94rem;line-height:1.5;}
.ak-footer__contact a{opacity:.88;}
.ak-footer__contact-links{margin-top:.7rem!important;}
.ak-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--site-space-4);margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.25rem,2vw,1.75rem);border-top:1px solid rgba(255,255,255,.16);
  color:var(--site-on-dark);opacity:.66;font-size:.82rem;}

/* ======================================================================== */
/* Tablet >= 768px                                                          */
/* ======================================================================== */
@media (min-width:768px){
  .ak-navbar__links{font-size:1rem;}
  .ak-hero{grid-template-columns:1.05fr .95fr;padding:clamp(4rem,7vw,6rem) clamp(2rem,5vw,3rem);}
  .ak-hero--overlay{grid-template-columns:1fr;}
  .ak-product-grid__grid{grid-template-columns:repeat(2,1fr);}
  .ak-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ak-footer__brand{grid-column:1 / -1;}
  .ak-product-detail{grid-template-columns:1fr 1fr;}
  /* Gallery columns are governed by the base auto-fit rule (big, even tiles that
     adapt) — no forced column count, so photos never shrink on wide screens. */
  .ak-testimonials__grid{grid-template-columns:repeat(2,1fr);}
  .ak-about{grid-template-columns:1fr 1fr;}
  .ak-contact{grid-template-columns:1fr 1fr;}
  /* Flex cards: 2-up by default, honouring an explicit column count when set. */
  .ak-flex__cards{grid-template-columns:repeat(2,1fr);}
  .ak-flex__stats{grid-template-columns:repeat(4,1fr);}
  .ak-flex__imagetext{grid-template-columns:1fr 1fr;}
  .ak-flex__imagetext[data-side="right"] .ak-flex__imagetext-media{order:2;}
}

/* ======================================================================== */
/* Laptop >= 1024px                                                         */
/* ======================================================================== */
@media (min-width:1024px){
  .ak-product-grid__grid{grid-template-columns:repeat(3,1fr);}
  .ak-footer__cols{grid-template-columns:minmax(18rem,2fr) repeat(3,minmax(0,1fr));}
  .ak-footer__brand{grid-column:auto;}
  /* Default 3-up; an explicit columns value on the block wins. */
  .ak-flex__cards{grid-template-columns:repeat(3,1fr);}
  .ak-flex__cards[data-columns="2"]{grid-template-columns:repeat(2,1fr);}
  .ak-flex__cards[data-columns="3"]{grid-template-columns:repeat(3,1fr);}
  .ak-flex__cards[data-columns="4"]{grid-template-columns:repeat(4,1fr);}
}

/* ======================================================================== */
/* Mobile drawer (< 768px): zero-JS checkbox-hack menu                      */
/* ======================================================================== */
@media (max-width:767.98px){
  .ak-navbar__toggle{display:inline-flex;}
  .ak-navbar__nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.35rem;
    background:var(--site-surface);border-bottom:1px solid var(--site-border);box-shadow:var(--site-shadow-md);
    padding:.75rem clamp(1rem,4vw,2rem) 1.25rem;
    opacity:0;transform:translateY(-8px);pointer-events:none;max-height:0;overflow:hidden;
    transition:opacity .24s ease,transform .24s ease;
  }
  .ak-navbar__links{flex-direction:column;align-items:stretch;gap:0;}
  .ak-navbar__links li{border-bottom:1px solid var(--site-border);}
  .ak-navbar__links a{display:block;padding:.85rem .25rem;}
  .ak-navbar__links a::after{display:none;}
  .ak-navbar__cta{margin-top:.6rem;width:100%;}
  .ak-navbar__check:checked ~ .ak-navbar__nav{opacity:1;transform:none;pointer-events:auto;max-height:80vh;overflow:auto;}
  .ak-navbar__check:checked ~ .ak-navbar__toggle .ak-i-menu{display:none;}
  .ak-navbar__check:checked ~ .ak-navbar__toggle .ak-i-close{display:inline;}
}

/* ======================================================================== */
/* Desktop >= 1440px                                                        */
/* ======================================================================== */
@media (min-width:1440px){
  .ak-section{padding:clamp(4rem,6vw,6rem) var(--site-space-6);}
  .ak-testimonials__grid{grid-template-columns:repeat(3,1fr);}
}

/* ======================================================================== */
/* Preset motion + image treatment                                          */
/* ======================================================================== */
/* Motion is expressed ONLY through the three tokens the reveal system already
   reads (--ak-rise / --ak-dur / --ak-stagger), so each preset gets its own
   character without adding a single new animation. The tier still decides
   WHETHER a site animates; the preset decides how that motion feels. The
   reduced-motion block above disables all of it with !important regardless. */
[data-design-preset="expedition"]{--ak-rise:26px;--ak-dur:.5s;--ak-stagger:70ms;}
[data-design-preset="clean-conversion"]{--ak-rise:12px;--ak-dur:.42s;--ak-stagger:55ms;}
[data-design-preset="editorial-premium"]{--ak-rise:16px;--ak-dur:.92s;--ak-stagger:150ms;}
[data-design-preset="warm-local"]{--ak-rise:18px;--ak-dur:.68s;--ak-stagger:100ms;}

/* Hover response, matched to the same character. */
[data-design-preset="expedition"] .ak-card:hover{transform:translateY(-6px);}
[data-design-preset="expedition"] .ak-card:hover .ak-card__media img{transform:scale(1.06);}
[data-design-preset="clean-conversion"] .ak-card:hover{transform:translateY(-2px);}
[data-design-preset="clean-conversion"] .ak-card:hover .ak-card__media img{transform:scale(1.02);}
/* Editorial deliberately does not lift or zoom: the photography is the subject,
   and a moving crop under a full-bleed portrait cheapens it. */
[data-design-preset="editorial-premium"] .ak-card:hover .ak-card__media img{transform:none;}
[data-design-preset="editorial-premium"] :is(.ak-gallery__item,.ak-about__media):hover img{transform:scale(1.015);}
[data-design-preset="editorial-premium"] :is(.ak-gallery__item,.ak-about__media) img{transition-duration:.9s;}
[data-design-preset="warm-local"] .ak-card:hover{transform:translateY(-4px);}

/* Image grade: presets deliberately do NOT override it. The tier-scaled,
   BRAND-TINTED bottom scrim above (--site-image-scrim / the tier rules) is what
   ties a photo to the tenant's colour, and it is the same in every preset — a
   preset changes the arrangement of the photos, never their treatment. */

/* ---- Expedition visual preset ----------------------------------------- */
/* Presentation only: business facts, catalog content and all booking links
   continue to come from the normal, tenant-scoped rendering pipeline. */
[data-design-preset="expedition"]{
  --site-maxw:1280px;
  --site-radius-md:12px;
  --site-radius-lg:20px;
  --site-radius-xl:30px;
  --site-page-bg:color-mix(in srgb,var(--site-primary) 3%,#f8f8f5);
  --site-section-tint:color-mix(in srgb,var(--site-primary) 8%,#f4f4ef);
  /* Floating-navbar geometry. BOTH values are declared only here, and the
     negative pull below is derived from them — so the pill's real height and
     the amount the hero moves up can never drift apart. */
  --ak-nav-h:68px;
  --ak-nav-gap:16px;
}

/* -- floating pill navbar --------------------------------------------------
   The sticky wrapper keeps its scroll behaviour but stops painting a full-width
   band and (over an overlay hero only) stops taking vertical space, so the hero
   photo runs to the very top of the page and the pill floats on top of it. */
[data-design-preset="expedition"] .ak-section-wrap.ak-wrap--sticky{
  background:transparent;
  padding:var(--ak-nav-gap) clamp(.7rem,3vw,1.6rem) 0;
}
/* The pull-up is gated on :has() so it only happens when the NEXT section is
   actually a full-bleed overlay hero. On a page that starts with a normal
   section (e.g. /products) nothing moves, and browsers without :has() simply
   get a conventional non-overlapping navbar — never content hidden under it. */
@supports selector(:has(*)){
  [data-design-preset="expedition"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay){
    margin-bottom:calc(-1 * (var(--ak-nav-h) + var(--ak-nav-gap)));
  }
}
[data-design-preset="expedition"] .ak-navbar{
  height:var(--ak-nav-h);
  max-width:min(1200px,100%);margin-inline:auto;
  padding:0 .7rem 0 1.15rem;
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--site-radius-full);
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 30px -16px rgba(8,12,18,.55);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
}
[data-design-preset="expedition"] .ak-navbar.is-scrolled{
  background:rgba(255,255,255,.96);
  border-color:rgba(255,255,255,.7);
  box-shadow:0 16px 36px -18px rgba(8,12,18,.6);
}
/* The reading-progress bar is anchored flush to a full-width navbar's bottom
   edge. Inside a floating pill it renders as a stray underline under the logo,
   so the pill presets drop it — it is a decorative indicator, not content. */
[data-design-preset="expedition"] .ak-navbar__progress,
[data-design-preset="warm-local"] .ak-navbar__progress{display:none;}
[data-design-preset="expedition"] .ak-navbar__brand{color:var(--site-primary-strong);letter-spacing:-.02em;font-size:1.12rem;}
[data-design-preset="expedition"] .ak-navbar__brand img{height:clamp(30px,3.2vw,40px);}
[data-design-preset="expedition"] .ak-navbar__links a{
  color:var(--site-fg);font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
}
[data-design-preset="expedition"] .ak-navbar__links a:hover,
[data-design-preset="expedition"] .ak-navbar__links a[aria-current="true"]{color:var(--site-accent);}
[data-design-preset="expedition"] .ak-navbar__links a::after{background:var(--site-accent);}
[data-design-preset="expedition"] .ak-navbar__cta{
  background:var(--site-accent);color:var(--site-accent-contrast);border-color:transparent;
  font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:.75rem 1.2rem;
}
[data-design-preset="expedition"] .ak-navbar__toggle{color:var(--site-fg);border-color:rgba(9,13,18,.16);}

/* -- immersive, centred hero ----------------------------------------------- */
[data-design-preset="expedition"] .ak-hero--overlay{
  min-height:clamp(38rem,88vh,56rem);
  padding:calc(var(--ak-nav-h) + var(--ak-nav-gap) + clamp(2.5rem,7vw,5rem))
          clamp(1.25rem,6vw,4rem)
          clamp(5rem,8vw,6.5rem);
  text-align:center;
}
/* An even, top-to-bottom wash instead of the side gradient: the subject stays
   centred and readable, and the photo keeps its contrast. */
[data-design-preset="expedition"] .ak-hero--overlay::before{
  background:
    radial-gradient(115% 85% at 50% 44%,rgba(8,12,16,.46) 0%,rgba(8,12,16,.2) 58%,rgba(8,12,16,0) 100%),
    linear-gradient(180deg,rgba(8,12,16,.5) 0%,rgba(8,12,16,.24) 32%,rgba(8,12,16,.36) 68%,rgba(8,12,16,.66) 100%);
}
/* Scroll cue (decorative, aria-hidden by being a pseudo-element). */
[data-design-preset="expedition"] .ak-hero--overlay::after{
  content:"";position:absolute;left:50%;bottom:clamp(1.5rem,3vw,2.4rem);z-index:2;
  width:13px;height:13px;margin-left:-7px;
  border-right:2px solid rgba(255,255,255,.85);border-bottom:2px solid rgba(255,255,255,.85);
  transform:rotate(45deg);pointer-events:none;
  animation:ak-exp-scrollcue 2.4s ease-in-out infinite;
}
@keyframes ak-exp-scrollcue{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5;}
  50%{transform:rotate(45deg) translate(4px,4px);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  [data-design-preset="expedition"] .ak-hero--overlay::after{animation:none;opacity:.7;}
}
[data-design-preset="expedition"] .ak-hero--overlay .ak-hero__content{max-width:920px;margin-inline:auto;}
[data-design-preset="expedition"] .ak-hero--overlay .ak-eyebrow{
  background:var(--site-accent);color:var(--site-accent-contrast);
  border-radius:var(--site-radius-full);padding:.5rem 1.05rem;
  font-size:.7rem;font-weight:800;letter-spacing:.18em;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
[data-design-preset="expedition"] .ak-hero--overlay .ak-h1{
  margin-inline:auto;max-width:16ch;
  font-size:clamp(2.9rem,8.4vw,6.6rem);line-height:.9;letter-spacing:-.035em;font-weight:900;
  text-transform:uppercase;text-shadow:0 6px 34px rgba(0,0,0,.45);
}
[data-design-preset="expedition"] .ak-hero--overlay .ak-lead{
  margin-inline:auto;max-width:46ch;font-size:clamp(1.02rem,1.6vw,1.22rem);
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
[data-design-preset="expedition"] .ak-hero--overlay .ak-hero__actions{
  justify-content:center;gap:clamp(.7rem,1.6vw,1rem);margin-top:clamp(1.3rem,3vw,2rem);
}
[data-design-preset="expedition"] .ak-hero--overlay .ak-btn{
  font-weight:800;font-size:.86rem;letter-spacing:.07em;text-transform:uppercase;padding:1.1rem 1.85rem;
}
[data-design-preset="expedition"] .ak-hero--overlay .ak-btn--ghost{
  background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
[data-design-preset="expedition"] .ak-hero--overlay .ak-btn--ghost:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.6);}
[data-design-preset="expedition"] .ak-product-grid__grid{gap:clamp(1rem,2.3vw,1.7rem);}
[data-design-preset="expedition"] .ak-card{
  background:var(--site-surface-dark);border-color:transparent;border-radius:var(--site-radius-lg);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.62);
}
[data-design-preset="expedition"] .ak-card:hover{border-color:var(--site-primary-light);box-shadow:0 24px 42px -22px rgba(0,0,0,.75);}
[data-design-preset="expedition"] .ak-card__media img{aspect-ratio:16/10;}
[data-design-preset="expedition"] :is(.ak-card__title,.ak-card__price){color:#fff;}
[data-design-preset="expedition"] :is(.ak-card__desc,.ak-card__metarow,.ak-card__meta,.ak-card__price small){color:rgba(255,255,255,.7);}
[data-design-preset="expedition"] .ak-card__badge{background:var(--site-accent);color:var(--site-accent-contrast);}
[data-design-preset="expedition"] .ak-card .ak-btn--primary{background:var(--site-accent);color:var(--site-accent-contrast);}
[data-design-preset="expedition"] [data-ak-section-type="About"]{background:var(--site-surface-dark);}
[data-design-preset="expedition"] [data-ak-section-type="About"] .ak-section{background:transparent;}
[data-design-preset="expedition"] [data-ak-section-type="About"] :is(.ak-heading,.ak-lead){color:var(--site-on-dark);}
[data-design-preset="expedition"] [data-ak-section-type="About"] .ak-about__stat{background:rgba(255,255,255,.1);}
[data-design-preset="expedition"] [data-ak-section-type="About"] .ak-about__stat b{color:var(--site-accent);}
[data-design-preset="expedition"] [data-ak-section-type="About"] .ak-about__stat span{color:rgba(255,255,255,.78);}
[data-design-preset="expedition"] .ak-cta{
  background:var(--site-surface-dark);
  background:linear-gradient(120deg,var(--site-surface-dark),color-mix(in srgb,var(--site-primary-strong) 72%,#090d12));
  border-radius:var(--site-radius-xl);
}
/* Same reason as Editorial's band: this gradient is mixed toward near-black, not
   toward the brand, so the text must be explicitly light. Left on
   the --site-primary-contrast token it goes near-black for any light brand. */
[data-design-preset="expedition"] .ak-cta,
[data-design-preset="expedition"] .ak-cta :is(.ak-heading,h1,h2,h3){color:#fff;}
[data-design-preset="expedition"] .ak-cta .ak-lead{color:rgba(255,255,255,.84);}
[data-design-preset="expedition"] .ak-gallery__item{border-radius:var(--site-radius-lg);}
@media (min-width:1024px){
  /* Featured-first row: the newest experience becomes a full-width horizontal
     card, the rest stay on the normal 3-up grid. Unlike a column-span featured
     tile this stays balanced for ANY number of products — no half-empty row. */
  [data-design-preset="expedition"] .ak-product-grid__grid{align-items:start;}
  [data-design-preset="expedition"] .ak-product-grid__grid>.ak-card:first-child:not(:only-child){
    grid-column:1 / -1;flex-direction:row;align-items:stretch;
  }
  [data-design-preset="expedition"] .ak-product-grid__grid>.ak-card:first-child:not(:only-child) .ak-card__media{
    flex:1 1 56%;min-height:22rem;
  }
  [data-design-preset="expedition"] .ak-product-grid__grid>.ak-card:first-child:not(:only-child) .ak-card__media img{
    height:100%;aspect-ratio:auto;
  }
  [data-design-preset="expedition"] .ak-product-grid__grid>.ak-card:first-child:not(:only-child) .ak-card__body{
    flex:1 1 44%;justify-content:center;padding:clamp(1.75rem,3vw,2.75rem);
  }
  /* An auto top margin on the footer is what bottom-pins price+CTA in a normal
     vertical card; in the horizontal featured card it would strand them at the
     bottom of a tall column, so the whole body centres as one group instead. */
  [data-design-preset="expedition"] .ak-product-grid__grid>.ak-card:first-child:not(:only-child) .ak-card__footer{margin-top:.4rem;}
  [data-design-preset="expedition"] .ak-product-grid__grid>.ak-card:first-child:not(:only-child) .ak-card__title{font-size:1.85rem;}
  [data-design-preset="expedition"] .ak-product-grid__grid>.ak-card:first-child:not(:only-child) .ak-btn{width:auto;align-self:flex-start;padding-inline:2rem;}
  [data-design-preset="expedition"] .ak-gallery__item:only-child{grid-column:1 / -1;}
}
@media (max-width:767.98px){
  [data-design-preset="expedition"]{--ak-nav-h:60px;--ak-nav-gap:12px;}
  /* The drawer hangs off a rounded, inset pill now — so it becomes a floating
     card under it rather than a full-bleed band glued to a square navbar. */
  [data-design-preset="expedition"] .ak-navbar__nav{
    top:calc(100% + .5rem);border-radius:var(--site-radius-lg);
    border:1px solid rgba(9,13,18,.1);background:rgba(255,255,255,.98);
    padding:.6rem 1rem 1rem;
  }
  [data-design-preset="expedition"] .ak-navbar__links a{font-size:.92rem;}
  [data-design-preset="expedition"] .ak-hero--overlay{
    min-height:min(42rem,92vh);
    padding-bottom:clamp(4rem,14vw,5.5rem);
  }
  [data-design-preset="expedition"] .ak-hero--overlay .ak-h1{font-size:clamp(2.6rem,12.5vw,4.2rem);max-width:14ch;}
  [data-design-preset="expedition"] .ak-hero--overlay .ak-hero__actions .ak-btn{flex:1 1 auto;}
}

/* ---- Clean Conversion visual preset ------------------------------------ */
/* The universal default: bright, calm, decision-first. Nothing here darkens the
   page or shrinks the reading size — the goal is "compare and book quickly". */
[data-design-preset="clean-conversion"]{
  --site-maxw:1180px;
  --site-radius-md:10px;
  --site-radius-lg:14px;
  --site-radius-xl:18px;
  --site-page-bg:#fbfbfc;
  --site-section-tint:#f3f5f8;
}
[data-design-preset="clean-conversion"] .ak-btn{border-radius:10px;font-weight:700;}
[data-design-preset="clean-conversion"] .ak-navbar{
  background:#fff;border-bottom:1px solid var(--site-border);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
[data-design-preset="clean-conversion"] .ak-navbar.is-scrolled{background:#fff;box-shadow:0 6px 18px -14px rgba(16,24,40,.5);}
[data-design-preset="clean-conversion"] .ak-navbar__cta{background:var(--site-primary);color:var(--site-primary-contrast);border-color:transparent;}
/* The scrim clears the RIGHT of the photo and turns the left into a readable
   light panel — dark text on the photo, no separate card element needed. */
[data-design-preset="clean-conversion"] .ak-hero--overlay{
  min-height:clamp(29rem,64vh,42rem);
  padding:clamp(3rem,6vw,5rem) clamp(1.25rem,5vw,3.5rem);
  color:var(--site-fg);
}
[data-design-preset="clean-conversion"] .ak-hero--overlay::before{
  background:linear-gradient(96deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 36%,rgba(255,255,255,.28) 64%,rgba(255,255,255,0) 88%);
}
[data-design-preset="clean-conversion"] .ak-hero--overlay .ak-hero__content{max-width:560px;}
[data-design-preset="clean-conversion"] .ak-hero--overlay :is(.ak-heading,.ak-h1){color:var(--site-heading);text-shadow:none;}
[data-design-preset="clean-conversion"] .ak-hero--overlay .ak-h1{font-size:clamp(2.15rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-.025em;}
[data-design-preset="clean-conversion"] .ak-hero--overlay .ak-h1__accent{color:var(--site-primary);}
[data-design-preset="clean-conversion"] .ak-hero--overlay .ak-lead{color:var(--site-fg-soft);text-shadow:none;}
[data-design-preset="clean-conversion"] .ak-hero--overlay .ak-eyebrow{
  background:var(--site-primary-soft);color:var(--site-primary);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
[data-design-preset="clean-conversion"] .ak-hero--overlay .ak-btn--ghost{background:#fff;color:var(--site-primary);border-color:var(--site-border);}
[data-design-preset="clean-conversion"] .ak-hero--overlay .ak-btn--ghost:hover{background:var(--site-primary-soft);border-color:var(--site-primary-light);}
[data-design-preset="clean-conversion"] .ak-card{
  background:#fff;border-color:var(--site-border);box-shadow:0 1px 2px rgba(16,24,40,.06);
}
[data-design-preset="clean-conversion"] .ak-card:hover{box-shadow:0 14px 28px -18px rgba(16,24,40,.45);}
[data-design-preset="clean-conversion"] .ak-card__media img{aspect-ratio:3/2;}
[data-design-preset="clean-conversion"] .ak-card__price{font-weight:800;}

/* ---- Editorial Premium visual preset ----------------------------------- */
/* Restrained, magazine-like: serif display type, hairline chrome, big quiet
   images. Uses the system serif stack — no webfont is fetched. */
[data-design-preset="editorial-premium"]{
  --site-maxw:1240px;
  --site-radius-sm:2px;
  --site-radius-md:2px;
  --site-radius-lg:3px;
  --site-radius-xl:4px;
  --site-radius-full:3px;
  --site-page-bg:#faf9f7;
  --site-section-tint:#f1eee9;
  --site-font-heading:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --ak-nav-h:78px;
}
[data-design-preset="editorial-premium"] .ak-section{padding-block:clamp(4.5rem,9vw,8rem);}
[data-design-preset="editorial-premium"] .ak-heading{font-weight:500;letter-spacing:-.015em;}
[data-design-preset="editorial-premium"] .ak-section-wrap.ak-wrap--sticky{background:transparent;}
/* Same :has() gate as Expedition: the nav only lifts over a full-bleed hero, so
   a page that starts with an ordinary section is never overlapped. */
@supports selector(:has(*)){
  [data-design-preset="editorial-premium"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay){
    margin-bottom:calc(-1 * var(--ak-nav-h));
    /* Dark enough at the top that the white nav text keeps contrast even before
       the JS is-scrolled state lands (or if scripts never run at all). */
    background:linear-gradient(180deg,rgba(10,9,8,.62) 0%,rgba(10,9,8,.2) 68%,rgba(10,9,8,0) 100%);
  }
}
/* The bar is FULL-BLEED and its CONTENT is what gets centred, via a padding that
   grows with the viewport. It used to be the other way round — a max-width on the
   navbar itself — and the scrolled background then painted only that centred box,
   leaving a dark slab floating mid-page on any viewport wider than the cap. It
   looked right in the editor purely because that preview pane is narrower than
   the cap, so the editor and the published site never matched. */
[data-design-preset="editorial-premium"] .ak-navbar{
  height:var(--ak-nav-h);
  padding-inline:max(clamp(1rem,4vw,2rem),calc((100% - 1240px) / 2));
  background:transparent;border-bottom:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
[data-design-preset="editorial-premium"] .ak-navbar.is-scrolled{
  background:rgba(16,15,13,.94);border-bottom:0;box-shadow:none;
  -webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);
}
/* Flush with the bar's edge instead of the base -1px, which read as a stray line
   hanging under a solid bar. */
[data-design-preset="editorial-premium"] .ak-navbar__progress{bottom:0;background:var(--site-accent);}
[data-design-preset="editorial-premium"] :is(.ak-navbar__brand,.ak-navbar__links a,.ak-navbar__toggle){color:#fff;}
[data-design-preset="editorial-premium"] .ak-navbar__toggle{border-color:rgba(255,255,255,.4);}
[data-design-preset="editorial-premium"] .ak-navbar__links a{
  font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;font-weight:600;
}
[data-design-preset="editorial-premium"] .ak-navbar__links a:hover,
[data-design-preset="editorial-premium"] .ak-navbar__links a[aria-current="true"]{color:var(--site-accent);}
[data-design-preset="editorial-premium"] .ak-navbar__cta{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
[data-design-preset="editorial-premium"] .ak-hero--overlay{
  min-height:clamp(40rem,92vh,58rem);align-items:end;
  padding:calc(var(--ak-nav-h) + 4rem) clamp(1.5rem,6vw,4.5rem) clamp(4rem,8vw,6rem);
}
[data-design-preset="editorial-premium"] .ak-hero--overlay::before{
  background:linear-gradient(180deg,rgba(12,11,9,.4) 0%,rgba(12,11,9,.08) 30%,rgba(12,11,9,.58) 100%);
}
[data-design-preset="editorial-premium"] .ak-hero--overlay .ak-hero__content{max-width:840px;}
[data-design-preset="editorial-premium"] .ak-hero--overlay .ak-h1{
  font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.02;letter-spacing:-.015em;font-weight:500;
  text-shadow:0 4px 30px rgba(0,0,0,.35);
}
[data-design-preset="editorial-premium"] .ak-hero--overlay .ak-h1__accent{font-style:italic;}
[data-design-preset="editorial-premium"] .ak-hero--overlay .ak-eyebrow{
  background:transparent;padding:0;border-radius:0;
  font-size:.7rem;letter-spacing:.28em;font-weight:600;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
[data-design-preset="editorial-premium"] .ak-hero--overlay .ak-eyebrow::before{display:inline-block;background:rgba(255,255,255,.75);}
[data-design-preset="editorial-premium"] .ak-hero--overlay .ak-btn{
  border-radius:2px;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:1.05rem 1.9rem;
}
[data-design-preset="editorial-premium"] .ak-hero--overlay .ak-btn--ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
[data-design-preset="editorial-premium"] .ak-card{background:transparent;border:0;border-radius:0;box-shadow:none;}
[data-design-preset="editorial-premium"] .ak-card:hover{box-shadow:none;transform:none;}
[data-design-preset="editorial-premium"] .ak-card__media img{aspect-ratio:4/5;border-radius:0;}
[data-design-preset="editorial-premium"] .ak-card__title{font-weight:500;letter-spacing:-.01em;}
[data-design-preset="editorial-premium"] .ak-gallery__item{border-radius:0;}

/* ---- Warm Local visual preset ------------------------------------------ */
/* Approachable and human: cream page, generous rounding, soft shadows. Reads as
   a neighbourhood business rather than a corporate booking funnel. */
[data-design-preset="warm-local"]{
  --site-maxw:1140px;
  --site-radius-md:16px;
  --site-radius-lg:24px;
  --site-radius-xl:32px;
  --site-page-bg:#fdf8f1;
  --site-section-tint:#f7ece0;
  --ak-nav-h:66px;
  --ak-nav-gap:14px;
}
[data-design-preset="warm-local"] .ak-btn{font-weight:700;}
/* Surface bands cover most of the page, so a pure-white band would cancel the
   cream base out entirely — warm the band itself instead. */
[data-design-preset="warm-local"] .ak-band--surface{background:#fffdf9;}
[data-design-preset="warm-local"] .ak-section-wrap.ak-wrap--sticky{
  background:transparent;padding:var(--ak-nav-gap) clamp(.75rem,3vw,1.5rem) 0;
}
@supports selector(:has(*)){
  [data-design-preset="warm-local"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay){
    margin-bottom:calc(-1 * (var(--ak-nav-h) + var(--ak-nav-gap)));
  }
}
[data-design-preset="warm-local"] .ak-navbar{
  height:var(--ak-nav-h);max-width:min(1140px,100%);margin-inline:auto;
  padding:0 .75rem 0 1.1rem;border-radius:var(--site-radius-lg);
  background:rgba(253,248,241,.95);border:1px solid rgba(120,80,40,.16);
  box-shadow:0 10px 26px -18px rgba(90,60,30,.55);
}
[data-design-preset="warm-local"] .ak-navbar.is-scrolled{background:#fdf8f1;box-shadow:0 14px 30px -20px rgba(90,60,30,.6);}
[data-design-preset="warm-local"] .ak-navbar__cta{background:var(--site-primary);color:var(--site-primary-contrast);border-color:transparent;}
/* The hero is an inset, rounded photo card tucked under the floating nav. */
[data-design-preset="warm-local"] .ak-hero--overlay{
  min-height:clamp(31rem,72vh,44rem);
  margin-inline:clamp(.75rem,3vw,1.5rem);
  border-radius:var(--site-radius-xl);
  padding:calc(var(--ak-nav-h) + var(--ak-nav-gap) + clamp(2rem,5vw,3.5rem)) clamp(1.5rem,5vw,3.5rem) clamp(3rem,6vw,4.5rem);
}
[data-design-preset="warm-local"] .ak-hero--overlay::before{
  background:linear-gradient(100deg,rgba(58,34,14,.76) 0%,rgba(58,34,14,.46) 46%,rgba(58,34,14,.08) 82%);
}
[data-design-preset="warm-local"] .ak-hero--overlay .ak-hero__content{max-width:620px;}
[data-design-preset="warm-local"] .ak-hero--overlay .ak-h1{font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.06;letter-spacing:-.02em;}
[data-design-preset="warm-local"] .ak-hero--overlay .ak-eyebrow{background:rgba(255,255,255,.94);color:var(--site-primary-strong);}
[data-design-preset="warm-local"] .ak-card{
  background:#fff;border-color:rgba(120,80,40,.16);border-radius:var(--site-radius-lg);
  box-shadow:0 14px 30px -22px rgba(90,60,30,.6);
}
[data-design-preset="warm-local"] .ak-card__media img{aspect-ratio:4/3;}
[data-design-preset="warm-local"] .ak-card__badge{background:var(--site-accent);color:var(--site-accent-contrast);}
@media (max-width:767.98px){
  [data-design-preset="warm-local"]{--ak-nav-h:58px;--ak-nav-gap:10px;}
  [data-design-preset="warm-local"] .ak-navbar__nav{
    top:calc(100% + .5rem);border-radius:var(--site-radius-md);
    border:1px solid rgba(120,80,40,.16);background:#fdf8f1;
  }
  [data-design-preset="warm-local"] .ak-hero--overlay{min-height:min(38rem,88vh);}
}

/* ======================================================================== */
/* Preset section styling — every remaining section, per preset             */
/* ======================================================================== */
/* Everything below is presentation only. No selector here changes what data a
   section shows: prices, availability, product copy and booking targets all
   still come from the tenant-scoped render pipeline. */

/* ---- Expedition: sections ---------------------------------------------- */
[data-design-preset="expedition"] .ak-heading{letter-spacing:-.03em;font-weight:850;}
[data-design-preset="expedition"] .ak-eyebrow{letter-spacing:.16em;font-weight:800;}
[data-design-preset="expedition"] .ak-product-grid__viewall{
  border-color:var(--site-accent);color:var(--site-accent);background:transparent;
  text-transform:uppercase;letter-spacing:.07em;font-size:.8rem;font-weight:800;
}
[data-design-preset="expedition"] .ak-product-grid__viewall:hover{background:var(--site-accent);color:var(--site-accent-contrast);}
[data-design-preset="expedition"] .ak-product-grid__count{background:var(--site-accent);color:var(--site-accent-contrast);}
[data-design-preset="expedition"] .ak-card__avail{background:rgba(52,199,120,.16);color:#5ee89b;}
[data-design-preset="expedition"] .ak-card__avail--out{background:rgba(255,90,54,.18);color:#ff9a80;}
/* Booking: a dark control panel so the money moment matches the cards. */
[data-design-preset="expedition"] :is(.ak-booking,.ak-book__dialog,.ak-contact form){
  background:var(--site-surface-dark);border-color:rgba(255,255,255,.12);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.7);
}
[data-design-preset="expedition"] :is(.ak-booking,.ak-book__dialog,.ak-contact form) :is(label,.ak-booking__options label,legend){color:rgba(255,255,255,.78);}
/* The brand-coloured eyebrow is unreadable on a dark panel — lift it to accent. */
[data-design-preset="expedition"] :is(.ak-booking,.ak-book__dialog,.ak-contact form,[data-ak-section-type="About"]) .ak-eyebrow{color:var(--site-accent);}
[data-design-preset="expedition"] .ak-booking__price{color:#fff;}
[data-design-preset="expedition"] .ak-booking__price small{color:rgba(255,255,255,.6);}
[data-design-preset="expedition"] .ak-book__head{border-bottom-color:rgba(255,255,255,.12);}
[data-design-preset="expedition"] .ak-book__head .ak-h2{color:#fff;}
[data-design-preset="expedition"] :is(.ak-field select,.ak-field input,.ak-contact textarea){
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;
}
[data-design-preset="expedition"] :is(.ak-pill,.ak-num,.ak-book__close){
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff;
}
[data-design-preset="expedition"] :is(.ak-pill,.ak-num)[aria-pressed="true"]{
  background:var(--site-accent);border-color:var(--site-accent);color:var(--site-accent-contrast);
}
[data-design-preset="expedition"] .ak-booking__hint{color:var(--site-accent);}
[data-design-preset="expedition"] .ak-product-detail__price{color:var(--site-accent);font-size:1.75rem;}
[data-design-preset="expedition"] .ak-product-detail__features li::before{background:rgba(255,90,54,.16);}
[data-design-preset="expedition"] .ak-product-detail__features li::after{color:var(--site-accent);}
[data-design-preset="expedition"] .ak-quote{
  background:var(--site-surface-dark);border-color:transparent;border-radius:var(--site-radius-lg);
  box-shadow:0 16px 34px -22px rgba(0,0,0,.6);
}
[data-design-preset="expedition"] :is(.ak-quote__name,.ak-quote__source){color:#fff;}
[data-design-preset="expedition"] .ak-quote__text{color:rgba(255,255,255,.82);}
[data-design-preset="expedition"] :is(.ak-quote__date,.ak-quote__posted){color:rgba(255,255,255,.55);}
[data-design-preset="expedition"] .ak-testimonials__summary{color:var(--site-fg);font-weight:800;}
/* FAQ stays light so the page still breathes; the open row gets an accent spine. */
[data-design-preset="expedition"] .ak-faq details{border-left:3px solid transparent;}
[data-design-preset="expedition"] .ak-faq details[open]{border-left-color:var(--site-accent);border-color:var(--site-border);border-left-color:var(--site-accent);}
[data-design-preset="expedition"] .ak-faq summary::after{color:var(--site-accent);}
[data-design-preset="expedition"] .ak-cta .ak-btn--accent{background:var(--site-accent);color:var(--site-accent-contrast);}
[data-design-preset="expedition"] .ak-flex__card{
  background:var(--site-surface-dark);border-color:transparent;border-radius:var(--site-radius-lg);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.62);
}
[data-design-preset="expedition"] .ak-flex__card-body h4{color:#fff;}
[data-design-preset="expedition"] .ak-flex__card-body p{color:rgba(255,255,255,.7);}
[data-design-preset="expedition"] .ak-flex__card-sub{color:var(--site-accent)!important;}
[data-design-preset="expedition"] .ak-flex__badge{background:var(--site-accent);color:var(--site-accent-contrast);}
[data-design-preset="expedition"] .ak-flex__cards[data-variant="steps"] .ak-flex__card::before{background:var(--site-accent);color:var(--site-accent-contrast);}
[data-design-preset="expedition"] :is(.ak-flex__stat,.ak-about__stat){background:rgba(9,13,18,.06);}
[data-design-preset="expedition"] :is(.ak-flex__stat b,.ak-about__stat b){color:var(--site-accent);}
/* Long-form reading: a stronger opening paragraph and accent-marked lists give
   the copy the same energy as the rest of the preset. */
[data-design-preset="expedition"] .ak-richtext{max-width:68ch;}
[data-design-preset="expedition"] .ak-richtext h2{font-weight:850;letter-spacing:-.025em;}
[data-design-preset="expedition"] .ak-richtext>p:first-of-type{font-size:1.14rem;line-height:1.72;color:var(--site-fg);}
[data-design-preset="expedition"] .ak-richtext a{color:var(--site-accent);text-underline-offset:3px;}
[data-design-preset="expedition"] .ak-richtext :is(ul,ol) li::marker{color:var(--site-accent);font-weight:800;}
[data-design-preset="expedition"] .ak-testimonials__summary{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--site-surface-dark);color:#fff;font-weight:800;
  padding:.5rem .95rem;border-radius:var(--site-radius-full);
}
[data-design-preset="expedition"] .ak-footer{background:#0a0d12;}
[data-design-preset="expedition"] .ak-footer__column-title{letter-spacing:.16em;}

/* ---- Clean Conversion: sections ---------------------------------------- */
[data-design-preset="clean-conversion"] .ak-heading{letter-spacing:-.02em;}
[data-design-preset="clean-conversion"] .ak-product-grid__viewall{border-color:var(--site-border);color:var(--site-primary);background:#fff;}
[data-design-preset="clean-conversion"] .ak-card__badge{background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.12);}
[data-design-preset="clean-conversion"] .ak-card__footer{border-top:1px solid var(--site-border);margin-top:auto;padding-top:.85rem;}
/* The booking panel is the loudest object on the page for this preset. */
[data-design-preset="clean-conversion"] .ak-booking{
  background:#fff;border:1px solid var(--site-border);border-top:3px solid var(--site-primary);
  border-radius:12px;box-shadow:0 18px 40px -24px rgba(16,24,40,.45);
}
[data-design-preset="clean-conversion"] :is(.ak-field select,.ak-field input,.ak-contact textarea){border-radius:8px;background:#fff;}
[data-design-preset="clean-conversion"] :is(.ak-pill,.ak-num){border-radius:8px;background:#fff;}
[data-design-preset="clean-conversion"] :is(.ak-pill,.ak-num)[aria-pressed="true"]{background:var(--site-primary);border-color:var(--site-primary);color:var(--site-primary-contrast);}
[data-design-preset="clean-conversion"] .ak-book__dialog{border-radius:14px;}
[data-design-preset="clean-conversion"] .ak-product-detail__media img{border-radius:14px;box-shadow:0 18px 40px -26px rgba(16,24,40,.45);}
[data-design-preset="clean-conversion"] .ak-quote{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.06);}
[data-design-preset="clean-conversion"] .ak-gallery__item{border-radius:12px;}
[data-design-preset="clean-conversion"] .ak-faq details{border-radius:10px;background:#fff;}
[data-design-preset="clean-conversion"] .ak-faq details[open]{border-color:var(--site-primary);box-shadow:0 1px 2px rgba(16,24,40,.06);}
[data-design-preset="clean-conversion"] .ak-about__media img{border-radius:14px;}
[data-design-preset="clean-conversion"] .ak-about__stat{border-radius:10px;}
/* Flat brand band rather than a gradient — quieter, and the button reads first. */
[data-design-preset="clean-conversion"] .ak-cta{
  background:var(--site-primary);border-radius:16px;box-shadow:none;
}
[data-design-preset="clean-conversion"] .ak-cta .ak-btn--accent{background:#fff;color:var(--site-primary);}
[data-design-preset="clean-conversion"] .ak-contact form{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.06);}
[data-design-preset="clean-conversion"] .ak-flex__card{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.06);}
[data-design-preset="clean-conversion"] :is(.ak-flex__stat,.ak-about__stat){background:#eef2f7;}
/* Long-form reading: comfortable measure and clear hierarchy, nothing decorative
   — this preset optimises for scanning and deciding. */
[data-design-preset="clean-conversion"] .ak-richtext{max-width:70ch;}
[data-design-preset="clean-conversion"] .ak-richtext h2{font-size:1.5rem;letter-spacing:-.02em;}
[data-design-preset="clean-conversion"] .ak-richtext p{font-size:1.02rem;line-height:1.78;}
[data-design-preset="clean-conversion"] .ak-richtext a{color:var(--site-primary);text-underline-offset:3px;}
[data-design-preset="clean-conversion"] .ak-richtext :is(ul,ol) li{margin-bottom:.55rem;}
/* A trust chip: the rating is a real CRM value, so it is given a container the
   eye lands on rather than being lost as plain text. */
[data-design-preset="clean-conversion"] .ak-testimonials__summary{
  display:inline-flex;align-items:center;gap:.55rem;
  background:#fff;border:1px solid var(--site-border);border-radius:10px;
  padding:.5rem .85rem;color:var(--site-fg);font-weight:700;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
[data-design-preset="clean-conversion"] .ak-footer{background:#111827;}

/* ---- Editorial Premium: sections --------------------------------------- */
/* Chrome is removed rather than restyled: hairlines instead of borders, no
   shadows, portrait crops, and type doing the structural work. */
[data-design-preset="editorial-premium"] .ak-section__head{max-width:52ch;}
[data-design-preset="editorial-premium"] .ak-eyebrow{letter-spacing:.26em;font-size:.68rem;font-weight:600;}
[data-design-preset="editorial-premium"] .ak-h2{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:500;}
[data-design-preset="editorial-premium"] .ak-product-grid__head{border-bottom:1px solid var(--site-border);padding-bottom:1.25rem;}
[data-design-preset="editorial-premium"] .ak-product-grid__viewall{
  background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:.2rem 0;
  color:var(--site-fg);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:600;
}
[data-design-preset="editorial-premium"] .ak-product-grid__viewall:hover{background:transparent;color:var(--site-accent);}
[data-design-preset="editorial-premium"] .ak-product-grid__count{background:transparent;color:var(--site-muted);}
[data-design-preset="editorial-premium"] .ak-card__body{padding:1.1rem 0 0;}
[data-design-preset="editorial-premium"] .ak-card__badge{
  background:rgba(250,249,247,.92);color:var(--site-fg);box-shadow:none;border-radius:0;
  letter-spacing:.16em;font-weight:600;
}
[data-design-preset="editorial-premium"] .ak-card__footer{border-top:1px solid var(--site-border);padding-top:.9rem;}
[data-design-preset="editorial-premium"] .ak-card__price{font-weight:500;}
[data-design-preset="editorial-premium"] .ak-card .ak-btn{
  background:transparent;color:var(--site-fg);border:1px solid var(--site-fg);
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:600;
}
[data-design-preset="editorial-premium"] .ak-card .ak-btn:hover{background:var(--site-fg);color:var(--site-page-bg);}
[data-design-preset="editorial-premium"] :is(.ak-booking,.ak-contact form,.ak-quote,.ak-faq details){
  border-radius:0;box-shadow:none;background:transparent;border-color:var(--site-border);
}
/* The booking dialog must stay OPAQUE — in modal mode it floats over the page,
   so a transparent panel would let the page bleed through the form. */
[data-design-preset="editorial-premium"] .ak-book__dialog{
  border-radius:0;box-shadow:none;background:var(--site-page-bg);border-color:var(--site-border);
}
[data-design-preset="editorial-premium"] :is(.ak-field select,.ak-field input,.ak-contact textarea){
  border-radius:0;background:transparent;border-width:0 0 1px;padding-inline:0;
}
[data-design-preset="editorial-premium"] :is(.ak-pill,.ak-num){border-radius:0;background:transparent;border-width:1px;}
[data-design-preset="editorial-premium"] :is(.ak-pill,.ak-num)[aria-pressed="true"]{background:var(--site-fg);border-color:var(--site-fg);color:var(--site-page-bg);}
[data-design-preset="editorial-premium"] .ak-booking__price{font-weight:500;}
[data-design-preset="editorial-premium"] .ak-product-detail__media img{border-radius:0;box-shadow:none;aspect-ratio:4/5;}
[data-design-preset="editorial-premium"] .ak-product-detail__price{font-weight:500;color:var(--site-fg);}
/* A quote is a pull-quote here: serif, italic, and hung off a hairline. */
[data-design-preset="editorial-premium"] .ak-quote{border-width:0 0 0 1px;padding:.2rem 0 .2rem 1.6rem;}
[data-design-preset="editorial-premium"] .ak-quote__text{font-family:var(--site-font-heading);font-style:italic;font-size:1.18rem;line-height:1.55;color:var(--site-fg);}
[data-design-preset="editorial-premium"] .ak-quote__avatar{border-radius:0;}
[data-design-preset="editorial-premium"] .ak-faq details{border-width:0 0 1px;border-radius:0;padding:1.2rem 0;}
[data-design-preset="editorial-premium"] .ak-faq details[open]{box-shadow:none;border-color:var(--site-border);}
[data-design-preset="editorial-premium"] .ak-faq summary{font-family:var(--site-font-heading);font-weight:500;font-size:1.08rem;}
[data-design-preset="editorial-premium"] .ak-faq summary::after{color:var(--site-fg);font-weight:400;}
[data-design-preset="editorial-premium"] .ak-about__media img{border-radius:0;aspect-ratio:4/5;}
[data-design-preset="editorial-premium"] .ak-about__media{border-radius:0;box-shadow:none;}
[data-design-preset="editorial-premium"] .ak-about__stat{background:transparent;border-top:1px solid var(--site-border);border-radius:0;padding:1rem 0 0;}
[data-design-preset="editorial-premium"] .ak-about__stat b{font-weight:500;color:var(--site-fg);}
[data-design-preset="editorial-premium"] .ak-cta{
  background:#16150f;border-radius:0;box-shadow:none;padding-block:clamp(3.5rem,8vw,6rem);
}
[data-design-preset="editorial-premium"] .ak-cta .ak-btn--accent{background:#fff;color:#16150f;border-radius:2px;}
/* This CTA paints a FIXED near-black band, so its text cannot come from
   the --site-primary-contrast token: that is the readable colour for a swatch of
   the BRAND, and for a light brand (orange, yellow, mint) it resolves to near
   black — black type on a black band. The band is not brand-coloured, so the
   text colour must not be brand-derived either. */
[data-design-preset="editorial-premium"] .ak-cta,
[data-design-preset="editorial-premium"] .ak-cta :is(.ak-heading,h1,h2,h3){color:#f6f4ef;}
[data-design-preset="editorial-premium"] .ak-cta .ak-lead{color:rgba(246,244,239,.82);}
[data-design-preset="editorial-premium"] .ak-flex__card{background:transparent;border:0;border-radius:0;box-shadow:none;}
[data-design-preset="editorial-premium"] .ak-flex__card:hover{transform:none;box-shadow:none;}
[data-design-preset="editorial-premium"] .ak-flex__card-media img{aspect-ratio:4/5;}
[data-design-preset="editorial-premium"] .ak-flex__card-body{padding:1rem 0 0;}
[data-design-preset="editorial-premium"] :is(.ak-flex__stat,.ak-flex__badge){background:transparent;border-radius:0;}
[data-design-preset="editorial-premium"] .ak-flex__stat{border-top:1px solid var(--site-border);padding:1rem 0 0;text-align:left;}
[data-design-preset="editorial-premium"] .ak-flex__stat b{font-weight:500;color:var(--site-fg);}
[data-design-preset="editorial-premium"] .ak-flex__badge{border:1px solid var(--site-border);color:var(--site-fg);letter-spacing:.16em;font-weight:600;}
[data-design-preset="editorial-premium"] .ak-richtext{max-width:64ch;}
[data-design-preset="editorial-premium"] .ak-richtext p{font-size:1.06rem;line-height:1.8;}
[data-design-preset="editorial-premium"] .ak-richtext h2{font-weight:500;font-size:1.75rem;margin-top:var(--site-space-6);}
/* Magazine opener: the lead paragraph is set larger in the display serif, which
   is the preset's whole idea — type carrying the hierarchy, not boxes. */
[data-design-preset="editorial-premium"] .ak-richtext>p:first-of-type{
  font-family:var(--site-font-heading);font-size:1.32rem;line-height:1.62;color:var(--site-fg);
}
[data-design-preset="editorial-premium"] .ak-richtext a{color:var(--site-fg);text-decoration-thickness:1px;text-underline-offset:4px;}
[data-design-preset="editorial-premium"] .ak-richtext :is(ul,ol) li::marker{color:var(--site-muted);}
[data-design-preset="editorial-premium"] .ak-testimonials__summary{
  border-top:1px solid var(--site-border);padding-top:.9rem;
  font-family:var(--site-font-heading);font-weight:500;font-size:1.05rem;color:var(--site-fg);
}
[data-design-preset="editorial-premium"] .ak-footer{background:#16150f;}
[data-design-preset="editorial-premium"] .ak-footer__brand-name::before{border-radius:0;}
[data-design-preset="editorial-premium"] .ak-footer__column-title{letter-spacing:.2em;}

/* ---- Warm Local: sections ---------------------------------------------- */
[data-design-preset="warm-local"] .ak-product-grid__viewall{background:#fff;border-color:rgba(120,80,40,.2);color:var(--site-primary);}
[data-design-preset="warm-local"] .ak-product-grid__count{background:rgba(120,80,40,.1);color:var(--site-primary-strong);}
[data-design-preset="warm-local"] .ak-card__badge{background:#fff;color:var(--site-primary-strong);box-shadow:0 4px 12px -6px rgba(90,60,30,.5);}
[data-design-preset="warm-local"] :is(.ak-booking,.ak-book__dialog,.ak-contact form,.ak-quote){
  background:#fff;border-color:rgba(120,80,40,.16);border-radius:var(--site-radius-lg);
  box-shadow:0 16px 34px -24px rgba(90,60,30,.55);
}
[data-design-preset="warm-local"] :is(.ak-field select,.ak-field input,.ak-contact textarea){
  background:#fffdfa;border-color:rgba(120,80,40,.2);border-radius:12px;
}
[data-design-preset="warm-local"] :is(.ak-pill,.ak-num){background:#fffdfa;border-color:rgba(120,80,40,.22);}
[data-design-preset="warm-local"] :is(.ak-pill,.ak-num)[aria-pressed="true"]{background:var(--site-primary);border-color:var(--site-primary);color:var(--site-primary-contrast);}
[data-design-preset="warm-local"] .ak-product-detail__media img{border-radius:var(--site-radius-xl);}
[data-design-preset="warm-local"] .ak-gallery__item{border-radius:var(--site-radius-lg);}
[data-design-preset="warm-local"] .ak-faq details{background:#fff;border-color:rgba(120,80,40,.16);border-radius:var(--site-radius-md);}
[data-design-preset="warm-local"] .ak-faq details[open]{border-color:var(--site-primary-light);}
[data-design-preset="warm-local"] .ak-about__media img,[data-design-preset="warm-local"] .ak-about__media{border-radius:var(--site-radius-xl);}
[data-design-preset="warm-local"] :is(.ak-about__stat,.ak-flex__stat){background:#fff;border:1px solid rgba(120,80,40,.14);border-radius:var(--site-radius-md);}
[data-design-preset="warm-local"] .ak-cta{
  border-radius:var(--site-radius-xl);
  background:linear-gradient(122deg,var(--site-primary),color-mix(in srgb,var(--site-primary-strong) 78%,#3a2410));
}
[data-design-preset="warm-local"] .ak-flex__card{background:#fff;border-color:rgba(120,80,40,.16);border-radius:var(--site-radius-lg);box-shadow:0 14px 30px -24px rgba(90,60,30,.55);}
[data-design-preset="warm-local"] .ak-flex__badge{background:rgba(120,80,40,.1);color:var(--site-primary-strong);}
/* Long-form reading: a slightly larger, softer setting — this preset is meant to
   read like a person talking, not a brochure. */
[data-design-preset="warm-local"] .ak-richtext{max-width:66ch;}
[data-design-preset="warm-local"] .ak-richtext h2{letter-spacing:-.015em;}
[data-design-preset="warm-local"] .ak-richtext p{font-size:1.04rem;line-height:1.82;}
[data-design-preset="warm-local"] .ak-richtext>p:first-of-type{color:var(--site-fg);}
[data-design-preset="warm-local"] .ak-richtext a{color:var(--site-primary-strong);text-underline-offset:3px;}
[data-design-preset="warm-local"] .ak-richtext :is(ul,ol) li::marker{color:var(--site-primary);}
[data-design-preset="warm-local"] .ak-testimonials__summary{
  display:inline-flex;align-items:center;gap:.55rem;
  background:#fff;border:1px solid rgba(120,80,40,.16);border-radius:var(--site-radius-md);
  padding:.55rem .95rem;color:var(--site-primary-strong);font-weight:700;
  box-shadow:0 10px 22px -18px rgba(90,60,30,.55);
}
[data-design-preset="warm-local"] .ak-footer{background:#2a1b0f;}

/* ======================================================================== */
/* Gallery layouts — one per preset                                         */
/* ======================================================================== */
/* Four genuinely different arrangements of the SAME markup and the same
   component. Nothing here changes the photos themselves: the brand-tinted
   bottom grade, the placeholder guard and the hover zoom are shared and live
   with the base rules.
   Below 768px every layout collapses to the base single column, so no variant
   can cost a phone layout. Each pattern is built to tile cleanly for ANY number
   of photos — a tenant may upload 1 or 30, and a layout that only looks right
   at multiples of three is a layout that breaks in production. */
@media (min-width:768px){

  /* -- Clean Conversion: UNIFORM GRID ----------------------------------- */
  /* Equal tiles, equal crop. Nothing competes for attention, so the eye can
     sweep the wall and get back to choosing a date.
     auto-fit (not repeat(3,…)) is what makes one photo run full width and two
     split the row instead of stranding a tile beside empty cells. */
  [data-design-preset="clean-conversion"] .ak-gallery__grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
    gap:clamp(1rem,1.8vw,1.5rem);
  }
  [data-design-preset="clean-conversion"] .ak-gallery__item{aspect-ratio:4/3;}

  /* -- Editorial Premium: ASYMMETRIC ------------------------------------ */
  /* A magazine spread: a wide landscape paired with an upright portrait, the
     pairing flipping down the page. Two per row, 7 + 5 of a 12-column grid, so
     EVERY row sums to exactly 12 — a 3-step rhythm looks richer on paper but
     cannot tile 12 columns once the photo count is not a multiple of three. */
  /* Height comes from FIXED row tracks, never from an aspect ratio. Ratios were
     the obvious approach and the wrong one: two tiles of different ratios in one
     row resolve to different heights, the row grows to the taller of them, and
     the shorter tile leaves a block of empty page under it. With fixed tracks
     both tiles span the same number of rows, so they are the same height by
     construction and every gutter is the single gap value. */
  [data-design-preset="editorial-premium"] .ak-gallery__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:clamp(90px,9.8vw,150px);
    gap:clamp(1rem,1.6vw,1.4rem);
  }
  [data-design-preset="editorial-premium"] .ak-gallery__item{
    aspect-ratio:auto;grid-row:span 4;
  }
  [data-design-preset="editorial-premium"] .ak-gallery__item:nth-child(4n+1),
  [data-design-preset="editorial-premium"] .ak-gallery__item:nth-child(4n+4){grid-column:span 7;}
  [data-design-preset="editorial-premium"] .ak-gallery__item:nth-child(4n+2),
  [data-design-preset="editorial-premium"] .ak-gallery__item:nth-child(4n+3){grid-column:span 5;}
  /* An unpaired trailing photo runs full width rather than stranding a gap. */
  [data-design-preset="editorial-premium"] .ak-gallery__item:last-child:nth-child(odd){grid-column:1 / -1;grid-row:span 3;}

  /* -- Editorial Premium, ASYMMETRIC variant ---------------------------- */
  /* The alternative arrangement: a tall band of two unequal tiles over a shorter
     band of three. Selected per site via theme.galleryLayout — the Gallery
     component, its schema and both registry mirrors are untouched.
     The cycle is 5 photos over 12 columns: 8+4 = 12, then 3+3+6 = 12, so each
     cycle is two complete bands with no leftover columns. */
  [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:nth-child(5n+1){grid-column:span 8;grid-row:span 4;}
  [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:nth-child(5n+2){grid-column:span 4;grid-row:span 4;}
  [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:nth-child(5n+3){grid-column:span 3;grid-row:span 3;}
  [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:nth-child(5n+4){grid-column:span 3;grid-row:span 3;}
  [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:nth-child(5n+5){grid-column:span 6;grid-row:span 3;}
  [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:last-child:nth-child(5n+1){grid-column:1 / -1;grid-row:span 3;}

  /* -- Expedition: BENTO / MOSAIC --------------------------------------- */
  /* A wide "hero" tile leads each pair of rows, with square tiles around it —
     the energetic, editorial-poster feel the preset is after.
     The cycle is 6 photos over a 4-column grid: 2+1+1 then 1+1+2 = two complete
     rows, so the mosaic re-aligns every six photos and 9 photos (the count you
     tested) fills three whole rows. */
  /* Row height is FIXED (grid-auto-rows) and every tile spans row tracks rather
     than carrying its own aspect ratio. Aspect ratios were the obvious way to do
     this and the wrong one: a wide tile and a square tile in the same row resolve
     to different heights, and a wide tile left alone at the end of the list has
     no sibling to take its height from and collapses to zero. Fixed tracks give
     every tile a definite height at any photo count. */
  [data-design-preset="expedition"] .ak-gallery__grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:clamp(105px,10.6vw,155px);
    gap:clamp(.75rem,1.4vw,1.15rem);
  }
  [data-design-preset="expedition"] .ak-gallery__item{
    grid-column:span 1;grid-row:span 2;aspect-ratio:auto;
  }
  [data-design-preset="expedition"] .ak-gallery__item:nth-child(6n+1),
  [data-design-preset="expedition"] .ak-gallery__item:nth-child(6n+6){grid-column:span 2;}
  /* A single photo gets a banner rather than a lone square in a 4-wide row. */
  [data-design-preset="expedition"] .ak-gallery__item:only-child{grid-column:1 / -1;grid-row:span 3;}

  /* -- Warm Local: MASONRY ---------------------------------------------- */
  /* The grid, the tracks and the gaps are CSS; WHERE each photo goes is not.
     A balanced wall means every photo lands in whichever column is currently
     shortest, which is a running calculation over the photos already placed —
     multi-column balances by its own rules, dense auto-flow fills whichever
     column frees up first, and an nth-child height pattern only comes out level
     when the photo count happens to be a multiple of the pattern. So the kit's
     initMasonry (islands bundle) computes the placement and writes explicit grid
     coordinates back.
     The --ak-masonry custom property below is the opt-in flag it reads, which is
     why no preset name appears in that module.
     WITHOUT JavaScript these rules alone render a plain even grid of the same
     photos — correct, just not staggered. */
  [data-design-preset="warm-local"] .ak-gallery__grid{
    --ak-masonry:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:clamp(14px,1.5vw,22px);
    grid-auto-flow:row;
    gap:clamp(1rem,1.8vw,1.5rem);
  }
  /* The no-JS height. initMasonry replaces it with a row span per photo. */
  [data-design-preset="warm-local"] .ak-gallery__item{aspect-ratio:4/3;}
}

@media (min-width:1024px){
  [data-design-preset="warm-local"] .ak-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ======================================================================== */
/* Preset layout variants (>= 1024px only)                                  */
/* ======================================================================== */
/* Below 1024px every preset shares the base single/two-column stacking, so a
   variant can never cost a phone layout. Each block re-arranges EXISTING
   markup — no preset adds, removes or duplicates a component. */
@media (min-width:1024px){
  /* -- Clean Conversion: scan fast, act sooner -------------------------- */
  /* Contact: the form comes FIRST in the reading order's visual column, so the
     action is not parked behind the address block. Source order is untouched,
     so keyboard and screen-reader order still follow the markup. */
  [data-design-preset="clean-conversion"] .ak-contact{grid-template-columns:1.05fr .95fr;}
  [data-design-preset="clean-conversion"] .ak-contact__form{order:-1;}
  /* Equal card heights make three prices genuinely comparable at a glance. */
  [data-design-preset="clean-conversion"] .ak-product-grid__grid{align-items:stretch;}

  /* -- Editorial Premium: magazine scale -------------------------------- */
  /* Two large portraits per row instead of three: the photograph is the story,
     and at 3-up a 4:5 crop is too small to carry one. */
  [data-design-preset="editorial-premium"] .ak-product-grid__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(2rem,4vw,3.5rem);
  }
  /* A wider media column, and the photograph leads. */
  [data-design-preset="editorial-premium"] .ak-about{grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,5vw,4.5rem);}
  [data-design-preset="editorial-premium"] .ak-about__media{order:-1;}
  [data-design-preset="editorial-premium"] .ak-about__stats{grid-template-columns:repeat(3,1fr);}

  /* -- Warm Local: relaxed, hand-arranged ------------------------------- */
  /* Text first, photo second — the person talks to you before showing you the
     place. */
  [data-design-preset="warm-local"] .ak-about{grid-template-columns:.95fr 1.05fr;}
  [data-design-preset="warm-local"] .ak-flex__cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ---- Modern Utility visual preset --------------------------------------- */
/* Booking as a tool, not a brochure. Everything is white, bordered and compact:
   the visitor is comparing dates and prices, so the page gets out of the way.
   Buttons are near-black rather than brand-coloured — the brand still owns
   headings, links and accents, but the ACTION is the same dark control
   everywhere, which is what makes a utility interface feel predictable. */
[data-design-preset="modern-utility"]{
  --site-maxw:1120px;
  --site-radius-sm:4px;
  --site-radius-md:8px;
  --site-radius-lg:12px;
  --site-radius-xl:16px;
  --site-page-bg:#ffffff;
  --site-section-tint:#f6f7f9;
  --ak-nav-h:64px;
  /* Near-black action colour, warmed a touch toward the brand so it never looks
     like a stray system button. */
  --ak-ink:color-mix(in srgb,var(--site-primary) 12%,#101418);
  --ak-hairline:color-mix(in srgb,var(--site-primary) 8%,#dfe3e8);
  /* Quick, small motion — this preset should feel responsive, not cinematic. */
  --ak-rise:10px;--ak-dur:.36s;--ak-stagger:45ms;
}
[data-design-preset="modern-utility"] .ak-section{padding-block:clamp(2.5rem,5vw,4rem);}
[data-design-preset="modern-utility"] .ak-heading{letter-spacing:-.025em;font-weight:800;}
[data-design-preset="modern-utility"] .ak-h2{font-size:clamp(1.4rem,2.6vw,1.9rem);}
[data-design-preset="modern-utility"] .ak-lead{font-size:1rem;line-height:1.65;}
[data-design-preset="modern-utility"] .ak-eyebrow{font-size:.72rem;letter-spacing:.12em;}

/* Buttons: one dark control, everywhere. */
[data-design-preset="modern-utility"] .ak-btn{
  border-radius:8px;font-weight:700;font-size:.9rem;padding:.8rem 1.35rem;box-shadow:none;
}
[data-design-preset="modern-utility"] .ak-btn:hover{transform:none;box-shadow:none;}
[data-design-preset="modern-utility"] :is(.ak-btn--primary,.ak-btn--accent){
  background:var(--ak-ink);color:#fff;border-color:transparent;
}
[data-design-preset="modern-utility"] :is(.ak-btn--primary,.ak-btn--accent):hover{
  background:color-mix(in srgb,var(--ak-ink) 85%,#000);filter:none;
}
[data-design-preset="modern-utility"] .ak-btn--ghost{
  background:#fff;color:var(--ak-ink);border-color:var(--ak-hairline);
}
[data-design-preset="modern-utility"] .ak-btn--ghost:hover{background:#f6f7f9;border-color:var(--ak-ink);}

/* Navbar: a thin utility bar. */
[data-design-preset="modern-utility"] .ak-navbar{
  height:var(--ak-nav-h);background:#fff;border-bottom:1px solid var(--ak-hairline);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
[data-design-preset="modern-utility"] .ak-navbar.is-scrolled{background:#fff;box-shadow:0 1px 0 var(--ak-hairline);}
[data-design-preset="modern-utility"] .ak-navbar__brand{font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;font-weight:800;}
[data-design-preset="modern-utility"] .ak-navbar__brand img{height:clamp(22px,2.2vw,28px);}
[data-design-preset="modern-utility"] .ak-navbar__links a{font-size:.88rem;font-weight:600;color:var(--site-fg-soft);}
[data-design-preset="modern-utility"] .ak-navbar__links a:hover,
[data-design-preset="modern-utility"] .ak-navbar__links a[aria-current="true"]{color:var(--ak-ink);}
[data-design-preset="modern-utility"] .ak-navbar__links a::after{background:var(--ak-ink);}
[data-design-preset="modern-utility"] .ak-navbar__cta{padding:.6rem 1.05rem;font-size:.85rem;}
[data-design-preset="modern-utility"] .ak-navbar__progress{background:var(--ak-ink);}
[data-design-preset="modern-utility"] .ak-navbar__toggle{border-color:var(--ak-hairline);color:var(--ak-ink);}

/* Hero: the split layout is the one this preset is built around — copy and the
   booking action on the left, the photo as a bordered card on the right. */
[data-design-preset="modern-utility"] .ak-hero{
  background:#fff;padding-block:clamp(2.5rem,5vw,4.5rem);gap:clamp(1.5rem,4vw,3.5rem);
}
[data-design-preset="modern-utility"] .ak-hero__content{max-width:30rem;}
[data-design-preset="modern-utility"] .ak-hero .ak-h1{
  font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.1;letter-spacing:-.035em;font-weight:800;
}
[data-design-preset="modern-utility"] .ak-hero .ak-lead{max-width:32ch;color:var(--site-fg-soft);}
[data-design-preset="modern-utility"] .ak-hero__media img,
[data-design-preset="modern-utility"] .ak-hero__media video,
[data-design-preset="modern-utility"] .ak-hero__media iframe{
  aspect-ratio:4/3;border-radius:var(--site-radius-lg);
}
[data-design-preset="modern-utility"] .ak-hero__media{border-radius:var(--site-radius-lg);box-shadow:none;border:1px solid var(--ak-hairline);}
/* The overlay hero still has to read as this preset if a site turns it on: a
   light panel on the left, dark type, same dark action. */
[data-design-preset="modern-utility"] .ak-hero--overlay{
  min-height:clamp(26rem,58vh,38rem);color:var(--site-fg);
}
[data-design-preset="modern-utility"] .ak-hero--overlay::before{
  background:linear-gradient(96deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 38%,rgba(255,255,255,.3) 66%,rgba(255,255,255,0) 90%);
}
[data-design-preset="modern-utility"] .ak-hero--overlay :is(.ak-heading,.ak-h1){color:var(--site-heading);text-shadow:none;}
[data-design-preset="modern-utility"] .ak-hero--overlay .ak-lead{color:var(--site-fg-soft);text-shadow:none;}
[data-design-preset="modern-utility"] .ak-hero--overlay .ak-eyebrow{
  background:#f6f7f9;color:var(--site-primary);-webkit-backdrop-filter:none;backdrop-filter:none;
}
[data-design-preset="modern-utility"] .ak-hero--overlay .ak-btn--ghost{background:#fff;color:var(--ak-ink);border-color:var(--ak-hairline);}

/* Product grid: a compact row of comparable options. Price and action sit on the
   same line, which is the whole point of the layout. */
[data-design-preset="modern-utility"] .ak-product-grid__head{border-bottom:1px solid var(--ak-hairline);padding-bottom:1rem;}
[data-design-preset="modern-utility"] .ak-product-grid__viewall{
  background:transparent;border:0;color:var(--ak-ink);padding:.2rem 0;font-size:.88rem;font-weight:700;
}
[data-design-preset="modern-utility"] .ak-product-grid__viewall:hover{background:transparent;text-decoration:underline;}
[data-design-preset="modern-utility"] .ak-product-grid__count{background:#f0f2f5;color:var(--site-fg-soft);}
[data-design-preset="modern-utility"] .ak-product-grid__grid{gap:clamp(.9rem,1.8vw,1.35rem);align-items:stretch;}
[data-design-preset="modern-utility"] .ak-card{
  background:#fff;border:1px solid var(--ak-hairline);border-radius:var(--site-radius-lg);box-shadow:none;
}
[data-design-preset="modern-utility"] .ak-card:hover{transform:none;box-shadow:0 4px 14px -8px rgba(16,20,24,.28);border-color:color-mix(in srgb,var(--site-primary) 24%,#c9cfd6);}
[data-design-preset="modern-utility"] .ak-card__media{padding:.5rem .5rem 0;}
[data-design-preset="modern-utility"] .ak-card__media img{aspect-ratio:16/10;border-radius:var(--site-radius-md);}
[data-design-preset="modern-utility"] .ak-card:hover .ak-card__media img{transform:none;}
[data-design-preset="modern-utility"] .ak-card__body{padding:.9rem 1rem 1rem;gap:.35rem;}
[data-design-preset="modern-utility"] .ak-card__title{font-size:1rem;font-weight:700;}
[data-design-preset="modern-utility"] :is(.ak-card__desc,.ak-card__metarow,.ak-card__meta){font-size:.84rem;}
/* Price and action on ONE line, which is the signature of this card.
   The button is a SIBLING of the footer in the markup, not a child, so the
   footer is dissolved with display:contents and the body itself becomes the row
   container: the text children each take a full line, and the price and button
   share the last one. No markup changes, and the card keeps its own DOM order. */
[data-design-preset="modern-utility"] .ak-card__body{
  /* flex-direction MUST be reset: the base card body is a flex COLUMN, and a
     wrapping column wraps into extra columns — the card overflowed sideways. */
  display:flex;flex-direction:row;flex-wrap:wrap;
  align-items:center;align-content:flex-start;row-gap:.3rem;column-gap:.75rem;
}
[data-design-preset="modern-utility"] :is(.ak-card__title,.ak-card__desc,.ak-card__meta,.ak-card__metarow){
  flex:0 0 100%;
}
[data-design-preset="modern-utility"] .ak-card__footer{display:contents;}
/* The rule above the price row is a flex ITEM, not a border: a border on the
   price would stop where the price stops, leaving a half-drawn line beside the
   button. A container pseudo-element is a real flex item, and the order property slots it
   between the copy and the price row without touching the markup. */
[data-design-preset="modern-utility"] .ak-card__body::after{
  content:"";flex:0 0 100%;height:1px;background:var(--ak-hairline);order:1;margin-top:.75rem;
}
[data-design-preset="modern-utility"] .ak-card__price{flex:1 1 auto;order:2;margin-top:.7rem;}
[data-design-preset="modern-utility"] .ak-card .ak-btn{flex:0 0 auto;order:2;margin-top:.7rem;}
[data-design-preset="modern-utility"] .ak-card__price{font-size:.95rem;font-weight:800;}
[data-design-preset="modern-utility"] .ak-card__badge{background:#fff;color:var(--ak-ink);border:1px solid var(--ak-hairline);box-shadow:none;}
/* The card action is a small dark button beside the price, not a full-width bar. */
[data-design-preset="modern-utility"] .ak-card .ak-btn{
  width:auto;padding:.55rem 1rem;font-size:.84rem;
}
[data-design-preset="modern-utility"] .ak-card__avail{background:#eef7f1;color:#1a6b3d;}

/* Booking: a form panel, bordered rather than floated. */
[data-design-preset="modern-utility"] :is(.ak-booking,.ak-book__dialog,.ak-contact form){
  background:#fff;border:1px solid var(--ak-hairline);border-radius:var(--site-radius-lg);box-shadow:none;
}
[data-design-preset="modern-utility"] :is(.ak-field select,.ak-field input,.ak-contact textarea){
  border-radius:8px;border-color:var(--ak-hairline);background:#fff;
}
[data-design-preset="modern-utility"] :is(.ak-pill,.ak-num){border-radius:8px;background:#fff;border-color:var(--ak-hairline);}
[data-design-preset="modern-utility"] :is(.ak-pill,.ak-num)[aria-pressed="true"]{background:var(--ak-ink);border-color:var(--ak-ink);color:#fff;}
[data-design-preset="modern-utility"] .ak-booking__price{font-size:1.7rem;}
[data-design-preset="modern-utility"] .ak-book__head{border-bottom-color:var(--ak-hairline);}
[data-design-preset="modern-utility"] .ak-book__close{border-color:var(--ak-hairline);}

/* Product detail, gallery, reviews, FAQ — same bordered, compact language. */
[data-design-preset="modern-utility"] .ak-product-detail__media img{border-radius:var(--site-radius-lg);box-shadow:none;border:1px solid var(--ak-hairline);}
[data-design-preset="modern-utility"] .ak-product-detail__price{color:var(--ak-ink);font-size:1.35rem;}
[data-design-preset="modern-utility"] .ak-product-detail__features li::before{background:#f0f2f5;}
[data-design-preset="modern-utility"] .ak-gallery__item{border-radius:var(--site-radius-md);box-shadow:none;}
/* The grade overlay is a separate layer, so it needs the tile's radius too —
   otherwise the collage's corners are only consistent because overflow clips
   them. Every tile in the wall carries the SAME radius whatever its size. */
[data-design-preset="modern-utility"] .ak-gallery__item::before{border-radius:inherit;}
[data-design-preset="modern-utility"] .ak-quote{
  background:#fff;border:1px solid var(--ak-hairline);border-radius:var(--site-radius-lg);box-shadow:none;padding:1.1rem 1.2rem;
}
[data-design-preset="modern-utility"] .ak-quote__text{font-size:.92rem;}
[data-design-preset="modern-utility"] .ak-testimonials__summary{
  display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--ak-hairline);
  border-radius:8px;padding:.45rem .8rem;font-size:.9rem;font-weight:700;color:var(--site-fg);
}
[data-design-preset="modern-utility"] .ak-faq__list{gap:.5rem;}
[data-design-preset="modern-utility"] .ak-faq details{
  background:#fff;border:1px solid var(--ak-hairline);border-radius:var(--site-radius-md);padding:.9rem 1.1rem;
}
[data-design-preset="modern-utility"] .ak-faq details[open]{border-color:var(--ak-ink);box-shadow:none;}
[data-design-preset="modern-utility"] .ak-faq summary{font-size:.95rem;}
[data-design-preset="modern-utility"] .ak-faq summary::after{color:var(--ak-ink);}

/* About + FlexSection: the small labelled boxes this preset uses for facts. */
[data-design-preset="modern-utility"] .ak-about__media img,
[data-design-preset="modern-utility"] .ak-about__media{border-radius:var(--site-radius-lg);box-shadow:none;}
[data-design-preset="modern-utility"] :is(.ak-about__stat,.ak-flex__stat){
  background:#fff;border:1px solid var(--ak-hairline);border-radius:var(--site-radius-md);padding:.85rem .95rem;text-align:left;
}
[data-design-preset="modern-utility"] :is(.ak-about__stat b,.ak-flex__stat b){font-size:1.35rem;color:var(--ak-ink);}
[data-design-preset="modern-utility"] :is(.ak-about__stat span,.ak-flex__stat span){font-size:.8rem;}
[data-design-preset="modern-utility"] .ak-flex__card{
  background:#fff;border:1px solid var(--ak-hairline);border-radius:var(--site-radius-lg);box-shadow:none;
}
[data-design-preset="modern-utility"] .ak-flex__card:hover{transform:none;box-shadow:none;border-color:var(--ak-ink);}
[data-design-preset="modern-utility"] .ak-flex__badge{background:#f0f2f5;color:var(--ak-ink);border-radius:6px;}
[data-design-preset="modern-utility"] .ak-flex__cards[data-variant="steps"] .ak-flex__card::before{background:var(--ak-ink);color:#fff;}
[data-design-preset="modern-utility"] .ak-richtext{max-width:68ch;}
[data-design-preset="modern-utility"] .ak-richtext p{font-size:.98rem;line-height:1.75;}
[data-design-preset="modern-utility"] .ak-richtext a{color:var(--ak-ink);text-underline-offset:3px;}

/* CTA: a dark band. Its text is set explicitly — the background is NOT the brand
   colour, so --site-primary-contrast (the readable colour for a brand swatch,
   which goes near-black for a light brand) would be the wrong source. */
[data-design-preset="modern-utility"] .ak-cta{
  background:var(--ak-ink);border-radius:var(--site-radius-lg);box-shadow:none;
  padding-block:clamp(2.25rem,5vw,3.5rem);
}
[data-design-preset="modern-utility"] .ak-cta,
[data-design-preset="modern-utility"] .ak-cta :is(.ak-heading,h1,h2,h3){color:#fff;}
[data-design-preset="modern-utility"] .ak-cta .ak-lead{color:rgba(255,255,255,.82);}
[data-design-preset="modern-utility"] .ak-cta .ak-btn--accent{background:#fff;color:var(--ak-ink);}
[data-design-preset="modern-utility"] .ak-cta .ak-btn--ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;}

[data-design-preset="modern-utility"] .ak-contact__list a{color:var(--ak-ink);}
[data-design-preset="modern-utility"] .ak-footer{background:#0f1317;}
[data-design-preset="modern-utility"] .ak-footer__column-title{letter-spacing:.1em;}

@media (min-width:768px){
  /* Gallery is laid out in its own block at the end of this preset — see
     "Modern Utility: editorial collage gallery". */
  [data-design-preset="modern-utility"] .ak-about__stats{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1024px){
  /* Split only. An overlay hero has no second column — the photo is behind the
     copy — and a two-column track would strand the text in half the width. */
  [data-design-preset="modern-utility"] .ak-hero:not(.ak-hero--overlay){grid-template-columns:1fr 1.15fr;}
  [data-design-preset="modern-utility"] .ak-flex__stats{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:767.98px){
  /* Phone: everything stacks, the card action goes full width because a thumb
     needs a target, and the hero photo sits under the copy. */
  [data-design-preset="modern-utility"] .ak-card .ak-btn{width:100%;}
  [data-design-preset="modern-utility"] .ak-card__footer{flex-direction:column;align-items:stretch;gap:.5rem;}
  [data-design-preset="modern-utility"] .ak-hero__content{max-width:none;}
  [data-design-preset="modern-utility"] .ak-navbar__nav{background:#fff;border-bottom-color:var(--ak-hairline);}
  [data-design-preset="modern-utility"] .ak-navbar__links li{border-bottom-color:var(--ak-hairline);}
}

/* ---- Modern Utility: the split hero works for BOTH hero modes ------------ */
/* The preset's signature is copy beside the photo. That layout used to need
   overlay:false, so a site whose Hero has overlay ON — which is what the
   generator produces — fell back to a full-bleed photo with a wash over it and
   read as an ordinary template.
   An overlay hero's photo is a real <img> layer, not a CSS background, so it can
   simply be re-placed as a card on the right. Same markup, same prop, same
   component: the layout no longer depends on how the Hero was authored. */
@media (min-width:1024px){
  [data-design-preset="modern-utility"] .ak-hero--overlay{
    --ak-hero-pad:clamp(2.5rem,5vw,4.5rem);
    min-height:0;
    padding:var(--ak-hero-pad) clamp(1.25rem,4vw,2rem);
  }
  [data-design-preset="modern-utility"] .ak-hero--overlay .ak-hero__bg:is(img,video){
    left:auto;
    right:clamp(1.25rem,4vw,2rem);
    top:var(--ak-hero-pad);
    bottom:auto;
    /* An <img> is a REPLACED element: with top and bottom both set and height
       auto it does not stretch between them, it takes its intrinsic ratio and
       overflows. The height has to be stated, and object-fit:cover crops. */
    height:calc(100% - (var(--ak-hero-pad) * 2));
    width:min(48%,660px);
    border-radius:var(--site-radius-lg);
    border:1px solid var(--ak-hairline);
  }
  /* The copy is beside the photo now, not on it — a scrim would only grey the
     page. Gated on the photo actually being an img/video: a YouTube/Vimeo
     iframe cannot be re-placed this way and keeps the full-bleed treatment. */
  [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg)::before{
    background:none;
  }
  [data-design-preset="modern-utility"] .ak-hero--overlay .ak-hero__content{
    max-width:min(46%,30rem);
  }
}

/* ---- Modern Utility: editorial collage gallery --------------------------- */
/* A photo WALL, not a row of equal cards. Two bands, repeating every 7 photos:

     band A   [ 1 featured, wide ][ 2 upright ]
     band B   [ 3 featured, tall ][ 4 ][ 5 ]
                                  [ 6 ][ 7 ]

   Band B is the point of the design: a large photo with a 2x2 CLUSTER of small
   ones locked beside it. That vertical interlock is what makes it read as a
   collage rather than as stacked rows of tiles, and it is the one thing a plain
   band-per-row grid cannot produce.
   The cycle repeats for as long as the gallery is, so the wall is driven by
   however many photos it holds — no supported count, and nothing is ever
   repeated to pad a row. Same markup, same schema, same data: this block only
   re-places the tiles the Gallery component already renders.

   WHY THE CLUSTER SITS ON THE RIGHT
   CSS places items in DOM order and its cursor only ever moves FORWARD. A
   cluster on the LEFT would have to be laid before the tall photo beside it,
   and the cursor could then never come back up to fill the tall photo's rows —
   the wall would open a hole every cycle. Leading with the tall photo lets the
   four small ones fall into the two rows it leaves, which tiles exactly.
   (A dense auto-flow would force the mirror image, at the price of letting
   later photos jump ahead of earlier ones. Not worth it.)

   WHY HEIGHTS ARE ROW TRACKS, NOT ASPECT RATIOS
   Two tiles of different widths in the same band would resolve to different
   heights from a ratio, and a wide tile left with no sibling would collapse.
   Fixed tracks give every tile a definite height at any photo count.

   WHY THE CLUSTER IS 3 COLUMNS x 3 ROWS
   Exactly half the featured tile's width AND half its height, so the cluster
   and the photo it sits beside frame at the SAME aspect ratio. The sizes
   differ; the crop does not, which is what keeps subjects intact across a wall
   of mixed tile sizes. */
@media (min-width:768px){
  [data-design-preset="modern-utility"] .ak-gallery__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:clamp(52px,5.2vw,86px);
    gap:clamp(.5rem,.9vw,.8rem);
  }
  [data-design-preset="modern-utility"] .ak-gallery__item{aspect-ratio:auto;}

  /* Band A — a wide featured photo beside an upright one, same height. */
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+1){grid-column:span 7;grid-row:span 5;}
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+2){grid-column:span 5;grid-row:span 5;}
  /* Band B — the tall featured photo, then the 2x2 cluster that locks beside it. */
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+3){grid-column:span 6;grid-row:span 6;}
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+4),
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+5),
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+6),
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+7){grid-column:span 3;grid-row:span 3;}

  /* FLUSH ENDINGS
     A gallery whose length is not a multiple of 7 stops mid-band, and an
     unfinished CLUSTER leaves a square hole punched in the middle of the wall —
     far uglier than a short last row. Each rule below grows the surviving tiles
     into exactly the space their band has left, so every count from 1 upwards
     ends level. Positions 2 and 7 already close their band and need no rule. */
  /* …#1: a lone featured photo becomes a full-width banner. */
  [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+1){grid-column:1 / -1;grid-row:span 4;}
  /* …#3: no cluster follows it, so the featured photo takes the whole band. */
  [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+3){grid-column:1 / -1;grid-row:span 4;}
  /* …#4: one cluster tile — grow it to the full half instead of a lone square. */
  [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+4){grid-column:span 6;grid-row:span 6;}
  /* …#5: two cluster tiles — stand them full height, side by side. */
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+4):nth-last-child(2),
  [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+5){grid-row:span 6;}
  /* …#6: three of four — the last one takes the cluster's bottom row. */
  [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+6){grid-column:span 6;}

  /* A short, wide crop loses its subject when the frame is centred — landscape
     and adventure photos carry it just above the middle. The two featured tiles
     are tall enough to show the frame honestly, so they keep a true centre;
     their full-width fallbacks above are banners and take the shared bias. */
  [data-design-preset="modern-utility"] .ak-gallery__item img{object-position:50% 42%;}
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+1):not(:last-child) img,
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+3):not(:last-child) img{object-position:50% 50%;}
}

/* Phone: the same 7-photo rhythm at two columns. The band-A featured photo runs
   edge to edge and everything else pairs up, so the wall keeps its big/small
   contrast instead of becoming one long column of identical photos. Ratios stay
   generous (16:10 and square) — a 12-column collage squeezed onto a phone is
   what produces the letterboxed slivers this avoids.
   Under 360px the base single column stands; half of that really is a
   thumbnail. */
@media (min-width:360px) and (max-width:767.98px){
  [data-design-preset="modern-utility"] .ak-gallery__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(.45rem,1.6vw,.7rem);
  }
  [data-design-preset="modern-utility"] .ak-gallery__item{aspect-ratio:1/1;}
  [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+1){grid-column:1 / -1;aspect-ratio:16/10;}
  /* The three positions a 7-cycle can strand a tile at with no partner: give it
     the row rather than leaving a gap beside it. */
  [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+2),
  [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+4),
  [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+6){grid-column:1 / -1;aspect-ratio:16/10;}
  [data-design-preset="modern-utility"] .ak-gallery__item img{object-position:50% 42%;}
}