/* ==========================================================
   JAYKAY | ONE VISION, MULTIPLE SOLUTIONS
   All foreground content is editable HTML/CSS/SVG.
   Background photography and original logos are separate files
   in ./assets. Replace the two href values with your Flask routes.
   ========================================================== */
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
body{color:var(--white);background:#000;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}
h1,p{margin:0}
:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* Desktop: exactly two equal cards, 10px outer inset and 10px gap.
   Footer is inside the viewport; the document itself never scrolls. */
.landing{
  width:100%;
  height:100vh;height:100svh;
  padding:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) var(--footer-h);
  gap:var(--gap);
  overflow:hidden;
  background:#000;
}
.card{
  min-width:0;min-height:0;position:relative;isolation:isolate;
  overflow:hidden;border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  padding:clamp(20px,3.2vh,36px) clamp(22px,3vw,48px) clamp(20px,3vh,34px);
  background:#26384b;
  transition:box-shadow .35s ease,transform .35s ease;
}
.card:hover{box-shadow:0 20px 54px rgba(0,0,0,.26)}
.card__photo{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center}
.card--medical .card__photo{background-image:url("../images/medical-background.jpg");background-position:48% center}
.card--inc .card__photo{background-image:url("../images/inc-background.jpg");background-position:center 42%}
/* Bright, warm overlays retain the photographic life instead of a dark veil. */
.card--medical::before,.card--inc::before{content:"";position:absolute;inset:0;z-index:-2}
.card--medical::before{
  background:
    linear-gradient(105deg,rgba(8,37,71,.73) 0%,rgba(10,53,94,.48) 48%,rgba(14,67,112,.24) 100%),
    linear-gradient(0deg,rgba(5,25,48,.64),transparent 47%,rgba(6,30,55,.12));
}
.card--inc::before{
  background:
    linear-gradient(105deg,rgba(32,22,12,.70) 0%,rgba(58,40,20,.44) 49%,rgba(46,32,16,.20) 100%),
    linear-gradient(0deg,rgba(18,12,6,.70),transparent 48%,rgba(20,14,7,.10));
}
.card__tint{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.42}
.card--medical .card__tint{background:linear-gradient(120deg,rgba(20,95,140,.16),transparent 65%)}
.card--inc .card__tint{background:linear-gradient(120deg,rgba(140,160,190,.16),transparent 70%)}
.card__top{display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:1}
.logo{object-fit:contain;object-position:left center;width:auto;filter:drop-shadow(0 3px 12px rgba(0,0,0,.22))}
.card--medical .logo{height:clamp(82px,13vh,142px);max-width:62%}
.card--inc .logo{height:clamp(100px,17vh,178px);max-width:62%}
.motto{
  margin-top:clamp(10px,1.7vh,18px);
  font-size:clamp(10px,.95vw,15px);font-weight:600;letter-spacing:.16em;
  line-height:1.5;text-transform:uppercase;text-wrap:balance;
}
.card--medical .motto{color:#fff}
.card--inc .motto{color:#fff;letter-spacing:.16em}
.card__content{position:relative;z-index:1;margin-top:auto;padding-top:clamp(14px,2vh,24px)}
.kicker{
  text-transform:uppercase;font-weight:650;letter-spacing:.22em;
  font-size:clamp(10px,.86vw,14px);line-height:1.4;margin-bottom:clamp(8px,1.2vh,14px)
}
.card--medical .kicker{color:#e8f7ff}
.card--inc .kicker{color:var(--gold-light)}
.headline{
  font-size:clamp(34px,3.35vw,58px);line-height:.98;letter-spacing:-.045em;
  font-weight:800;text-wrap:balance;max-width:17ch;
  text-shadow:0 2px 18px rgba(0,0,0,.18)
}
.card--medical .headline{font-size:clamp(32px,2.9vw,46px);line-height:.98}
    .description{
  font-size:clamp(13px,1.05vw,17px);line-height:1.42;
  max-width:48ch;margin-top:clamp(10px,1.5vh,17px);
  text-shadow:0 1px 10px rgba(0,0,0,.18)
}
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  min-height:clamp(44px,5.5vh,58px);padding:0 clamp(18px,2vw,30px);
  margin-top:clamp(16px,2.5vh,26px);width:fit-content;max-width:100%;
  border:1.5px solid currentColor;border-radius:5px;
  font-size:clamp(10px,.91vw,14px);font-weight:750;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(13,37,62,.42);backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.card--medical .cta{color:#fff;border-color:#14589f;background:linear-gradient(135deg,#0b3f7c 0%,#14589f 100%);box-shadow:0 6px 16px -8px rgba(11,63,124,.75)}
.card--inc .cta{color:#2a1808;border-color:#e9c675;background:linear-gradient(135deg,#f0d08c 0%,#cf9f4e 55%,#9c6a30 100%)}
.cta:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.card--medical .cta:hover{background:linear-gradient(135deg,#0d4b91 0%,#1967b5 100%);filter:brightness(1.12);box-shadow:0 10px 20px -8px rgba(11,63,124,.8)}
.card--inc .cta:hover{background:linear-gradient(135deg,#f6dda0 0%,#dcae57 55%,#aa7639 100%)}
.cta-arrow{font-size:1.55em;line-height:.7;transition:transform .25s ease}
.cta:hover .cta-arrow{transform:translateX(4px)}
.categories{
  position:relative;z-index:1;display:grid;align-items:start;
  gap:clamp(6px,1.2vw,18px);margin-top:clamp(22px,3.7vh,40px)
}
.card--medical .categories{grid-template-columns:repeat(4,minmax(0,1fr))}
.card--inc .categories{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(4px,.75vw,12px)}
.category{
  min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:7px;text-transform:uppercase;font-weight:700;
  font-size:clamp(9px,.78vw,12px);line-height:1.25;letter-spacing:.015em;overflow-wrap:anywhere;
  transition:transform .25s ease,color .25s ease
}
.category:hover{transform:translateY(-4px)}
.card--medical .category:hover{color:#bceeff}
.card--inc .category:hover{color:#d8cfa8}
.category svg{
  width:clamp(27px,2.7vw,43px);height:clamp(27px,2.7vw,43px);
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.card--medical .category svg{color:#fff}
.card--inc .category svg{color:var(--gold)}
.category span{display:block;width:100%;max-width:100%;white-space:normal;overflow-wrap:break-word;hyphens:auto}

/* Original footer phrase from the supplied landing page. */
.vision{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:clamp(5px,.7vw,10px);
  color:#d9cfa8;text-align:center;text-transform:uppercase;
  font-size:clamp(12px,1vw,16px);font-weight:600;letter-spacing:.13em;
  white-space:nowrap;min-width:0;
  background:#000;border-radius:8px;padding:clamp(6px,1vh,10px) clamp(14px,2vw,22px);
}
.vision__rule{height:1px;width:clamp(16px,3vw,44px);background:linear-gradient(90deg,transparent,#a89665)}
.vision__rule:last-child{background:linear-gradient(270deg,transparent,#a89665)}
.vision__dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#b39f5c;margin:0 8px;vertical-align:middle}

/* Tablet and phone: same-width cards stack in Medical -> Inc order.
   Each panel can breathe and the page scrolls naturally on short screens. */
@media(max-width:800px){
  body{background:#000}
  .landing{
    height:auto;min-height:100svh;overflow:visible;
    display:flex;flex-direction:column;padding:10px;gap:10px
  }
  .card{width:100%;min-height:min(790px,100svh);padding:28px clamp(20px,6vw,38px) 28px}
  .card--medical .logo{height:clamp(88px,24vw,132px);max-width:75%}
  .card--inc .logo{height:clamp(112px,30vw,166px);max-width:75%}
  .motto{font-size:clamp(9px,2.6vw,12px);letter-spacing:.22em}
  .card__content{padding-top:28px}
  .kicker{font-size:11px;letter-spacing:.19em}
  .headline{font-size:clamp(38px,11.5vw,62px);line-height:.96;max-width:16ch}
  .card--medical .headline{font-size:clamp(38px,11.5vw,62px);line-height:.96}
  .description{font-size:clamp(15px,3.8vw,18px);max-width:38ch}
  .cta{min-height:52px;font-size:12px}
  .categories{margin-top:36px;gap:10px}
  .category{font-size:clamp(8px,2.15vw,11px);gap:6px;min-width:0;line-height:1.2}
  .category svg{width:clamp(30px,8vw,38px);height:clamp(30px,8vw,38px)}
  .vision{min-height:58px;gap:7px;font-size:clamp(12px,3.6vw,16px);letter-spacing:.10em}
  .vision__rule{width:clamp(12px,5vw,38px)}
}
@media(max-width:390px){
  .card{padding-inline:18px}
  .categories{gap:5px}
  .category{font-size:7.5px;letter-spacing:0;line-height:1.15}
  .category svg{width:32px;height:32px}
  .vision{letter-spacing:.055em;gap:5px;font-size:clamp(11px,3.5vw,14px)}
  .vision__dot{margin:0 3px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ===== Reference-image finishing pass ===== */
.card{
  border:2px solid transparent;
  border-radius:var(--card-radius);
  background-clip:padding-box;
  transition:border-color .28s ease, box-shadow .32s ease, transform .32s ease;
}
.card--medical{
  border-color:rgba(79,171,201,.85);
  box-shadow:0 0 0 1px rgba(79,171,201,.16),0 0 16px rgba(79,171,201,.14),0 12px 34px rgba(0,0,0,.24);
}
.card--inc{
  border-color:rgba(216,168,96,.9);
  box-shadow:0 0 0 1px rgba(216,168,96,.2),0 0 18px rgba(154,102,48,.22),0 12px 34px rgba(0,0,0,.26);
}
.card--medical:hover,.card--medical:focus-within{
  border-color:#a9d4e8;
  box-shadow:0 0 0 1px rgba(169,212,232,.5),0 0 14px rgba(79,171,201,.7),0 0 36px rgba(79,171,201,.4),0 18px 48px rgba(0,0,0,.34);
  transform:translateY(-2px);
}
.card--inc:hover,.card--inc:focus-within{
  border-color:#f0d18e;
  box-shadow:0 0 0 1px rgba(240,209,142,.55),0 0 16px rgba(203,168,100,.7),0 0 30px rgba(154,102,48,.45),0 18px 48px rgba(0,0,0,.36);
  transform:translateY(-2px);
}
.kicker{
  font-family:"Inter Tight","Inter",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.12em;
}
.card--medical .kicker{color:var(--medical-accent)}
.card--inc .kicker{color:var(--inc-accent)}
.card--medical .cta{border-color:var(--medical-accent);color:#e9fbff;background:linear-gradient(135deg,#0b3f7c 0%,#14589f 100%);box-shadow:0 0 0 1px rgba(79,171,201,.20),0 6px 16px -8px rgba(11,63,124,.75)}
.card--inc .cta{border-color:#e9c675;color:#2a1808;box-shadow:0 0 0 1px rgba(233,198,117,.45),0 6px 20px rgba(0,0,0,.32)}
.card--medical .category svg{color:var(--medical-accent)}
.card--inc .category svg{color:var(--inc-accent)}
.card--inc .category{font-size:clamp(8px,.7vw,11px);letter-spacing:0;overflow-wrap:anywhere;word-break:normal}
.card--inc .categories{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(5px,.8vw,12px)}
.vision{letter-spacing:.15em}
.vision__rule{width:clamp(24px,6vw,90px)}
@media(max-width:800px){
  .card--inc .category{font-size:clamp(7px,2vw,10px);line-height:1.15;overflow-wrap:anywhere}
  .card--inc .categories{column-gap:5px}
  .vision{font-size:clamp(12px,3.5vw,16px);letter-spacing:.09em;gap:8px}
  .vision__rule{width:clamp(12px,4vw,30px)}
}
@media(max-width:390px){
  .card--inc .category{font-size:7px;letter-spacing:-.02em}
  .card--inc .category svg{width:29px;height:29px}
}


/* ===== Balanced landing-card hierarchy ===== */
.card {
  padding: clamp(24px, 3.6vh, 42px) clamp(24px, 3.2vw, 52px) clamp(24px, 3.4vh, 38px);
}
.card__top {
  min-height: clamp(136px, 18vh, 184px);
}
.card--medical .logo,
.card--inc .logo {
  height: clamp(112px, 15vh, 158px);
  max-width: 64%;
}
/* The supplied Medical JPEG has generous internal white space. Scale it
   inside the same visual logo area used by Inc so the marks read equally. */
.card--medical .logo {
  transform: scale(0.92);
  transform-origin: left center;
}
.card--inc .logo {
  transform: scale(1.02);
  transform-origin: left center;
}
.card__content {
  margin-top: 0;
  padding-top: clamp(18px, 2.6vh, 30px);
  min-height: clamp(260px, 34vh, 340px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card--medical .headline,
.card--inc .headline {
  font-size: clamp(36px, 3.35vw, 58px);
  line-height: .98;
}
.kicker {
  font-size: clamp(13px, 1.08vw, 18px);
  font-weight: 800;
  letter-spacing: .16em;
  margin-bottom: clamp(10px, 1.4vh, 16px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .52);
}
.card--medical .kicker { color: #bceeff; }
.card--inc .kicker { color: #f0d08c; }
.card--inc .motto {
  padding: 8px 14px;
  border-left: 3px solid #e0b062;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(90deg, rgba(58, 38, 16, .88), rgba(94, 66, 30, .55), transparent);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .28);
  color: #f5ecd8;
}
.card--medical .motto {
  padding: 8px 14px;
  border-left: 3px solid #75d8f3;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(90deg, rgba(5, 38, 78, .88), rgba(24, 113, 168, .55), transparent);
}
@media (max-width: 800px) {
  .card__top { min-height: 156px; }
  .card--medical .logo,
  .card--inc .logo { height: clamp(112px, 29vw, 158px); }
  .card__content { min-height: 0; }
  .card--medical .headline,
  .card--inc .headline { font-size: clamp(38px, 11.5vw, 62px); }
}

/* ===== Mobile-only rebuild: fills the viewport with no scroll, flush
   cards split by a thin black divider, no border/glow, popped icon
   labels. Desktop rules above are untouched; this block only takes
   effect at <=800px and fully supersedes the mobile rules above it. ===== */
@media (max-width: 800px) {
  html, body { overflow: hidden; }
  .landing {
    height: 100vh; height: 100svh;
    overflow: hidden;
    display: flex; flex-direction: column;
    padding: 0; gap: 4px;
  }
  /* Every clamp()'s minimum and vh-based middle value here are UNCHANGED
     from the version measured at zero overflow on a 320x568 screen -- the
     smallest realistic phone. Only the clamp's upper ceiling is raised, so
     screens with extra vertical room (i.e. almost everything above the
     smallest phone) render noticeably bigger text; the tightest phone is
     untouched and stays overflow-safe. justify-content:space-between then
     turns any still-unused space into breathing room BETWEEN the logo
     block, copy block and icon row -- it only ever adds space, never
     forces layout to grow past the card, so it can't introduce scrolling. */
  .card {
    width: 100%; min-height: 0; flex: 1 1 0;
    border: none; border-color: transparent; border-radius: 0;
    box-shadow: none; background-clip: border-box;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(8px,2.2vh,20px) clamp(16px,5.5vw,32px) clamp(6px,1.6vh,14px);
  }
  .card:hover,
  .card--medical:hover, .card--medical:focus-within,
  .card--inc:hover, .card--inc:focus-within {
    transform: none; box-shadow: none; border-color: transparent;
  }
  .card__top { min-height: 0; display: flex; flex-direction: column; align-items: flex-start; }
  .card--medical .logo, .card--inc .logo {
    height: clamp(30px,7vh,70px); max-width: 60%; transform: none;
    border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.45); background: #fff;
  }
  .motto {
    margin-top: clamp(3px,.8vh,7px); font-size: clamp(7px,1.5vh,14px);
    letter-spacing: .14em; line-height: 1.3;
  }
  .card--medical .motto, .card--inc .motto {
    padding: 0; border-left: none; border-radius: 0; background: none; box-shadow: none; color: #fff;
  }
  .card__content {
    min-height: 0; margin-top: 0; padding-top: clamp(2px,1vh,12px);
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .kicker { font-size: clamp(8px,1.5vh,16px); margin-bottom: clamp(2px,.6vh,9px); letter-spacing: .14em; }
  .card--medical .headline, .card--inc .headline,
  .headline { font-size: clamp(15px,4vh,38px); line-height: 1.06; max-width: 16ch; }
  .description { font-size: clamp(8px,1.7vh,18px); margin-top: clamp(2px,.8vh,14px); line-height: 1.32; }
  .cta {
    min-height: clamp(20px,3.8vh,46px); font-size: clamp(7px,1.4vh,14px);
    margin-top: clamp(4px,1.1vh,18px); padding: 0 clamp(10px,2.6vw,26px);
  }
  .categories { margin-top: clamp(4px,1.4vh,22px); gap: clamp(3px,1.2vw,10px); }
  .card--inc .categories { gap: clamp(2px,.9vw,8px); }
  .category, .card--inc .category { font-size: clamp(6px,1.25vh,12px); gap: clamp(2px,.6vh,8px); line-height: 1.15; }
  .category svg { width: clamp(13px,3.6vh,34px); height: clamp(13px,3.6vh,34px); }
  .category span {
    display: inline-block; width: auto; max-width: 100%;
    padding: clamp(1.5px,.5vh,5px) clamp(3px,1.2vw,9px);
    border-radius: 5px; background: rgba(4,10,18,.55);
  }
  .vision { font-size: clamp(9px,1.9vh,12px); padding: clamp(8px,1.8vh,14px) 16px; letter-spacing: .1em; border-radius: 0; }
  .vision__rule { width: clamp(16px,6vw,32px); }
}
@media (max-width: 390px) {
  .category span { font-size: 6px; }
}


/* ==========================================================
   LANDING PAGE — LARGE DESKTOP SPACE UTILIZATION
   1001px+ is always the desktop composition. Never switch to
   the mobile card treatment at these widths.
   ========================================================== */
@media (min-width: 1001px) {
  .landing {
    grid-template-rows: minmax(0, 1fr) var(--footer-h);
  }

  .card {
    padding-inline: clamp(32px, 4vw, 72px);
    padding-top: clamp(30px, 4vh, 52px);
    padding-bottom: clamp(26px, 3.5vh, 44px);
  }

  /* Let the middle copy breathe into the vertical space instead of
     leaving an unused void between the branding and icon row. */
  .card__content {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: clamp(24px, 3vh, 42px);
    padding-bottom: clamp(20px, 3vh, 38px);
    justify-content: center;
  }

  .headline {
    font-size: clamp(40px, 3.6vw, 64px);
  }

  .description {
    font-size: clamp(15px, 1.15vw, 19px);
    max-width: 52ch;
  }

  .cta {
    min-height: clamp(48px, 5.8vh, 62px);
    margin-top: clamp(18px, 2.8vh, 30px);
  }

  .categories {
    margin-top: clamp(12px, 2vh, 24px);
  }

  /* Give desktop icon labels the requested visible backing while keeping
     each label compact so the row remains clean and balanced. */
  .category span {
    width: auto;
    max-width: 100%;
    padding: clamp(4px, .45vh, 7px) clamp(7px, .55vw, 11px);
    border-radius: 5px;
    background: rgba(4, 10, 18, .52);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
  }

  .card--inc .category span {
    background: rgba(18, 13, 8, .52);
  }
}

/* Ultra-wide screens: use the extra canvas rather than allowing the
   composition to look compressed in the middle of the two cards. */
@media (min-width: 1600px) {
  .card {
    padding-inline: clamp(48px, 5vw, 96px);
  }

  .card__top {
    min-height: clamp(150px, 19vh, 205px);
  }

  .card__content {
    padding-top: clamp(28px, 4vh, 48px);
    padding-bottom: clamp(26px, 4vh, 46px);
  }

  .headline {
    font-size: clamp(46px, 3.25vw, 68px);
  }

  .description {
    max-width: 56ch;
  }

  .categories {
    margin-top: clamp(18px, 2.5vh, 30px);
  }
}

/* ==========================================================
   LANDING PAGE — MOBILE READABILITY
   Keep the proven mobile composition, but give the labels more
   readable type and reclaim vertical space from the motto.
   ========================================================== */
@media (max-width: 800px) {
  .motto {
    margin-top: 2px;
    font-size: clamp(7px, 1.25vh, 11px);
    line-height: 1.05;
    letter-spacing: .10em;
    white-space: nowrap;
  }

  .card__content {
    padding-top: 0;
  }

  .categories {
    margin-top: clamp(5px, 1vh, 12px);
    gap: clamp(4px, 1.4vw, 8px);
  }

  .card--inc .categories {
    gap: clamp(3px, 1.1vw, 7px);
  }

  .category,
  .card--inc .category {
    font-size: clamp(8px, 2.35vw, 11px);
    gap: clamp(2px, .45vh, 6px);
    line-height: 1.12;
  }

  .category svg {
    width: clamp(15px, 3.8vh, 34px);
    height: clamp(15px, 3.8vh, 34px);
  }

  .category span {
    width: auto;
    max-width: 100%;
    padding: clamp(2px, .35vh, 4px) clamp(4px, 1vw, 7px);
    border-radius: 4px;
    background: rgba(4, 10, 18, .62);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  }
}

@media (max-width: 390px) {
  .motto {
    font-size: 7px;
    letter-spacing: .075em;
  }

  .category,
  .card--inc .category {
    font-size: 8px;
  }

  .category span {
    padding-inline: 3px;
  }
}

/* ==========================================================
   FINAL LANDING-PAGE RESPONSIVE PASS
   - The One Vision footer is kept compact so it never steals
     meaningful card space on short/mobile screens.
   - Desktop scales continuously with the available viewport,
     including very-wide screens (2000px, 3000px+).
   - Motto labels use the same readable background treatment on
     mobile as desktop.
   - No element is positioned over another; all growth stays in
     normal flex/grid flow.
   ========================================================== */

/* The footer is a separator, not a content section. Keep it visually
   present while returning its excess height to the two landing cards. */
.vision {
  min-height: 0;
  height: clamp(34px, 5vh, 56px);
  padding-block: clamp(4px, .7vh, 8px);
}

@media (min-width: 1001px) {
  .card {
    padding-top: clamp(30px, 3.8vh, 56px);
    padding-bottom: clamp(24px, 3.2vh, 46px);
    padding-inline: clamp(32px, 4.2vw, 100px);
  }

  /* The branding block grows with the viewport without becoming
     disproportionately tall on wide-but-short displays. */
  .card__top {
    min-height: clamp(145px, min(20vh, 16vw), 270px);
  }

  .card--medical .logo,
  .card--inc .logo {
    height: clamp(108px, min(18vh, 10vw), 230px);
    max-width: 68%;
  }

  .card--medical .logo { transform: scale(.94); }
  .card--inc .logo { transform: scale(1.04); }

  .motto {
    margin-top: clamp(8px, 1.15vh, 16px);
    font-size: clamp(10px, min(1.05vw, 1.45vh), 18px);
    line-height: 1.2;
    letter-spacing: .15em;
  }

  /* Use the middle of the card as flexible breathing space. */
  .card__content {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: clamp(22px, 3vh, 44px);
    padding-bottom: clamp(22px, 3vh, 44px);
  }

  .kicker {
    font-size: clamp(12px, min(1.12vw, 1.5vh), 19px);
  }

  .headline,
  .card--medical .headline,
  .card--inc .headline {
    font-size: clamp(40px, min(4.2vw, 5.2vh), 88px);
    line-height: .97;
  }

  .description {
    font-size: clamp(14px, min(1.18vw, 1.55vh), 21px);
    margin-top: clamp(10px, 1.45vh, 20px);
  }

  .cta {
    min-height: clamp(46px, min(5.8vh, 3.6vw), 68px);
    margin-top: clamp(16px, 2.4vh, 30px);
    padding-inline: clamp(18px, 1.8vw, 34px);
    font-size: clamp(10px, min(.9vw, 1.2vh), 15px);
  }

  .categories {
    margin-top: clamp(14px, 2.2vh, 32px);
    gap: clamp(8px, 1.25vw, 24px);
  }

  .card--inc .categories {
    column-gap: clamp(7px, 1vw, 20px);
  }

  .category,
  .card--inc .category {
    font-size: clamp(9px, min(1.15vw, 1.5vh), 18px);
    line-height: 1.18;
    gap: clamp(5px, .65vh, 10px);
  }

  .category svg {
    width: clamp(28px, min(3.5vw, 5vh), 64px);
    height: clamp(28px, min(3.5vw, 5vh), 64px);
  }

  .category span {
    padding: clamp(4px, .45vh, 8px) clamp(7px, .55vw, 13px);
    border-radius: clamp(4px, .3vw, 7px);
  }

  .vision {
    font-size: clamp(10px, min(.9vw, 1.2vh), 16px);
    letter-spacing: .14em;
  }
}

/* Extra-wide displays: make the hierarchy visibly scale rather than
   leaving a huge canvas around tiny 43px icons and 68px headlines. */
@media (min-width: 2200px) {
  .card {
    padding-inline: clamp(60px, 4.5vw, 125px);
  }

  .card__top {
    min-height: clamp(190px, min(21vh, 16vw), 300px);
  }

  .card--medical .logo,
  .card--inc .logo {
    height: clamp(150px, min(18.5vh, 10vw), 250px);
  }

  .motto {
    font-size: clamp(13px, min(1.08vw, 1.5vh), 20px);
    margin-top: clamp(10px, 1.25vh, 18px);
  }

  .headline,
  .card--medical .headline,
  .card--inc .headline {
    font-size: clamp(54px, min(4.25vw, 5.3vh), 92px);
  }

  .kicker { font-size: clamp(14px, min(1.12vw, 1.5vh), 20px); }
  .description { font-size: clamp(16px, min(1.18vw, 1.55vh), 23px); }

  .category,
  .card--inc .category {
    font-size: clamp(12px, min(1.16vw, 1.55vh), 20px);
  }

  .category svg {
    width: clamp(42px, min(3.7vw, 5.2vh), 70px);
    height: clamp(42px, min(3.7vw, 5.2vh), 70px);
  }
}

@media (min-width: 2800px) {
  .card__top {
    min-height: clamp(220px, 21vh, 320px);
  }

  .card--medical .logo,
  .card--inc .logo {
    height: clamp(180px, 18.5vh, 270px);
  }

  .headline,
  .card--medical .headline,
  .card--inc .headline {
    font-size: clamp(64px, min(4.3vw, 5.4vh), 100px);
  }

  .category,
  .card--inc .category {
    font-size: clamp(14px, min(1.18vw, 1.6vh), 22px);
  }

  .category svg {
    width: clamp(50px, min(3.8vw, 5.3vh), 76px);
    height: clamp(50px, min(3.8vw, 5.3vh), 76px);
  }
}

/* Mobile: reclaim the footer's excess height and make the important
   motto/category labels readable without changing the proven layout. */
@media (max-width: 800px) {
  .vision {
    height: clamp(32px, 4.8vh, 46px);
    min-height: 32px;
    padding: 3px 12px;
    font-size: clamp(9px, 2.7vw, 13px);
    letter-spacing: .08em;
  }

  .vision__rule { width: clamp(14px, 5vw, 28px); }

  /* A deliberate breathing gap below each logo. */
  .motto {
    margin-top: clamp(5px, .9vh, 9px);
    font-size: clamp(7.5px, 1.35vh, 11px);
    line-height: 1.15;
    letter-spacing: .085em;
    padding: clamp(3px, .5vh, 5px) clamp(6px, 1.5vw, 10px) !important;
    border-left: 3px solid !important;
    border-radius: 0 5px 5px 0 !important;
    background: linear-gradient(90deg, rgba(5,38,78,.88), rgba(24,113,168,.55), transparent) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.24) !important;
    color: #fff !important;
  }

  .card--inc .motto {
    background: linear-gradient(90deg, rgba(58,38,16,.88), rgba(94,66,30,.55), transparent) !important;
    border-left-color: #e0b062 !important;
    color: #f5ecd8 !important;
  }

  .card--medical .motto { border-left-color: #75d8f3 !important; }

  .category,
  .card--inc .category {
    font-size: clamp(8.5px, 2.5vw, 12px);
    line-height: 1.12;
  }

  .category span {
    padding: clamp(2px, .35vh, 4px) clamp(4px, 1vw, 8px);
    border-radius: 4px;
    background: rgba(4,10,18,.62);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
  }

  .card--inc .category span {
    background: rgba(18,13,8,.62);
  }
}

@media (max-width: 390px) {
  .vision {
    height: 32px;
    padding-inline: 8px;
    font-size: 9px;
  }

  .motto {
    margin-top: 5px;
    font-size: 7.5px;
    letter-spacing: .065em;
  }

  .category,
  .card--inc .category {
    font-size: 8.5px;
  }
}

/* Use the mobile composition on phones, tablets, and narrow laptop windows. */
@media (max-width: 1000px) {
  html, body { overflow: auto; }
  .landing {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 4px;
  }
  .card {
    width: 100%;
    min-height: clamp(420px, 50svh, 680px);
    flex: 1 0 auto;
    border-radius: 0;
  }
  .vision { border-radius: 0; }
}

/* Keep calls to action easy to read and visually balanced at every width. */
.cta {
  width: fit-content;
  min-width: min(100%, 220px);
  min-height: 54px;
  padding-inline: clamp(22px, 2.2vw, 36px);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 750;
  letter-spacing: .07em;
  line-height: 1.25;
}

@media (max-width: 1000px) {
  .cta {
    min-width: min(100%, 240px);
    min-height: 54px;
    font-size: clamp(14px, 2vw, 17px);
  }
}