/* ============================================================
   Daniel Siew — Online Feng Shui Consultation
   v6 — "Claude Design" redesign, converted from the delivered
   Daniel Siew Landing.dc.html into plain HTML/CSS/JS.

   Per the design's own handoff notes, this is deliberately
   inline-styles-first: almost all layout/type/colour lives in
   style="" attributes on each element in index.html, exactly as
   delivered. This stylesheet only holds what inline styles can't
   express — responsive overrides and a few state-driven selectors.
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; background: #F7F4ED; color: #1E1C18; font-family: 'Jost', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #9A7B4F; text-decoration: none; }
a:hover { color: #1E1C18; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
details[open] .plus { transform: rotate(45deg); }
input, textarea, select, button { font-family: inherit; }

/* booking wizard tabs */
[data-tab][data-active="true"] { background: #FCFAF6 !important; color: #1E1C18 !important; padding-bottom: 16px !important; }
[data-tabs] { scrollbar-width: none; }
[data-tabs]::-webkit-scrollbar { display: none; }

/* fee card bullet list */
[data-bullets] li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start; }
[data-bullets] li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9A7B4F; margin-top: 9px; }

/* hover states — kept as plain CSS since style-hover="" is a design-tool
   authoring attribute, not a real browser feature */
[data-hover-fill] { transition: background .2s, color .2s; }
[data-hover-fill]:hover { background: #9A7B4F !important; color: #FCFAF6 !important; }
[data-hover-outline]:hover { background: #9A7B4F !important; }

/* sensible default so JS-driven panels don't flash visible before
   main.js runs on a slow connection */
[data-step-panel] { display: none; }
[data-step-panel][data-visible="true"] { display: block; }

@media (max-width: 1080px) {
  [data-r="five"] { grid-template-columns: repeat(3, 1fr) !important; gap: 40px 26px !important; }
  [data-r="two"] { gap: 56px !important; }
}
@media (max-width: 860px) {
  [data-r="two"], [data-r="five"], [data-r="four"] { grid-template-columns: 1fr !important; gap: 44px !important; }
  [data-r="four"] { gap: 0 !important; }
  [data-r="four"] > div { border-right: 0 !important; border-bottom: 1px solid #E2DBCE; padding: 22px 0 !important; }
  [data-r="four"] > div:last-child { border-bottom: 0; }
  [data-r="navlinks"] { display: none !important; }
  [data-sticky-col] { position: static !important; }
  /* the bonsai figcaption's -180px margin is tuned for the desktop image
     width (460px) to sit in the illustration's empty lower space; at the
     smaller mobile image size that same offset pulls it up into the
     branches instead, so it's rendered but effectively illegible */
  #process figcaption { margin-top: 14px !important; margin-right: 0 !important; }
  section { padding-left: 22px !important; padding-right: 22px !important; }
  #personal, #prepare, #study, #fee, #faq, #start, #process { padding-top: 84px !important; padding-bottom: 84px !important; }
  #personal img, #personal figure img { height: 420px !important; }
  header { padding: 16px 22px !important; }
  [data-r="five"] h3 { min-height: 0 !important; }
  #start > div:last-child { padding: 30px 22px !important; }
  #start ol { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  header a[href="#top"] { font-size: 15px !important; letter-spacing: .12em !important; }
  header a[href="#start"] { font-size: 10px !important; padding: 10px 14px !important; letter-spacing: .12em !important; white-space: nowrap; }
  header { padding: 14px 18px !important; }
  #top h1 { font-size: 34px !important; line-height: 1.14 !important; }
  #top p { font-size: 14px !important; line-height: 1.65 !important; }
  #top > div > p:first-child { font-size: 9.5px !important; letter-spacing: .2em !important; }
  #top a[href="#start"] { font-size: 11px !important; padding: 15px 26px !important; }
  #top > div { padding-bottom: 72px !important; }
  section h2 { font-size: 28px !important; line-height: 1.18 !important; }
  section p, section li { text-wrap: pretty; }
  #personal p, #prepare p, #process p, #study p, #fee p, #faq p, #start p { font-size: 14.5px !important; line-height: 1.7 !important; }
  #personal figure img { height: 320px !important; }
  #personal p[style*="italic"], figure figcaption { font-size: 12px !important; }
  section h3, section h4 { font-size: 19px !important; }
  #fee aside { padding: 32px 24px !important; }
  #fee aside p[style*="66px"] { font-size: 40px !important; }
  #faq summary { font-size: 19px !important; }
  #start > div:last-child { padding: 26px 18px !important; }
  #start ol span { font-size: 9.5px !important; letter-spacing: .12em !important; }
  footer nav { gap: 16px !important; font-size: 10.5px !important; }
  footer > div { flex-direction: column; align-items: center !important; text-align: center; gap: 24px !important; }
  footer > div > span:first-child { font-size: 34px !important; letter-spacing: .18em !important; line-height: 1.2; }
  footer > div > span:last-child { font-size: 10px !important; }
  #personal figcaption { font-size: 10px !important; letter-spacing: .1em !important; white-space: nowrap; text-align: left; }
  [data-sticky-bar] { padding: 10px 14px !important; }
  [data-sticky-bar] a { font-size: 10px !important; padding: 12px 16px !important; white-space: nowrap; letter-spacing: .1em !important; }
  [data-sticky-bar] strong { font-size: 12.5px !important; }
  [data-sticky-bar] span { font-size: 11px !important; }
  [data-tab] { padding: 11px 13px !important; font-size: 9.5px !important; letter-spacing: .1em !important; }
}