/*
Theme Name: tSelach Tech Services
Theme URI: https://tselach.com
Author: tSelach Tech Services, LLC
Author URI: https://tselach.com
Description: A modern, calm, premium theme for tSelach Tech Services, the SMB AI advisor and automation partner. Built around the tSelach mark, this theme highlights AI Receptionist, Cybersecurity, and Managed IT services with a restrained orange-and-green accent palette, refined serif/sans typography, a built-in light/dark mode, and a fast AJAX-powered "Get Free Assessment" form.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tselach
Tags: custom-menu, custom-logo, translation-ready, threaded-comments, one-column, two-columns, footer-widgets, accessibility-ready
*/

/* =========================================================
   1. FONT FACES (self-hosted, variable fonts)
   ========================================================= */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/fraunces-variable.woff2') format('woff2-variations'),
       url('assets/fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-variable-italic.woff2') format('woff2-variations'),
       url('assets/fonts/fraunces-variable-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-variable.woff2') format('woff2-variations'),
       url('assets/fonts/inter-variable.woff2') format('woff2');
}

/* =========================================================
   2. DESIGN TOKENS
   ========================================================= */
:root{
  /* Brand */
  --c-orange:      #E8571F;
  --c-orange-2:    #F7941D;
  --c-green:       #3FA23A;
  --c-green-2:     #8FC93F;
  --brand-gradient: linear-gradient(120deg, var(--c-orange) 0%, var(--c-orange-2) 45%, var(--c-green-2) 75%, var(--c-green) 100%);

  /* Light mode surface */
  --bg:            #FAF8F3;
  --bg-alt:        #F1EDE3;
  --surface:       #FFFFFF;
  --surface-2:     #FCFBF8;
  --border:        #E6E1D3;
  --ink:           #16181A;
  --ink-soft:      #565A54;
  --ink-faint:     #8A8D85;
  --ink-on-dark:   #F5F2EA;

  --shadow-sm: 0 1px 2px rgba(20,20,15,0.05), 0 1px 1px rgba(20,20,15,0.04);
  --shadow-md: 0 10px 30px -12px rgba(20,20,15,0.18);
  --shadow-lg: 0 24px 60px -20px rgba(20,20,15,0.28);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --container: 1200px;
  --container-narrow: 780px;

  --ease: cubic-bezier(.25,.8,.25,1);
  color-scheme: light;
}

html[data-theme="dark"]{
  --bg:            #0D0F0D;
  --bg-alt:        #161815;
  --surface:       #1A1C19;
  --surface-2:     #202320;
  --border:        #2C2F2A;
  --ink:           #F3F0E8;
  --ink-soft:      #B4B7AE;
  --ink-faint:     #797D74;
  --ink-on-dark:   #F3F0E8;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 10px 30px -12px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 70px -20px rgba(0,0,0,0.65);

  --c-orange:  #F1652C;
  --c-orange-2:#FBA23B;
  --c-green:   #4FBE47;
  --c-green-2: #9ED854;
  color-scheme: dark;
}

/* =========================================================
   3. RESET
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
img, svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; }
h1,h2,h3,h4,h5,p,figure{ margin:0; }
::selection{ background: var(--c-orange); color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background: var(--ink); color:#fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }
html[data-theme="dark"] .skip-link{ background: var(--ink-on-dark); color:#101210; }

/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: 'opsz' 40;
}
h1{ font-size: clamp(2.4rem, 5.6vw, 4.35rem); font-variation-settings: 'opsz' 144; letter-spacing: -0.02em; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.85rem); font-variation-settings: 'opsz' 90; }
h3{ font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
h4{ font-size: 1.05rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow::before{
  content:"";
  width: 22px; height: 2px;
  background: var(--brand-gradient);
  border-radius: 2px;
  display:inline-block;
}
.lede{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 620px;
}
.accent-italic{
  font-style: italic;
  font-weight: 500;
  color: var(--c-orange);
}
html[data-theme="dark"] .accent-italic{ color: var(--c-orange-2); }

/* =========================================================
   5. LAYOUT UTILITIES
   ========================================================= */
.container{ max-width: var(--container); margin-inline:auto; padding-inline: 28px; }
.container-narrow{ max-width: var(--container-narrow); margin-inline:auto; padding-inline: 28px; }
.section{ padding: clamp(64px, 9vw, 128px) 0; position:relative; }
.section-alt{ background: var(--bg-alt); }
.section-ink{ background: var(--ink); color: var(--ink-on-dark); }
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4{ color: var(--ink-on-dark); }
.section-ink .lede{ color: rgba(243,240,232,0.72); }
html[data-theme="dark"] .section-ink{ background: var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.grid{ display:grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-2{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){ .grid-4{ grid-template-columns: 1fr; } }

.stack{ display:flex; flex-direction:column; }
.cluster{ display:flex; align-items:center; flex-wrap:wrap; }
.gap-xs{ gap:8px; } .gap-sm{ gap:14px; } .gap-md{ gap:22px; } .gap-lg{ gap:40px; }

.section-head{ max-width: 700px; margin-bottom: 48px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head > .eyebrow{ margin-bottom: 16px; }
.section-head > h2{ margin-bottom: 18px; }

.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   6. BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  position:relative;
}
.btn-primary{
  background: var(--ink);
  color: var(--ink-on-dark);
  box-shadow: var(--shadow-sm);
  border-bottom: 3px solid transparent;
  border-image: var(--brand-gradient) 1;
  border-width: 0 0 3px 0;
  border-style: solid;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
html[data-theme="dark"] .btn-primary{ background: var(--ink-on-dark); color:#101210; }

.btn-outline{
  background: transparent;
  border-color: var(--border);
  color: var(--ink);
}
.btn-outline:hover{ border-color: var(--c-orange); color: var(--c-orange); transform: translateY(-2px); }

.btn-ghost{
  background: transparent;
  color: var(--ink-on-dark);
  border-color: rgba(245,242,234,0.28);
}
.btn-ghost:hover{ border-color: var(--c-green-2); color: var(--c-green-2); }

.btn-lg{ padding: 18px 36px; font-size: 1.05rem; }
.btn-sm{ padding: 11px 20px; font-size: 0.88rem; }
.btn-block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight: 600; font-size: 0.95rem; color: var(--ink);
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 3px;
  transition: border-color .2s var(--ease), color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover{ border-color: var(--c-orange); color: var(--c-orange); gap:12px; }
.link-arrow svg{ width:16px; height:16px; }

/* =========================================================
   7. HEADER / NAV
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 999;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-scrolled{ border-bottom-color: var(--border); box-shadow: 0 8px 24px -20px rgba(0,0,0,0.4); }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px; padding: 16px 0;
}
.brand{ display:flex; align-items:center; }
.brand img{ height: 42px; width:auto; }
.logo-dark{ display:none; }
html[data-theme="dark"] .logo-light{ display:none; }
html[data-theme="dark"] .logo-dark{ display:block; }

.primary-nav{ display:flex; align-items:center; gap:6px; }
.primary-nav ul{ display:flex; align-items:center; gap: 4px; }
.primary-nav a{
  display:inline-block; padding: 10px 16px; border-radius: var(--radius-pill);
  font-weight: 500; font-size: 0.96rem; color: var(--ink-soft);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.primary-nav a:hover, .primary-nav .current-menu-item > a{ color: var(--ink); background: var(--bg-alt); }
.primary-nav li.nav-cta a{
  background: var(--ink); color: var(--ink-on-dark) !important; padding: 11px 22px; margin-left: 8px;
  border-bottom: 2px solid var(--c-orange);
}
.primary-nav li.nav-cta a:hover{ background: var(--c-orange); border-color: var(--c-green); }
html[data-theme="dark"] .primary-nav li.nav-cta a{ background: var(--ink-on-dark); color:#101210 !important; }

.header-actions{ display:flex; align-items:center; gap: 10px; }
.theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border);
  background: var(--surface); display:flex; align-items:center; justify-content:center;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.theme-toggle:hover{ border-color: var(--c-orange); transform: rotate(14deg); }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
  background: var(--surface); align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{ display:block; width:18px; height:2px; background: var(--ink); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px){
  .nav-toggle{ display:flex; }
  .primary-nav{
    position: fixed; inset: 76px 16px auto 16px;
    background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 18px;
    flex-direction:column; align-items:stretch;
    transform: translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .primary-nav.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .primary-nav ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .primary-nav a{ width:100%; padding:14px 16px; }
  .primary-nav li.nav-cta a{ margin: 8px 0 0; text-align:center; }
}

/* =========================================================
   8. HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  padding: clamp(72px, 11vw, 140px) 0 clamp(56px, 8vw, 96px);
  background-image: url('assets/img/hero-entrepreneur.jpg');
  background-size: cover; background-position: center 30%;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(100deg, rgba(18,16,12,0.88) 0%, rgba(18,16,12,0.72) 42%, rgba(18,16,12,0.38) 75%, rgba(18,16,12,0.22) 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:0.12; background: var(--brand-gradient); mix-blend-mode: screen; pointer-events:none;
}
.hero .hero-grid{ position:relative; z-index:2; }
.hero-copy .eyebrow{ color: var(--c-orange-2); }
.hero-copy h1{ color: var(--ink-on-dark); }
.hero-copy .lede{ color: rgba(245,242,234,0.82); }
.hero-note{ color: rgba(245,242,234,0.68) !important; }
.hero-copy .link-arrow{ color: var(--ink-on-dark); }
.hero-copy .link-arrow svg{ color: var(--ink-on-dark); }
.hero .btn-primary{ background: var(--c-orange); color:#fff; border-bottom-color: transparent; border-image: none; }
.hero .btn-primary:hover{ background: var(--c-orange-2); }
.hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items:center; }
@media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-copy h1{ margin-bottom: 22px; }
.hero-copy .lede{ margin-bottom: 34px; max-width: 560px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.hero-note{ margin-top: 26px; font-size:0.9rem; color: var(--ink-faint); display:flex; align-items:center; gap:10px; }
.hero-note svg{ width:16px; height:16px; flex-shrink:0; color: var(--c-green); }

.hero-visual{ position:relative; }
.hero-panel{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 34px; position:relative; z-index:2;
}
.hero-panel .stat-row{ display:flex; justify-content:space-between; gap:18px; margin-top:26px; padding-top:24px; border-top:1px solid var(--border); }
.hero-panel .stat{ }
.hero-panel .stat b{ display:block; font-family: var(--font-display); font-size:1.7rem; font-variation-settings:'opsz' 40; }
.hero-panel .stat span{ font-size:0.8rem; color: var(--ink-soft); }
.hero-panel .panel-title{ display:flex; align-items:center; gap:12px; font-weight:600; margin-bottom:16px; }
.hero-panel .panel-dot{ width:10px;height:10px;border-radius:50%; background: var(--c-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-green) 20%, transparent); }
.hero-panel .call-line{ display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; background: var(--bg-alt); border-radius: var(--radius-sm); margin-bottom:10px; font-size:0.92rem; }
.hero-panel .call-line span.tag{ font-size:0.72rem; padding:3px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-green) 16%, transparent); color: var(--c-green); font-weight:600; }
html[data-theme="dark"] .hero-panel .call-line span.tag{ background: color-mix(in srgb, var(--c-green) 24%, transparent); }

/* ---- Hero services carousel ---- */
.hero-carousel{ padding: 34px 34px 26px; }
.carousel-viewport{ position:relative; min-height: 288px; }
.carousel-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none;
  transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.carousel-slide.is-active{ position:relative; opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.panel-dot.dot-amber{ background: var(--c-orange-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-orange-2) 20%, transparent); }
.panel-dot.dot-ink{ background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 14%, transparent); }
html[data-theme="dark"] .panel-dot.dot-ink{ background: var(--ink-on-dark); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-on-dark) 18%, transparent); }
.panel-dot.dot-sage{ background: var(--c-green-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-green-2) 20%, transparent); }
.call-line span.tag.tag-amber{ background: color-mix(in srgb, var(--c-orange-2) 18%, transparent); color: var(--c-orange-2); }
html[data-theme="dark"] .call-line span.tag.tag-amber{ background: color-mix(in srgb, var(--c-orange-2) 26%, transparent); }
.call-line span.tag.tag-ink{ background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
html[data-theme="dark"] .call-line span.tag.tag-ink{ background: color-mix(in srgb, var(--ink-on-dark) 18%, transparent); color: var(--ink-on-dark); }
.call-line span.tag.tag-sage{ background: color-mix(in srgb, var(--c-green-2) 18%, transparent); color: var(--c-green-2); }
html[data-theme="dark"] .call-line span.tag.tag-sage{ background: color-mix(in srgb, var(--c-green-2) 26%, transparent); }
.carousel-dots{ display:flex; justify-content:center; gap:10px; margin-top:22px; }
.carousel-dot{
  width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background: var(--border); transition: transform .25s var(--ease), background .25s var(--ease), width .25s var(--ease);
}
.carousel-dot:hover{ background: color-mix(in srgb, var(--c-orange) 40%, var(--border)); }
.carousel-dot.is-active{ width:24px; border-radius: var(--radius-pill); background: var(--c-orange); }
.carousel-dot:focus-visible{ outline:2px solid var(--c-orange); outline-offset:3px; }
@media (max-width: 480px){ .hero-carousel{ padding: 26px 22px 22px; } .carousel-viewport{ min-height: 320px; } }


/* =========================================================
   9. LOGO STRIP / TRUST
   ========================================================= */
.trust-strip{ padding: 26px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-strip .cluster{ justify-content:space-between; gap: 24px; }
.trust-item{ font-size:0.86rem; color: var(--ink-soft); display:flex; align-items:center; gap:10px; }
.trust-item svg{ width:18px; height:18px; color: var(--c-orange); }
@media (max-width: 780px){ .trust-strip .cluster{ justify-content:center; text-align:center; } }

/* =========================================================
   10. SERVICE CARDS
   ========================================================= */
.service-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px 30px; display:flex; flex-direction:column; height:100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--border); }
.service-icon{
  width:56px; height:56px; border-radius: 16px; display:flex; align-items:center; justify-content:center;
  margin-bottom: 22px; flex-shrink:0;
}
.service-icon svg{ width:26px; height:26px; }
.service-icon.tone-orange{ background: color-mix(in srgb, var(--c-orange) 14%, transparent); color: var(--c-orange); }
.service-icon.tone-green{ background: color-mix(in srgb, var(--c-green) 14%, transparent); color: var(--c-green); }
.service-icon.tone-ink{ background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
html[data-theme="dark"] .service-icon.tone-ink{ background: color-mix(in srgb, var(--ink-on-dark) 14%, transparent); color: var(--ink-on-dark); }
.service-icon.tone-amber{ background: color-mix(in srgb, var(--c-orange-2) 14%, transparent); color: var(--c-orange-2); }
.service-icon.tone-sage{ background: color-mix(in srgb, var(--c-green-2) 16%, transparent); color: var(--c-green-2); }

.service-card h3{ margin-bottom: 12px; }
.service-card p.desc{ color: var(--ink-soft); margin-bottom: 20px; flex-grow:1; }
.service-card ul.feature-list{ display:flex; flex-direction:column; gap:10px; margin-bottom: 24px; }
.service-card ul.feature-list li, .service-card-lg .feature-list li, .service-accordion-panel .feature-list li{ display:flex; align-items:flex-start; gap:10px; font-size:0.93rem; color: var(--ink); }
.service-card ul.feature-list li svg, .service-card-lg .feature-list li svg, .service-accordion-panel .feature-list li svg{ width:16px; height:16px; margin-top:3px; flex-shrink:0; color: var(--c-green); }

.service-card-lg{
  display:grid; grid-template-columns: auto 1fr; gap:28px; align-items:flex-start;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 40px; margin-bottom: 26px;
}
@media (max-width: 700px){ .service-card-lg{ grid-template-columns: 1fr; } }
.service-card-lg .service-icon{ width:64px; height:64px; margin-bottom:0; }
.service-card-lg .feature-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 10px 24px; margin-top:18px; margin-bottom:0; }
@media (max-width: 560px){ .service-card-lg .feature-list{ grid-template-columns:1fr; } }

/* --- Services hero visual (icon collage panel) --- */
.services-visual{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  background: linear-gradient(160deg, var(--bg-alt), var(--surface));
  border:1px solid var(--border); min-height: 340px; padding: 40px;
}
.services-visual-grid{
  position:relative; height:100%; min-height: 260px; display:grid;
  grid-template-columns: repeat(2, 1fr); gap: 18px; align-content:center;
}
.services-visual-tile{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px; display:flex; flex-direction:column; gap:14px; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease);
}
.services-visual-tile:nth-child(1){ transform: translateY(-10px) rotate(-2deg); }
.services-visual-tile:nth-child(2){ transform: translateY(10px) rotate(2deg); }
.services-visual-tile:nth-child(3){ transform: translateY(6px) rotate(-1.5deg); }
.services-visual-tile:nth-child(4){ transform: translateY(-6px) rotate(1.5deg); grid-column: span 2; flex-direction:row; align-items:center; }
.services-visual-tile:hover{ transform: translateY(0) rotate(0deg); }
.services-visual-tile .service-icon{ width:44px; height:44px; margin-bottom:0; }
.services-visual-tile .service-icon svg{ width:20px; height:20px; }
.services-visual-tile span.label{ font-size:0.85rem; font-weight:600; color: var(--ink); }
@media (max-width: 560px){ .services-visual{ padding:28px; min-height:280px; } .services-visual-tile:nth-child(4){ grid-column:auto; flex-direction:column; } }

/* =========================================================
   10a. HOMEPAGE SEGMENT & FLEX SERVICE TIERS
   ========================================================= */
.segment-tier{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 20px; }
@media (max-width: 860px){ .segment-tier{ grid-template-columns: 1fr; } }
.segment-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 40px 36px; display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.segment-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.segment-card-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 22px; }
.segment-card .service-icon{ margin-bottom:0; }
.segment-card h3{ margin-bottom: 12px; }
.segment-card p.desc{ color: var(--ink-soft); margin-bottom: 20px; }
.segment-card .feature-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 10px 20px; margin-bottom: 26px; }
@media (max-width: 560px){ .segment-card .feature-list{ grid-template-columns: 1fr; } }
.segment-card .feature-list li{ display:flex; align-items:flex-start; gap:10px; font-size:0.93rem; color: var(--ink); }
.segment-card .feature-list li svg{ width:16px; height:16px; margin-top:3px; flex-shrink:0; color: var(--c-green); }
.segment-badge{
  font-size:0.76rem; font-weight:700; letter-spacing:0.02em; padding: 7px 14px; border-radius: var(--radius-pill);
  white-space:nowrap; flex-shrink:0;
}
.segment-badge.badge-sage{ background: color-mix(in srgb, var(--c-green-2) 18%, transparent); color: var(--c-green-2); }
.segment-badge.badge-green{ background: color-mix(in srgb, var(--c-green) 16%, transparent); color: var(--c-green); }

.flex-tier-label{
  display:flex; align-items:center; gap:18px; justify-content:center;
  margin: 44px 0 28px; color: var(--ink-faint); font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase; font-weight:600;
}
.flex-tier-line{ flex:1; max-width:120px; height:1px; background: var(--border); }
.flex-tier{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px){ .flex-tier{ grid-template-columns: 1fr; max-width:460px; margin-inline:auto; } }
.flex-service-card{
  background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 28px; display:flex; flex-direction:column; align-items:flex-start;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
html[data-theme="dark"] .flex-service-card{ background: var(--surface-2); }
.flex-service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-sm); background: var(--surface); }
.flex-service-card .service-icon{ width:48px; height:48px; margin-bottom: 18px; }
.flex-service-card .service-icon svg{ width:22px; height:22px; }
.flex-tag{
  font-size:0.72rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  color: var(--ink-faint); margin-bottom:10px;
}
.flex-service-card h3{ font-size:1.15rem; margin-bottom: 10px; }
.flex-service-card p.desc{ color: var(--ink-soft); margin-bottom: 18px; font-size:0.94rem; }

/* =========================================================
   10b. SERVICES ACCORDION
   ========================================================= */
.service-accordion{ display:flex; flex-direction:column; gap:14px; }
.service-accordion-item{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  overflow:hidden; transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.service-accordion-item.is-open{ border-color: color-mix(in srgb, var(--ink) 18%, var(--border)); box-shadow: var(--shadow-sm); }
.service-accordion-toggle{
  width:100%; display:flex; align-items:center; gap:22px; text-align:left;
  background:none; border:none; cursor:pointer; padding: 26px 30px; font-family: inherit; color: var(--ink);
}
.service-accordion-toggle .service-icon{ width:56px; height:56px; margin-bottom:0; flex-shrink:0; }
.accordion-title-group{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.accordion-title-group .eyebrow{ margin-bottom:0; }
.accordion-title-group .accordion-title{ font-family: var(--font-display); font-size:1.2rem; color: var(--ink); }
.accordion-title-group .accordion-teaser{ font-size:0.92rem; color: var(--ink-soft); }
.accordion-toggle-icon{
  position:relative; width:22px; height:22px; flex-shrink:0; color: var(--ink);
  transition: transform .35s var(--ease);
}
.accordion-toggle-icon .line{
  position:absolute; top:50%; left:50%; background: currentColor; border-radius:2px;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.accordion-toggle-icon .line-h{ width:16px; height:2px; transform: translate(-50%,-50%); }
.accordion-toggle-icon .line-v{ width:2px; height:16px; transform: translate(-50%,-50%); }
.service-accordion-toggle[aria-expanded="true"] .accordion-toggle-icon{ transform: rotate(45deg); color: var(--c-orange); }
.service-accordion-panel{
  max-height:0; overflow:hidden; transition: max-height .4s var(--ease);
}
.service-accordion-panel-inner{ padding: 0 30px 32px 30px; }
.service-accordion-panel .desc{ color: var(--ink-soft); margin-bottom:20px; }
.service-accordion-panel .feature-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 10px 24px; margin:0; }
@media (max-width: 560px){
  .service-accordion-toggle{ padding: 20px 20px; gap:16px; }
  .service-accordion-toggle .service-icon{ width:46px; height:46px; }
  .service-accordion-panel-inner{ padding: 0 20px 26px 20px; }
  .service-accordion-panel .feature-list{ grid-template-columns:1fr; }
}

/* =========================================================
   11. ABOUT
   ========================================================= */
.about-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items:center; }
@media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }
.value-list{ display:flex; flex-direction:column; gap:22px; margin-top: 28px; }
.value-item{ display:flex; gap:16px; align-items:flex-start; }
.value-item .num{ font-family: var(--font-display); font-size:1.3rem; color: var(--c-orange); flex-shrink:0; width:34px; }
.value-item h4{ margin-bottom:4px; }
.value-item p{ color: var(--ink-soft); font-size:0.95rem; }

.about-portrait{
  border-radius: var(--radius-lg); overflow:hidden; position:relative;
  background: linear-gradient(160deg, var(--bg-alt), var(--surface));
  border:1px solid var(--border); padding: 48px; display:flex; align-items:center; justify-content:center;
  min-height: 320px;
}
.about-portrait img{ width: 78%; height: auto; }

.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:56px; }
@media (max-width:780px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ padding: 26px; border-radius: var(--radius-md); background: var(--surface); border:1px solid var(--border); }
.pillar .eyebrow{ margin-bottom:10px; }

/* =========================================================
   11a. PARTNER SHOWCASE
   ========================================================= */
.partner-showcase{ margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--border); }
.partner-showcase-label{
  text-align:center; font-size:0.8rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  color: var(--ink-faint); margin-bottom: 32px;
}
.partner-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px 26px;
  max-width: 900px; margin-inline:auto;
}
.partner-tile{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center; padding: 26px 30px; min-height:118px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.partner-tile img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.partner-tile:hover{ transform: translateY(-6px) rotate(0deg) !important; box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--ink) 16%, var(--border)); z-index:2; position:relative; }
@media (min-width: 561px){
  .partner-tile:nth-child(1){ transform: rotate(-1.4deg) translateY(2px); }
  .partner-tile:nth-child(2){ transform: rotate(1.1deg) translateY(-6px); }
  .partner-tile:nth-child(3){ transform: rotate(-0.8deg) translateY(4px); }
  .partner-tile:nth-child(4){ transform: rotate(0.9deg) translateY(-4px); }
  .partner-tile:nth-child(5){ transform: rotate(-1.2deg) translateY(6px); }
  .partner-tile:nth-child(6){ transform: rotate(1.3deg) translateY(-2px); }
}
@media (max-width: 560px){
  .partner-grid{ grid-template-columns: repeat(2, 1fr); }
}
html[data-theme="dark"] .partner-tile{ background: var(--surface-2); }
html[data-theme="dark"] .partner-tile img{ filter: brightness(0) invert(1); opacity:0.86; }
html[data-theme="dark"] .partner-tile:hover img{ opacity:1; }

/* =========================================================
   12. CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 880px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list{ display:flex; flex-direction:column; gap:20px; margin-top:30px; }
.contact-row{ display:flex; gap:16px; align-items:flex-start; padding: 18px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.contact-row .icon{ width:42px; height:42px; border-radius:12px; background: color-mix(in srgb, var(--c-green) 14%, transparent); color: var(--c-green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-row .icon svg{ width:20px; height:20px; }
.contact-row h4{ margin-bottom:3px; }
.contact-row a, .contact-row p{ color: var(--ink-soft); font-size:0.95rem; }
.contact-row a:hover{ color: var(--c-orange); }

.map-frame{ border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--border); margin-top:24px; height: 220px; }
.map-frame iframe{ width:100%; height:100%; border:0; filter: grayscale(0.15); }

/* =========================================================
   13. ASSESSMENT FORM
   ========================================================= */
.assessment-wrap{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 52px); box-shadow: var(--shadow-md); position:relative; overflow:hidden;
}
.assessment-wrap::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; background: var(--brand-gradient);
}
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
@media (max-width: 640px){ .form-grid{ grid-template-columns:1fr; } }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size:0.85rem; font-weight:600; color: var(--ink-soft); }
.form-field label .req{ color: var(--c-orange); }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--bg); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color: var(--c-orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-orange) 14%, transparent);
}
.form-field textarea{ min-height: 120px; resize: vertical; }
.form-actions{ margin-top: 26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-microcopy{ font-size:0.85rem; color: var(--ink-faint); }
.form-status{ margin-top:18px; padding:14px 16px; border-radius: var(--radius-sm); font-size:0.92rem; display:none; }
.form-status.is-success{ display:block; background: color-mix(in srgb, var(--c-green) 14%, transparent); color: var(--c-green); }
.form-status.is-error{ display:block; background: color-mix(in srgb, var(--c-orange) 14%, transparent); color: var(--c-orange); }
.form-status.is-loading{ display:block; background: var(--bg-alt); color: var(--ink-soft); }

.assessment-side{ display:flex; flex-direction:column; gap:22px; }
.side-stat{ padding:22px; border-radius: var(--radius-md); border:1px solid var(--border); background: var(--surface); }
.side-stat b{ font-family: var(--font-display); font-size:1.5rem; display:block; margin-bottom:4px; font-variation-settings:'opsz' 40;}
.side-stat span{ color: var(--ink-soft); font-size:0.88rem; }

/* =========================================================
   14. CTA BANNER
   ========================================================= */
.cta-banner{
  border-radius: var(--radius-lg); padding: clamp(40px,6vw,72px); text-align:center;
  color: var(--ink-on-dark); position:relative; overflow:hidden;
  background-image: url('assets/img/cta-banner.jpg');
  background-size: cover; background-position: center;
}
.cta-banner::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(160deg, rgba(20,17,13,0.86), rgba(20,17,13,0.72));
}
.cta-banner::after{
  content:""; position:absolute; inset:0; z-index:1; opacity:0.16; background: var(--brand-gradient); mix-blend-mode: screen;
}
.cta-banner > *{ position:relative; z-index:2; }
.cta-banner .eyebrow{ color: var(--c-orange-2); }
.cta-banner h2{ color: var(--ink-on-dark); margin-bottom:16px; }
.cta-banner p{ color: rgba(243,240,232,0.78); max-width:560px; margin: 0 auto 30px; }
.cta-banner .btn-primary{
  background: var(--c-orange); color:#fff; border-bottom-color: transparent; border-image: none;
}
html[data-theme="dark"] .cta-banner .btn-primary{ background: var(--c-orange); color:#fff; }
.cta-banner .btn-primary:hover{ background: var(--c-orange-2); }

/* =========================================================
   15. FOOTER
   ========================================================= */
.site-footer{ background: var(--ink); color: var(--ink-on-dark); padding: 72px 0 28px; }
html[data-theme="dark"] .site-footer{ background: var(--surface-2); border-top:1px solid var(--border); }
.site-footer a{ color: rgba(243,240,232,0.72); }
.site-footer a:hover{ color: var(--c-orange-2); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 44px; border-bottom:1px solid rgba(243,240,232,0.12); }
@media (max-width: 820px){ .footer-grid{ grid-template-columns:1fr; gap:36px; } }
.footer-brand img{ height: 40px; width: auto; margin-bottom: 18px; }
.footer-brand .logo-light{ display:none !important; }
.footer-brand .logo-dark{ display:block !important; }
.footer-brand p{ color: rgba(243,240,232,0.65); max-width: 340px; font-size:0.95rem; }
.footer-col h4{ color: var(--ink-on-dark); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:18px; font-family:var(--font-body); font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; font-size:0.95rem; }
.footer-col .contact-row{ background:transparent; border:none; padding:0; }
.footer-col .contact-row .icon{ background: rgba(243,240,232,0.08); color: var(--c-green-2); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top: 26px; font-size:0.85rem; color: rgba(243,240,232,0.55); }
.footer-bottom .socials{ display:flex; gap:12px; }
.footer-bottom .socials a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(243,240,232,0.18); display:flex; align-items:center; justify-content:center; }
.footer-bottom .socials svg{ width:16px; height:16px; }

/* =========================================================
   16. GENERIC PAGE / BLOG (fallback templates)
   ========================================================= */
.page-hero{ padding: 56px 0 30px; }
.entry-content{ max-width: var(--container-narrow); margin-inline:auto; }
.entry-content > * + *{ margin-top: 22px; }
.entry-content h2{ margin-top:44px; }
.entry-content img{ border-radius: var(--radius-md); }
.post-list{ display:flex; flex-direction:column; gap:28px; max-width: var(--container-narrow); margin-inline:auto; }
.post-card{ padding-bottom:28px; border-bottom:1px solid var(--border); }
.post-card h2{ font-size:1.5rem; margin-bottom:8px; }
.post-meta{ font-size:0.85rem; color: var(--ink-faint); margin-bottom:10px; }
.pagination{ display:flex; gap:10px; justify-content:center; margin-top:40px; }
.pagination a, .pagination span{ padding:10px 16px; border:1px solid var(--border); border-radius: var(--radius-pill); font-size:0.9rem; }
.not-found{ text-align:center; padding: 100px 0; }

/* =========================================================
   17. WORDPRESS CORE ALIGNMENT / A11Y
   ========================================================= */
.alignwide{ max-width: var(--container); margin-inline:auto; }
.alignfull{ max-width:100%; }
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path: inset(50%);
  height:1px; width:1px; overflow:hidden; position:absolute; word-wrap:normal;
}
:focus-visible{ outline: 2px solid var(--c-orange); outline-offset: 2px; }

/* =========================================================
   18. IMAGE PLACEHOLDER (drop-in until real photography/art lands)
   ========================================================= */
.img-placeholder{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; width:100%; min-height:220px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-orange) 10%, var(--surface-2)) 0%, color-mix(in srgb, var(--c-green) 10%, var(--surface-2)) 100%);
  border:1px solid var(--border); overflow:hidden; text-align:center; padding:24px;
}
html[data-theme="dark"] .img-placeholder{
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-orange) 16%, var(--surface-2)) 0%, color-mix(in srgb, var(--c-green) 16%, var(--surface-2)) 100%);
}
.img-placeholder::before{
  content:''; position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
}
.img-placeholder .ph-icon{
  position:relative; z-index:1; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--c-orange);
}
.img-placeholder .ph-icon svg{ width:24px; height:24px; }
.img-placeholder .ph-caption{
  position:relative; z-index:1; font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase;
  color: var(--ink-faint); font-weight:600;
}
.img-placeholder.ph-square{ aspect-ratio: 1/1; min-height:0; }
.img-placeholder.ph-wide{ aspect-ratio: 16/9; min-height:0; }

/* =========================================================
   19. PRICING PAGE
   ========================================================= */
.pricing-note{ margin-top:14px; font-size:0.85rem; color: var(--ink-faint); }

.pricing-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; align-items:stretch;
}
@media (max-width: 980px){ .pricing-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .pricing-grid{ grid-template-columns: 1fr; } }

.pricing-card{
  position:relative; text-align:left; display:flex; flex-direction:column; gap:6px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 26px; cursor:pointer; font-family:inherit; color:inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.pricing-card:hover, .pricing-card:focus-visible{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--c-orange); }
.pricing-card.is-featured{ border-color: var(--c-orange); box-shadow: var(--shadow-sm); }
.pricing-card-badge{
  position:absolute; top:-13px; left:26px; background: var(--c-orange); color:#fff;
  font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  padding:5px 14px; border-radius: var(--radius-pill);
}
.pricing-card h3{ font-size:1.4rem; margin: 6px 0 4px; }
.pricing-card .pricing-teaser{ color: var(--ink-soft); font-size:0.92rem; flex-grow:1; margin-bottom:18px; }
.pricing-card .pricing-from{ font-size:0.95rem; color: var(--ink-soft); margin-bottom:20px; }
.pricing-card .pricing-from strong{ font-family: var(--font-display); font-size:1.9rem; color: var(--ink); font-weight:600; margin-right:2px; }
.pricing-card-cta{
  display:flex; align-items:center; gap:8px; font-size:0.88rem; font-weight:600; color: var(--c-green);
  margin-top:auto; transition: gap .2s var(--ease);
}
.pricing-card-cta svg{ width:15px; height:15px; transition: transform .25s var(--ease); }
.pricing-card:hover .pricing-card-cta svg{ transform: translateX(3px); }

.pricing-drawer-backdrop{
  position:fixed; inset:0; background: rgba(20,18,14,0.5); opacity:0; pointer-events:none;
  transition: opacity .35s var(--ease); z-index:1000;
}
.pricing-drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }

.pricing-drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(480px, 100%);
  background: var(--surface); z-index:1001; box-shadow: var(--shadow-md);
  transform: translateX(100%); transition: transform .4s var(--ease);
  display:flex; flex-direction:column;
}
.pricing-drawer.is-open{ transform: translateX(0); }
.pricing-drawer-close{
  position:absolute; top:22px; right:22px; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border); background: var(--surface); color: var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pricing-drawer-close:hover{ border-color: var(--c-orange); color: var(--c-orange); }
.pricing-drawer-close svg{ width:18px; height:18px; }
.pricing-drawer-scroll{ flex:1; overflow-y:auto; padding: 76px 40px 48px; }
.pricing-detail .price-big{
  font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 2.7rem); font-weight:600;
  margin: 10px 0 18px; color: var(--ink);
}
.pricing-detail .price-big span{ font-size:1rem; font-weight:500; color: var(--ink-soft); font-family: var(--font-body); }
.pricing-detail .desc{ color: var(--ink-soft); margin-bottom:26px; }
.pricing-detail .feature-list-full{ display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }
.pricing-detail .feature-list-full li{ display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color: var(--ink); }
.pricing-detail .feature-list-full li svg{ width:17px; height:17px; margin-top:3px; flex-shrink:0; color: var(--c-green); }
.pricing-detail .btn{ width:100%; justify-content:center; margin-bottom:12px; }
.pricing-detail .btn:last-child{ margin-bottom:0; }
@media (max-width: 560px){ .pricing-drawer-scroll{ padding: 76px 26px 40px; } }
body.pricing-drawer-open{ overflow:hidden; }
.img-placeholder.ph-portrait{ aspect-ratio: 3/4; min-height:0; }