/* ============================================================
   HANA PREMIUM PASS — brand-canon design system on the homepage
   Canon: Hana_Brand_Style_Guide.md
   Marcellus (display serif) + Jost (body sans) · Onyx/Bone
   Hairline rules, solid fields, restraint. One motion moment.
   ============================================================ */

:root {
  --onyx: #0A0908;
  --black: #060504;
  --charcoal: #1A1817;
  --graphite: #28201D;
  --smoke: #3A3835;
  --steel: #6B6660;
  --ash: #8E887F;
  --mist: #B5AFA6;
  --bone: #F1ECE2;
  --paper: #FAF7F1;
  --garnet: #7A1B1B;
  --crimson: #D63027;
  --ember: #E85045;
  --rule: rgba(241, 236, 226, 0.16);
  --rule-soft: rgba(241, 236, 226, 0.10);
  --rule-strong: rgba(241, 236, 226, 0.32);
  --serif: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- 1. TYPE FOUNDATION ---------- */
/* Display: every heading in Marcellus, tracked, weight 400. */
html body #dm h1, html body #dm h2, html body #dm h3,
html body #dm h4, html body #dm h5,
html body #dm h1 *, html body #dm h2 *, html body #dm h3 *,
html body #dm h4 *, html body #dm h5 * {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
html body #dm h1 { line-height: 1.28 !important; }
html body #dm h2, html body #dm h3 { line-height: 1.3 !important; }

/* Body: Jost Light, PROPER CASE restored (the all-caps body was CSS). */
html body #dm .dmNewParagraph p,
html body #dm .dmNewParagraph p span,
html body #dm .dmNewParagraph p a {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: 0.015em !important;
}
html body #dm .dmNewParagraph p { line-height: 1.8 !important; }
html body #dm .dmNewParagraph p strong,
html body #dm .dmNewParagraph p b {
  font-weight: 500 !important;
}

/* Soften body ink one step: bone for leads, mist for long copy */
html body #dm .dmNewParagraph p span[style*="color: rgb(255, 255, 255)"],
html body #dm .dmNewParagraph p span[style*="color:#fff"] {
  color: var(--bone) !important;
}
/* long-copy sections read in mist — always legible on onyx */
html body #dm .u_1525345135 .dmNewParagraph p span {
  color: var(--mist) !important;
}

/* Buttons + nav keep the sans in caps — but never touch icon glyphs
   (the dropdown carets render from an icon font) */
html body #dm .dmButtonLink,
html body #dm .dmButtonLink .text,
html body #dm .unifiednav a,
html body #dm .unifiednav a span:not(.icon):not([class*="icon-"]) {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}

/* dropdown carets: unmissable — but ONLY on items that really have a
   dropdown. Full opacity, sized up, flips on hover. */
html body #dm .unifiednav a.unifiednav__item_has-sub-nav .icon-angle-down {
  opacity: 1 !important;
  color: var(--bone) !important;
  font-size: 13px !important;
  margin-left: 7px !important;
  display: inline-block !important;
  vertical-align: middle;
  transition: transform 0.3s ease;
}
html body #dm .unifiednav .unifiednav__item-wrap:hover > a.unifiednav__item_has-sub-nav .icon-angle-down,
html body #dm .unifiednav a.unifiednav__item_has-sub-nav:hover .icon-angle-down {
  transform: rotate(180deg);
}

/* ---------- 2. HERO ---------- */
/* Tagline into Marcellus; keep Joseph's dim-intro / bright-P+P treatment */
#axisPremiumHero { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
html body #dm .u_1716942098 h1 span { letter-spacing: 0.1em !important; }

/* hero category strip: quiet tracked eyebrow */
html body #dm .u_1716942098 h1 + * span,
html body #dm .u_1716942098 .dmNewParagraph p span {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  color: var(--mist) !important;
}

/* ---------- 3. SECTION RHYTHM ---------- */
/* Hairline rules give the page architecture — "the room dimmed" */
html body #dm .u_1539611994,          /* OUR CLIENTELE */
html body #dm .u_1525345135,          /* HOW WE WORK */
html body #dm .u_1301125718,          /* WHAT'S POSSIBLE */
html body #dm .u_1227615230,          /* OUR EXPERTISE  */
html body #dm .u_1357417757,          /* RESONANCE SCORE */
html body #dm .u_1661639839,          /* PARTNERSHIP */
html body #dm .u_1874311205 {         /* TESTIMONIALS */
  position: relative;
}
html body #dm .u_1539611994::before,
html body #dm .u_1525345135::before,
html body #dm .u_1301125718::before,
html body #dm .u_1227615230::before,
html body #dm .u_1661639839::before,
html body #dm .u_1874311205::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 48px));
  height: 1px;
  background: var(--rule-soft);
}

/* ---------- 4. CARDS: flat charcoal panels, square, left-aligned ---------- */
/* WHAT'S POSSIBLE trio + EXPERTISE grid + testimonial boxes */
html body #dm .u_1920464288 [class*="dmRespCol"] > .dmRespColInner,
html body #dm .u_1677196171 [class*="dmRespCol"] > .dmRespColInner {
  border-radius: 0 !important;
}
/* Duda draws card borders on inner wrappers with radius — flatten all */
html body #dm .u_1920464288 [style*="border"],
html body #dm .u_1677196171 [style*="border"],
html body #dm .u_1041319664 [style*="border"],
html body #dm .u_1646255165 [style*="border"],
html body #dm .u_1548519196 [style*="border"] {
  border-radius: 0 !important;
  border-color: var(--rule) !important;
  background-color: rgba(26, 24, 23, 0.55) !important;
}

/* Card headings: consistent scale, bigger + bold (Joseph 2026-07-15) */
html body #dm .u_1677196171 h4, html body #dm .u_1677196171 h3,
html body #dm .u_1677196171 h4 *, html body #dm .u_1677196171 h3 * {
  font-size: 27px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.35 !important;
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}
html body #dm .u_1920464288 h3, html body #dm .u_1920464288 h2,
html body #dm .u_1920464288 h3 *, html body #dm .u_1920464288 h2 * {
  font-size: 29px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.35 !important;
  color: #fff !important;
}

/* Card body copy slightly quieter */
html body #dm .u_1920464288 .dmNewParagraph p span,
html body #dm .u_1677196171 .dmNewParagraph p span {
  color: var(--mist) !important;
  font-size: 15.5px !important;
}

/* ---------- 5. LINKS: crimson editorial, not default underline ---------- */
html body #dm .dmNewParagraph p a,
html body #dm .dmNewParagraph p a span {
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 14.5px !important;
  color: var(--crimson) !important;
}
html body #dm .dmNewParagraph p a {
  text-decoration: none !important;
  border-bottom: 1px solid rgba(214, 48, 39, 0.4);
  padding-bottom: 3px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
html body #dm .dmNewParagraph p a:hover {
  border-bottom-color: var(--ember);
}
html body #dm .dmNewParagraph p a:hover,
html body #dm .dmNewParagraph p a:hover span {
  color: var(--ember) !important;
}

/* ---------- 6. BUTTONS: square editorial, bone-fill hover ---------- */
html body #dm .dmButtonLink {
  border-radius: 2px !important;
  border: 1px solid var(--rule-strong) !important;
  background: transparent !important;
  transition: background-color 0.35s ease, border-color 0.35s ease !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}
html body #dm .dmButtonLink .text {
  font-size: 13px !important;
  white-space: nowrap !important;
  display: inline !important;
  transition: color 0.35s ease !important;
}
/* Duda sets per-button width caps with heavier selectors — outrank them so
   the label always fits on one line and the button shrink-wraps its text */
html body #dm #dm_content a.dmButtonLink.dmButtonLink.dmButtonLink {
  width: fit-content !important;
  max-width: none !important;
  min-width: 0 !important;
  display: block !important;
}
html body #dm #dm_content a.dmButtonLink.dmButtonLink.dmButtonLink.align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}
html body #dm .dmButtonLink:hover {
  background: var(--bone) !important;
  border-color: var(--bone) !important;
}
html body #dm .dmButtonLink:hover .text,
html body #dm .dmButtonLink:hover [class*="icon"] {
  color: var(--onyx) !important;
}
/* nav pill keeps its rounded shape but adopts the hover; sized to its
   narrow header column so the label never wraps */
html body #dm .u_1035742428 {
  border-radius: 24px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
html body #dm .u_1035742428 .text {
  font-size: 11.5px !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
}
.axis-mtalk { border-radius: 21px !important; font-family: var(--sans); }

/* ---------- 7. TESTIMONIALS: hairline left rule, no boxes ---------- */
html body #dm .u_1041319664 [style*="border"],
html body #dm .u_1646255165 [style*="border"],
html body #dm .u_1548519196 [style*="border"] {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: 1px solid var(--rule) !important;
  background-color: transparent !important;
}
html body #dm .u_1041319664 .dmNewParagraph p span,
html body #dm .u_1646255165 .dmNewParagraph p span,
html body #dm .u_1548519196 .dmNewParagraph p span {
  color: var(--mist) !important;
  font-size: 16px !important;
}

/* ---------- 8. REVEAL ON SCROLL (JS adds .axis-prep, then .axis-in) ---------- */
.axis-prep {
  opacity: 0;
  transform: translateY(18px);
}
.axis-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .axis-prep { opacity: 1 !important; transform: none !important; }
}

/* ---------- 9. THE HANA EXPERIENCE: kill the twinkle canvas ---------- */
/* "EXPERIENCE" was a canvas-rendered sparkle widget in Montserrat 800 —
   the single most template-era element on the page. Real type instead. */
html body #dm .wocode-text-twinkle .b-canvas { display: none !important; }
html body #dm .wocode-text-twinkle .twinkle-line::after {
  content: "EXPERIENCE";
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6.2vw, 88px);
  letter-spacing: 0.14em;
  color: var(--bone);
  text-align: center;
  line-height: 1.15;
}
/* THE HANA line above it: match the composition */
html body #dm .u_1099336187 h2,
html body #dm .u_1099336187 h2 * {
  font-size: clamp(30px, 3.4vw, 48px) !important;
  letter-spacing: 0.32em !important;
  color: var(--mist) !important;
}
/* SINCE 2014 → tracked eyebrow */
html body #dm .u_1099336187 p:first-of-type,
html body #dm .u_1099336187 p:first-of-type * {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.42em !important;
  text-transform: uppercase !important;
  color: var(--ash) !important;
}
/* the manifesto paragraph: quiet editorial statement */
html body #dm .u_1099336187 p.size-24,
html body #dm .u_1099336187 p.size-24 * {
  font-size: 19px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.02em !important;
  color: var(--bone) !important;
  font-weight: 300 !important;
  text-transform: none !important;
}
html body #dm .u_1099336187 p.size-24 {
  max-width: 780px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 10. SQUARE THE CARDS (radius lives on the columns) ---------- */
html body #dm .u_1920464288 [class*="dmRespCol"],
html body #dm .u_1677196171 [class*="dmRespCol"],
html body #dm .u_1677196171 .thumbnailInnerWrapper,
html body #dm .u_1677196171 [class*="thumbnail"] {
  border-radius: 0 !important;
}
html body #dm .u_1920464288 [class*="dmRespCol"] {
  border-color: var(--rule) !important;
  background-color: rgba(26, 24, 23, 0.5) !important;
}
html body #dm .u_1677196171 [class*="dmRespCol"] {
  border-color: var(--rule) !important;
}

/* testimonials: boxes → single hairline left rule */
html body #dm .u_1041319664 [class*="dmRespCol"],
html body #dm .u_1646255165 [class*="dmRespCol"],
html body #dm .u_1548519196 [class*="dmRespCol"] {
  border-radius: 0 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: 1px solid var(--rule) !important;
  background-color: transparent !important;
}

/* ---------- 11. EXPERTISE CAPTIONS: one scale, quiet body ---------- */
html body #dm .u_1677196171 .caption-title,
html body #dm .u_1677196171 .caption-title * {
  font-size: 27px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.35 !important;
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}
html body #dm .u_1677196171 .caption-text p,
html body #dm .u_1677196171 .caption-text p * {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--mist) !important;
  text-transform: none !important;
}
/* caption pill buttons → editorial text links */
html body #dm .caption-button {
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(214, 48, 39, 0.4) !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 14.5px !important;
  color: var(--crimson) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- 12. PAGE-SPECIFIC FIXES (Joseph 2026-07-15 review) ---------- */
/* buttons: label needs air — Duda page rules zero the padding */
html body #dm #dm_content a.dmButtonLink.dmButtonLink.dmButtonLink {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* hana-lights: hero title was crammed under the nav */
html body #dm .u_dmStyle_template_hana-lights div.u_1031869533.u_1031869533 { padding-top: 104px !important; }

/* hana-luaus: lei quote — photo stays visible through the row (no painted
   panel); position pinned so scroll drift never exposes the fallback color,
   and the fallback itself is onyx, not Duda's gray. The 60% black overlay
   comes from the section's own hasBackgroundOverlay layer. */
html body #dm .u_dmStyle_template_hana-luaus div.u_1515829705.u_1515829705 {
  background-color: var(--onyx) !important;
  background-position: 50% 18% !important; /* crop keeps every face in frame */
  background-attachment: scroll !important;
}
html body #dm .u_dmStyle_template_hana-luaus div.u_1515829705.u_1515829705 > .dmRespColsWrapper {
  background: transparent !important;
}
html body #dm .u_dmStyle_template_hana-luaus div.u_1515829705.u_1515829705::before {
  background-color: #000 !important;
  opacity: 0.6 !important;
}

/* hana-heat package buttons: solid crimson on the light cards, inverted
   bone on the red center card (red bg -> inverted button, same as cirque) */
html body #dm .u_dmStyle_template_hana-heat a.u_1314430877.dmButtonLink,
html body #dm .u_dmStyle_template_hana-heat a.u_1130307788.dmButtonLink {
  background: var(--crimson) !important;
  border: 1px solid var(--crimson) !important;
  border-radius: 2px !important;
}
html body #dm .u_dmStyle_template_hana-heat a.u_1314430877.dmButtonLink .text,
html body #dm .u_dmStyle_template_hana-heat a.u_1130307788.dmButtonLink .text {
  color: #ffffff !important;
}
html body #dm .u_dmStyle_template_hana-heat a.u_1314430877.dmButtonLink:hover,
html body #dm .u_dmStyle_template_hana-heat a.u_1130307788.dmButtonLink:hover {
  background: var(--garnet) !important;
  border-color: var(--garnet) !important;
}
html body #dm .u_dmStyle_template_hana-heat a.u_1561503628.dmButtonLink {
  background: var(--bone) !important;
  border: 1px solid var(--bone) !important;
  border-radius: 2px !important;
}
html body #dm .u_dmStyle_template_hana-heat a.u_1561503628.dmButtonLink .text {
  color: var(--garnet) !important;
}
html body #dm .u_dmStyle_template_hana-heat a.u_1561503628.dmButtonLink:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* hana-luaus package buttons: solid deep green matching the page */
html body #dm .u_dmStyle_template_hana-luaus a.u_1181445364.dmButtonLink,
html body #dm .u_dmStyle_template_hana-luaus a.u_1676018426.dmButtonLink,
html body #dm .u_dmStyle_template_hana-luaus a.u_1654578548.dmButtonLink {
  background: #113311 !important;
  border: 1px solid #113311 !important;
  border-radius: 2px !important;
}
html body #dm .u_dmStyle_template_hana-luaus a.u_1181445364.dmButtonLink .text,
html body #dm .u_dmStyle_template_hana-luaus a.u_1676018426.dmButtonLink .text,
html body #dm .u_dmStyle_template_hana-luaus a.u_1654578548.dmButtonLink .text {
  color: var(--bone) !important;
}
html body #dm .u_dmStyle_template_hana-luaus a.u_1181445364.dmButtonLink:hover,
html body #dm .u_dmStyle_template_hana-luaus a.u_1676018426.dmButtonLink:hover,
html body #dm .u_dmStyle_template_hana-luaus a.u_1654578548.dmButtonLink:hover {
  background: #0b260b !important;
  border-color: #0b260b !important;
}

/* hana-cirque package buttons: solid crimson on the light cards, inverted
   bone on the red center card so every button reads at a glance */
html body #dm .u_dmStyle_template_hana-cirque a.u_1323584851.dmButtonLink,
html body #dm .u_dmStyle_template_hana-cirque a.u_1785120541.dmButtonLink {
  background: var(--crimson) !important;
  border: 1px solid var(--crimson) !important;
  border-radius: 2px !important;
}
html body #dm .u_dmStyle_template_hana-cirque a.u_1323584851.dmButtonLink .text,
html body #dm .u_dmStyle_template_hana-cirque a.u_1785120541.dmButtonLink .text {
  color: #ffffff !important;
}
html body #dm .u_dmStyle_template_hana-cirque a.u_1323584851.dmButtonLink:hover,
html body #dm .u_dmStyle_template_hana-cirque a.u_1785120541.dmButtonLink:hover {
  background: var(--garnet) !important;
  border-color: var(--garnet) !important;
}
html body #dm .u_dmStyle_template_hana-cirque a.u_1777366645.dmButtonLink {
  background: var(--bone) !important;
  border: 1px solid var(--bone) !important;
  border-radius: 2px !important;
}
html body #dm .u_dmStyle_template_hana-cirque a.u_1777366645.dmButtonLink .text {
  color: var(--garnet) !important;
}
html body #dm .u_dmStyle_template_hana-cirque a.u_1777366645.dmButtonLink:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* ---------- 13. BLOG INDEX (Joseph 2026-07-15 round 4) ---------- */
/* hero title vertically centered: space above the title matches the
   space below the subtitle (both ~344px) */
html body #dm .u_dmStyle_template_blog div.u_1243667655.u_1243667655 {
  padding-top: 334px !important;
}
/* the float layout left uneven holes — a real grid closes every gap and
   makes image-to-title spacing identical on every card */
html body #dm .u_dmStyle_template_blog .u_1213107879 > .inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 56px 44px !important;
}
/* the empty pager marker span must not become a blank grid cell */
html body #dm .u_dmStyle_template_blog .u_1213107879 > .inner > span:empty {
  display: none !important;
}
html body #dm .u_dmStyle_template_blog .u_1213107879 .postArticle {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
}
html body #dm .u_dmStyle_template_blog .u_1213107879 .postArticle.axis-hide {
  display: none !important;
}
html body #dm .u_dmStyle_template_blog .u_1213107879 .blogImgLink {
  display: block !important;
  height: 300px !important;
  overflow: hidden !important;
}
html body #dm .u_dmStyle_template_blog .u_1213107879 .blogImg {
  height: 100% !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
}
html body #dm .u_dmStyle_template_blog .u_1213107879 .blogImg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html body #dm .u_dmStyle_template_blog .u_1213107879 .postTextContainer {
  padding-top: 24px !important;
}
html body #dm .u_dmStyle_template_blog .u_1213107879 .postTitle,
html body #dm .u_dmStyle_template_blog .u_1213107879 .postTitle h3 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body #dm .u_dmStyle_template_blog .u_1213107879 .postDescription {
  font-size: 17px !important;
  line-height: 1.7 !important;
}
@media (max-width: 767px) {
  html body #dm .u_dmStyle_template_blog .u_1213107879 > .inner {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  html body #dm .u_dmStyle_template_blog .u_1213107879 .blogImgLink {
    height: 220px !important;
  }
}
/* category toggles under the search bar */
.axis-blog-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 26px 20px 6px;
}
.axis-blog-cats button {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.axis-blog-cats button:hover {
  border-color: var(--bone);
}
.axis-blog-cats button.axis-on {
  background: var(--bone);
  color: var(--onyx);
  border-color: var(--bone);
}
.axis-blog-noresults {
  display: none;
  text-align: center;
  color: var(--mist);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  padding: 40px 20px;
}

/* ---------- 14. QUIET DETAILS ---------- */
::selection { background: var(--garnet); color: var(--bone); }