/* ============================================================
   Luxe AI Smart Systems — design system v1
   obsidian #131110 · slate #1B1816 · slate-2 #241F1C
   brass #C0A068 · champagne #DDC79A · brass-dk #8F7644
   bone #F2EDE5 · stone #A0968A · dim #6E655C · gulf #3A7A75
   Type: Cormorant Garamond (display) · Jost (body/labels)
   Ported from the approved prototype, wired into GeneratePress.
   ============================================================ */

:root {
  --obsidian: #131110;
  --slate:    #1B1816;
  --slate-2:  #241F1C;
  --brass:    #C0A068;
  --brass-lt: #DDC79A;
  --brass-dk: #8F7644;
  --bone:     #F2EDE5;
  --stone:    #A0968A;
  --dim:      #6E655C;
  --gulf:     #3A7A75;
  --line:     rgba(242, 237, 229, .10);
  --line-2:   rgba(242, 237, 229, .06);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--bone);
  background: var(--obsidian);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(192, 160, 104, .22); color: var(--bone); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }

.grid-container { max-width: 1180px; }

/* shared type helpers (usable in wp:html blocks) */
.lx-kicker {
  font-size: 10px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 22px; display: block;
}
.lx-serif { font-family: var(--serif); font-weight: 300; line-height: 1.08; }
.lx-h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.1; }
.lx-body { color: var(--stone); font-size: 15.5px; max-width: 560px; }

/* ---------- Header: dark, blurred, sticky ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(19, 17, 16, .9);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line-2);
}
.inside-header { padding: 0 4px; }

/* brand lockup: gem mark + wordmark via ::before uses uploaded mark; text is the title */
.main-title a, .main-title a:hover {
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.main-title a::before {
  content: "";
  width: 30px; height: 30px; flex: 0 0 auto;
  background: url('/wp-content/uploads/2026/07/luxe-mark.svg') center / contain no-repeat;
}
.site-description { display: none; }

.main-navigation, .main-navigation .main-nav { background: transparent; }
.main-navigation .main-nav ul li a {
  color: var(--stone);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li[class*="current"] > a { color: var(--brass); }

/* consultation link = solid brass pill (high contrast) */
.main-navigation .main-nav > ul > li > a[href*="consultation"] {
  background: var(--brass) !important;
  color: var(--obsidian) !important;
  border: 1px solid var(--brass);
  margin: 22px 0 22px 18px;
  line-height: 1 !important;
  padding: 13px 26px !important;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
  transition: background .25s ease, box-shadow .25s ease;
}
.main-navigation .main-nav > ul > li > a[href*="consultation"]:hover {
  background: var(--brass-lt) !important;
  color: var(--obsidian) !important;
  border-color: var(--brass-lt);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .34);
}

/* dropdown */
.main-navigation ul ul {
  background: var(--slate-2);
  border: 1px solid var(--line);
  padding: 8px;
  min-width: 240px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.main-navigation .main-nav ul ul li a {
  color: var(--stone); font-size: 11px; padding: 11px 14px;
  transition: color .16s ease, padding-left .16s ease;
}
.main-navigation .main-nav ul ul li a:hover { color: var(--brass); padding-left: 18px; }
.main-navigation .menu-toggle, .mobile-menu-control-wrapper .menu-toggle { color: var(--bone); }

/* ---------- Content shell: interior article pages ---------- */
.separate-containers .inside-article,
.one-container .inside-article {
  background: transparent; border: none; box-shadow: none;
  padding: clamp(24px, 4vw, 40px) 0;
}
.separate-containers .site-main { margin: clamp(40px, 6vw, 88px) 24px; }
body:not(.home) .inside-article { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- Interior typography ---------- */
h1.entry-title, .entry-header h1 {
  color: var(--bone); font-weight: 300;
  font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: -.02em;
  margin-bottom: .5em;
}
.entry-content { font-size: 16px; }
.entry-content > p:first-of-type {
  /* the "direct answer" lead paragraph on QA pages reads as a callout */
}
.entry-content h2 {
  color: var(--bone); font-weight: 300;
  font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.01em;
  margin-top: 1.8em; margin-bottom: .5em; padding-top: 1.1em;
  border-top: 1px solid var(--line);
}
.entry-content h3 {
  color: var(--bone); font-weight: 400; font-size: 1.35rem;
  margin-top: 1.5em; margin-bottom: .35em;
}
.entry-content p, .entry-content li { color: var(--stone); }
.entry-content strong { color: var(--bone); font-weight: 500; }
.entry-content a {
  color: var(--brass); font-weight: 400; text-decoration: none;
  border-bottom: 1px solid rgba(192, 160, 104, .3);
  transition: color .15s, border-color .15s;
}
.entry-content a:hover { color: var(--brass-lt); border-bottom-color: var(--brass-lt); }
.entry-content ul { padding-left: 1.2em; }
.entry-content ul li, .entry-content ol li { margin-bottom: .55em; }
.entry-content ul > li::marker { color: var(--brass); }

/* lead-answer callout — add class "lx-answer" to the first paragraph on QA pages */
.entry-content p.lx-answer {
  color: var(--bone); font-size: 1.12rem; line-height: 1.6;
  border-left: 2px solid var(--brass); padding: 4px 0 4px 24px; margin-bottom: 1.6em;
}
.entry-content p.lx-answer strong { color: var(--brass-lt); }

/* tables */
.entry-content .wp-block-table table { border-collapse: collapse; width: 100%; }
.entry-content .wp-block-table th {
  background: var(--slate-2); color: var(--bone);
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 15px; border: none; text-align: left;
}
.entry-content .wp-block-table td {
  padding: 12px 15px; border: none; border-bottom: 1px solid var(--line);
  font-size: .95rem; color: var(--stone);
}
.entry-content .wp-block-table tr:nth-child(even) td { background: var(--slate); }

/* ---------- Buttons ---------- */
.wp-block-button__link, .entry-content .wp-block-button__link {
  background: var(--brass) !important; color: var(--obsidian) !important;
  border: none; border-radius: 0;
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 16px 36px;
  transition: background .28s ease;
}
.wp-block-button__link:hover { background: var(--brass-lt) !important; color: var(--obsidian) !important; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important; color: var(--stone) !important;
  border: 1px solid var(--line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--bone) !important; border-color: var(--stone);
}

/* ============================================================
   HOMEPAGE + section components (lx-*)
   ============================================================ */
.home .entry-header { display: none; }
.home .separate-containers .inside-article,
.home .one-container .inside-article { background: transparent; border: none; box-shadow: none; padding: 0; }
.home .separate-containers .site-main { margin: 0; }
.home .site-content .content-area { max-width: 100%; }
.home .site-content, .home .content-area, .home .site-main { padding: 0 !important; margin: 0 !important; }
.home .inside-article { padding: 0 !important; }
.home .entry-content { margin-top: 0 !important; }

/* full-bleed breakout */
.lx-bleed, .lx-statement, .lx-sec-alt-bleed {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

.lx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

/* hero */
.lx-hero {
  padding: clamp(72px, 10vw, 136px) 0 clamp(48px, 6vw, 80px);
  position: relative;
  background:
    linear-gradient(180deg, rgba(19,17,16,.74) 0%, rgba(19,17,16,.58) 42%, rgba(19,17,16,.94) 100%),
    var(--obsidian) url('/wp-content/uploads/2026/07/hero-estate-twilight.webp') center 32% / cover no-repeat;
}
.lx-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 24%, rgba(192, 160, 104, .07), transparent 66%);
}
.lx-hero-in { position: relative; text-align: center; max-width: 880px; margin: 0 auto; }
.lx-h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(46px, 8vw, 96px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--bone);
  text-shadow: 0 2px 40px rgba(0, 0, 0, .55);
}
.lx-h1 em { font-style: italic; color: var(--brass-lt); }
.lx-hero .lx-kicker { color: var(--brass-lt); text-shadow: 0 1px 20px rgba(0, 0, 0, .6); }
.lx-hero-sub {
  color: rgba(242, 237, 229, .9); font-size: 16.5px; max-width: 540px; margin: 30px auto 40px;
  text-shadow: 0 1px 24px rgba(0, 0, 0, .6);
}

.lx-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* NOTE: buttons live inside .entry-content, whose `a` rule sets brass text + an underline
   border. Use !important on the button colors so the label is never brass-on-brass. */
.lx-btn {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 16px 36px; cursor: pointer; text-decoration: none;
  display: inline-block; transition: all .28s ease; border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
}
.lx-btn-p { background: var(--brass) !important; color: var(--obsidian) !important; box-shadow: 0 6px 28px rgba(0, 0, 0, .3); }
.lx-btn-p:hover { background: var(--brass-lt) !important; color: var(--obsidian) !important; }
.lx-btn-g {
  background: rgba(19, 17, 16, .35) !important; color: var(--bone) !important;
  border-color: rgba(242, 237, 229, .38) !important;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.lx-btn-g:hover { color: var(--obsidian) !important; background: var(--bone) !important; border-color: var(--bone) !important; }

/* hero elevation SVG */
.lx-elev { margin-top: clamp(40px, 6vw, 72px); }
.lx-elev svg { display: block; width: 100%; height: auto; }
.lx-node { opacity: 0; animation: lxNode .8s ease forwards; }
.lx-node-1 { animation-delay: .8s; }  .lx-node-2 { animation-delay: 1.25s; }
.lx-node-3 { animation-delay: 1.7s; } .lx-node-4 { animation-delay: 2.15s; }
.lx-node-5 { animation-delay: 2.6s; } .lx-node-6 { animation-delay: 3.05s; }
@keyframes lxNode { to { opacity: 1; } }
.lx-halo { transform-origin: center; animation: lxHalo 3.4s ease-in-out infinite; }
@keyframes lxHalo { 0%, 100% { opacity: .5; r: 5; } 50% { opacity: .05; r: 11; } }

/* statement band */
.lx-statement {
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  padding: clamp(56px, 8vw, 96px) 24px; text-align: center;
}
.lx-quote {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(24px, 3.2vw, 38px); line-height: 1.32;
  max-width: 800px; margin: 0 auto; color: var(--bone);
}

/* generic section */
.lx-sec { padding: clamp(64px, 9vw, 112px) 0; }
.lx-sec-alt { background: var(--slate); }
.lx-head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }

/* systems list */
.lx-sys { border-top: 1px solid var(--line); }
.lx-sys-row {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .35s ease; text-decoration: none;
}
.lx-sys-row:hover { padding-left: 14px; }
.lx-sys-row:hover .lx-sys-name { color: var(--brass); }
.lx-sys-row[hidden] { display: none; }
.lx-sys-l { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.lx-sys-name {
  font-family: var(--serif); font-size: clamp(21px, 2.4vw, 29px); font-weight: 400;
  color: var(--bone); transition: color .3s; letter-spacing: -.005em;
}
.lx-sys-desc { font-size: 13.5px; color: var(--dim); max-width: 420px; }
.lx-sys-tag {
  font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); white-space: nowrap; padding-top: 6px;
}
.lx-filter { display: flex; gap: 28px; margin-bottom: 34px; flex-wrap: wrap; }
.lx-chip {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  background: none; border: none; padding: 0 0 7px; cursor: pointer;
  color: var(--dim); border-bottom: 1px solid transparent; transition: all .28s ease;
}
.lx-chip:hover { color: var(--stone); }
.lx-chip[data-on="true"] { color: var(--brass); border-bottom-color: var(--brass); }

/* intelligence grid */
.lx-int-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: clamp(24px, 4vw, 52px); }
.lx-int-item { border-top: 1px solid var(--brass-dk); padding-top: 24px; }
.lx-int-t { font-family: var(--serif); font-size: 23px; font-weight: 400; margin-bottom: 12px; color: var(--bone); }
.lx-int-d { font-size: 13.5px; color: var(--stone); line-height: 1.72; }

/* communities grid */
.lx-comm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(24px, 4vw, 44px); }
.lx-comm-h {
  font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass); padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.lx-comm-l { font-size: 14px; color: var(--stone); line-height: 2.05; }
.lx-comm-l a { color: var(--stone); text-decoration: none; border: none; transition: color .2s; }
.lx-comm-l a:hover { color: var(--brass); }

/* process */
.lx-proc { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
.lx-proc-step { padding: 0 clamp(18px, 2.5vw, 34px); border-left: 1px solid var(--line); }
.lx-proc-step:first-child { padding-left: 0; border-left: none; }
.lx-proc-n { font-family: var(--serif); font-size: 46px; font-weight: 300; color: var(--brass); opacity: .35; line-height: 1; margin-bottom: 16px; }
.lx-proc-t { font-family: var(--serif); font-size: 21px; margin-bottom: 10px; color: var(--bone); }
.lx-proc-d { font-size: 13px; color: var(--stone); line-height: 1.7; }

/* closing dark CTA band (interior pages) */
.lx-band {
  background: var(--slate-2); text-align: center;
  padding: clamp(56px, 8vw, 100px) 24px; position: relative; overflow: hidden;
}
.lx-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(192, 160, 104, .06), transparent 70%);
}
.lx-band h2 {
  font-family: var(--serif); font-weight: 300; color: var(--bone);
  font-size: clamp(28px, 4vw, 44px); border: none; margin: 0 0 .4em; padding: 0; position: relative;
}
.lx-band p { color: var(--stone); position: relative; max-width: 480px; margin: 0 auto 1.8em; }
.lx-band .lx-btn { position: relative; }

/* interior "at a glance" feature list (system pages) */
.lx-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 8px 0 4px; }
.lx-feature { border-top: 1px solid var(--brass-dk); padding-top: 18px; }
.lx-feature h3 { font-size: 1.05rem; margin: 0 0 8px; }
.lx-feature p { font-size: 13.5px; margin: 0; }

/* ============================================================
   Contact Form 7 — lead form (dark, hairline underline)
   ============================================================ */
.wpcf7 { max-width: 560px; }
.lx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
@media (max-width: 900px) { .lx-form-grid { grid-template-columns: 1fr; } }

.wpcf7 .lx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 540px) { .wpcf7 .lx-two { grid-template-columns: 1fr; } }

.wpcf7 label {
  display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 4px;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 9px 0; color: var(--bone);
  font-family: var(--sans); font-weight: 300; font-size: 15px;
  transition: border-color .28s ease;
}
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: var(--dim); }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
  outline: none; border-bottom-color: var(--brass);
}
.wpcf7 select option { background: var(--slate); color: var(--bone); }
.wpcf7 textarea { resize: vertical; min-height: 62px; }
.wpcf7 .lx-field { margin-bottom: 22px; }

.wpcf7 input[type="submit"] {
  margin-top: 14px; font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--brass); color: var(--obsidian); border: none; border-radius: 0;
  padding: 17px 44px; cursor: pointer; transition: background .28s ease;
}
.wpcf7 input[type="submit"]:hover { background: var(--brass-lt); }
.wpcf7-not-valid-tip { color: #d99; font-size: 11px; letter-spacing: .04em; }
.wpcf7 .wpcf7-response-output {
  border: 1px solid var(--line); color: var(--stone);
  font-size: 13px; padding: 12px 16px; margin: 20px 0 0;
}
.lx-fine { font-size: 11px; color: var(--dim); margin-top: 20px; letter-spacing: .04em; }

/* ---------- Mobile sticky consultation CTA ---------- */
.lx-mobile-cta { display: none; }
@media (max-width: 768px) {
  .lx-mobile-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: var(--brass); color: var(--obsidian);
    text-align: center; text-decoration: none;
    font-family: var(--sans); font-weight: 600; font-size: 12px;
    letter-spacing: .2em; text-transform: uppercase; padding: 16px 20px;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .45);
  }
  .lx-mobile-cta:active { background: var(--brass-lt); }
  body { padding-bottom: 52px; }   /* room so the fixed bar never covers the footer */
}

/* ---------- Full-bleed image band ---------- */
.lx-imgband {
  position: relative; min-height: 62vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: clamp(64px, 10vw, 120px) 24px;
  background:
    linear-gradient(180deg, rgba(19,17,16,.62), rgba(19,17,16,.78)),
    var(--obsidian) url('/wp-content/uploads/2026/07/section-dark.webp') center / cover no-repeat;
  background-attachment: scroll;
}
.lx-imgband .lx-quote { text-shadow: 0 2px 40px rgba(0, 0, 0, .6); }
.lx-imgband .lx-kicker { color: var(--brass-lt); }

/* ---------- Footer columns (rendered by mu-luxe-footer.php) ---------- */
.footer-cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px);
  max-width: 1180px; margin: 0 auto;
}
@media (max-width: 860px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 36px 28px; } }
@media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-cols .lx-foot-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-cols .lx-foot-lockup::before {
  content: ""; width: 28px; height: 28px; flex: 0 0 auto;
  background: url('/wp-content/uploads/2026/07/luxe-mark.svg') center / contain no-repeat;
}
.footer-cols .lx-foot-lockup span {
  font-family: var(--sans); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--obsidian) !important; border-top: 1px solid var(--line-2); margin-top: 0; }
/* footer columns render via the before-footer hook (outside .site-footer), so target directly + !important
   to beat GeneratePress's default white .footer-widgets background */
.footer-widgets {
  background: var(--obsidian) !important;
  padding: clamp(46px, 5vw, 72px) 24px 10px;
}
.footer-bar { background: var(--obsidian) !important; }
.footer-widgets .widget-title {
  font-family: var(--sans); font-size: 10px; font-weight: 500; color: var(--brass);
  text-transform: uppercase; letter-spacing: .24em; margin-bottom: 1.2em;
}
.footer-widgets .widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets .widget ul li { margin-bottom: 2px; }
.footer-widgets .widget a {
  color: var(--stone); font-size: 13px; line-height: 1.7; display: inline-block;
  padding: 5px 0; transition: color .15s ease; border: none;
}
.footer-widgets .widget a:hover { color: var(--brass); }
.pp-foot-brand, .lx-foot-brand { color: var(--dim); font-size: 12px; line-height: 1.9; letter-spacing: .03em; }
.footer-bar, .site-info { background: transparent !important; color: var(--dim); }
.site-info {
  font-family: var(--sans); font-size: 11px; letter-spacing: .04em;
  padding: 28px 24px 30px; text-align: center; border-top: 1px solid var(--line-2);
}
.site-info a { color: var(--stone); }

/* ---------- Reveal / motion / focus ---------- */
.lx-rev { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.lx-rev[data-vis="true"] { opacity: 1; transform: none; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 1px solid var(--brass); outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .lx-node { animation: none; opacity: 1; }
  .lx-halo { animation: none; }
  .lx-rev { opacity: 1 !important; transform: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .separate-containers .site-main { margin: 24px 16px; }
  .home .separate-containers .site-main { margin: 0; }
  .main-title a, .main-title a:hover { font-size: 12px; letter-spacing: .14em; gap: 9px; }
  .main-title a::before { width: 26px; height: 26px; }

  /* HERO: photo-led, fills the screen, big legible headline — the wireframe is desktop-only */
  .lx-hero {
    min-height: 90vh; min-height: 90svh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 96px 22px 64px;
    background-position: center center;
  }
  .lx-h1 { font-size: clamp(42px, 13vw, 62px); line-height: 1.03; }
  .lx-hero .lx-kicker { font-size: 10px; margin-bottom: 18px; }
  .lx-hero-sub { font-size: 16px; margin: 22px auto 34px; max-width: 420px; }
  .lx-elev { display: none; }               /* unreadable at phone width */
  .lx-btns { flex-direction: column; gap: 12px; width: 100%; max-width: 340px; margin: 0 auto; }
  .lx-btn { width: 100%; text-align: center; padding: 18px 24px; font-size: 12px; }

  /* image band + statement: keep the quote readable */
  .lx-imgband { min-height: 52vh; }
  .lx-quote { font-size: clamp(22px, 6.4vw, 30px); }
  .lx-h2 { font-size: clamp(30px, 8vw, 40px); }
  .lx-sys-row { grid-template-columns: 1fr; gap: 6px; }
  .lx-sys-tag { padding-top: 2px; }
  .main-navigation .main-nav ul li a { padding: 15px 18px !important; font-size: 12px; border-bottom: 1px solid var(--line-2); }
  .main-navigation .main-nav > ul > li > a[href*="consultation"] {
    background: var(--brass) !important; color: var(--obsidian) !important;
    margin: 12px 16px; text-align: center; border-radius: 0; font-weight: 600;
  }
  .lx-proc-step { border-left: none; border-top: 1px solid var(--line); padding: 28px 0 0; }
  .lx-proc-step:first-child { border-top: none; padding-top: 0; }
}