/* ============================================================
   RAWSON ELLIS — DESIGN SYSTEM + SITE STYLES
   Tokens sourced from the official Rawson Ellis design system.
   ============================================================ */

/* ── POPPINS (local, WOFF2 only — 3 weights cover all brand usage) ── */
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Regular.woff2') format('woff2');  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Bold.woff2') format('woff2');     font-weight:700; font-style:normal; font-display:swap; }

/* ── DESIGN TOKENS ── */
:root {
  /* Brand blues */
  --re-blue:       #004AAD;
  --re-blue-deep:  #00357C;
  --re-blue-night: #001E4A;
  --re-blue-mid:   #1E6FD9;
  --re-blue-sky:   #E6F0FB;
  --re-blue-mist:  #F4F8FD;
  /* Accents (sparingly) */
  --re-sand:  #E9E2D4;
  --re-clay:  #C76B3A;
  --re-moss:  #4C6B3E;
  --re-ink:   #14181F;
  /* Neutrals */
  --re-white:    #FFFFFF;
  --re-gray-50:  #F7F8FA;
  --re-gray-100: #EEF1F5;
  --re-gray-200: #DFE4EC;
  --re-gray-300: #C6CEDB;
  --re-gray-400: #9AA4B5;
  --re-gray-500: #6C7689;
  --re-gray-600: #4B5464;
  --re-gray-700: #323A48;
  --re-gray-800: #1E242F;
  --re-gray-900: #0E131C;
  /* Semantic */
  --bg-1:       var(--re-white);
  --bg-2:       var(--re-blue-mist);
  --bg-3:       var(--re-blue-sky);
  --bg-inverse: var(--re-blue-night);
  --fg-1:       var(--re-ink);
  --fg-2:       var(--re-gray-600);
  --fg-3:       var(--re-gray-500);
  --fg-brand:   var(--re-blue);
  --fg-link:    var(--re-blue-mid);
  --border-1:   var(--re-gray-200);
  --border-2:   var(--re-gray-300);
  /* Type */
  --font-sans:    'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-display:   clamp(44px, 6.2vw, 88px);
  --fs-h1:        clamp(36px, 4.4vw, 60px);
  --fs-h2:        clamp(28px, 3.0vw, 42px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-loose:     1.7;
  --tracking-tight: -0.02em;
  --tracking-caps:   0.14em;
  --fw-light:    400; /* brand uses 3 weights only — light maps to regular */
  --fw-regular:  400;
  --fw-medium:   600; /* brand: SemiBold for UI */
  --fw-semibold: 600;
  --fw-bold:     700;
  /* Spacing (4pt) */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  24px; --sp-6:  32px; --sp-7:  48px; --sp-8:  64px;
  --sp-9:  96px; --sp-10: 128px;
  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  /* Shadows (blue-tinted) */
  --shadow-xs: 0 1px 1px rgba(0,30,74,0.04);
  --shadow-sm: 0 1px 2px rgba(0,30,74,0.06), 0 1px 3px rgba(0,30,74,0.04);
  --shadow-md: 0 4px 12px rgba(0,30,74,0.08), 0 1px 3px rgba(0,30,74,0.04);
  --shadow-lg: 0 12px 32px rgba(0,30,74,0.10), 0 2px 6px rgba(0,30,74,0.06);
  --shadow-brand: 0 12px 32px rgba(0,74,173,0.22);
  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 0.84, 0.32, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  380ms;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--re-blue-deep); }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 { font-family: var(--font-sans); line-height: var(--lh-snug); font-weight: var(--fw-bold); color: var(--fg-1); letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
p  { color: var(--fg-2); line-height: var(--lh-loose); }

.re-eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-brand);
  display: block;
  margin-bottom: var(--sp-3);
}
.re-eyebrow--light { color: #9fc0ef; }

/* ── LAYOUT ── */
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
section { padding: var(--sp-9) 0; }

/* ── BUTTONS ── */
.re-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-medium);
  padding: 13px 22px; border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; letter-spacing: -0.005em;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.re-btn--primary { background: var(--re-blue); color: #fff; }
.re-btn--primary:hover { background: var(--re-blue-deep); color: #fff; }
.re-btn--secondary { background: #fff; color: var(--re-blue); border-color: var(--re-blue); }
.re-btn--secondary:hover { background: var(--re-blue-sky); color: var(--re-blue); }
.re-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.re-btn--ghost-light:hover { background: rgba(255,255,255,0.08); color: #fff; }
.re-arrow { font-size: 1.1em; }

/* ── HEADER ── */
.re-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              backdrop-filter var(--dur-base) var(--ease-standard);
  --hfg:    #ffffff;
  --hfg-m:  rgba(255,255,255,0.75);
  --hbtn-bg: transparent;
  --hbtn-fg: #ffffff;
  --hbtn-b:  rgba(255,255,255,0.35);
  --hbtn-hv: rgba(255,255,255,0.10);
}
.re-header--scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-1);
  --hfg:    var(--fg-1);
  --hfg-m:  var(--fg-2);
  --hbtn-bg: #ffffff;
  --hbtn-fg: var(--re-blue);
  --hbtn-b:  var(--re-blue);
  --hbtn-hv: var(--re-blue-sky);
}
.re-header__inner {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: 14px var(--sp-6); max-width: 1200px; margin: 0 auto;
}
.re-wordmark {
  display: flex; align-items: center; gap: 10px;
  font-weight: var(--fw-semibold); font-size: 15px; letter-spacing: -0.01em;
  color: var(--hfg);
  transition: color var(--dur-base) var(--ease-standard);
  flex-shrink: 0;
}
.re-wordmark img { width: 28px; height: 28px; border-radius: 5px; display: block; }
.re-nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-5); }
.re-nav a {
  font-size: 14px; font-weight: var(--fw-medium);
  color: var(--hfg-m);
  transition: color var(--dur-fast) var(--ease-standard);
}
.re-nav a:hover, .re-nav a.active { color: var(--hfg); }
.re-header .re-btn {
  background: var(--hbtn-bg); color: var(--hbtn-fg); border-color: var(--hbtn-b);
}
.re-header .re-btn:hover { background: var(--hbtn-hv); color: var(--hbtn-fg); }

/* Hamburger */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--hfg); border-radius: 2px;
  transition: background var(--dur-base) var(--ease-standard);
}

/* Hero sits behind transparent header */
main { margin-top: -64px; }

/* ── HERO ── */
.re-hero {
  background: linear-gradient(180deg, var(--re-blue-night) 0%, var(--re-blue) 100%);
  color: #fff;
  padding: 160px var(--sp-6) 120px;
}
.re-hero__inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.re-hero__title {
  font-size: clamp(44px, 6.2vw, 80px);
  font-weight: var(--fw-bold); line-height: 1.02; letter-spacing: -0.02em;
  color: #fff; margin: 8px 0 0;
}
.re-hero__title em { font-weight: 400; font-style: italic; color: #9fc0ef; }
.re-hero__lead { font-size: 20px; line-height: 1.55; color: #cbd7ea; max-width: 600px; margin: 8px 0 0; }
.re-hero__ctas { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ── SECTION ── */
.re-section { padding: var(--sp-10) 0; }
.re-section--tint { background: var(--bg-2); }
.re-section--sand { background: var(--re-sand); }
.re-section__title {
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--fg-1); margin: var(--sp-3) 0 0; max-width: 760px;
}

/* ── STATS BAR ── */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-8); text-align: center;
}
.stat-number { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: var(--fw-bold); color: var(--re-blue); line-height: 1; letter-spacing: -0.02em; }
.stat-label  { font-size: var(--fs-body-sm); color: var(--fg-3); margin-top: var(--sp-2); max-width: 220px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ── APPROACH COLUMNS ── */
.approach-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8);
  margin-top: var(--sp-8);
}
.approach-col {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding-top: var(--sp-5); border-top: 2px solid var(--re-blue);
}
.approach-col h3 { font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0; color: var(--fg-1); }
.approach-col p  { font-size: 15px; line-height: 1.6; margin: 0; }

/* ── STEPS ── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-8); margin-top: var(--sp-8); }
.step { padding-top: var(--sp-5); border-top: 2px solid var(--re-blue); display: flex; flex-direction: column; gap: var(--sp-3); }
.step-num { font-family: var(--font-mono); font-size: 12px; color: var(--re-blue); letter-spacing: 0.1em; }
.step h3 { font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0; }
.step p  { font-size: 15px; line-height: 1.6; margin: 0; }

/* ── CARDS ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-8); }
.re-card {
  background: var(--re-white); border-radius: var(--radius-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: var(--sp-4);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.re-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.re-card__icon { color: var(--re-blue); display: flex; align-items: center; }
.re-card__icon svg { width: 24px; height: 24px; stroke: var(--re-blue); stroke-width: 1.5; fill: none; }
.re-card h3 { font-size: 18px; font-weight: var(--fw-semibold); margin: 0; color: var(--fg-1); letter-spacing: -0.01em; }
.re-card p  { font-size: 15px; line-height: 1.6; margin: 0; }
.re-card ul { padding-left: var(--sp-5); display: flex; flex-direction: column; gap: 6px; }
.re-card ul li { font-size: 14px; color: var(--fg-2); line-height: 1.5; }

/* ── TWO COL ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center; }
.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }

/* ── QUOTE BAND ── */
.re-quote-band { background: var(--re-sand); padding: var(--sp-10) 0; }
.re-quote-band .container { max-width: 960px; display: flex; flex-direction: column; gap: var(--sp-6); }
.re-quote {
  font-family: var(--font-sans); font-weight: var(--fw-light); font-style: italic;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -0.015em;
  color: var(--re-ink); margin: 0; max-width: 880px;
}
.re-quote-attrib { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--re-gray-700); }

/* ── TEAM ── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-6); }
.team-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.team-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--bg-3); display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: var(--fw-semibold); color: var(--re-blue); border: 2px solid var(--border-1);
}
.team-card h3 { font-size: 18px; margin: 0; }
.team-card p  { font-size: var(--fs-body-sm); margin: 0; }

/* ── BLOG ── */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-8); }
.blog-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--re-white); transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.blog-card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.blog-meta { font-size: var(--fs-caption); color: var(--fg-3); }
.blog-card h3 { font-size: 18px; font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.blog-card h3 a { color: var(--fg-1); }
.blog-card h3 a:hover { color: var(--re-blue); }
.blog-card p { font-size: 14px; margin: 0; line-height: 1.6; }
.blog-card__foot { padding-top: var(--sp-3); border-top: 1px solid var(--border-1); margin-top: var(--sp-2); }
.re-tag {
  display: inline-block; padding: 3px 10px;
  background: var(--bg-3); color: var(--re-blue);
  border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.04em; margin: 3px 3px 0 0;
}

/* ── TOOLS LIST ── */
.tools-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-7); }
.tool-item {
  display: flex; align-items: flex-start; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--re-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard);
  text-decoration: none; color: inherit; border: 1px solid var(--border-1);
}
.tool-item:hover { box-shadow: var(--shadow-md); border-color: var(--re-blue-sky); }
.tool-item__icon { color: var(--re-blue); flex-shrink: 0; margin-top: 2px; }
.tool-item__icon svg { width: 22px; height: 22px; stroke: var(--re-blue); stroke-width: 1.5; fill: none; }
.tool-item__info h3 { font-size: 15px; font-weight: var(--fw-semibold); color: var(--fg-1); margin-bottom: 4px; }
.tool-item__info p  { font-size: var(--fs-body-sm); color: var(--fg-3); margin: 0; line-height: 1.5; }
.tool-item__dl { margin-left: auto; flex-shrink: 0; align-self: center; color: var(--re-blue-mid); }
.tool-item__dl svg { width: 18px; height: 18px; stroke: var(--re-blue-mid); stroke-width: 1.5; fill: none; }

/* ── ARTICLE ── */
.article-header { background: linear-gradient(180deg, var(--re-blue-night) 0%, var(--re-blue) 100%); color: #fff; padding: 160px var(--sp-6) 80px; }
.article-header h1 { color: #fff; margin-bottom: var(--sp-5); max-width: 800px; }
.article-meta { color: rgba(255,255,255,0.65); font-size: var(--fs-body-sm); display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.article-body { max-width: 720px; margin: var(--sp-9) auto; padding: 0 var(--sp-5); }
.article-body h2 { font-size: var(--fs-h3); margin: var(--sp-8) 0 var(--sp-4); }
.article-body p  { margin-bottom: var(--sp-5); font-size: 17px; line-height: 1.75; color: var(--fg-1); }
.article-body blockquote {
  border-left: 3px solid var(--re-blue);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-7) 0;
  background: var(--re-sand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic; font-weight: var(--fw-light);
  font-size: 20px; line-height: 1.45;
  color: var(--re-ink);
}
.article-tags { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--border-1); }

/* ── CTA BAND ── */
.re-cta-band {
  background: linear-gradient(180deg, var(--re-blue-night) 0%, var(--re-blue) 100%);
  color: #fff; text-align: center; padding: var(--sp-10) 0;
}
.re-cta-band h2 { color: #fff; margin-bottom: var(--sp-4); }
.re-cta-band p  { color: #cbd7ea; max-width: 520px; margin: 0 auto var(--sp-7); font-size: var(--fs-body-lg); }

/* ── CALENDLY SECTION ── */
.re-calendly-section {
  background: var(--bg-2);
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--border-1);
}
.re-calendly-section__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-9);
  align-items: start;
}
.re-calendly-section__info { padding-top: var(--sp-7); }
.re-calendly-section__heading { margin-bottom: var(--sp-4); }
.re-calendly-section__lead { color: var(--fg-2); font-size: var(--fs-body-lg); margin-bottom: var(--sp-6); }
.re-calendly-section__meta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  color: var(--fg-brand); border: 1px solid var(--re-blue); border-radius: 999px;
  padding: var(--sp-1) var(--sp-4);
}
@media (max-width: 768px) {
  .re-calendly-section__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .re-calendly-section__info { padding-top: 0; text-align: center; }
}

/* ── CONTACT STRIP ── */
.contact-strip { background: var(--re-gray-50); border-top: 1px solid var(--border-1); padding: var(--sp-7) 0; text-align: center; }
.contact-strip a { color: var(--re-blue-mid); font-weight: var(--fw-medium); }

/* ── FOOTER ── */
.re-footer { background: var(--re-blue-night); color: #9fc0ef; padding: var(--sp-10) 0 var(--sp-5); }
.re-footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-9); }
.re-footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 260px; }
.re-footer__brand-row { display: flex; align-items: center; gap: 10px; }
.re-footer__brand-row img { width: 36px; height: 36px; border-radius: 5px; }
.re-footer__name { font-size: 16px; font-weight: var(--fw-semibold); color: #fff; letter-spacing: -0.01em; }
.re-footer__tag  { font-size: var(--fs-caption); color: #9fc0ef; line-height: 1.5; }
.re-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: var(--sp-8); }
.re-footer__h { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: #fff; margin-bottom: var(--sp-4); }
.re-footer__cols a { display: block; font-size: var(--fs-body-sm); color: #9fc0ef; padding: 3px 0; transition: color var(--dur-fast) var(--ease-standard); }
.re-footer__cols a:hover { color: #fff; }
.re-footer__base {
  max-width: 1200px; margin: 0 auto; padding: var(--sp-5) var(--sp-6) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--sp-3);
  font-size: 12px; color: #7ea0cf; font-family: var(--font-mono);
}
.re-footer__social { display: flex; gap: var(--sp-5); }
.re-footer__social a { color: #7ea0cf; font-size: 12px; transition: color var(--dur-fast) var(--ease-standard); }
.re-footer__social a:hover { color: #fff; }

/* ── EXPERIENCE TILES ── */
.experience-grid { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }
.experience-tile {
  flex: 1; min-width: 180px;
  background: var(--re-white); border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6); text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border-1);
}
.experience-tile strong { font-size: 15px; font-weight: var(--fw-semibold); color: var(--fg-1); display: block; line-height: 1.4; }

/* ── SECTION IMAGES ── */
.re-section-img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; box-shadow: var(--shadow-md); }
.re-process-img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; margin-top: var(--sp-8); margin-bottom: var(--sp-2); box-shadow: var(--shadow-md); }
.re-img-band { line-height: 0; overflow: hidden; }
.re-img-band img { width: 100%; height: auto; display: block; }

/* ── TEAM PREVIEW (homepage) ── */
.re-team-preview { display: flex; flex-direction: column; gap: var(--sp-5); }
.re-team-preview__card {
  display: flex; align-items: flex-start; gap: var(--sp-5);
  padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--bg-2);
}
.re-photo-placeholder {
  width: 64px; height: 64px; min-width: 64px; border-radius: var(--radius-lg);
  background: var(--re-blue-sky); border: 1.5px dashed var(--re-blue-mid);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.re-photo-placeholder svg { width: 26px; height: 26px; stroke: var(--re-blue); stroke-width: 1.5; fill: none; }
.re-team-preview__info { display: flex; flex-direction: column; gap: var(--sp-2); }
.re-team-preview__info strong { font-size: 16px; font-weight: var(--fw-semibold); color: var(--fg-1); }
.re-team-preview__info span { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--re-blue); }
.re-team-preview__info p { font-size: var(--fs-body-sm); margin: 0; line-height: 1.55; }

/* ── SITUATION CARDS ── */
.re-situation-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5); margin-top: var(--sp-7);
}
.re-situation-card {
  background: var(--bg-1); border-radius: var(--radius-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border-1);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.re-situation-card:hover { box-shadow: var(--shadow-md); border-color: var(--re-blue); }
.re-situation-num { font-family: var(--font-mono); font-size: 12px; color: var(--re-blue); letter-spacing: 0.1em; }
.re-situation-card h3 { font-size: 17px; font-weight: var(--fw-semibold); margin: 0; color: var(--fg-1); letter-spacing: -0.01em; line-height: 1.3; }
.re-situation-card p { font-size: 15px; line-height: 1.6; margin: 0; }
.re-situation-footer { margin-top: var(--sp-7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.re-situation-footer p { font-size: var(--fs-body-lg); font-style: italic; font-weight: var(--fw-light); color: var(--fg-1); max-width: 600px; margin: 0; }

/* ── PARTNER CARD (AI Leader Lab) ── */
.re-partner-card {
  background: linear-gradient(135deg, var(--re-blue-night) 0%, var(--re-blue) 100%);
  border-radius: var(--radius-xl); padding: var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-4);
  box-shadow: var(--shadow-brand);
}
.re-partner-card__label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: #9fc0ef; }
.re-partner-card__quote { font-size: clamp(20px, 2.2vw, 26px); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin: 0; }
.re-partner-card__body { font-size: 15px; line-height: 1.6; color: #cbd7ea; margin: 0; }
.re-partner-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: var(--fw-semibold); color: #9fc0ef; transition: color var(--dur-fast) var(--ease-standard); }
.re-partner-card__link:hover { color: #fff; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  section, .re-section { padding: 64px 0; }
  .re-hero { padding: 120px var(--sp-5) 80px; }
  .article-header { padding: 120px var(--sp-5) 60px; }
  .two-col { grid-template-columns: 1fr; gap: var(--sp-8); }
  .two-col.reverse { direction: ltr; }
  .approach-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .re-footer__inner { flex-direction: column; }
  .re-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .re-nav { display: none; }
  .re-nav.open { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); position: absolute; top: 64px; left: 0; right: 0; background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); padding: var(--sp-5) var(--sp-6) var(--sp-6); border-bottom: 1px solid var(--border-1); box-shadow: var(--shadow-lg); }
  .re-nav.open a { color: var(--fg-1); font-size: 15px; }
  .re-nav.open .re-btn { margin-top: var(--sp-2); }
  .nav-toggle { display: flex; }
  main { margin-top: -64px; }
  .re-team-preview__card { flex-direction: column; }
  .re-situation-grid { grid-template-columns: 1fr; }
}