/* HiSoServer Studio — Signature Hero / Luxury Edition
   Shared by every public service page and privacy page.
   Important: the tall, original photo.png is NEVER cropped; natural aspect ratio.
   No external assets, fonts, scripts, or database changes.
*/
section.hiso-hero {
  --hh-gold: #e8c488;
  --hh-gold-soft: #ffe4ac;
  --hh-cream: #f5f0e7;
  --hh-muted: #c9c3b9;
  --hh-border: rgba(232,196,136,.25);
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: clamp(24px,3.1vw,44px) 0 clamp(30px,3.5vw,49px) !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse 66% 60% at 76% 2%, rgba(165,108,49,.13), transparent 78%),
    radial-gradient(ellipse 49% 67% at 3% 74%, rgba(91,57,39,.21), transparent 84%),
    linear-gradient(180deg, #1b130f 0%, #110e0c 72%, #0f0d0b 100%) !important;
  color: var(--hh-cream);
  font-family: 'Noto Sans Thai', 'Sarabun', 'Leelawadee UI', Tahoma, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.66;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.hiso-hero *, .hiso-hero *::before, .hiso-hero *::after { box-sizing:border-box; }
.hiso-hero :where(h1,h2,h3,p,figure) { margin: 0; padding:0; }
.hiso-hero a { text-decoration: none; }
.hiso-hero a:focus-visible { outline:3px solid #ffe3b0; outline-offset:4px; }
.hiso-hero .hiso-h-container {
  width: min(var(--hiso-page-max, 1200px), calc(100% - var(--hiso-page-gap, 48px))) !important;
  max-width: 1200px;
  margin-inline: auto;
  min-width: 0;
}
.hiso-hero .hiso-h-kicker-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  padding: 0 3px 15px;
  color: #c9b68f;
  font-family: Arial, 'Leelawadee UI', Tahoma, sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 750;
}
.hiso-h-kicker-left, .hiso-h-kicker-right { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.hiso-h-kicker-left { color:#f0d5a5; }
.hiso-h-kicker-sun { font-size:17px; color:#e8bd73; line-height:1; }
.hiso-h-kicker-divider { display:block; height:1px; width:26px; background:linear-gradient(90deg,#e6c38b,transparent); }
.hiso-h-kicker-right span:not(.hiso-h-presence) { opacity:.46; }
.hiso-h-presence { display:block;width:6px;height:6px;border-radius:50%;background:#c29b63;box-shadow:0 0 0 4px rgba(226,184,105,.09); }
.hiso-hero .hiso-h-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: stretch;
  gap: clamp(15px,1.8vw,23px);
  min-width: 0;
}
.hiso-hero .hiso-h-content,
.hiso-hero .hiso-h-visual {
  position: relative;
  border: 1px solid var(--hh-border);
  border-radius: clamp(19px,2.5vw,30px);
  min-width: 0;
  box-shadow: 0 18px 52px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,250,227,.045);
}
.hiso-hero .hiso-h-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(21px,2.3vw,33px);
  padding: clamp(25px,3.15vw,42px);
  overflow: hidden;
  background:
    radial-gradient(circle at 95% 1%, rgba(202,149,69,.19), transparent 38%),
    linear-gradient(145deg,rgba(38,30,23,.98),rgba(16,16,14,.99) 63%,rgba(20,20,18,.99));
}
.hiso-hero .hiso-h-content::before { content:"";position:absolute;top:0;left:9%;right:9%;height:1px;background:linear-gradient(90deg,transparent,rgba(251,222,161,.74),transparent);pointer-events:none; }
.hiso-hero .hiso-h-content::after { content:"";position:absolute;right:-80px;top:13%;width:200px;height:200px;border:1px solid rgba(245,211,143,.045);border-radius:50%;pointer-events:none; }
.hiso-hero .hiso-h-top,.hiso-hero .hiso-h-bottom,.hiso-hero .hiso-h-ready { position:relative;z-index:1;min-width:0; }
.hiso-hero .hiso-h-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap:wrap;
  gap: 5px 9px;
  max-width:100%;
  padding: 9px 14px;
  border: 1px solid rgba(231,196,135,.32);
  border-radius: 999px;
  background: rgba(232,198,132,.065);
  color:#f4ddb4;
  font-size:clamp(11px,.95vw,13px);
  font-weight:750;
  line-height:1.65;
}
.hiso-h-badge-icon { color:#eec979;font-size:20px;line-height:1; }
.hiso-h-badge-dash { width:4px;height:4px;border-radius:100%;background:#d9ba7c;opacity:.7; }
.hiso-hero .hiso-h-title {
  max-width: 100%;
  margin: clamp(24px,2.8vw,37px) 0 19px;
  color: var(--hh-cream);
  font-weight: 850;
  font-size: clamp(34px,4vw,60px);
  line-height:1.17;
  letter-spacing:-.025em;
  text-wrap:pretty;
  overflow-wrap:anywhere;
}
.hiso-hero .hiso-h-title-accent {
  display:block;
  color:#f3d397;
  background:linear-gradient(110deg,#ffedbb 0%,#e2b565 55%,#f7e3b6 94%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hiso-hero .hiso-h-title-second { display:block;color:#f7f3ea;font-weight:720;font-size:.72em;letter-spacing:-.018em;line-height:1.42;margin-top:3px; }
.hiso-hero .hiso-h-lead { margin:0; max-width:54ch;color:#d8d0c3;font-size:clamp(15px,1.28vw,17px);line-height:1.95;overflow-wrap:break-word; }
.hiso-hero .hiso-h-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:clamp(23px,2.7vw,37px); }
.hiso-hero .hiso-h-action {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  min-height:69px;
  padding:11px 15px;
  border-radius:15px;
  border:1px solid transparent;
  box-shadow:0 10px 28px rgba(0,0,0,.19);
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
  font-size:14px;
}
.hiso-h-action:hover { transform:translateY(-2px);filter:brightness(1.075);box-shadow:0 15px 30px rgba(0,0,0,.28); }
.hiso-hero .hiso-h-action-line { background:linear-gradient(122deg,#0c9155,#086b45);border-color:rgba(94,219,156,.35);color:white; }
.hiso-hero .hiso-h-action-phone { background:linear-gradient(120deg,#f3d79c,#dfae5e);color:#2a2118;border-color:#f0d7a3; }
.hiso-h-action-symbol { display:grid;place-items:center; flex:0 0 29px;width:29px;height:29px;border:1px solid currentColor;border-radius:10px;font-size:16px;opacity:.85; }
.hiso-h-action span:has(strong) { min-width:0;display:flex;flex-direction:column;gap:1px; }
.hiso-h-action strong { font-size:clamp(12px,1.15vw,15px);line-height:1.37;white-space:normal; }
.hiso-h-action small { font:700 13px/1.3 Arial, 'Leelawadee UI',Tahoma,sans-serif;opacity:.88;letter-spacing:.01em; }
.hiso-h-action-arrow { margin-left:auto;align-self:flex-start;font-size:15px;opacity:.8; }
.hiso-hero .hiso-h-contact-note {display:flex;align-items:center;gap:8px;margin:13px 0 0;color:#b6afa5;font-size:12px;line-height:1.7;}
.hiso-h-contact-note span {color:#b7bc82;font-size:8px;flex:0 0 auto;}
.hiso-hero .hiso-h-ready {
  display:flex;flex-direction:column;justify-content:center;gap:11px;
  padding:17px 19px 19px;
  border:1px solid rgba(228,193,127,.18);
  border-radius:15px;
  background:linear-gradient(105deg,rgba(207,161,87,.07),rgba(233,206,151,.014));
}
.hiso-h-ready-overline {display:flex;align-items:center;gap:8px;color:#f3dab0;font-size:14px;font-weight:730;}
.hiso-h-ready-overline > span {font-size:17px;line-height:1;color:#dcb775;}
.hiso-h-ready-overline small {margin-left:auto;color:#96856a;font:700 9px/1.2 Arial,sans-serif;letter-spacing:.11em;}
.hiso-h-ready-items {display:flex;flex-wrap:wrap;gap:7px;}
.hiso-h-ready-items span {display:inline-block;padding:5px 10px;border:1px solid rgba(237,209,166,.14);border-radius:999px;background:rgba(255,250,236,.045);color:#d6c6a6;font-size:11px;}
.hiso-hero .hiso-h-bottom { padding-top:clamp(19px,2.6vw,31px);border-top:1px solid rgba(226,191,129,.2); }
.hiso-hero .hiso-h-benefits { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.hiso-hero .hiso-h-benefit {display:flex;align-items:flex-start;gap:9px;min-width:0;padding:12px 11px;background:rgba(255,248,228,.037);border:1px solid rgba(224,191,138,.15);border-radius:13px;}
.hiso-h-benefit-mark {display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:6px;background:rgba(227,188,118,.17);color:#f8d699;font-weight:bold;font-size:13px;margin-top:2px;}
.hiso-h-benefit strong {display:block;color:#f8edda;font-size:clamp(12px,1.02vw,14px);line-height:1.5;font-weight:750;}
.hiso-h-benefit small {display:block;color:#b7b0a7;font-size:11px;line-height:1.6;margin-top:3px;}
.hiso-hero .hiso-h-process {display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:19px;color:#cbbf9e;flex-wrap:wrap;font-weight:650;font-size:11px;}
.hiso-h-process div {min-width:0;white-space:normal;}
.hiso-h-process div span {color:#f3ce8f;font:800 11px/1 Arial,sans-serif;letter-spacing:.04em;margin-right:5px;}
.hiso-h-process i {display:block;width:clamp(8px,3.6vw,42px);height:1px;background:linear-gradient(90deg,rgba(240,204,144,.5),transparent);flex:0 1 auto;}
/* Portrait showroom: the marketing image is the original 931 × 1689 portrait,
   not a background. No fixed height and no cover crop anywhere. */
.hiso-hero .hiso-h-visual {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 13px clamp(12px,1.5vw,20px) 12px;
  overflow:visible;
  background:
    radial-gradient(ellipse 85% 75% at 50% 50%,rgba(160,117,59,.12),transparent 83%),
    linear-gradient(145deg,#15130f,#10100e 52%,#12140f);
}
.hiso-hero .hiso-h-visual-header, .hiso-hero .hiso-h-visual-footer {
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;
  font-family:Arial,'Leelawadee UI',Tahoma,sans-serif;
  font-size:clamp(9px,.85vw,11px);
  line-height:1.4;letter-spacing:.1em;font-weight:700;
  color:#cbb58f;
}
.hiso-h-visual-header { padding:0 4px 10px; }
.hiso-h-visual-header > span:first-child {display:flex;align-items:center;gap:9px;color:#f1d7aa;}
.hiso-h-photo-dot {display:block;width:7px;height:7px;border-radius:50%;background:#e6be7c;box-shadow:0 0 0 4px rgba(230,190,124,.12);}
.hiso-hero .hiso-h-image-stage {
  width: 100%;
  flex:1 1 auto;
  min-height: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(4px,.65vw,9px);
  border:1px solid rgba(233,201,152,.18);
  border-radius:18px;
  background:linear-gradient(140deg,rgba(255,221,156,.055),rgba(5,7,5,.25));
}
.hiso-hero .hiso-h-image {
  display:block;
  width:100% !important;
  max-width: 443px !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  aspect-ratio: 931 / 1689 !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius: 11px;
  box-shadow:0 12px 36px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.09);
}
.hiso-hero .hiso-h-visual-footer {padding:12px 4px 0;justify-content:flex-start;}
.hiso-h-visual-logo {font-size:16px;line-height:1;color:#e8c389;}
.hiso-h-visual-footer small {font-size:11px;color:#977f62;}
.hiso-h-visual-rule {flex:1 1 auto; height:1px; min-width:8px;background:linear-gradient(90deg,rgba(238,203,142,.33),transparent);}
.hiso-h-visual-index {white-space:nowrap;color:#8f8577;font-size:10px;letter-spacing:.09em;}
.hiso-hero .hiso-h-afterline {display:flex;align-items:center;gap:13px;flex-wrap:wrap;max-width:100%;margin-top:17px;padding:0 6px;color:#ad9f8f;font-size:12px;line-height:1.7;}
.hiso-h-afterline-motif {color:#d9b77f;}
.hiso-h-afterline-rule {height:1px;flex:1 1 45px;background:linear-gradient(90deg,rgba(219,173,107,.26),transparent);}
.hiso-hero .hiso-h-afterline a {color:#f3d6a5;font-weight:720;white-space:nowrap;}
.hiso-hero .hiso-h-afterline a:hover {color:#fff4df;}
@media (max-width:1070px) {
  .hiso-hero .hiso-h-layout {grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:15px;}
  .hiso-hero .hiso-h-content {padding:clamp(21px,3vw,30px);}
  .hiso-hero .hiso-h-title {font-size:clamp(32px,4vw,46px);}
  .hiso-hero .hiso-h-action {padding:10px;gap:7px;}
}
@media (max-width:860px) {
  .hiso-hero .hiso-h-layout {grid-template-columns:minmax(0,1fr);}
  .hiso-hero .hiso-h-content {padding:clamp(23px,5vw,36px);}
  .hiso-hero .hiso-h-title {font-size:clamp(35px,5.4vw,50px);}
  .hiso-hero .hiso-h-ready {display:none;}
  .hiso-hero .hiso-h-visual {width:100%;}
  .hiso-hero .hiso-h-image-stage {padding:12px;}
  .hiso-hero .hiso-h-image {max-width:440px!important;}
  .hiso-hero .hiso-h-kicker-right {display:none;}
}
@media (max-width:560px) {
  section.hiso-hero {padding:17px 0 26px!important;}
  .hiso-hero .hiso-h-kicker-bar {padding:0 5px 11px;font-size:9px;letter-spacing:.06em;}
  .hiso-hero .hiso-h-kicker-left {gap:7px;}
  .hiso-h-kicker-divider {width:12px;}
  .hiso-hero .hiso-h-content {padding:22px 18px;gap:22px;border-radius:22px;}
  .hiso-hero .hiso-h-badge {padding:7px 10px;font-size:10.5px;gap:6px;}
  .hiso-hero .hiso-h-title {font-size:clamp(31px,8vw,40px);margin:24px 0 13px;line-height:1.2;}
  .hiso-hero .hiso-h-title-second {font-size:.74em;line-height:1.5;}
  .hiso-hero .hiso-h-lead {font-size:14px;line-height:1.85;}
  .hiso-hero .hiso-h-actions {gap:9px;margin-top:20px;}
  .hiso-hero .hiso-h-action {min-height:66px;padding:9px 10px;gap:6px;}
  .hiso-h-action-symbol {display:none;}
  .hiso-h-action strong {font-size:13px;}
  .hiso-h-action small {font-size:12px;}
  .hiso-h-action-arrow {font-size:12px;}
  .hiso-hero .hiso-h-benefits {gap:7px;}
  .hiso-hero .hiso-h-benefit {padding:10px 8px;gap:7px;}
  .hiso-h-benefit-mark {flex-basis:16px;width:16px;height:16px;font-size:10px;border-radius:4px;}
  .hiso-h-benefit strong {font-size:11.5px;}
  .hiso-h-benefit small {font-size:10px;}
  .hiso-hero .hiso-h-process {font-size:10px;gap:5px;margin-top:15px;}
  .hiso-h-process div span {font-size:10px;}
  .hiso-h-process i {width:10px;}
  .hiso-hero .hiso-h-visual {padding:11px;border-radius:22px;}
  .hiso-hero .hiso-h-visual-header,.hiso-hero .hiso-h-visual-footer {font-size:9px;}
  .hiso-hero .hiso-h-image-stage {padding:6px;}
  .hiso-hero .hiso-h-image {max-width:100%!important;}
  .hiso-hero .hiso-h-afterline {font-size:11px;gap:8px;}
}
@media (max-width:350px) {
  .hiso-hero .hiso-h-actions {grid-template-columns:minmax(0,1fr);}
  .hiso-hero .hiso-h-benefits {grid-template-columns:minmax(0,1fr);}
  .hiso-hero .hiso-h-process i {display:none;}
  .hiso-hero .hiso-h-process {justify-content:flex-start;gap:6px 12px;}
  .hiso-hero .hiso-h-badge-dash {display:none;}
  .hiso-hero .hiso-h-kicker-bar {font-size:8px;}
}
@media (prefers-reduced-motion:reduce) {
  .hiso-hero .hiso-h-action {transition:none!important;}
  .hiso-hero .hiso-h-action:hover {transform:none;}
}