/* =============================================
   ISC Global Stylesheet
   =============================================
   Single file. CSS custom properties for tokens.
   No inline styles. No Tailwind. No SCSS.
   ============================================= */

/* ----- Fonts ----- */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("/fonts/roboto-flex/RobotoFlex-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url("/fonts/roboto-serif/RobotoSerif-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Serif";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url("/fonts/roboto-serif/RobotoSerif-Variable.woff2") format("woff2");
}

/* ----- Tokens ----- */
:root {
  --color-purple: #1a1423;
  --color-purple-2: #231b2f;
  --color-olive: #ccceb3;
  --color-olive-2: #dadbc9;
  --color-lavender: #f1eafa;
  --color-yellow: #d4ff29;
  --color-pink: #d2156e;
  --color-cyan: #2eb4c6;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-border: #d0d5dd;
  --color-muted: #666666;

  --font-sans: "Roboto Flex", sans-serif;
  --font-serif: "Roboto Serif", serif;

  --text-xs: 0.75rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;
  --text-4xl: 3.5rem;

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-section: 7.5rem;
  --space-hero: 13.75rem;

  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-2xl: 40px;
  --radius-3xl: 80px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  --shadow-yellow: 13px 13px 0 8px var(--color-yellow);
  --shadow-dark: 9px 9px 0 5px var(--color-purple-2);
  --shadow-nav: 0 2px 5px rgba(0, 0, 0, 0.25);

  --ease: cubic-bezier(0.1, 0.1, 0, 1);
  --speed-fast: 0.2s;
  --speed-medium: 0.3s;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-purple);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; transition: color var(--speed-fast) var(--ease); }

/* ----- Typography ----- */
p, li, address { font-family: var(--font-serif); line-height: 1.5; text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); text-wrap: balance; }
h1, h2 { font-weight: 1000; font-size: var(--text-4xl); line-height: 1.1; }
h3 { font-weight: 900; font-size: var(--text-2xl); line-height: 1.2; }
h4 { font-weight: 800; font-size: var(--text-xl); line-height: 1.2; }
h5 { font-weight: 800; font-size: var(--text-lg); line-height: 1.4; }

.heading-display {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 1000;
  line-height: 1.1;
  font-variation-settings: "wght" 1000, "XOPQ" 96, "XTRA" 468, "YOPQ" 79,
    "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712, "wdth" 100;
}
.heading-card { font-family: var(--font-sans); font-weight: 900; font-size: 2.5rem; line-height: 1.2; }
.heading-sub  { font-family: var(--font-sans); font-weight: 900; font-size: var(--text-2xl); line-height: 1.2; }
.eyebrow      { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 800; text-transform: uppercase; }
.text-intro   { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 400; line-height: 1.5; }
.link-more    { font-family: var(--font-sans); font-weight: 500; text-decoration: none; }
.link-more:hover, .link-more:focus-visible { text-decoration: underline; }

/* ----- Layout ----- */
.container { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem); }
.container-narrow { max-width: 800px; }
.container-md     { max-width: 1000px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-12); }
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; text-align: center; }
  .two-col .stack { align-items: center; }
  .two-col .center-content { order: -1; }
  .two-col .img-circle { max-width: 300px; }
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.center-content { display: flex; align-items: center; justify-content: center; }

/* ----- Sections ----- */
.bg-purple   { background-color: var(--color-purple);   color: var(--color-white); }
.bg-purple-2 { background-color: var(--color-purple-2); color: var(--color-white); }
.bg-olive    { background-color: var(--color-olive);    color: var(--color-purple); }
.bg-olive-2  { background-color: var(--color-olive-2);  color: var(--color-purple); }
.bg-white    { background-color: var(--color-white);    color: var(--color-purple); }

.section    { padding-block: var(--space-section); }
.section-lg { padding-block-start: var(--space-section); padding-block-end: var(--space-hero); }

/* ----- Hero ----- */
.hero-section { position: relative; padding-block-end: 140px; }
.accent-line        { height: 4px; border: none; border-radius: var(--radius-md); }
.accent-line-yellow { background-color: var(--color-yellow); }
.accent-line-pink   { background-color: var(--color-pink); }
.accent-line-wide   { width: 80%; }
.accent-line-full   { width: 100%; }
.chevron-divider { position: absolute; bottom: -1px; left: 0; width: 100%; height: 80px; display: block; pointer-events: none; }
.chevron-to-white path { fill: var(--color-white); }
.chevron-to-olive path { fill: var(--color-olive); }
.chevron-to-olive-2 path { fill: var(--color-olive-2); }
.chevron-to-purple path { fill: var(--color-purple); }

/* ----- Text colors ----- */
.text-olive  { color: var(--color-olive); }
.text-yellow { color: var(--color-yellow); }
.text-purple { color: var(--color-purple); }
.text-white  { color: var(--color-white); }
.display-block { display: block; }
.text-center   { text-align: center; }

/* ----- Images ----- */
.img-circle  { border-radius: var(--radius-circle); object-fit: cover; aspect-ratio: 1; }
.img-hero    { width: 100%; max-width: 460px; }
.img-two-col { width: 100%; max-width: 420px; }

/* ----- Cards ----- */
.card { background-color: var(--color-white); color: var(--color-purple); border-radius: var(--radius-2xl); padding: var(--space-12) var(--space-8); }
.card-lg { border-radius: var(--radius-3xl); padding: var(--space-12); }
.card-shadow-yellow { box-shadow: var(--shadow-yellow); }
.card-shadow-dark   { box-shadow: var(--shadow-dark); }
.card-footer { margin-block-start: auto; padding-block-start: var(--space-12); }

/* ----- Buttons ----- */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--speed-fast) var(--ease);
  margin-block-start: var(--space-8);
  border: 1px solid transparent;
}
.btn:hover, .btn:focus-visible { text-decoration: none; }
.btn-filled { background-color: var(--color-purple-2); color: var(--color-white); }
.btn-filled:hover, .btn-filled:focus-visible { background-color: var(--color-yellow); border-color: var(--color-purple-2); color: var(--color-purple); }
.btn-outline-yellow { background: transparent; color: var(--color-white); border-color: var(--color-yellow); }
.btn-outline-yellow:hover, .btn-outline-yellow:focus-visible { background-color: var(--color-white); color: var(--color-purple); }

/* ----- Audience Cards ----- */
.audience-header { max-width: 768px; margin-inline: auto; text-align: center; margin-block-end: var(--space-12); }
.audience-header p { margin-block-start: var(--space-8); }
.audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
@media (max-width: 768px) { .audience-grid { grid-template-columns: 1fr; } }

/* ----- Service Grid ----- */
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-block-start: var(--space-12); }
@media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }
.service-grid-item { border-inline-start: 4px solid var(--color-pink); padding-inline-start: var(--space-6); }
.service-grid-intro { margin-block-start: var(--space-8); }

/* ----- Dot Overlay ----- */
.dot-overlay { position: relative; overflow: hidden; }
.dot-overlay::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--color-yellow) 1.5px, transparent 1.5px); background-size: 28px 28px; opacity: 0.15; pointer-events: none; }
.dot-overlay .container { position: relative; z-index: 1; }

/* ----- CTA ----- */
.cta {
  background: linear-gradient(180deg, var(--color-purple-2) 0%, var(--color-purple) 40%, var(--color-pink) 100%);
  background-size: 100% 300%;
  animation: cta-breathe 12s ease-in-out infinite;
  color: var(--color-white);
  padding-block-start: var(--space-section);
  padding-block-end: var(--space-hero);
}
@keyframes cta-breathe { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } }
@media (prefers-reduced-motion: reduce) { .cta { animation: none; background-size: 100% 100%; } }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-12); }
@media (max-width: 768px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-heading { font-family: var(--font-sans); font-size: var(--text-4xl); font-weight: 1000; line-height: 1.1; }
.cta-body { font-family: var(--font-serif); font-size: var(--text-md); color: var(--color-lavender); }
.cta-btn {
  display: block; width: 100%; text-align: center;
  padding: var(--space-3) var(--space-6); margin-block-start: var(--space-8);
  border-radius: var(--radius-full); font-family: var(--font-serif); font-size: var(--text-base);
  background-color: var(--color-yellow); color: var(--color-purple);
  border: 2px solid var(--color-yellow); text-decoration: none;
  transition: all var(--speed-fast) var(--ease);
}
.cta-btn:hover, .cta-btn:focus-visible { background-color: var(--color-white); color: var(--color-purple); text-decoration: none; }
.cta-benefits { list-style: none; display: flex; flex-direction: column; gap: var(--space-8); padding-block-start: var(--space-12); }
.cta-benefit { display: flex; align-items: flex-start; gap: var(--space-4); }
.cta-check { flex-shrink: 0; filter: brightness(0) saturate(100%) invert(89%) sepia(45%) saturate(1000%) hue-rotate(20deg); }
.cta-benefit-text { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 800; color: var(--color-olive); text-transform: uppercase; line-height: 1.2; }

/* ----- Nav ----- */
.site-nav { background-color: var(--color-purple-2); box-shadow: var(--shadow-nav); padding-block: var(--space-2); }
.site-nav .container { display: flex; justify-content: space-between; align-items: center; }
.site-nav .logo { height: 40px; width: auto; }
.nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.nav-list a { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-white); text-decoration: none; }
.nav-list a:hover, .nav-list a:focus-visible, .nav-list a[aria-current="page"] { color: var(--color-yellow); }
.nav-list .lang-toggle:hover, .nav-list .lang-toggle:focus-visible { color: var(--color-purple); }
.nav-list a[aria-current="page"] { font-weight: 900; }
.nav-dropdown { position: relative; padding-bottom: var(--space-2); margin-bottom: calc(-1 * var(--space-2)); }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 0.35em; }
.nav-dropdown-arrow { transition: transform var(--speed-medium) var(--ease); }
.nav-dropdown-menu { display: none; visibility: hidden; opacity: 0; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 240px; background: var(--color-purple); border-radius: var(--radius-md); padding: var(--space-4) 0; padding-top: var(--space-6); margin-top: 0; list-style: none; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 200; }
.nav-dropdown-menu::before { content: ''; position: absolute; top: calc(-1 * var(--space-2)); left: 0; right: 0; height: var(--space-2); }
.nav-dropdown-menu li { padding: 0; }
.nav-dropdown-menu a { display: block; padding: var(--space-2) var(--space-6); font-size: var(--text-xs); font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-white); text-decoration: none; white-space: nowrap; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { color: var(--color-yellow); background: rgba(255,255,255,0.05); }
.nav-dropdown:hover > .nav-dropdown-menu { display: block; visibility: visible; opacity: 1; }
.nav-dropdown:hover > .nav-dropdown-toggle .nav-dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown.is-open > .nav-dropdown-menu { display: block; visibility: visible; opacity: 1; }
.nav-dropdown.is-open > .nav-dropdown-toggle .nav-dropdown-arrow { transform: rotate(180deg); }
.nav-list a.lang-toggle { border: 1px solid var(--color-white); border-radius: var(--radius-full); padding: 0.15em 0.6em; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; display: inline-block; line-height: 1.6; }
.nav-list a.lang-toggle:hover { background: var(--color-white); color: var(--color-purple); }
.nav-toggle { display: none; background: none; border: none; color: var(--color-white); cursor: pointer; padding: var(--space-2); }
@media (max-width: 768px) {
  .nav-list { display: none; }
  .nav-toggle { display: block; }
  .nav-list.is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-purple); padding: var(--space-6); gap: var(--space-4); z-index: 100; }
  .nav-dropdown-menu { display: none; visibility: hidden; opacity: 0; position: static; transform: none; min-width: auto; background: transparent; box-shadow: none; margin-top: 0; padding: var(--space-2) 0 0 var(--space-4); }
  .nav-dropdown:hover > .nav-dropdown-menu { display: none; visibility: hidden; opacity: 0; }
  .nav-dropdown-menu a { padding: var(--space-2) 0; }
  .nav-dropdown.is-open > .nav-dropdown-menu { display: block; visibility: visible; opacity: 1; }
  .site-nav .container { position: relative; }
}

/* ----- Footer ----- */
.site-footer { background-color: var(--color-purple); color: var(--color-white); padding-block-start: var(--space-section); flex-shrink: 0; }
.site-footer a { color: var(--color-white); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; text-decoration-color: var(--color-yellow); text-underline-offset: 4px; }
.footer-heading { font-family: var(--font-sans); font-weight: 800; font-size: var(--text-lg); line-height: 1.4; color: var(--color-white); }
.site-footer p, .site-footer li, .site-footer address { color: var(--color-white); }
.footer-inner { max-width: 1300px; margin-inline: auto; padding-inline: var(--space-12); }
.footer-grid { display: grid; grid-template-columns: 1.75fr 0.75fr 1fr 1fr; gap: 50px; padding-block-end: 50px; border-block-end: 1px solid var(--color-white); }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { font-family: var(--font-serif); font-size: 15px; }
.footer-contact { color: var(--color-lavender); text-decoration: underline; text-decoration-color: var(--color-lavender); text-underline-offset: 4px; }
.footer-contact:hover, .footer-contact:focus-visible { color: var(--color-lavender); text-decoration-color: var(--color-yellow); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-block: 30px; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom p { font-family: var(--font-serif); }

/* ----- Skip Link ----- */
.skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: 999; padding: var(--space-3) var(--space-6); background: var(--color-yellow); color: var(--color-purple); font-weight: 700; text-decoration: none; border-radius: var(--radius-md); }
.skip-link:focus { top: var(--space-4); }

/* ----- Quote Callout ----- */
.quote-callout { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 400; font-style: italic; line-height: 1.4; text-align: center; margin: 0; }

/* ----- Industry Tiles ----- */
.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-block-start: var(--space-8); }
@media (max-width: 768px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .industry-grid { grid-template-columns: 1fr; } }
.industry-tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; display: block; text-decoration: none; transition: transform var(--speed-medium) var(--ease); }
.industry-tile:hover, .industry-tile:focus-visible { transform: scale(1.03); text-decoration: none; }
.industry-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.industry-tile-label { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-3) var(--space-4); background: linear-gradient(to top, rgba(26, 20, 35, 0.85) 0%, transparent 100%); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; color: var(--color-white); text-transform: uppercase; letter-spacing: 0.05em; }

/* ----- Project Cards ----- */
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); margin-block-start: var(--space-12); }
@media (max-width: 768px) { .project-grid { grid-template-columns: 1fr; } }
.project-card { display: block; text-decoration: none; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); transition: transform var(--speed-medium) var(--ease); }
.project-card:hover, .project-card:focus-visible { transform: scale(1.02); text-decoration: none; }
.project-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.project-card-body { padding: var(--space-6); }
.project-card-category { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-pink); margin-bottom: var(--space-2); }
.project-card-title { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.project-card-link { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); display: inline-flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-4); }
.project-card-link svg { width: 16px; height: 16px; }

/* ----- Portfolio Filter ----- */
.portfolio-filters { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-8); }
.portfolio-filter { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 999px; border: 2px solid var(--color-purple); background: transparent; color: var(--color-purple); cursor: pointer; transition: background var(--speed-medium) var(--ease), color var(--speed-medium) var(--ease); }
.portfolio-filter:hover { background: var(--color-purple); color: var(--color-white); }
.portfolio-filter.is-active { background: var(--color-purple); color: var(--color-white); }

/* ----- Portfolio Cards ----- */
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); margin-block-start: var(--space-12); }
@media (max-width: 768px) { .portfolio-grid { grid-template-columns: 1fr; } }
.portfolio-card { display: block; text-decoration: none; color: var(--color-purple); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform var(--speed-medium) var(--ease), box-shadow var(--speed-medium) var(--ease); }
.portfolio-card:hover, .portfolio-card:focus-visible { transform: scale(1.02); box-shadow: 0 4px 16px rgba(0,0,0,0.12); text-decoration: none; }
.portfolio-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.portfolio-card-body { padding: var(--space-6); }
.portfolio-card-pills { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-block-end: var(--space-4); }
.pill { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 999px; display: inline-block; }
.pill-writing { background: var(--color-yellow); color: var(--color-purple); }
.pill-ux { background: var(--color-purple); color: var(--color-white); }
.portfolio-card-title { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.portfolio-card-desc { font-size: var(--text-sm); color: #666; margin: 0; }
.portfolio-card-link { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); display: inline-flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-4); }
.portfolio-card-link svg { width: 16px; height: 16px; }

/* ----- Portfolio Nav ----- */
.portfolio-nav { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--color-olive-2); border-bottom: 1px solid var(--color-olive-2); }
.portfolio-nav-link { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); transition: opacity var(--speed-medium) var(--ease); }
.portfolio-nav-link:hover { opacity: 0.7; }
.portfolio-nav-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.portfolio-nav-back { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); text-decoration: none; }
.portfolio-nav-back:hover { opacity: 0.7; }

/* ----- Blog ----- */
.blog-category-pills { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-end: var(--space-12); }
.blog-category-pill { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 999px; border: 2px solid var(--color-purple); background: transparent; color: var(--color-purple); text-decoration: none; transition: background var(--speed-medium) var(--ease), color var(--speed-medium) var(--ease); }
.blog-category-pill:hover { background: var(--color-purple); color: var(--color-white); text-decoration: none; }
.blog-category-pill.is-active { background: var(--color-purple); color: var(--color-white); }

.blog-section { margin-block-end: var(--space-section); }
.blog-section:last-of-type { margin-block-end: 0; }
.blog-section-header { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: var(--space-8); }
.blog-section-link { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); }

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
@media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card { display: block; text-decoration: none; color: var(--color-purple); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform var(--speed-medium) var(--ease), box-shadow var(--speed-medium) var(--ease); }
.blog-card:hover, .blog-card:focus-visible { transform: scale(1.02); box-shadow: 0 4px 16px rgba(0,0,0,0.12); text-decoration: none; }
.blog-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.blog-card-body { padding: var(--space-6); }
.blog-card-pill { margin-block-end: var(--space-3); }
.blog-card-title { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.blog-card-excerpt { font-size: var(--text-sm); color: #666; margin: 0 0 var(--space-4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-link { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); display: inline-flex; align-items: center; gap: var(--space-2); }
.blog-card-link svg { width: 16px; height: 16px; }

.blog-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-decoration: none; color: var(--color-purple); transition: transform var(--speed-medium) var(--ease), box-shadow var(--speed-medium) var(--ease); }
.blog-card-featured:hover, .blog-card-featured:focus-visible { transform: scale(1.01); box-shadow: 0 4px 16px rgba(0,0,0,0.12); text-decoration: none; }
.blog-card-featured .blog-card-img { aspect-ratio: auto; height: 100%; min-height: 300px; }
.blog-card-featured .blog-card-body { padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; }
.blog-card-featured .blog-card-title { font-size: var(--text-2xl); }
.blog-card-featured .blog-card-excerpt { -webkit-line-clamp: 5; }
@media (max-width: 768px) { .blog-card-featured { grid-template-columns: 1fr; } .blog-card-featured .blog-card-img { aspect-ratio: 16 / 9; height: auto; min-height: auto; } }

.blog-post-header { margin-block-end: var(--space-12); }
.blog-post-header h1 { font-size: var(--text-3xl); line-height: 1.15; margin-block-end: var(--space-8); }
@media (max-width: 768px) { .blog-post-header h1 { font-size: var(--text-2xl); } }
.blog-post-meta { font-family: var(--font-sans); font-size: var(--text-sm); color: #666; display: flex; align-items: center; gap: var(--space-4); }
.blog-post-meta img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.blog-post-featured-img { width: 100%; border-radius: var(--radius-lg); margin-block-end: var(--space-12); }
.blog-post-content { font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.75; }
.blog-post-content h2 { font-size: var(--text-2xl); margin-block-start: var(--space-12); margin-block-end: var(--space-6); }
.blog-post-content h3 { font-size: var(--text-xl); margin-block-start: var(--space-8); margin-block-end: var(--space-4); }
.blog-post-content p { margin-block-end: var(--space-6); }
.blog-post-content ul, .blog-post-content ol { margin-block-end: var(--space-6); padding-inline-start: var(--space-6); }
.blog-post-content li { margin-block-end: var(--space-3); }
.blog-post-content a { color: var(--color-purple); text-decoration: underline; text-underline-offset: 3px; }
.blog-post-content strong { font-weight: 700; }
.blog-post-content img { width: 100%; height: auto; border-radius: var(--radius-lg); margin-block: var(--space-8); }

.blog-author-bio { display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-8); background: var(--color-olive-2); border-radius: var(--radius-lg); margin-block-start: var(--space-12); }
.blog-author-bio img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blog-author-bio-text { flex: 1; }
.blog-author-bio-name { font-weight: 700; margin-block-end: var(--space-2); }
.blog-author-bio-role { font-size: var(--text-sm); color: #666; margin-block-end: var(--space-3); }
.blog-author-bio-desc { font-size: var(--text-sm); }
@media (max-width: 480px) { .blog-author-bio { flex-direction: column; align-items: center; text-align: center; } }

.blog-related { margin-block-start: var(--space-12); }
.blog-related h2 { margin-block-end: var(--space-8); }
.blog-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 768px) { .blog-related-grid { grid-template-columns: 1fr; } }

.blog-back-link { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); display: inline-flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-8); }
.blog-back-link svg { width: 16px; height: 16px; }

/* ----- FAQ List ----- */
.faq-list { margin-block-start: var(--space-12); display: flex; flex-direction: column; gap: var(--space-12); }
.faq-item { border-inline-start: 4px solid var(--color-pink); padding-inline-start: var(--space-6); }
.faq-item dt { margin-block-end: var(--space-4); }
.faq-item dd { margin: 0; }

/* ----- Benefits Banner C ----- */
.benefits-c-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; }
.benefits-c-section.benefits-c-no-image { grid-template-columns: 1fr; }
@media (max-width: 768px) { .benefits-c-section { grid-template-columns: 1fr; } }
.benefits-c-image { overflow: hidden; }
.benefits-c-img { width: 100%; height: 100%; object-fit: cover; }
.benefits-c-content { display: flex; align-items: center; padding: var(--space-12); }
.benefits-c-inner { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.benefits-c-items { display: flex; flex-direction: column; gap: var(--space-8); margin-block-start: var(--space-8); }
.benefits-c-item { display: flex; gap: var(--space-6); align-items: flex-start; }
.benefits-c-icon { flex-shrink: 0; margin-block-start: var(--space-2); }
.benefits-c-heading { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 800; color: var(--color-purple); margin: 0 0 var(--space-2); }
.benefits-c-aspects { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 768px) { .benefits-c-aspects { grid-template-columns: 1fr; } }
.benefits-c-aspect { background-color: var(--color-olive-2); border-radius: var(--radius-lg); padding: var(--space-6); }
.benefits-c-aspect h4 { margin: 0 0 var(--space-2); }
.benefits-c-aspect p { font-size: var(--text-xs); margin: 0; }

/* ----- Spaced Content ----- */
.space-content > * + * { margin-block-start: var(--space-6); }
.space-content > h2 + *, .space-content > h3 + * { margin-block-start: var(--space-4); }

/* ----- Contact Info ----- */
.contact-info { font-style: normal; display: flex; flex-direction: column; gap: var(--space-6); }

/* ----- Benefit List ----- */
.benefit-list { list-style: none; margin: 0; padding: var(--space-12) 0 0; display: flex; flex-direction: column; gap: var(--space-8); }
.benefit-item { display: flex; align-items: flex-start; gap: var(--space-3); }

/* ----- Work Page Sections ----- */
.section-work-hero { padding-block-start: var(--space-section); padding-block-end: var(--space-12); }
.section-work-body { padding-block-end: var(--space-12); }
.section-work-content { padding-block: var(--space-12); }

/* ----- Device Frames ----- */
.device-frame { position: relative; margin: 0 auto; }
.device-frame-laptop { max-width: 100%; padding-bottom: 63.67%; height: 0; }
.device-frame-phone { max-width: 280px; padding-bottom: min(201.8%, 565px); height: 0; width: 280px; }
.device-frame-bezel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; object-fit: contain; }
.device-frame-screen { position: absolute; z-index: 1; overflow: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.device-frame-screen::-webkit-scrollbar { display: none; }
.device-frame-screen:hover, .device-frame-screen:focus-within { overflow-y: auto; }
.device-frame-screen img { width: 100%; display: block; }
.device-frame-laptop .device-frame-screen { top: 3.8%; left: 7.8%; right: 7.8%; bottom: 8.5%; }
.device-frame-phone .device-frame-screen { top: 3.5%; left: 5.4%; right: 5.4%; bottom: 3.5%; border-radius: 24px; }

/* ----- Showcase Image ----- */
.showcase-image { width: 100%; height: auto; display: block; }
.device-frame, .showcase-image, .industry-grid, .project-grid { margin-block-start: var(--space-8); }

/* ----- Image Contain ----- */
.img-contain { max-width: 100%; height: auto; object-fit: contain; }
.img-contain-sm { max-width: 100%; max-height: 400px; object-fit: contain; }

/* ----- Password Gate ----- */
.password-gate { max-width: 400px; margin: 0 auto; text-align: center; }
.password-gate-input { font-family: var(--font-serif); font-size: var(--text-base); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); width: 100%; margin-block-end: var(--space-4); }

/* ----- Video Embed ----- */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-lg); margin-block-start: var(--space-8); }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ----- Logo Grid ----- */
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-block-start: var(--space-6); }
.logo-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .logo-grid, .logo-grid-3 { grid-template-columns: repeat(2, 1fr); } }
.logo-grid-item { height: 120px; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.logo-grid-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logo-section-label { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 900; text-align: center; margin-block-start: var(--space-12); margin-block-end: var(--space-2); padding-block-end: var(--space-4); border-block-end: 2px solid var(--color-purple); }

/* ----- Download List ----- */
.download-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.download-list a { font-family: var(--font-serif); text-decoration: underline; text-underline-offset: 4px; }
.download-list a:hover, .download-list a:focus-visible { color: var(--color-pink); }

/* ----- Infographic ----- */
.bg-lavender { background-color: var(--color-lavender); color: var(--color-purple); }
.infographic-header { text-align: center; max-width: 700px; margin-inline: auto; }
.infographic-header h2 { width: fit-content; margin-inline: auto; }
.infographic-header .accent-line { width: 100%; margin-inline: auto; }
.infographic-header p { margin-block-start: var(--space-4); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); margin-block-start: var(--space-12); text-align: center; }
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.stat-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.stat-circle { width: 180px; height: 180px; border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); outline: 4px solid rgba(255, 255, 255, 0.15); outline-offset: 10px; }
.stat-circle-yellow { background: var(--color-yellow); }
.stat-circle-pink { background: var(--color-pink); }
.stat-circle-cyan { background: var(--color-cyan); }
.stat-circle-olive { background: var(--color-olive); }
@media (max-width: 480px) { .stat-circle { width: 130px; height: 130px; } }
.stat-number { font-family: var(--font-sans); font-size: 3.5rem; font-weight: 1000; line-height: 1; color: var(--color-purple); }
.stat-circle-pink .stat-number { color: var(--color-white); }
@media (max-width: 480px) { .stat-number { font-size: 2.5rem; } }
.stat-label { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }

.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-block-start: var(--space-12); }
@media (max-width: 768px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .metrics-grid { grid-template-columns: 1fr; } }
.metric-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; border-top: 6px solid; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }
.metric-card-yellow { border-top-color: var(--color-yellow); }
.metric-card-pink { border-top-color: var(--color-pink); }
.metric-card-cyan { border-top-color: var(--color-cyan); }
.metric-number { font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: 1000; line-height: 1; }
.metric-arrow { display: inline-block; vertical-align: middle; margin-inline-start: var(--space-2); }
.metric-desc { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; margin-block-start: var(--space-3); }

.highlights-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-block-start: var(--space-12); }
@media (max-width: 640px) { .highlights-grid { grid-template-columns: 1fr; } }
.highlight-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: var(--color-white); border-radius: var(--radius-md); border-inline-start: 4px solid var(--color-pink); }
.highlight-text { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; }

/* ----- Bento Showcase ----- */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-block-start: var(--space-12); }
@media (max-width: 768px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bento-grid { grid-template-columns: 1fr; } }
.bento-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 260px; background: var(--color-purple-2); }
.bento-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bento-span-2 { grid-column: span 2; }
.bento-row-2 { grid-row: span 2; }
@media (max-width: 480px) { .bento-span-2 { grid-column: span 1; } .bento-row-2 { grid-row: span 1; } }
.bento-label { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-3) var(--space-4); background: linear-gradient(to top, rgba(26, 20, 35, 0.85) 0%, transparent 100%); z-index: 2; }
.bento-label span { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; color: var(--color-white); text-transform: uppercase; letter-spacing: 0.1em; }
.bento-grid-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 480px) { .bento-grid-2col { grid-template-columns: 1fr; } }
.bento-text { position: relative; min-height: 260px; border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: var(--space-8); text-align: center; }
.bento-text p { font-family: var(--font-serif); font-size: var(--text-xl); font-style: italic; line-height: 1.4; }


.showcase-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-8); }
.showcase-tag { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.35rem 0.85rem; border-radius: var(--radius-full); }
.showcase-tag-pink { border: 2px solid var(--color-pink); color: var(--color-pink); }
.showcase-tag-cyan { border: 2px solid var(--color-cyan); color: var(--color-cyan); }
.showcase-tag-purple { border: 2px solid var(--color-purple); color: var(--color-purple); }
.showcase-tag-white { border: 2px solid var(--color-white); color: var(--color-white); }

/* ----- Utilities ----- */
.flex-shrink-0 { flex-shrink: 0; }
.mt-8  { margin-block-start: var(--space-8); }
.mt-12 { margin-block-start: var(--space-12); }
.stack-lg { gap: var(--space-12); }
.btn-block { display: block; width: 100%; text-align: center; }
.text-muted { color: var(--color-muted); }
.text-pink { color: var(--color-pink); }
.accent-line-spaced { margin-block: var(--space-8); }

/* ----- Focus (Accessibility) ----- */
:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }