/* Extracted from inline styles. Each .xN class = one original style attribute (deduped across pages). */
.page-layout{display: grid; grid-template-columns: 188px 1fr; background: #f5efe2; color: #36322b; font-family: 'EB Garamond', Georgia, serif; min-height: 100vh}
.sidebar{position: sticky; top: 0; align-self: start; height: 100vh; background: #15130f; color: #f5efe2; display: flex; flex-direction: column; padding: 34px 22px 28px; overflow: hidden}
.brand-wordmark{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 31px; letter-spacing: 3px; line-height: 1; color: #f5efe2; padding-left: 3px}
.brand-mark{display: block; width: 100%; max-width: 98px}
.sidebar-sub-label{color: rgba(245,239,226,.55); font-weight: 600}
.sidebar-nav{position: relative; flex: 1}
.nav-rail{position: absolute; left: 4px; top: 9px; bottom: 12px; width: 1px; background: rgba(245,239,226,.16)}
.nav-link-text{display: block}
.nav-section-label{margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(245,239,226,.14)}
.nav-section{font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; color: #cf9626; text-transform: uppercase; margin-bottom: 7px}
.sidebar-more-link{display: flex; align-items: center; justify-content: space-between; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: #e8e2d4; line-height: 1.15}
.sidebar-more-arrow{font-size: 15px; color: rgb(207, 150, 38); margin-left: 6px}
.main-content{width: 100%; min-width: 0}
.hero-bg-img{position: absolute; top: 50%; right: -40px; transform: translateY(-50%); height: 150%; width: auto; max-width: none; z-index: 0; pointer-events: none; opacity: .9}
.hero-content-wrap{position: relative; z-index: 1; max-width: 1080px}
.hero-greeting{display: flex; align-items: center; gap: 14px; margin-bottom: 26px}
.page-eyebrow{font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 3.5px; color: #b07f1f; text-transform: uppercase}
.page-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 74px; line-height: .98; letter-spacing: -1.5px; color: #211d18; max-width: 760px; margin-bottom: 24px}
.hero-intro{font-family: 'EB Garamond', serif; font-size: 21px; line-height: 1.5; color: #4a4439; max-width: 560px; margin-bottom: 40px}
.hero-body-grid{display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 48px; align-items: start; max-width: 940px}
.body-para{font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.62; color: #4a4439; margin-bottom: 18px}
.body-para-tight{font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.62; color: #4a4439}
.sidebar-info-stack{display: flex; flex-direction: column; gap: 18px}
#premise .sidebar-info-stack{background: rgba(255,255,255,0.55); border-radius: 14px; padding: 20px 16px;}
.sidebar-info-block{border-top: 1px solid rgba(34,31,26,.16); padding-top: 16px}
.micro-label{font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; color: #b07f1f; text-transform: uppercase; margin-bottom: 12px}
.sidebar-card-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 26px; line-height: 1.05; color: #211d18; margin-bottom: 8px}
.sidebar-card-body{font-family: 'EB Garamond', serif; font-size: 14.5px; line-height: 1.5; color: #5a5347}
.card-frame{border-radius: 12px; overflow: hidden; box-shadow: 0 26px 52px -28px rgba(40,30,12,.45); border: 1px solid rgba(34,31,26,.1)}
.card-img-sm{display:block; width: 100%; height: 188px; object-fit:cover}
.opacity-85{opacity: .85}
.text-accent-gold{color: rgb(227, 181, 82)}
.cs-section{padding: 66px 64px; border-top: 1px solid rgba(34,31,26,.08)}
.cs-two-col{display: grid; grid-template-columns: 0.86fr 1.9fr; gap: 52px; align-items: start}
.cs-sidebar{position: sticky; top: 40px}
.section-num{font-family: 'Cormorant Garamond', serif; font-size: 40px; color: #d8cbb0; font-weight: 600; line-height: 1; margin-bottom: 12px}
.section-eyebrow{font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; color: #b07f1f; text-transform: uppercase; margin-bottom: 10px}
.cs-section-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 36px; line-height: 1.04; color: #221f1a; margin-bottom: 18px}
.bullet-dot{width: 7px; height: 7px; border-radius: 50%; background: #cf9626}
.img-grid-2-mb{display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 30px}
.cs-figure{margin: 0}
.card-img{display:block; width: 100%; height: 240px; object-fit:cover}
.text-dark{color: rgb(42, 38, 31)}
.insight-box{background: #1a1815; border-radius: 14px; padding: 28px 34px; color: #f5efe2}
.insight-label-row{display: flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #e3b552; text-transform: uppercase; margin-bottom: 14px}
.insight-quote{font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.32; color: #f3ead9}
.feature-tag-tan{display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; padding: 7px 13px; border-radius: 999px; background: #e3d8bf; font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #8a6212}
.bullet-dot-brown{width: 7px; height: 7px; border-radius: 50%; background: #b07f1f}
.insight-box-green{background: #313a26; border-radius: 14px; padding: 26px 30px; color: #f3efe2; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center}
.insight-label-green{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #cdd3bc; text-transform: uppercase; margin-bottom: 10px}
.insight-quote-green{font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.32; color: #f3efe2}
.bullet-dot-green{width: 7px; height: 7px; border-radius: 50%; background: #4e6b35}
.section-para-xl{font-size: 16px; line-height: 1.6; color: #4a4439; margin-bottom: 28px}
.compare-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; margin-bottom: 28px}
.warm-card{background: #f5efe2; border: 1px solid rgba(34,31,26,.12); border-radius: 14px; padding: 24px 26px}
.card-label-green{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: #4e6b35; text-transform: uppercase; margin-bottom: 16px}
.card-list{display: flex; flex-direction: column; gap: 12px}
.check-item{display: flex; align-items: flex-start; gap: 11px}
.check-badge{width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: #e6f0dd; display: flex; align-items: center; justify-content: center; color: #4e6b35; font-size: 11px; margin-top: 1px}
.check-text{font-family: 'EB Garamond', serif; font-size: 14.5px; line-height: 1.35; color: #36322b}
.card-label-gold{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: #b07f1f; text-transform: uppercase; margin-bottom: 14px}
.card-body{font-family: 'EB Garamond', serif; font-size: 14.5px; line-height: 1.55; color: #4a4439}
.insight-box-dark{background: #1a1815; border-radius: 14px; padding: 26px 30px; color: #f5efe2; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center}
.insight-label-gold{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #e3b552; text-transform: uppercase; margin-bottom: 10px}
.section-header-row{display: flex; align-items: center; gap: 16px; margin-bottom: 34px}
.section-label{font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 2.5px; color: #b07f1f; text-transform: uppercase}
.comparison-table{display: grid; grid-template-columns: 124px 1fr 1fr 1fr 1fr; gap: 0; background: #f5efe2; border: 1px solid rgba(34,31,26,.12); border-radius: 14px; overflow: hidden}
.grid-group{display: contents}
.cost-section{margin-top: 46px}
.section-header-bar{display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 22px}
.table-note{font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .6px; color: #8a7f6c}
.cost-card-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px}
.cost-card{background: #f5efe2; border: 1px solid rgba(34,31,26,.12); border-radius: 14px; padding: 24px 26px; display: flex; flex-direction: column}
.cost-card-header{display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(34,31,26,.1)}
.cost-card-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 22px; line-height: 1; color: #211d18}
.cost-card-tag{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #b3a896}
.cost-list{display: flex; flex-direction: column; gap: 11px; font-family: 'EB Garamond', serif; font-size: 14.5px; color: #4a4439}
.cost-row{display: flex; align-items: baseline; justify-content: space-between; gap: 12px}
.cost-value{font-family: 'Archivo', sans-serif; font-weight: 600; color: #2a261f}
.divider{height: 1px; background: rgba(34,31,26,.16); margin: 4px 0}
.cost-total-label{font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: #221f1a}
.table-footnote{font-family: 'EB Garamond', serif; font-style: italic; font-size: 12.5px; line-height: 1.45; color: #7d7460; margin-top: 16px; max-width: 1566px; width: 100%; height: 34px}
.cs-dark-section{background: #15130f; color: #f5efe2; padding: 70px 64px 30px; position: relative; overflow: hidden}
.cs-reflection-grid{display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 56px; align-items: start}
.section-num{font-family: 'Cormorant Garamond', serif; font-size: 40px; color: #3a352b; font-weight: 600; line-height: 1; margin-bottom: 12px}
.section-eyebrow{font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; color: #e3b552; text-transform: uppercase; margin-bottom: 10px}
.cs-dark-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 38px; line-height: 1.05; color: #f6efe6; margin-bottom: 20px}
.cs-dark-body{font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.6; color: #c8c1b4; margin-bottom: 18px}
.highlights-row{display: flex; gap: 12px; margin-top: 24px}
.highlight-item{flex: 1; border-top: 1px solid rgba(245,239,226,.16); padding-top: 14px}
.highlight-label{font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; color: #e3b552; text-transform: uppercase; margin-bottom: 7px}
.highlight-text{font-family: 'EB Garamond', serif; font-size: 13.5px; line-height: 1.4; color: #b9b2a4}
.cs-quote-col{display: flex; flex-direction: column; justify-content: center; height: 100%}
.icon-faded{opacity: .85; margin-bottom: 18px}
.cs-dark-quote{font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 33px; line-height: 1.34; color: #f3ead9; margin-bottom: 24px}
.cs-dark-support{font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.6; color: #c8c1b4}
.cs-dark-footer{margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(245,239,226,.12); display: flex; align-items: center; justify-content: space-between}
.footer-name{font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #e8e2d4}
.footer-link{display: inline-flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #e3b552; transition: gap .2s}
.home-layout{display: grid; grid-template-columns: 188px 1fr; background: #f5efe2; color: #36322b; font-family: 'EB Garamond', Georgia, serif; min-height: 100vh}
.sidebar-2{position: sticky; top: 0; align-self: start; height: 100vh; background: #15130f; color: #f5efe2; display: flex; flex-direction: column; padding: 34px 18px 53px}
.sidebar-brand{display: flex; flex-direction: column; align-items: center; gap: 11px; width: 100%; margin-bottom: 34px}
.sidebar-nav-2{display: flex; flex-direction: column; gap: 4px; flex: 1}
.nav-link-active{display: flex; align-items: center; gap: 14px; padding: 11px 10px; border-radius: 8px; background: rgba(207,150,38,.12); font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: #f5efe2; transition: color .2s}
.nav-link-active-icon{color: #e3b552; display: flex}
.nav-link-active-dot{margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #e3b552}
.nav-link{display: flex; align-items: center; gap: 14px; padding: 11px 10px; border-radius: 8px; font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: rgba(245,239,226,.62); transition: color .2s}
.nav-link-icon{color: rgba(245,239,226,.5); display: flex; transition: color .2s}
.sidebar-social{display: flex; align-items: center; gap: 18px; padding-top: 22px; border-top: 1px solid rgba(245,239,226,.12); color: rgba(245,239,226,.55)}
.social-link{display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px}
.social-img{display: block; opacity: .8; transition: opacity .2s}
.social-svg{flex-shrink: 0; display: block}
.page-header{padding: 76px 60px 34px}
.page-header-intro{display: flex; align-items: center; gap: 16px; margin-bottom: 26px}
.section-counter{font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 1px; color: #c2b8a4}
.page-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 62px; line-height: .98; letter-spacing: -1px; color: #211d18; margin-bottom: 22px}
.title-accent{font-style: italic; color: #b07f1f}
.page-desc{font-family: 'EB Garamond', serif; font-size: 18px; line-height: 1.5; color: #4a4439; max-width: 540px}
.cards-section{padding: 12px 60px 60px}
.proj-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 1150px}
.proj-card{position: relative; display: flex; flex-direction: column; aspect-ratio: 1; background: #fff; border: 1px solid rgba(34,31,26,.08); border-radius: 16px; overflow: hidden; box-shadow: 0 22px 46px -32px rgba(40,30,12,.42); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.proj-thumb{position: relative; flex: 0 0 55%; overflow: hidden; background: #efe6d4}
.proj-img{width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .4s ease}
.proj-num{position: absolute; top: 14px; left: 14px; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 17px; color: #f5efe2; background: rgba(21,19,15,.6); backdrop-filter: blur(3px); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center}
.proj-card-body{padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden}
.proj-label{font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #b07f1f; margin-bottom: 12px}
.proj-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 30px; line-height: 1.02; color: #211d18; margin-bottom: 11px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden}
.proj-desc{font-family: 'EB Garamond', serif; font-size: 15.5px; line-height: 1.5; color: #6b6353; margin-bottom: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden}
.proj-arrow{margin-top: auto; display: inline-flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #b07f1f; transition: gap .2s ease; flex-shrink: 0}
.proj-thumb-blush{position: relative; flex: 0 0 55%; overflow: hidden; background: #f3efe9}
.proj-img-center{width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s ease}
.site-footer-2{padding: 8px 60px 40px}
.page-footer-row{padding-top: 24px; border-top: 1px solid rgba(34,31,26,.12); display: flex; align-items: center; justify-content: space-between}
.page-footer-name{font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #2a261f}
.foot-link{display: inline-flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #b07f1f; transition: gap .2s ease}
.cs-layout{display: grid; grid-template-columns: 188px 1fr; background: #f5efe2; color: #36322b; font-family: 'EB Garamond', Georgia, serif; min-height: 100vh}
.sidebar-project-label{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: #cf9626; text-transform: uppercase; line-height: 1.4; margin-bottom: 24px}
.sidebar-project-sub{color: rgba(245,239,226,.4); font-size: 9px}
.next-project{display: flex; align-items: center; justify-content: space-between; font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; color: #e8e2d4; line-height: 1.15}
.next-project-arrow{font-size: 15px; color: #cf9626; margin-left: 6px}
.cs-hero-section{position: relative; padding: 70px 64px 60px; overflow: hidden}
.hero-radial-overlay{position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 90% 6%, rgba(43,108,163,.14) 0%, rgba(43,108,163,0) 56%)}
.hero-eyebrow-row{display: flex; align-items: center; gap: 14px; margin-bottom: 22px}
.hero-eyebrow{font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 3.5px; color: #cf9626; text-transform: uppercase; padding-bottom: 6px}
.project-badge{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #fff; background: #2b6ca3; padding: 4px 11px; border-radius: 20px}
.page-hero-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 80px; line-height: .9; letter-spacing: -1px; color: #211d18; margin-bottom: 20px}
.title-accent-blue{font-style: italic; color: #2b6ca3}
.hero-divider{width: 54px; height: 2px; background: #cf9626; margin-bottom: 22px}
.hero-desc{font-family: 'EB Garamond', serif; font-size: 21px; line-height: 1.45; color: #4a4439; max-width: 450px; margin-bottom: 24px}
.hero-subdesc{font-family: 'EB Garamond', serif; font-size: 15.5px; line-height: 1.55; color: #6b6353; max-width: 470px; margin-bottom: 34px}
.meta-icon{color: #2b6ca3; margin-bottom: 9px}
.meta-item{font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: #9a8f7c; margin-bottom: 5px}
.meta-text{font-family: 'EB Garamond', serif; font-size: 14px; line-height: 1.28; color: #36322b}
.portrait-wrap{position: relative}
.hero-mockup-card{border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -34px rgba(20,40,63,.5), 0 8px 22px -14px rgba(20,40,63,.22); border: 1px solid rgba(34,31,26,.1)}
.browser-address-bar{flex: 1; margin-left: 8px; height: 16px; border-radius: 5px; background: #34343c}
.cs-img{width: 100%; display: block}
.mockup-badge{position: absolute; bottom: 16px; left: 16px; background: rgba(21,19,15,.86); backdrop-filter: blur(4px); color: #f5efe2; padding: 9px 14px; border-radius: 9px; font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .4px}
.cs-section-tinted{background: #efe6d4; padding: 64px 64px; border-top: 1px solid rgba(34,31,26,.08)}
.challenge-inner{display: grid; grid-template-columns: minmax(240px, 0.82fr) 1.7fr; gap: 56px; align-items: start}
.challenge-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 33px; line-height: 1.12; color: #221f1a; margin-bottom: 18px}
.section-body{font-size: 16px; line-height: 1.5; color: #4a4439}
.problem-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 28px 44px}
.problem-card{border-top: 1px solid rgba(34,31,26,.18); padding-top: 14px}
.card-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 21px; line-height: 1.1; color: #221f1a; margin-bottom: 7px}
.card-desc{font-size: 14.5px; line-height: 1.45; color: #5a5347}
.dark-section{background: #15130f; color: #f5efe2; padding: 52px 64px; border-top: 1px solid rgba(34,31,26,.08)}
.dark-section-grid{display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; max-width: 1000px}
.dark-section-quote{font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 29px; line-height: 1.32; color: #f3ead9}
.section-para{font-size: 16px; line-height: 1.55; color: #4a4439; margin-bottom: 16px}
.section-para-lg{font-size: 16px; line-height: 1.55; color: #4a4439; margin-bottom: 20px}
.feature-tag-list{display: flex; flex-direction: column; gap: 10px}
.feature-tag-blue{display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px; background: #e1ecf4; font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #1f5479; width: fit-content}
.dot-blue{width: 7px; height: 7px; border-radius: 50%; background: #2b6ca3}
.feature-tag-warm{display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px; background: #efe6d4; font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #8a6212; width: fit-content}
.img-grid-2{display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start}
.img-placeholder{background: #c4bfb4; border-radius: 12px; width: 100%}
.img-tile{border-radius: 12px; overflow: hidden; width: 100%}
.img-tile img,.img-tile video{width: 100%; height: 100%; object-fit: cover; object-position: center; display: block}
.tile-full{grid-column: 1/-1}
.mockup-card-tall{border-radius: 10px; overflow: hidden; box-shadow: 0 20px 44px -24px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.1); background: #fff; max-height: 470px}
.section-body{font-size: 16px; line-height: 1.55; color: #4a4439}
.mockup-card{border-radius: 10px; overflow: hidden; box-shadow: 0 22px 48px -24px rgba(40,30,12,.42); border: 1px solid rgba(34,31,26,.1); background: #fff}
.mockup-card-capped{border-radius: 10px; overflow: hidden; box-shadow: 0 20px 44px -24px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.1); background: #fff; max-height: 420px}
.mockup-card-padded{border-radius: 10px; overflow: hidden; box-shadow: 0 22px 50px -26px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.1); background: #fff; padding: 6px}
.info-card-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px}
.info-card{background: #fff; border: 1px solid rgba(34,31,26,.12); border-radius: 14px; padding: 24px 26px}
.icon-accent-blue{color: #2b6ca3; margin-bottom: 14px}
.info-card-text{font-family: 'EB Garamond', serif; font-size: 14.5px; line-height: 1.45; color: #5a5347}
.cs-wide-col-mb{display: grid; grid-template-columns: 0.9fr 1.7fr; gap: 52px; align-items: start; margin-bottom: 38px}
.feature-list{display: flex; flex-direction: column; gap: 16px}
.feature-item{background: #fff; border: 1px solid rgba(34,31,26,.12); border-radius: 12px; padding: 18px 22px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center}
.feature-item-icon{width: 38px; height: 38px; border-radius: 9px; background: #e1ecf4; display: flex; align-items: center; justify-content: center; color: #2b6ca3}
.feature-item-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 18px; color: #211d18}
.feature-item-text{font-family: 'EB Garamond', serif; font-size: 14px; color: #5a5347; line-height: 1.4}
.mockup-card-lg{border-radius: 12px; overflow: hidden; box-shadow: 0 26px 56px -28px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.12); background: #fff; padding: 18px}
.fig-caption{font-family: 'EB Garamond', serif; font-style: italic; font-size: 13px; color: #7d7460; margin-top: 12px; line-height: 1.4}
.cs-two-col-mb{display: grid; grid-template-columns: 0.86fr 1.9fr; gap: 52px; align-items: start; margin-bottom: 40px}
.mobile-preview-grid{display: grid; grid-template-columns: 290px 1fr; gap: 40px; align-items: center}
.phone-frame{width: 100%; background: #15130f; border-radius: 36px; padding: 12px; box-shadow: 0 34px 70px -30px rgba(20,40,63,.5), 0 8px 22px -14px rgba(20,40,63,.22); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}
.phone-screen{border-radius: 26px; overflow: hidden; background: #2b6ca3}
.fig-caption-center{font-family: 'EB Garamond', serif; font-style: italic; font-size: 13px; color: #7d7460; margin-top: 13px; line-height: 1.4; text-align: center}
.subsection-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 27px; line-height: 1.1; color: #221f1a; margin-bottom: 14px}
.reflection-body{font-size: 15.5px; line-height: 1.55; color: #4a4439; margin-bottom: 14px}
.reflection-body-last{font-size: 15.5px; line-height: 1.55; color: #4a4439}
.mockup-card-xl{border-radius: 12px; overflow: hidden; box-shadow: 0 26px 56px -28px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.12); background: #fff; padding: 22px}
.insight-callout{margin-top: 36px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: #15130f; border-radius: 14px; padding: 22px 26px}
.callout-icon-gold{color: #e3b552; margin-top: 1px}
.callout-label{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: #e3b552; text-transform: uppercase; margin-bottom: 8px}
.callout-body{font-family: 'EB Garamond', serif; font-size: 15.5px; line-height: 1.6; color: #d6cfc1; max-width: 760px}
.hero-teal-overlay{position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 88% 8%, rgba(44,138,133,.16) 0%, rgba(44,138,133,0) 55%)}
.hero-equal-grid{position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 1.04fr; gap: 44px; align-items: center}
.project-badge-teal{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #fff; background: #2c8a85; padding: 4px 11px; border-radius: 20px}
.title-accent-teal{font-style: italic; color: #1d6b66}
.text-accent-teal{color: #1d6b66}
.hero-meta{display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 480px}
.meta-icon-teal{color: #2c8a85; margin-bottom: 9px}
.hero-mockup-teal{border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, #e7f0ee, #d6e8e5); box-shadow: 0 40px 80px -34px rgba(20,63,60,.5), 0 8px 22px -14px rgba(20,63,60,.25); border: 1px solid rgba(44,138,133,.14)}
.cs-section-padded{padding: 0 64px 60px}
.dark-card{position: relative; background: #15130f; border-radius: 16px; padding: 38px 40px; overflow: hidden}
.dark-card-overlay{position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 140% at 100% 0%, rgba(44,138,133,.3) 0%, rgba(44,138,133,0) 60%)}
.dark-card-grid{position: relative; z-index: 1; display: grid; grid-template-columns: 0.92fr 1.25fr; gap: 44px; align-items: center}
.label-row{display: flex; align-items: center; gap: 11px; margin-bottom: 16px}
.icon-teal{color: #5cc2bb; display: flex}
.eyebrow-teal{font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; color: #5cc2bb; text-transform: uppercase}
.dark-card-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 33px; line-height: 1.08; color: #f6efe6; margin-bottom: 16px}
.title-accent-gold{font-style: italic; color: rgb(227, 181, 82)}
.dark-card-body{font-family: 'EB Garamond', serif; font-size: 15.5px; line-height: 1.55; color: #c8c1b4}
.two-col-tight{display: grid; grid-template-columns: 1fr 1fr; gap: 14px}
.constraint-card{background: rgba(245,239,226,.05); border: 1px solid rgba(92,194,187,.22); border-radius: 11px; padding: 16px 16px}
.constraint-card-header{display: flex; align-items: center; gap: 9px; margin-bottom: 7px}
.badge-icon-teal{width: 20px; height: 20px; border-radius: 50%; background: rgba(92,194,187,.16); color: #5cc2bb; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0}
.constraint-name{font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; color: #f3ead9}
.constraint-desc{font-family: 'EB Garamond', serif; font-size: 12.5px; line-height: 1.4; color: #a59d8e}
.cs-body-para{font-size: 16px; line-height: 1.5; color: #4a4439; margin-bottom: 24px}
.pullquote-teal{border-left: 2px solid #2c8a85; padding-left: 20px}
.pullquote-text{font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.32; color: #2a261f}
.pullquote-attr{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #8a7d5f; text-transform: uppercase; margin-top: 12px}
.problem-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px}
.problem-card-header{display: flex; align-items: center; gap: 10px; margin-bottom: 9px}
.icon-teal-dark{color: #1d6b66; display: flex}
.problem-num{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #b07f1f}
.cs-section{padding: 64px 64px; border-top: 1px solid rgba(34,31,26,.08)}
.cs-two-col-sm{display: grid; grid-template-columns: 0.86fr 1.6fr; gap: 48px; align-items: start}
.section-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 33px; line-height: 1.06; color: #221f1a; margin-bottom: 18px}
.section-intro{font-size: 16px; line-height: 1.5; color: #4a4439; margin-bottom: 14px}
.icon-badge-teal{width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: #dcebe8; color: #1d6b66; display: flex; align-items: center; justify-content: center}
.list-item-text{font-family: 'EB Garamond', serif; font-size: 14.5px; line-height: 1.4; color: #4a4439; padding-top: 3px}
.cs-two-col-rev{display: grid; grid-template-columns: 1fr 0.92fr; gap: 48px; align-items: start; margin-bottom: 40px}
.teal-dark-card{background: #14403c; border-radius: 14px; padding: 30px 28px; color: #f3efe2; position: relative; overflow: hidden}
.teal-dark-card-overlay{position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 120% at 100% 0%, rgba(92,194,187,.28) 0%, rgba(92,194,187,0) 60%)}
.card-content{position: relative; z-index: 1}
.teal-icon-circle{width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(92,194,187,.5); display: flex; align-items: center; justify-content: center; color: #7fd4cd; margin-bottom: 22px}
.teal-card-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 30px; line-height: 1.08; color: #7fd4cd; margin-bottom: 14px}
.teal-card-body{font-family: 'EB Garamond', serif; font-size: 15px; line-height: 1.45; color: #cfe4e1; margin-bottom: 22px}
.tag-row{display: flex; flex-wrap: wrap; gap: 8px}
.pin-tag{font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; color: #cfe4e1; background: rgba(127,212,205,.12); border: 1px solid rgba(127,212,205,.28); padding: 5px 11px; border-radius: 20px}
.teal-figure-card{border-radius: 12px; overflow: hidden; box-shadow: 0 26px 54px -26px rgba(20,63,60,.5); border: 1px solid rgba(34,31,26,.12)}
.cs-two-col-narrow{display: grid; grid-template-columns: 0.82fr 1.55fr; gap: 48px; align-items: center}
.dm-screen-grid{display: grid; grid-template-columns: 1fr auto 1.05fr; gap: 22px; align-items: center}
.rule-card{position: relative; background: #fff; border-radius: 12px; border: 1px solid rgba(34,31,26,.1); box-shadow: 0 18px 40px -24px rgba(40,30,12,.4); padding: 20px 18px; animation: dg-float 7s ease-in-out infinite}
.rule-card-ribbon{position: absolute; top: -2px; right: 18px; width: 22px; height: 34px; background: #2c8a85; border-radius: 0 0 5px 5px; box-shadow: 0 4px 8px -3px rgba(20,63,60,.5)}
.rule-card-label{font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: #2c8a85; margin-bottom: 10px}
.rule-card-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 18px; color: #221f1a; margin-bottom: 10px}
.rule-card-lines{display: flex; flex-direction: column; gap: 6px}
.text-line{height: 7px; border-radius: 4px; background: #ece5d6}
.text-line-short{height: 7px; width: 72%; border-radius: 4px; background: #ece5d6}
.pin-action{margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .4px; color: #1d6b66; background: #dcebe8; padding: 6px 11px; border-radius: 7px}
.arrow-col{display: flex; flex-direction: column; align-items: center; gap: 6px; color: #2c8a85}
.arrow-label{font-family: 'Archivo', sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #9a8f7c}
.dm-screen-card{background: #14403c; border-radius: 12px; padding: 18px 16px; box-shadow: 0 22px 46px -24px rgba(20,63,60,.6)}
.dm-screen-header{display: flex; align-items: center; gap: 8px; margin-bottom: 14px}
.dm-screen-icon{color: #7fd4cd; display: flex}
.dm-screen-label{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #7fd4cd}
.dm-notes-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 9px}
.note-section-label{font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #14403c; margin-bottom: 6px}
.note-lines{display: flex; flex-direction: column; gap: 4px}
.note-line{height: 5px; border-radius: 3px; background: rgba(20,64,60,.25)}
.note-line-short{height: 5px; width: 70%; border-radius: 3px; background: rgba(20,64,60,.25)}
.icon-text-layout{display: grid; grid-template-columns: 0.78fr 1.7fr; gap: 48px; align-items: start}
.designer-note-card{margin-top: 22px; background: #fff; border: 1px solid rgba(44,138,133,.22); border-left: 3px solid #2c8a85; border-radius: 11px; padding: 16px 18px; box-shadow: 0 16px 34px -24px rgba(20,63,60,.4)}
.designer-note-header{display: flex; align-items: center; gap: 8px; margin-bottom: 9px}
.designer-note-label{font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: #1d6b66}
.designer-note-text{font-family: 'EB Garamond', serif; font-style: italic; font-size: 14px; line-height: 1.5; color: #4a4439}
.icon-showcase-card{border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px -26px rgba(40,30,12,.35); border: 1px solid rgba(34,31,26,.1); background: #fff; padding: 14px 8px}
.dark-hero-section{position: relative; padding: 70px 64px 74px; border-top: 1px solid rgba(34,31,26,.08); background: #15130f; overflow: hidden}
.dark-hero-bg-img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .5; z-index: 0}
.dark-hero-overlay{position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, rgba(21,19,15,.96) 30%, rgba(21,19,15,.74) 52%, rgba(20,64,60,.42) 100%)}
.dark-hero-grid{position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.85fr; gap: 48px; align-items: center}
.section-num-faded{font-family: 'Cormorant Garamond', serif; font-size: 40px; color: rgba(245,239,226,.25); font-weight: 600; line-height: 1; margin-bottom: 12px}
.section-eyebrow-teal{font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; color: #7fd4cd; text-transform: uppercase; margin-bottom: 14px}
.dark-hero-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 42px; line-height: 1.04; color: #f6efe6; margin-bottom: 18px}
.title-accent-lt-teal{font-style: italic; color: rgb(127, 212, 205)}
.dark-hero-body{font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.55; color: #c8c1b4; max-width: 480px; margin-bottom: 30px}
.cta-row{display: flex; align-items: center; gap: 16px; flex-wrap: wrap}
.cta-btn-teal{display: inline-flex; align-items: center; gap: 12px; background: #2c8a85; color: #fff; font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 16px 26px; border-radius: 10px; box-shadow: 0 16px 36px -20px rgba(20,63,60,.8); transition: transform .2s, box-shadow .2s}
.text-link-gold{display: inline-flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #e3b552; border-bottom: 1.5px solid #cf9626; padding-bottom: 5px; transition: gap .2s}
.pullquote-teal-wide{border-left: 2px solid rgba(127,212,205,.5); padding-left: 28px}
.dark-pullquote-text{font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.32; color: #f3ead9}
.site-footer-3{background: #14403c; color: #f5efe2; padding: 38px 64px 44px}
.dark-section-footer{padding-top: 22px; border-top: 1px solid rgba(245,239,226,.14); display: flex; align-items: center; justify-content: space-between; gap: 24px}
.text-link-teal{display: inline-flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #7fd4cd; transition: gap .2s}
.sidebar-more-section{margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(245,239,226,.14)}
.cs-hero{position: relative; padding: 70px 64px 56px; overflow: hidden}
.icon-grid-4{display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 500px}
.stat-panel{border-radius: 18px; overflow: hidden; background: #15130f; box-shadow: 0 40px 80px -34px rgba(20,63,60,.5), 0 8px 22px -14px rgba(20,63,60,.25); border: 1px solid rgba(44,138,133,.18); padding: 22px}
.stat-panel-label{font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #7fd4cd; margin-bottom: 16px}
.stat-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 11px}
.stat-card{background: rgba(245,239,226,.05); border: 1px solid rgba(92,194,187,.2); border-radius: 11px; padding: 16px 15px}
.stat-num{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 38px; line-height: 1; color: #f3ead9}
.stat-label{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #7fd4cd; margin-top: 6px}
.stat-summary-row{margin-top: 12px; display: flex; align-items: center; justify-content: space-between; background: #14403c; border-radius: 11px; padding: 14px 16px}
.stat-summary-label{font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7fd4cd}
.stat-summary-note{font-family: 'EB Garamond', serif; font-size: 12.5px; color: #cfe4e1; margin-top: 2px}
.stat-big-num{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 42px; line-height: 1; color: #7fd4cd}
.stat-unit{font-size: 18px}
.ramp-header{display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px}
.ramp-name{font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: #221f1a}
.ramp-role{font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #8a7d5f}
.color-ramp-grid{display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px}
.color-swatch{border-radius: 6px; overflow: hidden; box-shadow: 0 2px 6px -3px rgba(40,30,12,.3)}
.color-swatch-label{background: #fff; padding: 5px 3px 6px; text-align: center}
.color-step{font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; color: #36322b}
.color-hex{font-family: 'JetBrains Mono', monospace; font-size: 7.5px; color: #9a8f7c; margin-top: 1px}
.cs-var-layout-mb{display: grid; grid-template-columns: 0.82fr 1.55fr; gap: 50px; align-items: start; margin-bottom: 44px}
.tier-grid{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; align-items: stretch; margin-bottom: 22px}
.card-header-row{display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px}
.tier-desc{font-family: 'EB Garamond', serif; font-size: 13px; line-height: 1.4; color: #5a5347; margin-bottom: 14px; min-height: 54px}
.token-code{font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #36322b}
.token-callout{display: flex; align-items: center; gap: 10px; background: #14403c; border-radius: 11px; padding: 14px 18px}
.token-callout-text{font-family: 'EB Garamond', serif; font-size: 14px; line-height: 1.4; color: #cfe4e1}
.token-inline-code{font-family:'JetBrains Mono',monospace; font-size:12px; color:#7fd4cd}
.var-layout-wide{display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: start}
.section-eyebrow-gold{font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #b07f1f; margin-bottom: 14px}
.fig-card{border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px -26px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.12)}
.cs-var-layout{display: grid; grid-template-columns: 0.82fr 1.55fr; gap: 50px; align-items: start}
.showcase-card{background: #fff; border: 1px solid rgba(34,31,26,.1); border-radius: 14px; padding: 20px 22px; box-shadow: 0 18px 38px -28px rgba(40,30,12,.35)}
.full-img{width:100%; display:block}
.img-layout-wide{display: grid; grid-template-columns: 386fr 283fr; gap: 18px; align-items: stretch}
.showcase-img-card{background: #fff; border: 1px solid rgba(34,31,26,.1); border-radius: 14px; padding: 20px; box-shadow: 0 18px 38px -28px rgba(40,30,12,.35); display:flex; align-items:center}
.img-layout-narrow{display: grid; grid-template-columns: 284fr 371fr; gap: 18px; align-items: stretch}
.showcase-full-card{background: #fff; border: 1px solid rgba(34,31,26,.1); border-radius: 14px; padding: 22px 24px; box-shadow: 0 18px 38px -28px rgba(40,30,12,.35)}
.product-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 16px}
.product-full-card{grid-column: 1 / -1; background: #fff; border: 1px solid rgba(34,31,26,.1); border-radius: 14px; padding: 18px 20px; box-shadow: 0 18px 38px -28px rgba(40,30,12,.35)}
.product-two-col{grid-column: 1 / -1; display: grid; grid-template-columns: 1.51fr 1fr; gap: 16px; align-items: stretch}
.cs-doc-layout{display: grid; grid-template-columns: 0.86fr 1.5fr; gap: 48px; align-items: start; margin-bottom: 34px}
.link-teal{color:#1d6b66; border-bottom:1.5px solid #2c8a85}
.text-bold-gold{color:#b07f1f; font-weight:600}
.feature-card-col{display:flex; flex-direction:column; gap:16px}
.doc-feature-card{background:#fff; border:1px solid rgba(34,31,26,.1); border-radius:11px; padding:16px 18px; box-shadow:0 16px 34px -26px rgba(40,30,12,.35)}
.doc-feature-header{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.doc-feature-label{font-family:'Archivo',sans-serif; font-size:9.5px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:#1d6b66}
.tag-list{display:flex; flex-wrap:wrap; gap:7px}
.tag-chip{font-family:'Archivo',sans-serif; font-size:11px; font-weight:600; color:#4a4439; background:#f0ece2; border:1px solid #e0d8c8; padding:5px 11px; border-radius:7px}
.fig-flush{margin:0}
.cta-btn-gold{display: inline-flex; align-items: center; gap: 12px; background: #cf9626; color: #fff; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 15px 24px; border-radius: 10px; box-shadow: 0 16px 36px -20px rgba(176,127,31,.6); transition: transform .2s, box-shadow .2s}
.showcase-fig-card{border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(40,30,12,.45); border:1px solid rgba(34,31,26,.12)}
.dark-showcase-card{border-radius:12px; overflow:hidden; box-shadow:0 24px 54px -28px rgba(40,30,12,.4); border:1px solid rgba(34,31,26,.12); background:#3a3a3a; padding:18px}
.dark-hero-teal-overlay{position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(80% 120% at 12% 100%, rgba(44,138,133,.24) 0%, rgba(44,138,133,0) 55%)}
.time-list{display:flex; flex-direction:column; gap:12px; max-width:440px}
.time-item{display:flex; align-items:center; gap:14px}
.time-num{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:30px; color:#7fd4cd; width:64px; text-align:right; line-height:1}
.time-unit{font-size:13px}
.time-bar{flex:1; height:1px; background:rgba(127,212,205,.2); position:relative}
.time-label{font-family:'EB Garamond',serif; font-size:14px; color:#cfe4e1; width:160px}
.site-footer{background: #15130f; color: #f5efe2; padding: 40px 64px 44px}
.footer-inner{padding-top: 22px; border-top: 1px solid rgba(245,239,226,.12); display: flex; align-items: center; justify-content: space-between; gap: 24px}
.brand-lockup{display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-bottom: 38px}
.cs-nav-link{position: relative; display: grid; grid-template-columns: 9px 1fr; gap: 13px; align-items: start; margin-bottom: 20px}
.hero-deco-img{position: absolute; top: 50%; right: -30px; transform: translateY(-50%); height: 165%; width: auto; max-width: none; z-index: 0; pointer-events: none; opacity: .98}
.hero-gradient-overlay{position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, #f5efe2 18%, rgba(245,239,226,.6) 40%, rgba(245,239,226,0) 62%)}
.hero-content-grid{position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center}
.hero-copy{position: relative; z-index: 2}
.hero-eyebrow{font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 3.5px; color: #cf9626; text-transform: uppercase; padding-bottom: 6px}
.cs-hero-desc{font-family: 'EB Garamond', serif; font-size: 22px; line-height: 1.45; color: #4a4439; max-width: 450px; margin-bottom: 40px}
.meta-icon{color: #b88a2c; margin-bottom: 9px}
.meta-value{font-family: 'EB Garamond', serif; font-size: 14.5px; line-height: 1.28; color: #36322b}
.hero-mockup-wrap{position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center}
.brand-card{position: relative; z-index: 2; width: 100%; max-width: 460px; background: linear-gradient(155deg, #861a1f, #5e0e12 70%); border-radius: 18px; padding: 46px 40px; box-shadow: 0 44px 84px -30px rgba(60,8,12,.6), 0 10px 26px -14px rgba(40,30,12,.3); overflow: hidden}
.deco-ring-lg{position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border: 1px solid rgba(245,239,226,.18); border-radius: 50%}
.deco-ring-sm{position: absolute; top: -18px; right: -18px; width: 130px; height: 130px; border: 1px solid rgba(245,239,226,.12); border-radius: 50%}
.brand-icon-wrap{width: 60px; height: 60px; border-radius: 50%; background: #f3efe9; display: flex; align-items: center; justify-content: center; margin-bottom: 26px}
.brand-monogram{font-family: 'Crimson Pro', serif; font-weight: 600; font-size: 38px; color: #861a1f; line-height: 1}
.brand-name-display{font-family: 'Crimson Pro', serif; font-weight: 600; font-size: 44px; line-height: 1; color: #f6efe6; margin-bottom: 8px}
.brand-tagline{font-family: 'Sofia Pro', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 4px; color: #e0b9bb; text-transform: uppercase; margin-bottom: 30px}
.card-meta{font-family: 'Sofia Pro', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; color: rgba(245,239,226,.6); text-transform: uppercase; margin-bottom: 12px}
.swatch-row{display: flex; gap: 8px}
.swatch-crimson{width: 30px; height: 30px; border-radius: 7px; background: #861a1f; border: 1px solid rgba(245,239,226,.25)}
.swatch-red{width: 30px; height: 30px; border-radius: 7px; background: #db0000}
.swatch-amber{width: 30px; height: 30px; border-radius: 7px; background: #eca400}
.swatch-green{width: 30px; height: 30px; border-radius: 7px; background: #11bc75}
.swatch-taupe{width: 30px; height: 30px; border-radius: 7px; background: #cebda7}
.swatch-cream{width: 30px; height: 30px; border-radius: 7px; background: #f3efe9}
.aside-grid{display: grid; grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.7fr); gap: 56px; align-items: start}
.card-num{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #b07f1f; margin-bottom: 8px}
.card-grid-3{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px}
.feature-card{min-width: 0; background: #fff; border: 1px solid rgba(34,31,26,.1); border-radius: 12px; padding: 26px 24px; box-shadow: 0 18px 40px -26px rgba(40,30,12,.3)}
.card-icon{width: 42px; height: 42px; border-radius: 50%; background: rgba(207,150,38,.16); display: flex; align-items: center; justify-content: center; color: #b07f1f; margin-bottom: 18px}
.card-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 22px; line-height: 1.12; color: #221f1a; margin-bottom: 9px}
.aside-grid-mb{display: grid; grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.7fr); gap: 56px; align-items: start; margin-bottom: 40px}
.brand-emphasis{font-weight: 600; color: #861a1f}
.ds-label{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #9a8f7c; text-transform: uppercase; margin-bottom: 16px}
.img-grid-5{display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px}
.img-card{border-radius: 10px; overflow: hidden; box-shadow: 0 10px 24px -16px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.08)}
.img-label{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 16px; color: #221f1a; margin-top: 10px}
.img-sublabel{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .3px; color: #8a8170; text-transform: uppercase}
.card-grid-2{display: grid; grid-template-columns: 1fr 1fr; gap: 22px}
.type-card{background: #fff; border: 1px solid rgba(34,31,26,.1); border-radius: 12px; padding: 30px; box-shadow: 0 18px 40px -26px rgba(40,30,12,.28)}
.card-header{display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px}
.card-label{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #9a8f7c; text-transform: uppercase}
.font-label-serif{font-family: 'Crimson Pro', serif; font-size: 14px; color: #861a1f; font-weight: 600}
.font-display-serif{font-family: 'Crimson Pro', serif; font-weight: 600; font-size: 64px; line-height: 1; color: #1f1a1a; margin-bottom: 14px}
.font-sample-serif{font-family: 'Crimson Pro', serif; font-weight: 600; font-size: 30px; line-height: 1.1; color: #1f1a1a}
.font-desc-serif{font-family: 'Crimson Pro', serif; font-weight: 500; font-size: 20px; line-height: 1.2; color: #6b4d44; margin-top: 6px}
.font-abc-serif{font-family: 'Crimson Pro', serif; font-size: 13px; letter-spacing: 1px; color: #b0a08f; margin-top: 18px}
.font-label-sans{font-family: 'Sofia Pro', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 14px; color: #861a1f; font-weight: 700}
.font-display-sans{font-family: 'Sofia Pro', 'Avenir Next', 'Segoe UI', sans-serif; font-weight: 700; font-size: 64px; line-height: 1; color: #1f1a1a; margin-bottom: 14px}
.font-sample-sans{font-family: 'Sofia Pro', 'Avenir Next', 'Segoe UI', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .3px; color: #1f1a1a; text-transform: uppercase; margin-bottom: 10px}
.font-desc-sans{font-family: 'Sofia Pro', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.55; color: #4a4439}
.font-abc-sans{font-family: 'Sofia Pro', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 13px; letter-spacing: 1px; color: #b0a08f; margin-top: 18px}
.cs-section-wide{padding: 64px 64px 70px; border-top: 1px solid rgba(34,31,26,.08)}
.section-intro-wrap{margin-bottom: 36px; max-width: 680px}
.narrow-content-grid{display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start}
.browser-frame-light{border-radius: 12px; overflow: hidden; box-shadow: 0 24px 54px -26px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.12); background: #fbfbfc}
.browser-toolbar-light{display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #f1f1f3; border-bottom: 1px solid rgba(0,0,0,.06)}
.browser-dot-neutral{width: 9px; height: 9px; border-radius: 50%; background: #d9d9de}
.browser-url-label{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #9a96a0; margin-left: 6px}
.browser-content{overflow: hidden; background: #fff}
.browser-card-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start}
.ui-card{background: #fff; border: 1px solid rgba(34,31,26,.1); border-radius: 12px; padding: 24px; box-shadow: 0 18px 40px -28px rgba(40,30,12,.28)}
.ui-card-label{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #9a8f7c; text-transform: uppercase; margin-bottom: 18px}
.btn-row{display: flex; flex-wrap: wrap; gap: 10px; align-items: center}
.btn-primary{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #fff; background: #861a1f; padding: 11px 22px; border-radius: 7px}
.btn-outline{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #861a1f; background: #fff; border: 1.5px solid #861a1f; padding: 9.5px 20px; border-radius: 7px}
.btn-row-2{display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px}
.btn-text{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #861a1f; background: transparent; padding: 11px 12px; border-radius: 7px; text-decoration: underline; text-underline-offset: 3px}
.btn-disabled{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #a59c92; background: #ecebe9; padding: 11px 22px; border-radius: 7px}
.form-label{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 11px; font-weight: 600; color: #6b6256; margin-bottom: 6px}
.form-input-focus{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 13px; color: #2a2a2a; background: #fff; border: 1.5px solid #861a1f; border-radius: 7px; padding: 10px 12px; margin-bottom: 14px; box-shadow: 0 0 0 3px rgba(134,26,31,.12)}
.input-caret{color:#861a1f}
.form-input-error{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 13px; color: #c0392b; background: #fff; border: 1.5px solid #db0000; border-radius: 7px; padding: 10px 12px}
.form-error-msg{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 11px; color: #db0000; margin-top: 6px}
.selection-list{display: flex; flex-direction: column; gap: 14px}
.row-flex{display: flex; align-items: center; gap: 10px}
.checkbox-checked{width: 20px; height: 20px; border-radius: 5px; background: #861a1f; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px}
.item-label{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 13px; color: #2a2a2a}
.radio-btn{width: 20px; height: 20px; border-radius: 50%; border: 2px solid #861a1f; display: flex; align-items: center; justify-content: center}
.radio-dot{width: 9px; height: 9px; border-radius: 50%; background: #861a1f}
.toggle{width: 38px; height: 22px; border-radius: 999px; background: #11bc75; position: relative}
.toggle-knob{position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff}
.alert-list{display: flex; flex-direction: column; gap: 9px}
.alert-success{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 12px; color: #0a6b42; background: #e6f7ef; border-left: 3px solid #11bc75; border-radius: 5px; padding: 9px 12px}
.alert-warning{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 12px; color: #8a5a00; background: #fdf3df; border-left: 3px solid #eca400; border-radius: 5px; padding: 9px 12px}
.alert-error{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 12px; color: #a31515; background: #fdeaea; border-left: 3px solid #db0000; border-radius: 5px; padding: 9px 12px}
.alert-info{font-family: 'Sofia Pro','Avenir Next','Segoe UI',sans-serif; font-size: 12px; color: #6b4d44; background: #f5f0ea; border-left: 3px solid #cebda7; border-radius: 5px; padding: 9px 12px}
.cs-section-outcomes{padding: 60px 64px; background: #efe6d4; border-top: 1px solid rgba(34,31,26,.08)}
.outcomes-inner{display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 48px; align-items: start}
.findings-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px}
.stat-value-sm{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 27px; color: #b07f1f; line-height: 1}
.stat-label{font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #6b6353; margin-top: 5px}
.cs-note{margin-top: 22px; font-family: 'EB Garamond', serif; font-style: italic; font-size: 14px; color: #8a7f6b; line-height: 1.4}
.pullquote-wrap{border-left: 2px solid #cf9626; padding-left: 28px; display: flex; align-items: center; height: 100%}
.cs-hero-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 74px; line-height: .94; letter-spacing: -1px; color: #211d18; margin-bottom: 26px}
.hero-media-frame{position: relative; z-index: 2; width: 100%; max-width: 580px}
.hero-img-wrap{background: #14141a; border-radius: 16px; padding: 13px; box-shadow: 0 44px 84px -30px rgba(40,30,12,.55), 0 10px 26px -14px rgba(40,30,12,.3)}
.content-frame{border-radius: 7px; overflow: hidden; background: #fff}
.hero-shadow{position: relative; height: 15px; width: 116%; left: -8%; background: linear-gradient(#d2d3d7, #a4a5aa); border-radius: 0 0 16px 16px; box-shadow: 0 18px 26px -14px rgba(0,0,0,.4)}
.hero-glow{position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 96px; height: 7px; background: #8b8c91; border-radius: 0 0 8px 8px}
.reqs-section{margin-top: 48px; padding-top: 34px; border-top: 1px solid rgba(34,31,26,.14)}
.reqs-label{font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; color: #b07f1f; text-transform: uppercase; margin-bottom: 22px}
.reqs-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 44px}
.req-row{display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 9px 0; border-bottom: 1px solid rgba(34,31,26,.08)}
.req-icon{width: 22px; height: 22px; border-radius: 50%; background: #313a26; color: #e3b552; display: flex; align-items: center; justify-content: center; font-size: 12px}
.req-text{font-size: 15px; line-height: 1.35; color: #3c382f; padding-top: 1px}
.split-content-grid{display: grid; grid-template-columns: 1fr 0.92fr; gap: 52px; align-items: start}
.text-emphasis{font-weight: 600; color: #6b4d12}
.tag-pill{font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .3px; color: #5a5347; background: #efe6d4; border: 1px solid rgba(34,31,26,.12); border-radius: 999px; padding: 6px 14px}
.callout-card{margin-top: 30px; background: #1a1815; border-radius: 12px; padding: 26px; color: #f5efe2; display: flex; align-items: center; gap: 22px}
.callout-icon{width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(207,150,38,.5); display: flex; align-items: center; justify-content: center; color: #e3b552}
.callout-text{font-family: 'EB Garamond', serif; font-size: 15px; line-height: 1.45; color: #cfc8b8}
.browser-inner{padding: 22px; background: #fbfbfc}
.section-layout-grid{display: grid; grid-template-columns: 1.5fr 0.92fr; gap: 40px; align-items: start; margin-bottom: 36px}
.body-text{font-size: 16px; line-height: 1.5; color: #4a4439; max-width: 640px; margin-bottom: 26px}
.stat-callout-alt{background: #313a26; border-radius: 12px; padding: 30px 26px; color: #f3efe2; position: relative; overflow: hidden}
.stat-value{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 56px; line-height: 1; color: #e3b552; margin-bottom: 12px}
.stat-desc{font-family: 'EB Garamond', serif; font-size: 15px; line-height: 1.4; color: #d6d8c5}
.fig-wrap{margin: 0 0 18px}
.figure-img-wrap{border-radius: 9px; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.1); background: #fff}
.img-grid-3{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: start}
.img-grid-4{display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start}
.img-grid-mosaic{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 18px}
.mosaic-tall{grid-row: span 2; height: 100%}
.mosaic-wide{grid-column: span 2; aspect-ratio: 2.4/1}
.img-frame{border-radius: 9px; overflow: hidden; height: 230px; box-shadow: 0 18px 40px -22px rgba(40,30,12,.35); border: 1px solid rgba(34,31,26,.1); background: #fff}
.img-cover{width: 100%; height: 100%; object-fit: cover; object-position: top; display: block}
.stat-callout{background: #1a1815; border-radius: 12px; padding: 30px 26px; color: #f5efe2; position: relative; overflow: hidden}
.stat-headline{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 40px; line-height: 1.05; color: #e3b552; margin-bottom: 12px}
.figure-card{border-radius: 10px; overflow: hidden; box-shadow: 0 22px 48px -24px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.1); background: #fff}
.figure-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start}
.body-para{font-size: 16px; line-height: 1.5; color: #4a4439; max-width: 640px; margin-bottom: 14px}
.text-bold{font-weight: 600}
.stat-icon{width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(227,181,82,.45); display: flex; align-items: center; justify-content: center; color: #e3b552; margin-bottom: 24px}
.compare-layout{display: grid; grid-template-columns: 1fr 1.18fr; gap: 28px; align-items: stretch}
.compare-fig{margin: 0; display: flex; flex-direction: column}
.compare-card{background: #fff; border-radius: 12px; border: 1px solid rgba(34,31,26,.1); box-shadow: 0 18px 40px -24px rgba(40,30,12,.3); padding: 8px 8px 10px; align-self: start}
.compare-header{display: grid; grid-template-columns: 1.3fr 1fr 1.5fr; gap: 0; font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #9a8f7c; padding: 14px 16px 12px}
.text-center{text-align: center}
.text-right{text-align: right}
.compare-row{display: grid; grid-template-columns: 1.3fr 1fr 1.5fr; gap: 0; align-items: center; padding: 14px 16px; border-top: 1px solid rgba(34,31,26,.08)}
.compare-name{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 18px; color: #221f1a}
.compare-val{text-align: center; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 22px; color: #6b6353}
.compare-note{text-align: right; font-size: 13px; font-style: italic; color: #9a8f7c}
.compare-tag{font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #b08a4a}
.compare-val-alt{text-align: center; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 22px; color: #3a352c}
.compare-note-alt{text-align: right; font-size: 12.5px; font-style: italic; color: #8a5a3c; line-height: 1.35}
.compare-row-win{display: grid; grid-template-columns: 1.3fr 1fr 1.5fr; gap: 0; align-items: center; padding: 16px; border-top: 1px solid rgba(34,31,26,.08); background: #f2f5ec; border-radius: 8px; margin: 4px}
.compare-name-win{display: flex; align-items: center; gap: 6px}
.compare-name-text{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 18px; color: #313a26}
.check-badge{display: inline-flex; width: 16px; height: 16px; border-radius: 50%; background: #4e6b35; color: #fff; align-items: center; justify-content: center; font-size: 10px}
.compare-tag-win{font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #4e6b35}
.compare-val-win{text-align: center; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 24px; color: #313a26}
.compare-note-win{text-align: right; font-size: 12.5px; font-style: italic; color: #4e6b35; line-height: 1.35}
.compare-footnote{padding: 4px 16px 12px; font-size: 12.5px; line-height: 1.4; color: #7d7460}
.stat-row{display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap}
.stat-num{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 46px; line-height: 1; color: #e3b552}
.stat-label{font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #aeb59c; margin-top: 5px}
.project-label{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: #cf9626; text-transform: uppercase; line-height: 1.4; margin-bottom: 26px}
.hero-bg{position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, #f5efe2 16%, rgba(245,239,226,.55) 38%, rgba(245,239,226,0) 60%)}
.hero-content{position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 32px; align-items: center}
.hero-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 92px; line-height: .92; letter-spacing: -1px; color: #211d18; margin-bottom: 26px}
.hero-desc{font-family: 'EB Garamond', serif; font-size: 22px; line-height: 1.45; color: #4a4439; max-width: 430px; margin-bottom: 40px}
.hero-visual{position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center}
.hero-img-inner{border-radius: 7px; overflow: hidden; height: 372px; background: #fff}
.section-inner{display: grid; grid-template-columns: 0.82fr 1.55fr 0.92fr; gap: 40px; align-items: start}
.browser-frame{border-radius: 10px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.1)}
.browser-toolbar{display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #232329}
.browser-dot-red{width: 8px; height: 8px; border-radius: 50%; background: #ff5f57}
.browser-dot-yellow{width: 8px; height: 8px; border-radius: 50%; background: #febc2e}
.browser-dot-green{width: 8px; height: 8px; border-radius: 50%; background: #28c840}
.browser-screen{background: #fff; max-height: 460px; overflow: hidden}
.wizard-inner{display: grid; grid-template-columns: 1.4fr 0.92fr; gap: 40px; align-items: start; margin-bottom: 40px}
.wizard-body{font-size: 16px; line-height: 1.5; color: #4a4439; max-width: 620px; margin-bottom: 14px}
.wizard-body-last{font-size: 16px; line-height: 1.5; color: #4a4439; max-width: 620px}
.figure-grid-3{display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 18px; align-items: start}
.stats-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px}
.cs-quote{border-left: 2px solid #cf9626; padding-left: 28px; height: 100%; align-items: center}
.quote-text{font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 27px; line-height: 1.3; color: #2a261f; text-align: left; height: 100%}
.text-nowrap{white-space: nowrap}
.proj-thumb-sand{position: relative; flex: 0 0 55%; overflow: hidden; background: #ece5d6}
.proj-thumb-mist{position: relative; flex: 0 0 55%; overflow: hidden; background: #eef1f4}
.proj-thumb-sage{position: relative; flex: 0 0 55%; overflow: hidden; background: #e7ecea}
.home-hero{position: relative; padding: 76px 60px 70px; overflow: hidden}
.home-hero-bg-img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right top; pointer-events: none; z-index: 0}
.home-hero-overlay{position: absolute; inset: 0; background: linear-gradient(95deg, #f5efe2 28%, rgba(245,239,226,.74) 45%, rgba(245,239,226,.16) 64%, rgba(245,239,226,.4) 100%); pointer-events: none; z-index: 1}
.home-hero-content{position: relative; z-index: 2; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 30px; align-items: center; min-height: 520px}
.home-eyebrow{font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #b07f1f; text-transform: uppercase}
.section-rule{width: 34px; height: 1.5px; background: #cf9626}
.home-hero-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 68px; line-height: .98; letter-spacing: -1px; color: #211d18; margin-bottom: 26px}
.hero-title-accent{font-style: italic; font-weight: 600; color: #b07f1f}
.home-hero-desc{font-family: 'EB Garamond', serif; font-size: 19px; line-height: 1.5; color: #4a4439; max-width: 420px; margin-bottom: 0}
.hero-cta{display: inline-flex; align-items: center; gap: 14px; background: #cf9626; color: #fff; font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 17px 30px; border-radius: 8px; transition: background .2s; grid-column: 1; justify-self: start; align-self: start; margin-top: 20px;}
.mockup-stage{position: relative; height: 480px}
.mockup-card-main{position: absolute; top: 14px; left: 8px; width: 384px; background: #fff; border-radius: 16px; box-shadow: 0 40px 80px -34px rgba(40,30,12,.45), 0 8px 22px -14px rgba(40,30,12,.25); border: 1px solid rgba(34,31,26,.06); overflow: hidden; animation: rh-floatA 10s ease-in-out infinite}
.mockup-card-header{display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid rgba(34,31,26,.06)}
.mockup-card-icon{width: 26px; height: 26px; border-radius: 7px; background: #fbeccb; display: flex; align-items: center; justify-content: center}
.mockup-app-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 16px; color: #211d18; line-height: 1}
.mockup-app-subtitle{font-family: 'EB Garamond', serif; font-size: 11px; color: #9a8f7c; margin-top: 2px}
.mockup-card-body{display: grid; grid-template-columns: 92px 1fr}
.mockup-nav-col{border-right: 1px solid rgba(34,31,26,.06); padding: 12px 10px; display: flex; flex-direction: column; gap: 3px}
.mockup-nav-item-active{display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 6px; background: #fbeccb; font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600; color: #8a6212}
.mockup-nav-dot{width: 5px; height: 5px; border-radius: 50%; background: #cf9626}
.mockup-nav-item{padding: 6px 8px; font-family: 'Archivo', sans-serif; font-size: 10px; color: #b3a896}
.mockup-content-col{padding: 14px}
.mockup-schedule-label{font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #9a8f7c; margin-bottom: 9px}
.mockup-schedule-list{display: flex; flex-direction: column; gap: 8px}
.mockup-appt-time{font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600; color: #8a6212; width: 44px}
.mockup-appt-name{font-family: 'EB Garamond', serif; font-size: 12px; color: #36322b}
.mockup-divider{height: 1px; background: rgba(34,31,26,.05)}
.mockup-card-progress{position: absolute; bottom: 24px; left: 0; width: 268px; background: #fff; border-radius: 14px; box-shadow: 0 34px 64px -30px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.06); padding: 16px 18px; animation: rh-floatB 11s ease-in-out infinite; z-index: 3}
.mockup-card-section-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 15px; color: #211d18}
.mockup-card-link{font-family: 'Archivo', sans-serif; font-size: 9px; color: #b3a896}
.mockup-progress-charts{display: flex; align-items: center; gap: 14px}
.donut-arc{animation: rh-donut 1.6s ease-out forwards}
.sparkline-svg{overflow: visible}
.sparkline-path{animation: rh-draw 2s ease-out .3s forwards}
.mockup-card-care{position: absolute; bottom: 0; right: 6px; width: 184px; background: #fff; border-radius: 22px; box-shadow: 0 36px 70px -28px rgba(40,30,12,.45); border: 1px solid rgba(34,31,26,.06); padding: 16px 16px 20px; animation: rh-floatC 9.5s ease-in-out infinite; z-index: 4}
.mockup-card-handle{width: 44px; height: 4px; border-radius: 4px; background: #ece5d6; margin: 0 auto 14px}
.mockup-section-date{font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #b3a896; margin: 10px 0 12px}
.care-item-check{width: 18px; height: 18px; border-radius: 50%; background: #e6f0dd; display: flex; align-items: center; justify-content: center; color: #4e6b35; font-size: 10px}
.care-item-label{font-family: 'EB Garamond', serif; font-size: 12px; color: #36322b; line-height: 1}
.care-item-meta{font-family: 'Archivo', sans-serif; font-size: 8.5px; color: #b3a896; margin-top: 2px}
.care-item-pending{width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #dcd3c2}
.featured-section{padding: 64px 60px; border-top: 1px solid rgba(34,31,26,.08)}
.featured-header{display: flex; align-items: center; gap: 16px; margin-bottom: 36px}
.featured-grid{display: grid; grid-template-columns: 0.86fr 1.5fr 0.78fr; gap: 40px; align-items: start}
.featured-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 44px; line-height: 1; color: #211d18; margin-bottom: 4px}
.featured-subtitle{font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 27px; line-height: 1.05; color: #b07f1f; margin-bottom: 20px}
.featured-desc{font-family: 'EB Garamond', serif; font-size: 15.5px; line-height: 1.5; color: #4a4439; margin-bottom: 22px}
.text-link{display: inline-flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #b07f1f; border-bottom: 1.5px solid #cf9626; padding-bottom: 5px; transition: gap .2s}
.featured-meta-grid{margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px}
.featured-meta-label{font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #b07f1f; margin-bottom: 4px}
.featured-meta-value{font-family: 'EB Garamond', serif; font-size: 13.5px; color: #36322b; line-height: 1.25}
.featured-mockup-frame{border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(40,30,12,.4); border: 1px solid rgba(34,31,26,.1)}
.featured-mockup-screen{background: #fff; max-height: 470px; overflow: hidden}
.impact-label{font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #9a8f7c; margin-bottom: 22px}
.impact-list{display: flex; flex-direction: column; gap: 22px}
.impact-stat-row{display: flex; align-items: center; gap: 16px}
.impact-stat-icon{width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: #cf9626; display: flex; align-items: center; justify-content: center; color: #fff}
.impact-stat-value{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 24px; line-height: 1; color: #211d18}
.impact-stat-desc{font-family: 'EB Garamond', serif; font-size: 12.5px; color: #6b6353; margin-top: 2px}
.featured-quote{margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(34,31,26,.1)}
.quote-icon{margin-bottom: 6px}
.featured-quote-text{font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.3; color: #2a261f}
.quote-attribution{font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .5px; color: #9a8f7c; margin-top: 12px}
.process-section{padding: 60px 60px; border-top: 1px solid rgba(34,31,26,.08)}
.process-grid{display: grid; grid-template-columns: 0.78fr 2.2fr; gap: 44px; align-items: center}
.process-eyebrow{font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: #b07f1f; text-transform: uppercase; margin-bottom: 16px}
.process-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 33px; line-height: 1.1; color: #211d18; margin-bottom: 22px}
.process-steps{position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px}
.process-connector-line{position: absolute; top: 33px; left: 10%; right: 10%; height: 1.5px; background: repeating-linear-gradient(90deg, #d8c9a8 0 6px, transparent 6px 12px); z-index: 0}
.process-step{position: relative; z-index: 1; text-align: center}
.process-step-icon{width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 50%; background: #fff; border: 1.5px solid #e6d8b8; display: flex; align-items: center; justify-content: center; color: #b07f1f; box-shadow: 0 14px 30px -18px rgba(40,30,12,.35)}
.process-step-num{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 14px; color: #c2b083; margin-bottom: 4px}
.process-step-name{font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #211d18; margin-bottom: 7px}
.process-step-desc{font-family: 'EB Garamond', serif; font-size: 12.5px; line-height: 1.4; color: #6b6353; max-width: 130px; margin: 0 auto}
.about-section{background: #15130f; color: #f5efe2; padding: 64px 60px 30px; position: relative; overflow: hidden}
.about-grid{display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center}
.about-content-grid{display: grid; grid-template-columns: 234px 1fr; gap: 30px; align-items: center}
.about-img{display: block; width: 100%; height: auto}
.about-eyebrow{font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: #e3b552; text-transform: uppercase; margin-bottom: 18px}
.about-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 36px; line-height: 1.08; color: #f6efe6; margin-bottom: 20px}
.about-title-accent{font-style: italic; color: #e3b552}
.about-body{font-family: 'EB Garamond', serif; font-size: 15px; line-height: 1.55; color: #c8c1b4; margin-bottom: 26px}
.about-infographic-wrap{position: relative; width: 100%; max-width: 540px; margin: 0 auto}
.about-infographic-text{position: absolute; top: 43%; left: 50%; transform: translate(-50%,-50%); width: 24%; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(8px, 1.9vw, 14px); line-height: 1.28; color: #f3ead9; pointer-events: none}
.about-footer-bar{margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(245,239,226,.12); display: flex; align-items: center; justify-content: space-between}
.about-footer-name{font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #e8e2d4}

/* ============================================================
   ABOUT ME PAGE
   ============================================================ */
.about-hero-section{position: relative; padding: 74px 60px 56px; overflow: hidden; border-bottom: 1px solid rgba(34,31,26,.08)}
.about-hero-content{position: relative; z-index: 2; display: grid; grid-template-columns: 260px 1fr; gap: 46px; align-items: center}
.about-hero-portrait{position: relative; animation: rh-floatA 11s ease-in-out infinite}
.about-hero-portrait-backing{position: absolute; inset: -14px; border-radius: 20px; background: #15130f; transform: rotate(-2.5deg)}
.about-hero-portrait-frame{position: relative; border-radius: 16px; overflow: hidden; background: #15130f; box-shadow: 0 40px 80px -34px rgba(40,30,12,.5)}
.about-hero-title{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 58px; line-height: 1; letter-spacing: -1px; color: #211d18; margin-bottom: 22px}
.about-hero-desc{font-family: 'EB Garamond', serif; font-size: 19px; line-height: 1.5; color: #4a4439; max-width: 500px}

.bio-section{padding: 62px 60px 58px}
.bio-grid{display: grid; grid-template-columns: 0.72fr 2.1fr; gap: 44px; align-items: start}
.bio-eyebrow{font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: #b07f1f; text-transform: uppercase; margin-bottom: 16px}
.section-heading-serif{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 34px; line-height: 1.08; color: #211d18}
.bio-rule{display: block; margin-top: 22px; width: 44px; height: 3px; border-radius: 3px; background: #cf9626}
.bio-copy{max-width: 720px}
.bio-lead{font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 27px; line-height: 1.15; color: #211d18; margin-bottom: 22px}
.bio-body{font-family: 'EB Garamond', serif; font-size: 18px; line-height: 1.62; color: #4a4439; margin-bottom: 20px}
.bio-inline-icon{display: inline-block; vertical-align: -6px; width: 26px; height: 26px; margin-left: 8px}

.lightning-section{padding: 62px 60px; position: relative; overflow: hidden; border-top: 1px solid rgba(34,31,26,.08)}
.lightning-label-row{display: flex; align-items: center; gap: 16px; margin-bottom: 8px}
.lightning-heading{margin-bottom: 34px; max-width: 620px}
.vs-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px}
.vs-card{background: #fff; border: 1px solid rgba(34,31,26,.08); border-radius: 14px; padding: 22px 20px; box-shadow: 0 18px 40px -30px rgba(40,30,12,.35); transition: transform .25s, box-shadow .25s}
.vs-label{font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #b3a896; margin-bottom: 14px}
.vs-values{display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap}
.vs-winner{font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 27px; line-height: 1; color: #b07f1f}
.vs-loser{font-family: 'EB Garamond', serif; font-size: 15px; color: #9a8f7c; text-decoration: line-through; text-decoration-color: rgba(207,150,38,.55)}

/* ============================================================
   MOBILE HEADER / NAV / TOC — base styles (all viewports)
   ============================================================ */

.rh-mobile-header { display: none; }
.rh-toc-bar       { display: none; }

.rh-nav-overlay {
  position: fixed; inset: 0; z-index: 300;
  visibility: hidden; pointer-events: none;
}
.rh-nav-overlay::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.5); opacity: 0;
  transition: opacity .3s;
}
.rh-nav-overlay.is-open { visibility: visible; pointer-events: auto; }
.rh-nav-overlay.is-open::before { opacity: 1; }

.rh-mobile-nav {
  position: absolute; top: 0; left: 0;
  width: 280px; height: 100%;
  background: #15130f;
  transform: translateX(-100%);
  transition: transform .3s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.rh-nav-overlay.is-open .rh-mobile-nav { transform: translateX(0); }

.rh-nav-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 56px; flex-shrink: 0;
  border-bottom: 1px solid rgba(245,239,226,.08);
}
.rh-nav-close {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: none;
  color: rgba(245,239,226,.7); cursor: pointer; padding: 0;
}
.rh-nav-close:hover { color: #f5efe2; }

.rh-nav-links { flex: 1; display: flex; flex-direction: column; padding: 12px 0; }
.rh-mob-link {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 500;
  color: rgba(245,239,226,.7); text-decoration: none;
  transition: color .15s, background .15s;
}
.rh-mob-link:hover { color: #f5efe2; background: rgba(245,239,226,.05); }
.rh-mob-ico {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(245,239,226,.06); border-radius: 8px;
  color: #e3b552; flex-shrink: 0;
}

.rh-nav-social {
  display: flex; gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(245,239,226,.08);
  margin-top: auto;
}
.rh-mob-social {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: rgba(245,239,226,.6);
  background: rgba(245,239,226,.06); border-radius: 8px;
  transition: color .15s, background .15s; text-decoration: none;
}
.rh-mob-social:hover { color: #f5efe2; background: rgba(245,239,226,.12); }
.rh-mob-social img { opacity: .6; transition: opacity .15s; }
.rh-mob-social:hover img { opacity: 1; }

.rh-nav-brand { text-decoration: none; }
.rh-mobile-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.rh-mobile-logo { width: 26px; height: 26px; object-fit: contain; }
.rh-mobile-name {
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 600;
  color: #f5efe2; letter-spacing: .2px;
}

.rh-toc-link {
  display: flex; align-items: center; padding: 0 16px; height: 40px;
  font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  color: rgba(245,239,226,.45); white-space: nowrap; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s; flex-shrink: 0;
}
.rh-toc-link:hover { color: rgba(245,239,226,.8); }
.rh-toc-link.is-active { color: #e3b552; border-bottom-color: #e3b552; }

/* ============================================================
   @media (max-width: 1025px) — responsive reflow + mobile UI
   ============================================================ */
@media (max-width: 1025px) {

  /* ROOT LAYOUT */
  .page-layout, .home-layout, .cs-layout { grid-template-columns: 1fr; }
  .sidebar, .sidebar-2 { display: none; }

  /* SECTION PADDING */
  .cs-section{padding:40px 20px;}
  .section-header-row{margin-bottom:24px;}
  .cs-dark-section{padding:40px 20px 24px;} .page-header{padding:40px 20px 28px;}
  .cards-section{padding:12px 16px 36px;} .cs-hero-section{padding:40px 20px;} .cs-section-tinted{padding:40px 20px;}
  .dark-section{padding:36px 20px;} .cs-section-tinted{padding:40px 20px;} .cs-section-padded{padding:0 20px 36px;}
  .cs-section{padding:40px 20px;}
  .dark-hero-section{padding:40px 20px;} .cs-hero{padding:40px 20px;}
  .site-footer{padding:28px 20px;} .site-footer-2{padding:8px 20px 32px;} .site-footer-3{padding:28px 20px;}

  /* INDEX PAGE SECTION PADDING */
  .home-hero{padding:44px 20px 36px;}
  .featured-section{padding:40px 20px;}
  .process-section{padding:40px 20px;}
  .about-section{padding:40px 20px 24px;}

  /* INDEX HERO */
  .home-hero-content { grid-template-columns: 1fr; min-height: auto; gap: 20px; }
  .home-hero-title { font-size: 46px; }
  .home-hero-desc { font-size: 17px; max-width: 100%; }
  .mockup-stage { display: flex; flex-direction: column; gap: 14px; height: auto; position: static; order: 1; margin-top: 8px; }
  .mockup-card-main { position: static; width: 100%; max-width: 100%; animation: none; }
  .mockup-card-progress { position: static; width: 100%; max-width: 100%; animation: none; }
  .mockup-card-care { position: static; width: 100%; max-width: 100%; border-radius: 14px; animation: none; padding-bottom: 20px; }
  .hero-cta { order: 2; justify-self: start; margin-top: 4px; }

  /* FEATURED CASE STUDY */
  .featured-grid { grid-template-columns: 1fr; gap: 32px; }
  .featured-title { font-size: 34px; }
  .featured-meta-grid { grid-template-columns: 1fr 1fr; }

  /* PROCESS SECTION */
  .process-grid { grid-template-columns: 1fr; gap: 32px; }
  .process-steps { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .process-connector-line { display: none; }
  .process-step-icon { width: 52px; height: 52px; }

  /* ABOUT SECTION */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-content-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-content-grid > :first-child { max-width: 180px; }
  .about-infographic-wrap { max-width: 340px; margin: 0 auto; }
  .about-footer-bar { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* ABOUT ME PAGE */
  .about-hero-section { padding: 44px 20px 36px; }
  .about-hero-content { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .about-hero-content .hero-greeting { justify-content: center; }
  .about-hero-portrait { max-width: 220px; margin: 0 auto; }
  .about-hero-title { font-size: 42px; }
  .about-hero-desc { max-width: 100%; margin: 0 auto; }
  .bio-section { padding: 40px 20px; }
  .bio-grid { grid-template-columns: 1fr; gap: 24px; }
  .bio-copy { max-width: 100%; }
  .lightning-section { padding: 40px 20px; }
  .vs-grid { grid-template-columns: repeat(2, 1fr); }
  .vs-values { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* CASE STUDIES PAGE */
  .page-title { font-size: 42px; }
  .proj-grid { grid-template-columns: 1fr; }

  /* CASE STUDY PROGRESS SIDEBAR — deactivate sticky */
  .cs-sidebar { position: static; }

  /* CASE STUDY HERO HEADINGS */
  .hero-content-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-equal-grid { grid-template-columns: 1fr; gap: 32px; }
  .page-hero-title { font-size: 54px; }
  .page-title { font-size: 50px; }
  .cs-hero-title { font-size: 47px; }
  .hero-content { grid-template-columns: 1fr; gap: 32px; }
  .hero-title { font-size: 62px; }

  /* SNAKE RIVER FARMS OVERFLOW FIXES */
  .cs-img { max-width: 100%; height: auto; }
  .cs-hero { min-height: auto; }

  /* META GRIDS */
  .icon-grid-4 { grid-template-columns: repeat(2, 1fr); background: rgba(255,255,255,0.55); border-radius: 14px; padding: 20px 16px; }
  .hero-meta { grid-template-columns: repeat(2, 1fr); background: rgba(255,255,255,0.55); border-radius: 14px; padding: 20px 16px; }
  .hero-meta-grid { grid-template-columns: repeat(2, 1fr); background: rgba(255,255,255,0.55); border-radius: 14px; padding: 20px 16px; }

  /* ALL SECTION CONTENT GRIDS — 1fr */
  .hero-body-grid,.dark-section-grid,.cs-two-col,.cs-reflection-grid,.challenge-inner,.problem-grid,.img-grid-2,.cs-two-col-mb,.cs-wide-col-mb,.mobile-preview-grid,
  .dark-card-grid,.two-col-tight,.cs-two-col-sm,.cs-two-col-rev,.cs-two-col-narrow,.dm-notes-grid,.dm-screen-grid,.icon-text-layout,.dark-hero-grid,.cs-var-layout-mb,
  .var-layout-wide,.cs-var-layout,.cs-doc-layout,.aside-grid,.aside-grid-mb,.card-grid-2,.narrow-content-grid,.browser-card-grid,.split-content-grid,
  .section-layout-grid,.outcomes-inner,.section-inner,.wizard-inner,.figure-grid-3,.stats-grid { grid-template-columns: 1fr; }

  /* 3-COL — 1fr */
  .info-card-grid,.tier-grid,.card-grid-3,.img-grid-3,.reqs-grid,.figure-grid,.img-grid-mosaic { grid-template-columns: 1fr; }
  .mosaic-tall,.mosaic-wide { grid-row: auto; grid-column: auto; height: auto; }

  /* 4/5-COL IMAGE GRIDS — 2 cols */
  .cost-card-grid,.img-grid-5,.img-grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* COMPARISON TABLE */
  .comparison-table { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }

  /* BEFORE/AFTER WIDGET */
  .compare-grid { grid-template-columns: 1fr; gap: 20px; }
  .arrow-col { display: none; }

  /* PHONE MOCKUP */
  .mobile-preview-grid { grid-template-columns: 1fr; gap: 28px; }
  .mobile-preview-grid > :first-child { max-width: 260px; margin: 0 auto; }

  /* FOOTER ROWS */
  .cs-dark-footer,.footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .section-header-bar { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* MISC */
  .hero-desc,.hero-subdesc,.cs-hero-desc,.hero-body,.hero-intro { max-width: 100%; }
  .color-ramp-grid { grid-template-columns: repeat(5, 1fr); }
  .stat-value { font-size: 40px; } .stat-headline { font-size: 32px; }
  .cs-figure { height: 180px; } .cs-img-sm { height: 140px; }
  .subsection-title { font-size: 28px; } .dark-hero-title { font-size: 28px; }

  /* Override DC runtime height:100% so position:sticky works on mobile */
  html, body { height: auto !important; }
  #dc-root, #dc-root > .sc-host { height: auto !important; }

  /* ---- MOBILE HEADER ---- */
  .rh-mobile-header {
    display: flex; align-items: center; gap: 12px;
    padding: 0 20px; height: 56px;
    background: #15130f;
    position: sticky; top: 0; z-index: 200;
  }
  .rh-hamburger {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: none; border: none;
    color: #f5efe2; cursor: pointer; padding: 0; flex-shrink: 0;
  }

  /* ---- HORIZONTAL TOC BAR ---- */
  .rh-toc-bar {
    display: flex; align-items: stretch;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #15130f;
    border-bottom: 1px solid rgba(245,239,226,.1);
    position: sticky; top: 56px; z-index: 150;
  }
  .rh-toc-bar::-webkit-scrollbar { display: none; }

  .hero-shadow { display: none; }

} /* end @media (max-width */

/* ---- LIGHTBOX (PhotoSwipe) ---- */
.pswp {
  --pswp-bg: #15130f;
  --pswp-icon-color: #f5efe2;
  --pswp-icon-color-secondary: rgba(245,239,226,.55);
  --pswp-icon-stroke-color: rgba(245,239,226,.55);
  --pswp-preloader-color: rgba(245,239,226,.35);
  --pswp-preloader-color-secondary: rgba(245,239,226,.9);
}
.pswp__button--arrow--prev,.pswp__button--arrow--next { background: rgba(21,19,15,.5); border-radius: 50%; }
.pswp__counter { font-family: 'Archivo', sans-serif; font-size: 12px; letter-spacing: .3px; }

/* Cursor affordance on anything the lightbox will open */
.cs-img,.full-img,.card-img,.card-img-sm,.img-cover,.img-tile img,.img-tile video { cursor: zoom-in; }