/* ==========================================================================
   Hues & Harmony Interiors  |  hh.css  v1.0
   Design system for the Elementor (Basic) build on Hello Elementor child.
   Tokens and component specs follow "Handover" and "Code Handover" v1.
   Every layout class is prefixed hh- and is applied in Elementor via
   Advanced > CSS Classes on containers and widgets, or lives inside HTML
   widgets. No Elementor Pro features are required.
   ========================================================================== */

:root {
  /* colour */
  --c-canvas: #FBFBFA;        /* Alabaster White */
  --c-canvas-2: #F4F4F3;      /* Gallery Grey */
  --c-ink: #111111;           /* Obsidian Black */
  --c-ink-2: #60605E;         /* Muted Charcoal */
  --c-accent: #9A7B56;        /* Warm Bronze */
  --c-accent-2: #C2A683;      /* Antique Brass */
  --c-inactive: #9C9B98;
  --c-rule-soft: #DEDDD9;
  --c-header-bg: rgba(251, 251, 250, 0.94);
  --c-shadow: rgba(17, 17, 17, 0.30);
  /* type */
  --f-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --t-h1: clamp(40px, 4.44vw, 64px);
  --t-h2-band: clamp(32px, 3.6vw, 52px);
  --t-h2-caps: clamp(28px, 2.78vw, 40px);
  --t-tab: 32px; --t-pillar: 22px; --t-input: 26px; --t-textarea: 22px;
  --t-body: 15px; --t-body-s: 14px; --t-nav: 12px; --t-overline: 12px;
  --t-micro: 11px; --t-micro-s: 10px; --t-tag: 8px;
  --ls-overline: .20em; --ls-nav: .14em; --ls-btn: .16em; --ls-caps: .30em;
  /* layout */
  --page-max: 1440px;
  --margin-x: clamp(24px, 11.11vw, 160px);
  --gutter: 32px;
  --header-h: 80px;
  --section-y: 160px;
  --rule: 0.5px;
  /* motion */
  --d-fast: 300ms; --d-tab: 400ms; --d-btn: 500ms; --d-fade: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-tab: 0ms; --d-btn: 0ms; --d-fade: 0ms; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body.hh-site {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hh-site *, .hh-site *::before, .hh-site *::after { box-sizing: border-box; }
.hh-site a { color: inherit; text-decoration: none; transition: color var(--d-fast) ease; }
.hh-site a:hover { color: var(--c-accent-2); }
.hh-site ::selection { background: var(--c-accent-2); color: var(--c-ink); }
.hh-site img { display: block; max-width: 100%; height: auto; }
.hh-site :focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }
.hh-site h1, .hh-site h2, .hh-site h3, .hh-site h4 { margin: 0; font-weight: 300; }
.hh-site p { margin: 0; }
.hh-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Neutralise Elementor container defaults so hh- classes own the layout. */
.hh-site .e-con { --padding-block-start: 0; --padding-block-end: 0; --padding-inline-start: 0; --padding-inline-end: 0; --gap: 0; --row-gap: 0; --column-gap: 0; --margin-block-start: 0; --margin-block-end: 0; }
.hh-site .e-con > .e-con-inner { padding: 0; max-width: none; }
.hh-site .elementor-widget:not(:last-child) { margin-block-end: 0; }
.hh-site .elementor-widget-container { margin: 0; }
.hh-site .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.hh-wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--margin-x); }
.hh-section { padding-block: var(--section-y); }
.hh-section--welcome { padding-block: 120px; }
.hh-grid-12 { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.hh-grid-12 > * { min-width: 0; }
.hh-col-1-6 { grid-column: 1 / 7; }
.hh-col-7-12 { grid-column: 7 / 13; }
.hh-col-1-4 { grid-column: 1 / 5; }
.hh-col-5-8 { grid-column: 5 / 9; }
.hh-col-9-12 { grid-column: 9 / 13; }
.hh-col-5-12 { grid-column: 5 / 13; }
.hh-col-3-10 { grid-column: 3 / 11; }
.hh-col-1-7 { grid-column: 1 / 8; }
.hh-col-1-5 { grid-column: 1 / 6; }
.hh-col-7-8 { grid-column: 7 / 9; }
.hh-col-9-10 { grid-column: 9 / 11; }
.hh-col-11-12 { grid-column: 11 / 13; }
.hh-col-1-12 { grid-column: 1 / 13; }
.hh-stack { display: flex !important; flex-direction: column; }
.hh-center { text-align: center; align-items: center; }
.hh-rule-top { border-top: var(--rule) solid var(--c-accent-2); }
.hh-bg-grey { background: var(--c-canvas-2) !important; }
.hh-mb-96, .hh-site .elementor-widget.hh-mb-96 { margin-block-end: 96px !important; }
.hh-pb-160 { padding-bottom: var(--section-y); }

/* --------------------------------------------------------------------------
   Typography components
   -------------------------------------------------------------------------- */
.hh-overline, .hh-overline .elementor-heading-title {
  font-family: var(--f-sans) !important; font-weight: 400 !important; font-size: var(--t-overline) !important;
  letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--c-ink-2); line-height: 1.6;
}
.hh-label, .hh-label .elementor-heading-title {
  font-family: var(--f-sans) !important; font-weight: 400 !important; font-size: var(--t-micro) !important;
  letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); line-height: 1.4;
}
.hh-label--s, .hh-label--s .elementor-heading-title { font-size: var(--t-micro-s) !important; }
.hh-h1 .elementor-heading-title, .hh-h1 {
  font-family: var(--f-serif) !important; font-weight: 300 !important; font-size: var(--t-h1) !important;
  line-height: 1.08 !important; letter-spacing: -0.01em; color: var(--c-ink); max-width: 12ch;
}
.hh-h1 em, .hh-h2-band em, .hh-h1 .elementor-heading-title em { font-style: italic; color: var(--c-accent); }
.hh-h1--wide .elementor-heading-title, .hh-h1--wide { max-width: 16ch; }
.hh-h1--center .elementor-heading-title, .hh-h1--center { max-width: none; margin-inline: auto; }
.hh-h2-caps .elementor-heading-title, .hh-h2-caps {
  font-family: var(--f-serif) !important; font-weight: 400 !important; font-size: var(--t-h2-caps) !important;
  letter-spacing: var(--ls-caps); text-transform: uppercase; text-align: center; line-height: 1.2 !important; color: var(--c-ink);
}
.hh-h2-band .elementor-heading-title, .hh-h2-band {
  font-family: var(--f-serif) !important; font-weight: 300 !important; font-size: var(--t-h2-band) !important;
  line-height: 1.2 !important; color: var(--c-canvas); text-align: center; max-width: 24ch; margin-inline: auto;
}
.hh-h2-band em, .hh-h2-band .elementor-heading-title em { color: var(--c-accent-2); }
.hh-h3 .elementor-heading-title, .hh-h3 {
  font-family: var(--f-serif) !important; font-weight: 300 !important; font-size: var(--t-tab) !important; line-height: 1.1 !important; color: var(--c-ink);
}
.hh-body, .hh-body p { font-family: var(--f-sans); font-weight: 300; font-size: var(--t-body); line-height: 1.8; color: var(--c-ink-2); max-width: 44ch; }
.hh-body--wide, .hh-body--wide p { max-width: 52ch; }
.hh-body--center, .hh-body--center p { margin-inline: auto; text-align: center; }
.hh-serif, .hh-serif p { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-pillar); line-height: 1.5; color: var(--c-ink); }
.hh-serif--light, .hh-serif--light p { font-weight: 300; }

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */
.hh-wordmark { display: inline-flex; flex-direction: column; gap: 4px; line-height: 1; color: var(--c-ink); }
.hh-wordmark:hover { color: var(--c-ink); }
.hh-wordmark__name { font-family: var(--f-serif); text-transform: uppercase; display: flex; align-items: baseline; gap: .35em; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: clamp(.1em, .9vw, .22em); }
.hh-wordmark .w-hues { font-weight: 500; }
.hh-wordmark .w-amp { font-style: italic; font-weight: 300; color: var(--c-accent); font-size: 1.35em; letter-spacing: 0; text-transform: none; position: relative; top: .06em; }
.hh-wordmark .w-harmony { font-weight: 300; }
.hh-wordmark__tag { font-family: var(--f-sans); font-size: var(--t-tag); letter-spacing: .3em; text-transform: uppercase; color: var(--c-ink-2); display: flex; align-items: center; gap: 8px; }
.hh-wordmark__tag .rule { display: inline-block; width: 20px; height: var(--rule); background: var(--c-accent-2); }
.hh-wordmark--footer { gap: 6px; }
.hh-wordmark--footer .hh-wordmark__name { font-size: 26px; letter-spacing: .22em; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.hh-btn .elementor-button, .hh-btn .elementor-button:hover, .hh-btn .elementor-button:focus, a.hh-btn, button.hh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-sans) !important; font-weight: 400 !important; font-size: 12px !important; letter-spacing: var(--ls-btn) !important;
  text-transform: uppercase; line-height: 1 !important; padding: 20px 40px !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
  background-color: var(--c-accent) !important; color: var(--c-canvas) !important; cursor: pointer;
  transition: background-color var(--d-btn) ease, color var(--d-btn) ease !important;
}
.hh-btn .elementor-button:hover, a.hh-btn:hover, button.hh-btn:hover { background-color: var(--c-accent-2) !important; color: var(--c-ink) !important; }
.hh-btn .elementor-button-content-wrapper { display: inline; }
.hh-btn--nav .elementor-button, a.hh-btn--nav { font-size: clamp(9px, .8vw, 11px) !important; padding: 14px clamp(14px, 1.7vw, 24px) !important; }
.hh-btn--nav .elementor-button:hover, a.hh-btn--nav:hover { color: var(--c-canvas) !important; }
.hh-btn--inverse .elementor-button, a.hh-btn--inverse { background-color: var(--c-canvas) !important; color: var(--c-ink) !important; padding: 20px 44px !important; text-align: center; line-height: 1.5 !important; }
.hh-btn--inverse .elementor-button:hover, a.hh-btn--inverse:hover { background-color: var(--c-accent-2) !important; color: var(--c-ink) !important; }
.hh-btn--block, button.hh-btn--block { width: 100%; padding: 24px !important; letter-spacing: .18em !important; }
.hh-link-arrow { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 4px; border-bottom: var(--rule) solid var(--c-ink); font-family: var(--f-sans); font-size: 12px; letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--c-ink); transition: color var(--d-fast) ease, border-color var(--d-fast) ease; }
.hh-link-arrow:hover { color: var(--c-accent-2); border-color: var(--c-accent-2); }
.hh-link-arrow .arrow { font-family: var(--f-serif); font-size: 18px; line-height: 1; }
.hh-cta-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 40px; }

/* --------------------------------------------------------------------------
   C1 Header (sticky)
   -------------------------------------------------------------------------- */
.hh-header {
  position: -webkit-sticky !important; position: sticky !important; top: 0; z-index: 50;
  background: var(--c-header-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: var(--rule) solid var(--c-accent-2);
}
body.admin-bar .hh-header { top: 32px; }
.hh-header__row { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; height: var(--header-h); gap: clamp(12px, 2vw, 32px); }
.hh-header__row > .elementor-widget { width: auto; flex: 0 0 auto; }
.hh-header__row > .elementor-widget.hh-nav-wrap { flex: 1 1 auto; min-width: 0; }
.hh-nav { display: flex; justify-content: center; align-items: center; gap: clamp(10px, 1.8vw, 32px); margin: 0; padding: 0; list-style: none; }
.hh-nav a { font-family: var(--f-sans); font-weight: 400; font-size: clamp(9px, .85vw, 12px); letter-spacing: clamp(.06em, .6vw, .14em); text-transform: uppercase; white-space: nowrap; color: var(--c-ink); }
.hh-nav a:hover, .hh-nav a[aria-current="page"] { color: var(--c-accent-2); }

/* --------------------------------------------------------------------------
   C2 Hero
   -------------------------------------------------------------------------- */
.hh-hero { min-height: 90vh; align-items: stretch; }
.hh-hero__text { display: flex !important; flex-direction: column; justify-content: center; padding-block: 96px; gap: 0; }
.hh-hero__text .hh-overline { margin-bottom: 40px; }
.hh-hero__text .hh-h1 { margin-bottom: 40px; }
.hh-hero__text .hh-body { margin-bottom: 56px; }
.hh-hero__image { position: relative; min-height: 60vh; }
.hh-hero__image .elementor-widget, .hh-hero__image .elementor-widget-container { height: 100%; }
.hh-cover img { width: 100%; height: 100%; min-height: 60vh; object-fit: cover; }
.hh-hero__image .hh-cover { position: absolute; inset: 0; }
.hh-hero__image .hh-cover img { position: absolute; inset: 0; height: 100%; }

/* --------------------------------------------------------------------------
   Image frame (4:5 mat)
   -------------------------------------------------------------------------- */
.hh-frame, .hh-frame .elementor-widget-container { width: 100%; }
.hh-frame .elementor-widget-container, .hh-frame.is-figure { aspect-ratio: 4 / 5; border: var(--rule) solid var(--c-accent-2); padding: 12px; background: var(--c-canvas-2); overflow: hidden; }
.hh-frame img { width: 100%; height: 100%; object-fit: cover; }
.hh-frame .elementor-widget-container > a, .hh-frame .elementor-widget-container > figure { display: block; height: 100%; margin: 0; }

/* --------------------------------------------------------------------------
   C3 Pillars
   -------------------------------------------------------------------------- */
.hh-pillars .hh-h2-caps { margin-bottom: 96px; }
.hh-pillars__grid { row-gap: 64px; }
.hh-card { display: flex !important; flex-direction: column; gap: 32px; }
.hh-card .hh-serif, .hh-card .hh-serif p { max-width: none; }

/* Ethos long-form rows */
.hh-ethos-row { row-gap: 48px; padding-block: 64px; border-top: var(--rule) solid var(--c-accent-2); }
.hh-ethos-row:last-child { border-bottom: var(--rule) solid var(--c-accent-2); }
.hh-ethos-row__text { display: flex !important; flex-direction: column; gap: 24px; justify-content: center; }
.hh-ethos-row__text .hh-body, .hh-ethos-row__text .hh-body p { max-width: 48ch; }

/* Method steps */
.hh-steps { row-gap: 64px; }
.hh-step { display: flex !important; flex-direction: column; gap: 20px; padding-top: 24px; border-top: var(--rule) solid var(--c-accent-2); }
.hh-step .hh-body, .hh-step .hh-body p { max-width: none; }

/* --------------------------------------------------------------------------
   C4 Moodboard engine
   -------------------------------------------------------------------------- */
.hh-mood { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; align-items: stretch; }
.hh-mood__controls { grid-column: 1 / 5; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.hh-mood__display { grid-column: 5 / 13; min-width: 0; }
.hh-mood__tabs { display: flex; flex-direction: column; margin: 0; padding: 0; }
.hh-mood__tab { all: unset; display: flex; align-items: baseline; gap: 20px; padding: 24px 0; border-bottom: var(--rule) solid #D9CFC0; cursor: pointer; color: #A7A196; transition: color var(--d-tab) ease; }
.hh-mood__tab:first-child { border-top: var(--rule) solid #D9CFC0; }
.hh-mood__tab:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }
.hh-mood__num { font-family: var(--f-sans); font-size: var(--t-micro); letter-spacing: .2em; min-width: 28px; }
.hh-mood__name { font-family: var(--f-serif); font-weight: 300; font-size: var(--t-tab); line-height: 1.1; }
.hh-mood__tab.is-active { color: var(--c-ink); }
.hh-mood__tab.is-active .hh-mood__name { font-style: italic; }
.hh-mood__desc { margin-top: 40px; font-family: var(--f-sans); font-weight: 300; font-size: var(--t-body-s); line-height: 1.85; color: var(--c-ink-2); max-width: 40ch; min-height: calc(1.85em * 6); transition: opacity var(--d-tab) ease; }
.hh-mood__desc.is-fading { opacity: 0; }
.hh-mood__collage { position: relative; aspect-ratio: 8 / 6.2; min-height: 420px; width: 100%; }
.hh-mood__layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--d-fade) ease; }
.hh-mood__layer.is-active { opacity: 1; pointer-events: auto; }
.hh-mood__frame { position: absolute; margin: 0; background: var(--c-canvas-2); overflow: hidden; }
.hh-mood__frame img { width: 100%; height: 100%; object-fit: cover; }
.hh-mood__frame--a { left: 0; top: 0; width: 46%; height: 62%; }
.hh-mood__frame--b { left: 38%; top: 14%; width: 40%; height: 52%; box-shadow: 0 30px 60px -30px var(--c-shadow); }
.hh-mood__frame--c { right: 0; top: 0; width: 22%; height: 34%; }
.hh-mood__frame--d { left: 18%; bottom: 0; width: 54%; height: 40%; }

/* --------------------------------------------------------------------------
   C5 Closing band
   -------------------------------------------------------------------------- */
.hh-band { background: var(--c-ink) !important; color: var(--c-canvas); padding-block: var(--section-y); }
.hh-band__inner { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 56px; }

/* --------------------------------------------------------------------------
   C6 Footer
   -------------------------------------------------------------------------- */
.hh-footer { border-top: var(--rule) solid var(--c-accent-2); background: var(--c-canvas-2) !important; }
.hh-footer__wrap { padding-top: 96px; padding-bottom: 40px; }
.hh-footer__grid { row-gap: 48px; }
.hh-footer__brand { display: flex !important; flex-direction: column; gap: 24px; }
.hh-footer__tagline, .hh-footer__tagline p { font-family: var(--f-serif); font-weight: 300; font-size: 22px; line-height: 1.4; max-width: 24ch; color: var(--c-ink); }
.hh-footer__col { display: flex; flex-direction: column; gap: 16px; }
.hh-footer__col .hh-label { margin-bottom: 4px; }
.hh-footer__col a, .hh-footer__col span { font-family: var(--f-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); }
.hh-footer__col span { color: var(--c-ink-2); }
.hh-footer__col a.email { letter-spacing: .04em; text-transform: none; overflow-wrap: anywhere; }
.hh-footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 80px; padding-top: 24px; border-top: var(--rule) solid var(--c-accent-2); font-family: var(--f-sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-2); }
.hh-footer__legal nav { display: flex; gap: 32px; }
.hh-footer__legal a { color: var(--c-ink-2); }

/* --------------------------------------------------------------------------
   Contact (Inquire) page
   -------------------------------------------------------------------------- */
.hh-welcome { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.hh-brief { padding-bottom: var(--section-y); row-gap: 64px; }
.hh-form { display: flex; flex-direction: column; gap: 56px; }
.hh-field { display: flex; flex-direction: column; gap: 16px; border: 0; padding: 0; margin: 0; min-width: 0; }
.hh-form input[type="text"], .hh-form input[type="email"], .hh-form textarea {
  all: unset; box-sizing: border-box; width: 100%; font-family: var(--f-serif); font-weight: 300; font-size: var(--t-input); line-height: 1.3; color: var(--c-ink);
  padding: 8px 0 14px; border-bottom: var(--rule) solid var(--c-ink); background: transparent; transition: border-color var(--d-fast) ease;
}
.hh-form textarea { font-size: var(--t-textarea); line-height: 1.5; min-height: 160px; padding: 16px 0; resize: vertical; }
.hh-form input:focus, .hh-form textarea:focus { border-color: var(--c-accent-2); outline: none; }
.hh-form ::placeholder { color: #A7A196; opacity: 1; }
.hh-chips__row { display: flex; flex-wrap: wrap; gap: 12px; }
.hh-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 14px 24px; border: var(--rule) solid var(--c-ink); font-family: var(--f-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink); transition: background-color var(--d-fast) ease, color var(--d-fast) ease, border-color var(--d-fast) ease; }
.hh-chip:hover { border-color: var(--c-accent-2); }
.hh-chip:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }
.hh-chip[aria-checked="true"] { background: var(--c-accent); color: var(--c-canvas); border-color: var(--c-accent); }
.hh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hh-form__status { font-family: var(--f-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); min-height: 1.5em; }
.hh-form__status.is-error { color: #8A3B2E; }
.hh-form button[disabled] { cursor: default; background-color: var(--c-accent-2) !important; color: var(--c-ink) !important; }
.hh-aside { display: flex !important; flex-direction: column; gap: 40px; }
.hh-details { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.hh-details div { display: flex; flex-direction: column; gap: 8px; }
.hh-details dt { font-family: var(--f-sans); font-size: var(--t-micro-s); letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); }
.hh-details dd { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--c-ink); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hh-header__row > .hh-btn--nav { display: none !important; }
}
@media (max-width: 900px) {
  :root { --section-y: 96px; }
  .hh-hero { min-height: 0; }
  .hh-hero__text { grid-column: 1 / 13; padding-block: 64px 48px; }
  .hh-hero__image { grid-column: 1 / 13; min-height: 0; aspect-ratio: 4 / 5; }
  .hh-hero__image .hh-cover img { min-height: 0; }
  .hh-pillars .hh-h2-caps { margin-bottom: 56px; }
  .hh-pillars__grid > .hh-card { grid-column: 1 / 13; }
  .hh-mood__controls, .hh-mood__display { grid-column: 1 / 13; }
  .hh-mood__collage { aspect-ratio: 4 / 3; }
  .hh-mood__desc { min-height: 0; }
  .hh-band__inner { grid-column: 1 / 13; }
  .hh-footer__brand { grid-column: 1 / 13; }
  .hh-footer__grid > .hh-footer__col-wrap { grid-column: span 4; }
  .hh-welcome { grid-column: 1 / 13; }
  .hh-brief > .hh-form-wrap { grid-column: 1 / 13; order: 2; }
  .hh-brief > .hh-aside { grid-column: 1 / 13; order: 1; }
  .hh-brief > .hh-aside .hh-frame { display: none; }
  .hh-ethos-row > *, .hh-steps > .hh-step, .hh-grid-12 > .hh-col-mobile-full { grid-column: 1 / 13; }
  .hh-ethos-row .hh-frame { max-width: 420px; }
}
@media (max-width: 600px) {
  :root { --t-h1: 40px; --gutter: 16px; }
  .hh-header__row { height: auto; flex-wrap: wrap; padding-block: 16px; row-gap: 12px; }
  .hh-header__row > .elementor-widget.hh-nav-wrap { flex-basis: 100%; }
  .hh-nav { justify-content: flex-start; flex-wrap: wrap; gap: 16px; }
  .hh-footer__grid > .hh-footer__col-wrap { grid-column: 1 / 13; }
  .hh-footer__grid { row-gap: 40px; }
  .hh-footer__legal { flex-direction: column; }
  .hh-chip { width: 100%; text-align: center; }
  .hh-cta-row { gap: 24px; }
}