/* ==========================================================================
   Acha Khao Piyo - shared core
   Tokens, base, brand, header nav, breadcrumb, section helpers,
   restaurant + post cards, footer. Loaded on every page.
   All font sizes in px per the saved design direction.
   ========================================================================== */

:root{
  --ink:#1c140f;
  --ink-soft:#4a3f37;
  --muted:#8a7b6d;
  --cream:#fffaf3;
  --paper:#ffffff;
  --border:#efe2d2;
  --primary:#ff4d1c;
  --primary-dark:#d33d13;
  --primary-tint:#fff1ea;
  --gold:#c1912f;
  --charcoal:#181210;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --shadow-sm:0 2px 8px rgba(28,20,15,.06);
  --shadow-md:0 10px 30px rgba(28,20,15,.09);
  --shadow-lg:0 20px 50px rgba(28,20,15,.16);
}

/* ============ Base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
/* Heading face. h4-h6 included so widget and card titles match. */
body h1,body h2,body h3,body h4,body h5,body h6,
body .entry-title,body .page-title,body .section-title{font-family:"Ivy Mode",Georgia,serif}
:where(h1,h2,h3){margin:0;color:var(--ink)}
.container{width:min(1280px,calc(100% - 40px));margin:auto}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
button{font-family:inherit}

/* ============ Brand lockup ============ */
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{width:30px;height:auto}
.footer-brand .brand img{width:150px}
.brand-word{font-family:"Ivy Mode",serif;font-size:20px;font-weight:600;letter-spacing:-.2px;line-height:1}
.brand-word i{font-style:italic;font-weight:500}
.brand-word b{font-weight:700}
.brand--light .brand-word{color:#fff}
.brand--dark .brand-word{color:var(--ink)}

/* ============ Header / nav ============ */
.site-topbar{background:var(--charcoal)}
.topbar{position:relative;z-index:3;border-bottom:1px solid rgba(255,255,255,.14)}
.topbar-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600;color:rgba(255,255,255,.88)}
.nav a{position:relative;padding:4px 0;transition:color .2s}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a:hover,.nav a.is-active,.nav .current-menu-item > a{color:#fff}
.nav a:hover:after,.nav a.is-active:after,.nav .current-menu-item > a:after{transform:scaleX(1)}
.nav-toggle{display:none}

/* ============ Breadcrumb ============ */
.breadcrumb-row{padding:20px 0 0}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb span.sep{color:#cbbfae}
.breadcrumb .current{color:var(--ink)}

/* ============ Section scaffolding ============ */
.section{padding:88px 0}
.section.soft{background:var(--paper)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.section-head-center{text-align:center;margin:0 auto 44px;max-width:560px}
.section-kicker{display:block;color:var(--primary);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.section-title{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.8px;font-weight:700;line-height:1.15}
.section-title em{color:var(--primary);font-style:italic;font-weight:500}
.section-title.center{text-align:center;margin:auto}
.section-desc{color:var(--muted);font-size:15px;max-width:360px;margin:10px 0 0}
.page-title em{font-style:italic;font-weight:500;color:var(--primary)}

/* ============ Restaurant card ============ */
.restaurant-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.restaurant{
  background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;
}
.restaurant:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.restaurant-image{height:150px;position:relative;overflow:hidden;background:#eee}
.restaurant-image img{width:100%;height:100%;object-fit:cover}
.restaurant-badge{
  position:absolute;top:10px;left:10px;
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(15,9,6,.75);backdrop-filter:blur(3px);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
}
.restaurant-logo{
  position:relative;z-index:2;width:44px;height:44px;margin:-22px 0 0 14px;border-radius:50%;
  background:#fff;border:3px solid #fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;
}
.restaurant-logo span,.restaurant-logo img{
  width:100%;height:100%;border-radius:50%;
  display:grid;place-items:center;object-fit:cover;
  background:var(--primary);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:-.3px;
}
.restaurant-logo img{background:none}
.restaurant-body{padding:10px 16px 16px}
.restaurant h3{font-family:"Inter",sans-serif;margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.3;color:var(--ink)}
.restaurant-meta{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);margin-bottom:2px}
.restaurant-meta span{display:inline-flex;align-items:center;gap:5px}
.restaurant-action{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.restaurant-action a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:13px;font-weight:700;transition:color .2s}
.restaurant-action a:hover{color:var(--primary)}
.restaurant-action a i{font-size:13px;line-height:1;transition:transform .2s}
.restaurant-action a:hover i{transform:translateX(3px)}
.restaurant-price{font-size:12px;color:var(--muted);font-weight:600}

/* ============ Post card shell ============ */
.post-card{
  background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

/* ============ Filter chips ============ */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--border);background:var(--paper);color:var(--ink-soft);
  font-family:inherit;font-size:12px;font-weight:600;
  padding:8px 14px;border-radius:999px;cursor:pointer;transition:all .2s;
}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.is-active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ============ Buttons ============ */
.see-more{
  display:flex;align-items:center;gap:8px;width:max-content;margin:44px auto 0;
  border:1.5px solid var(--ink);color:var(--ink);
  padding:12px 26px;border-radius:999px;font-size:13px;font-weight:700;transition:all .2s;
}
.see-more:hover{background:var(--ink);color:#fff}

/* ============ Footer ============ */
footer.akp-footer{background:var(--charcoal);color:#b8ada2}
.footer-main{padding:64px 0 48px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:48px}
.footer-brand p{font-size:13px;line-height:1.7;margin:18px 0 22px;max-width:280px;color:#9c9086}
.social{display:flex;gap:10px}
.social a{width:34px;height:34px;border:1px solid #33291f;border-radius:8px;display:grid;place-items:center;font-size:14px;color:#cfc6bb;transition:all .2s}
.social a:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.footer-col h4{margin:0 0 16px;font-size:13px;color:#fff;font-weight:700;letter-spacing:.2px}
.footer-col a,.footer-col p{display:block;font-size:13px;color:#9c9086;margin:11px 0;transition:color .2s}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid #2b2219;font-size:12px;padding:20px 0;color:#7b7168}
.footer-bottom-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom-inner a{color:#7b7168}
.footer-bottom-inner a:hover{color:#fff}

/* ============ Responsive (shared) ============ */
@media (max-width:980px){
  .restaurant-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:760px){
  .nav{
    position:fixed;inset:76px 0 0 0;background:var(--charcoal);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 24px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s;z-index:5;
  }
  .nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
    background:transparent;color:#fff;font-size:18px;cursor:pointer;
  }
  .section{padding:56px 0}
  .section-head{flex-direction:column;align-items:flex-start;gap:12px}
  .restaurant-grid{grid-template-columns:1fr 1fr;gap:12px}
  .restaurant-image{height:110px}
  .restaurant h3{font-size:14px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .footer-bottom-inner{flex-direction:column;text-align:center}
}
@media (max-width:460px){
  .restaurant-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Blocksy header + footer overrides
   Structure is built in the Customizer; this is the skin for it.
   ========================================================================== */

/* ---- Header bar ---- */
body .ct-header [data-row="middle"]{background:var(--charcoal)}
body .ct-header .site-title-container a,
body .ct-header .site-title a{
  font-family:"Ivy Mode",Georgia,serif;font-size:20px;font-weight:600;
  letter-spacing:-.2px;line-height:1;color:#fff;
}
body .ct-header nav[data-id="menu"] .ct-menu-link{
  position:relative;color:rgba(255,255,255,.88);
  font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:600;
  transition:color .2s;
}
body .ct-header nav[data-id="menu"] .ct-menu-link:after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .2s;
}
body .ct-header nav[data-id="menu"] li:hover > .ct-menu-link,
body .ct-header nav[data-id="menu"] .current-menu-item > .ct-menu-link{color:#fff}
body .ct-header nav[data-id="menu"] li:hover > .ct-menu-link:after,
body .ct-header nav[data-id="menu"] .current-menu-item > .ct-menu-link:after{transform:scaleX(1)}
body .ct-header [data-id="trigger"] .ct-toggle-close,
body .ct-header [data-id="trigger"]{color:#fff}

/* Home: Blocksy's Transparent Header handles the overlay and positioning.
   Only the hairline rule under it is ours. */
body.home .ct-header [data-row="middle"][data-transparent-row="yes"]{
  border-bottom:1px solid rgba(255,255,255,.14);
}

/* ---- Footer ---- */
body .ct-footer{background:var(--charcoal);color:#b8ada2}
body .ct-footer [data-row="middle"]{padding:64px 0 48px}
body .ct-footer [data-column]{color:#9c9086}
body .ct-footer p,
body .ct-footer .widget p{font-size:13px;line-height:1.7;color:#9c9086;margin:0 0 14px}
/* Column headings: the custom HTML columns use h4, the menu widgets use
   Blocksy's .widget-title, so both are styled together. */
body .ct-footer .footer-col h4,
body .ct-footer .widget-title{
  margin:0 0 16px;font-size:13px;color:#fff;font-weight:700;letter-spacing:.2px;
}

/* Menu widgets. inline-block keeps the hit area on the words rather than
   stretching the link across the whole column. */
body .ct-footer .widget_nav_menu ul,
body .ct-footer ul.widget-menu{list-style:none;margin:0;padding:0}
body .ct-footer ul.widget-menu li{margin:0 0 11px;padding:0;border:0}
body .ct-footer ul.widget-menu li:last-child{margin-bottom:0}
body .ct-footer ul.widget-menu li a{
  display:inline-block;width:auto;
  font-size:13px;color:#9c9086;line-height:1.4;
  transition:color .2s;
}
body .ct-footer ul.widget-menu li a:hover,
body .ct-footer ul.widget-menu li a:focus{color:var(--primary)}
body .ct-footer ul.widget-menu .current-menu-item > a{color:#fff}

/* Remaining custom HTML columns follow the same rule */
body .ct-footer .footer-col a{
  display:inline-block;width:auto;
  font-size:13px;color:#9c9086;margin:0 0 11px;transition:color .2s;
}
body .ct-footer .footer-col a:hover{color:var(--primary)}
body .ct-footer [data-row="bottom"]{
  border-top:1px solid #2b2219;font-size:12px;padding:20px 0;color:#7b7168;
}
body .ct-footer [data-row="bottom"] a{color:#7b7168}
body .ct-footer [data-row="bottom"] a:hover{color:#fff}
/* ==========================================================================
   Forms (contact, and anything reusing .akp-form)
   ========================================================================== */

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.contact-side{display:flex;flex-direction:column;gap:20px}
.akp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.akp-form{display:flex;flex-direction:column;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field > span{
  font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);
}
.akp-form input[type="text"],
.akp-form input[type="email"],
.akp-form select,
.akp-form textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;transition:border-color .15s,box-shadow .15s,background .15s;
}
.akp-form textarea{resize:vertical;min-height:150px;line-height:1.6}
.akp-form input:focus,
.akp-form select:focus,
.akp-form textarea:focus{
  outline:0;background:var(--paper);border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,77,28,.14);
}
.akp-form .cta-btn{align-self:flex-start;border:0;cursor:pointer;font-family:inherit}
.form-notice{
  padding:14px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;
  margin-bottom:4px;border:1px solid transparent;
}
.form-notice.is-ok{background:#eaf7ee;border-color:#bfe3ca;color:#1c6b34}
.form-notice.is-error{background:#fdeceb;border-color:#f3c6c2;color:#a3231b}
@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .form-row{grid-template-columns:1fr}
}

/* ==========================================================================
   Button label colours on hover and focus

   These buttons are <a> elements, so Blocksy's global link hover colour
   applies and repaints the label to palette colour 2 (ember dark). On a
   solid ember button that is nearly the background colour and the label
   disappears. Each button therefore states its own label colour for hover,
   focus and active instead of inheriting one.
   ========================================================================== */

body .cta-btn,
body .cta-btn:hover,
body .cta-btn:focus,
body .cta-btn:active,
body .directions-btn,
body .directions-btn:hover,
body .directions-btn:focus,
body .directions-btn:active,
body .profile-btn.primary,
body .profile-btn.primary:hover,
body .profile-btn.primary:focus,
body .profile-btn.primary:active,
body .hero-search-button,
body .hero-search-button:hover,
body .page-search-button,
body .page-search-button:hover,
body .cta-card a,
body .cta-card a:hover,
body .cta-card a:focus,
body .chip.is-active,
body .chip.is-active:hover{color:#fff}

/* Outline buttons fill on hover, so the label flips to white then too */
body .see-more{color:var(--ink)}
body .see-more:hover,
body .see-more:focus{background:var(--ink);color:#fff}

/* Ghost button keeps an ink label, tinting to ember only on hover */
body .profile-btn.ghost{color:var(--ink)}
body .profile-btn.ghost:hover,
body .profile-btn.ghost:focus{color:var(--primary);border-color:var(--primary)}

/* Text links that already carry an ember label */
body .read-more,
body .read-more:hover,
body .restaurant-entry-link a:hover{color:var(--primary-dark)}

/* Contact page: direct email block */
.contact-direct p{font-size:14px;color:var(--ink-soft);line-height:1.7;margin:0 0 16px}
.contact-email{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--primary-tint);color:var(--primary-dark);
  font-size:15px;font-weight:700;
  padding:12px 18px;border-radius:var(--radius-sm);
  border:1px solid #f7d9cb;word-break:break-all;
  transition:background .2s,color .2s,border-color .2s;
}
body .contact-email:hover,
body .contact-email:focus{background:var(--primary);border-color:var(--primary);color:#fff}
.contact-location{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--muted);margin:16px 0 0 !important;
}
.contact-location i,.contact-email i{color:var(--primary);font-size:13px}
body .contact-email:hover i{color:#fff}

/* Contact form card */
.contact-form-intro{font-size:14px;color:var(--ink-soft);line-height:1.7;margin:0 0 22px}
.contact-form-card .akp-form{gap:16px}

/* The theme sets a fixed control height, which crops the selected option.
   Height is left to the padding, and the native arrow is replaced so the
   control matches the text inputs beside it. */
.akp-form select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  height:auto;min-height:0;line-height:1.5;
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a7b6d' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:11px 7px;
}
.akp-form select:focus{background-color:var(--paper)}

/* Submit is a <button>, so it needs the flex rules restating */
.akp-form button.cta-btn{
  display:inline-flex;align-items:center;gap:9px;
  line-height:1;padding:15px 28px;
}
.akp-form button.cta-btn i{font-size:13px}

/* ==========================================================================
   Heading weight

   All headings run at 500. Ivy Mode ships no true 500 cut, so 500 is
   mapped to the SemiBold file in fonts.css rather than being synthesised
   by the browser, which would smear the letterforms.
   ========================================================================== */

body h1,body h2,body h3,body h4,body h5,body h6,
body .hero-heading,
body .page-title,
body .section-title,
body .article-title,
body .related-title,
body .featured-body h2,
body .cuisine-name,
body .brand-word,
body .entry-title,
body .cta h2,
body .cta-card h4,
body .profile-name h1,
body .empty-state strong{font-weight:500}

/* Accent words stay italic at the same weight */
body .hero-heading em,
body .section-title em,
body .page-title em,
body .cta h2 em,
body .related-title em{font-weight:500;font-style:italic}

/* ==========================================================================
   Permanently closed listings
   Kept visible and searchable, but visibly demoted so nobody drives out
   to a place that has shut.
   ========================================================================== */

/* Permanent closure is greyed out; a temporary one keeps its colour,
   because the place is coming back. */
.restaurant.is-closed .restaurant-image img{filter:grayscale(1);opacity:.65}
.restaurant.is-closed .restaurant-logo span,
.restaurant.is-closed .restaurant-logo img{filter:grayscale(1)}
.restaurant.is-closed h3 a{color:var(--muted)}
.restaurant.is-temporary .restaurant-image img{opacity:.8}
.restaurant-closed{
  position:absolute;top:10px;right:10px;max-width:calc(100% - 20px);
  display:inline-flex;align-items:center;
  background:rgba(28,20,15,.9);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
}

.status-banner{
  display:flex;align-items:center;gap:10px;
  background:#fdeceb;border:1px solid #f3c6c2;color:#a3231b;
  font-size:14px;font-weight:600;line-height:1.5;
  padding:13px 16px;border-radius:var(--radius-sm);
  margin:0 0 22px;
}
.status-banner i{color:#a3231b;font-size:15px;flex-shrink:0}

/* Status colours: amber for temporary, charcoal for permanent, green for open */
.restaurant-closed.status-temporary{background:rgba(193,145,47,.95)}
.status-banner{align-items:flex-start}
.status-banner span{display:block}
.status-banner .status-note{display:block;font-weight:600;opacity:.85;margin-top:3px}
.status-banner.status-temporary{background:#fdf4e3;border-color:#eddcb4;color:#8a6516}
.status-banner.status-temporary i{color:#8a6516}
.status-value.status-open{color:#1c6b34}
.status-value.status-temporary{color:#8a6516}
.status-value.status-closed{color:#a3231b}
.meta-row .status-value{font-weight:700}

/* ==========================================================================
   Search suggestions
   The parent field is the positioning context, so the panel lines up under
   the input it belongs to on both the hero and the directory search.
   ========================================================================== */

.search-field.has-suggest,
.page-search-field.has-suggest{position:relative}
.suggest-panel{
  position:absolute;top:calc(100% + 14px);left:-18px;right:-18px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  list-style:none;margin:0;padding:7px;
  max-height:340px;overflow-y:auto;z-index:60;
}
.suggest-panel[hidden]{display:none}
.suggest-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:9px;cursor:pointer;
  transition:background .12s;margin:0;
}
.suggest-item:hover,
.suggest-item.is-active{background:var(--primary-tint)}
.suggest-item > i{
  width:30px;height:30px;flex-shrink:0;border-radius:8px;
  display:grid;place-items:center;font-size:12px;
  background:var(--cream);color:var(--muted);
}
.suggest-item.type-restaurant > i{background:var(--primary-tint);color:var(--primary)}
.suggest-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.suggest-label{
  font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.suggest-label mark{background:none;color:var(--primary);font-weight:800;padding:0}
.suggest-sub{font-size:11px;color:var(--muted);font-weight:600}

@media (max-width:760px){
  .suggest-panel{left:0;right:0}
}

/* ==========================================================================
   About page
   Body copy is capped at a readable measure; the facts strip and the side
   cards break the page up so it does not read as one column of prose.
   ========================================================================== */

.about-facts{padding:34px 0;background:var(--paper);border-bottom:1px solid var(--border)}
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fact{display:flex;flex-direction:column;gap:5px;text-align:center}
.fact-figure{
  font-family:"Ivy Mode",Georgia,serif;font-size:34px;font-weight:500;
  color:var(--primary);line-height:1;letter-spacing:-.5px;
}
.fact-label{font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--muted);text-transform:uppercase}

.about-section{padding:64px 0 88px}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.about-body{max-width:68ch}
.about-body > *:first-child{margin-top:0}
.about-body h2{font-size:26px;margin:40px 0 12px;letter-spacing:-.4px}
.about-body h2:first-of-type{margin-top:8px}
.about-body p{margin:0 0 20px}
.about-body p:first-of-type{
  font-size:18px;line-height:1.7;color:var(--ink);
  padding-bottom:22px;border-bottom:1px solid var(--border);
}
.about-side{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px}
.about-side .info-card p{font-size:14px;margin-bottom:18px}
.about-side .cta-btn{font-size:13px;padding:12px 22px}

@media (max-width:980px){
  .about-grid{grid-template-columns:1fr;gap:36px}
  .about-side{position:static;flex-direction:row;flex-wrap:wrap}
  .about-side > *{flex:1 1 260px}
  .fact-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:600px){
  .about-section{padding:40px 0 56px}
  .fact-figure{font-size:28px}
}