.landing-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 clamp(1.25rem, 4vw, 4.75rem);
  background: rgba(248, 244, 233, .92);
  border-bottom: 1px solid rgba(32, 31, 27, .2);
  backdrop-filter: blur(12px);
}
.landing-logo img { width: clamp(145px, 13vw, 195px); height: auto; display: block; }
.landing-header nav { display: flex; gap: 1.7rem; font-size: .86rem; font-weight: 600; }
.landing-header nav a:hover { color: #2D5A47; }
.landing-contact { font-size: .86rem; font-weight: 700; border-bottom: 1px solid; }
.landing-services-menu { position: relative; }
.landing-services-menu summary { list-style: none; cursor: pointer; display: flex; gap: .45rem; align-items: center; }
.landing-services-menu summary::-webkit-details-marker { display: none; }
.landing-services-menu summary span { transition: transform .2s; }
.landing-services-menu[open] summary span { transform: rotate(45deg); }
.landing-services-menu > div { position: absolute; top: calc(100% + 1.1rem); left: 50%; transform: translateX(-50%); width: 410px; padding: .7rem; background: #FFFDF7; border: 1px solid #201F1B; box-shadow: 9px 9px 0 #FEB400; }
.landing-services-menu > div::before { content: ''; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.2rem; }
.landing-services-menu > div a { display: grid; grid-template-columns: 32px 1fr; gap: .65rem; padding: .8rem; border-bottom: 1px solid #D9D3C4; }
.landing-services-menu > div a:last-child { border-bottom: 0; }
.landing-services-menu > div a:hover, .landing-services-menu > div a.active { color: #201F1B; background: #FEB400; }
.landing-services-menu b { font: 700 .65rem Manrope, sans-serif; color: #2D5A47; }
.landing-services-menu a > span { display: flex; flex-direction: column; font: 700 .78rem Manrope, sans-serif; }
.landing-services-menu small { margin-top: .2rem; font: 500 .75rem 'IBM Plex Sans Thai', sans-serif; color: #625F55; }

.landing-hero {
  min-height: calc(100vh - 84px);
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  overflow: clip;
  position: relative;
}
.landing-hero::before { content: ''; position: absolute; width: 38vw; aspect-ratio: 1; background: #FEB400; border-radius: 50%; left: -19vw; top: 4rem; opacity: .18; }
.landing-eyebrow { margin: 0 0 1.25rem; font: 700 .7rem/1.3 Manrope, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: #625F55; }
.landing-hero h1, .landing-heading h2, .urgency h2, .landing-case h2, .related-section h2, .landing-cta h2 {
  margin: 0;
  font-size: clamp(3rem, 6vw, 6.4rem);
  line-height: .98;
  letter-spacing: -.07em;
}
.landing-lead { max-width: 44rem; margin: 2rem 0; font-size: 1.08rem; line-height: 1.8; color: #504a40; }
.landing-button { display: inline-flex; gap: 3rem; padding: 1rem 1.2rem; background: #FEB400; border: 1px solid #201F1B; box-shadow: 7px 7px 0 #201F1B; font-weight: 700; transition: .25s ease; }
.landing-button:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 #201F1B; }
.landing-signal { min-height: 390px; padding: 1.4rem; display: flex; flex-direction: column; justify-content: space-between; background: #FEB400; border: 1px solid #201F1B; box-shadow: 18px 18px 0 #201F1B; transform: rotate(-1deg); position: relative; overflow: hidden; }
.landing-signal::before, .landing-signal::after { content: ''; position: absolute; width: 340px; aspect-ratio: 1; border: 1px solid rgba(23,21,15,.35); border-radius: 50%; left: 52%; top: 52%; transform: translate(-50%, -50%); }
.landing-signal::after { width: 215px; }
.landing-signal > span, .landing-signal small { position: relative; z-index: 1; font: 700 .65rem Manrope, sans-serif; letter-spacing: .12em; }
.landing-signal strong { position: relative; z-index: 1; font: 800 clamp(3.2rem, 7vw, 6rem)/.85 Manrope, sans-serif; letter-spacing: -.09em; overflow-wrap: anywhere; }
.signal-line { position: absolute; height: 1px; width: 75%; background: #201F1B; left: 12%; top: 53%; transform: rotate(-22deg); }
.landing-visual { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid #201F1B; box-shadow: 18px 18px 0 #FEB400; transform: rotate(-1deg); background: #D9D3C4; }
.landing-visual img { width: 100%; height: 112%; object-fit: cover; display: block; }

.landing-ticker { overflow: hidden; background: #FEB400; border-block: 1px solid #201F1B; padding: .85rem 0; white-space: nowrap; font: 800 .78rem Manrope, sans-serif; letter-spacing: .12em; }
.landing-ticker div { width: max-content; animation: landingTicker 22s linear infinite; }
.landing-ticker span { margin: 0 1.2rem; }
@keyframes landingTicker { to { transform: translateX(-50%); } }

.landing-section, .related-section { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); }
.landing-heading { display: grid; grid-template-columns: 1.1fr .9fr; margin-bottom: 4rem; }
.landing-heading .landing-eyebrow { grid-column: 1 / -1; }
.landing-heading h2 { font-size: clamp(2.7rem, 5vw, 5.2rem); }
.pain-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; }
.pain-section .landing-heading { display: block; margin: 0; }
.pain-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #8d8577; }
.pain-list li { display: grid; grid-template-columns: 50px 1fr; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid #8d8577; }
.pain-list span { font: 700 .7rem Manrope, sans-serif; color: #2D5A47; }
.pain-list p { margin: 0; font-size: clamp(1.08rem, 1.6vw, 1.35rem); }

.urgency { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 13vw, 15rem); background: #FEB400; border-block: 1px solid #201F1B; }
.urgency h2 { max-width: 70rem; font-size: clamp(2.6rem, 5.2vw, 5.4rem); }
.urgency > p:last-child { max-width: 52rem; margin: 2rem 0 0 auto; font-size: 1.05rem; line-height: 1.8; }

.approach-section { background: #FFFDF7; }
.approach-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid #201F1B; }
.approach-grid article { min-height: 220px; padding: 1.5rem; border-right: 1px solid #201F1B; border-bottom: 1px solid #201F1B; position: relative; }
.approach-grid article:nth-child(2n) { border-right: 0; }
.approach-grid article:nth-last-child(-n+2) { border-bottom: 0; }
.approach-grid span { font: 700 .7rem Manrope, sans-serif; color: #2D5A47; }
.approach-grid p { max-width: 33rem; margin: 4rem 0 0; font-size: 1.1rem; }

.outcome-section { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); background: #201F1B; color: #FFFDF7; display: grid; grid-template-columns: .9fr 1.1fr; gap: 5rem; }
.outcome-section .landing-heading { display: block; margin: 0; }
.outcome-section .landing-eyebrow { color: #d1c8b5; }
.outcome-section ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid #554f43; }
.outcome-section li { display: flex; gap: 1.2rem; padding: 1.25rem 0; border-bottom: 1px solid #554f43; font-size: 1.08rem; }
.outcome-section li span { color: #FEB400; font-weight: 800; }

.package-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.package-grid article { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid #201F1B; background: #FFFDF7; box-shadow: 8px 8px 0 #FEB400; }
.package-name { font: 700 .72rem Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #2D5A47; }
.package-grid h3 { min-height: 4.7rem; font-size: 1.45rem; line-height: 1.35; }
.package-grid ul { padding-left: 1.2rem; min-height: 9rem; color: #504a40; }
.package-price { display: flex; flex-direction: column; border-top: 1px solid #D9D3C4; padding-top: 1rem; }
.package-price strong { font-size: 1.15rem; }
.package-price span { color: #625F55; }
.package-note { margin: 2rem 0 0; color: #625F55; }

.landing-case { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); background: #201F1B; color: #FFFDF7; display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; }
.landing-case .landing-eyebrow { color: #d1c8b5; }
.landing-case h2 { font-size: clamp(2.7rem, 5vw, 5.2rem); }
.landing-case > div > p:last-child { color: #cbc2af; line-height: 1.8; }
.landing-case figure { margin: 0; overflow: hidden; border: 1px solid rgba(254,180,0,.6); aspect-ratio: 1.53; }
.landing-case figure img { width: 100%; height: 100%; object-fit: contain; display: block; }
.landing-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #554f43; }
.landing-metrics div { padding: 1.4rem; border-right: 1px solid #554f43; }
.landing-metrics div:last-child { border-right: 0; }
.landing-metrics strong { display: block; color: #FEB400; font: 800 clamp(2.2rem, 4vw, 4rem)/1 Manrope, sans-serif; letter-spacing: -.08em; }
.landing-metrics span { font: 700 .7rem Manrope, sans-serif; letter-spacing: .08em; color: #cbc2af; }

.faq-section { background: #FFFDF7; }
.faq-list { border-top: 1px solid #201F1B; }
.faq-list details { border-bottom: 1px solid #201F1B; }
.faq-list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 50px 1fr 30px; padding: 1.35rem 0; font-size: 1.08rem; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { font: 700 .7rem Manrope, sans-serif; color: #2D5A47; }
.faq-list summary b { text-align: right; transition: transform .2s; }
.faq-list details[open] summary b { transform: rotate(45deg); }
.faq-list details > p { max-width: 55rem; margin: 0 0 1.5rem 50px; color: #504a40; line-height: 1.8; }

.related-section { background: #FEB400; }
.related-section h2 { font-size: clamp(2.6rem, 4.8vw, 5rem); max-width: 55rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; gap: 1px; background: #201F1B; border: 1px solid #201F1B; }
.related-grid a { min-height: 230px; padding: 1.3rem; background: #FFFDF7; position: relative; transition: background .25s; }
.related-grid a:hover { background: #FEB400; }
.related-grid span { font: 700 .7rem Manrope, sans-serif; color: #2D5A47; }
.related-grid h3 { margin: 4.5rem 0 0; font-size: 1.25rem; line-height: 1.3; }
.related-grid b { position: absolute; right: 1.3rem; bottom: 1.1rem; }

.landing-cta { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); background: #2D5A47; color: #FFFDF7; border-top: 1px solid #201F1B; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.landing-cta h2 { font-size: clamp(2.8rem, 5vw, 5.2rem); }
.landing-cta .landing-eyebrow { color: #FFFDF7; }
.landing-cta > div > p { max-width: 33rem; line-height: 1.8; }
.landing-contact-list { margin-top: 2rem; border-top: 1px solid rgba(255,253,247,.45); }
.landing-contact-list a { display: flex; gap: 1rem; justify-content: space-between; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,253,247,.45); font-weight: 650; }
.landing-contact-list span { width: 3.5rem; font: 700 .65rem Manrope, sans-serif; letter-spacing: .08em; }

@media (max-width: 800px) {
  .landing-header { height: 68px; }
  .landing-header nav { display: flex; margin-left: auto; }
  .landing-header nav > a { display: none; }
  .landing-header nav > a.landing-blog-link { display: inline; }
  .landing-services-menu > div { position: fixed; top: 68px; left: auto; right: 1.25rem; transform: none; width: min(410px, calc(100vw - 2.5rem)); }
  .landing-contact { font-size: .75rem; }
  .landing-hero, .pain-section, .outcome-section, .landing-case, .landing-cta { grid-template-columns: 1fr; }
  .landing-hero { min-height: auto; }
  .landing-signal { min-height: 330px; box-shadow: 10px 10px 0 #201F1B; }
  .landing-visual { box-shadow: 10px 10px 0 #FEB400; transform: rotate(-.5deg); }
  .pain-section, .outcome-section, .landing-case { gap: 3rem; }
  .landing-heading { grid-template-columns: 1fr; }
  .approach-grid, .package-grid { grid-template-columns: 1fr; }
  .approach-grid article { border-right: 0; border-bottom: 1px solid #201F1B !important; }
  .approach-grid article:last-child { border-bottom: 0 !important; }
  .related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .landing-header { gap: .75rem; }
  .landing-logo img { width: 130px; }
  .landing-contact { display: none; }
  .landing-hero h1 { font-size: 3rem; }
  .landing-metrics { grid-template-columns: 1fr; }
  .landing-metrics div { border-right: 0; border-bottom: 1px solid #554f43; }
  .landing-metrics div:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-ticker div { animation: none; }
  .landing-button, .related-grid a, .faq-list summary b { transition: none; }
}
