:root {
    --ct-red: #a71920;
    --ct-red-deep: #6f1014;
    --ct-red-dark: #3f090c;
    --ct-gold: #d4a64a;
    --ct-gold-deep: #a86b24;
    --ct-bronze: #a86a24;
    --ct-charcoal: #3d3733;
    --ct-black: #0d0b08;
    --ct-ink: #17130f;
    --ct-cream: #f5efe4;
    --ct-white: #fffdf8;
    --ct-muted: #b9aea1;
    --ct-shadow: 0 24px 70px rgba(13, 11, 8, .16);
}

html { scroll-behavior: smooth; }
body.chatayee-thai-site {
    background: var(--ct-cream);
    color: var(--ct-ink);
    font-family: "Inter", Arial, sans-serif;
    overflow-x: hidden;
}
body.chatayee-thai-site h1,
body.chatayee-thai-site h2,
body.chatayee-thai-site h3,
body.chatayee-thai-site h4 {
    font-family: "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.025em;
}
body.chatayee-thai-site img { max-width: 100%; }
body.chatayee-thai-site a { text-decoration: none; }
.ct-shell { width: min(1220px, calc(100% - 56px)); margin: 0 auto; }

/* Header */
.ct-site-header { position: relative; z-index: 1000; }
.ct-top-bar {
    width: 100%;
    padding: 10px 34px;
    background: var(--ct-black) !important;
    color: #d8c8ad;
    border-bottom: 1px solid rgba(212,166,74,.22);
}
.ct-top-message { font-size: 10px; letter-spacing: .24em; color: var(--ct-gold); font-weight: 700; }
.ct-top-link, .ct-top-link a { color: #e9dfcf !important; font-size: 12px !important; }
.ct-top-link i { color: var(--ct-gold); }
.ct-navbar {
    background: rgba(14,11,8,.98) !important;
    border-bottom: 1px solid rgba(212,166,74,.16);
    min-height: 86px;
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.ct-navbar .nav-header-container { padding-left: 34px; padding-right: 34px; }
.ct-navbar-brand { height: 78px; display: flex; align-items: center; }
.ct-navbar-brand .ct-logo { width: auto !important; max-height: 72px !important; object-fit: contain; }
.ct-navbar .navbar-nav > li > a.nav-link {
    color: #f4ead9 !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.ct-navbar .navbar-nav > li > a.nav-link:hover,
.ct-navbar .navbar-nav > li.active > a.nav-link { color: var(--ct-gold) !important; }
.ct-navbar .dropdown-menu {
    background: #17120e;
    border: 1px solid rgba(212,166,74,.25);
    box-shadow: 0 20px 45px rgba(0,0,0,.24);
}
.ct-navbar .dropdown-menu li a { color: #e7dcc9 !important; }
.ct-navbar .dropdown-menu li a:hover { color: var(--ct-gold) !important; background: rgba(212,166,74,.06); }
.ct-navbar .header-social-icon a { color: #e8dcc8 !important; }
.ct-navbar .header-social-icon a:hover { color: var(--ct-gold) !important; }
.ct-navbar .navbar-toggler-line { background-color: var(--ct-gold) !important; }

/* Shared type */
.ct-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ct-red);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 18px;
}
.ct-eyebrow:before { content: ""; width: 34px; height: 1px; background: currentColor; }
.ct-eyebrow-gold { color: var(--ct-gold); }
.ct-eyebrow-light { color: #f0dfbf; }

.ct-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 0 25px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: .25s ease;
}
.ct-button-gold { background: var(--ct-gold); color: var(--ct-black); }
.ct-button-gold:hover { background: #e4ba67; color: var(--ct-black); transform: translateY(-2px); }
.ct-button-outline { border-color: rgba(244,234,217,.45); color: #f4ead9; background: transparent; }
.ct-button-outline:hover { border-color: var(--ct-gold); color: var(--ct-gold); }
.ct-button-dark { background: var(--ct-black); color: #fff; }
.ct-button-dark:hover { background: var(--ct-red); color: #fff; }
.ct-button-full { width: 100%; }
.ct-text-link { color: var(--ct-red); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.ct-text-link span { margin-left: 7px; transition: margin .2s ease; }
.ct-text-link:hover span { margin-left: 12px; }
.ct-text-link-light { color: var(--ct-gold); }

/* Hero */
.ct-hero { background: var(--ct-black); padding: 70px 0 0; }
.ct-hero-grid { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 660px; align-items: stretch; }
.ct-hero-copy {
    padding: 92px 68px 84px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    position: relative;
}
.ct-hero-copy:after {
    content: "";
    position: absolute;
    right: 0; top: 9%; bottom: 9%; width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(212,166,74,.55), transparent);
}
.ct-hero-copy .ct-eyebrow { color: var(--ct-gold); }
.ct-hero h1 { color: #fff; font-size: clamp(58px, 6vw, 94px); line-height: .88; margin: 0 0 30px; font-weight: 600; }
.ct-hero h1 em { color: var(--ct-gold); font-weight: 600; }
.ct-hero-lead { color: #f3eadf; font-size: 19px; line-height: 1.7; max-width: 620px; margin-bottom: 18px; }
.ct-hero-subcopy { color: #bfb1a1; font-size: 15px; line-height: 1.8; max-width: 600px; }
.ct-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.ct-hero-notes { display: flex; gap: 10px 24px; flex-wrap: wrap; margin-top: 38px; color: #d2c3af; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; }
.ct-hero-notes span:before { content: "•"; color: var(--ct-gold); margin-right: 9px; }
.ct-hero-visual { min-width: 0; position: relative; overflow: hidden; }
.ct-hero-visual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,11,8,.34), transparent 24%); pointer-events: none; }
.ct-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Pillars */
.ct-pillar-strip { background: #1a1510; color: #fff; border-top: 1px solid rgba(212,166,74,.18); }
.ct-pillar-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.ct-pillar-grid article { padding: 34px 30px; border-right: 1px solid rgba(212,166,74,.14); }
.ct-pillar-grid article:last-child { border-right: 0; }
.ct-pillar-grid article > span { color: var(--ct-gold); font-size: 10px; letter-spacing: .14em; }
.ct-pillar-grid strong { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; margin: 6px 0 7px; color: #fff; }
.ct-pillar-grid p { margin: 0; color: #aa9d8c; font-size: 12px; line-height: 1.6; }

/* Sections */
.ct-section { padding: 110px 0; }
.ct-section-heading { margin-bottom: 54px; }
.ct-section-heading-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.ct-section-heading h2 { font-size: clamp(44px, 5vw, 72px); line-height: .95; margin: 0; color: var(--ct-ink); }
.ct-section-heading > p { font-size: 15px; line-height: 1.85; color: #6d6258; margin-bottom: 4px; }

/* Products */
.ct-products { background: #f6f0e6; }
.ct-product-grid { display: grid; gap: 44px; }
.ct-product-card { display: grid; grid-template-columns: 1.18fr .82fr; background: #fff; box-shadow: var(--ct-shadow); min-height: 520px; }
.ct-product-card-reverse { grid-template-columns: .82fr 1.18fr; }
.ct-product-card-reverse .ct-product-image { order: 2; }
.ct-product-card-reverse .ct-product-copy { order: 1; }
.ct-product-image { overflow: hidden; background: #160f0b; }
.ct-product-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.ct-product-card:hover .ct-product-image img { transform: scale(1.025); }
.ct-product-copy { padding: 68px 64px; display: flex; flex-direction: column; justify-content: center; }
.ct-product-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .17em; color: var(--ct-red); font-weight: 800; }
.ct-product-copy h3 { font-size: 54px; margin: 8px 0 15px; line-height: .95; }
.ct-product-copy p { font-size: 15px; line-height: 1.85; color: #6a6057; }
.ct-product-uses { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.ct-product-uses span { border: 1px solid #d8cabb; padding: 7px 10px; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: #5e544b; }

/* Chef */
.ct-chef { background: var(--ct-red-deep); color: #fff; padding: 110px 0; position: relative; overflow: hidden; }
.ct-chef:after { content: ""; position: absolute; right: -12%; bottom: -28%; width: 520px; height: 520px; border: 1px solid rgba(212,166,74,.13); border-radius: 50%; }
.ct-chef-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 90px; align-items: center; position: relative; z-index: 1; }
.ct-chef-image-wrap { position: relative; }
.ct-chef-image-wrap img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 66% center; box-shadow: 0 28px 60px rgba(0,0,0,.3); }
.ct-chef-caption { position: absolute; left: 28px; right: 28px; bottom: 28px; background: rgba(13,11,8,.88); padding: 18px 20px; border-left: 2px solid var(--ct-gold); }
.ct-chef-caption span { display:block; color: var(--ct-gold); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.ct-chef-caption strong { display:block; color:#fff; font-family:"Cormorant Garamond",Georgia,serif; font-size:24px; margin-top:3px; }
.ct-chef-copy h2 { color: #fff; font-size: clamp(48px,5vw,72px); line-height: .95; margin: 0 0 25px; }
.ct-chef-copy p { color: #d5c8bb; font-size: 15px; line-height: 1.85; }
.ct-chef-copy .ct-chef-lead { color: #fff4e7; font-size: 18px; }

/* Experience */
.ct-experience { position: relative; min-height: 700px; display: flex; align-items: center; overflow: hidden; background: #15100c; }
.ct-experience-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; transform: scale(1.02); }
.ct-experience:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,11,8,.92) 0%,rgba(13,11,8,.70) 45%,rgba(13,11,8,.26) 100%); }
.ct-experience-inner { position: relative; z-index: 2; }
.ct-experience-card { width: min(610px, 100%); background: rgba(13,11,8,.86); border: 1px solid rgba(212,166,74,.27); padding: 62px; box-shadow: 0 30px 80px rgba(0,0,0,.24); }
.ct-experience-card h2 { color:#fff; font-size:64px; margin:0 0 20px; }
.ct-experience-card p { color:#d8cbbc; line-height:1.9; font-size:15px; }
.ct-experience-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.ct-experience-tags span { color:#ead8ba; border:1px solid rgba(212,166,74,.28); padding:7px 10px; font-size:9px; text-transform:uppercase; letter-spacing:.11em; }

/* Table / usage */
.ct-table { background: var(--ct-white); }
.ct-table-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:80px; align-items:center; }
.ct-table-copy h2 { font-size: clamp(48px,5vw,70px); line-height:.98; margin:0 0 22px; }
.ct-table-copy > p { color:#6a6057; line-height:1.85; font-size:15px; }
.ct-use-list { margin:28px 0 34px; border-top:1px solid #ddcfc0; }
.ct-use-list div { display:grid; grid-template-columns:50px 1fr; gap:15px; padding:16px 0; border-bottom:1px solid #ddcfc0; }
.ct-use-list strong { color:var(--ct-red); font-size:11px; letter-spacing:.08em; }
.ct-use-list span { color:#564c43; line-height:1.55; font-size:13px; }
.ct-table-image-grid { display:grid; grid-template-columns:1.18fr .82fr; gap:16px; align-items:end; }
.ct-table-image-grid img { width:100%; object-fit:cover; box-shadow:0 20px 45px rgba(29,20,13,.14); }
.ct-table-image-main { aspect-ratio:4/5; }
.ct-table-image-small { aspect-ratio:4/5; margin-bottom:42px; }

/* Statement */
.ct-brand-statement { background: var(--ct-red); color:#fff; padding:75px 0; position:relative; overflow:hidden; }
.ct-brand-statement:after { content:""; position:absolute; top:-170px; right:-80px; width:420px; height:420px; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.ct-brand-statement-grid { display:grid; grid-template-columns:1fr .8fr; gap:90px; align-items:center; position:relative; z-index:1; }
.ct-brand-statement h2 { color:#fff; font-size:58px; line-height:.98; margin:0; }
.ct-brand-statement p { color:#f3d9d5; line-height:1.9; font-size:16px; margin:0; }

/* Contact */
.ct-contact { background:#17120e; padding:100px 0; color:#fff; }
.ct-contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:95px; align-items:start; }
.ct-contact-copy h2 { color:#fff; font-size:60px; line-height:.98; margin:0 0 20px; }
.ct-contact-copy > p { color:#c9bcad; font-size:15px; line-height:1.85; }
.ct-contact-details { display:grid; gap:13px; margin-top:30px; }
.ct-contact-details a,.ct-contact-details span { color:#eee3d4; font-size:13px; }
.ct-contact-details i { color:var(--ct-gold); margin-right:10px; }
.ct-contact-card { background:#f8f1e7; color:var(--ct-ink); padding:48px; box-shadow:0 25px 60px rgba(0,0,0,.24); }
.ct-contact-card h3 { font-size:42px; margin:0 0 24px; }
.ct-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ct-contact-card label { display:block; margin-bottom:15px; }
.ct-contact-card label span { display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; margin-bottom:7px; color:#51473f; }
.ct-contact-card input,.ct-contact-card textarea { width:100%; border:1px solid #d7c9ba; background:#fffdf9; padding:12px 13px; color:#241d18; outline:none; }
.ct-contact-card input:focus,.ct-contact-card textarea:focus { border-color:var(--ct-gold-deep); }
.ct-form-note { margin:12px 0 0; color:#8a7f74; font-size:10px; line-height:1.5; }

/* Footer */
.ct-footer { background:#0d0b08; color:#a99d8d; border-top:1px solid rgba(212,166,74,.18); }
.ct-footer-top { padding:76px 0 56px; }
.ct-footer-title { display:block; color:#fff; font-family:"Cormorant Garamond",Georgia,serif; font-size:24px; margin-bottom:18px; }
.ct-footer ul { list-style:none; padding:0; margin:0; }
.ct-footer li { margin-bottom:8px; }
.ct-footer a { color:#bfb19f; }
.ct-footer a:hover { color:var(--ct-gold); }
.ct-footer p { color:#9f9384; line-height:1.7; }
.ct-footer-bottom { padding:28px 0; border-top:1px solid rgba(255,255,255,.08); }
.ct-footer-bottom p { margin:0; font-size:11px; }
.ct-footer-logo img { max-height:82px; width:auto; }
.ct-footer-sep { color:#5b5248; margin:0 4px; }

.ct-mobile-actions { display:none; }

/* Blog preview compatibility: recolor generic preview blocks without depending on their markup. */
.chatayee-thai-site .dm-blog-preview,
.chatayee-thai-site .blog-preview-section { background: #f0e5d7 !important; }
.chatayee-thai-site .dm-blog-preview h2,
.chatayee-thai-site .blog-preview-section h2 { color: var(--ct-ink) !important; }

@media (max-width: 1199px) {
    .ct-shell { width:min(1120px,calc(100% - 40px)); }
    .ct-hero-grid { grid-template-columns:.9fr 1.1fr; min-height:590px; }
    .ct-hero-copy { padding-right:42px; }
    .ct-product-copy { padding:50px 44px; }
    .ct-chef-grid,.ct-table-grid { gap:55px; }
}

@media (max-width: 991px) {
    .ct-navbar { min-height:72px; }
    .ct-navbar-brand { height:62px; }
    .ct-navbar-brand .ct-logo { max-height:56px !important; }
    .ct-navbar .navbar-collapse { background:#17120e; padding:18px 22px; margin-top:8px; border-top:1px solid rgba(212,166,74,.18); }
    .ct-navbar .navbar-nav > li > a.nav-link { padding:10px 0 !important; }
    .ct-hero { padding-top:72px; }
    .ct-hero-grid { grid-template-columns:1fr; }
    .ct-hero-copy { padding:74px 0 58px; }
    .ct-hero-copy:after { display:none; }
    .ct-hero-visual { min-height:500px; }
    .ct-pillar-grid { grid-template-columns:1fr 1fr; }
    .ct-pillar-grid article:nth-child(2) { border-right:0; }
    .ct-pillar-grid article:nth-child(-n+2) { border-bottom:1px solid rgba(212,166,74,.14); }
    .ct-section-heading-split,.ct-chef-grid,.ct-table-grid,.ct-contact-grid,.ct-brand-statement-grid { grid-template-columns:1fr; gap:38px; }
    .ct-product-card,.ct-product-card-reverse { grid-template-columns:1fr; }
    .ct-product-card-reverse .ct-product-image,.ct-product-card-reverse .ct-product-copy { order:initial; }
    .ct-product-image { min-height:420px; }
    .ct-chef-image-wrap img { aspect-ratio:16/11; object-position:center 40%; }
    .ct-experience { min-height:620px; }
    .ct-experience-card { padding:48px; }
    .ct-table-image-grid { max-width:740px; }
    .ct-footer-grid > div { margin-bottom:32px; }
}

@media (max-width: 767px) {
    .ct-shell { width:calc(100% - 30px); }
    .ct-section { padding:78px 0; }
    .ct-hero h1 { font-size:56px; }
    .ct-hero-lead { font-size:17px; }
    .ct-hero-visual { min-height:360px; }
    .ct-pillar-grid { grid-template-columns:1fr; }
    .ct-pillar-grid article { border-right:0; border-bottom:1px solid rgba(212,166,74,.14); padding:26px 8px; }
    .ct-pillar-grid article:last-child { border-bottom:0; }
    .ct-section-heading-split { gap:22px; }
    .ct-product-image { min-height:310px; }
    .ct-product-copy { padding:38px 28px; }
    .ct-product-copy h3 { font-size:45px; }
    .ct-chef { padding:78px 0; }
    .ct-chef-copy h2,.ct-contact-copy h2,.ct-brand-statement h2 { font-size:48px; }
    .ct-experience { min-height:590px; }
    .ct-experience-card { padding:35px 28px; }
    .ct-experience-card h2 { font-size:48px; }
    .ct-table-image-grid { grid-template-columns:1fr 1fr; gap:9px; }
    .ct-table-image-small { margin-bottom:20px; }
    .ct-contact-card { padding:34px 24px; }
    .ct-form-grid { grid-template-columns:1fr; gap:0; }
    .ct-brand-statement { padding:58px 0; }
    .ct-mobile-actions { display:grid; position:fixed; left:0; right:0; bottom:0; z-index:2000; grid-template-columns:1fr 1fr; box-shadow:0 -8px 25px rgba(0,0,0,.2); }
    .ct-mobile-actions a { background:#0d0b08; color:#fff; text-align:center; padding:13px 8px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; border-right:1px solid rgba(212,166,74,.2); }
    .ct-mobile-actions a:last-child { background:var(--ct-red); }
    .ct-mobile-actions i { margin-right:6px; color:var(--ct-gold); }
    .ct-footer-bottom { padding-bottom:70px; }
}

/* =========================================================
   Chatayee Thai refinement pass - 2026-09-13
   Monogram/scroll header, gap repair, solid experience panel,
   and YouTube feature sections.
   ========================================================= */

/* Prevent any theme-generated white spacer between the shared header and hero. */
body.chatayee-thai-site main,
body.chatayee-thai-site .ct-site-header + main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.chatayee-thai-site .ct-site-header { margin-bottom: 0 !important; }
body.chatayee-thai-site .ct-hero { margin-top: 0 !important; padding-top: 0 !important; }

/* Use a subtle gold mark instead of numbered brand pillars. */
.ct-pillar-grid article > .ct-pillar-mark {
    display: block;
    width: 34px;
    height: 2px;
    margin: 0 0 12px;
    background: var(--ct-gold);
    opacity: .95;
}

/* Word-led cooking steps, without numeric labels. */
.ct-use-list div { grid-template-columns: 92px 1fr; }
.ct-use-list strong {
    color: var(--ct-red);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
}

/* Warm Crisp Bold: intentionally no photographic background. */
.ct-experience {
    min-height: 0;
    padding: 112px 0;
    background: var(--ct-red-deep);
    display: block;
}
.ct-experience:after,
.ct-experience-bg { display: none !important; }
.ct-experience-inner { position: relative; z-index: 2; }
.ct-experience-card {
    width: min(840px, 100%);
    margin: 0 auto;
    padding: 66px 72px;
    background: var(--ct-black);
    border: 1px solid rgba(212,166,74,.3);
    border-left: 3px solid var(--ct-gold);
    box-shadow: 0 28px 70px rgba(0,0,0,.2);
}
.ct-experience-card h2 {
    font-size: clamp(54px, 6vw, 78px);
    line-height: .94;
    margin: 0 0 22px;
}
.ct-experience-card p { max-width: 720px; }

/* Video collection */
.ct-video-feature {
    padding: 110px 0;
    background: #f6f0e6;
}
.ct-video-heading {
    max-width: 860px;
    margin-bottom: 52px;
}
.ct-video-heading h2 {
    font-size: clamp(48px, 5vw, 72px);
    line-height: .96;
    margin: 0 0 18px;
}
.ct-video-heading > p {
    max-width: 720px;
    margin: 0;
    color: #6a6057;
    font-size: 15px;
    line-height: 1.85;
}
.ct-feature-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
.ct-video-card {
    background: #fff;
    box-shadow: var(--ct-shadow);
    overflow: hidden;
}
.ct-video-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.ct-video-frame-wide { aspect-ratio: 16 / 9; }
.ct-video-frame iframe,
.ct-short-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.ct-video-card-copy { padding: 30px 32px 34px; }
.ct-video-card-copy h3 {
    margin: 7px 0 0;
    font-size: 36px;
    line-height: 1.04;
}

.ct-video-shorts {
    padding: 100px 0 112px;
    background: var(--ct-black);
    color: #fff;
}
.ct-shorts-heading {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 46px;
}
.ct-shorts-heading .ct-eyebrow { margin-bottom: 6px; }
.ct-shorts-heading h2 {
    color: #fff;
    font-size: clamp(48px, 5vw, 68px);
    line-height: .96;
    margin: 0;
}
.ct-shorts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.ct-short-frame {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #090806;
    border: 1px solid rgba(212,166,74,.24);
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

/* Dadia-style desktop logo behavior. */
@media (min-width: 992px) {
    .ct-site-header,
    .ct-site-header .ct-navbar,
    .ct-site-header .nav-header-container,
    .ct-site-header .navbar-brand,
    .ct-site-header .navbar-collapse,
    .ct-site-header .navbar-nav {
        overflow: visible !important;
    }

    .ct-navbar-brand {
        position: relative !important;
        width: 190px;
        min-width: 190px;
        height: 78px;
        display: block;
    }

    /* Initial state: large monogram drops below the header into the hero. */
    .ct-site-header:not(.sticky) .navbar-brand .default-logo,
    .ct-site-header.ct-at-top .navbar-brand .default-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 6px !important;
        top: -42px !important;
        width: auto !important;
        height: 180px !important;
        max-height: 180px !important;
        object-fit: contain !important;
        z-index: 20 !important;
        transform: none !important;
        margin: 0 !important;
    }

    .ct-site-header:not(.sticky) .navbar-brand .alt-logo,
    .ct-site-header:not(.sticky) .navbar-brand .mobile-logo,
    .ct-site-header.ct-at-top .navbar-brand .alt-logo,
    .ct-site-header.ct-at-top .navbar-brand .mobile-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Scrolled/stopped state: replace monogram with the horizontal secondary logo. */
    .ct-site-header.ct-scroll-stopped.sticky .navbar-brand .default-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }

    .ct-site-header.ct-scroll-stopped.sticky .navbar-brand .alt-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        height: 54px !important;
        max-height: 54px !important;
        object-fit: contain !important;
        z-index: 20 !important;
        margin: 0 !important;
    }

    /* Roll the sticky header away while actively scrolling, then return it. */
    .ct-site-header.ct-scroll-moving .navbar.header-reverse-scroll {
        -webkit-transform: translate3d(0, -112%, 0) !important;
        transform: translate3d(0, -112%, 0) !important;
        -webkit-transition: -webkit-transform .28s ease !important;
        transition: transform .28s ease !important;
        box-shadow: none !important;
    }
    .ct-site-header.ct-scroll-stopped.sticky .navbar.header-reverse-scroll {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transition: -webkit-transform .32s ease !important;
        transition: transform .32s ease !important;
        overflow: visible !important;
    }

    .ct-site-header.ct-scroll-stopped .navbar-nav > li.dropdown.open > .dropdown-menu,
    .ct-site-header.ct-scroll-stopped .navbar-nav > li.dropdown:hover > .dropdown-menu,
    .ct-site-header.ct-scroll-stopped .navbar-nav > li.dropdown:focus-within > .dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 100000 !important;
    }
}

@media (max-width: 991px) {
    /* Mobile uses the horizontal logo and reserves only the actual mobile navbar height. */
    body.chatayee-thai-site .ct-hero { padding-top: 72px !important; }
    .ct-navbar-brand { position: relative; }
    .ct-navbar-brand .default-logo { display: none !important; }
    .ct-navbar-brand .mobile-logo {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-height: 48px !important;
    }
    .ct-feature-video-grid { grid-template-columns: 1fr; }
    .ct-shorts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-shorts-heading { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 767px) {
    .ct-experience { padding: 78px 0; }
    .ct-experience-card { padding: 42px 28px; }
    .ct-video-feature { padding: 78px 0; }
    .ct-video-card-copy { padding: 24px; }
    .ct-video-card-copy h3 { font-size: 31px; }
    .ct-video-shorts { padding: 76px 0 84px; }
    .ct-shorts-grid { gap: 10px; }
    .ct-use-list div { grid-template-columns: 78px 1fr; }
}

/* =========================================================
   Chatayee Thai refinement pass - v3
   Header gap / instant logo swap / media radius / section balance
   ========================================================= */

/* The shared navigation is fixed, so the header itself must not reserve
   any document-flow height. This removes the light/white strip that the
   Litho header/top-space treatment can leave before the hero. */
body.chatayee-thai-site header.ct-site-header {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
body.chatayee-thai-site header.ct-site-header + main,
body.chatayee-thai-site main,
body.chatayee-thai-site main > .ct-hero:first-child {
    margin-top: 0 !important;
}
body.chatayee-thai-site .ct-navbar {
    top: 0 !important;
    margin-top: 0 !important;
}

/* Media treatment: a restrained 5px radius on photography and video. */
.ct-hero-visual img,
.ct-product-image img,
.ct-chef-image-wrap img,
.ct-experience-image-wrap img,
.ct-table-image-grid img,
.ct-video-frame,
.ct-short-frame {
    border-radius: 5px;
}
.ct-video-frame,
.ct-short-frame,
.ct-hero-visual,
.ct-product-image,
.ct-chef-image-wrap,
.ct-experience-image-wrap,
.ct-table-image-grid {
    overflow: hidden;
}

/* Restaurant sensibility section: copy left, Chef image right. */
.ct-chef-grid {
    grid-template-columns: 1.08fr .92fr;
    gap: 90px;
}
.ct-chef-copy { order: 1; }
.ct-chef-image-wrap { order: 2; }

/* Warm Crisp Bold: editorial image on the left, brand statement on right. */
.ct-experience {
    min-height: 0;
    padding: 110px 0;
    background: var(--ct-red-deep);
    display: block;
}
.ct-experience:after,
.ct-experience-bg { display: none !important; }
.ct-experience-grid {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 82px;
    align-items: center;
}
.ct-experience-image-wrap {
    position: relative;
    max-width: 540px;
    width: 100%;
    justify-self: start;
    box-shadow: 0 30px 70px rgba(0,0,0,.28);
}
.ct-experience-image-wrap img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center;
}
.ct-experience-card {
    width: 100%;
    max-width: 720px;
    margin: 0;
    padding: 64px 68px;
    background: var(--ct-black);
    border: 1px solid rgba(212,166,74,.3);
    border-left: 3px solid var(--ct-gold);
    box-shadow: 0 28px 70px rgba(0,0,0,.2);
    justify-self: end;
}
.ct-experience-card p { max-width: 590px; }

/* Desktop: the monogram exists only in the exact top state. As soon as
   scrolling begins it is removed from rendering (no slide/translate), and
   the horizontal secondary logo replaces it. */
@media (min-width: 992px) {
    .ct-navbar-brand .default-logo,
    .ct-navbar-brand .alt-logo {
        transition: none !important;
        animation: none !important;
    }

    .ct-site-header.ct-at-top .navbar-brand .default-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .ct-site-header.ct-at-top .navbar-brand .alt-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }

    .ct-site-header.ct-scrolled .navbar-brand .default-logo,
    .ct-site-header.sticky .navbar-brand .default-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        transform: none !important;
    }

    .ct-site-header.ct-scrolled .navbar-brand .alt-logo,
    .ct-site-header.sticky .navbar-brand .alt-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        height: 54px !important;
        max-height: 54px !important;
        object-fit: contain !important;
        margin: 0 !important;
        z-index: 20 !important;
    }
}

@media (max-width: 991px) {
    .ct-chef-grid,
    .ct-experience-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }
    .ct-chef-copy { order: 1; }
    .ct-chef-image-wrap { order: 2; }
    .ct-experience-image-wrap {
        max-width: 620px;
        justify-self: center;
    }
    .ct-experience-image-wrap img {
        aspect-ratio: 16 / 11;
        object-position: center 38%;
    }
    .ct-experience-card {
        max-width: none;
        justify-self: stretch;
    }
}

@media (max-width: 767px) {
    .ct-experience-card { padding: 40px 28px; }
    .ct-experience-image-wrap img { aspect-ratio: 4 / 5; }
}

/* Keep the same small radius across content photography, including blog-preview images. */
body.chatayee-thai-site main img {
    border-radius: 5px;
}

/* =========================================================
   Chatayee Thai refinement pass - v4
   Monogram sizing/position and consistent 5px card radii
   ========================================================= */

/* Desktop monogram: keep the complete mark inside the viewport while
   allowing it to hang well below the navigation, Dadia's-style. */
@media (min-width: 992px) {
    .ct-site-header.ct-at-top .navbar-brand .default-logo,
    .ct-site-header:not(.sticky):not(.ct-scrolled) .navbar-brand .default-logo {
        top: 0 !important;
        left: 4px !important;
        height: 205px !important;
        max-height: 205px !important;
        width: auto !important;
        object-fit: contain !important;
        object-position: top center !important;
        margin: 0 !important;
    }
}

/* Product feature panels: one clean 5px radius around the entire section. */
.ct-product-card,
.ct-product-card-reverse {
    border-radius: 5px;
    overflow: hidden;
}

/* The two horizontal video cards should read as one video + text unit:
   round only the exposed top corners of the video, not the seam where
   video meets the white copy card. */
.ct-feature-video-grid .ct-video-frame {
    border-radius: 5px 5px 0 0 !important;
}
.ct-feature-video-grid .ct-video-frame iframe {
    border-radius: 5px 5px 0 0;
}

/* Keep the vertical Shorts rounded on all four corners. */
.ct-shorts-grid .ct-short-frame,
.ct-shorts-grid .ct-short-frame iframe {
    border-radius: 5px;
}

/* Contact form card. */
.ct-contact-card {
    border-radius: 5px;
    overflow: hidden;
}

/* =========================================================
   Chatayee Thai refinement pass - v5
   Hero image / button radius / biography polish
   ========================================================= */

/* The opening hero photograph should remain edge-to-edge and square. */
body.chatayee-thai-site .ct-hero-visual,
body.chatayee-thai-site .ct-hero-visual img {
    border-radius: 0 !important;
}

/* Slight rounding for all primary buttons. */
body.chatayee-thai-site .ct-button {
    border-radius: 3px !important;
}

/* Chef biography — two editorial portraits on the left, biography on the right. */
.ct-biography {
    padding: 112px 0;
    background: #f7f0e5;
    border-top: 1px solid rgba(168,106,36,.12);
}
.ct-biography-grid {
    display: grid;
    grid-template-columns: .94fr 1.06fr;
    gap: 84px;
    align-items: center;
}
.ct-biography-images {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
    align-items: start;
}
.ct-biography-image {
    overflow: hidden;
    border-radius: 5px;
    background: #1b120d;
    box-shadow: 0 20px 45px rgba(13,11,8,.12);
}
.ct-biography-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px !important;
}
.ct-biography-image-primary {
    aspect-ratio: 4 / 5;
}
.ct-biography-image-primary img {
    object-position: center 34%;
}
.ct-biography-image-secondary {
    aspect-ratio: 4 / 5;
    margin-top: 58px;
}
.ct-biography-image-secondary img {
    object-position: 69% center;
}
.ct-biography-copy h2 {
    margin: 0 0 24px;
    color: var(--ct-ink);
    font-size: clamp(46px, 4.7vw, 70px);
    line-height: .95;
}
.ct-biography-copy p {
    color: #665b51;
    font-size: 15px;
    line-height: 1.86;
    margin-bottom: 20px;
}
.ct-biography-copy .ct-biography-lead {
    color: #2e2721;
    font-size: 18px;
    line-height: 1.78;
}

@media (max-width: 991px) {
    .ct-biography {
        padding: 86px 0;
    }
    .ct-biography-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }
    .ct-biography-images {
        max-width: 760px;
        width: 100%;
    }
}

@media (max-width: 575px) {
    .ct-biography-images {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .ct-biography-image-secondary {
        margin-top: 28px;
    }
    .ct-biography-copy h2 {
        font-size: 44px;
    }
}

/* =========================================================
   Chatayee Thai refinement pass - v6
   Reliable inline SVG contact/social icons + final bio images
   ========================================================= */

/* Hidden SVG symbol library injected by includes/header.php. */
.ct-icon-sprite {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.ct-ui-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    vertical-align: middle;
    color: currentColor;
}

/* Header social icons: icon only, with no theme-generated square/rectangle. */
body.chatayee-thai-site .ct-navbar .header-social-icon {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    line-height: 1;
}
body.chatayee-thai-site .ct-navbar .header-social-icon a.ct-social-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #e8dcc8 !important;
    line-height: 1 !important;
}
body.chatayee-thai-site .ct-navbar .header-social-icon a.ct-social-link:hover {
    color: var(--ct-gold) !important;
    background: transparent !important;
}
body.chatayee-thai-site .ct-navbar .header-social-icon .ct-ui-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

/* Contact information: reliable line icons rather than icon-font glyphs. */
.ct-contact-details a,
.ct-contact-details > span {
    display: flex;
    align-items: center;
    gap: 11px;
}
.ct-contact-details .ct-ui-icon {
    color: var(--ct-gold);
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}
.ct-contact-details a > span,
.ct-contact-details > span > span {
    color: inherit;
    font-size: inherit;
}

/* Footer contact and social icons, stripped of the theme's icon boxes. */
.ct-footer-contact-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.ct-footer-contact-line .ct-ui-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    color: var(--ct-gold);
}
body.chatayee-thai-site .ct-footer .social-icon-style-12 ul {
    display: flex;
    align-items: center;
    gap: 16px;
}
body.chatayee-thai-site .ct-footer .social-icon-style-12 ul li {
    margin: 0 !important;
}
body.chatayee-thai-site .ct-footer .social-icon-style-12 ul li a.ct-social-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 19px !important;
    height: 19px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #d5c8b7 !important;
    line-height: 1 !important;
}
body.chatayee-thai-site .ct-footer .social-icon-style-12 ul li a.ct-social-link:hover {
    color: var(--ct-gold) !important;
    background: transparent !important;
}
body.chatayee-thai-site .ct-footer .social-icon-style-12 .ct-ui-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

/* Mobile action icons now use the same dependable SVG system. */
.ct-mobile-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.ct-mobile-actions .ct-ui-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    color: var(--ct-gold);
}

/* Use the supplied biography photographs at their natural proportions. */
.ct-biography-images {
    align-items: start;
}
.ct-biography-image-primary,
.ct-biography-image-secondary {
    aspect-ratio: auto;
}
.ct-biography-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}
.ct-biography-image-secondary {
    margin-top: 54px;
}

@media (max-width: 575px) {
    .ct-biography-image-secondary {
        margin-top: 24px;
    }
}

@media (min-width: 576px) {
    body.chatayee-thai-site .ct-navbar .header-social-icon.d-sm-inline-block {
        display: inline-flex !important;
    }
}