/* Marketing iteration: retain the Cristino / Bootstrap visual system.
   Load after any existing light/dark theme. No Sass build is required. */
[hidden] { display: none !important; }
.marketing-site {
    --marketing-surface: #fff; --marketing-ink: #161c2d; --accent: #e54b4b; --glass: rgba(255,255,255,.55);
    --font-primary: "Montserrat", sans-serif;
    --fs-section: clamp(24px, 2.4vw, 30px); /* section headings */
    --fs-card: 18px;      /* card headings */
    --fs-body: 15px;      /* body copy */
    --fs-meta: 13.5px;    /* secondary / metadata */
    --fs-label: 12px;     /* uppercase labels */
}
body.marketing-site, .marketing-site :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, li, a, button, input, textarea, label, legend, blockquote, figcaption, .btn, .nav-link) { font-family: var(--font-primary); }
body.marketing-site { font-size: var(--fs-body); line-height: 1.75; }
html { scroll-padding-top: 90px; }
section[id], article[id], [id="download"] { scroll-margin-top: 90px; }
body.marketing-site { overflow-x: hidden; }
.marketing-site a, .marketing-site .content-update { overflow-wrap: anywhere; }
.marketing-site :is(a, button, input, textarea, summary):focus-visible {
    outline: 3px solid var(--accent) !important;
    outline-offset: 4px;
    box-shadow: 0 0 0 2px var(--marketing-surface) !important;
}
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10000; padding: 12px 20px; background: var(--marketing-surface); color: var(--marketing-ink); }
.skip-link:focus { top: 12px; }
.section-intro { max-width: 720px; }
.navbar-toggler .mdi { font-size: 26px; line-height: 1; }
.navbar-custom .navbar-brand img { vertical-align: top; } /* 35px logo fills the brand line box exactly: no baseline gap, header height unchanged */

/* ---------- Glass language (original personal-hero-para treatment) ---------- */
.glass-card {
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 10px 25px rgba(60,72,88,.08);
}
.glass-dark {
    background: rgba(22,28,45,.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.15);
}

/* ---------- Hero: original red circle + 3D character + glass panel ---------- */
.marketing-hero {
    min-height: 680px;
    padding: 110px 0 60px;
}
.hero-figure {
    position: absolute; inset: 0; pointer-events: none;
    background: url('../images/home/02.png') center bottom / auto 88% no-repeat;
    transform: translate3d(0, var(--hero-figure-y, 0px), 0);
    will-change: transform;
}
.marketing-hero.personal-hero:before { transform: translate3d(0, var(--hero-circle-y, 0px), 0); will-change: transform; }
.marketing-hero .title { font-size: clamp(40px, 3.75vw, 54px) !important; line-height: 1.05; color: #161c2d; letter-spacing: 1px; text-transform: uppercase; }
.marketing-hero .hero-role { font-family: var(--font-primary); font-weight: 600; font-size: 17px; color: #161c2d; letter-spacing: .02em; }
.hero-glass {
    padding: 28px;
    background-color: rgba(255,255,255,.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 25px rgba(60,72,88,.12);
    color: #3c4858;
}
.hero-kicker { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8492a6; }
.hero-typed { color: var(--accent); min-height: 1.4em; font-weight: 600; }
.typewrite .wrap { border-right: .08em solid var(--accent); padding-right: 2px; }
.hero-enter { animation: heroIn .9s ease .25s both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.marketing-hero .btn-outline-primary { background: #fff; }
.marketing-hero .btn-outline-primary:hover { background: var(--accent); }
/* About stats bar: one glass bar, same family as .hero-glass / .glass-card. */
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 56px 0 0; padding: 28px 8px; border-color: rgba(60,72,88,.08); }
.about-stats li { padding: 4px 24px; text-align: center; }
.about-stats li + li { border-left: 1px solid rgba(60,72,88,.12); }
.about-stats strong { display: block; font-family: var(--font-primary); font-size: clamp(30px, 3vw, 40px); font-weight: 700; line-height: 1.1; color: var(--accent); }
.about-stats span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: #8492a6; }
@media (max-width: 991.98px) {
    .about-stats { margin-top: 40px; padding: 22px 4px; }
    .about-stats li { padding: 4px 14px; }
    .about-stats span { font-size: 12.5px; }
}
@media (max-width: 575.98px) {
    .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 4px; }
    .about-stats li { padding: 16px 10px; }
    .about-stats li + li { border-left: 0; }
    .about-stats li:nth-child(even) { border-left: 1px solid rgba(60,72,88,.12); }
    .about-stats li:nth-child(n+3) { border-top: 1px solid rgba(60,72,88,.12); }
}
@media (min-width: 992px) {
    /* Shift character and red circle right so the name, role and CTAs sit clear of them. */
    .marketing-hero .hero-figure { background-position: calc(50% + 75px) bottom; }
    .marketing-hero.personal-hero:before { right: -150px; }
}
@media (max-width: 991.98px) {
    .marketing-hero .hero-figure { background-size: auto 60%; }
}
@media (max-width: 767.98px) {
    /* Content first, character on the red circle below. */
    .marketing-hero { min-height: 0; height: auto; padding: 100px 0 78vw; }
    .marketing-hero .hero-figure { background-size: 150% auto; background-position: center bottom; }
    .marketing-hero .title { color: #161c2d; }
    .hero-glass { padding: 20px; }
    .marketing-hero .hero-role { font-size: 15px; }
}

/* ---------- About ---------- */
.about-hero { padding: 0 !important; }
.about-hero:before { display: none; }
.about-hero img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; padding: 0; border: 8px solid #e9ecef; box-shadow: 0 10px 25px rgba(60,72,88,.1); }
.about-lead { font-weight: 600; color: #161c2d; }

/* ---------- Expertise: editorial numbered overview ---------- */
.expertise-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 72px; }
@media (min-width: 768px) { .expertise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.expertise-item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 20px; padding: 30px 0 32px; border-bottom: 1px solid #dee2e6; }
.expertise-item:first-child { border-top: 1px solid #dee2e6; }
@media (min-width: 768px) { .expertise-item:nth-child(2) { border-top: 1px solid #dee2e6; } }
.expertise-item::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--accent); transition: width .5s ease; }
.expertise-item:first-child::before, .expertise-item:hover::before { width: 64px; }
.expertise-num { font-family: var(--font-primary); font-size: 34px; font-weight: 700; line-height: 1; color: #ced4da; letter-spacing: -.02em; transition: color .3s ease; }
.expertise-item:hover .expertise-num { color: var(--accent); }
.expertise-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-primary); font-size: var(--fs-card) !important; font-weight: 700; line-height: 1.35; color: #161c2d; margin: 4px 0 10px; }
.expertise-title .mdi { font-size: 22px; line-height: 1; color: var(--accent); }
.expertise-body p { font-size: var(--fs-body); color: #8492a6; max-width: 46ch; }
@media (max-width: 575.98px) {
    .expertise-item { grid-template-columns: 46px minmax(0, 1fr); gap: 0 12px; padding: 24px 0; }
    .expertise-num { font-size: 26px; }
}

/* ---------- Parallax sections (original Jarallax backgrounds) ---------- */
.parallax-bg { position: relative; background-size: cover; background-position: center; overflow: hidden; }
.parallax-bg > .bg-overlay { z-index: 0; }
.parallax-bg > .container { z-index: 1; }
.testimonial-section > .bg-overlay-white { opacity: .55; }

/* ---------- Marketing capabilities: one connected matrix, hairline divisions ---------- */
.capability-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: #e9ecef; border: 1px solid #e9ecef; border-radius: 7px; overflow: hidden; box-shadow: 0 10px 25px rgba(60,72,88,.06); }
@media (min-width: 768px) { .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .capability-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.capability-grid > li { display: flex; }
.capability-pillar { position: relative; display: flex; flex-direction: column; width: 100%; padding: 30px 28px 28px; background: #fff; transition: background-color .3s ease; }
.capability-pillar::before { content: ""; position: absolute; left: 28px; top: 0; height: 2px; width: 28px; background: var(--accent); transition: width .5s ease; }
.capability-pillar:hover { background: #fdfafa; }
.capability-pillar:hover::before { width: calc(100% - 56px); }
.capability-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.capability-step { order: -1; font-family: var(--font-primary); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #dee2e6; transition: color .3s ease; }
.capability-pillar:hover .capability-step { color: var(--accent); }
.capability-icon { font-size: 24px; line-height: 1; color: var(--accent); }
.capability-name { font-family: var(--font-primary); font-size: var(--fs-card) !important; font-weight: 700; line-height: 1.35; color: #161c2d; margin: 0 0 16px; min-height: 2.7em; }
.capability-sub { font-family: var(--font-primary); font-size: var(--fs-label) !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8492a6; margin: 4px 0 6px; }
.capability-terms { list-style: none; padding: 0; margin: 0 0 14px; font-size: 14px; line-height: 1.75; color: #3c4858; }
.capability-terms li { display: inline; }
.capability-terms li:not(:last-child)::after { content: "\00a0·"; color: #adb5bd; }
.capability-sub + .capability-terms:last-child { margin-bottom: 0; }
.capability-pillar .capability-sub:nth-of-type(2) { margin-top: auto; padding-top: 14px; border-top: 1px solid #e9ecef; color: var(--accent); }
.capability-pillar .capability-sub:nth-of-type(2) + .capability-terms { color: #161c2d; font-weight: 500; }
@media (max-width: 767.98px) {
    .capability-pillar { padding: 26px 22px 24px; }
    .capability-pillar::before { left: 22px; }
    .capability-name { min-height: 0; }
}

/* ---------- Shared accordion parts (Professional Experience and Selected Work) ---------- */
.career-icon { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--accent); transition: all .3s ease; }
.career-icon::before, .career-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--accent); transition: transform .3s ease, background .3s ease; }
.career-icon::after { transform: rotate(90deg); }
.career-panel { display: grid; grid-template-rows: 1fr; }
.career-panel-inner { min-height: 0; overflow: hidden; padding: 0 24px 24px; }
.js .career-panel { transition: grid-template-rows .4s ease, visibility 0s linear 0s; }
.js .case-card:not(.is-open) .career-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s ease, visibility 0s linear .4s; }
.js .case-card:not(.is-open) .career-panel-inner { padding-bottom: 0; }
.career-metrics { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; border-top: 1px solid #e9ecef; margin: 0 0 8px; }
.career-metrics li { flex: 1 1 140px; padding: 4px 16px; border-left: 2px solid var(--accent); margin-top: 12px; }
.career-metrics strong { display: block; font-family: var(--font-primary); font-size: 26px; font-weight: 700; color: #161c2d; line-height: 1.1; }
.career-metrics span { display: block; font-size: 12.5px; color: #8492a6; margin-top: 4px; }
.career-label { font-size: var(--fs-label) !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 20px 0 8px; }
.career-panel-inner > .career-label:first-child { padding-top: 16px; border-top: 1px solid #e9ecef; }
.career-panel-inner p { font-size: 15px; color: #3c4858; }
.career-impact { padding-left: 18px; margin-bottom: 0; }
.career-impact li { font-size: 15px; color: #3c4858; margin-bottom: 6px; }
.career-impact li::marker { color: var(--accent); }
.career-stack { font-size: var(--fs-meta) !important; color: #8492a6 !important; }

/* ---------- Professional Experience: Selected Work row pattern, dates in place of case numbers ---------- */
.exp-date { grid-area: num; font-size: var(--fs-meta); font-weight: 600; letter-spacing: .02em; color: #8492a6; transition: color .2s ease; }
.exp-card:hover .exp-date, .exp-card.is-open .exp-date { color: var(--accent); }
.exp-list .case-head { padding: 30px 0 34px; }
.exp-org { margin: 0 0 10px !important; font-size: 14px; font-weight: 500; color: #3c4858; }
.exp-type { margin-left: 6px; padding-left: 10px; border-left: 1px solid #ced4da; font-size: var(--fs-meta); font-weight: 400; color: #8492a6; }
.exp-summary { margin: 0; font-size: 15px; line-height: 1.65; color: #8492a6; max-width: 52ch; }
.case-metrics.exp-impact::before { content: "Key impact"; }
.case-metrics.exp-scope::before { content: "Scope"; }

/* ---------- Recognition ---------- */
.recognition-section { position: relative; overflow: hidden; isolation: isolate; }
.recognition-section::before {
    content: ""; position: absolute; inset: -40px; z-index: -2;
    background-image: url('../images/bg-counter.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;
    filter: blur(8px) saturate(.9);
}
.recognition-section > .bg-overlay { z-index: -1; background-color: rgba(22,28,45,.72); }
.recognition-section > .container { z-index: 1; }
.award-card { transition: all .3s ease; color: rgba(255,255,255,.7); }
.award-card .mdi { display: inline-block; font-size: 40px; line-height: 1; color: #fff; width: 76px; height: 76px; line-height: 76px; border-radius: 50%; background: var(--accent); box-shadow: 0 8px 20px rgba(229,75,75,.4); transition: transform .4s ease; }
.award-card:hover { transform: translateY(-6px); background: rgba(22,28,45,.5); }
.award-card:hover .mdi { transform: rotate(-8deg) scale(1.06); }

/* ---------- Education & Certifications: credential ledger ---------- */
.cred-heading { display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid #161c2d; font-family: var(--font-primary); font-size: var(--fs-label) !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #161c2d; }
.cred-heading .mdi { font-size: 20px; line-height: 1; color: var(--accent); }
.cred-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 28px; padding: 22px 0; border-bottom: 1px solid #e9ecef; }
.cred-list-compact .cred-row { grid-template-columns: 110px minmax(0, 1fr); padding: 18px 0; }
.cred-meta { padding-top: 2px; font-size: var(--fs-meta); font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.cred-title { margin: 0; font-family: var(--font-primary); font-size: 16px !important; font-weight: 600; line-height: 1.45; color: #161c2d; transition: color .2s ease; }
.cred-sub { margin-top: 4px; font-size: var(--fs-meta); color: #8492a6; }
.cred-row:hover .cred-title { color: var(--accent); }
@media (max-width: 575.98px) {
    .cred-row, .cred-list-compact .cred-row { grid-template-columns: minmax(0, 1fr); padding: 18px 0; }
    .cred-meta { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; }
}

/* ---------- Case studies ---------- */
.case-logo { display: block; width: 100%; height: 160px; object-fit: contain; background: #fff; transition: transform .5s ease; }
.portfolio-box:hover .case-logo { transform: rotate(2deg) scale(1.08); }
.case-framework li { font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 6px 14px; border-radius: 30px; background: #fff; border: 1px solid #dee2e6; }
.case-framework li:not(:last-child)::after { content: "→"; margin-left: 12px; color: var(--accent); }
.case-status { display: inline-block; font-size: 12px; font-weight: 600; color: #8492a6; letter-spacing: .04em; text-transform: uppercase; }
.case-study summary { padding: 12px 0; font-weight: 600; cursor: pointer; }
.case-fields dt { margin-top: 18px; }
.case-fields dd { margin: 6px 0 0; }

/* Row pattern used by Professional Experience (case-*), plus the shared image slots used by Selected Work. */
.case-list { display: grid; border-bottom: 1px solid #dee2e6; }
.case-card { position: relative; border-top: 1px solid #dee2e6; }
.case-group-head { padding: 64px 0 22px; }
.case-group-title { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; font-family: var(--font-primary); font-size: var(--fs-label) !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #161c2d; }
.case-group-title::before { content: ""; width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); }
.case-group-head p { font-size: var(--fs-meta); color: #8492a6; }
.case-card::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 48px; background: var(--accent); transition: width .5s ease; }
.case-card:hover::before, .case-card.is-open::before { width: 100%; }
.case-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 44px; grid-template-areas: "num num toggle" "summary metrics toggle"; gap: 14px 56px; align-items: start; padding: 36px 0 40px; cursor: pointer; }
.case-summary { grid-area: summary; }
.case-summary > p { margin: 0; }
.marketing-site .case-title { font-size: 22px !important; font-weight: 700; line-height: 1.3; margin-bottom: 8px; transition: color .2s ease; }
.case-card:hover .case-title { color: var(--accent); }
.case-metrics { grid-area: metrics; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.case-metrics::before { content: "Key results"; display: block; padding-bottom: 10px; border-bottom: 1px solid #ced4da; font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.case-metrics li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: baseline; margin: 0 !important; padding: 14px 0; border: 0; border-bottom: 1px solid #e9ecef; background: none; }
.case-metrics strong { font-size: 24px !important; }
.case-metrics .case-outcome { font-size: 16px !important; line-height: 1.3; }
.case-metrics span { margin-top: 0; font-size: var(--fs-meta); }
.case-toggle { all: unset; grid-area: toggle; box-sizing: border-box; align-self: center; cursor: pointer; border-radius: 50%; }
.case-toggle .career-icon { display: block; width: 40px; height: 40px; }
.case-toggle[aria-expanded="true"] .career-icon { background: var(--accent); }
.case-toggle[aria-expanded="true"] .career-icon::before { background: #fff; }
.case-toggle[aria-expanded="true"] .career-icon::after { transform: rotate(0); background: #fff; }
.case-card .career-panel-inner { padding: 0 100px 40px 0; }
.case-study-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 24px; border-top: 1px solid #e9ecef; }
.case-study-media + .career-label { margin-top: 22px; }
.case-study-image-slot {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    aspect-ratio: 4 / 3; border-radius: 7px; overflow: hidden; text-align: center;
    background: #fff; border: 1px solid #e9ecef;
    opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease;
}
.case-study-image-slot::before { content: "\F0976"; font-family: "Material Design Icons"; font-size: 28px; line-height: 1; color: rgba(229,75,75,.45); } /* mdi-image-outline */
.case-study-image-slot:has(img) { aspect-ratio: auto; }
.case-study-image-slot img { display: block; width: 100%; height: auto; object-fit: contain; }
.js .work-row:not(.has-opened) .case-study-image-slot img { display: none; } /* defers loading="lazy" screenshots until first open */
.case-study-image-slot:has(img)::before, .case-study-image-slot:has(img) span { display: none; }
.work-row.is-open .case-study-image-slot { opacity: 1; transform: none; }
.work-row.is-open .case-study-image-slot[data-slot="1"] { transition-delay: .1s; }
.work-row.is-open .case-study-image-slot[data-slot="2"] { transition-delay: .16s; }
.work-row.is-open .case-study-image-slot[data-slot="3"] { transition-delay: .22s; }
.js .case-card .career-panel-inner { opacity: 1; transition: opacity .35s ease .1s; }
.js .case-card:not(.is-open) .career-panel-inner { opacity: 0; transition: opacity .2s ease; }
@media (max-width: 991.98px) {
    .case-head { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "num toggle" "summary summary" "metrics metrics"; gap: 18px 16px; }
    .case-toggle { align-self: start; }
    .case-card .career-panel-inner { padding-right: 0; }
}
@media (max-width: 575.98px) {
    .case-head { padding: 28px 0 30px; }
    .marketing-site .case-title { font-size: 19px !important; }
    .case-metrics li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
    .case-metrics strong { font-size: 20px !important; }
}

/* ---------- Selected Work: index | project | key results | action ---------- */
.work-list { border-bottom: 1px solid #dee2e6; }
.work-row { position: relative; border-top: 1px solid #dee2e6; }
.work-row::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--accent); transition: width .5s ease; }
.work-list > .work-row:first-child::before, .work-row:hover::before, .work-row.is-open::before { width: 100%; }
.work-head { display: grid; grid-template-columns: 160px minmax(0, 1fr) 270px 64px; grid-template-areas: "index summary results action"; column-gap: 36px; align-items: start; padding: 40px 0 44px; cursor: pointer; }
.work-index { grid-area: index; display: flex; flex-direction: column; gap: 6px; }
.work-kicker { white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.work-num { font-family: var(--font-primary); font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: #ced4da; transition: color .3s ease; }
.work-list > .work-row:first-child .work-num, .work-row:hover .work-num, .work-row.is-open .work-num { color: var(--accent); }
.work-summary { grid-area: summary; }
.work-meta { margin: 0 0 8px; font-size: var(--fs-meta); color: #8492a6; }
.marketing-site .work-title { margin: 0 0 10px; font-family: var(--font-primary); font-size: 19px !important; font-weight: 700; line-height: 1.35; color: #161c2d; transition: color .2s ease; }
.work-list > .work-row:first-child .work-title, .work-row:hover .work-title, .work-row.is-open .work-title { color: var(--accent); }
.work-desc { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: #3c4858; }
.work-facts { margin: 0; display: grid; gap: 6px; }
.work-facts > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 8px; font-size: 15px; line-height: 1.65; }
.work-facts dt { font-weight: 600; color: #3c4858; }
.work-facts dd { margin: 0; color: #8492a6; }
.work-results { grid-area: results; align-self: stretch; margin-left: -12px; padding-left: 24px; border-left: 1px solid #dee2e6; }
.work-results-label { margin: 6px 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.work-result-list { margin: 0; display: grid; gap: 16px; }
.work-figure { display: block; font-family: var(--font-primary); font-size: 24px; font-weight: 700; line-height: 1.15; color: #161c2d; }
.work-figure-text { font-size: 18px; line-height: 1.3; }
.work-result-list span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: #8492a6; }
.work-action { grid-area: action; align-self: center; justify-self: end; }
.work-toggle { all: unset; box-sizing: border-box; display: block; cursor: pointer; border-radius: 50%; }
.work-toggle .career-icon { display: block; width: 48px; height: 48px; }
.work-toggle:hover .career-icon { box-shadow: 0 0 0 5px rgba(229,75,75,.12); }
.work-toggle[aria-expanded="true"] .career-icon { background: var(--accent); }
.work-toggle[aria-expanded="true"] .career-icon::before { background: #fff; }
.work-toggle[aria-expanded="true"] .career-icon::after { transform: rotate(0); background: #fff; }
.work-row .career-panel-inner { padding: 0 100px 48px 196px; }
.js .work-row:not(.is-open) .career-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s ease, visibility 0s linear .4s; }
.js .work-row:not(.is-open) .career-panel-inner { padding-bottom: 0; opacity: 0; transition: opacity .2s ease; }
.js .work-row.is-open .career-panel-inner { opacity: 1; transition: opacity .35s ease .1s; }
.work-group-head { padding: 72px 0 24px; }
@media (max-width: 1199.98px) {
    .work-head { grid-template-columns: 150px minmax(0, 1fr) 240px 56px; column-gap: 28px; }
    .work-results { margin-left: -8px; padding-left: 20px; }
    .work-num { font-size: 46px; }
    .work-row .career-panel-inner { padding: 0 84px 44px 178px; }
}
@media (max-width: 991.98px) {
    .work-head { grid-template-columns: 150px minmax(0, 1fr) 52px; grid-template-areas: "index summary action" "index results action"; row-gap: 24px; column-gap: 24px; }
    .work-results { margin-left: 0; padding: 20px 0 0; border-left: 0; border-top: 1px solid #dee2e6; }
    .work-result-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .work-action { align-self: start; }
    .work-row .career-panel-inner { padding: 0 0 40px 174px; }
}
@media (max-width: 767.98px) {
    .work-head { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "index action" "summary summary" "results results"; row-gap: 20px; column-gap: 16px; padding: 32px 0 34px; }
    .work-index { flex-direction: row; align-items: baseline; gap: 14px; }
    .work-num { font-size: 40px; }
    .work-action { align-self: center; }
    .work-toggle .career-icon { width: 44px; height: 44px; }
    .marketing-site .work-title { font-size: 18px !important; }
    .work-result-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .work-figure { font-size: 22px; }
    .work-figure-text { font-size: 17px; }
    .work-row .career-panel-inner { padding: 0 0 32px; }
    .case-study-media { grid-template-columns: repeat(3, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .case-study-image-slot { scroll-snap-align: start; }
}

/* ---------- Publications: editorial reading index ---------- */
.publication-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 72px; counter-reset: none; }
@media (min-width: 992px) { .publication-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; } }
.publication-list li { border-bottom: 1px solid #dee2e6; }
.publication-list li:first-child { border-top: 1px solid #dee2e6; }
@media (min-width: 992px) { .publication-list li:nth-child(6) { border-top: 1px solid #dee2e6; } }
.publication-link { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 22px 0 20px; color: #161c2d; text-decoration: none; overflow-wrap: normal !important; }
.publication-link::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--accent); transition: width .5s ease; }
.publication-num { grid-row: 1 / span 2; padding-top: 2px; font-size: var(--fs-meta); font-weight: 700; letter-spacing: .06em; color: #adb5bd; transition: color .3s ease; }
.publication-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.45; color: #161c2d; transition: color .3s ease, transform .3s ease; }
.publication-cta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8492a6; transition: color .3s ease; }
.publication-cta .mdi { font-size: 15px; line-height: 1; transition: transform .3s ease; }
.publication-link:hover .publication-num, .publication-link:focus-visible .publication-num,
.publication-link:hover .publication-cta, .publication-link:focus-visible .publication-cta { color: var(--accent); }
.publication-link:hover .publication-title, .publication-link:focus-visible .publication-title { transform: translateX(3px); }
.publication-link:hover .publication-cta .mdi, .publication-link:focus-visible .publication-cta .mdi { transform: translate(2px, -2px); }
.publication-link:hover::after, .publication-link:focus-visible::after { width: 100%; }
@media (max-width: 575.98px) {
    .publication-link { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; padding: 18px 0; }
    .publication-title { font-size: 16px; }
}

/* ---------- Book ---------- */
.book-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.book-visual .book-cover { width: 100%; max-width: 300px; height: auto; object-fit: contain; }
.book-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8492a6; }
.marketing-site #book .section-title .book-title { font-size: clamp(30px, 3.5vw, 40px) !important; color: #161c2d; }
.book-byline { font-size: 17px; color: #3c4858; }
.book-byline::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 12px; vertical-align: middle; background: var(--accent); }
.book-lead { font-size: 17px; color: #161c2d; }
.book-publisher { font-weight: 600; letter-spacing: .04em; color: #8492a6; }

/* ---------- Testimonials ---------- */
.marketing-site .client-review blockquote { font-size: 15px; }
.reviewer-initials { display: inline-flex; flex: 0 0 64px; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--accent); background: rgba(229,75,75,.08); border: 1px solid rgba(229,75,75,.25); }
.marketing-site .tns-nav button { min-width: 24px; min-height: 24px; }

/* ---------- Contact ---------- */
.contact-cta { max-width: 640px; border-color: #e9ecef; }
.contact-cta-icon { display: inline-block; width: 64px; height: 64px; line-height: 64px; font-size: 30px; border-radius: 50%; color: #fff; background: var(--accent); box-shadow: 0 8px 20px rgba(229,75,75,.35); }
.contact-cta-email a { color: #161c2d; }
.contact-cta-email a:hover { color: var(--accent); }
.contact-list li { margin-bottom: 14px; font-size: 15px; }
.contact-list a { color: #161c2d; }
.contact-list a:hover { color: var(--accent); }
.contact-list .mdi { font-size: 20px; margin-right: 8px; vertical-align: -2px; }

/* ---------- Section reveal (only when JS is running; content never blocked) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Shared / portfolio page ---------- */
.marketing-banner { background: linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)), url('../images/home/bg-pages.jpg') center / cover; color: #161c2d; }
.marketing-banner h1 { font-size: clamp(30px, 4vw, 42px); color: inherit; }
.content-update { display: inline-block; font-size: 13px; line-height: 1.65; padding: 8px 10px; border-left: 2px solid var(--accent); background: rgba(229,75,75,.06); }
.marketing-site .form-control { color: var(--marketing-ink); background: var(--marketing-surface); }
.marketing-site .back-to-top { display: none; }
.marketing-site .back-to-top.is-visible { display: block; }
.marketing-site .btn-sm { font-size: 13px; }
#case-filters [aria-pressed="true"] { background: var(--accent); color: #fff !important; }
#case-filters .btn { border: 1px solid var(--accent); }
#form-status { font-weight: 500; }
#form-status[data-state="error"] { border-left: 3px solid #d6374a; padding-left: 12px; }
#form-status[data-state="success"] { border-left: 3px solid #25b865; padding-left: 12px; }
@media (max-width: 767px) {
    .marketing-banner { padding: 120px 0 60px; }
}
/* Theme files remain usable when selected by the site owner. */
html:has(#theme-opt[href*="style-dark"]) .marketing-site { --marketing-surface: #1f2d3d; --marketing-ink: #f9fafd; }

/* Keep the original visual type scale while using semantic H2/H3 headings. */
.marketing-site .h5 { font-size: var(--fs-card) !important; }
.marketing-site .h4 { font-size: 22px !important; }
.marketing-site .section-title .title { font-size: var(--fs-section) !important; }
.marketing-site .h3 { font-size: 30px !important; }
.marketing-site .marketing-banner h1 { font-size: clamp(30px, 4vw, 42px) !important; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .marketing-site *, .marketing-site *::before, .marketing-site *::after {
        animation: none !important; transition: none !important; scroll-behavior: auto !important;
    }
    .js .reveal { opacity: 1; transform: none; }
    .marketing-site :is(.portfolio-box, .event, .award-card):hover { transform: none; }
    .publication-title { transform: none !important; }
    .case-study-image-slot { opacity: 1 !important; transform: none !important; }
    .hero-figure, .marketing-hero.personal-hero:before { transform: none !important; }
}