/* Flat compact hero — no dark panel: the hero sits directly on the page
   background at the same content width as the cards below (wrap = --maxw +
   40px padding, no inner panel padding). H1 left (~40%), intro right (~60%),
   vertically centred; roughly half the old panel height. */
.page-hero--editorial-wrap{ padding:24px 40px 0; max-width:var(--maxw); margin:0 auto; }
.page-hero{
  background:transparent; color:var(--heading); border-radius:0; padding:30px 0 26px;
  position:relative; overflow:visible;
  display:grid; grid-template-columns:2fr 3fr; gap:16px 48px; align-items:center;
}
.page-hero .ttl{
  font-family:var(--f); font-weight:600;
  font-size:clamp(2rem,3.4vw,2.75rem); line-height:1.08;
  letter-spacing:-.02em; color:var(--heading); max-width:18ch; text-wrap:balance;
}
.page-hero .sub{
  color:var(--body); font-weight:300; margin-top:0;
  max-width:54ch; font-size:1rem; line-height:1.55;
}

@media (max-width:900px){
  .page-hero--editorial-wrap{ padding:14px 22px 0; }
  .page-hero{ grid-template-columns:1fr; gap:10px; padding:16px 0 12px; align-items:start; }
}

/* CTA band (dark, "Have a question?" pattern from homepage) */
.cta-band{
  background:var(--nav); color:#fff;
  padding:72px 0; text-align:center;
}
.cta-band .eyebrow{
  color:var(--nav-muted); margin-bottom:18px; display:block;
  font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.cta-band h2{
  color:#fff; font-weight:400; font-size:clamp(1.75rem,2.6vw,2.25rem);
  line-height:1.2; letter-spacing:-.015em; max-width:18ch; margin:0 auto;
}
.cta-band .sub{
  color:#cfd3d8; font-weight:300; margin-top:18px; max-width:46ch;
  margin-left:auto; margin-right:auto; font-size:1rem; line-height:1.55;
}
.cta-band .actions{
  margin-top:32px; display:flex; gap:24px;
  justify-content:center; align-items:center; flex-wrap:wrap;
}
.cta-band .tlink{color:#fff}
.cta-band .tlink:hover{text-decoration-color:#fff}

/* Section band (centred title row) */
.section-band{margin-bottom:40px; text-align:center}
.section-band h2{
  font-weight:400; font-size:clamp(1.75rem,2.6vw,2.25rem);
  line-height:1.2; letter-spacing:-.015em; color:var(--heading);
}
.section-band .sub{
  color:var(--muted); font-weight:300; margin-top:14px;
  max-width:56ch; margin-left:auto; margin-right:auto; font-size:1rem;
}
.section-band--left{text-align:left}
.section-band--left .sub{margin-left:0; margin-right:0}

/* Bands */
.band{padding:96px 0}
.band--surface{background:var(--surface)}
.band--alt{background:var(--section-alt)}

/* Prose container */
.prose{max-width:720px; margin:0 auto; padding:88px 40px}
.prose p{font-weight:300; font-size:1.0625rem; line-height:1.75; color:var(--body); margin-bottom:20px}
.prose p:last-child{margin-bottom:0}
.prose p.lead{
  font-size:1.25rem; font-weight:300; line-height:1.55; color:var(--heading);
  margin-bottom:32px; text-wrap:balance;
}
.prose h2{
  font-weight:400; font-size:1.75rem; line-height:1.25; letter-spacing:-.015em;
  color:var(--heading); margin-top:56px; margin-bottom:18px;
}
.prose h3{
  font-weight:600; font-size:1.125rem; line-height:1.35;
  color:var(--heading); margin-top:36px; margin-bottom:12px;
}
.prose a{color:var(--heading); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border)}
.prose a:hover{text-decoration-color:var(--heading)}
.prose ul, .prose ol{padding-left:1.4em; margin-bottom:20px}
.prose ul li, .prose ol li{font-weight:300; font-size:1rem; line-height:1.7; color:var(--body); margin-bottom:6px}
.prose blockquote{
  margin:32px 0; padding:20px 24px;
  border-left:2px solid var(--sauna); background:var(--surface);
  font-style:italic; color:var(--heading); font-size:1.0625rem; line-height:1.6;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
}
.prose figure{margin:32px 0}
.prose figure img{border-radius:var(--r-lg); width:100%}
.prose figcaption{font-size:.82rem; color:var(--muted); margin-top:10px; text-align:center; font-style:italic}
.prose table{width:100%; border-collapse:collapse; margin:24px 0; font-size:.92rem}
.prose th{text-align:left; padding:12px 14px; background:var(--surface); color:var(--heading); font-weight:600; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--border)}
.prose td{padding:12px 14px; border-bottom:1px solid var(--hairline); color:var(--body)}
.prose .callout{
  margin:32px 0; padding:22px 26px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--hairline);
  display:flex; gap:14px; align-items:flex-start;
}
.prose .callout svg{width:20px; height:20px; flex:none; color:var(--heading); margin-top:2px; stroke-width:1.6; fill:none; stroke:currentColor}
.prose .callout .text{font-size:.95rem; line-height:1.65; color:var(--body)}
.prose .callout b{color:var(--heading); font-weight:600}

/* FAQ accordion (NEW COMPONENT — per brief) */
.faq-acc{border-top:1px solid var(--hairline)}
.faq-acc .faq{border-bottom:1px solid var(--hairline)}
.faq-acc .faq > summary{
  list-style:none; cursor:pointer; padding:22px 8px 22px 0;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:24px; font-family:var(--f); font-weight:500; font-size:1rem;
  color:var(--heading); line-height:1.4; transition:color .12s;
}
.faq-acc .faq > summary::-webkit-details-marker{display:none}
.faq-acc .faq > summary:hover{color:var(--sauna-text)}
.faq-acc .faq > summary::after{
  content:""; width:14px; height:14px; flex:none; margin-top:4px;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .25s ease;
}
.faq-acc .faq[open] > summary::after{transform:rotate(180deg)}
.faq-acc .faq[open] > summary{color:var(--heading)}
.faq-acc .faq > .answer{
  padding:0 0 24px 0; color:var(--body); font-size:.95rem;
  line-height:1.7; max-width:68ch; font-weight:300;
}
.faq-acc .faq > .answer p + p{margin-top:14px}
.faq-acc .faq > .answer a{color:var(--heading); text-decoration:underline; text-underline-offset:3px}

/* Responsive */
@media (max-width:900px){
  .wrap{padding:0 22px}
  .band{padding:64px 0}
  .cta-band{padding:64px 0}
  .prose{padding:64px 22px}
}

/* Contact-specific */
/* Compact 4-up strip directly under the hero: icon + title on one row, no
   description sentence, tighter padding — the cards are a quick-action rail,
   not feature cards. */
/* Renamed from .contact-methods to avoid colliding with the footer component
   of the same name in footer.css (its display:flex bled onto this section and
   shrank the .wrap to content width, insetting the card rail). */
.contact-card-rail{padding:28px 0 8px}
.method-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.cmethod{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  padding:20px 20px 16px; display:flex; flex-direction:column; gap:10px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.cmethod .cm-head{display:flex; align-items:center; gap:12px}
.cmethod:hover{
  transform:translateY(-2px); border-color:var(--border);
  box-shadow:var(--shadow-product);
}
.cmethod .ic-wrap{
  width:42px; height:42px; border-radius:50%; background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--heading); flex:none;
}
.cmethod .ic-wrap svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round}
/* Brand glyphs (LINE / WhatsApp cards) are fill-based; text-coloured like the header. */
.cmethod .ic-wrap svg.ry-ic-brand{fill:currentColor; stroke:none}
.cmethod h3{font-family:var(--f); font-weight:600; font-size:1.05rem; color:var(--heading); letter-spacing:-.005em}
.cmethod .rows{
  margin-top:6px; padding-top:14px; border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:8px;
}
.cmethod .rows a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:.92rem; color:var(--heading); font-weight:500;
  text-decoration:none; padding:6px 0; transition:color .12s;
}
.cmethod .rows a:hover{color:var(--cta)}
.cmethod .rows a .tag{
  font-size:.66rem; color:var(--muted); letter-spacing:.08em;
  text-transform:uppercase; font-weight:500;
}

/* Two-column body: form + info */
.contact-body{padding:32px 0 72px}
.contact-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:start;
}
/* Sidebar stacks as a flex column with ONE consistent gap. This is why the
   map, hours, head-office and service-area blocks always sit an even 48px
   apart — the old ".contact-section + .contact-section" adjacency broke the
   moment a non-section (the map) landed between two sections, dropping the
   head-office margin and leaving an uneven gap. Flex gap can't be defeated
   by intervening elements. */
.contact-grid > aside{ display:flex; flex-direction:column; gap:48px; }
/* ROW A (hours | map + head office) reads ~50/50, vs the form-weighted ROW B.
   Its two columns stack their sections on the same 48px rhythm as the aside. */
.contact-grid--info{ grid-template-columns:1fr 1fr; }
.contact-info-col{ display:flex; flex-direction:column; gap:48px; }
.contact-section h2{
  font-family:var(--f); font-weight:600; font-size:1.2rem; color:var(--heading);
  letter-spacing:-.005em; padding-bottom:14px; margin-bottom:18px;
  border-bottom:1px solid var(--hairline);
}
.contact-section p{font-size:.95rem; line-height:1.7; color:var(--body); margin-bottom:14px}
.contact-section p:last-child{margin-bottom:0}
.contact-section dl{display:grid; grid-template-columns:140px 1fr; gap:10px 20px; font-size:.95rem}
.contact-section dt{color:var(--muted); font-weight:500}
.contact-section dd{color:var(--heading); font-weight:500}
.contact-section ul{list-style:none; padding:0; display:grid; gap:8px}
.contact-section ul li{
  position:relative; padding-left:18px; font-size:.92rem;
  color:var(--body); line-height:1.55;
}
.contact-section ul li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:6px; height:1px; background:var(--sauna);
}

/* Google Maps embed — sits between the hours card and Head office in the
   sidebar flex column (no own margin; the column gap spaces it). Matches the
   sidebar card radius; wrapper clips the iframe corners. The neutral surface
   background is a fallback so that while tiles load (or if the frame is
   blocked upstream) the box reads as a light card, never a black void. */
.ry-contact-map{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--hairline); line-height:0; background:var(--surface);
}
.ry-contact-map iframe{display:block; width:100%; height:320px; border:0}

/* Form (NEW COMPONENT) */
.contact-form{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  padding:32px 32px 28px; box-shadow:var(--shadow-card);
}
.contact-form .form-head{margin-bottom:22px}
.contact-form .form-head h2{
  font-family:var(--f); font-weight:600; font-size:1.2rem;
  color:var(--heading); letter-spacing:-.005em; margin-bottom:6px;
}
.contact-form .form-head p{
  font-size:.88rem; color:var(--muted); line-height:1.55;
}
.field{margin-bottom:16px}
.field label{
  display:block; font-size:.78rem; font-weight:600; color:var(--body);
  margin-bottom:6px; letter-spacing:.01em;
}
.field label .opt{
  font-size:.7rem; font-weight:400; color:var(--muted);
  letter-spacing:0; margin-left:6px; text-transform:none;
}
.field input,
.field textarea,
.field select{
  width:100%; padding:11px 14px; font-family:var(--f); font-weight:300;
  font-size:.95rem; color:var(--heading); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-md);
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--placeholder); font-weight:300}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none; border-color:var(--nav); background:#fff;
  box-shadow:0 0 0 3px rgba(37,45,53,.08);
}
.field textarea{resize:vertical; min-height:110px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.contact-form .submit{margin-top:6px; width:100%}
.contact-form .form-foot{
  margin-top:14px; font-size:.78rem; color:var(--muted); text-align:center;
  line-height:1.5;
}

/* Appointment note (subtle, NEW COMPONENT) */
.appt-note{
  margin-top:14px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--hairline);
  display:flex; align-items:flex-start; gap:10px;
  font-size:.84rem; color:var(--body); line-height:1.55; font-weight:300;
}
.appt-note svg{
  width:15px; height:15px; flex:none; color:var(--muted);
  stroke:currentColor; stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round; margin-top:2px;
}

/* Thai mirror lines in the hours blocks — Sarabun, stacked under the English
   (same lang="th" convention as .ry-legal__th). */
.hours-th{display:block; font-family:var(--f-th); font-weight:300; font-size:.86em; color:var(--muted)}
.contact-section h2 .hours-th{font-size:.72em; margin-top:2px}
.appt-note--callout .hours-th{color:var(--peach-text); opacity:.85; margin-top:2px}

/* Prominent appointment/booking callout — peach highlight, dark text. */
.appt-note--callout{
  margin-top:16px; background:var(--peach); border-color:transparent;
  color:var(--peach-text); font-weight:400; font-size:.9rem;
}
.appt-note--callout svg{color:var(--peach-text)}
.appt-note--callout a{color:var(--peach-text); font-weight:600; text-decoration:underline}

/* Company legal / registration line under the head-office block. */
.contact-legal{margin-top:16px; padding-top:14px; border-top:1px solid var(--hairline)}

/* CTA band on contact — allow h2 to fit on one line */
.cta-band h2{ max-width:none; }

/* Consultation panel (NEW COMPONENT — replaces showroom visit) */
.consult-band{padding:64px 0; background:var(--surface)}
.consult-band .section-band{margin-bottom:24px}
.consult-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.consult-card{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  padding:30px 28px 28px; display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:inherit;
}
.consult-card,
.consult-card *{ text-decoration:none; }
.consult-card .num{
  width:32px; height:32px; border-radius:50%;
  background:var(--surface); color:var(--heading);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.92rem; margin-bottom:4px;
}
.consult-card h3{
  font-family:var(--f); font-weight:600; font-size:1.05rem;
  color:var(--heading); letter-spacing:-.005em;
}
.consult-card .dur{font-size:.74rem; color:var(--muted); letter-spacing:.04em}
.consult-card p{font-size:.92rem; line-height:1.6; color:var(--body); font-weight:300; flex:1}
.consult-card .pick{
  margin-top:6px; font-weight:600; font-size:.84rem; color:var(--heading);
  display:inline-flex; align-items:center; gap:6px;
  border-top:1px solid var(--hairline); padding-top:14px;
}
.consult-card .pick::after{content:"→"; transition:transform .2s}
.consult-card:hover .pick::after{transform:translateX(3px)}

@media (max-width:1200px){
  .method-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .method-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr; gap:40px}
  .consult-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .contact-section dl{grid-template-columns:1fr; gap:4px 0}
  .contact-section dd{margin-bottom:8px}
  .ry-contact-map iframe{height:260px}
}