/* ===============================================================
   Kingsbridge Advisory - Site stylesheet
   ---------------------------------------------------------------
   Colours, fonts and page width come from the admin panel
   (table cms_settings) and are injected as CSS variables in index.php.
   This file holds only the structure that does not change.
   =============================================================== */

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.7 Arial,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%}.wrap{width:min(var(--wrap-max,1080px),calc(100% - 56px));margin:auto}.site-header{height:72px;background:var(--ink);color:var(--paper);display:flex;align-items:center;border-bottom:1px solid #34414b}.nav-wrap{display:flex;align-items:center;justify-content:space-between}.brand{display:block;width:145px}.brand img{display:none}.brand:before{content:"KINGSBRIDGE";display:block;font:17px/1 Georgia,serif;letter-spacing:.08em;color:#f7f5f0}.brand:after{content:"ADVISORY";display:block;margin-top:4px;font:8px/1 Consolas,monospace;letter-spacing:.36em;color:#a8813c}.nav{display:flex;align-items:center;gap:28px;font-size:13px}.nav a{padding:25px 0 20px;border-bottom:2px solid transparent}.nav a:hover,.nav a[aria-current=page]{color:#c9a75b;border-color:var(--brass)}.menu{display:none;background:none;border:0;color:white;font-size:24px}.hero{background:var(--ink);color:var(--paper);min-height:560px;position:relative;overflow:hidden}.hero:after,.photo-slot:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,24,32,.96) 0%,rgba(16,24,32,.72) 46%,rgba(16,24,32,.2) 100%)}.hero-art{position:absolute;inset:0 0 0 46%;opacity:.4;background:repeating-linear-gradient(135deg,#23333e 0 2px,transparent 2px 35px),radial-gradient(circle at 70% 28%,#bda56c 0 3%,transparent 4%),linear-gradient(145deg,#17242d,#847252)}.hero-copy{position:relative;z-index:1;padding:84px 0 76px;max-width:680px}.eyebrow,.meta{font:500 11px/1.4 Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.015em}h1{font-size:56px;line-height:1.06;margin:18px 0 22px}h2{font-size:34px;line-height:1.18;margin:10px 0 24px}h3{font-size:18px;line-height:1.4}.lead{font-size:20px;line-height:1.6;color:var(--slate)}.hero .lead{color:#d8dcdf;max-width:620px}.actions{display:flex;gap:20px;margin-top:32px}.button{display:inline-block;padding:11px 20px;background:var(--brass);color:#fff;font-size:13px;border:1px solid var(--brass)}.text-link{color:var(--brass);text-decoration:underline;text-underline-offset:3px}.button.secondary{background:transparent;border-color:#93a0a8}.section{padding:88px 0;border-bottom:1px solid var(--rule)}.section.tight{padding:58px 0}.center{text-align:center}.positioning{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:42px}.positioning div+div{border-left:1px solid var(--rule);padding-left:38px}.rule-list{border-top:1px solid var(--rule)}.rule-row{display:grid;grid-template-columns:54px 1.4fr 2fr 180px 30px;gap:18px;align-items:center;padding:20px 12px;border-bottom:1px solid var(--rule)}.rule-row .num{font:22px Georgia,serif}.thumb,.photo-slot{min-height:78px;position:relative;background:linear-gradient(135deg,#ded7c7,#9c8b68);overflow:hidden}.flow{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--rule);margin-top:40px}.flow div{padding:22px 14px;border-right:1px solid var(--rule);font-size:13px}.flow div:last-child{border:0}.flow b{display:block;font:22px Georgia;color:var(--brass);margin-bottom:8px}.cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}.card{padding:28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-height:190px}.card .num{font:16px Georgia;color:var(--brass)}.dark{background:var(--ink);color:var(--paper)}.dark .lead{color:#c7ced3}.split{display:grid;grid-template-columns:1fr 1fr;gap:64px}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:15px 12px;border-bottom:1px solid var(--rule);vertical-align:top}.table th{font:500 11px Consolas;color:var(--slate);text-transform:uppercase}.page-hero{padding:70px 0 64px;background:var(--ink);color:var(--paper)}.page-hero h1{font-size:46px;max-width:720px}.page-hero .lead{color:#cdd3d7;max-width:680px}.prose{max-width:680px}.notice{padding:24px;background:var(--ink);color:#dde2e5}.market-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px}.map{min-height:330px;background:radial-gradient(ellipse at 55% 50%,#c0a35e 0 8%,transparent 9%),linear-gradient(135deg,#eee8da,#d9c79e);display:grid;place-items:center;font:12px Consolas;color:var(--slate)}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.field{margin-bottom:22px}.field label{display:block;font:11px Consolas;text-transform:uppercase;letter-spacing:.08em}.field input,.field textarea,.field select{width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--rule);background:transparent;font:inherit}.field textarea{min-height:100px}.footer{background:var(--ink);color:#9aa5ad;padding:70px 0 38px;font-size:13px}.footer .brand{margin-bottom:30px}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:28px 0;border-top:1px solid #34414b;border-bottom:1px solid #34414b}.footer-nav{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px}.copyright{margin-top:28px}.placeholder{font-family:Consolas;color:var(--brass)}
@media(max-width:760px){.wrap{width:min(100% - 36px,680px)}.site-header{height:60px}.nav{display:none;position:absolute;z-index:10;top:60px;left:0;right:0;background:var(--ink);padding:25px 28px;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.menu{display:block}.brand{width:120px}.hero{min-height:620px}.hero-art{inset:42% 0 0}.hero:after{background:linear-gradient(180deg,rgba(16,24,32,.97) 0 60%,rgba(16,24,32,.55))}.hero-copy{padding:58px 0}h1{font-size:38px}.page-hero h1{font-size:36px}.lead{font-size:18px}.positioning,.cards,.split,.market-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}.positioning div+div{border-left:0;border-top:1px solid var(--rule);padding:22px 0 0}.flow{grid-template-columns:1fr 1fr}.flow div:nth-child(2n){border-right:0}.rule-row{grid-template-columns:40px 1fr 88px 22px}.rule-row p{grid-column:2/5;margin:0}.section{padding:64px 0}}

/* Refined typography: two type families, larger copy, calmer rhythm */
body{font-family:var(--font-body,Arial,"Helvetica Neue",sans-serif);font-size:18px;line-height:1.78;letter-spacing:0;color:var(--ink)}
p{max-width:68ch;margin:0 0 1.25em}
h1,h2{font-family:var(--font-head,Georgia,"Times New Roman",serif);font-weight:400}
h1{font-size:60px;line-height:1.08;margin:22px 0 28px}
h2{font-size:40px;line-height:1.22;margin:12px 0 30px}
h3{font-family:var(--font-body,Arial,"Helvetica Neue",sans-serif);font-size:21px;line-height:1.45;font-weight:600;margin:0 0 12px}
.lead{font-size:21px;line-height:1.7;max-width:64ch}
.eyebrow,.meta,.table th,.field label{font-family:Arial,"Helvetica Neue",sans-serif;font-size:12px;line-height:1.5;letter-spacing:.12em;font-weight:600}
.nav{font-size:14px;gap:32px}
.nav a{padding-top:24px}
.section{padding:104px 0}
.section.tight{padding:72px 0}
.page-hero{padding:88px 0 80px}
.page-hero h1{font-size:52px;line-height:1.12}
.hero-copy{padding-top:96px}
.positioning{gap:48px;margin-top:50px;text-align:left}
.positioning div+div{padding-left:48px}
.rule-row{padding:28px 16px;gap:24px}
.rule-row p{font-size:16px;line-height:1.65;color:var(--slate);margin:0}
.rule-row .num{font-size:24px}
.thumb{min-height:104px}
.card{padding:34px;min-height:210px}
.card p{font-size:16px;line-height:1.7;color:var(--slate)}
.flow div{padding:28px 18px;font-size:15px;line-height:1.55}
.table th,.table td{padding:18px 14px}
.table td{font-size:16px;line-height:1.65}
.contact-grid{gap:88px}
.field{margin-bottom:28px}
.field input,.field textarea,.field select{font-size:17px;padding:14px 0}
.footer{font-size:14px;line-height:1.75}
@media(max-width:760px){body{font-size:17px;line-height:1.75}h1{font-size:42px;line-height:1.12}h2{font-size:32px;line-height:1.25}h3{font-size:20px}.lead{font-size:19px;line-height:1.65}.page-hero h1{font-size:40px}.section{padding:72px 0}.section.tight{padding:56px 0}.page-hero{padding:64px 0 58px}.hero-copy{padding-top:64px}.rule-row{padding:24px 4px;gap:16px}.rule-row p{font-size:15px}.thumb{min-height:92px}.card{min-height:0;padding:28px}.contact-grid{gap:50px}}

/* Modern visual system */
body{background:var(--body-bg,#f4f2ed)}
.wrap{width:min(var(--wrap-max,1180px),calc(100% - 72px))}
.site-header{height:78px;background:rgba(16,24,32,.96);backdrop-filter:blur(14px);position:relative;z-index:20}
.nav-wrap{height:100%}
.brand{width:170px}
.brand:before{font-size:18px;letter-spacing:.1em}
.hero{min-height:680px;display:flex;align-items:center}
.hero-art{inset:0;opacity:1;background-size:cover!important;background-position:center!important}
.hero:after{background:linear-gradient(90deg,rgba(9,16,22,.96) 0%,rgba(9,16,22,.82) 43%,rgba(9,16,22,.2) 78%,rgba(9,16,22,.08) 100%)}
.hero-copy{padding:110px 0;max-width:720px}
.hero h1{font-size:66px;max-width:700px}
.hero .lead{max-width:660px;color:#e2e5e7}
.button{padding:14px 24px;font-weight:600;letter-spacing:.02em;transition:background .16s,color .16s,border-color .16s}
.button:hover{background:#c09a4c;border-color:#c09a4c}
.button.secondary:hover{background:#f7f5f0;color:#101820;border-color:#f7f5f0}
.section{background:var(--sec-a,#f7f5f0)}
.section:nth-of-type(even){background:var(--sec-b,#f1eee7)}
.page-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#101820,#1e2a35)}
.page-hero:after{content:"";position:absolute;width:420px;height:420px;right:-110px;top:-210px;border:1px solid rgba(168,129,60,.32);transform:rotate(28deg)}
.page-hero .wrap{position:relative;z-index:1}
.cards{gap:20px;border:0;grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--rule);background:#fff;overflow:hidden;position:relative;padding:32px;transition:transform .16s,border-color .16s}
.card:hover{transform:translateY(-3px);border-color:#a8813c}
.card-image{height:190px;margin:-32px -32px 28px;background-size:cover;background-position:center;position:relative}
.card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(16,24,32,.32))}
.rule-list{border-top:2px solid var(--ink)}
.rule-row{grid-template-columns:60px 1.25fr 1.8fr 250px 30px;min-height:168px;transition:background .14s}
.rule-row:hover{background:#fff}
.thumb{height:126px;min-height:126px;background-color:#101820;background-repeat:no-repeat}
.flow{background:#fff;border-color:#c9c4b8}
.flow div{position:relative}
.flow div b{font-family:Arial,sans-serif;font-size:13px;letter-spacing:.12em}
.table{background:#fff;border-top:2px solid var(--ink)}
.contact-grid form{background:#fff;border:1px solid var(--rule);padding:42px}
.notice{border-left:4px solid var(--brass)}
.footer{padding-top:84px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}.rule-row{grid-template-columns:48px 1fr 170px 24px}.rule-row p{grid-column:2/3}.hero h1{font-size:54px}}
@media(max-width:760px){.wrap{width:min(100% - 36px,680px)}.hero{min-height:660px}.hero-art{inset:0}.hero h1{font-size:42px}.hero:after{background:linear-gradient(180deg,rgba(9,16,22,.9),rgba(9,16,22,.76))}.cards{grid-template-columns:1fr}.card-image{height:210px}.rule-row{grid-template-columns:38px 1fr 110px 20px;min-height:142px}.thumb{height:96px;min-height:96px}.contact-grid form{padding:28px}.site-header{height:64px}}

/* Readability and richer strategy content */
.site-header{height:90px}
.brand{width:250px;min-width:250px}
.brand:before{font-size:25px;line-height:1;letter-spacing:.085em}
.brand:after{font-size:10px;letter-spacing:.4em;margin-top:7px}
.nav{font-size:17px;gap:38px;font-weight:500}
.nav a{padding:30px 0 26px}
.strategy-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.strategy-step{background:#fff;border:1px solid var(--rule);min-height:390px;display:flex;flex-direction:column}
.strategy-step-image{height:180px;background-size:cover;background-position:center}
.strategy-step-copy{padding:28px}
.strategy-step .step-number{display:block;color:var(--brass);font-size:12px;letter-spacing:.14em;font-weight:700;margin-bottom:12px}
.strategy-step h3{font-size:22px;margin-bottom:14px}
.strategy-step p{font-size:16px;line-height:1.7;color:var(--slate);margin:0}
.market-card{padding:0;min-height:320px}
.market-image{height:210px;background-size:400% 200%;background-repeat:no-repeat}
.market-card-copy{padding:24px 28px}
.market-card-copy h3{margin:0 0 6px}
.market-card-copy p{margin:0;color:var(--slate);font-size:15px}
.planning-panel{background:#fff;border-top:2px solid var(--ink);padding:30px 34px}
.planning-panel>p{font-size:16px;color:var(--slate);margin-bottom:22px}
.planning-item{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--rule)}
.planning-item:first-of-type{border-top:0}
.planning-item .num{font:18px Georgia,serif;color:var(--brass)}
.planning-item h3{font-size:18px;margin:0 0 5px}
.planning-item p{font-size:15px;line-height:1.6;color:var(--slate);margin:0}
body[data-theme="light"] .planning-panel{background:#fffdf8;border-top-color:#a77328}
@media(max-width:900px){.brand{width:210px;min-width:210px}.brand:before{font-size:21px}.nav{font-size:15px;gap:22px}.strategy-steps{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.site-header{height:72px}.brand{width:185px;min-width:185px}.brand:before{font-size:19px}.brand:after{font-size:8px}.strategy-steps{grid-template-columns:1fr}.strategy-step{min-height:0}.strategy-step-image{height:220px}.market-image{height:220px}}

/* Optional light presentation */
.nav-wrap>.nav{margin-left:auto}
.theme-toggle{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;margin-left:30px;border:1px solid rgba(168,129,60,.58);background:transparent;color:#f7f5f0;font-size:20px;line-height:1;cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.theme-toggle:hover{background:var(--brass);color:#fff;border-color:var(--brass)}
body[data-theme="light"]{--paper:#fbf8f1;--raised:#fffdf8;--rule:#ddd4c4;background:#fbf8f1;color:#172735}
body[data-theme="light"] .site-header{background:rgba(251,248,241,.97);color:#172735;border-bottom-color:#ddd4c4;box-shadow:0 8px 30px rgba(61,48,27,.05)}
body[data-theme="light"] .brand:before{color:#172735}
body[data-theme="light"] .nav a{color:#263744}
body[data-theme="light"] .nav a:hover,body[data-theme="light"] .nav a[aria-current=page]{color:#a77328}
body[data-theme="light"] .theme-toggle{color:#172735;background:#fffaf0;border-color:#c89a50}
body[data-theme="light"] .menu{color:#172735}
body[data-theme="light"] .hero{background:#f8f3e9;color:#172735}
body[data-theme="light"] .hero:after{background:linear-gradient(90deg,rgba(251,248,241,.99) 0%,rgba(251,248,241,.93) 42%,rgba(251,248,241,.42) 70%,rgba(251,248,241,.18) 100%)}
body[data-theme="light"] .hero .lead{color:#596773}
body[data-theme="light"] .page-hero{background:linear-gradient(120deg,#fffaf0,#eee4d2);color:#172735}
body[data-theme="light"] .page-hero .lead{color:#596773}
body[data-theme="light"] .page-hero:after{border-color:rgba(180,128,48,.28)}
body[data-theme="light"] .section{background:#fbf8f1}
body[data-theme="light"] .section:nth-of-type(even){background:#f4eee3}
body[data-theme="light"] .dark{background:#ece4d6;color:#172735}
body[data-theme="light"] .dark .lead{color:#596773}
body[data-theme="light"] .notice{background:#eee5d5;color:#172735}
body[data-theme="light"] .button.secondary{color:#172735;border-color:#9f8c70}
body[data-theme="light"] .button.secondary:hover{background:#172735;color:#fff;border-color:#172735}
body[data-theme="light"] .footer{background:#f1eadf;color:#596773;border-top:1px solid #d8cbb7}
body[data-theme="light"] .footer .brand:before{color:#172735}
body[data-theme="light"] .footer-grid{border-color:#d8cbb7}
@media(max-width:760px){.theme-toggle{width:38px;height:38px;font-size:18px;margin-left:auto;margin-right:10px}body[data-theme="light"] .nav{background:#fbf8f1;border-bottom:1px solid #ddd4c4}}

/* ---------------------------------------------------------------
   CMS additions
   ---------------------------------------------------------------
   The brand mark keeps the original behaviour: the wordmark is drawn
   with CSS pseudo-elements, and the <img> stays hidden. The text now
   comes from the admin panel via data-name / data-tagline attributes.
   Switching brand_mode to "image" in the admin shows the logo file
   instead.
   --------------------------------------------------------------- */
.brand:before{content:attr(data-name)}
.brand:after{content:attr(data-tagline)}
.brand.brand-image img{display:block;width:100%;height:auto}
.brand.brand-image:before,.brand.brand-image:after{content:none}
/* รูปในกรอบ: ใช้ <img loading="lazy"> แทน background-image ของ CSS
   object-fit:cover ให้ผลตาแบบเดียวกับ background-size:cover
   แต่เบราว์เซอร์จะโหลดเฉพาะรูปที่กำลังจะเลื่อนมาเห็น */
.card-image,.thumb,.strategy-step-image,.market-image{overflow:hidden}
.card-image>img,.thumb>img,.strategy-step-image>img,.market-image>img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
.market-image.market-sprite{background-size:400% 200%}
.section.flush{padding:0;border-bottom:0}
.kb-form .form-status{margin:0 0 14px;font-size:15px;line-height:1.5;display:none}
.kb-form .form-status.show{display:block}
.kb-form .form-status.ok{color:#2f6b3f}
.kb-form .form-status.err{color:#a33}
.kb-form.sending button{opacity:.55;pointer-events:none}
.kb-form input[hidden]{display:none!important}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:99;background:var(--brass);color:#fff;padding:10px 16px}