.elementor-17180 .elementor-element.elementor-element-1b450b6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-6fdee478{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-4b36f94{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-1346a489{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-39d0c4ea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-4c1d04f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-42dcd0b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-1f8ab36f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:992px){.elementor-17180 .elementor-element.elementor-element-1b450b6{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-6fdee478{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-4b36f94{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-1346a489{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-39d0c4ea{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-4c1d04f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-42dcd0b{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-1f8ab36f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-17180 .elementor-element.elementor-element-1b450b6{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-6fdee478{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-4b36f94{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-1346a489{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-39d0c4ea{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-4c1d04f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-42dcd0b{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17180 .elementor-element.elementor-element-1f8ab36f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS *//* generated by build_elementor_containers.py — do not edit;
   edit styles.css and re-run */
.ahx h1, .ahx h2, .ahx h3 { color: inherit; text-transform: none; }
.ahx p, .ahx div, .ahx section, .ahx article, .ahx header, .ahx dl, .ahx dt, .ahx dd, .ahx details, .ahx summary { margin: 0; padding: 0; border: 0; font-weight: inherit; }
.ahx ul, .ahx li { margin: 0; padding: 0; border: 0; list-style: none; }
.ahx img, .ahx svg { border: 0; box-shadow: none; vertical-align: baseline; }
.ahx blockquote { margin: 0; padding: 0; border: 0; font-style: normal; quotes: none; }
.ahx blockquote::before, .ahx blockquote::after { content: none; }
.ahx a { text-decoration: none; }
.ahx button, .ahx input, .ahx select, .ahx textarea { margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal; text-shadow: none; min-height: auto; max-height: none; height: auto; line-height: normal; }

/* ==========================================================================
   Anans Home — rooms page rebuild
   Style inherited from ananstravel.com homepage, measured rather than guessed:
     white ground, warm cream #FAF8F3 and cool mist #F7F8FA bands,
     navy ink #1A2B48, deep forest #002B11 for CTAs, DM Sans for headings.

   Two things the homepage does that this page does NOT copy:
   · The homepage runs five font families at once, and 105 of its text nodes
     fall back to `system-ui` — so it renders in Segoe UI on Windows, SF on
     macOS, Roboto on Android. The brand has no typographic voice. This page
     commits to DM Sans throughout, which is already loaded there.
   · Its h1 is 34px/500 while its h2 is 54px/700 in a different family, so the
     outline is inverted. Here h1 leads and each level descends.

   BUILT FOR ELEMENTOR. Every block below maps to a native widget — Heading,
   Text Editor, Image, Icon List, Accordion, Image Gallery, Button, Form. No
   custom interaction, nothing that would need an HTML widget or a code block.
   Layout is flex containers only, one level deep wherever possible, so the
   client reaches the text they want to edit in two clicks.
   ========================================================================== */
.ahx{
  --white:      #FFFFFF;
  --cream:      #FAF8F3;
  --mist:       #F7F8FA;
  --ink:        #1A2B48;
  --ink-2:      #47587A;
  --ink-3:      #5E6E8C;
  --green:      #14562F;
  --green-deep: #002B11;
  --on-green:   #FFFFFF;
  --line:       #E3E0D7;
  --line-cool:  #E4E7EC;

  /* DM Sans ships latin + latin-ext only. Đ, ă and é are covered; ữ ơ ệ ạ and
     the whole U+1EA0–1EF9 block are not, so "Phương Độ" and "Nguyễn" render
     half DM Sans and half whatever the OS supplies — Segoe UI on Windows, SF
     on macOS. Be Vietnam Pro sits second purely to catch those glyphs, so the
     Vietnamese text is a designed companion face on every machine instead of
     a different one per visitor. Measured, not assumed. */
  --sans: "DM Sans", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s--1: .9375rem;   /* 15px floor — the live page drops to 12px */
  --s-0:  1.0625rem;  /* 17px body */
  --s-1:  1.1875rem;  /* 19px */
  --s-2:  clamp(1.25rem, 1.1rem + .45vw, 1.5rem);    /* room names ~24px */
  --s-3:  clamp(1.5rem, 1.3rem + .7vw, 2rem);        /* section heads ~32px */
  --s-4:  clamp(1.9rem, 1.55rem + 1.3vw, 2.75rem);   /* page title ~44px */

  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
  --band:   clamp(3rem, 1.8rem + 4vw, 5.5rem);
  --maxw:   1180px;
  --radius: 10px;
}

.ahx *, .ahx *::before, .ahx *::after{ box-sizing: border-box; }

.ahx{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

.ahx{
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--s-0);
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height:auto is not cosmetic. An <img width="800" height="600"> — which every
   image should carry, to reserve space and stop layout shift — maps those
   attributes to presentational `width`/`height` hints. `aspect-ratio` only
   applies when one axis is auto, so without this line the attribute wins and
   every ratio in the stylesheet is silently ignored. Nothing errors; the
   pictures just come out the wrong shape. */
.ahx img{ display: block; max-width: 100%; height: auto; }

.ahx a{ color: inherit; }

.ahx p{ margin: 0; }

.ahx h1, .ahx h2, .ahx h3, .ahx h4{
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0;
}

.ahx :where(a, .ahx button, .ahx input, .ahx select, .ahx textarea, .ahx [tabindex]):focus-visible{
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.ahx ::selection{ background: var(--green); color: var(--on-green); }

.ahx .ahx-wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.ahx .ahx-skip{
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green-deep); color: var(--on-green);
  font-size: var(--s--1); font-weight: 500; padding: .8em 1.2em;
}

.ahx .ahx-skip:focus{ left: 0; }

.ahx .ahx-eyebrow{
  font-size: var(--s--1);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 .7rem;
}
/* ------------------------------------------------------------------ BUTTONS */
.ahx .ahx-btn{
  font-family: var(--sans);
  font-size: var(--s--1); font-weight: 500;
  text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .95em 1.7em; border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color .18s, color .18s, border-color .18s;
}

.ahx .ahx-btn-green{ background: var(--green-deep); color: var(--on-green); }

.ahx .ahx-btn-green:hover{ background: var(--green); }

.ahx .ahx-btn-line{ border-color: var(--ink); color: var(--ink); }

.ahx .ahx-btn-line:hover{ background: var(--ink); color: var(--white); }

.ahx .ahx-btn-quiet{ border-color: var(--line); color: var(--ink); }

.ahx .ahx-btn-quiet:hover{ border-color: var(--ink); }

.ahx .ahx-btn-onphoto{ background: var(--white); color: var(--ink); }

.ahx .ahx-btn-onphoto:hover{ background: var(--cream); }
/* --------------------------------------------------------------------- NAV */
.ahx .ahx-masthead{
  border-bottom: 1px solid var(--line-cool);
  background: var(--white);
}

.ahx .ahx-masthead-in{
  max-width: var(--maxw); margin-inline: auto;
  padding: 1rem var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem);
}

.ahx .ahx-logo{ text-decoration: none; font-weight: 700; font-size: 1.2rem; letter-spacing: -.015em; }

.ahx .ahx-logo span{ color: var(--green); }

.ahx .ahx-nav{ display: flex; gap: clamp(.85rem, 1.8vw, 1.6rem); margin-left: auto; }

.ahx .ahx-nav a{
  font-size: var(--s--1); font-weight: 400; text-decoration: none;
  color: var(--ink-2); padding: .3em 0; border-bottom: 2px solid transparent;
}

.ahx .ahx-nav a:hover, .ahx .ahx-nav a[aria-current="page"]{ color: var(--ink); border-bottom-color: var(--green); }

@media (max-width: 1000px){
.ahx .ahx-nav{ display: none; }

.ahx .ahx-masthead-in .ahx-btn{ margin-left: auto; }
 }
/* -------------------------------------------------------------------- HERO */
.ahx .ahx-hero{
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(66vh, 540px);
  display: grid; align-items: center;
  background: var(--green-deep);
}

.ahx .ahx-hero-photo{
  position: absolute; inset: 0; z-index: -2;
  background-image: url("https://ananstravel.com/wp-content/uploads/2025/07/MAR08120-min-1-scaled.jpg");
  background-size: cover; background-position: 50% 50%;
}

.ahx .ahx-hero-scrim{
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(4,22,12,.82) 0%, rgba(4,22,12,.55) 48%, rgba(4,22,12,.28) 100%);
}

.ahx .ahx-hero-in{
  max-width: var(--maxw); margin-inline: auto; width: 100%;
  padding: clamp(3rem, 8vh, 5rem) var(--gutter);
  color: var(--white);
}

.ahx .ahx-hero h1{ font-size: var(--s-4); max-width: 20ch; }

.ahx .ahx-hero-sub{ margin-top: 1.1rem; max-width: 48ch; font-size: var(--s-1); color: rgba(255,255,255,.94); }

.ahx .ahx-hero-actions{ display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }

.ahx .ahx-hero .ahx-eyebrow{ color: #A9D9BC; }
/* ---------------------------------------------------------------- SECTIONS */
.ahx .ahx-band{ padding-block: var(--band); }

.ahx .ahx-band-cream{ background: var(--cream); }

.ahx .ahx-band-mist{ background: var(--mist); }

.ahx .ahx-sechead{ max-width: 60ch; padding-bottom: clamp(1.6rem, 3vw, 2.5rem); }

.ahx .ahx-sechead h2{ font-size: var(--s-3); }
/* class, not ".sechead p" — .eyebrow is also a direct child and that body.elementor-page-17180
   outranks it, silently turning every green label navy */
.ahx .ahx-sechead .ahx-sechead-copy{ margin-top: .8rem; color: var(--ink-2); }
/* ------------------------------------------------------------------- PROOF */
.ahx .ahx-proof{ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }

@media (max-width: 860px){
.ahx .ahx-proof{ grid-template-columns: 1fr; }
 }

.ahx .ahx-proof blockquote{
  margin: 0; font-size: var(--s-1); line-height: 1.55; color: var(--ink);
}

.ahx .ahx-proof-cite{ margin-top: 1rem; font-size: var(--s--1); color: var(--ink-3); }

.ahx .ahx-logos{ display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }

.ahx .ahx-logos img{ height: 26px; width: auto; object-fit: contain; opacity: .75; }
/* -------------------------------------------------------- INCLUDED (hoisted) */
/* The live page repeats this identical seven-line list under three separate
   rooms. Stating it once removes roughly a screen and a half of duplication,
   and in Elementor it becomes one Icon List the client edits in one place. */
.ahx .ahx-included{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); }

@media (max-width: 860px){
.ahx .ahx-included{ grid-template-columns: 1fr; }
 }

.ahx .ahx-ticks{ list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }

.ahx .ahx-ticks li{ display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; align-items: start; }

.ahx .ahx-ticks svg{ width: 1.15rem; height: 1.15rem; margin-top: .28rem; color: var(--green); }
/* margin:0 is load-bearing. This is a <dl>, so without it the browser's default
   `dl { margin: 1em 0 }` adds 17px top and bottom — a spacing I never chose,
   which only surfaced when the embedded build reset it and the two versions
   drifted apart. Don't lean on UA defaults inside a grid. */
.ahx .ahx-rates{ margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 1.5rem 1.6rem; }

.ahx .ahx-rates h3{ font-size: var(--s-1); margin-bottom: .9rem; }

.ahx .ahx-rate-row{ display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--line); }

.ahx .ahx-rate-row:first-of-type{ border-top: 0; }

.ahx .ahx-rate-row dt{ color: var(--ink-2); font-size: var(--s--1); }

.ahx .ahx-rate-row dd{ margin: 0; font-weight: 500; font-size: var(--s--1); text-align: right; white-space: nowrap; }

.ahx .ahx-rates-note{ margin-top: 1rem; font-size: var(--s--1); color: var(--ink-3); }
/* ------------------------------------------------------------- ROOMS: DORMS */
/* Dorms and private rooms are different products, so they get different
   treatments: dorms as two compact cards, private rooms as wide rows with
   space for their amenity lists. */
.ahx .ahx-dorms{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); }

.ahx .ahx-dorm{
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
}

.ahx .ahx-dorm-photo{ display: block; aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }

.ahx .ahx-dorm-body{ padding: 1.35rem 1.4rem .4rem; display: grid; gap: .8rem; align-content: start; }

.ahx .ahx-dorm-body h3{ font-size: var(--s-2); }

.ahx .ahx-dorm-foot{ padding: 1rem 1.4rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.ahx .ahx-beds{ font-size: var(--s--1); color: var(--ink-2); }

.ahx .ahx-beds b{ color: var(--ink); font-weight: 500; }
/* ---------------------------------------------------- ROOMS: PRIVATE (rows) */
.ahx .ahx-rooms{ display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.ahx .ahx-room{
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}

.ahx .ahx-room-photo{ width: 100%; height: 100%; min-height: 260px; object-fit: cover; }

.ahx .ahx-room-body{ padding: clamp(1.4rem, 3vw, 2.25rem); display: grid; gap: 1rem; align-content: center; }

.ahx .ahx-room-body h3{ font-size: var(--s-2); }

.ahx .ahx-room-body > p{ color: var(--ink-2); }
/* alternate the photo side; in Elementor this is flex_direction: row-reverse
   on every second container, not a separate template */
.ahx .ahx-room:nth-child(even) .ahx-room-photo{ order: 2; }

@media (max-width: 880px){
.ahx .ahx-room{ grid-template-columns: 1fr; }

.ahx .ahx-room:nth-child(even) .ahx-room-photo{ order: 0; }

.ahx .ahx-room-photo{ min-height: 0; aspect-ratio: 3 / 2; }

}

.ahx .ahx-tags{ display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.ahx .ahx-tags li{
  font-size: var(--s--1); color: var(--ink-2);
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 999px; padding: .35em .9em;
}

.ahx .ahx-room-foot{ display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
/* --------------------------------------------------------------------- BAR */
/* The source photos are square (1600×1600), so the photo group is built on a
   square grid. Forcing them into 3:2 or 4:3 slots throws away a third of each
   frame, and on shelf-and-bottle shots that is exactly where the subject is. */
.ahx .ahx-barlayout{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}

@media (max-width: 880px){
.ahx .ahx-barlayout{ grid-template-columns: 1fr; }
 }

.ahx .ahx-bar-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.ahx .ahx-bar-grid img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }

.ahx .ahx-bar-side{ display: grid; gap: 1.2rem; align-content: center; }

.ahx .ahx-bar-side .ahx-bar-copy{ color: var(--ink-2); }

.ahx .ahx-bar-pours{ display: grid; gap: .6rem; }

.ahx .ahx-bar-pours h3{ font-size: var(--s--1); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }

.ahx .ahx-bar-hours-card{
  border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--white); padding: 1.1rem 1.3rem;
  display: grid; gap: .3rem;
}

.ahx .ahx-bar-hours-card strong{ font-weight: 500; color: var(--green); font-size: var(--s-1); }

.ahx .ahx-bar-hours-card span{ font-size: var(--s--1); color: var(--ink-3); }
/* ----------------------------------------------------------------- GALLERY */
/* static grid, not a carousel: a slider bundle is a real payload cost and
   the interaction is not the point here */
/* 8 photos, so only 2 and 4 columns divide evenly. auto-fit was producing 3
   columns at 768px and 5 at 1280px, both leaving a ragged final row. */
.ahx .ahx-gallery{ display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }

@media (min-width: 760px){
.ahx .ahx-gallery{ grid-template-columns: repeat(4, 1fr); }
 }

.ahx .ahx-gallery img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
/* --------------------------------------------------------------------- FAQ */
.ahx .ahx-faq{ display: grid; max-width: 62rem; }

.ahx .ahx-faq details{ border-top: 1px solid var(--line); }

.ahx .ahx-faq details:last-of-type{ border-bottom: 1px solid var(--line); }

.ahx .ahx-faq summary{
  cursor: pointer; list-style: none; position: relative;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 700; font-size: var(--s-1); line-height: 1.35;
}

.ahx .ahx-faq summary::-webkit-details-marker{ display: none; }

.ahx .ahx-faq summary::after{
  content: "+"; position: absolute; right: .4rem; top: .95rem;
  font-size: 1.6rem; font-weight: 400; color: var(--green); line-height: 1;
}

.ahx .ahx-faq details[open] summary::after{ content: "\2013"; }

.ahx .ahx-faq details p{ color: var(--ink-2); padding-bottom: 1.25rem; max-width: 64ch; }
/* ---------------------------------------------------------------- LOCATION */
/* 3 cards: one column or three, never two — two leaves a lone card on row 2 */
.ahx .ahx-place{ display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem); }

@media (min-width: 900px){
.ahx .ahx-place{ grid-template-columns: repeat(3, 1fr); }
 }

.ahx .ahx-place-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem; display: grid; gap: .6rem; align-content: start; }

.ahx .ahx-place-card h3{ font-size: var(--s-1); }

.ahx .ahx-place-card p{ color: var(--ink-2); font-size: var(--s--1); }

.ahx .ahx-place-card a{ color: var(--green); text-decoration: none; font-weight: 500; font-size: var(--s--1); }

.ahx .ahx-place-card a:hover{ text-decoration: underline; }
/* ------------------------------------------------------------------- FORM */
.ahx .ahx-book{ display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }

@media (max-width: 900px){
.ahx .ahx-book{ grid-template-columns: 1fr; }
 }

.ahx .ahx-book h2{ font-size: var(--s-3); }

.ahx .ahx-book-copy{ color: var(--ink-2); margin-top: 1rem; }

.ahx .ahx-form{ display: grid; gap: 1rem; }

.ahx .ahx-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 560px){
.ahx .ahx-form-row{ grid-template-columns: 1fr; }
 }

.ahx .ahx-form label{ display: grid; gap: .35rem; }

.ahx .ahx-form span{ font-size: var(--s--1); font-weight: 500; }

.ahx .ahx-form input, .ahx .ahx-form select, .ahx .ahx-form textarea{
  font-family: var(--sans); font-size: var(--s-0); color: var(--ink);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 8px; padding: .75em .9em; width: 100%;
}

.ahx .ahx-form textarea{ min-height: 6.5rem; resize: vertical; }

.ahx .ahx-form-note{ font-size: var(--s--1); color: var(--ink-3); }
/* -------------------------------------------------------------------- NOTE */
.ahx .ahx-note{
  margin-top: 1.4rem;
  font-size: var(--s--1); line-height: 1.65;
  color: var(--green); background: var(--cream);
  border-left: 3px solid var(--green); border-radius: 0 6px 6px 0;
  padding: .9rem 1.1rem; max-width: 72ch;
}
/* ----------------------------------------------------------------- MOTION */
@media (prefers-reduced-motion: reduce){
.ahx{ scroll-behavior: auto; }

.ahx *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }

}/* End custom CSS */