:root{--ink:#20251d;--olive:#56613c;--olive2:#323b27;--cream:#f7f3ea;--cream2:#eee7d9;--gold:#c7a969;--white:#fff;--muted:#62685d;--line:#d9d1c2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65}a{color:inherit}img{max-width:100%;display:block}.wrap{width:min(1120px,calc(100% - 36px));margin:auto}.site-header{position:sticky;top:0;z-index:20;background:rgba(247,243,234,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}.brand{text-decoration:none}.brand strong{display:block;font-family:Georgia,serif;font-size:1.25rem}.brand small{display:block;color:var(--muted)}.nav{display:flex;align-items:center;gap:18px;font-weight:650}.nav a{text-decoration:none}.button{display:inline-block;text-decoration:none;border-radius:9px;padding:12px 18px;font-weight:750;border:1px solid var(--olive);cursor:pointer}.primary{background:var(--olive);color:white}.secondary{background:transparent;color:var(--olive2)}.hero{background:linear-gradient(130deg,#141910,#344027);color:white}.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;min-height:600px}.hero-copy{padding:76px max(24px,calc((100vw - 1120px)/2)) 76px max(24px,calc((100vw - 1120px)/2));padding-right:48px;display:flex;flex-direction:column;justify-content:center}.hero-image{min-height:460px;background:url('/assets/michael-appiah.jpg') center/cover no-repeat}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.77rem;font-weight:800;color:var(--gold)}h1,h2{font-family:Georgia,serif;line-height:1.12;margin:.4em 0}h1{font-size:clamp(2.6rem,5vw,5rem)}h2{font-size:clamp(2rem,3vw,3.2rem)}h3{line-height:1.25}.lead{font-size:1.18rem;max-width:720px;color:inherit}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.hero .secondary{border-color:#fff;color:#fff}.trust{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-bottom:1px solid var(--line)}.trust div{text-align:center;padding:20px 12px;border-right:1px solid var(--line)}.trust span,.trust strong{display:block}.trust span{font-size:.86rem;color:var(--muted)}section{padding:72px 0}.section-intro{max-width:760px;color:var(--muted);font-size:1.08rem}.center{text-align:center;margin-left:auto;margin-right:auto}.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}.card p{color:var(--muted)}.link{font-weight:800;color:var(--olive2)}.dark-section{background:var(--olive2);color:white}.dark-section .card{color:var(--ink)}.price{font-size:2rem;font-weight:850;color:var(--olive2)!important}.crumbs{padding:18px 0;font-size:.9rem;color:var(--muted)}.page-hero{padding:64px 0;background:var(--cream2)}.page-hero h1{font-size:clamp(2.5rem,4.5vw,4.6rem);max-width:900px}.content-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:40px}.side-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;align-self:start;position:sticky;top:110px}.clean-list{padding-left:20px}.clean-list li{margin:8px 0}.steps{counter-reset:step}.step{display:grid;grid-template-columns:46px 1fr;gap:14px;margin:24px 0}.step:before{counter-increment:step;content:counter(step);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--olive);color:#fff;font-weight:800}.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:12px 0}.faq summary{font-weight:800;cursor:pointer}.footer{background:#151a12;color:#eee;padding:52px 0 20px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}.footer a{color:#fff}.footer-nav a,.socials a{display:block;margin:8px 0}.notice{border-top:1px solid #394132;margin-top:30px;padding-top:20px;font-size:.82rem;color:#c9cdbf}.mobile-cta{display:none}.topic-grid .card{min-height:190px}.badge{display:inline-block;background:#e5ead7;color:#344027;border-radius:999px;padding:5px 10px;font-size:.78rem;font-weight:800}.city-list{columns:2}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}.video-placeholder{position:relative;border-radius:16px;overflow:hidden;min-height:360px;background:#222}.video-placeholder img{width:100%;height:100%;object-fit:cover}.video-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(transparent,rgba(0,0,0,.65));color:white;text-align:center}.play{font-size:2rem;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#222;margin-bottom:12px}@media(max-width:900px){.nav a:not(.primary){display:none}.hero-grid,.content-grid,.video-grid{grid-template-columns:1fr}.hero-image{min-height:380px}.trust{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}.side-panel{position:static}.footer-grid{grid-template-columns:1fr}body{padding-bottom:84px}.mobile-cta{display:block;position:fixed;bottom:12px;left:12px;right:12px;z-index:25}.mobile-cta .button{display:block;text-align:center;box-shadow:0 8px 28px rgba(0,0,0,.22)}}@media(max-width:600px){.grid-2,.grid-3{grid-template-columns:1fr}.hero-copy{padding:54px 22px}.trust{grid-template-columns:1fr 1fr}.city-list{columns:1}section{padding:54px 0}}

/* Forest-green and cream brand system derived from the approved logo. */
:root {
  --ink: #1d2a20;
  --olive: #244b31;
  --olive2: #163419;
  --cream: #f9f1e8;
  --cream2: #eee3d5;
  --gold: #85652f;
  --gold-light: #cfb77e;
  --sage: #808562;
  --sage-light: #d3d5c6;
  --white: #fffdf9;
  --muted: #566158;
  --line: #d8cbb9;
  --link: #174d2b;
}

body {
  background: var(--cream);
  background-image: radial-gradient(circle at 100% 0, rgba(128, 133, 98, .09), transparent 28rem);
}

.site-header {
  background: rgba(249, 241, 232, .97);
  border-bottom: 2px solid rgba(172, 137, 73, .35);
}

.header-inner { padding: 8px 0; }

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 245px;
  color: var(--olive2);
}

.brand-logo img {
  width: 62px;
  height: 47px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(172, 137, 73, .24);
}

.brand-logo strong {
  color: var(--olive2);
  font-size: 1.12rem;
  letter-spacing: .01em;
}

.brand-logo small {
  color: var(--sage);
  font-weight: 700;
  letter-spacing: .035em;
}

.nav a:not(.button) {
  color: var(--olive2);
  border-bottom: 2px solid rgba(133, 101, 47, .32);
}

.nav a:not(.button):hover { border-bottom-color: var(--gold); }

.hero {
  background: linear-gradient(130deg, #102717 0%, #244b31 58%, #52664c 100%);
}

.seo-context {
  display: block;
  margin-top: 14px;
  max-width: 700px;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 750;
  line-height: 1.35;
  color: var(--gold-light);
}

.page-hero {
  background: linear-gradient(120deg, var(--cream2), #f9f1e8 64%, rgba(128, 133, 98, .2));
  border-bottom: 1px solid var(--line);
}

.dark-section, .footer { background: var(--olive2); }
.dark-section .eyebrow, .hero .eyebrow { color: var(--gold-light); }

.card, .side-panel, .faq details {
  background: var(--white);
  border-color: var(--line);
  box-shadow: 0 10px 28px rgba(22, 52, 25, .06);
}

.badge { background: var(--sage-light); color: var(--olive2); }
.step:before { background: var(--olive2); }

.button {
  min-height: 48px;
  border-radius: 10px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(22, 52, 25, .18);
}

.primary { background: var(--olive2); border-color: var(--olive2); color: #fffdf9; }
.primary:hover { background: #285738; border-color: #285738; }
.secondary { color: var(--olive2); border-width: 2px; background: rgba(255, 253, 249, .35); }

.hero .primary, .dark-section .primary {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--olive2);
}

.hero .primary:hover, .dark-section .primary:hover {
  background: #ead6a6;
  border-color: #ead6a6;
}

main a:not(.button):not(.card):not(.brand):not(.mobile-cta),
.crumbs a,
.footer a {
  color: var(--link);
  font-weight: 750;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(23, 77, 43, .55);
}

main a:not(.button):not(.card):not(.brand):not(.mobile-cta):hover,
.crumbs a:hover {
  color: #0b351b;
  text-decoration-color: var(--gold);
  background: rgba(207, 183, 126, .18);
}

.dark-section a:not(.button), .footer a {
  color: #fffdf9;
  text-decoration-color: var(--gold-light);
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
  color: var(--link) !important;
  font-weight: 850 !important;
}

a.card {
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

a.card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(22, 52, 25, .13);
}

a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  border-radius: 5px;
}

.brand-showcase { padding: 34px 0; background: var(--cream2); }
.brand-showcase img {
  width: min(760px, 100%);
  margin: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(22, 52, 25, .11);
}

.footer { border-top: 4px solid var(--gold); }
.footer a { text-decoration-thickness: 1.5px; }

.answer-block {
  margin: 18px 0 28px;
  padding: 20px 22px;
  background: var(--white);
  border-left: 5px solid var(--gold);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 8px 24px rgba(22, 52, 25, .06);
}

.answer-block p { margin: 0; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 20px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
}

.source-note {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .92rem;
}

.source-note a { font-weight: 750; }

@media (max-width: 900px) {
  .header-inner { gap: 10px; }
  .brand-logo { min-width: 0; }
  .brand-logo img { width: 54px; height: 41px; }
  .brand-logo strong { font-size: .98rem; }
  .brand-logo small { font-size: .7rem; }
  .mobile-cta[href] {
    background: var(--olive2);
    color: #fffdf9;
    border: 2px solid var(--gold-light);
    border-radius: 10px;
    padding: 13px 18px;
    text-align: center;
    text-decoration: none;
    font-weight: 850;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
  }
}

@media (max-width: 480px) {
  .brand-logo img { width: 46px; height: 35px; }
  .brand-logo strong { font-size: .88rem; }
  .brand-logo small { display: none; }
  .nav { gap: 8px; }
  .nav .button { padding: 10px 13px; min-height: 44px; }
}


/* 2026-08-15 mobile CRO refinement: compact header, calmer first viewport, and non-intrusive sticky CTA. */
@media (max-width: 900px) {
  body { padding-bottom: 68px; }

  .site-header { position: sticky; top: 0; }
  .header-inner { min-height: 58px; padding: 6px 0; gap: 8px; }
  .brand-logo { gap: 8px; min-width: 0; }
  .brand-logo img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
    border-radius: 8px;
  }
  .brand-logo strong { font-size: .96rem; line-height: 1.08; }
  .brand-logo small { font-size: .64rem; line-height: 1.15; }

  /* On phones the header is for orientation, not another large conversion block. */
  .nav .button.primary { display: none; }

  .hero-grid { min-height: 0; }
  .hero-copy { padding: 40px 20px 34px; }
  .hero-copy h1 { font-size: clamp(2.15rem, 10vw, 3rem); line-height: 1.04; }
  .hero-copy .lead { font-size: 1.05rem; line-height: 1.5; }
  .hero-image { min-height: 300px; }

  .actions { gap: 10px; margin-top: 20px; }
  .actions .button { width: 100%; }

  /* Hidden until the visitor scrolls beyond the initial hero CTA. */
  .mobile-cta {
    display: block;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 25;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .mobile-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-cta .button,
  .mobile-cta[href] {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 11px 16px !important;
    border-radius: 10px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
  }

  /* Do not stack a booking bar on top of privacy controls. */
  body.gsc-cookie-open .mobile-cta { display: none !important; }
}

@media (max-width: 600px) {
  section { padding: 46px 0; }
  .hero-copy { padding: 34px 18px 30px; }
  .hero-copy h1 { font-size: clamp(2rem, 10.5vw, 2.65rem); }
  .hero-image { min-height: 250px; }
  .trust div { padding: 14px 8px; }
  .brand-showcase { padding: 20px 0; }
}

@media (max-width: 480px) {
  .wrap { width: min(1120px, calc(100% - 24px)); }
  .header-inner { min-height: 54px; }
  .brand-logo img { width: 36px !important; height: 36px !important; }
  .brand-logo strong { font-size: .9rem; }
  .brand-logo small { display: none; }
  .hero-copy h1 { font-size: clamp(1.95rem, 10vw, 2.4rem); }
  .eyebrow { font-size: .7rem; letter-spacing: .12em; }
}

/* 2026-08-15 desktop CRO refinement: reduce visual weight and surface the message sooner. */
@media (min-width: 901px) {
  .header-inner {
    padding: 6px 0;
    min-height: 64px;
    gap: 18px;
  }

  .brand-logo {
    min-width: 218px;
    gap: 9px;
  }

  .brand-logo img {
    width: 48px;
    height: 38px;
    object-fit: contain;
    border-radius: 9px;
  }

  .brand-logo strong {
    font-size: 1.02rem;
    line-height: 1.08;
  }

  .brand-logo small {
    font-size: .72rem;
    line-height: 1.15;
  }

  .nav {
    gap: 14px;
    font-size: .95rem;
  }

  .nav .button {
    min-height: 44px;
    padding: 9px 15px;
  }

  .hero-grid {
    min-height: 500px;
    grid-template-columns: 1.18fr .82fr;
  }

  .hero-copy {
    padding-top: 54px;
    padding-bottom: 54px;
    padding-right: 42px;
  }

  .hero-copy h1 {
    max-width: 760px;
    font-size: clamp(2.8rem, 4vw, 4rem);
    line-height: 1.04;
    margin-top: .3em;
    margin-bottom: .28em;
  }

  .hero-copy .lead {
    max-width: 660px;
    font-size: 1.12rem;
    line-height: 1.55;
  }

  .hero-copy > p:not(.eyebrow):not(.lead) {
    max-width: 690px;
  }

  .hero-image {
    min-height: 410px;
  }

  .actions {
    margin-top: 20px;
    gap: 10px;
  }

  .actions .button {
    min-height: 46px;
    padding: 10px 16px;
  }

  .trust div {
    padding: 14px 10px;
  }

  section {
    padding: 60px 0;
  }

  .page-hero {
    padding: 52px 0;
  }

  .page-hero h1 {
    font-size: clamp(2.5rem, 3.8vw, 4rem);
  }

  .card {
    padding: 23px;
  }
}

/* The full-width logo showcase repeats branding already present in the header and delays useful content. */
.brand-showcase {
  display: none;
}

/* 2026-08-16 purpose-built mobile homepage: content first, compact navigation, one primary CTA. */
.mobile-menu-toggle,
.mobile-menu,
.mobile-hero-only { display: none; }

@media (max-width: 900px) {
  /* Homepage-only mobile header. Desktop navigation remains unchanged above 900px. */
  body { padding-bottom: 0; }
  .site-header { position: sticky; top: 0; z-index: 40; }
  .header-inner { min-height: 66px; padding: 7px 0; }
  .brand-logo { gap: 8px; }
  .brand-logo img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 7px;
  }
  .brand-logo strong { font-size: .92rem; line-height: 1.05; }
  .brand-logo small { font-size: .61rem; line-height: 1.1; }
  .desktop-nav { display: none !important; }

  .mobile-menu-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
    padding: 10px 8px;
    border: 0;
    background: transparent;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }
  .mobile-menu-toggle span {
    display: block;
    height: 2px;
    width: 26px;
    margin: 0 auto;
    background: var(--olive2);
    border-radius: 10px;
    transition: transform .18s ease, opacity .18s ease;
  }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu[hidden] { display: none !important; }
  .mobile-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(247,243,234,.995);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 26px rgba(24,31,18,.12);
  }
  .mobile-menu-inner { padding: 8px 0 12px; }
  .mobile-menu a {
    display: block;
    padding: 11px 4px;
    text-decoration: none;
    font-weight: 720;
    border-bottom: 1px solid rgba(217,209,194,.65);
  }
  .mobile-menu a:last-child {
    border: 1px solid var(--olive);
    background: var(--olive);
    color: #fff;
    text-align: center;
    border-radius: 9px;
    margin-top: 10px;
    padding: 11px 16px;
  }

  /* Homepage hero: no portrait/large branding before the message. */
  .hero { background: linear-gradient(145deg,#182015,#2f3a25); }
  .hero-grid { display: block; min-height: auto; }
  .hero-copy {
    min-height: calc(100svh - 66px);
    padding: 34px 20px 30px;
    justify-content: center;
  }
  .desktop-hero-only { display: none !important; }
  .mobile-hero-only { display: block; }
  .hero-image { display: none !important; }
  .hero-copy .eyebrow {
    max-width: 100%;
    margin: 0 0 15px;
    font-size: .69rem;
    line-height: 1.35;
    letter-spacing: .13em;
  }
  .hero-copy h1 {
    max-width: 620px;
    margin: 0 0 18px;
    font-size: clamp(2.35rem, 11.2vw, 3.25rem);
    line-height: 1.01;
    letter-spacing: -.015em;
  }
  .hero-copy .lead.mobile-hero-only {
    max-width: 570px;
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.52;
    color: rgba(255,255,255,.91);
  }
  .mobile-hero-actions { margin-top: 24px; }
  .mobile-hero-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 190px;
    min-height: 50px;
    padding: 11px 22px !important;
    border-radius: 9px;
  }
  .mobile-consult-link {
    display: block;
    width: fit-content;
    margin-top: 14px;
    color: #fff;
    font-size: .94rem;
    font-weight: 700;
    text-underline-offset: 4px;
  }
  .mobile-consult-link:hover,
  .mobile-consult-link:focus-visible { color: var(--gold-light); }

  /* Keep trust proof useful but lighter than the hero. */
  .trust { grid-template-columns: repeat(3,1fr); }
  .trust div { padding: 12px 7px; }
  .trust div:nth-child(1),
  .trust div:nth-child(5) { display: none; }
  .trust strong { font-size: .84rem; line-height: 1.25; }
  .trust span { font-size: .72rem; line-height: 1.3; }

  /* Sticky CTA stays absent until visitor has moved beyond the hero's CTA. */
  .mobile-cta {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 35;
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .mobile-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-cta .button {
    min-height: 52px;
    padding: 11px 16px !important;
    border-radius: 10px;
    font-size: 1rem;
    box-shadow: 0 7px 18px rgba(0,0,0,.2) !important;
  }
  body.gsc-cookie-open .mobile-cta { display: none !important; }
}

@media (max-width: 480px) {
  .header-inner { min-height: 62px; }
  .brand-logo img { width: 34px !important; height: 34px !important; }
  .brand-logo strong { font-size: .87rem; }
  .brand-logo small { display: none; }
  .hero-copy {
    min-height: calc(100svh - 62px);
    padding: 28px 18px 26px;
  }
  .hero-copy h1 {
    font-size: clamp(2.2rem, 11.3vw, 2.85rem);
    line-height: 1.015;
  }
  .hero-copy .lead.mobile-hero-only { font-size: 1rem; }
  .mobile-hero-primary { min-width: 178px; }
}


/* 2026-08-16 SITE-WIDE RESPONSIVE CRO SYSTEM
   Applies the calm, content-first experience across all pages without altering SEO copy. */

/* Universal desktop refinements */
@media (min-width: 901px) {
  .wrap { width: min(1100px, calc(100% - 48px)); }
  .site-header .header-inner { min-height: 62px; }
  .page-hero { padding: 46px 0; }
  .page-hero h1 {
    max-width: 850px;
    font-size: clamp(2.35rem, 3.45vw, 3.65rem);
    line-height: 1.05;
    margin-bottom: .3em;
  }
  .page-hero .lead {
    max-width: 780px;
    font-size: 1.1rem;
    line-height: 1.55;
  }
  .page-hero .actions { margin-top: 18px; }
  .page-hero .actions .button { min-height: 44px; padding: 9px 15px; }
  .content-grid { gap: 34px; grid-template-columns: minmax(0, 1.36fr) minmax(260px,.64fr); }
  .side-panel { top: 90px; padding: 21px; }
  section { padding: 56px 0; }
  .card { padding: 22px; border-radius: 14px; }
  .topic-grid .card { min-height: 170px; }
  .footer { padding-top: 44px; }
}

/* Universal tablet + mobile navigation and page structure */
@media (max-width: 900px) {
  html { scroll-padding-top: 72px; }
  body { padding-bottom: 0 !important; }
  .site-header { position: sticky; top: 0; z-index: 50; }
  .header-inner { min-height: 64px !important; padding: 7px 0 !important; }
  .brand-logo { min-width: 0 !important; flex: 1 1 auto; }
  .brand-logo img { width: 36px !important; height: 36px !important; object-fit: contain !important; }
  .brand-logo strong { font-size: .9rem !important; line-height: 1.05; }
  .brand-logo small { font-size: .61rem !important; line-height: 1.1; }
  .desktop-nav { display: none !important; }

  .mobile-menu-toggle {
    display: inline-flex !important;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 9px 7px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }
  .mobile-menu-toggle span {
    display: block; height: 2px; width: 25px; margin: 0 auto;
    background: var(--olive2); border-radius: 10px;
    transition: transform .18s ease, opacity .18s ease;
  }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu[hidden] { display:none !important; }
  .mobile-menu {
    display:block; position:absolute; top:100%; left:0; right:0;
    background:rgba(249,241,232,.995); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    box-shadow:0 12px 26px rgba(24,31,18,.12);
  }
  .mobile-menu-inner { padding: 7px 0 12px; }
  .mobile-menu a {
    display:block; padding:10px 4px; text-decoration:none !important; font-weight:720;
    color:var(--olive2) !important; border-bottom:1px solid rgba(217,209,194,.65);
  }
  .mobile-menu a:last-child {
    border:1px solid var(--olive); background:var(--olive); color:#fff !important;
    text-align:center; border-radius:9px; margin-top:9px; padding:10px 15px;
  }

  .crumbs {
    padding: 10px 0;
    font-size: .78rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .crumbs::-webkit-scrollbar { display:none; }

  .page-hero {
    padding: 30px 0 32px;
    background: linear-gradient(120deg,var(--cream2),#f9f1e8 70%,rgba(128,133,98,.12));
  }
  .page-hero .eyebrow {
    margin:0 0 10px;
    font-size:.68rem;
    line-height:1.35;
    letter-spacing:.12em;
  }
  .page-hero h1 {
    margin:0 0 14px;
    max-width: 680px;
    font-size: clamp(2.05rem, 9.7vw, 3rem);
    line-height:1.03;
    letter-spacing:-.01em;
  }
  .page-hero .lead {
    margin:0;
    max-width: 680px;
    font-size:1rem;
    line-height:1.5;
  }
  .page-hero .actions {
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-top:20px;
  }
  .page-hero .actions .button {
    width:100%; min-height:48px; padding:10px 14px; display:flex; align-items:center; justify-content:center;
  }
  .page-hero .actions .secondary { background:transparent; }

  section { padding: 42px 0; }
  h2 { font-size: clamp(1.75rem, 7.4vw, 2.35rem); line-height:1.1; }
  h3 { line-height:1.2; }
  .section-intro { font-size:1rem; line-height:1.55; }
  .content-grid, .video-grid { grid-template-columns:1fr !important; gap:28px; }
  .side-panel {
    position: static;
    padding:20px;
    border-radius:14px;
  }
  .side-panel .button { width:100%; }
  .grid-3, .grid-2 { grid-template-columns:1fr 1fr; gap:14px; }
  .card { padding:20px; border-radius:14px; }
  .topic-grid .card { min-height:0; }
  .steps .step { margin:18px 0; }
  .faq details { padding:14px 15px; }
  .footer { padding:38px 0 18px; }
  .footer-grid { grid-template-columns:1fr; gap:22px; }
  .footer-grid > div { padding-bottom:4px; }
  .notice { margin-top:18px; padding-top:16px; }

  /* Universal sticky booking bar: hidden until page's main CTA has passed. */
  .mobile-cta {
    display:block !important;
    position:fixed;
    left:12px; right:12px;
    bottom:max(10px,env(safe-area-inset-bottom));
    z-index:35;
    opacity:0;
    transform:translateY(18px);
    pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
  }
  .mobile-cta.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
  .mobile-cta .button, .mobile-cta[href] {
    display:block; width:100%; min-height:50px; padding:10px 15px !important;
    border-radius:10px; font-size:1rem; line-height:1.2; box-shadow:0 7px 18px rgba(0,0,0,.2) !important;
  }
  body.gsc-cookie-open .mobile-cta { display:none !important; }
}

@media (max-width: 600px) {
  .wrap { width:min(1120px,calc(100% - 28px)); }
  .header-inner { min-height:60px !important; }
  .brand-logo img { width:34px !important; height:34px !important; }
  .brand-logo strong { font-size:.86rem !important; }
  .brand-logo small { display:none !important; }
  .crumbs { padding:8px 0; }
  .page-hero { padding:26px 0 28px; }
  .page-hero h1 { font-size:clamp(1.95rem,10vw,2.6rem); }
  section { padding:38px 0; }
  .grid-2,.grid-3 { grid-template-columns:1fr !important; }
  .card { padding:18px; }
  .city-list { columns:1; }
  .clean-list { padding-left:19px; }
  .step { grid-template-columns:40px 1fr; gap:11px; }
  .step:before { width:34px; height:34px; }
}

/* Booking page and dense utility pages: keep choices easy to scan on small screens. */
@media (max-width: 900px) {
  main .price { font-size:1.65rem; }
  main .badge { font-size:.73rem; }
  main table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  main iframe { max-width:100%; }
  .video-placeholder { min-height:260px; }
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}


/* ===== 2026-08-18 BENEFIT + LINK CLARITY CRO UPDATE ===== */
/* Keep the forest-green / cream brand, but make every interactive element obvious. */
:root {
  --cta-green: #173d27;
  --cta-green-hover: #0f2f1d;
  --link-strong: #0f4a2b;
  --link-bg: #edf3e8;
  --link-bg-hover: #dfead8;
}

/* Primary actions: higher contrast, stronger weight, clearer depth. */
.button.primary {
  background: var(--cta-green);
  border: 2px solid var(--cta-green);
  color: #fffdf9;
  font-weight: 850;
  letter-spacing: .01em;
  box-shadow: 0 5px 0 rgba(10, 35, 20, .18), 0 10px 24px rgba(22, 52, 25, .14);
}
.button.primary:hover {
  background: var(--cta-green-hover);
  border-color: var(--cta-green-hover);
  box-shadow: 0 3px 0 rgba(10, 35, 20, .18), 0 8px 18px rgba(22, 52, 25, .18);
}
.button.secondary {
  border: 2px solid var(--cta-green);
  color: var(--cta-green);
  font-weight: 800;
  background: #fffdf9;
}
.button.secondary:hover {
  background: var(--link-bg);
  border-color: var(--cta-green-hover);
  color: var(--cta-green-hover);
}

/* On dark backgrounds, keep the main CTA visually dominant without losing brand cohesion. */
.hero .button.primary,
.dark-section .button.primary {
  background: #f1dca6;
  border-color: #f1dca6;
  color: #173d27;
  box-shadow: 0 5px 0 rgba(0,0,0,.22), 0 10px 24px rgba(0,0,0,.18);
}
.hero .button.primary:hover,
.dark-section .button.primary:hover {
  background: #f7e7bd;
  border-color: #f7e7bd;
}
.hero .button.secondary {
  background: transparent;
  color: #fffdf9;
  border-color: rgba(255,255,255,.92);
}
.hero .button.secondary:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* Inline links: unmistakably links, not body copy. */
main a:not(.button):not(.card):not(.brand):not(.mobile-cta),
.crumbs a {
  color: var(--link-strong);
  font-weight: 850;
  text-decoration-line: underline;
  text-decoration-thickness: 2.5px;
  text-underline-offset: 4px;
  text-decoration-color: #9b7a35;
  border-radius: 4px;
}
main a:not(.button):not(.card):not(.brand):not(.mobile-cta):hover,
.crumbs a:hover {
  color: #082d18;
  background: var(--link-bg-hover);
  text-decoration-color: #6f521a;
}

/* Standalone service/action links get a subtle highlighted treatment and larger tap target. */
.link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  margin-top: 4px;
  padding: 7px 10px;
  background: var(--link-bg);
  border: 1px solid #cad9c3;
  border-radius: 8px;
  color: var(--link-strong) !important;
  font-weight: 850 !important;
  text-decoration-thickness: 2px !important;
}
.link:hover {
  background: var(--link-bg-hover) !important;
  border-color: #9bb28f;
}

/* Cards: separate the explanatory link from the high-intent booking action. */
.topic-grid .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.topic-grid .card p { flex-grow: 1; }
.topic-grid .card .button { margin-top: 12px; }
.topic-grid .card .link + .button { margin-top: 12px; }

/* Navigation must not look like muted body copy. */
.nav a:not(.button) {
  color: #223326;
  font-weight: 750;
}
.nav a:not(.button):hover {
  color: #0f4a2b;
}

/* Mobile: full-width, thumb-friendly primary CTA and clearly separated text links. */
@media (max-width: 600px) {
  .mobile-hero-actions .button.primary,
  .topic-grid .card .button.primary {
    width: 100%;
  }
  .mobile-consult-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 7px 2px;
    color: #fffdf9 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px;
  }
  .link { width: 100%; justify-content: space-between; }
}


/* ===== 2026-08-18 ONE-STEP-BOLDER UX PASS ===== */
/* Higher visual certainty for links/CTAs without changing the forest-green/cream brand. */
.button.primary {
  font-weight: 900;
  border-width: 2px;
  padding: 13px 20px;
}
.button.secondary {
  font-weight: 850;
  border-width: 2px;
}

/* Inline links must remain visibly clickable even without hover. */
main a:not(.button):not(.card):not(.brand):not(.mobile-cta),
.crumbs a {
  font-weight: 900;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* Standalone action links read as controls, not decorative text. */
.link {
  font-weight: 900 !important;
  border: 2px solid #adc3a3;
  padding: 8px 12px;
  box-shadow: 0 2px 0 rgba(15,74,43,.08);
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px;
}
.link:hover,
.link:focus-visible {
  border-color: #6f946f;
  box-shadow: 0 3px 0 rgba(15,74,43,.12);
}

/* Primary navigation links are intentionally stronger than body copy. */
.nav a:not(.button) {
  font-weight: 800;
}

@media (max-width: 600px) {
  .mobile-consult-link {
    font-weight: 900 !important;
    text-decoration-thickness: 3px !important;
  }
  .button.primary { min-height: 48px; }
}